Use `color-mix` instead of multiple color CSS vars

[jd-solanki]

Is your feature request related to a problem? Please describe.

Hi 👋🏻

While customizing the theme, We have to update lots of CSS var only for changing branch color these roughly includes:

--vp-c-brand-1: var(--vp-c-indigo-1);
--vp-c-brand-2: var(--vp-c-indigo-2);
--vp-c-brand-3: var(--vp-c-indigo-3);
--vp-c-brand-soft: var(--vp-c-indigo-soft);

--vp-button-brand-border: transparent;
--vp-button-brand-text: var(--vp-c-white);
--vp-button-brand-bg: var(--vp-c-brand-3);
--vp-button-brand-hover-border: transparent;
--vp-button-brand-hover-text: var(--vp-c-white);
--vp-button-brand-hover-bg: var(--vp-c-brand-2);
--vp-button-brand-active-border: transparent;
--vp-button-brand-active-text: var(--vp-c-white);
--vp-button-brand-active-bg: var(--vp-c-brand-1);

Describe the solution you'd like

CSS's color-mix is now supported by all browsers. Using color-mix function will ease the theme customization via single CSS var change instead of changing multiple CSS vars. Even you can go further and use oklch or hsl for colors.

Describe alternatives you've considered

Overriding all the colors my self 😞

Additional context

https://www.youtube.com/watch?v=6aCsAMgwnjE

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Read the Contributing Guidelines.
• [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

CSS's color-mix is now supported by all browsers

Ah, but it still doesn't meet our minimum support criteria -

Chrome >=88
Edge >=88
Safari >=14
Firefox >=78
Opera >=74

In future maybe we can consider switching to those, but for now it's a no go as it cannot be down compiled and will make site unusable for ~10% people in the world.