@gitlab/ui 80.11.0 → 80.12.0

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

@@ -2,15 +2,43 @@
 // Automatically generated
 // Do not edit directly
 
-$gl-text-color-disabled: #89888d !default; // Used for disabled text.
-$gl-text-color-link: #63a6e9 !default; // Used for default text links.
-$gl-text-color-heading: #fff !default; // Used for headings level 1-6.
-$gl-text-color-strong: #fff !default; // Used for text with the highest contrast.
-$gl-text-color-subtle: #bfbfc3 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
-$gl-text-color-default: #ececef !default; // Used for the default text color.
 $gl-text-tertiary: #737278 !default; // Use text.color.disabled instead
 $gl-text-secondary: #89888d !default; // Use text.color.subtle instead
 $gl-text-primary: #ececef !default; // Use text.color.default instead
+$gl-line-height-52: 3.25rem;
+$gl-line-height-44: 2.75rem;
+$gl-line-height-42: 2.625rem;
+$gl-line-height-36: 2.25rem;
+$gl-line-height-32: 2rem;
+$gl-line-height-28: 1.75rem;
+$gl-line-height-24: 1.5rem;
+$gl-line-height-20: 1.25rem;
+$gl-line-height-16: 1rem;
+$gl-line-height-12: 0.75rem;
+$t-white-a-08: rgba(255, 255, 255, 0.08) !default;
+$t-white-a-06: rgba(255, 255, 255, 0.06) !default;
+$t-white-a-04: rgba(255, 255, 255, 0.04) !default;
+$t-white-a-02: rgba(255, 255, 255, 0.02) !default;
+$t-white-a-36: rgba(255, 255, 255, 0.36) !default;
+$t-white-a-24: rgba(255, 255, 255, 0.24) !default;
+$t-white-a-16: rgba(255, 255, 255, 0.16) !default;
+$t-gray-a-08: rgba(31, 30, 36, 0.08) !default;
+$t-gray-a-06: rgba(31, 30, 36, 0.06) !default;
+$t-gray-a-04: rgba(31, 30, 36, 0.04) !default;
+$t-gray-a-02: rgba(31, 30, 36, 0.02) !default;
+$t-gray-a-24: rgba(31, 30, 36, 0.24) !default;
+$t-gray-a-16: rgba(31, 30, 36, 0.16) !default;
+$brand-gray-05: #2b2838 !default;
+$brand-gray-04: #45424d !default;
+$brand-gray-03: #74717a !default;
+$brand-gray-02: #a2a1a6 !default;
+$brand-gray-01: #d1d0d3 !default;
+$brand-purple-02: #7759c2 !default;
+$brand-purple-01: #a989f5 !default;
+$brand-orange-03: #e24329 !default;
+$brand-orange-02: #fc6d26 !default;
+$brand-orange-01: #fca326 !default;
+$brand-charcoal: #171321 !default;
 $red-950: #fff4f3 !default;
 $red-900: #fcf1ef !default;
 $red-800: #fdd4cd !default;
