Palettes: Migrate color shades to CSS relative colors

[simeonoff]

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]

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