Colors v. Utility Colors

[Nathanael-Shermett]

Hello,

I have a question regarding the use of "colors" v. "utility colors". To start, notice the following excerpts from the theme.css file:

--color-brand-25: rgb(252 250 255);
--color-brand-50: rgb(249 245 255);
--color-brand-100: rgb(244 235 255);
--color-brand-200: rgb(233 215 254);
--color-brand-300: rgb(214 187 251);
--color-brand-400: rgb(182 146 246);
--color-brand-500: rgb(158 119 237);
--color-brand-600: rgb(127 86 217);
--color-brand-700: rgb(105 65 198);
--color-brand-800: rgb(83 56 158);
--color-brand-900: rgb(66 48 125);
--color-brand-950: rgb(44 28 95);

/* ... */

--color-utility-brand-50: var(--color-brand-50);
--color-utility-brand-50_alt: var(--color-brand-50);
--color-utility-brand-100: var(--color-brand-100);
--color-utility-brand-100_alt: var(--color-brand-100);
--color-utility-brand-200: var(--color-brand-200);
--color-utility-brand-200_alt: var(--color-brand-200);
--color-utility-brand-300: var(--color-brand-300);
--color-utility-brand-300_alt: var(--color-brand-300);
--color-utility-brand-400: var(--color-brand-400);
--color-utility-brand-400_alt: var(--color-brand-400);
--color-utility-brand-500: var(--color-brand-500);
--color-utility-brand-500_alt: var(--color-brand-500);
--color-utility-brand-600: var(--color-brand-600);
--color-utility-brand-600_alt: var(--color-brand-600);
--color-utility-brand-700: var(--color-brand-700);
--color-utility-brand-700_alt: var(--color-brand-700);
--color-utility-brand-800: var(--color-brand-800);
--color-utility-brand-800_alt: var(--color-brand-800);
--color-utility-brand-900: var(--color-brand-900);
--color-utility-brand-900_alt: var(--color-brand-900);

All colors are redefined (twice!) as utility variables. I have a few questions about this:

1. What is the semantic difference between "colors", "utility colors" and "alternate utility colors"?
2. Why do some components use utility colors (example) while most others do not (example)?

Thanks!

[deebov]

Hey @Nathanael-Shermett, just saw.

Utility colors change based on the theme (light/dark) to adapt. On the other hand, non-utility colors such as --color-blue-400 stay the same no matter the theme. And utility colors re-use these primitive colors to build a nice color palette for both light and dark mode.

The line you pointed out does indeed seem to be a bug, it most likely use ring-focus-ring but I'll check with Figma as well.