🐛 [BUG] - Invalid hex code values for various tokens

[tarebyte]

Describe the bug

👋 While working on updating the GitHub Neovim theme, I noticed that there are color tokens that do not have valid HTML hex codes.

For example, --borderColor-accent-muted is #54aeff66. I think this is supposed to be #54aef6 but I'm honestly not sure. I think it may have something to do with the base colors, but my grepping couldn't find that exact output.

Reproduction steps

1. Go to https://primer.style/primitives/storybook/?path=/story/color-functional-tables--border&globals=theme:dark_dimmed
2. Scroll down to `--borderColor-accent-muted`
3. Currently seeing an invalid hex value under "output value"

Expected behavior

1. Go to https://primer.style/primitives/storybook/?path=/story/color-functional-tables--border&globals=theme:dark_dimmed
2. Scroll down to `--borderColor-accent-muted`
3. See correct hex value under "output value"

Screenshots

[siddharthkp]

Good catch! Looks like the storybook setup only shows the value for light theme, no matter what theme you have selected 🤔

[tarebyte]

@siddharthkp silly question, is the actual hex value valid? Is this a representation of #RRGGBBAA ?

[lukasoppermann]

@tarebyte yes, this is a hex8 value. Which is correct in this case. However, @siddharthkp's comment is correct.

@siddharthkp could you fix this? You probably know more about storybook than me. 😁

[jonrohan]

Looks like the storybook setup only shows the value for light theme, no matter what theme you have selected

Looking at this in the triage meeting, we're wondering if this is possible with out how theme picker works. The picker is changing the theme data attributes but isn't changing the rendered content of the column. We could try and add to the picker functionality to lookup the color getting getStyles and outputting the result. But the question comes up, is this worth the effort? We could drop the column for Output Value all together.

[lukasoppermann]

@jonrohan I think it is NOT worth the effort. Folks are not supposed to use the hex code either way, thats why we have tokens.

[siddharthkp]

I think it is NOT worth the effort. Folks are not supposed to use the hex code either way, thats why we have tokens.

Agree with your both...

But on the side, I let copilot run with the idea of a decorator, would love your thoughts on this:

• Fix FunctionalTables stories to display theme-specific color token values #1286

[jonrohan]

@siddharthkp the copilot pr seems pretty nice, lets land that 👍🏻

[siddharthkp]

@jonrohan Great, PR is ready for review: #1286