@gitlab/ui 80.16.2 → 80.18.0

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))',
@@ -236,6 +244,23 @@ const iconColors = {
   danger: 'var(--gl-icon-color-danger, var(--gl-color-red-600, #c91c00))',
   success: 'var(--gl-icon-color-success, var(--gl-color-green-600, #217645))',
 };
+const alphaDarkColors = {
+  2: 'var(--gl-color-alpha-dark-2, rgba(31, 30, 36, 0.02))',
+  4: 'var(--gl-color-alpha-dark-4, rgba(31, 30, 36, 0.04))',
+  6: 'var(--gl-color-alpha-dark-6, rgba(31, 30, 36, 0.06))',
+  8: 'var(--gl-color-alpha-dark-8, rgba(31, 30, 36, 0.08))',
+  16: 'var(--gl-color-alpha-dark-16, rgba(31, 30, 36, 0.16))',
+  24: 'var(--gl-color-alpha-dark-24, rgba(31, 30, 36, 0.24))',
+};
+const alphaLightColors = {
+  2: 'var(--gl-color-alpha-light-2, rgba(255, 255, 255, 0.02))',
+  4: 'var(--gl-color-alpha-light-4, rgba(255, 255, 255, 0.04))',
+  6: 'var(--gl-color-alpha-light-6, rgba(255, 255, 255, 0.06))',
+  8: 'var(--gl-color-alpha-light-8, rgba(255, 255, 255, 0.08))',
+  16: 'var(--gl-color-alpha-light-16, rgba(255, 255, 255, 0.16))',
+  24: 'var(--gl-color-alpha-light-24, rgba(255, 255, 255, 0.24))',
+  36: 'var(--gl-color-alpha-light-36, rgba(255, 255, 255, 0.36))',
+};
 
 const colors = {
   inherit: 'inherit',
@@ -243,6 +268,10 @@ const colors = {
   transparent: 'transparent',
   white: 'var(--white, #fff)',
   black: 'var(--black, #000)',
+  alpha: {
+    dark: { ...alphaDarkColors },
+    light: { ...alphaLightColors },
+  },
   ...baseColors,
   ...themeColors,
   ...dataVizColors,
@@ -253,6 +282,11 @@ const backgroundColor = {
   ...backgroundColors,
 };
 
+const borderColor = {
+  ...colors,
+  ...borderColors,
+};
+
 const fill = {
   ...colors,
   icon: {
@@ -271,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.16.2",
+  "version": "80.18.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

@@ -306,6 +306,20 @@
   --gl-color-blue-200: #9dc7f1;
   --gl-color-blue-100: #cbe2f9;
   --gl-color-blue-50: #e9f3fc;
+  --gl-color-alpha-light-36: rgba(255, 255, 255, 0.36);
+  --gl-color-alpha-light-24: rgba(255, 255, 255, 0.24);
+  --gl-color-alpha-light-16: rgba(255, 255, 255, 0.16);
+  --gl-color-alpha-light-8: rgba(255, 255, 255, 0.08);
+  --gl-color-alpha-light-6: rgba(255, 255, 255, 0.06);
+  --gl-color-alpha-light-4: rgba(255, 255, 255, 0.04);
+  --gl-color-alpha-light-2: rgba(255, 255, 255, 0.02);
+  --gl-color-alpha-dark-24: rgba(31, 30, 36, 0.24);
+  --gl-color-alpha-dark-16: rgba(31, 30, 36, 0.16);
+  --gl-color-alpha-dark-8: rgba(31, 30, 36, 0.08);
+  --gl-color-alpha-dark-6: rgba(31, 30, 36, 0.06);
+  --gl-color-alpha-dark-4: rgba(31, 30, 36, 0.04);
+  --gl-color-alpha-dark-2: rgba(31, 30, 36, 0.02);
+  --gl-color-alpha-0: transparent;
   --gl-text-color-disabled: var(--gl-color-neutral-400); /* Used for disabled text. */
   --gl-text-color-success: var(--gl-color-green-600); /* Used for text indicating success or validity. */
   --gl-text-color-danger: var(--gl-color-red-600); /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
@@ -323,6 +337,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

@@ -306,6 +306,20 @@
   --gl-color-blue-200: #9dc7f1;
   --gl-color-blue-100: #cbe2f9;
   --gl-color-blue-50: #e9f3fc;
+  --gl-color-alpha-light-36: rgba(255, 255, 255, 0.36);
+  --gl-color-alpha-light-24: rgba(255, 255, 255, 0.24);
+  --gl-color-alpha-light-16: rgba(255, 255, 255, 0.16);
+  --gl-color-alpha-light-8: rgba(255, 255, 255, 0.08);
+  --gl-color-alpha-light-6: rgba(255, 255, 255, 0.06);
+  --gl-color-alpha-light-4: rgba(255, 255, 255, 0.04);
+  --gl-color-alpha-light-2: rgba(255, 255, 255, 0.02);
+  --gl-color-alpha-dark-24: rgba(31, 30, 36, 0.24);
+  --gl-color-alpha-dark-16: rgba(31, 30, 36, 0.16);
+  --gl-color-alpha-dark-8: rgba(31, 30, 36, 0.08);
+  --gl-color-alpha-dark-6: rgba(31, 30, 36, 0.06);
+  --gl-color-alpha-dark-4: rgba(31, 30, 36, 0.04);
+  --gl-color-alpha-dark-2: rgba(31, 30, 36, 0.02);
+  --gl-color-alpha-0: transparent;
   --gl-text-color-disabled: var(--gl-color-neutral-400); /* Used for disabled text. */
   --gl-text-color-success: var(--gl-color-green-300); /* Used for text indicating success or validity. */
   --gl-text-color-danger: var(--gl-color-red-300); /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
@@ -323,6 +337,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. */

package/src/tokens/build/js/tokens.dark.js

@@ -7,6 +7,24 @@ export const GL_BACKGROUND_COLOR_DEFAULT = '#1f1e24'; // Used for the default ba
 export const GL_BACKGROUND_COLOR_SUBTLE = '#333238'; // Used to slightly differentiate the background from the default.
 export const GL_BACKGROUND_COLOR_STRONG = '#434248'; // Used to make the background easily stand out from the default.
 export const GL_BACKGROUND_COLOR_DISABLED = '#333238'; // Used to identify a disabled section.
+export const GL_BORDER_COLOR_DEFAULT = '#434248'; // Used for the default border color.
+export const GL_BORDER_COLOR_SUBTLE = '#333238'; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+export const GL_BORDER_COLOR_STRONG = '#89888d'; // Used for a distinct border that emphasizes an edge or boundaries.
+export const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; // Used when a border needs to be present, but not visibly perceived.
+export const GL_COLOR_ALPHA_0 = 'transparent';
+export const GL_COLOR_ALPHA_DARK_2 = 'rgba(31, 30, 36, 0.02)';
+export const GL_COLOR_ALPHA_DARK_4 = 'rgba(31, 30, 36, 0.04)';
+export const GL_COLOR_ALPHA_DARK_6 = 'rgba(31, 30, 36, 0.06)';
+export const GL_COLOR_ALPHA_DARK_8 = 'rgba(31, 30, 36, 0.08)';
+export const GL_COLOR_ALPHA_DARK_16 = 'rgba(31, 30, 36, 0.16)';
+export const GL_COLOR_ALPHA_DARK_24 = 'rgba(31, 30, 36, 0.24)';
+export const GL_COLOR_ALPHA_LIGHT_2 = 'rgba(255, 255, 255, 0.02)';
+export const GL_COLOR_ALPHA_LIGHT_4 = 'rgba(255, 255, 255, 0.04)';
+export const GL_COLOR_ALPHA_LIGHT_6 = 'rgba(255, 255, 255, 0.06)';
+export const GL_COLOR_ALPHA_LIGHT_8 = 'rgba(255, 255, 255, 0.08)';
+export const GL_COLOR_ALPHA_LIGHT_16 = 'rgba(255, 255, 255, 0.16)';
+export const GL_COLOR_ALPHA_LIGHT_24 = 'rgba(255, 255, 255, 0.24)';
+export const GL_COLOR_ALPHA_LIGHT_36 = 'rgba(255, 255, 255, 0.36)';
 export const GL_COLOR_BLUE_50 = '#e9f3fc';
 export const GL_COLOR_BLUE_100 = '#cbe2f9';
 export const GL_COLOR_BLUE_200 = '#9dc7f1';

package/src/tokens/build/js/tokens.js

@@ -7,6 +7,24 @@ export const GL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the default backg
 export const GL_BACKGROUND_COLOR_SUBTLE = '#fbfafd'; // Used to slightly differentiate the background from the default.
 export const GL_BACKGROUND_COLOR_STRONG = '#ececef'; // Used to make the background easily stand out from the default.
 export const GL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used to identify a disabled section.
+export const GL_BORDER_COLOR_DEFAULT = '#dcdcde'; // Used for the default border color.
+export const GL_BORDER_COLOR_SUBTLE = '#ececef'; // Used for a border that has a little more definition, or is used in combination with a subtle background.
+export const GL_BORDER_COLOR_STRONG = '#89888d'; // Used for a distinct border that emphasizes an edge or boundaries.
+export const GL_BORDER_COLOR_TRANSPARENT = 'transparent'; // Used when a border needs to be present, but not visibly perceived.
+export const GL_COLOR_ALPHA_0 = 'transparent';
+export const GL_COLOR_ALPHA_DARK_2 = 'rgba(31, 30, 36, 0.02)';
+export const GL_COLOR_ALPHA_DARK_4 = 'rgba(31, 30, 36, 0.04)';
+export const GL_COLOR_ALPHA_DARK_6 = 'rgba(31, 30, 36, 0.06)';
+export const GL_COLOR_ALPHA_DARK_8 = 'rgba(31, 30, 36, 0.08)';
+export const GL_COLOR_ALPHA_DARK_16 = 'rgba(31, 30, 36, 0.16)';
+export const GL_COLOR_ALPHA_DARK_24 = 'rgba(31, 30, 36, 0.24)';
+export const GL_COLOR_ALPHA_LIGHT_2 = 'rgba(255, 255, 255, 0.02)';
+export const GL_COLOR_ALPHA_LIGHT_4 = 'rgba(255, 255, 255, 0.04)';
+export const GL_COLOR_ALPHA_LIGHT_6 = 'rgba(255, 255, 255, 0.06)';
+export const GL_COLOR_ALPHA_LIGHT_8 = 'rgba(255, 255, 255, 0.08)';
+export const GL_COLOR_ALPHA_LIGHT_16 = 'rgba(255, 255, 255, 0.16)';
+export const GL_COLOR_ALPHA_LIGHT_24 = 'rgba(255, 255, 255, 0.24)';
+export const GL_COLOR_ALPHA_LIGHT_36 = 'rgba(255, 255, 255, 0.36)';
 export const GL_COLOR_BLUE_50 = '#e9f3fc';
 export const GL_COLOR_BLUE_100 = '#cbe2f9';
 export const GL_COLOR_BLUE_200 = '#9dc7f1';