@gitlab/ui 86.3.0 → 86.4.0

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

@@ -536,6 +536,18 @@ $gl-control-background-color-default: $gl-color-neutral-900; // Used for form co
 $gl-skeleton-loader-shimmer-color: $gl-color-neutral-700; // Used for the animated shimmer effect in a skeleton loader.
 $gl-skeleton-loader-background-color: $gl-color-neutral-800; // Used for the skeleton loader background color.
 $gl-popover-background-color: $gl-color-neutral-900; // Used for the background color of popover.
+$gl-label-scoped-button-icon-color-hover: $gl-color-neutral-950; // Used for the scoped label remove button icon in the hover state.
+$gl-label-scoped-button-icon-color-default: $gl-color-neutral-0; // Used for the scoped label remove button icon in the default state.
+$gl-label-scoped-button-background-color-hover: $gl-color-neutral-0; // Used for the scoped label remove button background in the hover state.
+$gl-label-scoped-text-color: $gl-color-neutral-0; // Used for the scoped label text color.
+$gl-label-dark-button-icon-color-default: $gl-color-neutral-0; // Used for the label remove button icon on a dark background color in the default state.
+$gl-label-dark-button-background-color-hover: $gl-color-neutral-0; // Used for the label remove button background on a dark background color in the hover state.
+$gl-label-dark-button-background-color-default: $gl-color-alpha-0; // Used for the label remove button background on a dark background color in the default state.
+$gl-label-dark-text-color: $gl-color-neutral-0; // Used for the label text color on a dark background color.
+$gl-label-light-button-icon-color-default: $gl-color-neutral-950; // Used for the label remove button icon on a light background color in the default state.
+$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-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.
@@ -648,9 +660,9 @@ $gl-action-neutral-background-color-subtle-default: $gl-color-alpha-0; // Used f
 $gl-action-neutral-background-color-active: $gl-color-neutral-800; // Used for the background of an outlined neutral action in the active state.
 $gl-action-neutral-background-color-focus: $gl-color-neutral-900; // Used for the background of an outlined neutral action in the focus state.
 $gl-action-neutral-background-color-hover: $gl-color-neutral-900; // Used for the background of an outlined neutral action in the hover state.
+$gl-action-neutral-background-color-default: $gl-color-neutral-900; // Used for the background of an outlined neutral action in the default state.
 $gl-action-icon-color-disabled: $gl-color-neutral-500; // Used for the icon of a disabled action.
 $gl-action-text-color-disabled: $gl-color-neutral-400; // Used for the text of a disabled action.
 $gl-action-border-color-disabled: $gl-color-neutral-800; // Used for the border of a disabled action.
 $gl-action-background-color-disabled: $gl-color-neutral-900; // Used for the background of a disabled action.
 $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
-$gl-action-neutral-background-color-default: $gl-background-color-default; // Used for the background of an outlined neutral action in the default state.

package/dist/tokens/scss/_tokens.scss

@@ -536,6 +536,18 @@ $gl-control-background-color-default: $gl-color-neutral-0; // Used for form cont
 $gl-skeleton-loader-shimmer-color: $gl-color-neutral-50; // Used for the animated shimmer effect in a skeleton loader.
 $gl-skeleton-loader-background-color: $gl-color-neutral-100; // Used for the skeleton loader background color.
 $gl-popover-background-color: $gl-color-neutral-0; // Used for the background color of popover.
+$gl-label-scoped-button-icon-color-hover: $gl-color-neutral-0; // Used for the scoped label remove button icon in the hover state.
+$gl-label-scoped-button-icon-color-default: $gl-color-neutral-950; // Used for the scoped label remove button icon in the default state.
+$gl-label-scoped-button-background-color-hover: $gl-color-neutral-950; // Used for the scoped label remove button background in the hover state.
+$gl-label-scoped-text-color: $gl-color-neutral-950; // Used for the scoped label text color.
+$gl-label-dark-button-icon-color-default: $gl-color-neutral-0; // Used for the label remove button icon on a dark background color in the default state.
+$gl-label-dark-button-background-color-hover: $gl-color-neutral-0; // Used for the label remove button background on a dark background color in the hover state.
+$gl-label-dark-button-background-color-default: $gl-color-alpha-0; // Used for the label remove button background on a dark background color in the default state.
+$gl-label-dark-text-color: $gl-color-neutral-0; // Used for the label text color on a dark background color.
+$gl-label-light-button-icon-color-default: $gl-color-neutral-950; // Used for the label remove button icon on a light background color in the default state.
+$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-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.
@@ -648,9 +660,9 @@ $gl-action-neutral-background-color-subtle-default: $gl-color-alpha-0; // Used f
 $gl-action-neutral-background-color-active: $gl-color-neutral-100; // Used for the background of an outlined neutral action in the active state.
 $gl-action-neutral-background-color-focus: $gl-color-neutral-50; // Used for the background of an outlined neutral action in the focus state.
 $gl-action-neutral-background-color-hover: $gl-color-neutral-50; // Used for the background of an outlined neutral action in the hover state.
