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

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

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