Create alternate neutral variables for better opt-in
Problem
In gitlab-ui!1099 (merged) the neutral palette hex values were updated, and $gray-0
was added.
Remapping these variables all at once in GitLab would impact every component and part of the UI that references them, making it undesirable for such a sweeping change.
Solution
Option A
Create a new set of neutral variables alongside the existing ones in GitLab that leverage the same hex values from gitlab-ui. Components and sections of the UI can then opt in to these new $neutral-
variables as we are able to address them.
In Pajamas, we refer to the gray palette as “neutrals” already.
Current
$gray-50: #fafafa;
$gray-100: #f2f2f2;
$gray-200: #dfdfdf;
$gray-300: #ccc;
$gray-400: #bababa;
$gray-500: #a7a7a7;
$gray-600: #919191;
$gray-700: #707070;
$gray-800: #4f4f4f;
$gray-900: #2e2e2e;
$gray-950: #1f1f1f;
$grays: (
'50': $gray-50,
'100': $gray-100,
'200': $gray-200,
'300': $gray-300,
'400': $gray-400,
'500': $gray-500,
'600': $gray-600,
'700': $gray-700,
'800': $gray-800,
'900': $gray-900,
'950': $gray-950
);
New
$neutral-0: #fafafa;
$neutral-50: #f0f0f0;
$neutral-100: #dbdbdb;
$neutral-200: #bfbfbf;
$neutral-300: #999;
$neutral-400: #868686;
$neutral-500: #666;
$neutral-600: #5e5e5e;
$neutral-700: #525252;
$neutral-800: #404040;
$neutral-900: #303030;
$neutral-950: #1f1f1f;
$neutrals: (
'50': $neutral-50,
'100': $neutral-100,
'200': $neutral-200,
'300': $neutral-300,
'400': $neutral-400,
'500': $neutral-500,
'600': $neutral-600,
'700': $neutral-700,
'800': $neutral-800,
'900': $neutral-900,
'950': $neutral-950
);
Option B
Remap grays one at a time, everywhere they are used. This would start by adding $gray-0: #fafafa
and then updating variables one at a time.
Questions
- Regardless of option, how could we make it so that GitLab doesn’t override gitlab-ui at all? Could we remove the declarations from *variables.scss?
- Does the
$neutral-
path make sense or is “gray” necessary to be more descriptive?
Reference
This is what the new mapping looks like in gitlab-ui.
/*
Neutral palette mapping
Old variables are mapped to new variables by approximating the closest variable, erring on the side of shifting darker (with the exception of old 400). There is currently nothing mapped to 600 and 800, which makes them a good use case for subtle nuance in the UI.
Before After (reflected below)
-------------------------------------
50 0
100 50
200 100
300 200
400 200
500 300
600 400
700 500*
800 700
900 900
950 950
* Passes 4.5:1 contrast ratio on $gray-0
*/