@gitlab/ui 86.3.1 → 86.4.1

package/dist/tokens/json/tokens.json

@@ -11085,6 +11085,320 @@
       }
     }
   },
+  "label": {
+    "light": {
+      "text": {
+        "color": {
+          "value": "#1f1e24",
+          "$type": "color",
+          "comment": "Used for the label text color on a light background color.",
+          "filePath": "src/tokens/contextual/label.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.neutral.950}",
+            "$type": "color",
+            "comment": "Used for the label text color on a light background color."
+          },
+          "name": "LABEL_LIGHT_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "label",
+            "light",
+            "text",
+            "color"
+          ]
+        }
+      },
+      "button": {
+        "background": {
+          "color": {
+            "default": {
+              "value": "transparent",
+              "$type": "color",
+              "comment": "Used for the label remove button background on a light background color in the default state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.alpha.0}",
+                "$type": "color",
+                "comment": "Used for the label remove button background on a light background color in the default state."
+              },
+              "name": "LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "label",
+                "light",
+                "button",
+                "background",
+                "color",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#1f1e24",
+              "$type": "color",
+              "comment": "Used for the label remove button background on a light background color in the hover state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.neutral.950}",
+                "$type": "color",
+                "comment": "Used for the label remove button background on a light background color in the hover state."
+              },
+              "name": "LABEL_LIGHT_BUTTON_BACKGROUND_COLOR_HOVER",
+              "attributes": {},
+              "path": [
+                "label",
+                "light",
+                "button",
+                "background",
+                "color",
+                "hover"
+              ]
+            }
+          }
+        },
+        "icon": {
+          "color": {
+            "default": {
+              "value": "#1f1e24",
+              "$type": "color",
+              "comment": "Used for the label remove button icon on a light background color in the default state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.neutral.950}",
+                "$type": "color",
+                "comment": "Used for the label remove button icon on a light background color in the default state."
+              },
+              "name": "LABEL_LIGHT_BUTTON_ICON_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "label",
+                "light",
+                "button",
+                "icon",
+                "color",
+                "default"
+              ]
+            }
+          }
+        }
+      }
+    },
+    "dark": {
+      "text": {
+        "color": {
+          "value": "#fff",
+          "$type": "color",
+          "comment": "Used for the label text color on a dark background color.",
+          "filePath": "src/tokens/contextual/label.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.neutral.0}",
+            "$type": "color",
+            "comment": "Used for the label text color on a dark background color."
+          },
+          "name": "LABEL_DARK_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "label",
+            "dark",
+            "text",
+            "color"
+          ]
+        }
+      },
+      "button": {
+        "background": {
+          "color": {
+            "default": {
+              "value": "transparent",
+              "$type": "color",
+              "comment": "Used for the label remove button background on a dark background color in the default state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.alpha.0}",
+                "$type": "color",
+                "comment": "Used for the label remove button background on a dark background color in the default state."
+              },
+              "name": "LABEL_DARK_BUTTON_BACKGROUND_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "label",
+                "dark",
+                "button",
+                "background",
+                "color",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#fff",
+              "$type": "color",
+              "comment": "Used for the label remove button background on a dark background color in the hover state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.neutral.0}",
+                "$type": "color",
+                "comment": "Used for the label remove button background on a dark background color in the hover state."
+              },
+              "name": "LABEL_DARK_BUTTON_BACKGROUND_COLOR_HOVER",
+              "attributes": {},
+              "path": [
+                "label",
+                "dark",
+                "button",
+                "background",
+                "color",
+                "hover"
+              ]
+            }
+          }
+        },
+        "icon": {
+          "color": {
+            "default": {
+              "value": "#fff",
+              "$type": "color",
+              "comment": "Used for the label remove button icon on a dark background color in the default state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.neutral.0}",
+                "$type": "color",
+                "comment": "Used for the label remove button icon on a dark background color in the default state."
+              },
+              "name": "LABEL_DARK_BUTTON_ICON_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "label",
+                "dark",
+                "button",
+                "icon",
+                "color",
+                "default"
+              ]
+            }
+          }
+        }
+      }
+    },
+    "scoped": {
+      "text": {
+        "color": {
+          "value": "#1f1e24",
+          "$type": "color",
+          "comment": "Used for the scoped label text color.",
+          "filePath": "src/tokens/contextual/label.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.neutral.950}",
+              "dark": "{color.neutral.0}"
+            },
+            "$type": "color",
+            "comment": "Used for the scoped label text color."
+          },
+          "name": "LABEL_SCOPED_TEXT_COLOR",
+          "attributes": {},
+          "path": [
+            "label",
+            "scoped",
+            "text",
+            "color"
+          ]
+        }
+      },
+      "button": {
+        "background": {
+          "color": {
+            "hover": {
+              "value": "#1f1e24",
+              "$type": "color",
+              "comment": "Used for the scoped label remove button background in the hover state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.950}",
+                  "dark": "{color.neutral.0}"
+                },
+                "$type": "color",
+                "comment": "Used for the scoped label remove button background in the hover state."
+              },
+              "name": "LABEL_SCOPED_BUTTON_BACKGROUND_COLOR_HOVER",
+              "attributes": {},
+              "path": [
+                "label",
+                "scoped",
+                "button",
+                "background",
+                "color",
+                "hover"
+              ]
+            }
+          }
+        },
+        "icon": {
+          "color": {
+            "default": {
+              "value": "#1f1e24",
+              "$type": "color",
+              "comment": "Used for the scoped label remove button icon in the default state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.950}",
+                  "dark": "{color.neutral.0}"
+                },
+                "$type": "color",
+                "comment": "Used for the scoped label remove button icon in the default state."
+              },
+              "name": "LABEL_SCOPED_BUTTON_ICON_COLOR_DEFAULT",
+              "attributes": {},
+              "path": [
+                "label",
+                "scoped",
+                "button",
+                "icon",
+                "color",
+                "default"
+              ]
+            },
+            "hover": {
+              "value": "#fff",
+              "$type": "color",
+              "comment": "Used for the scoped label remove button icon in the hover state.",
+              "filePath": "src/tokens/contextual/label.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.0}",
+                  "dark": "{color.neutral.950}"
+                },
+                "$type": "color",
+                "comment": "Used for the scoped label remove button icon in the hover state."
+              },
+              "name": "LABEL_SCOPED_BUTTON_ICON_COLOR_HOVER",
+              "attributes": {},
+              "path": [
+                "label",
+                "scoped",
+                "button",
+                "icon",
+                "color",
+                "hover"
+              ]
+            }
+          }
+        }
+      }
+    }
+  },
   "popover": {
     "background": {
       "color": {

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.

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.

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.1",
+  "version": "86.4.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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, var(--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/components/base/pagination/pagination.vue

@@ -84,7 +84,7 @@ export default {
     prevText: {
       type: String,
       required: false,
-      default: 'Previous',
+      default: translate('GlPagination.prevText', 'Previous'),
     },
     /**
      * When using the compact pagination, use this prop to pass the next page number
@@ -100,7 +100,7 @@ export default {
     nextText: {
       type: String,
       required: false,
-      default: 'Next',
+      default: translate('GlPagination.nextText', 'Next'),
     },
     /**
      * Text for the ellipsis (overridden by "ellipsis-left" and "ellipsis-right" slots)
@@ -116,7 +116,7 @@ export default {
     labelFirstPage: {
       type: String,
       required: false,
-      default: 'Go to first page',
+      default: translate('GlPagination.labelFirstPage', 'Go to first page'),
     },
     /**
      * aria-label for the previous page item
@@ -124,7 +124,7 @@ export default {
     labelPrevPage: {
       type: String,
       required: false,
-      default: 'Go to previous page',
+      default: translate('GlPagination.labelPrevPage', 'Go to previous page'),
     },
     /**
      * aria-label for the next page item
@@ -132,7 +132,7 @@ export default {
     labelNextPage: {
       type: String,
       required: false,
-      default: 'Go to next page',
+      default: translate('GlPagination.labelNextPage', 'Go to next page'),
     },
     /**
      * aria-label for the last page item
@@ -140,7 +140,7 @@ export default {
     labelLastPage: {
       type: String,
       required: false,
-      default: 'Go to last page',
+      default: translate('GlPagination.labelLastPage', 'Go to last page'),
     },
     /**
      * aria-label getter for numbered page items, defaults to "Go to page <page_number>"

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. */

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. */

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

@@ -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.