search

IgniteUI / igniteui-theming

A set of Sass mixins, functions, and variables used to create themes for a variety of UI frameworks built by Infragistics.
MIT License
11 stars 1 forks source link

Palettes: Migrate color shades to CSS relative colors #84

Closed simeonoff closed 1 week ago

simeonoff commented 1 year ago

Currently, each color shade is generated using the calc function with the h, s, and l components of the base 500 color being multiplied by a factor to achieve a runtime adjustable palette. With the CSS color-mix function now available in most ever-green browsers, we can reimplement how color shades are calculated so that:

  1. The input color/base variant doesn't need to be in the HSL color space.
  2. Have a more robust color palette that scales better.
simeonoff commented 1 year ago

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 Related issue in Firefox

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).