+$gl-action-neutral-background-color-default: $gl-color-neutral-0; // Used for the background of an outlined neutral action in the default state.
 $gl-action-icon-color-disabled: $gl-color-neutral-400; // Used for the icon of a disabled action.
 $gl-action-text-color-disabled: $gl-color-neutral-500; // Used for the text of a disabled action.
 $gl-action-border-color-disabled: $gl-color-neutral-100; // Used for the border of a disabled action.
 $gl-action-background-color-disabled: $gl-color-neutral-50; // Used for the background of a disabled action.
 $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
-$gl-action-neutral-background-color-default: $gl-background-color-default; // Used for the background of an outlined neutral action in the default state.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -510,6 +510,18 @@ $gl-avatar-fallback-background-color-neutral: var(--gl-avatar-fallback-backgroun
 $gl-banner-intro-border-color: var(--gl-banner-intro-border-color);
 $gl-banner-promo-background-color: var(--gl-banner-promo-background-color);
 $gl-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);
+$gl-label-light-text-color: var(--gl-label-light-text-color);
+$gl-label-light-button-background-color-default: var(--gl-label-light-button-background-color-default);
+$gl-label-light-button-background-color-hover: var(--gl-label-light-button-background-color-hover);
+$gl-label-light-button-icon-color-default: var(--gl-label-light-button-icon-color-default);
+$gl-label-dark-text-color: var(--gl-label-dark-text-color);
+$gl-label-dark-button-background-color-default: var(--gl-label-dark-button-background-color-default);
+$gl-label-dark-button-background-color-hover: var(--gl-label-dark-button-background-color-hover);
+$gl-label-dark-button-icon-color-default: var(--gl-label-dark-button-icon-color-default);
+$gl-label-scoped-text-color: var(--gl-label-scoped-text-color);
+$gl-label-scoped-button-background-color-hover: var(--gl-label-scoped-button-background-color-hover);
+$gl-label-scoped-button-icon-color-default: var(--gl-label-scoped-button-icon-color-default);
+$gl-label-scoped-button-icon-color-hover: var(--gl-label-scoped-button-icon-color-hover);
 $gl-popover-background-color: var(--gl-popover-background-color);
 $gl-skeleton-loader-background-color: var(--gl-skeleton-loader-background-color);
 $gl-skeleton-loader-shimmer-color: var(--gl-skeleton-loader-shimmer-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "86.3.0",
+  "version": "86.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -74,7 +74,8 @@
     "lint:fix": "run-s eslint:fix prettier:fix stylelint:fix markdownlint:fix",
     "generate:component": "plop",
     "translations:collect": "make translations.js",
-    "tailwind-config-viewer": "tailwind-config-viewer -o"
+    "tailwind-config-viewer:start": "tailwind-config-viewer -o",
+    "tailwind-config-viewer:export": "tailwind-config-viewer export ./tailwind-config-viewer-static"
   },
   "dependencies": {
     "@floating-ui/dom": "1.4.3",

package/src/components/base/label/label.scss

@@ -5,7 +5,7 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
 
 .gl-label {
   @include gl-align-items-center;
-  @include gl-bg-white;
+  background-color: var(--gl-background-color-default);
   @include gl-overflow-hidden;
   @include gl-display-inline-flex;
   @include gl-rounded-pill;
@@ -24,7 +24,7 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
   }
 
   &:has(*:first-child:focus) {
-    @include gl-focus($color: var(--label-background-color, $white), $important: true);
+    @include gl-focus($color: var(--label-background-color, --gl-background-color-default), $important: true);
   }
 
   .gl-label-link {
@@ -62,18 +62,6 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
     @include gl-rounded-full;
     @include gl-shadow-none;
 
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus {
-      @include gl-opacity-5;
-      @include gl-reset-bg;
-      @include gl-shadow-none;
-
-      .gl-icon {
-        @include gl-fill-current-color;
-      }
-    }
-
     &:focus,
     &:active {
       @include gl-focus;
@@ -85,82 +73,47 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
   }
 }
 
+// styles for the the light label variant (which uses dark text)
 .gl-label-text-dark {
-  @include gl-text-gray-950;
+  color: var(--gl-label-light-text-color);
 
   #{$label-close-button} {
-    .gl-icon,
-    &[disabled] .gl-icon,
-    &[disabled]:hover .gl-icon,
-    &[disabled]:focus .gl-icon {
-      @include gl-text-black-normal;
-    }
+    color: var(--gl-label-light-button-icon-color-default);
+    background-color: var(--gl-label-light-button-background-color-default);
 
     &:focus,
     &:hover {
-      @include gl-bg-black;
-
-      .gl-icon {
-        color: var(--label-background-color);
-      }
+      color: var(--label-background-color);
+      background-color: var(--gl-label-light-button-background-color-hover);
     }
   }
 }
 
+// styles for the the dark label variant (which uses light text)
 .gl-label-text-light {
-  @include gl-text-white;
+  color: var(--gl-label-dark-text-color);
 
   #{$label-close-button} {
-    .gl-icon,
-    &[disabled] .gl-icon,
-    &[disabled]:hover .gl-icon,
-    &[disabled]:focus .gl-icon {
-      @include gl-text-white;
-    }
+    color: var(--gl-label-dark-button-icon-color-default);
+    background-color: var(--gl-label-dark-button-background-color-default);
 
     &:focus,
     &:hover {
-      @include gl-bg-white;
-
-      .gl-icon {
-        color: var(--label-background-color);
-      }
+      color: var(--label-background-color);
+      background-color: var(--gl-label-dark-button-background-color-hover);
     }
   }
 }
 
 .gl-label-scoped {
-  &.gl-label-text-light {
-    #{$label-close-button} .gl-icon,
-    #{$label-close-button}[disabled]:hover .gl-icon {
-      color: var(--label-background-color);
-    }
-
-    #{$label-close-button}:not(:disabled) {
-      &:focus,
-      &:hover {
-        background-color: var(--label-background-color);
-      }
-    }
-  }
-
-  &.gl-label-text-dark {
-    #{$label-close-button}:not(:disabled) {
-      &:focus,
-      &:hover {
-        @include gl-bg-black;
-      }
-    }
-  }
-
   #{$label-close-button} {
     margin-left: #{-$label-padding-horizontal};
+    color: var(--gl-label-scoped-button-icon-color-default);
 
     &:focus,
     &:hover {
-      .gl-icon {
-        @include gl-text-white;
-      }
+      color: var(--gl-label-scoped-button-icon-color-hover);
+      background-color: var(--gl-label-scoped-button-background-color-hover);
     }
   }
 
@@ -173,7 +126,7 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
   }
 
   .gl-label-text-scoped {
-    @include gl-text-gray-950;
+    color: var(--gl-label-scoped-text-color);
     padding-left: $gl-spacing-scale-2;
     padding-right: $gl-spacing-scale-3;
   }

package/src/tokens/action.tokens.json

@@ -52,7 +52,10 @@
       "background": {
         "color": {
           "default": {
-            "$value": "{background.color.default}",
+            "$value": {
+              "default": "{color.neutral.0}",
+              "dark": "{color.neutral.900}"
+            },
             "$type": "color",
             "$description": "Used for the background of an outlined neutral action in the default state."
           },

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

@@ -538,6 +538,18 @@
   --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-50); /* Used for the animated shimmer effect in a skeleton loader. */
   --gl-skeleton-loader-background-color: var(--gl-color-neutral-100); /* Used for the skeleton loader background color. */
   --gl-popover-background-color: var(--gl-color-neutral-0); /* Used for the background color of popover. */
+  --gl-label-scoped-button-icon-color-hover: var(--gl-color-neutral-0); /* Used for the scoped label remove button icon in the hover state. */
+  --gl-label-scoped-button-icon-color-default: var(--gl-color-neutral-950); /* Used for the scoped label remove button icon in the default state. */
+  --gl-label-scoped-button-background-color-hover: var(--gl-color-neutral-950); /* Used for the scoped label remove button background in the hover state. */
+  --gl-label-scoped-text-color: var(--gl-color-neutral-950); /* Used for the scoped label text color. */
+  --gl-label-dark-button-icon-color-default: var(--gl-color-neutral-0); /* Used for the label remove button icon on a dark background color in the default state. */
+  --gl-label-dark-button-background-color-hover: var(--gl-color-neutral-0); /* Used for the label remove button background on a dark background color in the hover state. */
+  --gl-label-dark-button-background-color-default: var(--gl-color-alpha-0); /* Used for the label remove button background on a dark background color in the default state. */
+  --gl-label-dark-text-color: var(--gl-color-neutral-0); /* Used for the label text color on a dark background color. */
+  --gl-label-light-button-icon-color-default: var(--gl-color-neutral-950); /* Used for the label remove button icon on a light background color in the default state. */
+  --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-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. */
@@ -650,10 +662,10 @@
   --gl-action-neutral-background-color-active: var(--gl-color-neutral-100); /* Used for the background of an outlined neutral action in the active state. */
   --gl-action-neutral-background-color-focus: var(--gl-color-neutral-50); /* Used for the background of an outlined neutral action in the focus state. */
   --gl-action-neutral-background-color-hover: var(--gl-color-neutral-50); /* Used for the background of an outlined neutral action in the hover state. */
+  --gl-action-neutral-background-color-default: var(--gl-color-neutral-0); /* Used for the background of an outlined neutral action in the default state. */
   --gl-action-icon-color-disabled: var(--gl-color-neutral-400); /* Used for the icon of a disabled action. */
   --gl-action-text-color-disabled: var(--gl-color-neutral-500); /* Used for the text of a disabled action. */
   --gl-action-border-color-disabled: var(--gl-color-neutral-100); /* Used for the border of a disabled action. */
   --gl-action-background-color-disabled: var(--gl-color-neutral-50); /* Used for the background of a disabled action. */
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /* Used for the inner neutral portion of the focus ring. */
-  --gl-action-neutral-background-color-default: var(--gl-background-color-default); /* Used for the background of an outlined neutral action in the default state. */
 }

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

@@ -538,6 +538,18 @@
   --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-700); /* Used for the animated shimmer effect in a skeleton loader. */
   --gl-skeleton-loader-background-color: var(--gl-color-neutral-800); /* Used for the skeleton loader background color. */
   --gl-popover-background-color: var(--gl-color-neutral-900); /* Used for the background color of popover. */
+  --gl-label-scoped-button-icon-color-hover: var(--gl-color-neutral-950); /* Used for the scoped label remove button icon in the hover state. */
+  --gl-label-scoped-button-icon-color-default: var(--gl-color-neutral-0); /* Used for the scoped label remove button icon in the default state. */
+  --gl-label-scoped-button-background-color-hover: var(--gl-color-neutral-0); /* Used for the scoped label remove button background in the hover state. */
+  --gl-label-scoped-text-color: var(--gl-color-neutral-0); /* Used for the scoped label text color. */
+  --gl-label-dark-button-icon-color-default: var(--gl-color-neutral-0); /* Used for the label remove button icon on a dark background color in the default state. */
+  --gl-label-dark-button-background-color-hover: var(--gl-color-neutral-0); /* Used for the label remove button background on a dark background color in the hover state. */
+  --gl-label-dark-button-background-color-default: var(--gl-color-alpha-0); /* Used for the label remove button background on a dark background color in the default state. */
+  --gl-label-dark-text-color: var(--gl-color-neutral-0); /* Used for the label text color on a dark background color. */
+  --gl-label-light-button-icon-color-default: var(--gl-color-neutral-950); /* Used for the label remove button icon on a light background color in the default state. */
+  --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-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. */
@@ -650,10 +662,10 @@
   --gl-action-neutral-background-color-active: var(--gl-color-neutral-800); /* Used for the background of an outlined neutral action in the active state. */
   --gl-action-neutral-background-color-focus: var(--gl-color-neutral-900); /* Used for the background of an outlined neutral action in the focus state. */
   --gl-action-neutral-background-color-hover: var(--gl-color-neutral-900); /* Used for the background of an outlined neutral action in the hover state. */
+  --gl-action-neutral-background-color-default: var(--gl-color-neutral-900); /* Used for the background of an outlined neutral action in the default state. */
   --gl-action-icon-color-disabled: var(--gl-color-neutral-500); /* Used for the icon of a disabled action. */
   --gl-action-text-color-disabled: var(--gl-color-neutral-400); /* Used for the text of a disabled action. */
   --gl-action-border-color-disabled: var(--gl-color-neutral-800); /* Used for the border of a disabled action. */
   --gl-action-background-color-disabled: var(--gl-color-neutral-900); /* Used for the background of a disabled action. */
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /* Used for the inner neutral portion of the focus ring. */
-  --gl-action-neutral-background-color-default: var(--gl-background-color-default); /* Used for the background of an outlined neutral action in the default state. */
 }

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

@@ -7,7 +7,7 @@ export const GL_ACTION_BACKGROUND_COLOR_DISABLED = '#333238'; // Used for the ba
 export const GL_ACTION_BORDER_COLOR_DISABLED = '#434248'; // Used for the border of a disabled action.
 export const GL_ACTION_TEXT_COLOR_DISABLED = '#89888d'; // Used for the text of a disabled action.
 export const GL_ACTION_ICON_COLOR_DISABLED = '#737278'; // Used for the icon of a disabled action.
-export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#1f1e24'; // Used for the background of an outlined neutral action in the default state.
+export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#333238'; // Used for the background of an outlined neutral action in the default state.
 export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_HOVER = '#333238'; // Used for the background of an outlined neutral action in the hover state.
 export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#333238'; // Used for the background of an outlined neutral action in the focus state.
 export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#434248'; // Used for the background of an outlined neutral action in the active state.
@@ -510,6 +510,18 @@ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#333238'; // Neutral
 export const GL_BANNER_INTRO_BORDER_COLOR = '#1068bf'; // Used to compliment the info banner.
 export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#333238'; // Used as background for the default banner type.
 export const GL_BREADCRUMB_SEPARATOR_COLOR = '#535158'; // Used for the breadcrumb level separator.
+export const GL_LABEL_LIGHT_TEXT_COLOR = '#1f1e24'; // 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 = '#1f1e24'; // Used for the label remove button background on a light background color in the hover state.
+export const GL_LABEL_LIGHT_BUTTON_ICON_COLOR_DEFAULT = '#1f1e24'; // Used for the label remove button icon on a light background color in the default state.
+export const GL_LABEL_DARK_TEXT_COLOR = '#fff'; // Used for the label text color on a dark background color.
+export const GL_LABEL_DARK_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent'; // Used for the label remove button background on a dark background color in the default state.
+export const GL_LABEL_DARK_BUTTON_BACKGROUND_COLOR_HOVER = '#fff'; // Used for the label remove button background on a dark background color in the hover state.
+export const GL_LABEL_DARK_BUTTON_ICON_COLOR_DEFAULT = '#fff'; // Used for the label remove button icon on a dark background color in the default state.
+export const GL_LABEL_SCOPED_TEXT_COLOR = '#fff'; // Used for the scoped label text color.
+export const GL_LABEL_SCOPED_BUTTON_BACKGROUND_COLOR_HOVER = '#fff'; // Used for the scoped label remove button background in the hover state.
+export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_DEFAULT = '#fff'; // Used for the scoped label remove button icon in the default state.
+export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER = '#1f1e24'; // Used for the scoped label remove button icon in the hover state.
 export const GL_POPOVER_BACKGROUND_COLOR = '#333238'; // Used for the background color of popover.
 export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#434248'; // Used for the skeleton loader background color.
 export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#535158'; // Used for the animated shimmer effect in a skeleton loader.

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

@@ -510,6 +510,18 @@ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#ececef'; // Neutral
 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_LABEL_LIGHT_TEXT_COLOR = '#1f1e24'; // 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 = '#1f1e24'; // Used for the label remove button background on a light background color in the hover state.
+export const GL_LABEL_LIGHT_BUTTON_ICON_COLOR_DEFAULT = '#1f1e24'; // Used for the label remove button icon on a light background color in the default state.
+export const GL_LABEL_DARK_TEXT_COLOR = '#fff'; // Used for the label text color on a dark background color.
+export const GL_LABEL_DARK_BUTTON_BACKGROUND_COLOR_DEFAULT = 'transparent'; // Used for the label remove button background on a dark background color in the default state.
+export const GL_LABEL_DARK_BUTTON_BACKGROUND_COLOR_HOVER = '#fff'; // Used for the label remove button background on a dark background color in the hover state.
+export const GL_LABEL_DARK_BUTTON_ICON_COLOR_DEFAULT = '#fff'; // Used for the label remove button icon on a dark background color in the default state.
+export const GL_LABEL_SCOPED_TEXT_COLOR = '#1f1e24'; // Used for the scoped label text color.
+export const GL_LABEL_SCOPED_BUTTON_BACKGROUND_COLOR_HOVER = '#1f1e24'; // Used for the scoped label remove button background in the hover state.
+export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_DEFAULT = '#1f1e24'; // Used for the scoped label remove button icon in the default state.
+export const GL_LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER = '#fff'; // Used for the scoped label remove button icon in the hover state.
 export const GL_POPOVER_BACKGROUND_COLOR = '#fff'; // Used for the background color of popover.
 export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#dcdcde'; // Used for the skeleton loader background color.
 export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#ececef'; // Used for the animated shimmer effect in a skeleton loader.