Update gl-bg-white to gl-bg-default and gl-bg-overlap

What does this MR do and why?

Update gl-bg-white to gl-bg-default and gl-bg-overlap

note: no visual changes in light mode.

  • $white (used in gl-bg-white) is #fff in light mode and equivalent to color.neutral.900 in dark mode (#28272d) as it get inverted.
  • gl-bg-default is #fff in light mode and color.neutral.950 in dark mode (#18171d).
  • gl-bg-overlap is #fff in light mode and color.neutral.900 in dark mode (#28272d). The same as $white, however this design token is reserved for content that sits above other content.
  • Audits of high traffic pages have been completed and findings migrated to design tokens
  • What's left is lower-risk content which should be migrated to use design tokens to:
    • Better clarify intention of styles
    • Visually align with like-for-like content
  • This MR will have visual changes in dark mode where gl-bg-default is used (#28272d becomes #18171d), this is intentional.
  • Where content is elevated it should use gl-bg-overlap

References

To better support dark mode we are migrating deprecated color usage (e.g. $gray-100) to use semantic design tokens &15844. Semantic design tokens have specific values for light and dark mode, instead of the previous approach of inverting colors between modes. This means that color are better suited for dark mode. See more Design token FAQs. Current design token adoption can be viewed with the code scanner.

Screenshots or screen recordings

Contextual screenshots added to changes

How to set up and validate locally

Contextual URLs added to changes

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.

Related to #503067 (closed)

Edited by Scott de Jonge

Merge request reports

Loading