CSS: Try custom properties using color-value based naming scheme

[ryelle]

Since the idea of using a HSL-esque, numbered color scheme has been brought up a number of times, I thought I'd give it a try here. It was remarkably easy to implement - there is one custom property per color value, so I was able to make a PostCSS script to replace them automatically.

This uses the core color palette colors, renamed to avoid colors in the property name - neutral (gray), accent (blue), alert (red), warning (yellow), and success (green).

--wp-admin--color--neutral-0: 0 0% 100%;
--wp-admin--color--neutral-1: 180 5.88% 96.66%;
--wp-admin--color--neutral-2: 240 3.44% 94.31%;
...
--wp-admin--color--neutral-95: 197.14 17.94% 7.64%;
--wp-admin--color--neutral-100: 0 0% 0%;
--wp-admin--color--accent-0: 210 66.66% 96.47%;
--wp-admin--color--accent-5: 210 52.63% 85.09%;
...
--wp-admin--color--success-80: 130.43 100% 13.52%;
--wp-admin--color--success-90: 130 100% 9.41%;
--wp-admin--color--success-100: 130.71 100% 5.49%;

The values are space-separated HSL*, so we can use them in places where there is opacity too (ex, hsla(var(--wp-admin--color--accent-0) / 0.6);)

*Note that our color scheme is already set, and does not uniformly follow HSL — the colors were set to be perceptually uniform, which HSL is not.

⚠️ Drawbacks to this method ⚠️

After trying this out, I still think location-based naming is better for proper customization. For example, I tried to make a dark mode by inverting the colors (what was neutral-100 became neutral-0, and so on). It's functional, but does not look good at all. A proper dark mode (and high contrast modes) would need much more thought and control than what we can do here.

To try out the dark mode yourself, set your user color scheme to "Midnight".