@gitlab/ui 86.14.3 → 86.14.4

package/dist/tokens/build/js/tokens.dark.js

@@ -509,7 +509,7 @@ const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#5c2900'; // Orange backgrou
 const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#28272d'; // Neutral background for avatar fallback with no particular meaning.
 const GL_BANNER_INTRO_BORDER_COLOR = '#1068bf'; // Used to compliment the info banner.
 const GL_BANNER_PROMO_BACKGROUND_COLOR = '#28272d'; // Used as background for the default banner type.
-const GL_BREADCRUMB_SEPARATOR_COLOR = '#4c4b51'; // Used for the breadcrumb level separator.
+const GL_BREADCRUMB_SEPARATOR_COLOR = '#89888d'; // Used for the breadcrumb level separator.
 const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d'; // Used for the label text color on a light background color.
 const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent'; // Used for the label remove button background on a light background color in the default state.
 const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d'; // Used for the label remove button background on a light background color in the hover state.

package/dist/tokens/build/js/tokens.js

@@ -509,7 +509,7 @@ const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#fdf1dd'; // Orange backgrou
 const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#ececef'; // Neutral background for avatar fallback with no particular meaning.
 const GL_BANNER_INTRO_BORDER_COLOR = '#63a6e9'; // Used to compliment the info banner.
 const GL_BANNER_PROMO_BACKGROUND_COLOR = '#fbfafd'; // Used as background for the default banner type.
-const GL_BREADCRUMB_SEPARATOR_COLOR = '#bfbfc3'; // Used for the breadcrumb level separator.
+const GL_BREADCRUMB_SEPARATOR_COLOR = '#89888d'; // Used for the breadcrumb level separator.
 const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d'; // Used for the label text color on a light background color.
 const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent'; // Used for the label remove button background on a light background color in the default state.
 const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d'; // Used for the label remove button background on a light background color in the hover state.

package/dist/tokens/css/tokens.css

@@ -554,7 +554,7 @@
   --gl-label-light-button-background-color-hover: var(--gl-color-neutral-950); /* Used for the label remove button background on a light background color in the hover state. */
   --gl-label-light-button-background-color-default: var(--gl-color-alpha-0); /* Used for the label remove button background on a light background color in the default state. */
   --gl-label-light-text-color: var(--gl-color-neutral-950); /* Used for the label text color on a light background color. */
-  --gl-breadcrumb-separator-color: var(--gl-color-neutral-200); /* Used for the breadcrumb level separator. */
+  --gl-breadcrumb-separator-color: var(--gl-color-neutral-400); /* Used for the breadcrumb level separator. */
   --gl-banner-promo-background-color: var(--gl-color-neutral-10); /* Used as background for the default banner type. */
   --gl-banner-intro-border-color: var(--gl-color-blue-300); /* Used to compliment the info banner. */
   --gl-avatar-fallback-background-color-neutral: var(--gl-color-neutral-50); /* Neutral background for avatar fallback with no particular meaning. */

package/dist/tokens/css/tokens.dark.css

@@ -554,7 +554,7 @@
   --gl-label-light-button-background-color-hover: var(--gl-color-neutral-950); /* Used for the label remove button background on a light background color in the hover state. */
   --gl-label-light-button-background-color-default: var(--gl-color-alpha-0); /* Used for the label remove button background on a light background color in the default state. */
   --gl-label-light-text-color: var(--gl-color-neutral-950); /* Used for the label text color on a light background color. */
-  --gl-breadcrumb-separator-color: var(--gl-color-neutral-700); /* Used for the breadcrumb level separator. */
+  --gl-breadcrumb-separator-color: var(--gl-color-neutral-400); /* Used for the breadcrumb level separator. */
   --gl-banner-promo-background-color: var(--gl-color-neutral-900); /* Used as background for the default banner type. */
   --gl-banner-intro-border-color: var(--gl-color-blue-600); /* Used to compliment the info banner. */
   --gl-avatar-fallback-background-color-neutral: var(--gl-color-neutral-900); /* Neutral background for avatar fallback with no particular meaning. */

package/dist/tokens/js/tokens.dark.js

@@ -509,7 +509,7 @@ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#5c2900'; // Orange b
 export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#28272d'; // Neutral background for avatar fallback with no particular meaning.
 export const GL_BANNER_INTRO_BORDER_COLOR = '#1068bf'; // Used to compliment the info banner.
 export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#28272d'; // Used as background for the default banner type.
-export const GL_BREADCRUMB_SEPARATOR_COLOR = '#4c4b51'; // Used for the breadcrumb level separator.
+export const GL_BREADCRUMB_SEPARATOR_COLOR = '#89888d'; // Used for the breadcrumb level separator.
 export const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d'; // Used for the label text color on a light background color.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent'; // Used for the label remove button background on a light background color in the default state.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d'; // Used for the label remove button background on a light background color in the hover state.

package/dist/tokens/js/tokens.js

@@ -509,7 +509,7 @@ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#fdf1dd'; // Orange b
 export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#ececef'; // Neutral background for avatar fallback with no particular meaning.
 export const GL_BANNER_INTRO_BORDER_COLOR = '#63a6e9'; // Used to compliment the info banner.
 export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#fbfafd'; // Used as background for the default banner type.
-export const GL_BREADCRUMB_SEPARATOR_COLOR = '#bfbfc3'; // Used for the breadcrumb level separator.
+export const GL_BREADCRUMB_SEPARATOR_COLOR = '#89888d'; // Used for the breadcrumb level separator.
 export const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d'; // Used for the label text color on a light background color.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent'; // Used for the label remove button background on a light background color in the default state.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d'; // Used for the label remove button background on a light background color in the hover state.

package/dist/tokens/json/tokens.dark.json

@@ -11062,16 +11062,13 @@
   "breadcrumb": {
     "separator": {
       "color": {
-        "value": "#4c4b51",
+        "value": "#89888d",
         "$type": "color",
         "comment": "Used for the breadcrumb level separator.",
         "filePath": "src/tokens/contextual/breadcrumb.tokens.json",
         "isSource": true,
         "original": {
-          "value": {
-            "default": "{color.neutral.200}",
-            "dark": "{color.neutral.700}"
-          },
+          "value": "{color.neutral.400}",
           "$type": "color",
           "comment": "Used for the breadcrumb level separator."
         },

package/dist/tokens/json/tokens.json

@@ -11062,16 +11062,13 @@
   "breadcrumb": {
     "separator": {
       "color": {
-        "value": "#bfbfc3",
+        "value": "#89888d",
         "$type": "color",
         "comment": "Used for the breadcrumb level separator.",
         "filePath": "src/tokens/contextual/breadcrumb.tokens.json",
         "isSource": true,
         "original": {
-          "value": {
-            "default": "{color.neutral.200}",
-            "dark": "{color.neutral.700}"
-          },
+          "value": "{color.neutral.400}",
           "$type": "color",
           "comment": "Used for the breadcrumb level separator."
         },

package/dist/tokens/scss/_tokens.dark.scss

@@ -552,7 +552,7 @@ $gl-label-light-button-icon-color-default: $gl-color-neutral-950; // Used for th
 $gl-label-light-button-background-color-hover: $gl-color-neutral-950; // Used for the label remove button background on a light background color in the hover state.
 $gl-label-light-button-background-color-default: $gl-color-alpha-0; // Used for the label remove button background on a light background color in the default state.
 $gl-label-light-text-color: $gl-color-neutral-950; // Used for the label text color on a light background color.
-$gl-breadcrumb-separator-color: $gl-color-neutral-700; // Used for the breadcrumb level separator.
+$gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
 $gl-banner-promo-background-color: $gl-color-neutral-900; // Used as background for the default banner type.
 $gl-banner-intro-border-color: $gl-color-blue-600; // Used to compliment the info banner.
 $gl-avatar-fallback-background-color-neutral: $gl-color-neutral-900; // Neutral background for avatar fallback with no particular meaning.

package/dist/tokens/scss/_tokens.scss

@@ -552,7 +552,7 @@ $gl-label-light-button-icon-color-default: $gl-color-neutral-950; // Used for th
 $gl-label-light-button-background-color-hover: $gl-color-neutral-950; // Used for the label remove button background on a light background color in the hover state.
 $gl-label-light-button-background-color-default: $gl-color-alpha-0; // Used for the label remove button background on a light background color in the default state.
 $gl-label-light-text-color: $gl-color-neutral-950; // Used for the label text color on a light background color.
-$gl-breadcrumb-separator-color: $gl-color-neutral-200; // Used for the breadcrumb level separator.
+$gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
 $gl-banner-promo-background-color: $gl-color-neutral-10; // Used as background for the default banner type.
 $gl-banner-intro-border-color: $gl-color-blue-300; // Used to compliment the info banner.
 $gl-avatar-fallback-background-color-neutral: $gl-color-neutral-50; // Neutral background for avatar fallback with no particular meaning.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "86.14.3",
+  "version": "86.14.4",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -554,7 +554,7 @@
   --gl-label-light-button-background-color-hover: var(--gl-color-neutral-950); /* Used for the label remove button background on a light background color in the hover state. */
   --gl-label-light-button-background-color-default: var(--gl-color-alpha-0); /* Used for the label remove button background on a light background color in the default state. */
   --gl-label-light-text-color: var(--gl-color-neutral-950); /* Used for the label text color on a light background color. */
-  --gl-breadcrumb-separator-color: var(--gl-color-neutral-200); /* Used for the breadcrumb level separator. */
+  --gl-breadcrumb-separator-color: var(--gl-color-neutral-400); /* Used for the breadcrumb level separator. */
   --gl-banner-promo-background-color: var(--gl-color-neutral-10); /* Used as background for the default banner type. */
   --gl-banner-intro-border-color: var(--gl-color-blue-300); /* Used to compliment the info banner. */
   --gl-avatar-fallback-background-color-neutral: var(--gl-color-neutral-50); /* Neutral background for avatar fallback with no particular meaning. */

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

@@ -554,7 +554,7 @@
   --gl-label-light-button-background-color-hover: var(--gl-color-neutral-950); /* Used for the label remove button background on a light background color in the hover state. */
   --gl-label-light-button-background-color-default: var(--gl-color-alpha-0); /* Used for the label remove button background on a light background color in the default state. */
   --gl-label-light-text-color: var(--gl-color-neutral-950); /* Used for the label text color on a light background color. */
-  --gl-breadcrumb-separator-color: var(--gl-color-neutral-700); /* Used for the breadcrumb level separator. */
+  --gl-breadcrumb-separator-color: var(--gl-color-neutral-400); /* Used for the breadcrumb level separator. */
   --gl-banner-promo-background-color: var(--gl-color-neutral-900); /* Used as background for the default banner type. */
   --gl-banner-intro-border-color: var(--gl-color-blue-600); /* Used to compliment the info banner. */
   --gl-avatar-fallback-background-color-neutral: var(--gl-color-neutral-900); /* Neutral background for avatar fallback with no particular meaning. */

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

@@ -509,7 +509,7 @@ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#5c2900'; // Orange b
 export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#28272d'; // Neutral background for avatar fallback with no particular meaning.
 export const GL_BANNER_INTRO_BORDER_COLOR = '#1068bf'; // Used to compliment the info banner.
 export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#28272d'; // Used as background for the default banner type.
-export const GL_BREADCRUMB_SEPARATOR_COLOR = '#4c4b51'; // Used for the breadcrumb level separator.
+export const GL_BREADCRUMB_SEPARATOR_COLOR = '#89888d'; // Used for the breadcrumb level separator.
 export const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d'; // Used for the label text color on a light background color.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent'; // Used for the label remove button background on a light background color in the default state.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d'; // Used for the label remove button background on a light background color in the hover state.

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

@@ -509,7 +509,7 @@ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#fdf1dd'; // Orange b
 export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#ececef'; // Neutral background for avatar fallback with no particular meaning.
 export const GL_BANNER_INTRO_BORDER_COLOR = '#63a6e9'; // Used to compliment the info banner.
 export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#fbfafd'; // Used as background for the default banner type.
-export const GL_BREADCRUMB_SEPARATOR_COLOR = '#bfbfc3'; // Used for the breadcrumb level separator.
+export const GL_BREADCRUMB_SEPARATOR_COLOR = '#89888d'; // Used for the breadcrumb level separator.
 export const GL_LABEL_LIGHT_TEXT_COLOR = '#18171d'; // Used for the label text color on a light background color.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent'; // Used for the label remove button background on a light background color in the default state.
 export const GL_LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER = '#18171d'; // Used for the label remove button background on a light background color in the hover state.

package/src/tokens/build/json/tokens.dark.json

@@ -11062,16 +11062,13 @@
   "breadcrumb": {
     "separator": {
       "color": {
-        "value": "#4c4b51",
+        "value": "#89888d",
         "$type": "color",
         "comment": "Used for the breadcrumb level separator.",
         "filePath": "src/tokens/contextual/breadcrumb.tokens.json",
         "isSource": true,
         "original": {
-          "value": {
-            "default": "{color.neutral.200}",
-            "dark": "{color.neutral.700}"
-          },
+          "value": "{color.neutral.400}",
           "$type": "color",
           "comment": "Used for the breadcrumb level separator."
         },

package/src/tokens/build/json/tokens.json

@@ -11062,16 +11062,13 @@
   "breadcrumb": {
     "separator": {
       "color": {
-        "value": "#bfbfc3",
+        "value": "#89888d",
         "$type": "color",
         "comment": "Used for the breadcrumb level separator.",
         "filePath": "src/tokens/contextual/breadcrumb.tokens.json",
         "isSource": true,
         "original": {
-          "value": {
-            "default": "{color.neutral.200}",
-            "dark": "{color.neutral.700}"
-          },
+          "value": "{color.neutral.400}",
           "$type": "color",
           "comment": "Used for the breadcrumb level separator."
         },

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

@@ -552,7 +552,7 @@ $gl-label-light-button-icon-color-default: $gl-color-neutral-950; // Used for th
 $gl-label-light-button-background-color-hover: $gl-color-neutral-950; // Used for the label remove button background on a light background color in the hover state.
 $gl-label-light-button-background-color-default: $gl-color-alpha-0; // Used for the label remove button background on a light background color in the default state.
 $gl-label-light-text-color: $gl-color-neutral-950; // Used for the label text color on a light background color.
-$gl-breadcrumb-separator-color: $gl-color-neutral-700; // Used for the breadcrumb level separator.
+$gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
 $gl-banner-promo-background-color: $gl-color-neutral-900; // Used as background for the default banner type.
 $gl-banner-intro-border-color: $gl-color-blue-600; // Used to compliment the info banner.
 $gl-avatar-fallback-background-color-neutral: $gl-color-neutral-900; // Neutral background for avatar fallback with no particular meaning.

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

@@ -552,7 +552,7 @@ $gl-label-light-button-icon-color-default: $gl-color-neutral-950; // Used for th
 $gl-label-light-button-background-color-hover: $gl-color-neutral-950; // Used for the label remove button background on a light background color in the hover state.
 $gl-label-light-button-background-color-default: $gl-color-alpha-0; // Used for the label remove button background on a light background color in the default state.
 $gl-label-light-text-color: $gl-color-neutral-950; // Used for the label text color on a light background color.
-$gl-breadcrumb-separator-color: $gl-color-neutral-200; // Used for the breadcrumb level separator.
+$gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
 $gl-banner-promo-background-color: $gl-color-neutral-10; // Used as background for the default banner type.
 $gl-banner-intro-border-color: $gl-color-blue-300; // Used to compliment the info banner.
 $gl-avatar-fallback-background-color-neutral: $gl-color-neutral-50; // Neutral background for avatar fallback with no particular meaning.

package/src/tokens/contextual/breadcrumb.tokens.json

@@ -2,10 +2,7 @@
   "breadcrumb": {
     "separator": {
       "color": {
-        "$value": {
-          "default": "{color.neutral.200}",
-          "dark": "{color.neutral.700}"
-        },
+        "$value": "{color.neutral.400}",
         "$type": "color",
         "$description": "Used for the breadcrumb level separator."
       }