Check mapping of text-decoration color

[andrew-ronaldson]

Figma assigned the text decoration color to match control but the core/react components are using default

---

Jira Issue: PF-4201

[lboehling]

This looks like it's due to a local css token overriding the figma definition. We can remove the token in the the local css styles and this should be fixed.

@mcoker

[mcoker]

I'd love to get rid of all of these tokens that are currently overrides/custom in the core repo:

https://github.com/patternfly/patternfly/blob/53de013490d8598506fdbc2af9f4f24970d85a48/src/patternfly/base/tokens/tokens-local.scss#L8-L14

  --pf-t--global--text-decoration--color--default: var(--pf-t--global--border--color--default);
  --pf-t--global--text-decoration--color--hover: currentcolor; // could also use var(--pf-t--global--text--color--link--hover);
  --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);

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

There are two that won't work from figma currently

--pf-t--global--text-decoration--color--hover: currentcolor

Currently the underline color is defined as whatever the text color is in core. In figma, that color is a border hover color. Per the screenshot below, looks like the value from core would work better since I don't think the border colors would show up against all backgrounds like this? If core is correct, could the token in figma be updated to the string 'currentcolor'?

--pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);

Since you can't reference another var for the value of a var in figma, we have this defined in core. For reference, the default offset is the "xs" spacer, so this just adds 1px to whatever the non-hover offset is. However, should that reference the xs spacer in the first place? As in - if someone themed the xs spacer, should it update this link offset? IMO it shouldn't, so I'd be good with a pixel or rem/em value here. This could just be '4px' and '5px', though in a perfect world I would probably expect these to be em (not rem) values so it's a distance relative to the current text's font-size.

wdyt? Or want me just to get rid of --pf-t--global--text-decoration--color--default?

[lboehling]

@mcoker i'm down for removing the local scss text decoration tokens in favor of the figma defs. that actually would also solve the discrepancy between the default border color showing in core and the control border color were using in figma. I do agree that we should keep the core definitions for --pf-t--global--text-decoration--color--hover and --pf-t--global--text-decoration--offset--hover. For the offset token, i think am em would be perfect. i hesitate with pixels for the same reason -- if text size is increased, that hover should also increase.

[patternfly-jira-sync]

Closed via Jira sync - Jira issue PF-4201 was closed.