[css-color] Add <opacity> to any <color>

[nickshanks]

Synopsis: allow / <alpha-value> after any current value for <color>; shorthand for color-mix(in srgb, <color> <alpha-value>, transparent)

With the advent of AccentColor, which is fully opaque, I would find it useful if an opacity could be specified for a <system-color> or indeed any <named-color>. My use case is to draw a focus ring in the user's preferred colour, but with opacity applied (as -moz-mac-focusring does, but for all UAs and OSes).

For example:

border-color: red / 50%;             // same as rgba(255, 0, 0, 50%)
outline-color: accentcolor / 0.5;    // not available currently, same as proposed color-mix(in srgb, accentcolor 50%, transparent)

These would also be available in shorthand properties that use a <color> thusly:

border: 2px solid red / 0.5;
outline: 2px solid accentcolor / 0.5;

All system colours and named colours are opaque, making this fairly simple to define.

If the above seems reasonable, extrapolating this line of thought, the next step would be to include optional opacity on currentcolor (i.e. to allow opacity on all <color-keywords>).

Further extrapolating, you may lift the alpha component out of all colour functions completly, such that color: rgb(255 0 0) / 0.5; is equivalent to color: rgb(255 0 0 / 0.5);. This would change the <color> syntax to something like:

<color> = [<absolute-color-base> | currentcolor | <system-color>] [/ [<alpha-value> | none]]?

and allow, e.g. color: #F00 / 50%; too.

Note that applying an opacity to a <color> that already has an alpha value < 1.0 would combine the alphas in some way, e.g. if you define the combination as a simple multiplication then color: rgb(0 0 0 / 50%); inherited by a rule with color: currentcolor / 50%;, would result in a foreground colour of 25% opaque black. We already have this issue with color-mix(in srgb, currentcolor 50%, transparent).
Applying an opacity to transparent would have no effect, but for the sake of simple syntax, I suggest be permitted.

I also think you should define / [<alpha-value> | none] as <opacity> to simplify the syntax definitions. It occurs eight times in css-color-4 and nine times in css-color-5, and defining it would remove the [] grouping before each ?.

[svgeesus]

Already more easily done with RCS:

fill: oklab(from accentcolor l a b / 0.5);

You seem to be mixing up alpha transparency and group opacity, by the way.