[csswg-drafts] [css-color] Add <opacity> to any <color> (#8663)

nickshanks has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-color] Add <opacity> to any <color> ==
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](https://www.w3.org/TR/css-color-4/) and nine times in [css-color-5](https://www.w3.org/TR/css-color-5/), and defining it would remove the `[]` grouping before each `?`.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8663 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 31 March 2023 12:37:53 UTC