I'd love to get rid of these two variables as well at some point to allow changing the colors by just defining a single CSS variable :)

This is still a great improvement thought. I don't think hsl bring value though since we're able to use SASS here. What's the reasoning?

I could make it a mixin.

Hsl is native browser, so we can actually retire the variables and have lighter and darker colors from a single color.

Will try in a bit

Hsl is native browser, so we can actually retire the variables and have lighter and darker colors from a single color.

We could but only if we use three CSS variables instead of one which IMO is not great.

I do see your point.

You could limit it to two:

--wp-admin-theme-color-hs: '200, 100%';
--wp-admin-theme-color: hsl( var(--wp-admin-theme-color-hs), 36% );

Then you could stitch together variables in the code like this, instead of defining them as new colors:

button {
	background-color: hsl( var(--wp-admin-theme-color-hs), 26% ); // 10% darker
}

You could even do this:

$wp-admin-theme-color-10: hsl( var(--wp-admin-theme-color-hs), 26% );

Make sense?

I think it's better but If I want to tweak the color, I'd have to define --wp-admin-theme-color-hs instead of --wp-admin-theme-color right?

I mean, we're kind of forcing third-party API to use HSL too; Maybe that's fine but how confident are we that this will last forever?

Actually, I don't like that :) I'd rather have three variables over having to define the colors in specific format. And it's not even the full format.

i guess what I'm saying is that i personally prefer to just leave it as is for now. Avoid hsl entirely.

Alright, I don't disagree. I've reverted the HSL magic for now, and we're back to having two additional dark colors.

We could remove one of them because a hover color isn't strictly necessary. But for the time being, I've kept it.

I like the simplification here.