Components: Clean up utils/colors-values.js file

[mirka]

What problem does this address?

The bloated colors file is currently a pain point. It's blocking the work we'd like to do to migrate to a more CSS variables-centric approach, which then could enable theming.

We should be able to greatly simplify the colors file following @jasmussen's guidance:

We definitely want to retire #50505, and #000000 is a color we should very rarely use — mostly for shadows, not for UI elements.

To an extent, the whole list of colors in this file is wrong and outdated, and exists — I believe — mainly due to it being created at a time in the development where much of the design refresh from #18667 was still underway. In that light, I would consider lines 6-15 from the sass file as the canonical and single list of grayscale colors we should support in the component set, with var(--wp-admin-theme-color) rounding out the spot color.

If I had my way, I'd rename the G2 color palette to something more sensible, it was just a temporary codename. I'd also retire all the other palettes, DARK_GRAY, DARK_OPACITY, DARK_OPACITY_LIGHT, LIGHT_GRAY, LIGHT_OPACITY_LIGHT, and BLUE. No-one should use those colors, and if we need to maintain them for backwards compatibility, we should seek out a way to clearly communicate they are deprecated.

What is your proposed solution?

Let's clean up the file in small iterative steps, starting off by removing unused colors, consolidating duplicated references, etc.

[ciampo]

As we work on this, we should also go through the steps highlighted in #40526 (comment) regarding border colors

[mirka]

As we work on this, we should also go through the steps highlighted in #40526 (comment) regarding border colors

I moved this task to #39425

[ciampo]

Are the colors defined in the UI object still relevant, or do they need some cleanup too?

[mirka]

Are the colors defined in the UI object still relevant, or do they need some cleanup too?

I'm not exactly sure, but I think we'll be doing inventory/cleanup work on the UI object when we start to make those items themeable, starting with the border colors. I'm fine with leaving it for now (and it being continued to be used in new places) because it captures some semantic meaning that will likely be useful when doing any future refactor work (including theming).