@gitlab/ui 132.1.0 → 132.2.1

package/dist/vendor/bootstrap-vue/src/utils/router.js

@@ -81,11 +81,9 @@ const routerLink = {
 };
 const isRouterLink = tag => !!(tag && !isTag(tag, 'a'));
 const computeTag = (_ref, thisOrParent) => {
-  let {
-    to,
-    disabled,
-    routerComponentName
-  } = _ref;
+  let to = _ref.to,
+    disabled = _ref.disabled,
+    routerComponentName = _ref.routerComponentName;
   const hasRouter = !!safeVueInstance(thisOrParent).$router;
   const hasNuxt = !!safeVueInstance(thisOrParent).$nuxt;
   if (!hasRouter || hasRouter && (disabled || !to)) {
@@ -104,17 +102,15 @@ const computeTag = (_ref, thisOrParent) => {
   return routerComponentName || (hasNuxt ? 'nuxt-link' : actualRouterLink);
 };
 const computeRel = function () {
-  let {
-    target,
-    rel
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    target = _ref2.target,
+    rel = _ref2.rel;
   return target === '_blank' && isNull(rel) ? 'noopener' : rel || null;
 };
 const computeHref = function () {
-  let {
-    href,
-    to
-  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  let _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    href = _ref3.href,
+    to = _ref3.to;
   let tag = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ANCHOR_TAG;
   let fallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '#';
   let toFallback = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '/';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "132.1.0",
+  "version": "132.2.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -39,6 +39,7 @@
     "prepack": "yarn build",
     "copy-fonts": "make copy-fonts",
     "build-tokens": "make tokens",
+    "generate-theme-ramps": "node bin/generate_theme_ramps.mjs",
     "sync-tokens": "node --env-file=.figma.env bin/figma_sync_tokens.mjs",
     "figma:connect": "node --env-file=.figma.env node_modules/.bin/figma connect",
     "clean": "rm -r dist storybook",
@@ -91,18 +92,19 @@
     "chokidar": "^4.0.3",
     "sane": "^5.0.1",
     "jackspeak": "2.1.1",
-    "postcss": "8.5.10",
+    "postcss": "8.5.13",
     "json5": "2.2.3",
     "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "3.3.1"
   },
   "devDependencies": {
+    "@adobe/leonardo-contrast-colors": "^1.1.0",
     "@babel/core": "^7.29.0",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/preset-env": "^7.29.2",
+    "@babel/preset-env": "^7.29.3",
     "@babel/preset-react": "^7.28.5",
     "@cypress/grep": "^4.1.1",
-    "@figma/code-connect": "^1.4.3",
+    "@figma/code-connect": "^1.4.4",
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/hybrid-vue": "npm:@vue/compat@3.5.30",
     "@gitlab/svgs": "*",
@@ -128,7 +130,7 @@
     "@vue/compiler-sfc": "3.5.32",
     "@vue/server-renderer": "3.5.32",
     "@vue/test-utils": "1.3.6",
-    "@vue/test-utils-vue3": "npm:@vue/test-utils@^2.4.6",
+    "@vue/test-utils-vue3": "npm:@vue/test-utils@^2.4.10",
     "@vue/vue2-jest": "29.2.6",
     "@vue/vue3-jest": "^29.2.6",
     "@yarnpkg/lockfile": "^1.1.0",
@@ -137,7 +139,7 @@
     "autoprefixer": "10.5.0",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
-    "cypress": "15.14.0",
+    "cypress": "15.14.2",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",
@@ -154,7 +156,7 @@
     "pikaday": "^1.8.0",
     "playwright": "^1.59.1",
     "playwright-core": "^1.59.1",
-    "postcss": "8.5.10",
+    "postcss": "8.5.13",
     "postcss-loader": "8.2.1",
     "postcss-scss": "4.0.9",
     "react": "18.3.1",

package/src/scss/gitlab_ui.scss

@@ -19,3 +19,6 @@
 
 // Components
 @import "components";
+
+// Themes
+@import "themes";

package/src/scss/storybook.scss

@@ -18,6 +18,9 @@
 @import "typography";
 @import "components";
 
+// Themes
+@import "themes";
+
 /**
  * Custom padding for docs pages. This improves the integration in Pajamas pages.
  */

package/src/scss/themes.scss

@@ -0,0 +1,84 @@
+:root.tint-neutral-indigo {
+  --gl-color-neutral-0: #fff;
+  --gl-color-neutral-10: #f9f8fa;
+  --gl-color-neutral-50: #efebf2;
+  --gl-color-neutral-100: #e1d9e6;
+  --gl-color-neutral-200: #c2bdc7;
+  --gl-color-neutral-300: #a5a2a8;
+  --gl-color-neutral-400: #89888b;
+  --gl-color-neutral-500: #747275;
+  --gl-color-neutral-600: #665f6b;
+  --gl-color-neutral-700: #54465d;
+  --gl-color-neutral-800: #453151;
+  --gl-color-neutral-900: #331f3f;
+  --gl-color-neutral-950: #230f2e;
+  --gl-color-neutral-1000: #0e0017;
+}
+
+:root.tint-neutral-blue {
+  --gl-color-neutral-0: #fff;
+  --gl-color-neutral-10: #f8f8fa;
+  --gl-color-neutral-50: #e9ebf0;
+  --gl-color-neutral-100: #d7dce5;
+  --gl-color-neutral-200: #bcbfc6;
+  --gl-color-neutral-300: #a1a3a7;
+  --gl-color-neutral-400: #88888a;
+  --gl-color-neutral-500: #727274;
+  --gl-color-neutral-600: #5e626a;
+  --gl-color-neutral-700: #444c5c;
+  --gl-color-neutral-800: #2e394f;
+  --gl-color-neutral-900: #1d273c;
+  --gl-color-neutral-950: #0e172b;
+  --gl-color-neutral-1000: #010415;
+}
+
+:root.tint-neutral-green {
+  --gl-color-neutral-0: #fff;
+  --gl-color-neutral-10: #f7f9f8;
+  --gl-color-neutral-50: #e6edeb;
+  --gl-color-neutral-100: #d4dfdb;
+  --gl-color-neutral-200: #b9c1bf;
+  --gl-color-neutral-300: #a0a4a3;
+  --gl-color-neutral-400: #878988;
+  --gl-color-neutral-500: #717372;
+  --gl-color-neutral-600: #5b6460;
+  --gl-color-neutral-700: #3d4f49;
+  --gl-color-neutral-800: #293d37;
+  --gl-color-neutral-900: #172b25;
+  --gl-color-neutral-950: #081b16;
+  --gl-color-neutral-1000: #000603;
+}
+
+:root.tint-neutral-red {
+  --gl-color-neutral-0: #fff;
+  --gl-color-neutral-10: #fbf7f9;
+  --gl-color-neutral-50: #f4eaee;
+  --gl-color-neutral-100: #e9d7de;
+  --gl-color-neutral-200: #cabbc1;
+  --gl-color-neutral-300: #aaa1a4;
+  --gl-color-neutral-400: #8b8789;
+  --gl-color-neutral-500: #747273;
+  --gl-color-neutral-600: #695f63;
+  --gl-color-neutral-700: #59474d;
+  --gl-color-neutral-800: #4a323b;
+  --gl-color-neutral-900: #37212a;
+  --gl-color-neutral-950: #26111a;
+  --gl-color-neutral-1000: #100106;
+}
+
+:root.tint-neutral-gray {
+  --gl-color-neutral-0: #fff;
+  --gl-color-neutral-10: #f8f8f8;
+  --gl-color-neutral-50: #ececec;
+  --gl-color-neutral-100: #dcdcdc;
+  --gl-color-neutral-200: #bfbfbf;
+  --gl-color-neutral-300: #a3a3a3;
+  --gl-color-neutral-400: #898889;
+  --gl-color-neutral-500: #727272;
+  --gl-color-neutral-600: #616161;
+  --gl-color-neutral-700: #4b4b4b;
+  --gl-color-neutral-800: #383839;
+  --gl-color-neutral-900: #272727;
+  --gl-color-neutral-950: #171717;
+  --gl-color-neutral-1000: #050505;
+}

package/src/tokens/build/css/tokens.css

@@ -30,64 +30,21 @@
   --gl-color-blue-800: #284779;
   --gl-color-blue-900: #213454;
   --gl-color-blue-950: #1d283e;
-  --gl-color-neutral-0: #fff;
-  --gl-color-neutral-10: #fbfafd;
-  --gl-color-neutral-50: #ececef;
-  --gl-color-neutral-100: #dcdcde;
-  --gl-color-neutral-200: #bfbfc3;
-  --gl-color-neutral-300: #a4a3a8;
-  --gl-color-neutral-400: #89888d;
-  --gl-color-neutral-500: #737278;
-  --gl-color-neutral-600: #626168;
-  --gl-color-neutral-700: #4c4b51;
-  --gl-color-neutral-800: #3a383f;
-  --gl-color-neutral-900: #28272d;
-  --gl-color-neutral-950: #18171d;
-  --gl-color-neutral-1000: #050506;
-  --gl-color-green-50: #ecf4ee;
-  --gl-color-green-100: #c3e6cd;
-  --gl-color-green-200: #91d4a8;
-  --gl-color-green-300: #52b87a;
-  --gl-color-green-400: #2da160;
-  --gl-color-green-500: #108548;
-  --gl-color-green-600: #2f7549;
-  --gl-color-green-700: #306440;
-  --gl-color-green-800: #225131;
-  --gl-color-green-900: #1e3e28;
-  --gl-color-green-950: #17291c;
-  --gl-color-orange-50: #fdf1dd;
-  --gl-color-orange-100: #f5d9a8;
-  --gl-color-orange-200: #e9be74;
-  --gl-color-orange-300: #d99530;
-  --gl-color-orange-400: #c17d10;
-  --gl-color-orange-500: #ab6100;
-  --gl-color-orange-600: #995715;
-  --gl-color-orange-700: #894b16;
-  --gl-color-orange-800: #693c14;
-  --gl-color-orange-900: #532e16;
-  --gl-color-orange-950: #382315;
-  --gl-color-purple-50: #f4f0ff;
-  --gl-color-purple-100: #e1d8f9;
-  --gl-color-purple-200: #cbbbf2;
-  --gl-color-purple-300: #ac93e6;
-  --gl-color-purple-400: #9475db;
-  --gl-color-purple-500: #7b58cf;
-  --gl-color-purple-600: #6a4fb4;
-  --gl-color-purple-700: #5c47a6;
-  --gl-color-purple-800: #493c83;
-  --gl-color-purple-900: #342d59;
-  --gl-color-purple-950: #27243e;
-  --gl-color-red-50: #fcf1ef;
-  --gl-color-red-100: #fdd4cd;
-  --gl-color-red-200: #fcb5aa;
-  --gl-color-red-300: #f6806d;
-  --gl-color-red-400: #ec5941;
-  --gl-color-red-500: #dd2b0e;
-  --gl-color-red-600: #c02f12;
-  --gl-color-red-700: #a32c12;
-  --gl-color-red-800: #812713;
-  --gl-color-red-900: #582014;
-  --gl-color-red-950: #3e1a14;
+  --gl-color-brand-white: #fff;
+  --gl-color-brand-charcoal: #171321;
+  --gl-color-brand-orange-01g: #ffd1bf;
+  --gl-color-brand-orange-01p: #fca326;
+  --gl-color-brand-orange-02p: #fc6d26;
+  --gl-color-brand-orange-03p: #e24329;
+  --gl-color-brand-purple-01g: #ceb3ef;
+  --gl-color-brand-purple-01p: #a989f5;
+  --gl-color-brand-purple-02p: #7759c2;
+  --gl-color-brand-gray-01: #d1d0d3;
+  --gl-color-brand-gray-02: #a2a1a6;
+  --gl-color-brand-gray-03: #74717a;
+  --gl-color-brand-gray-04: #45424d;
+  --gl-color-brand-gray-05: #2b2838;
+  --gl-color-brand-pink-01g: #ffb9c9;
   --gl-color-data-green-50: #ddfab7;
   --gl-color-data-green-100: #c6ed94;
   --gl-color-data-green-200: #b0d97b;
@@ -143,6 +100,64 @@
   --gl-color-data-orange-800: #6f3500;
   --gl-color-data-orange-900: #5e2f05;
   --gl-color-data-orange-950: #4b2707;
+  --gl-color-green-50: #ecf4ee;
+  --gl-color-green-100: #c3e6cd;
+  --gl-color-green-200: #91d4a8;
+  --gl-color-green-300: #52b87a;
+  --gl-color-green-400: #2da160;
+  --gl-color-green-500: #108548;
+  --gl-color-green-600: #2f7549;
+  --gl-color-green-700: #306440;
+  --gl-color-green-800: #225131;
+  --gl-color-green-900: #1e3e28;
+  --gl-color-green-950: #17291c;
+  --gl-color-neutral-0: #fff;
+  --gl-color-neutral-10: #fbfafd;
+  --gl-color-neutral-50: #ececef;
+  --gl-color-neutral-100: #dcdcde;
+  --gl-color-neutral-200: #bfbfc3;
+  --gl-color-neutral-300: #a4a3a8;
+  --gl-color-neutral-400: #89888d;
+  --gl-color-neutral-500: #737278;
+  --gl-color-neutral-600: #626168;
+  --gl-color-neutral-700: #4c4b51;
+  --gl-color-neutral-800: #3a383f;
+  --gl-color-neutral-900: #28272d;
+  --gl-color-neutral-950: #18171d;
+  --gl-color-neutral-1000: #050506;
+  --gl-color-orange-50: #fdf1dd;
+  --gl-color-orange-100: #f5d9a8;
+  --gl-color-orange-200: #e9be74;
+  --gl-color-orange-300: #d99530;
+  --gl-color-orange-400: #c17d10;
+  --gl-color-orange-500: #ab6100;
+  --gl-color-orange-600: #995715;
+  --gl-color-orange-700: #894b16;
+  --gl-color-orange-800: #693c14;
+  --gl-color-orange-900: #532e16;
+  --gl-color-orange-950: #382315;
+  --gl-color-purple-50: #f4f0ff;
+  --gl-color-purple-100: #e1d8f9;
+  --gl-color-purple-200: #cbbbf2;
+  --gl-color-purple-300: #ac93e6;
+  --gl-color-purple-400: #9475db;
+  --gl-color-purple-500: #7b58cf;
+  --gl-color-purple-600: #6a4fb4;
+  --gl-color-purple-700: #5c47a6;
+  --gl-color-purple-800: #493c83;
+  --gl-color-purple-900: #342d59;
+  --gl-color-purple-950: #27243e;
+  --gl-color-red-50: #fcf1ef;
+  --gl-color-red-100: #fdd4cd;
+  --gl-color-red-200: #fcb5aa;
+  --gl-color-red-300: #f6806d;
+  --gl-color-red-400: #ec5941;
+  --gl-color-red-500: #dd2b0e;
+  --gl-color-red-600: #c02f12;
+  --gl-color-red-700: #a32c12;
+  --gl-color-red-800: #812713;
+  --gl-color-red-900: #582014;
+  --gl-color-red-950: #3e1a14;
   --gl-color-theme-indigo-10: #f8f8ff;
   --gl-color-theme-indigo-50: #f1f1ff;
   --gl-color-theme-indigo-100: #dbdbf8;
@@ -215,21 +230,6 @@
   --gl-color-theme-light-red-800: #8b2212;
   --gl-color-theme-light-red-900: #751709;
   --gl-color-theme-light-red-950: #5c1105;
-  --gl-color-brand-white: #fff;
-  --gl-color-brand-charcoal: #171321;
-  --gl-color-brand-orange-01g: #ffd1bf;
-  --gl-color-brand-orange-01p: #fca326;
-  --gl-color-brand-orange-02p: #fc6d26;
-  --gl-color-brand-orange-03p: #e24329;
-  --gl-color-brand-purple-01g: #ceb3ef;
-  --gl-color-brand-purple-01p: #a989f5;
-  --gl-color-brand-purple-02p: #7759c2;
-  --gl-color-brand-gray-01: #d1d0d3;
-  --gl-color-brand-gray-02: #a2a1a6;
-  --gl-color-brand-gray-03: #74717a;
-  --gl-color-brand-gray-04: #45424d;
-  --gl-color-brand-gray-05: #2b2838;
-  --gl-color-brand-pink-01g: #ffb9c9;
   --gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),'GitLab Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
   --gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'GitLab Mono','JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
   --gl-font-size-100: 0.75rem; /** Used for meta text and small labels. */
@@ -481,75 +481,6 @@
   --theme-light-red-800: #8b2212;
   --theme-light-red-900: #751709;
   --theme-light-red-950: #5c1105;
-  --black: #050506;
-  --white: #fff;
-  --blue-50: #e9f3fc;
-  --blue-100: #cbe2f9;
-  --blue-200: #9dc7f1;
-  --blue-300: #63a6e9;
-  --blue-400: #428fdc;
-  --blue-500: #1f75cb;
-  --blue-600: #2f68b4;
-  --blue-700: #2f5ca0;
-  --blue-800: #284779;
-  --blue-900: #213454;
-  --blue-950: #1d283e;
-  --gray-10: #fbfafd;
-  --gray-50: #ececef;
-  --gray-100: #dcdcde;
-  --gray-200: #bfbfc3;
-  --gray-300: #a4a3a8;
-  --gray-400: #89888d;
-  --gray-500: #737278;
-  --gray-600: #626168;
-  --gray-700: #4c4b51;
-  --gray-800: #3a383f;
-  --gray-900: #28272d;
-  --gray-950: #18171d;
-  --green-50: #ecf4ee;
-  --green-100: #c3e6cd;
-  --green-200: #91d4a8;
-  --green-300: #52b87a;
-  --green-400: #2da160;
-  --green-500: #108548;
-  --green-600: #2f7549;
-  --green-700: #306440;
-  --green-800: #225131;
-  --green-900: #1e3e28;
-  --green-950: #17291c;
-  --orange-50: #fdf1dd;
-  --orange-100: #f5d9a8;
-  --orange-200: #e9be74;
-  --orange-300: #d99530;
-  --orange-400: #c17d10;
-  --orange-500: #ab6100;
-  --orange-600: #995715;
-  --orange-700: #894b16;
-  --orange-800: #693c14;
-  --orange-900: #532e16;
-  --orange-950: #382315;
-  --purple-50: #f4f0ff;
-  --purple-100: #e1d8f9;
-  --purple-200: #cbbbf2;
-  --purple-300: #ac93e6;
-  --purple-400: #9475db;
-  --purple-500: #7b58cf;
-  --purple-600: #6a4fb4;
-  --purple-700: #5c47a6;
-  --purple-800: #493c83;
-  --purple-900: #342d59;
-  --purple-950: #27243e;
-  --red-50: #fcf1ef;
-  --red-100: #fdd4cd;
-  --red-200: #fcb5aa;
-  --red-300: #f57f6c;
-  --red-400: #ec5941;
-  --red-500: #dd2b0e;
-  --red-600: #c02f12;
-  --red-700: #a32c12;
-  --red-800: #812713;
-  --red-900: #582014;
-  --red-950: #3e1a14;
   --brand-charcoal: #171321; /** Use color.brand-charcoal instead. */
   --brand-orange-01: #fca326; /** Use color.brand-orange.01p instead. */
   --brand-orange-02: #fc6d26; /** Use color.brand-orange.02p instead. */
@@ -869,6 +800,75 @@
   --gl-tab-selected-indicator-color-default: var(--gl-color-blue-500); /** Used for the selected indicator of a tab. */
   --gl-token-selector-token-container-token-background-color-focus: var(--gl-color-neutral-300); /** Used for the background color of a token in a token-selector when it's token-container is in the focus state. */
   --gl-token-background-color: var(--gl-color-neutral-100); /** Used for the token background color. */
+  --black: var(--gl-color-neutral-1000);
+  --white: var(--gl-color-neutral-0);
+  --blue-50: var(--gl-color-blue-50);
+  --blue-100: var(--gl-color-blue-100);
+  --blue-200: var(--gl-color-blue-200);
+  --blue-300: var(--gl-color-blue-300);
+  --blue-400: var(--gl-color-blue-400);
+  --blue-500: var(--gl-color-blue-500);
+  --blue-600: var(--gl-color-blue-600);
+  --blue-700: var(--gl-color-blue-700);
+  --blue-800: var(--gl-color-blue-800);
+  --blue-900: var(--gl-color-blue-900);
+  --blue-950: var(--gl-color-blue-950);
+  --gray-10: var(--gl-color-neutral-10);
+  --gray-50: var(--gl-color-neutral-50);
+  --gray-100: var(--gl-color-neutral-100);
+  --gray-200: var(--gl-color-neutral-200);
+  --gray-300: var(--gl-color-neutral-300);
+  --gray-400: var(--gl-color-neutral-400);
+  --gray-500: var(--gl-color-neutral-500);
+  --gray-600: var(--gl-color-neutral-600);
+  --gray-700: var(--gl-color-neutral-700);
+  --gray-800: var(--gl-color-neutral-800);
+  --gray-900: var(--gl-color-neutral-900);
+  --gray-950: var(--gl-color-neutral-950);
+  --green-50: var(--gl-color-green-50);
+  --green-100: var(--gl-color-green-100);
+  --green-200: var(--gl-color-green-200);
+  --green-300: var(--gl-color-green-300);
+  --green-400: var(--gl-color-green-400);
+  --green-500: var(--gl-color-green-500);
+  --green-600: var(--gl-color-green-600);
+  --green-700: var(--gl-color-green-700);
+  --green-800: var(--gl-color-green-800);
+  --green-900: var(--gl-color-green-900);
+  --green-950: var(--gl-color-green-950);
+  --orange-50: var(--gl-color-orange-50);
+  --orange-100: var(--gl-color-orange-100);
+  --orange-200: var(--gl-color-orange-200);
+  --orange-300: var(--gl-color-orange-300);
+  --orange-400: var(--gl-color-orange-400);
+  --orange-500: var(--gl-color-orange-500);
+  --orange-600: var(--gl-color-orange-600);
+  --orange-700: var(--gl-color-orange-700);
+  --orange-800: var(--gl-color-orange-800);
+  --orange-900: var(--gl-color-orange-900);
+  --orange-950: var(--gl-color-orange-950);
+  --purple-50: var(--gl-color-purple-50);
+  --purple-100: var(--gl-color-purple-100);
+  --purple-200: var(--gl-color-purple-200);
+  --purple-300: var(--gl-color-purple-300);
+  --purple-400: var(--gl-color-purple-400);
+  --purple-500: var(--gl-color-purple-500);
+  --purple-600: var(--gl-color-purple-600);
+  --purple-700: var(--gl-color-purple-700);
+  --purple-800: var(--gl-color-purple-800);
+  --purple-900: var(--gl-color-purple-900);
+  --purple-950: var(--gl-color-purple-950);
+  --red-50: var(--gl-color-red-50);
+  --red-100: var(--gl-color-red-100);
+  --red-200: var(--gl-color-red-200);
+  --red-300: var(--gl-color-red-300);
+  --red-400: var(--gl-color-red-400);
+  --red-500: var(--gl-color-red-500);
+  --red-600: var(--gl-color-red-600);
+  --red-700: var(--gl-color-red-700);
+  --red-800: var(--gl-color-red-800);
+  --red-900: var(--gl-color-red-900);
+  --red-950: var(--gl-color-red-950);
   --gl-action-disabled-foreground-color: var(--gl-color-neutral-400); /** Used for the foreground of a disabled action. */
   --gl-action-disabled-background-color: var(--gl-color-neutral-50); /** Used for the background of a disabled action. */
   --gl-action-disabled-border-color: var(--gl-color-neutral-100); /** Used for the border of a disabled action. */