Inconsistent color tokens for text/icons

[dholliday3]

Hello, I'm using a color token for an icon and noticed that the rgb value in the documentation is different from what I'm getting in the browser.

Here's what I'm expecting:

• $color-text-icon-warning
• rgb(255, 179, 122)
  

What I have in my code and what I got:

• <WarningIcon decorative={true} color="colorTextIconWarning" />
• rgb(227, 106, 25)
  

Am I missing something? I'm looking for a yellow warning icon but using that token isn't giving me the expected RGB values.
Thanks!

[loreina]

Hi @dholliday3,

Our token values change with the theme you're using (default or dark) to serve multiple design languages and comply with accessibility standards.

When using the light/dark toggle on the Paste docs site, the token list page will swap to either show default theme values with light mode, or dark theme values in dark mode. So in default theme, colorTextIconWarning points to rgb(227, 106, 25) and in dark theme, colorTextIconWarning points to rgb(255, 179, 122).

Hope that clarifies things. Feel free to reply here if you have any other questions!

[dholliday3]

Gotcha, thanks for responding!

Just as feedback I think it might be helpful to make it more obvious that picking dark/light mode on the docs changes the color tokens as well! My teammates were also surprised by this design as this isn't a pattern we've seen in other docs.

Thanks for the prompt responses!

[serifluous]

Thanks for the feedback! This is actually super great timing because we've been working on some updates to our tokens page that just went live this morning. Check it out and let us know if this is what you were expecting: https://paste.twilio.design/tokens/list