@gitlab/ui 80.17.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;
@@ -335,6 +407,10 @@ $gl-icon-color-disabled: $gl-color-neutral-500; // Used for an icon within a dis
 $gl-icon-color-strong: $gl-color-neutral-10; // Used for an icon with the highest contrast.
 $gl-icon-color-subtle: $gl-color-neutral-300; // Used for a static or decorational icon. Can be paired with subtle text.
 $gl-icon-color-default: $gl-color-neutral-100; // Used for the default icon color. Can be paired with default text.
+$gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
+$gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
+$gl-border-color-subtle: $gl-color-neutral-900; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+$gl-border-color-default: $gl-color-neutral-800; // Used for the default border color.
 $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.

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;
@@ -335,6 +407,10 @@ $gl-icon-color-disabled: $gl-color-neutral-300; // Used for an icon within a dis
 $gl-icon-color-strong: $gl-color-neutral-900; // Used for an icon with the highest contrast.
 $gl-icon-color-subtle: $gl-color-neutral-500; // Used for a static or decorational icon. Can be paired with subtle text.
 $gl-icon-color-default: $gl-color-neutral-700; // Used for the default icon color. Can be paired with default text.
+$gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
+$gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
+$gl-border-color-subtle: $gl-color-neutral-50; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+$gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
 $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-10; // Used to slightly differentiate the background from the default.

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

@@ -7,6 +7,10 @@ $gl-background-color-default: var(--gl-background-color-default);
 $gl-background-color-subtle: var(--gl-background-color-subtle);
 $gl-background-color-strong: var(--gl-background-color-strong);
 $gl-background-color-disabled: var(--gl-background-color-disabled);
+$gl-border-color-default: var(--gl-border-color-default);
+$gl-border-color-subtle: var(--gl-border-color-subtle);
+$gl-border-color-strong: var(--gl-border-color-strong);
+$gl-border-color-transparent: var(--gl-border-color-transparent);
 $gl-color-alpha-0: var(--gl-color-alpha-0);
 $gl-color-alpha-dark-2: var(--gl-color-alpha-dark-2);
 $gl-color-alpha-dark-4: var(--gl-color-alpha-dark-4);
@@ -90,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/build/tailwind/tokens.cjs

@@ -224,6 +224,14 @@ const backgroundColors = {
   disabled:
     'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
 };
+const borderColors = {
+  default:
+    'var(--gl-border-color-default, var(--gl-color-neutral-100, #dcdcde))',
+  subtle: 'var(--gl-border-color-subtle, var(--gl-color-neutral-50, #ececef))',
+  strong: 'var(--gl-border-color-strong, var(--gl-color-neutral-400, #89888d))',
+  transparent:
+    'var(--gl-border-color-transparent, var(--gl-color-alpha-0, transparent))',
+};
 const iconColors = {
   default: 'var(--gl-icon-color-default, var(--gl-color-neutral-700, #535158))',
   subtle: 'var(--gl-icon-color-subtle, var(--gl-color-neutral-500, #737278))',
@@ -274,6 +282,11 @@ const backgroundColor = {
   ...backgroundColors,
 };
 
+const borderColor = {
+  ...colors,
+  ...borderColors,
+};
+
 const fill = {
   ...colors,
   icon: {
@@ -292,6 +305,7 @@ const textColor = {
 module.exports = {
   colors,
   backgroundColor,
+  borderColor,
   textColor,
   fill,
 };

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

package/src/tokens/tokens_story.vue

@@ -22,14 +22,14 @@ export default {
     },
   },
   methods: {
-    isAlpha(value) {
-      return value.startsWith('rgba(');
+    isHex(value) {
+      return value.startsWith('#');
     },
     getTokenName(token) {
       return token.path.filter(Boolean).join('.');
     },
     getClasses(value) {
-      if (this.isAlpha(value)) return '';
+      if (!this.isHex(value)) return '';
       if (!this.isBackgroundColorStory) return '';
 
       const textColorVariant = colorFromBackground(value, 4.5);
@@ -68,12 +68,12 @@ export default {
           </gl-badge>
           <code class="gl-reset-color">{{ token.value }}</code>
           <gl-color-contrast
-            v-if="!isAlpha(token.value)"
+            v-if="isHex(token.value)"
             :foreground="token.value"
             :background="darkBackground"
           />
           <gl-color-contrast
-            v-if="!isAlpha(token.value)"
+            v-if="isHex(token.value)"
             :foreground="token.value"
             :background="lightBackground"
           />

package/tailwind.defaults.js

@@ -1,6 +1,7 @@
 const {
   colors,
   backgroundColor,
+  borderColor,
   fill,
   textColor,
 } = require('./src/tokens/build/tailwind/tokens.cjs');
@@ -54,6 +55,7 @@ module.exports = {
     },
     colors,
     backgroundColor,
+    borderColor,
     fill,
     spacing,
     fontSize: {

package/translations.json

@@ -1,12 +1,12 @@
 {
   "ClearIconButton.title": "Clear",
-  "GlSorting.sortAscending": "Sort direction: ascending",
-  "GlSorting.sortDescending": "Sort direction: descending",
-  "GlSearchBoxByType.clearButtonTitle": "Clear",
-  "GlSearchBoxByType.input.placeholder": "Search",
-  "GlKeysetPagination.prevText": "Previous",
+  "GlBreadcrumb.showMoreLabel": "Show more breadcrumbs",
+  "GlCollapsibleListbox.srOnlyResultsLabel": "Results count",
   "GlKeysetPagination.navigationLabel": "Pagination",
   "GlKeysetPagination.nextText": "Next",
-  "GlBreadcrumb.showMoreLabel": "Show more breadcrumbs",
-  "GlCollapsibleListbox.srOnlyResultsLabel": "Results count"
+  "GlKeysetPagination.prevText": "Previous",
+  "GlSearchBoxByType.clearButtonTitle": "Clear",
+  "GlSearchBoxByType.input.placeholder": "Search",
+  "GlSorting.sortAscending": "Sort direction: ascending",
+  "GlSorting.sortDescending": "Sort direction: descending"
 }