@@ -207,3 +235,80 @@ $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-red-950: #4d0a00;
+$gl-color-red-900: #660e00;
+$gl-color-red-800: #8d1300;
+$gl-color-red-700: #ae1800;
+$gl-color-red-600: #c91c00;
+$gl-color-red-500: #dd2b0e;
+$gl-color-red-400: #ec5941;
+$gl-color-red-300: #f57f6c;
+$gl-color-red-200: #fcb5aa;
+$gl-color-red-100: #fdd4cd;
+$gl-color-red-50: #fcf1ef;
+$gl-color-purple-950: #232150;
+$gl-color-purple-900: #2f2a6b;
+$gl-color-purple-800: #453894;
+$gl-color-purple-700: #5943b6;
+$gl-color-purple-600: #694cc0;
+$gl-color-purple-500: #7b58cf;
+$gl-color-purple-400: #9475db;
+$gl-color-purple-300: #ac93e6;
+$gl-color-purple-200: #cbbbf2;
+$gl-color-purple-100: #e1d8f9;
+$gl-color-purple-50: #f4f0ff;
+$gl-color-orange-950: #421f00;
+$gl-color-orange-900: #5c2900;
+$gl-color-orange-800: #703800;
+$gl-color-orange-700: #8f4700;
+$gl-color-orange-600: #9e5400;
+$gl-color-orange-500: #ab6100;
+$gl-color-orange-400: #c17d10;
+$gl-color-orange-300: #d99530;
+$gl-color-orange-200: #e9be74;
+$gl-color-orange-100: #f5d9a8;
+$gl-color-orange-50: #fdf1dd;
+$gl-color-green-950: #072b15;
+$gl-color-green-900: #0a4020;
+$gl-color-green-800: #0d532a;
+$gl-color-green-700: #24663b;
+$gl-color-green-600: #217645;
+$gl-color-green-500: #108548;
+$gl-color-green-400: #2da160;
+$gl-color-green-300: #52b87a;
+$gl-color-green-200: #91d4a8;
+$gl-color-green-100: #c3e6cd;
+$gl-color-green-50: #ecf4ee;
+$gl-color-neutral-1000: #000;
+$gl-color-neutral-950: #1f1e24;
+$gl-color-neutral-900: #333238;
+$gl-color-neutral-800: #434248;
+$gl-color-neutral-700: #535158;
+$gl-color-neutral-600: #626168;
+$gl-color-neutral-500: #737278;
+$gl-color-neutral-400: #89888d;
+$gl-color-neutral-300: #a4a3a8;
+$gl-color-neutral-200: #bfbfc3;
+$gl-color-neutral-100: #dcdcde;
+$gl-color-neutral-50: #ececef;
+$gl-color-neutral-10: #fbfafd;
+$gl-color-neutral-0: #fff;
+$gl-color-blue-950: #002850;
+$gl-color-blue-900: #033464;
+$gl-color-blue-800: #064787;
+$gl-color-blue-700: #0b5cad;
+$gl-color-blue-600: #1068bf;
+$gl-color-blue-500: #1f75cb;
+$gl-color-blue-400: #428fdc;
+$gl-color-blue-300: #63a6e9;
+$gl-color-blue-200: #9dc7f1;
+$gl-color-blue-100: #cbe2f9;
+$gl-color-blue-50: #e9f3fc;
+$gl-text-color-disabled: $gl-color-neutral-400 !default; // Used for disabled text.
+$gl-text-color-success: $gl-color-green-300 !default; // Used for text indicating success or validity.
+$gl-text-color-danger: $gl-color-red-300 !default; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
+$gl-text-color-link: $gl-color-blue-300 !default; // Used for default text links.
+$gl-text-color-heading: $gl-color-neutral-0 !default; // Used for headings level 1-6.
+$gl-text-color-strong: $gl-color-neutral-0 !default; // Used for text with the highest contrast.
+$gl-text-color-subtle: $gl-color-neutral-200 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
+$gl-text-color-default: $gl-color-neutral-50 !default; // Used for the default text color.

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

@@ -2,14 +2,6 @@
 // Automatically generated
 // Do not edit directly
 
-$gl-text-color-disabled: #89888d !default; // Used for disabled text.
-$gl-text-color-success: #217645 !default; // Used for text indicating success or validity.
-$gl-text-color-danger: #c91c00 !default; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
-$gl-text-color-link: #0b5cad !default; // Used for default text links.
-$gl-text-color-heading: #1f1e24 !default; // Used for headings level 1-6.
-$gl-text-color-strong: #1f1e24 !default; // Used for text with the highest contrast.
-$gl-text-color-subtle: #626168 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
-$gl-text-color-default: #434248 !default; // Used for the default text color.
 $gl-text-tertiary: #89888d !default; // Use text.color.disabled instead
 $gl-text-secondary: #737278 !default; // Use text.color.subtle instead
 $gl-text-primary: #333238 !default; // Use text.color.default instead
@@ -243,3 +235,80 @@ $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-red-950: #4d0a00;
+$gl-color-red-900: #660e00;
+$gl-color-red-800: #8d1300;
+$gl-color-red-700: #ae1800;
+$gl-color-red-600: #c91c00;
+$gl-color-red-500: #dd2b0e;
+$gl-color-red-400: #ec5941;
+$gl-color-red-300: #f57f6c;
+$gl-color-red-200: #fcb5aa;
+$gl-color-red-100: #fdd4cd;
+$gl-color-red-50: #fcf1ef;
+$gl-color-purple-950: #232150;
+$gl-color-purple-900: #2f2a6b;
+$gl-color-purple-800: #453894;
+$gl-color-purple-700: #5943b6;
+$gl-color-purple-600: #694cc0;
+$gl-color-purple-500: #7b58cf;
+$gl-color-purple-400: #9475db;
+$gl-color-purple-300: #ac93e6;
+$gl-color-purple-200: #cbbbf2;
+$gl-color-purple-100: #e1d8f9;
+$gl-color-purple-50: #f4f0ff;
+$gl-color-orange-950: #421f00;
+$gl-color-orange-900: #5c2900;
+$gl-color-orange-800: #703800;
+$gl-color-orange-700: #8f4700;
+$gl-color-orange-600: #9e5400;
+$gl-color-orange-500: #ab6100;
+$gl-color-orange-400: #c17d10;
+$gl-color-orange-300: #d99530;
+$gl-color-orange-200: #e9be74;
+$gl-color-orange-100: #f5d9a8;
+$gl-color-orange-50: #fdf1dd;
+$gl-color-green-950: #072b15;
+$gl-color-green-900: #0a4020;
+$gl-color-green-800: #0d532a;
+$gl-color-green-700: #24663b;
+$gl-color-green-600: #217645;
+$gl-color-green-500: #108548;
+$gl-color-green-400: #2da160;
+$gl-color-green-300: #52b87a;
+$gl-color-green-200: #91d4a8;
+$gl-color-green-100: #c3e6cd;
+$gl-color-green-50: #ecf4ee;
+$gl-color-neutral-1000: #000;
+$gl-color-neutral-950: #1f1e24;
+$gl-color-neutral-900: #333238;
+$gl-color-neutral-800: #434248;
+$gl-color-neutral-700: #535158;
+$gl-color-neutral-600: #626168;
+$gl-color-neutral-500: #737278;
+$gl-color-neutral-400: #89888d;
+$gl-color-neutral-300: #a4a3a8;
+$gl-color-neutral-200: #bfbfc3;
+$gl-color-neutral-100: #dcdcde;
+$gl-color-neutral-50: #ececef;
+$gl-color-neutral-10: #fbfafd;
+$gl-color-neutral-0: #fff;
+$gl-color-blue-950: #002850;
+$gl-color-blue-900: #033464;
+$gl-color-blue-800: #064787;
+$gl-color-blue-700: #0b5cad;
+$gl-color-blue-600: #1068bf;
+$gl-color-blue-500: #1f75cb;
+$gl-color-blue-400: #428fdc;
+$gl-color-blue-300: #63a6e9;
+$gl-color-blue-200: #9dc7f1;
+$gl-color-blue-100: #cbe2f9;
+$gl-color-blue-50: #e9f3fc;
+$gl-text-color-disabled: $gl-color-neutral-400 !default; // Used for disabled text.
+$gl-text-color-success: $gl-color-green-600 !default; // Used for text indicating success or validity.
+$gl-text-color-danger: $gl-color-red-600 !default; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
+$gl-text-color-link: $gl-color-blue-700 !default; // Used for default text links.
+$gl-text-color-heading: $gl-color-neutral-950 !default; // Used for headings level 1-6.
+$gl-text-color-strong: $gl-color-neutral-950 !default; // Used for text with the highest contrast.
+$gl-text-color-subtle: $gl-color-neutral-600 !default; // Used for supplemental text that doesn't need to be as prominent as other text.
+$gl-text-color-default: $gl-color-neutral-800 !default; // Used for the default text color.

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

@@ -3,6 +3,75 @@
  * Do not edit directly
  */
 
