Skip to content

Replace hard coded reference to CSS vars with imported react-tokens #9116

@nicolethoen

Description

@nicolethoen

Sprinkled throughout the react code, we have hardcoded references to various CSS variables.
How that we are using versioned CSS variables, this will require ongoing maintenance unless we replace these hardcoded values with react tokens.

For example, the following code snippet from DataList/examples/DataListWidthModifiers.tsx

Screenshot 2023-05-10 at 9 32 30 AM

could be importing the CSS vars

import { global_Color_100 } from '@patternfly/react-tokens/dist/esm/global_Color_100';
import { global_BackgroundColor_100 } from '@patternfly/react-tokens/dist/esm/global_BackgroundColor_100';
import { global_BorderWidth_sm } from '@patternfly/react-tokens/dist/esm/global_BorderWidth_sm';

color: `var(${global_Color_100.name})`,
backgroundColor: `var(${global_BackgroundColor_100.name})`,
border: `var(${global_BorderWidth_sm.name}) solid`

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions