@gitlab/ui 80.18.0 → 80.19.0

package/src/tokens/build/scss/_tokens.dark.scss

@@ -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;

package/src/tokens/build/scss/_tokens.scss

@@ -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;

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -94,6 +94,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);

package/src/tokens/color.constant.tokens.json

@@ -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"
+      }
     }
   }
 }