Modify style components on icons

[bvsillorequez]

I am trying to modify the color and size of an icon but the color I am looking for isn't available for text colors and same with the size. Is there a way to modify them like you can with by adding a style={{}} component?

[TheSisb]

Hi @bvsillorequez,

Our icons only accept token values as props so they remain consistent within Paste applications. Can you share some additional context as to why you're looking to use non-token values?

[bvsillorequez]

I would like to have the color of the beta tag in console to be the same as $color-background-user since it is the same color as our avatar. Currently there isn't a color similar to that in the text colors.

[serifluous]

Hey @bvsillorequez ! You can use $color-text-new for the beta tag (which is also more appropriately named for your use case) and is accessible on our background colors.

[bvsillorequez]

I am using $color-text-new for the sidebar nav but that color is too dark to be in the masthead. We need something lighter like $color-background-user so it doesn't blend in.

[serifluous]

got it—Can you share a screenshot or mockup of what you're trying to achieve?

[bvsillorequez]

This shows $color-text-new for both beta tags. The tag in the masthead we want it to be the color of the avatar

[serifluous]

Cool, thanks! Makes sense. I'll sync with our team and add in a new text token for you (or at least provide an alternate design solution).

[bvsillorequez]

Great! Thank you!

[serifluous]

Chatted with the team: Since Console will be in beta just for the short-term, we're suggesting that y'all use the white text color (color-text-inverse) and the full text can be something like "Console (beta)" or "Console – beta". A light purple text color might not also be meaningfully different from white text when they're next to each other.

@johannaweintraub lemme know if that solution works for you ^

[johannaweintraub]

This also affects admin center masthead but for now, let's just leave it as is.

[johannaweintraub]

We're using the $color-text-icon-inverse