Frontend

Maybe hot take, but I really don't see the point of having ~10 shades per color in a design system.

Do we need more than foreground/background/hover variants for every single color? I can see the case for more grays, maybe. Curious what y'all think.

Staff Eng at Iron Fish 🐟 • Building BlockSocks 🧦 • Denver, CO 📍

It could depend on your treatment of color. High-contrast style can get away w/ fewer variants. Opacity could go a long way in creating the illusion of shades (e.g. Warpcast). Sometimes inverting colors won't always work for dark mode, so you might need separate values for that

Yeah, I can see that being pretty versatile. For example:

Light/Primary/Background
Light/Primary/Foreground
Light/Primary/Hover
Light/Primary/Active

Same for secondary/neutral/etc in light and dark. You can use opacity for inactive states

How about surfaces? Background/foreground naming could get confusing

Yeah, I think what I wanna propose for the design system we're building out at Iron Fish is separating colors into background/foreground/active for both light and dark mode, and making sure that those are all a11y friendly. But like, we really shouldn't need more than 3 variants per color scheme, right?