Skip to content

Update usage of text-decoration tokens #6869

@mcoker

Description

@mcoker

We have these cool new tokens to sprinkle on our components:

--pf-t--global--text-decoration--line--100: none;
--pf-t--global--text-decoration--line--200: underline;
--pf-t--global--text-decoration--style--100: solid;
--pf-t--global--text-decoration--style--200: dashed;

--pf-t--global--text-decoration--editable-text--line--default: var(--pf-t--global--text-decoration--line--200);
--pf-t--global--text-decoration--editable-text--line--hover: var(--pf-t--global--text-decoration--line--200);
--pf-t--global--text-decoration--editable-text--style--default: var(--pf-t--global--text-decoration--style--200);
--pf-t--global--text-decoration--editable-text--style--hover: var(--pf-t--global--text-decoration--style--200);
--pf-t--global--text-decoration--help-text--line--default: var(--pf-t--global--text-decoration--line--200);
--pf-t--global--text-decoration--help-text--line--hover: var(--pf-t--global--text-decoration--line--200);
--pf-t--global--text-decoration--help-text--style--default: var(--pf-t--global--text-decoration--style--200);
--pf-t--global--text-decoration--help-text--style--hover: var(--pf-t--global--text-decoration--style--200);
--pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--style--200);
--pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--style--200);
--pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--100);
--pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--100);

--pf-t--global--text-decoration--offset--default: var(--pf-t--global--spacer--xs);
--pf-t--global--text-decoration--width--default: var(--pf-t--global--border--width--regular);

The above tokens will replace our current custom tokens, which we can remove after updating to the new ones:

// text-decoration
--pf-t--global--text-decoration--100: none;
--pf-t--global--text-decoration--200: underline;
--pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--100);
--pf-t--global--link--text-decoration--hover: var(--pf-t--global--text-decoration--200);

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

Status
Done

Relationships

None yet

Development

No branches or pull requests

Issue actions