+$gl-color-blue-50: var(--gl-color-blue-50);
+$gl-color-blue-100: var(--gl-color-blue-100);
+$gl-color-blue-200: var(--gl-color-blue-200);
+$gl-color-blue-300: var(--gl-color-blue-300);
+$gl-color-blue-400: var(--gl-color-blue-400);
+$gl-color-blue-500: var(--gl-color-blue-500);
+$gl-color-blue-600: var(--gl-color-blue-600);
+$gl-color-blue-700: var(--gl-color-blue-700);
+$gl-color-blue-800: var(--gl-color-blue-800);
+$gl-color-blue-900: var(--gl-color-blue-900);
+$gl-color-blue-950: var(--gl-color-blue-950);
+$gl-color-neutral-0: var(--gl-color-neutral-0);
+$gl-color-neutral-10: var(--gl-color-neutral-10);
+$gl-color-neutral-50: var(--gl-color-neutral-50);
+$gl-color-neutral-100: var(--gl-color-neutral-100);
+$gl-color-neutral-200: var(--gl-color-neutral-200);
+$gl-color-neutral-300: var(--gl-color-neutral-300);
+$gl-color-neutral-400: var(--gl-color-neutral-400);
+$gl-color-neutral-500: var(--gl-color-neutral-500);
+$gl-color-neutral-600: var(--gl-color-neutral-600);
+$gl-color-neutral-700: var(--gl-color-neutral-700);
+$gl-color-neutral-800: var(--gl-color-neutral-800);
+$gl-color-neutral-900: var(--gl-color-neutral-900);
+$gl-color-neutral-950: var(--gl-color-neutral-950);
+$gl-color-neutral-1000: var(--gl-color-neutral-1000);
+$gl-color-green-50: var(--gl-color-green-50);
+$gl-color-green-100: var(--gl-color-green-100);
+$gl-color-green-200: var(--gl-color-green-200);
+$gl-color-green-300: var(--gl-color-green-300);
+$gl-color-green-400: var(--gl-color-green-400);
+$gl-color-green-500: var(--gl-color-green-500);
+$gl-color-green-600: var(--gl-color-green-600);
+$gl-color-green-700: var(--gl-color-green-700);
+$gl-color-green-800: var(--gl-color-green-800);
+$gl-color-green-900: var(--gl-color-green-900);
+$gl-color-green-950: var(--gl-color-green-950);
+$gl-color-orange-50: var(--gl-color-orange-50);
+$gl-color-orange-100: var(--gl-color-orange-100);
+$gl-color-orange-200: var(--gl-color-orange-200);
+$gl-color-orange-300: var(--gl-color-orange-300);
+$gl-color-orange-400: var(--gl-color-orange-400);
+$gl-color-orange-500: var(--gl-color-orange-500);
+$gl-color-orange-600: var(--gl-color-orange-600);
+$gl-color-orange-700: var(--gl-color-orange-700);
+$gl-color-orange-800: var(--gl-color-orange-800);
+$gl-color-orange-900: var(--gl-color-orange-900);
+$gl-color-orange-950: var(--gl-color-orange-950);
+$gl-color-purple-50: var(--gl-color-purple-50);
+$gl-color-purple-100: var(--gl-color-purple-100);
+$gl-color-purple-200: var(--gl-color-purple-200);
+$gl-color-purple-300: var(--gl-color-purple-300);
+$gl-color-purple-400: var(--gl-color-purple-400);
+$gl-color-purple-500: var(--gl-color-purple-500);
+$gl-color-purple-600: var(--gl-color-purple-600);
+$gl-color-purple-700: var(--gl-color-purple-700);
+$gl-color-purple-800: var(--gl-color-purple-800);
+$gl-color-purple-900: var(--gl-color-purple-900);
+$gl-color-purple-950: var(--gl-color-purple-950);
+$gl-color-red-50: var(--gl-color-red-50);
+$gl-color-red-100: var(--gl-color-red-100);
+$gl-color-red-200: var(--gl-color-red-200);
+$gl-color-red-300: var(--gl-color-red-300);
+$gl-color-red-400: var(--gl-color-red-400);
+$gl-color-red-500: var(--gl-color-red-500);
+$gl-color-red-600: var(--gl-color-red-600);
+$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);
 $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

