More colors for Avatar backgrounds

[mschasz]

Hi, I am working on migrating the Segment Privacy main page to Paste and I have three shield icons in red, yellow, and green; however, when I try to replicate this in Paste using the ProductPrivacyIcon and Avatar component the colors I can use in the background are limited to default, decorative10, decorative20, decorative30 (green), decorative40. Is there any guidance on how to work around this limitation? Or, can we add yellow and red to the background colors for avatar? Thanks!

[SiTaggart]

Hi @mschasz

Would it be possible to give us a better understanding of why these are represented using an Avatar? The Paste Avatar is designed to represent a human or an entity (a thing, a noun).

If these are purely decorative and don't represent a human or an entity, we might suggest you just use an Icon on it's own and set the color to one of our Text Color Tokens.

[mschasz]

Hey @SiTaggart,

I was trying to imitate the original evergreen design as much as possible, so it looked like out-of-the-box Avatar was the best component to have the icon be encased in a circle with a background color matching the color of the icon. If there's not a 1-1 matching of this Evergreen design in Paste and the use of the Avatar component is not recommended, should I just follow your guidance?

[SiTaggart]

Correct, absolutely!

The migration away from Evergreen is not an effort to recreate Evergreen. You are migrating to a new design language using new components, so you should be following Paste design elements or rebuilding experiences using the existing components and the guidelines we provide.

[mschasz]

Hey @SiTaggart,

Thanks for the help! What should we do in the case where there isn't a yellow text color option?

[loreina]

Hi @mschasz, we have icon tokens that might work here: color-text-icon-[error, warning, success]. For the "Yellow Data" icon, you could use color-text-icon-warning. We have some guidance on icon and token pairings for process statuses on our docs site.