-
Notifications
You must be signed in to change notification settings - Fork 1
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
Palettes: Migrate color shades to CSS relative colors #84
Palettes: Migrate color shades to CSS relative colors #84
Comments
After initial review and testing, it seems that changing the alpha values of the generated colors using color-mix is virtually impossible, which is a dealbreaker for now. Looks like the Relative colors syntax is a better candidate for it that doesn't introduce any breaking changes. However, this syntax is only supported in Safari. Related issue in Chrome Example with relative colors: Declaring global palette colors: --primary-500: #09f;
--primary-600: hsl(from var(--primary-500) h calc(s * 1.26) calc(l * 0.89)); Consuming colors: /* Add 50% opacity to the primary 600 variant. */
igc-avatar {
background-color: hsl(from var(--primary-600) h s l / .5);
} The approach above opens the door for eventually switching to another color space and a different formula for generating color shades that produces better results with variable base colors (500 variant). |
Currently, each color shade is generated using the calc function with the
h
,s
, andl
components of the base500
color being multiplied by a factor to achieve a runtime adjustable palette. With the CSScolor-mix
function now available in most ever-green browsers, we can reimplement how color shades are calculated so that:The text was updated successfully, but these errors were encountered: