@gitlab/ui 80.17.0 → 80.19.0

package/dist/tokens/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/dist/tokens/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/dist/tokens/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/dist/tokens/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/dist/tokens/tokens_story.js

@@ -22,14 +22,14 @@ var script = {
     }
   },
   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);
       return {
@@ -54,7 +54,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[_c('ul',{staticClass:"gl-list-style-none gl-m-0 gl-p-0"},_vm._l((_vm.tokens),function(token){return _c('li',{key:token.name,staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3",class:_vm.getClasses(token.value),style:(_vm.getStyle(token.value))},[_c('code',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-reset-color",attrs:{"title":token.comment}},[_vm._v("\n        "+_vm._s(_vm.getTokenName(token))+"\n      ")]),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-gap-3"},[(token.deprecated)?_c('gl-badge',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":token.comment,"variant":"danger"}},[_vm._v("\n          Deprecated\n        ")]):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-reset-color"},[_vm._v(_vm._s(token.value))]),_vm._v(" "),(!_vm.isAlpha(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.darkBackground}}):_vm._e(),_vm._v(" "),(!_vm.isAlpha(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.lightBackground}}):_vm._e()],1)])}),0)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[_c('ul',{staticClass:"gl-list-style-none gl-m-0 gl-p-0"},_vm._l((_vm.tokens),function(token){return _c('li',{key:token.name,staticClass:"gl-display-flex gl-flex-wrap gl-align-items-center gl-justify-content-space-between gl-gap-3 gl-p-3",class:_vm.getClasses(token.value),style:(_vm.getStyle(token.value))},[_c('code',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-reset-color",attrs:{"title":token.comment}},[_vm._v("\n        "+_vm._s(_vm.getTokenName(token))+"\n      ")]),_vm._v(" "),_c('div',{staticClass:"gl-display-flex gl-align-items-center gl-gap-3"},[(token.deprecated)?_c('gl-badge',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":token.comment,"variant":"danger"}},[_vm._v("\n          Deprecated\n        ")]):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-reset-color"},[_vm._v(_vm._s(token.value))]),_vm._v(" "),(_vm.isHex(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.darkBackground}}):_vm._e(),_vm._v(" "),(_vm.isHex(token.value))?_c('gl-color-contrast',{attrs:{"foreground":token.value,"background":_vm.lightBackground}}):_vm._e()],1)])}),0)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "80.17.0",
+  "version": "80.19.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -107,7 +107,7 @@
     "@gitlab/eslint-plugin": "19.5.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.1.0",
-    "@gitlab/svgs": "3.99.0",
+    "@gitlab/svgs": "3.101.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
@@ -119,7 +119,7 @@
     "@storybook/addon-viewport": "^7.6.19",
     "@storybook/builder-webpack5": "^7.6.19",
     "@storybook/test": "^7.6.19",
-    "@storybook/test-runner": "0.18.1",
+    "@storybook/test-runner": "0.18.2",
     "@storybook/theming": "^7.6.19",
     "@storybook/vue": "^7.6.17",
     "@storybook/vue-webpack5": "^7.6.17",
@@ -144,7 +144,7 @@
     "emoji-regex": "^10.0.0",
     "eslint": "8.57.0",
     "eslint-import-resolver-jest": "3.0.2",
-    "eslint-plugin-cypress": "3.2.0",
+    "eslint-plugin-cypress": "3.3.0",
     "eslint-plugin-storybook": "0.8.0",
     "glob": "10.3.3",
     "identity-obj-proxy": "^3.0.0",

package/src/tokens/border.tokens.json

@@ -0,0 +1,35 @@
+{
+  "border": {
+    "color": {
+      "default": {
+        "$value": {
+          "default": "{color.neutral.100}",
+          "dark": "{color.neutral.800}"
+        },
+        "$type": "color",
+        "$description": "Used for the default border color."
+      },
+      "subtle": {
+        "$value": {
+          "default": "{color.neutral.50}",
+          "dark": "{color.neutral.900}"
+        },
+        "$type": "color",
+        "$description": "Used for a border that has a little more definition, or is used in combination with a subtle background."
+      },
+      "strong": {
+        "$value": {
+          "default": "{color.neutral.400}",
+          "dark": "{color.neutral.400}"
+        },
+        "$type": "color",
+        "$description": "Used for a distinct border that emphasizes an edge or boundaries."
+      },
+      "transparent": {
+        "$value": "{color.alpha.0}",
+        "$type": "color",
+        "$description": "Used when a border needs to be present, but not visibly perceived."
+      }
+    }
+  }
+}

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

@@ -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;
@@ -337,6 +409,10 @@
   --gl-icon-color-strong: var(--gl-color-neutral-900); /* Used for an icon with the highest contrast. */
   --gl-icon-color-subtle: var(--gl-color-neutral-500); /* Used for a static or decorational icon. Can be paired with subtle text. */
   --gl-icon-color-default: var(--gl-color-neutral-700); /* Used for the default icon color. Can be paired with default text. */
+  --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
+  --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
+  --gl-border-color-subtle: var(--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: var(--gl-color-neutral-100); /* Used for the default border color. */
   --gl-background-color-disabled: var(--gl-color-neutral-10); /* Used to identify a disabled section. */
   --gl-background-color-strong: var(--gl-color-neutral-50); /* Used to make the background easily stand out from the default. */
   --gl-background-color-subtle: var(--gl-color-neutral-10); /* Used to slightly differentiate the background from the default. */

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

@@ -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;
@@ -337,6 +409,10 @@
   --gl-icon-color-strong: var(--gl-color-neutral-10); /* Used for an icon with the highest contrast. */
   --gl-icon-color-subtle: var(--gl-color-neutral-300); /* Used for a static or decorational icon. Can be paired with subtle text. */
   --gl-icon-color-default: var(--gl-color-neutral-100); /* Used for the default icon color. Can be paired with default text. */
+  --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
+  --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
+  --gl-border-color-subtle: var(--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: var(--gl-color-neutral-800); /* Used for the default border color. */
   --gl-background-color-disabled: var(--gl-color-neutral-900); /* Used to identify a disabled section. */
   --gl-background-color-strong: var(--gl-color-neutral-800); /* Used to make the background easily stand out from the default. */
   --gl-background-color-subtle: var(--gl-color-neutral-900); /* Used to slightly differentiate the background from the default. */