Re: [csswg-drafts] [css-color-5] Make channel values in relative color syntax optional (#10689)

I was just about to create an issue requesting this syntax when I found this one.

I was surprised to find that the `color(from black / 15%)` didn't _already_ work. I thought it would be a useful way to be indifferent to color spaces being specified elsewhere.

It would be great if things like this worked:

```css
.lightbox::backdrop {
  background: color(from light-dark(white, black) / 85%);
}

/* or */

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 10px color(from var(--glow-pulse-color) / 25%); }
  50%      { box-shadow: 0 0 10px color(from var(--glow-pulse-color) / 45%); }
}
```

Particular for the case of `var()` I would hope that it would preserve the color space I'm using<sup>[1]</sup>:

```css
.emerald-city-welcome-sign {
  animation: 1s ease glow-pulse infinite alternate;

  --glow-pulse-color: rgb(0% 100% 0%);

  /* Make it as green as the device supports */
  @media (color-gamut: p3) {
    --glowing-color: color(display-p3 0 1 0);
  }
}
```

> [1] Note: It [appears](https://codepen.io/pen/?editors=1100) that using `color(from var(--x) srgb r g b / 50%)` doesn't "clamp" a P3 color to the sRGB color space so this last point might just be redundant)



-- 
GitHub Notification of comment by jamiebuilds
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10689#issuecomment-2599262936 using your GitHub account


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

Received on Friday, 17 January 2025 21:42:02 UTC