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 ingl-bg-white) is#fffin light mode and equivalent tocolor.neutral.900in dark mode (#28272d) as it get inverted. -
gl-bg-defaultis#fffin light mode andcolor.neutral.950in dark mode (#18171d). -
gl-bg-overlapis#fffin light mode andcolor.neutral.900in 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-defaultis used (#28272dbecomes#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)