Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add CSS Color Module Level 5 (color-mix(), color-contrast(), Relative color) #5405

Open
Schweinepriester opened this issue May 1, 2020 · 8 comments

Comments

@Schweinepriester
Copy link
Contributor

Schweinepriester commented May 1, 2020


@Schweinepriester
Copy link
Contributor Author

Schweinepriester commented Mar 11, 2021

Two are coming as experimental with Safari TP 122:

  • Added experimental support for CSS Color 5 color-contrast() (r273683)
  • Added experimental support for CSS Color 5 color-mix() (r273244)

@Schweinepriester
Copy link
Contributor Author

Schweinepriester commented Jun 25, 2021

@Schweinepriester Schweinepriester changed the title Add CSS Color Module Level 5 (color-adjust(), color-mix(), color-contrast()) Add CSS Color Module Level 5 (~~color-adjust()~~, color-mix(), color-contrast(), Relative color) Nov 26, 2021
@Schweinepriester Schweinepriester changed the title Add CSS Color Module Level 5 (~~color-adjust()~~, color-mix(), color-contrast(), Relative color) Add CSS Color Module Level 5 (color-mix(), color-contrast(), Relative color) Nov 26, 2021
@Schweinepriester
Copy link
Contributor Author

Schweinepriester commented Nov 26, 2021

@Schweinepriester
Copy link
Contributor Author

Schweinepriester commented Dec 27, 2021

Support bugs, stolen from https://www.bram.us/2021/12/27/css-in-2022/#the-hotlist--color-functions:

@GPHemsley
Copy link

GPHemsley commented Jan 17, 2022

With color-adjust() removed from the spec and color-mix() and color-contrast() being covered by MDN data (via mdn/browser-compat-data#9489, mdn/browser-compat-data#12039), that appears to leave this issue only covering relative colors.

The spec also defines @color-profile and device-cmyk(), but both already have an MDN page, so they're likely to be covered by MDN data in the future:
https://developer.mozilla.org/en-US/docs/Web/CSS/@color-profile
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/device-cmyk()

@Schweinepriester
Copy link
Contributor Author

Schweinepriester commented Jan 17, 2022

that appears to leave this issue only covering relative colors.

Check!

The spec also defines @color-profile and device-cmyk(), but both already have an MDN page, so they're likely to be covered by MDN data in the future

Good to know!
Those have also separate issues:

@mangelozzi
Copy link

mangelozzi commented May 27, 2022

Please give us the ability to be able to set the opacity of a custom property that is set to a hex color code. This is propably the most common use case for color adjustments.
If you have a theme, each color is one variable (a hex color code), not 3 x RGB values one has to keep track of.

188K designers have sought for a fix for this on stackoverflow:
https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable

:root {
  --color: #f0f0f0;
}

#element {
  background: (somehow use var(--color) at some opacity);
}

@LifeIsStrange
Copy link

LifeIsStrange commented May 27, 2022

@mangelozzi I think you should voice this pain point at https://github.com/w3c/csswg-drafts/labels/css-color-5
More generally, methodically looking at the most popular CSS stackoverflow questions that have unsatisfying answers, and reporting them on the CSS specs working group would be a way to yield dramatically significant, reality-aligned improvements to CSS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants