Skip to content
Snippets Groups Projects
Commit feab27d8 authored by Scott de Jonge's avatar Scott de Jonge
Browse files

feat(DesignTokens): add theme design tokens 

Add Storybook stories
Generate design token output
parent 19c7c9f1
No related branches found
No related tags found
1 merge request!4251feat(DesignTokens): add theme design tokens
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 3294 additions and 0 deletions
src/tokens/build/css/tokens.css
+ 72
− 0
View file @ feab27d8
......@@ -237,6 +237,78 @@
--data-viz-green-200: #b0d97b;
--data-viz-green-100: #c6ed94;
--data-viz-green-50: #ddfab7;
--gl-color-theme-light-red-950: #5c1105;
--gl-color-theme-light-red-900: #751709;
--gl-color-theme-light-red-800: #8b2212;
--gl-color-theme-light-red-700: #a02e1c;
--gl-color-theme-light-red-600: #b53a26;
--gl-color-theme-light-red-500: #c24b38;
--gl-color-theme-light-red-400: #d36250;
--gl-color-theme-light-red-300: #e07f6f;
--gl-color-theme-light-red-200: #ebada2;
--gl-color-theme-light-red-100: #f6d9d5;
--gl-color-theme-light-red-50: #faf2f1;
--gl-color-theme-light-red-10: #fdf9f8;
--gl-color-theme-red-950: #380700;
--gl-color-theme-red-900: #580d02;
--gl-color-theme-red-800: #761405;
--gl-color-theme-red-700: #8f2110;
--gl-color-theme-red-600: #a13322;
--gl-color-theme-red-500: #ad4a3b;
--gl-color-theme-red-400: #c66e60;
--gl-color-theme-red-300: #d59086;
--gl-color-theme-red-200: #e3bab5;
--gl-color-theme-red-100: #ecd3d0;
--gl-color-theme-red-50: #f4e9e7;
--gl-color-theme-red-10: #faf4f3;
--gl-color-theme-green-950: #052e19;
--gl-color-theme-green-900: #0e4328;
--gl-color-theme-green-800: #155635;
--gl-color-theme-green-700: #1b653f;
--gl-color-theme-green-600: #25744c;
--gl-color-theme-green-500: #308258;
--gl-color-theme-green-400: #499767;
--gl-color-theme-green-300: #69af7d;
--gl-color-theme-green-200: #8cc497;
--gl-color-theme-green-100: #b1d6b5;
--gl-color-theme-green-50: #dde9de;
--gl-color-theme-green-10: #eef4ef;
--gl-color-theme-light-blue-950: #0a3764;
--gl-color-theme-light-blue-900: #0c4277;
--gl-color-theme-light-blue-800: #0e4d8d;
--gl-color-theme-light-blue-700: #145aa1;
--gl-color-theme-light-blue-600: #2268ae;
--gl-color-theme-light-blue-500: #3476b9;
--gl-color-theme-light-blue-400: #4f8bc7;
--gl-color-theme-light-blue-300: #74a3d3;
--gl-color-theme-light-blue-200: #a0bedc;
--gl-color-theme-light-blue-100: #c1d4e6;
--gl-color-theme-light-blue-50: #dde6ee;
--gl-color-theme-light-blue-10: #eef3f7;
--gl-color-theme-blue-950: #04101c;
--gl-color-theme-blue-900: #0b2640;
--gl-color-theme-blue-800: #153c63;
--gl-color-theme-blue-700: #235180;
--gl-color-theme-blue-600: #346596;
--gl-color-theme-blue-500: #4977a5;
--gl-color-theme-blue-400: #628eb9;
--gl-color-theme-blue-300: #81a5c9;
--gl-color-theme-blue-200: #a6bdd5;
--gl-color-theme-blue-100: #b9cadc;
--gl-color-theme-blue-50: #cdd8e3;
--gl-color-theme-blue-10: #e6ecf0;
--gl-color-theme-indigo-950: #14143d;
--gl-color-theme-indigo-900: #222261;
--gl-color-theme-indigo-800: #303083;
--gl-color-theme-indigo-700: #41419f;
--gl-color-theme-indigo-600: #5252b5;
--gl-color-theme-indigo-500: #6666c4;
--gl-color-theme-indigo-400: #8181d7;
--gl-color-theme-indigo-300: #a2a2e6;
--gl-color-theme-indigo-200: #c7c7f2;
--gl-color-theme-indigo-100: #dbdbf8;
--gl-color-theme-indigo-50: #f1f1ff;
--gl-color-theme-indigo-10: #f8f8ff;
--gl-color-red-950: #4d0a00;
--gl-color-red-900: #660e00;
--gl-color-red-800: #8d1300;
......
src/tokens/build/css/tokens.dark.css
+ 72
− 0
View file @ feab27d8
......@@ -237,6 +237,78 @@
--data-viz-green-200: #275600;
--data-viz-green-100: #1a4500;
--data-viz-green-50: #133a03;
--gl-color-theme-light-red-950: #5c1105;
--gl-color-theme-light-red-900: #751709;
--gl-color-theme-light-red-800: #8b2212;
--gl-color-theme-light-red-700: #a02e1c;
--gl-color-theme-light-red-600: #b53a26;
--gl-color-theme-light-red-500: #c24b38;
--gl-color-theme-light-red-400: #d36250;
--gl-color-theme-light-red-300: #e07f6f;
--gl-color-theme-light-red-200: #ebada2;
--gl-color-theme-light-red-100: #f6d9d5;
--gl-color-theme-light-red-50: #faf2f1;
--gl-color-theme-light-red-10: #fdf9f8;
--gl-color-theme-red-950: #380700;
--gl-color-theme-red-900: #580d02;
--gl-color-theme-red-800: #761405;
--gl-color-theme-red-700: #8f2110;
--gl-color-theme-red-600: #a13322;
--gl-color-theme-red-500: #ad4a3b;
--gl-color-theme-red-400: #c66e60;
--gl-color-theme-red-300: #d59086;
--gl-color-theme-red-200: #e3bab5;
--gl-color-theme-red-100: #ecd3d0;
--gl-color-theme-red-50: #f4e9e7;
--gl-color-theme-red-10: #faf4f3;
--gl-color-theme-green-950: #052e19;
--gl-color-theme-green-900: #0e4328;
--gl-color-theme-green-800: #155635;
--gl-color-theme-green-700: #1b653f;
--gl-color-theme-green-600: #25744c;
--gl-color-theme-green-500: #308258;
--gl-color-theme-green-400: #499767;
--gl-color-theme-green-300: #69af7d;
--gl-color-theme-green-200: #8cc497;
--gl-color-theme-green-100: #b1d6b5;
--gl-color-theme-green-50: #dde9de;
--gl-color-theme-green-10: #eef4ef;
--gl-color-theme-light-blue-950: #0a3764;
--gl-color-theme-light-blue-900: #0c4277;
--gl-color-theme-light-blue-800: #0e4d8d;
--gl-color-theme-light-blue-700: #145aa1;
--gl-color-theme-light-blue-600: #2268ae;
--gl-color-theme-light-blue-500: #3476b9;
--gl-color-theme-light-blue-400: #4f8bc7;
--gl-color-theme-light-blue-300: #74a3d3;
--gl-color-theme-light-blue-200: #a0bedc;
--gl-color-theme-light-blue-100: #c1d4e6;
--gl-color-theme-light-blue-50: #dde6ee;
--gl-color-theme-light-blue-10: #eef3f7;
--gl-color-theme-blue-950: #04101c;
--gl-color-theme-blue-900: #0b2640;
--gl-color-theme-blue-800: #153c63;
--gl-color-theme-blue-700: #235180;
--gl-color-theme-blue-600: #346596;
--gl-color-theme-blue-500: #4977a5;
--gl-color-theme-blue-400: #628eb9;
--gl-color-theme-blue-300: #81a5c9;
--gl-color-theme-blue-200: #a6bdd5;
--gl-color-theme-blue-100: #b9cadc;
--gl-color-theme-blue-50: #cdd8e3;
--gl-color-theme-blue-10: #e6ecf0;
--gl-color-theme-indigo-950: #14143d;
--gl-color-theme-indigo-900: #222261;
--gl-color-theme-indigo-800: #303083;
--gl-color-theme-indigo-700: #41419f;
--gl-color-theme-indigo-600: #5252b5;
--gl-color-theme-indigo-500: #6666c4;
--gl-color-theme-indigo-400: #8181d7;
--gl-color-theme-indigo-300: #a2a2e6;
--gl-color-theme-indigo-200: #c7c7f2;
--gl-color-theme-indigo-100: #dbdbf8;
--gl-color-theme-indigo-50: #f1f1ff;
--gl-color-theme-indigo-10: #f8f8ff;
--gl-color-red-950: #4d0a00;
--gl-color-red-900: #660e00;
--gl-color-red-800: #8d1300;
......
src/tokens/build/js/tokens.dark.js
+ 72
− 0
View file @ feab27d8
......@@ -90,6 +90,78 @@ export const GL_COLOR_RED_700 = '#ae1800';
export const GL_COLOR_RED_800 = '#8d1300';
export const GL_COLOR_RED_900 = '#660e00';
export const GL_COLOR_RED_950 = '#4d0a00';
export const GL_COLOR_THEME_INDIGO_10 = '#f8f8ff';
export const GL_COLOR_THEME_INDIGO_50 = '#f1f1ff';
export const GL_COLOR_THEME_INDIGO_100 = '#dbdbf8';
export const GL_COLOR_THEME_INDIGO_200 = '#c7c7f2';
export const GL_COLOR_THEME_INDIGO_300 = '#a2a2e6';
export const GL_COLOR_THEME_INDIGO_400 = '#8181d7';
export const GL_COLOR_THEME_INDIGO_500 = '#6666c4';
export const GL_COLOR_THEME_INDIGO_600 = '#5252b5';
export const GL_COLOR_THEME_INDIGO_700 = '#41419f';
export const GL_COLOR_THEME_INDIGO_800 = '#303083';
export const GL_COLOR_THEME_INDIGO_900 = '#222261';
export const GL_COLOR_THEME_INDIGO_950 = '#14143d';
export const GL_COLOR_THEME_BLUE_10 = '#e6ecf0';
export const GL_COLOR_THEME_BLUE_50 = '#cdd8e3';
export const GL_COLOR_THEME_BLUE_100 = '#b9cadc';
export const GL_COLOR_THEME_BLUE_200 = '#a6bdd5';
export const GL_COLOR_THEME_BLUE_300 = '#81a5c9';
export const GL_COLOR_THEME_BLUE_400 = '#628eb9';
export const GL_COLOR_THEME_BLUE_500 = '#4977a5';
export const GL_COLOR_THEME_BLUE_600 = '#346596';
export const GL_COLOR_THEME_BLUE_700 = '#235180';
export const GL_COLOR_THEME_BLUE_800 = '#153c63';
export const GL_COLOR_THEME_BLUE_900 = '#0b2640';
export const GL_COLOR_THEME_BLUE_950 = '#04101c';
export const GL_COLOR_THEME_LIGHT_BLUE_10 = '#eef3f7';
export const GL_COLOR_THEME_LIGHT_BLUE_50 = '#dde6ee';
export const GL_COLOR_THEME_LIGHT_BLUE_100 = '#c1d4e6';
export const GL_COLOR_THEME_LIGHT_BLUE_200 = '#a0bedc';
export const GL_COLOR_THEME_LIGHT_BLUE_300 = '#74a3d3';
export const GL_COLOR_THEME_LIGHT_BLUE_400 = '#4f8bc7';
export const GL_COLOR_THEME_LIGHT_BLUE_500 = '#3476b9';
export const GL_COLOR_THEME_LIGHT_BLUE_600 = '#2268ae';
export const GL_COLOR_THEME_LIGHT_BLUE_700 = '#145aa1';
export const GL_COLOR_THEME_LIGHT_BLUE_800 = '#0e4d8d';
export const GL_COLOR_THEME_LIGHT_BLUE_900 = '#0c4277';
export const GL_COLOR_THEME_LIGHT_BLUE_950 = '#0a3764';
export const GL_COLOR_THEME_GREEN_10 = '#eef4ef';
export const GL_COLOR_THEME_GREEN_50 = '#dde9de';
export const GL_COLOR_THEME_GREEN_100 = '#b1d6b5';
export const GL_COLOR_THEME_GREEN_200 = '#8cc497';
export const GL_COLOR_THEME_GREEN_300 = '#69af7d';
export const GL_COLOR_THEME_GREEN_400 = '#499767';
export const GL_COLOR_THEME_GREEN_500 = '#308258';
export const GL_COLOR_THEME_GREEN_600 = '#25744c';
export const GL_COLOR_THEME_GREEN_700 = '#1b653f';
export const GL_COLOR_THEME_GREEN_800 = '#155635';
export const GL_COLOR_THEME_GREEN_900 = '#0e4328';
export const GL_COLOR_THEME_GREEN_950 = '#052e19';
export const GL_COLOR_THEME_RED_10 = '#faf4f3';
export const GL_COLOR_THEME_RED_50 = '#f4e9e7';
export const GL_COLOR_THEME_RED_100 = '#ecd3d0';
export const GL_COLOR_THEME_RED_200 = '#e3bab5';
export const GL_COLOR_THEME_RED_300 = '#d59086';
export const GL_COLOR_THEME_RED_400 = '#c66e60';
export const GL_COLOR_THEME_RED_500 = '#ad4a3b';
export const GL_COLOR_THEME_RED_600 = '#a13322';
export const GL_COLOR_THEME_RED_700 = '#8f2110';
export const GL_COLOR_THEME_RED_800 = '#761405';
export const GL_COLOR_THEME_RED_900 = '#580d02';
export const GL_COLOR_THEME_RED_950 = '#380700';
export const GL_COLOR_THEME_LIGHT_RED_10 = '#fdf9f8';
export const GL_COLOR_THEME_LIGHT_RED_50 = '#faf2f1';
export const GL_COLOR_THEME_LIGHT_RED_100 = '#f6d9d5';
export const GL_COLOR_THEME_LIGHT_RED_200 = '#ebada2';
export const GL_COLOR_THEME_LIGHT_RED_300 = '#e07f6f';
export const GL_COLOR_THEME_LIGHT_RED_400 = '#d36250';
export const GL_COLOR_THEME_LIGHT_RED_500 = '#c24b38';
export const GL_COLOR_THEME_LIGHT_RED_600 = '#b53a26';
export const GL_COLOR_THEME_LIGHT_RED_700 = '#a02e1c';
export const GL_COLOR_THEME_LIGHT_RED_800 = '#8b2212';
export const GL_COLOR_THEME_LIGHT_RED_900 = '#751709';
export const GL_COLOR_THEME_LIGHT_RED_950 = '#5c1105';
export const DATA_VIZ_GREEN_50 = '#133a03';
export const DATA_VIZ_GREEN_100 = '#1a4500';
export const DATA_VIZ_GREEN_200 = '#275600';
......
src/tokens/build/js/tokens.js
+ 72
− 0
View file @ feab27d8
......@@ -90,6 +90,78 @@ export const GL_COLOR_RED_700 = '#ae1800';
export const GL_COLOR_RED_800 = '#8d1300';
export const GL_COLOR_RED_900 = '#660e00';
export const GL_COLOR_RED_950 = '#4d0a00';
export const GL_COLOR_THEME_INDIGO_10 = '#f8f8ff';
export const GL_COLOR_THEME_INDIGO_50 = '#f1f1ff';
export const GL_COLOR_THEME_INDIGO_100 = '#dbdbf8';
export const GL_COLOR_THEME_INDIGO_200 = '#c7c7f2';
export const GL_COLOR_THEME_INDIGO_300 = '#a2a2e6';
export const GL_COLOR_THEME_INDIGO_400 = '#8181d7';
export const GL_COLOR_THEME_INDIGO_500 = '#6666c4';
export const GL_COLOR_THEME_INDIGO_600 = '#5252b5';
export const GL_COLOR_THEME_INDIGO_700 = '#41419f';
export const GL_COLOR_THEME_INDIGO_800 = '#303083';
export const GL_COLOR_THEME_INDIGO_900 = '#222261';
export const GL_COLOR_THEME_INDIGO_950 = '#14143d';
export const GL_COLOR_THEME_BLUE_10 = '#e6ecf0';
export const GL_COLOR_THEME_BLUE_50 = '#cdd8e3';
export const GL_COLOR_THEME_BLUE_100 = '#b9cadc';
export const GL_COLOR_THEME_BLUE_200 = '#a6bdd5';
export const GL_COLOR_THEME_BLUE_300 = '#81a5c9';
export const GL_COLOR_THEME_BLUE_400 = '#628eb9';
export const GL_COLOR_THEME_BLUE_500 = '#4977a5';
export const GL_COLOR_THEME_BLUE_600 = '#346596';
export const GL_COLOR_THEME_BLUE_700 = '#235180';
export const GL_COLOR_THEME_BLUE_800 = '#153c63';
export const GL_COLOR_THEME_BLUE_900 = '#0b2640';
export const GL_COLOR_THEME_BLUE_950 = '#04101c';
export const GL_COLOR_THEME_LIGHT_BLUE_10 = '#eef3f7';
export const GL_COLOR_THEME_LIGHT_BLUE_50 = '#dde6ee';
export const GL_COLOR_THEME_LIGHT_BLUE_100 = '#c1d4e6';
export const GL_COLOR_THEME_LIGHT_BLUE_200 = '#a0bedc';
export const GL_COLOR_THEME_LIGHT_BLUE_300 = '#74a3d3';
export const GL_COLOR_THEME_LIGHT_BLUE_400 = '#4f8bc7';
export const GL_COLOR_THEME_LIGHT_BLUE_500 = '#3476b9';
export const GL_COLOR_THEME_LIGHT_BLUE_600 = '#2268ae';
export const GL_COLOR_THEME_LIGHT_BLUE_700 = '#145aa1';
export const GL_COLOR_THEME_LIGHT_BLUE_800 = '#0e4d8d';
export const GL_COLOR_THEME_LIGHT_BLUE_900 = '#0c4277';
export const GL_COLOR_THEME_LIGHT_BLUE_950 = '#0a3764';
export const GL_COLOR_THEME_GREEN_10 = '#eef4ef';
export const GL_COLOR_THEME_GREEN_50 = '#dde9de';
export const GL_COLOR_THEME_GREEN_100 = '#b1d6b5';
export const GL_COLOR_THEME_GREEN_200 = '#8cc497';
export const GL_COLOR_THEME_GREEN_300 = '#69af7d';
export const GL_COLOR_THEME_GREEN_400 = '#499767';
export const GL_COLOR_THEME_GREEN_500 = '#308258';
export const GL_COLOR_THEME_GREEN_600 = '#25744c';
export const GL_COLOR_THEME_GREEN_700 = '#1b653f';
export const GL_COLOR_THEME_GREEN_800 = '#155635';
export const GL_COLOR_THEME_GREEN_900 = '#0e4328';
export const GL_COLOR_THEME_GREEN_950 = '#052e19';
export const GL_COLOR_THEME_RED_10 = '#faf4f3';
export const GL_COLOR_THEME_RED_50 = '#f4e9e7';
export const GL_COLOR_THEME_RED_100 = '#ecd3d0';
export const GL_COLOR_THEME_RED_200 = '#e3bab5';
export const GL_COLOR_THEME_RED_300 = '#d59086';
export const GL_COLOR_THEME_RED_400 = '#c66e60';
export const GL_COLOR_THEME_RED_500 = '#ad4a3b';
export const GL_COLOR_THEME_RED_600 = '#a13322';
export const GL_COLOR_THEME_RED_700 = '#8f2110';
export const GL_COLOR_THEME_RED_800 = '#761405';
export const GL_COLOR_THEME_RED_900 = '#580d02';
export const GL_COLOR_THEME_RED_950 = '#380700';
export const GL_COLOR_THEME_LIGHT_RED_10 = '#fdf9f8';
export const GL_COLOR_THEME_LIGHT_RED_50 = '#faf2f1';
export const GL_COLOR_THEME_LIGHT_RED_100 = '#f6d9d5';
export const GL_COLOR_THEME_LIGHT_RED_200 = '#ebada2';
export const GL_COLOR_THEME_LIGHT_RED_300 = '#e07f6f';
export const GL_COLOR_THEME_LIGHT_RED_400 = '#d36250';
export const GL_COLOR_THEME_LIGHT_RED_500 = '#c24b38';
export const GL_COLOR_THEME_LIGHT_RED_600 = '#b53a26';
export const GL_COLOR_THEME_LIGHT_RED_700 = '#a02e1c';
export const GL_COLOR_THEME_LIGHT_RED_800 = '#8b2212';
export const GL_COLOR_THEME_LIGHT_RED_900 = '#751709';
export const GL_COLOR_THEME_LIGHT_RED_950 = '#5c1105';
export const DATA_VIZ_GREEN_50 = '#ddfab7';
export const DATA_VIZ_GREEN_100 = '#c6ed94';
export const DATA_VIZ_GREEN_200 = '#b0d97b';
......
src/tokens/build/json/tokens.dark.json
+ 1236
− 0
View file @ feab27d8
This diff is collapsed.
src/tokens/build/json/tokens.json
+ 1236
− 0
View file @ feab27d8
This diff is collapsed.
src/tokens/build/scss/_tokens.dark.scss
+ 72
− 0
View file @ feab27d8
......@@ -235,6 +235,78 @@ $data-viz-green-300: #366800 !default;
$data-viz-green-200: #275600 !default;
$data-viz-green-100: #1a4500 !default;
$data-viz-green-50: #133a03 !default;
$gl-color-theme-light-red-950: #5c1105;
$gl-color-theme-light-red-900: #751709;
$gl-color-theme-light-red-800: #8b2212;
$gl-color-theme-light-red-700: #a02e1c;
$gl-color-theme-light-red-600: #b53a26;
$gl-color-theme-light-red-500: #c24b38;
$gl-color-theme-light-red-400: #d36250;
$gl-color-theme-light-red-300: #e07f6f;
$gl-color-theme-light-red-200: #ebada2;
$gl-color-theme-light-red-100: #f6d9d5;
$gl-color-theme-light-red-50: #faf2f1;
$gl-color-theme-light-red-10: #fdf9f8;
$gl-color-theme-red-950: #380700;
$gl-color-theme-red-900: #580d02;
$gl-color-theme-red-800: #761405;
$gl-color-theme-red-700: #8f2110;
$gl-color-theme-red-600: #a13322;
$gl-color-theme-red-500: #ad4a3b;
$gl-color-theme-red-400: #c66e60;
$gl-color-theme-red-300: #d59086;
$gl-color-theme-red-200: #e3bab5;
$gl-color-theme-red-100: #ecd3d0;
$gl-color-theme-red-50: #f4e9e7;
$gl-color-theme-red-10: #faf4f3;
$gl-color-theme-green-950: #052e19;
$gl-color-theme-green-900: #0e4328;
$gl-color-theme-green-800: #155635;
$gl-color-theme-green-700: #1b653f;
$gl-color-theme-green-600: #25744c;
$gl-color-theme-green-500: #308258;
$gl-color-theme-green-400: #499767;
$gl-color-theme-green-300: #69af7d;
$gl-color-theme-green-200: #8cc497;
$gl-color-theme-green-100: #b1d6b5;
$gl-color-theme-green-50: #dde9de;
$gl-color-theme-green-10: #eef4ef;
$gl-color-theme-light-blue-950: #0a3764;
$gl-color-theme-light-blue-900: #0c4277;
$gl-color-theme-light-blue-800: #0e4d8d;
$gl-color-theme-light-blue-700: #145aa1;
$gl-color-theme-light-blue-600: #2268ae;
$gl-color-theme-light-blue-500: #3476b9;
$gl-color-theme-light-blue-400: #4f8bc7;
$gl-color-theme-light-blue-300: #74a3d3;
$gl-color-theme-light-blue-200: #a0bedc;
$gl-color-theme-light-blue-100: #c1d4e6;
$gl-color-theme-light-blue-50: #dde6ee;
$gl-color-theme-light-blue-10: #eef3f7;
$gl-color-theme-blue-950: #04101c;
$gl-color-theme-blue-900: #0b2640;
$gl-color-theme-blue-800: #153c63;
$gl-color-theme-blue-700: #235180;
$gl-color-theme-blue-600: #346596;
$gl-color-theme-blue-500: #4977a5;
$gl-color-theme-blue-400: #628eb9;
$gl-color-theme-blue-300: #81a5c9;
$gl-color-theme-blue-200: #a6bdd5;
$gl-color-theme-blue-100: #b9cadc;
$gl-color-theme-blue-50: #cdd8e3;
$gl-color-theme-blue-10: #e6ecf0;
$gl-color-theme-indigo-950: #14143d;
$gl-color-theme-indigo-900: #222261;
$gl-color-theme-indigo-800: #303083;
$gl-color-theme-indigo-700: #41419f;
$gl-color-theme-indigo-600: #5252b5;
$gl-color-theme-indigo-500: #6666c4;
$gl-color-theme-indigo-400: #8181d7;
$gl-color-theme-indigo-300: #a2a2e6;
$gl-color-theme-indigo-200: #c7c7f2;
$gl-color-theme-indigo-100: #dbdbf8;
$gl-color-theme-indigo-50: #f1f1ff;
$gl-color-theme-indigo-10: #f8f8ff;
$gl-color-red-950: #4d0a00;
$gl-color-red-900: #660e00;
$gl-color-red-800: #8d1300;
......
src/tokens/build/scss/_tokens.scss
+ 72
− 0
View file @ feab27d8
......@@ -235,6 +235,78 @@ $data-viz-green-300: #94c25e !default;
$data-viz-green-200: #b0d97b !default;
$data-viz-green-100: #c6ed94 !default;
$data-viz-green-50: #ddfab7 !default;
$gl-color-theme-light-red-950: #5c1105;
$gl-color-theme-light-red-900: #751709;
$gl-color-theme-light-red-800: #8b2212;
$gl-color-theme-light-red-700: #a02e1c;
$gl-color-theme-light-red-600: #b53a26;
$gl-color-theme-light-red-500: #c24b38;
$gl-color-theme-light-red-400: #d36250;
$gl-color-theme-light-red-300: #e07f6f;
$gl-color-theme-light-red-200: #ebada2;
$gl-color-theme-light-red-100: #f6d9d5;
$gl-color-theme-light-red-50: #faf2f1;
$gl-color-theme-light-red-10: #fdf9f8;
$gl-color-theme-red-950: #380700;
$gl-color-theme-red-900: #580d02;
$gl-color-theme-red-800: #761405;
$gl-color-theme-red-700: #8f2110;
$gl-color-theme-red-600: #a13322;
$gl-color-theme-red-500: #ad4a3b;
$gl-color-theme-red-400: #c66e60;
$gl-color-theme-red-300: #d59086;
$gl-color-theme-red-200: #e3bab5;
$gl-color-theme-red-100: #ecd3d0;
$gl-color-theme-red-50: #f4e9e7;
$gl-color-theme-red-10: #faf4f3;
$gl-color-theme-green-950: #052e19;
$gl-color-theme-green-900: #0e4328;
$gl-color-theme-green-800: #155635;
$gl-color-theme-green-700: #1b653f;
$gl-color-theme-green-600: #25744c;
$gl-color-theme-green-500: #308258;
$gl-color-theme-green-400: #499767;
$gl-color-theme-green-300: #69af7d;
$gl-color-theme-green-200: #8cc497;
$gl-color-theme-green-100: #b1d6b5;
$gl-color-theme-green-50: #dde9de;
$gl-color-theme-green-10: #eef4ef;
$gl-color-theme-light-blue-950: #0a3764;
$gl-color-theme-light-blue-900: #0c4277;
$gl-color-theme-light-blue-800: #0e4d8d;
$gl-color-theme-light-blue-700: #145aa1;
$gl-color-theme-light-blue-600: #2268ae;
$gl-color-theme-light-blue-500: #3476b9;
$gl-color-theme-light-blue-400: #4f8bc7;
$gl-color-theme-light-blue-300: #74a3d3;
$gl-color-theme-light-blue-200: #a0bedc;
$gl-color-theme-light-blue-100: #c1d4e6;
$gl-color-theme-light-blue-50: #dde6ee;
$gl-color-theme-light-blue-10: #eef3f7;
$gl-color-theme-blue-950: #04101c;
$gl-color-theme-blue-900: #0b2640;
$gl-color-theme-blue-800: #153c63;
$gl-color-theme-blue-700: #235180;
$gl-color-theme-blue-600: #346596;
$gl-color-theme-blue-500: #4977a5;
$gl-color-theme-blue-400: #628eb9;
$gl-color-theme-blue-300: #81a5c9;
$gl-color-theme-blue-200: #a6bdd5;
$gl-color-theme-blue-100: #b9cadc;
$gl-color-theme-blue-50: #cdd8e3;
$gl-color-theme-blue-10: #e6ecf0;
$gl-color-theme-indigo-950: #14143d;
$gl-color-theme-indigo-900: #222261;
$gl-color-theme-indigo-800: #303083;
$gl-color-theme-indigo-700: #41419f;
$gl-color-theme-indigo-600: #5252b5;
$gl-color-theme-indigo-500: #6666c4;
$gl-color-theme-indigo-400: #8181d7;
$gl-color-theme-indigo-300: #a2a2e6;
$gl-color-theme-indigo-200: #c7c7f2;
$gl-color-theme-indigo-100: #dbdbf8;
$gl-color-theme-indigo-50: #f1f1ff;
$gl-color-theme-indigo-10: #f8f8ff;
$gl-color-red-950: #4d0a00;
$gl-color-red-900: #660e00;
$gl-color-red-800: #8d1300;
......
src/tokens/build/scss/_tokens_custom_properties.scss
+ 72
− 0
View file @ feab27d8
......@@ -90,6 +90,78 @@ $gl-color-red-700: var(--gl-color-red-700);
$gl-color-red-800: var(--gl-color-red-800);
$gl-color-red-900: var(--gl-color-red-900);
$gl-color-red-950: var(--gl-color-red-950);
$gl-color-theme-indigo-10: var(--gl-color-theme-indigo-10);
$gl-color-theme-indigo-50: var(--gl-color-theme-indigo-50);
$gl-color-theme-indigo-100: var(--gl-color-theme-indigo-100);
$gl-color-theme-indigo-200: var(--gl-color-theme-indigo-200);
$gl-color-theme-indigo-300: var(--gl-color-theme-indigo-300);
$gl-color-theme-indigo-400: var(--gl-color-theme-indigo-400);
$gl-color-theme-indigo-500: var(--gl-color-theme-indigo-500);
$gl-color-theme-indigo-600: var(--gl-color-theme-indigo-600);
$gl-color-theme-indigo-700: var(--gl-color-theme-indigo-700);
$gl-color-theme-indigo-800: var(--gl-color-theme-indigo-800);
$gl-color-theme-indigo-900: var(--gl-color-theme-indigo-900);
$gl-color-theme-indigo-950: var(--gl-color-theme-indigo-950);
$gl-color-theme-blue-10: var(--gl-color-theme-blue-10);
$gl-color-theme-blue-50: var(--gl-color-theme-blue-50);
$gl-color-theme-blue-100: var(--gl-color-theme-blue-100);
$gl-color-theme-blue-200: var(--gl-color-theme-blue-200);
$gl-color-theme-blue-300: var(--gl-color-theme-blue-300);
$gl-color-theme-blue-400: var(--gl-color-theme-blue-400);
$gl-color-theme-blue-500: var(--gl-color-theme-blue-500);
$gl-color-theme-blue-600: var(--gl-color-theme-blue-600);
$gl-color-theme-blue-700: var(--gl-color-theme-blue-700);
$gl-color-theme-blue-800: var(--gl-color-theme-blue-800);
$gl-color-theme-blue-900: var(--gl-color-theme-blue-900);
$gl-color-theme-blue-950: var(--gl-color-theme-blue-950);
$gl-color-theme-light-blue-10: var(--gl-color-theme-light-blue-10);
$gl-color-theme-light-blue-50: var(--gl-color-theme-light-blue-50);
$gl-color-theme-light-blue-100: var(--gl-color-theme-light-blue-100);
$gl-color-theme-light-blue-200: var(--gl-color-theme-light-blue-200);
$gl-color-theme-light-blue-300: var(--gl-color-theme-light-blue-300);
$gl-color-theme-light-blue-400: var(--gl-color-theme-light-blue-400);
$gl-color-theme-light-blue-500: var(--gl-color-theme-light-blue-500);
$gl-color-theme-light-blue-600: var(--gl-color-theme-light-blue-600);
$gl-color-theme-light-blue-700: var(--gl-color-theme-light-blue-700);
$gl-color-theme-light-blue-800: var(--gl-color-theme-light-blue-800);
$gl-color-theme-light-blue-900: var(--gl-color-theme-light-blue-900);
$gl-color-theme-light-blue-950: var(--gl-color-theme-light-blue-950);
$gl-color-theme-green-10: var(--gl-color-theme-green-10);
$gl-color-theme-green-50: var(--gl-color-theme-green-50);
$gl-color-theme-green-100: var(--gl-color-theme-green-100);
$gl-color-theme-green-200: var(--gl-color-theme-green-200);
$gl-color-theme-green-300: var(--gl-color-theme-green-300);
$gl-color-theme-green-400: var(--gl-color-theme-green-400);
$gl-color-theme-green-500: var(--gl-color-theme-green-500);
$gl-color-theme-green-600: var(--gl-color-theme-green-600);
$gl-color-theme-green-700: var(--gl-color-theme-green-700);
$gl-color-theme-green-800: var(--gl-color-theme-green-800);
$gl-color-theme-green-900: var(--gl-color-theme-green-900);
$gl-color-theme-green-950: var(--gl-color-theme-green-950);
$gl-color-theme-red-10: var(--gl-color-theme-red-10);
$gl-color-theme-red-50: var(--gl-color-theme-red-50);
$gl-color-theme-red-100: var(--gl-color-theme-red-100);
$gl-color-theme-red-200: var(--gl-color-theme-red-200);
$gl-color-theme-red-300: var(--gl-color-theme-red-300);
$gl-color-theme-red-400: var(--gl-color-theme-red-400);
$gl-color-theme-red-500: var(--gl-color-theme-red-500);
$gl-color-theme-red-600: var(--gl-color-theme-red-600);
$gl-color-theme-red-700: var(--gl-color-theme-red-700);
$gl-color-theme-red-800: var(--gl-color-theme-red-800);
$gl-color-theme-red-900: var(--gl-color-theme-red-900);
$gl-color-theme-red-950: var(--gl-color-theme-red-950);
$gl-color-theme-light-red-10: var(--gl-color-theme-light-red-10);
$gl-color-theme-light-red-50: var(--gl-color-theme-light-red-50);
$gl-color-theme-light-red-100: var(--gl-color-theme-light-red-100);
$gl-color-theme-light-red-200: var(--gl-color-theme-light-red-200);
$gl-color-theme-light-red-300: var(--gl-color-theme-light-red-300);
$gl-color-theme-light-red-400: var(--gl-color-theme-light-red-400);
$gl-color-theme-light-red-500: var(--gl-color-theme-light-red-500);
$gl-color-theme-light-red-600: var(--gl-color-theme-light-red-600);
$gl-color-theme-light-red-700: var(--gl-color-theme-light-red-700);
$gl-color-theme-light-red-800: var(--gl-color-theme-light-red-800);
$gl-color-theme-light-red-900: var(--gl-color-theme-light-red-900);
$gl-color-theme-light-red-950: var(--gl-color-theme-light-red-950);
$data-viz-green-50: var(--data-viz-green-50);
$data-viz-green-100: var(--data-viz-green-100);
$data-viz-green-200: var(--data-viz-green-200);
......
src/tokens/color.constant.tokens.json
+ 300
− 0
View file @ feab27d8
......@@ -287,6 +287,306 @@
"$value": "#4d0a00",
"$type": "color"
}
},
"theme-indigo": {
"10": {
"$value": "#f8f8ff",
"$type": "color"
},
"50": {
"$value": "#f1f1ff",
"$type": "color"
},
"100": {
"$value": "#dbdbf8",
"$type": "color"
},
"200": {
"$value": "#c7c7f2",
"$type": "color"
},
"300": {
"$value": "#a2a2e6",
"$type": "color"
},
"400": {
"$value": "#8181d7",
"$type": "color"
},
"500": {
"$value": "#6666c4",
"$type": "color"
},
"600": {
"$value": "#5252b5",
"$type": "color"
},
"700": {
"$value": "#41419f",
"$type": "color"
},
"800": {
"$value": "#303083",
"$type": "color"
},
"900": {
"$value": "#222261",
"$type": "color"
},
"950": {
"$value": "#14143d",
"$type": "color"
}
},
"theme-blue": {
"10": {
"$value": "#e6ecf0",
"$type": "color"
},
"50": {
"$value": "#cdd8e3",
"$type": "color"
},
"100": {
"$value": "#b9cadc",
"$type": "color"
},
"200": {
"$value": "#a6bdd5",
"$type": "color"
},
"300": {
"$value": "#81a5c9",
"$type": "color"
},
"400": {
"$value": "#628eb9",
"$type": "color"
},
"500": {
"$value": "#4977a5",
"$type": "color"
},
"600": {
"$value": "#346596",
"$type": "color"
},
"700": {
"$value": "#235180",
"$type": "color"
},
"800": {
"$value": "#153c63",
"$type": "color"
},
"900": {
"$value": "#0b2640",
"$type": "color"
},
"950": {
"$value": "#04101c",
"$type": "color"
}
},
"theme-light-blue": {
"10": {
"$value": "#eef3f7",
"$type": "color"
},
"50": {
"$value": "#dde6ee",
"$type": "color"
},
"100": {
"$value": "#c1d4e6",
"$type": "color"
},
"200": {
"$value": "#a0bedc",
"$type": "color"
},
"300": {
"$value": "#74a3d3",
"$type": "color"
},
"400": {
"$value": "#4f8bc7",
"$type": "color"
},
"500": {
"$value": "#3476b9",
"$type": "color"
},
"600": {
"$value": "#2268ae",
"$type": "color"
},
"700": {
"$value": "#145aa1",
"$type": "color"
},
"800": {
"$value": "#0e4d8d",
"$type": "color"
},
"900": {
"$value": "#0c4277",
"$type": "color"
},
"950": {
"$value": "#0a3764",
"$type": "color"
}
},
"theme-green": {
"10": {
"$value": "#eef4ef",
"$type": "color"
},
"50": {
"$value": "#dde9de",
"$type": "color"
},
"100": {
"$value": "#b1d6b5",
"$type": "color"
},
"200": {
"$value": "#8cc497",
"$type": "color"
},
"300": {
"$value": "#69af7d",
"$type": "color"
},
"400": {
"$value": "#499767",
"$type": "color"
},
"500": {
"$value": "#308258",
"$type": "color"
},
"600": {
"$value": "#25744c",
"$type": "color"
},
"700": {
"$value": "#1b653f",
"$type": "color"
},
"800": {
"$value": "#155635",
"$type": "color"
},
"900": {
"$value": "#0e4328",
"$type": "color"
},
"950": {
"$value": "#052e19",
"$type": "color"
}
},
"theme-red": {
"10": {
"$value": "#faf4f3",
"$type": "color"
},
"50": {
"$value": "#f4e9e7",
"$type": "color"
},
"100": {
"$value": "#ecd3d0",
"$type": "color"
},
"200": {
"$value": "#e3bab5",
"$type": "color"
},
"300": {
"$value": "#d59086",
"$type": "color"
},
"400": {
"$value": "#c66e60",
"$type": "color"
},
"500": {
"$value": "#ad4a3b",
"$type": "color"
},
"600": {
"$value": "#a13322",
"$type": "color"
},
"700": {
"$value": "#8f2110",
"$type": "color"
},
"800": {
"$value": "#761405",
"$type": "color"
},
"900": {
"$value": "#580d02",
"$type": "color"
},
"950": {
"$value": "#380700",
"$type": "color"
}
},
"theme-light-red": {
"10": {
"$value": "#fdf9f8",
"$type": "color"
},
"50": {
"$value": "#faf2f1",
"$type": "color"
},
"100": {
"$value": "#f6d9d5",
"$type": "color"
},
"200": {
"$value": "#ebada2",
"$type": "color"
},
"300": {
"$value": "#e07f6f",
"$type": "color"
},
"400": {
"$value": "#d36250",
"$type": "color"
},
"500": {
"$value": "#c24b38",
"$type": "color"
},
"600": {
"$value": "#b53a26",
"$type": "color"
},
"700": {
"$value": "#a02e1c",
"$type": "color"
},
"800": {
"$value": "#8b2212",
"$type": "color"
},
"900": {
"$value": "#751709",
"$type": "color"
},
"950": {
"$value": "#5c1105",
"$type": "color"
}
}
}
}
src/tokens/color.constant.tokens.stories.js
+ 18
− 0
View file @ feab27d8
......@@ -13,6 +13,24 @@ export const Red = createDesignTokenStory({ tokens: COMPILED_TOKENS.color.red })
export const Purple = createDesignTokenStory({ tokens: COMPILED_TOKENS.color.purple });
export const ThemeIndigo = createDesignTokenStory({
tokens: COMPILED_TOKENS.color['theme-indigo'],
});
export const ThemeBlue = createDesignTokenStory({ tokens: COMPILED_TOKENS.color['theme-blue'] });
export const ThemeLightBlue = createDesignTokenStory({
tokens: COMPILED_TOKENS.color['theme-light-blue'],
});
export const ThemeGreen = createDesignTokenStory({ tokens: COMPILED_TOKENS.color['theme-green'] });
export const ThemeRed = createDesignTokenStory({ tokens: COMPILED_TOKENS.color['theme-red'] });
export const ThemeLightRed = createDesignTokenStory({
tokens: COMPILED_TOKENS.color['theme-light-red'],
});
// eslint-disable-next-line storybook/csf-component
export default {
title: 'tokens/color/constant',
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment