Implement tinted neutral themes behind root class selector

Scott de Jongerequested to merge
sdejonge-aura-theme-neutral-tints into master

What does this MR do and why?

What

Implement design token and style overrides for neutral tinted themes to be toggled with .aura-tinted-themes class on :root element

Why

Shift design system changes to the product from gitlab-org/gitlab-services/design.gitlab.com!6062 and integration in !241814.

This allows us to validate visual changes behind a togglable parameter (root class) which might be used for a feature flag or togglable release strategy instead of standard Design system -> Package version -> Product integration release strategy.

Intention

Allow internal stakeholders validate and iterate visual changes in isolation in the product before integrating values back into design system via design token updates.

References

Screenshots or screen recordings

How to set up and validate locally

  1. View any page
  2. Toggle .aura-tinted-themes class on :root element (see bookmarket below)
javascript:(function() { document.documentElement.classList.toggle('aura-tinted-themes'); })();

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports