Consolidate SCSS variables for border colors
What does this MR do and why?
Simplify color usage to reduce SCSS color functions (lighten(), darken(), mix() etc.) and duplicate SCSS variables for Pajamas color values. This should enable future color usage to inherit design token generated CSS custom properties from GitLab UI, in an effort to simplify dark mode color definitions and usage. Current SCSS color function usage can be viewed on the GitLab Code Scanner
Screenshots or screen recordings
| Variable Before | Value Before | Variable After | Value After |
|---|---|---|---|
$border-white-light |
#f2f2f2 |
$border-color |
#dcdcde |
$border-white-normal |
#dedee3 |
$border-color |
#dcdcde |
$border-gray-light |
#ece8f6 |
$border-color |
#dcdcde |
$border-gray-normal |
#e4e4e8 |
$border-color |
#dcdcde |
$white-dark |
#e6e6ea |
$border-color |
#dcdcde |
How to set up and validate locally
- Review SCSS variable code changes
- Review usage comments in threads
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #430055
Edited by Scott de Jonge