@@ -204,14 +204,15 @@ const dataVizColors = {
   'data-viz-orange-950': 'var(--data-viz-orange-950, #4b2707)',
 };
 const textColors = {
-  default: 'var(--gl-text-color-default, #434248)',
-  subtle: 'var(--gl-text-color-subtle, #626168)',
-  strong: 'var(--gl-text-color-strong, #1f1e24)',
-  heading: 'var(--gl-text-color-heading, #1f1e24)',
-  link: 'var(--gl-text-color-link, #0b5cad)',
-  danger: 'var(--gl-text-color-danger, #c91c00)',
-  success: 'var(--gl-text-color-success, #217645)',
-  disabled: 'var(--gl-text-color-disabled, #89888d)',
+  default: 'var(--gl-text-color-default, var(--gl-color-neutral-800, #434248))',
+  subtle: 'var(--gl-text-color-subtle, var(--gl-color-neutral-600, #626168))',
+  strong: 'var(--gl-text-color-strong, var(--gl-color-neutral-950, #1f1e24))',
+  heading: 'var(--gl-text-color-heading, var(--gl-color-neutral-950, #1f1e24))',
+  link: 'var(--gl-text-color-link, var(--gl-color-blue-700, #0b5cad))',
+  danger: 'var(--gl-text-color-danger, var(--gl-color-red-600, #c91c00))',
+  success: 'var(--gl-text-color-success, var(--gl-color-green-600, #217645))',
+  disabled:
+    'var(--gl-text-color-disabled, var(--gl-color-neutral-400, #89888d))',
 };
 
 const colors = {

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

@@ -0,0 +1,292 @@
+{
+  "color": {
+    "blue": {
+      "50": {
+        "$value": "#e9f3fc",
+        "$type": "color"
+      },
+      "100": {
+        "$value": "#cbe2f9",
+        "$type": "color"
+      },
+      "200": {
+        "$value": "#9dc7f1",
+        "$type": "color"
+      },
+      "300": {
+        "$value": "#63a6e9",
+        "$type": "color"
+      },
+      "400": {
+        "$value": "#428fdc",
+        "$type": "color"
+      },
+      "500": {
+        "$value": "#1f75cb",
+        "$type": "color"
+      },
+      "600": {
+        "$value": "#1068bf",
+        "$type": "color"
+      },
+      "700": {
+        "$value": "#0b5cad",
+        "$type": "color"
+      },
+      "800": {
+        "$value": "#064787",
+        "$type": "color"
+      },
+      "900": {
+        "$value": "#033464",
+        "$type": "color"
+      },
+      "950": {
+        "$value": "#002850",
+        "$type": "color"
+      }
+    },
+    "neutral": {
+      "0": {
+        "$value": "#fff",
+        "$type": "color"
+      },
+      "10": {
+        "$value": "#fbfafd",
+        "$type": "color"
+      },
+      "50": {
+        "$value": "#ececef",
+        "$type": "color"
+      },
+      "100": {
+        "$value": "#dcdcde",
+        "$type": "color"
+      },
+      "200": {
+        "$value": "#bfbfc3",
+        "$type": "color"
+      },
+      "300": {
+        "$value": "#a4a3a8",
+        "$type": "color"
+      },
+      "400": {
+        "$value": "#89888d",
+        "$type": "color"
+      },
+      "500": {
+        "$value": "#737278",
+        "$type": "color"
+      },
+      "600": {
+        "$value": "#626168",
+        "$type": "color"
+      },
+      "700": {
+        "$value": "#535158",
+        "$type": "color"
+      },
+      "800": {
+        "$value": "#434248",
+        "$type": "color"
+      },
+      "900": {
+        "$value": "#333238",
+        "$type": "color"
+      },
+      "950": {
+        "$value": "#1f1e24",
+        "$type": "color"
+      },
+      "1000": {
+        "$value": "#000",
+        "$type": "color"
+      }
+    },
+    "green": {
+      "50": {
+        "$value": "#ecf4ee",
+        "$type": "color"
+      },
+      "100": {
+        "$value": "#c3e6cd",
+        "$type": "color"
+      },
+      "200": {
+        "$value": "#91d4a8",
+        "$type": "color"
+      },
+      "300": {
+        "$value": "#52b87a",
+        "$type": "color"
+      },
+      "400": {
+        "$value": "#2da160",
+        "$type": "color"
+      },
+      "500": {
+        "$value": "#108548",
+        "$type": "color"
+      },
+      "600": {
+        "$value": "#217645",
+        "$type": "color"
+      },
+      "700": {
+        "$value": "#24663b",
+        "$type": "color"
+      },
+      "800": {
+        "$value": "#0d532a",
+        "$type": "color"
+      },
+      "900": {
+        "$value": "#0a4020",
+        "$type": "color"
+      },
+      "950": {
+        "$value": "#072b15",
+        "$type": "color"
+      }
+    },
+    "orange": {
+      "50": {
+        "$value": "#fdf1dd",
+        "$type": "color"
+      },
+      "100": {
+        "$value": "#f5d9a8",
+        "$type": "color"
+      },
+      "200": {
+        "$value": "#e9be74",
+        "$type": "color"
+      },
+      "300": {
+        "$value": "#d99530",
+        "$type": "color"
+      },
+      "400": {
+        "$value": "#c17d10",
+        "$type": "color"
+      },
+      "500": {
+        "$value": "#ab6100",
+        "$type": "color"
+      },
+      "600": {
+        "$value": "#9e5400",
+        "$type": "color"
+      },
+      "700": {
+        "$value": "#8f4700",
+        "$type": "color"
+      },
+      "800": {
+        "$value": "#703800",
+        "$type": "color"
+      },
+      "900": {
+        "$value": "#5c2900",
+        "$type": "color"
+      },
+      "950": {
+        "$value": "#421f00",
+        "$type": "color"
+      }
+    },
+    "purple": {
+      "50": {
+        "$value": "#f4f0ff",
+        "$type": "color"
+      },
+      "100": {
+        "$value": "#e1d8f9",
+        "$type": "color"
+      },
+      "200": {
+        "$value": "#cbbbf2",
+        "$type": "color"
+      },
+      "300": {
+        "$value": "#ac93e6",
+        "$type": "color"
+      },
+      "400": {
+        "$value": "#9475db",
+        "$type": "color"
+      },
+      "500": {
+        "$value": "#7b58cf",
+        "$type": "color"
+      },
+      "600": {
+        "$value": "#694cc0",
+        "$type": "color"
+      },
+      "700": {
+        "$value": "#5943b6",
+        "$type": "color"
+      },
+      "800": {
+        "$value": "#453894",
+        "$type": "color"
+      },
+      "900": {
+        "$value": "#2f2a6b",
+        "$type": "color"
+      },
+      "950": {
+        "$value": "#232150",
+        "$type": "color"
+      }
+    },
+    "red": {
+      "50": {
+        "$value": "#fcf1ef",
+        "$type": "color"
+      },
+      "100": {
+        "$value": "#fdd4cd",
+        "$type": "color"
+      },
+      "200": {
+        "$value": "#fcb5aa",
+        "$type": "color"
+      },
+      "300": {
+        "$value": "#f57f6c",
+        "$type": "color"
+      },
+      "400": {
+        "$value": "#ec5941",
+        "$type": "color"
+      },
+      "500": {
+        "$value": "#dd2b0e",
+        "$type": "color"
+      },
+      "600": {
+        "$value": "#c91c00",
+        "$type": "color"
+      },
+      "700": {
+        "$value": "#ae1800",
+        "$type": "color"
+      },
+      "800": {
+        "$value": "#8d1300",
+        "$type": "color"
+      },
+      "900": {
+        "$value": "#660e00",
+        "$type": "color"
+      },
+      "950": {
+        "$value": "#4d0a00",
+        "$type": "color"
+      }
+    }
+  }
+}

package/src/tokens/color.constant.tokens.stories.js

@@ -0,0 +1,19 @@
+import COMPILED_TOKENS from '../../dist/tokens/json/tokens.json';
+import { createDesignTokenStory } from './common_story_options';
+
+export const Neutral = createDesignTokenStory({ tokens: COMPILED_TOKENS.color.neutral });
+
+export const Blue = createDesignTokenStory({ tokens: COMPILED_TOKENS.color.blue });
+
+export const Green = createDesignTokenStory({ tokens: COMPILED_TOKENS.color.green });
+
+export const Orange = createDesignTokenStory({ tokens: COMPILED_TOKENS.color.orange });
+
+export const Red = createDesignTokenStory({ tokens: COMPILED_TOKENS.color.red });
+
+export const Purple = createDesignTokenStory({ tokens: COMPILED_TOKENS.color.purple });
+
+// eslint-disable-next-line storybook/csf-component
+export default {
+  title: 'tokens/color/constant',
+};