@gitlab/ui 89.5.0 → 89.6.0

package/dist/tokens/json/tokens.json

@@ -8999,18 +8999,18 @@
     "intro": {
       "border": {
         "color": {
-          "value": "#63a6e9",
+          "value": "#cbe2f9",
           "$type": "color",
-          "comment": "Used to compliment the info banner.",
+          "comment": "Used for the border of an info banner.",
           "filePath": "src/tokens/contextual/banner.tokens.json",
           "isSource": true,
           "original": {
             "value": {
-              "default": "{color.blue.300}",
-              "dark": "{color.blue.600}"
+              "default": "{color.blue.100}",
+              "dark": "{color.blue.800}"
             },
             "$type": "color",
-            "comment": "Used to compliment the info banner."
+            "comment": "Used for the border of an info banner."
           },
           "name": "BANNER_INTRO_BORDER_COLOR",
           "attributes": {},
@@ -9026,18 +9026,18 @@
     "promo": {
       "background": {
         "color": {
-          "value": "#fbfafd",
+          "value": "#f4f0ff",
           "$type": "color",
-          "comment": "Used as background for the default banner type.",
+          "comment": "Used for the background of a promo banner.",
           "filePath": "src/tokens/contextual/banner.tokens.json",
           "isSource": true,
           "original": {
             "value": {
-              "default": "{color.neutral.10}",
-              "dark": "{color.neutral.900}"
+              "default": "{color.purple.50}",
+              "dark": "{color.purple.950}"
             },
             "$type": "color",
-            "comment": "Used as background for the default banner type."
+            "comment": "Used for the background of a promo banner."
           },
           "name": "BANNER_PROMO_BACKGROUND_COLOR",
           "attributes": {},
@@ -9048,6 +9048,31 @@
             "color"
           ]
         }
+      },
+      "border": {
+        "color": {
+          "value": "#e1d8f9",
+          "$type": "color",
+          "comment": "Used for the border of a promo banner.",
+          "filePath": "src/tokens/contextual/banner.tokens.json",
+          "isSource": true,
+          "original": {
+            "value": {
+              "default": "{color.purple.100}",
+              "dark": "{color.purple.800}"
+            },
+            "$type": "color",
+            "comment": "Used for the border of a promo banner."
+          },
+          "name": "BANNER_PROMO_BORDER_COLOR",
+          "attributes": {},
+          "path": [
+            "banner",
+            "promo",
+            "border",
+            "color"
+          ]
+        }
       }
     }
   },
@@ -12535,6 +12560,38 @@
       }
     }
   },
+  "tab": {
+    "selected": {
+      "indicator": {
+        "color": {
+          "default": {
+            "value": "#1f75cb",
+            "$type": "color",
+            "comment": "Used for the selected indicator of a tab.",
+            "filePath": "src/tokens/contextual/tabs.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.500}",
+                "dark": "{color.blue.400}"
+              },
+              "$type": "color",
+              "comment": "Used for the selected indicator of a tab."
+            },
+            "name": "TAB_SELECTED_INDICATOR_COLOR_DEFAULT",
+            "attributes": {},
+            "path": [
+              "tab",
+              "selected",
+              "indicator",
+              "color",
+              "default"
+            ]
+          }
+        }
+      }
+    }
+  },
   "control": {
     "background": {
       "color": {
@@ -17425,7 +17482,7 @@
           "original": {
             "value": {
               "default": "{color.blue.50}",
-              "dark": "{color.blue.900}"
+              "dark": "{color.blue.950}"
             },
             "$type": "color",
             "comment": "Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action."

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

@@ -469,7 +469,7 @@ $gl-feedback-success-text-color: $gl-color-green-200; // Used for the text of a
 $gl-feedback-success-background-color: $gl-color-green-900; // Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.
 $gl-feedback-info-icon-color: $gl-color-blue-300; // Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
 $gl-feedback-info-text-color: $gl-color-blue-200; // Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
-$gl-feedback-info-background-color: $gl-color-blue-900; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+$gl-feedback-info-background-color: $gl-color-blue-950; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
 $gl-feedback-neutral-icon-color: $gl-color-neutral-300; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
 $gl-feedback-neutral-text-color: $gl-color-neutral-200; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
 $gl-feedback-neutral-background-color: $gl-color-neutral-900; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
@@ -494,6 +494,7 @@ $gl-control-background-color-readonly: $gl-color-neutral-900; // Used for the ba
 $gl-control-background-color-concatenation: $gl-color-alpha-light-4; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-disabled: $gl-color-alpha-light-4; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-default: $gl-color-alpha-dark-40; // Used for form control (input, radio button, checkbox, textarea) default background.
+$gl-tab-selected-indicator-color-default: $gl-color-blue-400; // Used for the selected indicator of a tab.
 $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
 $gl-spinner-segment-color-default: $gl-color-neutral-200; // Used for the animated segment of a loading spinner.
 $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner on a dark background.
@@ -566,8 +567,9 @@ $gl-button-default-primary-background-color-hover: $gl-color-neutral-900; // Use
 $gl-button-default-primary-background-color-default: $gl-color-neutral-900; // Used for the background of an default primary button in the default state.
 $gl-button-default-primary-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a default primary button in the default state.
 $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-banner-promo-border-color: $gl-color-purple-800; // Used for the border of a promo banner.
+$gl-banner-promo-background-color: $gl-color-purple-950; // Used for the background of a promo banner.
+$gl-banner-intro-border-color: $gl-color-blue-800; // Used for the border of an info banner.
 $gl-badge-tier-icon-color-active: $gl-color-purple-950; // Used for the icon of a tier related badge in the active state.
 $gl-badge-tier-icon-color-hover: $gl-color-purple-950; // Used for the icon of a tier related badge in the hover state.
 $gl-badge-tier-icon-color-default: $gl-color-purple-950; // Used for the icon of a tier related badge when static or the default state when linked.

package/dist/tokens/scss/_tokens.scss

@@ -494,6 +494,7 @@ $gl-control-background-color-readonly: $gl-color-neutral-10; // Used for the bac
 $gl-control-background-color-concatenation: $gl-color-neutral-10; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-disabled: $gl-color-neutral-10; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-default: $gl-color-neutral-0; // Used for form control (input, radio button, checkbox, textarea) default background.
+$gl-tab-selected-indicator-color-default: $gl-color-blue-500; // Used for the selected indicator of a tab.
 $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
 $gl-spinner-segment-color-default: $gl-color-neutral-700; // Used for the animated segment of a loading spinner.
 $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner on a dark background.
@@ -566,8 +567,9 @@ $gl-button-default-primary-background-color-hover: $gl-color-neutral-50; // Used
 $gl-button-default-primary-background-color-default: $gl-color-neutral-0; // Used for the background of an default primary button in the default state.
 $gl-button-default-primary-foreground-color-default: $gl-color-neutral-800; // Used for the foreground of a default primary button in the default state.
 $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-banner-promo-border-color: $gl-color-purple-100; // Used for the border of a promo banner.
+$gl-banner-promo-background-color: $gl-color-purple-50; // Used for the background of a promo banner.
+$gl-banner-intro-border-color: $gl-color-blue-100; // Used for the border of an info banner.
 $gl-badge-tier-icon-color-active: $gl-color-purple-900; // Used for the icon of a tier related badge in the active state.
 $gl-badge-tier-icon-color-hover: $gl-color-purple-800; // Used for the icon of a tier related badge in the hover state.
 $gl-badge-tier-icon-color-default: $gl-color-purple-700; // Used for the icon of a tier related badge when static or the default state when linked.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -429,6 +429,7 @@ $gl-badge-tier-icon-color-focus: var(--gl-badge-tier-icon-color-focus);
 $gl-badge-tier-icon-color-active: var(--gl-badge-tier-icon-color-active);
 $gl-banner-intro-border-color: var(--gl-banner-intro-border-color);
 $gl-banner-promo-background-color: var(--gl-banner-promo-background-color);
+$gl-banner-promo-border-color: var(--gl-banner-promo-border-color);
 $gl-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);
 $gl-button-default-primary-foreground-color-default: var(--gl-button-default-primary-foreground-color-default);
 $gl-button-default-primary-foreground-color-hover: var(--gl-button-default-primary-foreground-color-hover);
@@ -572,6 +573,7 @@ $gl-spinner-segment-color-default: var(--gl-spinner-segment-color-default);
 $gl-spinner-segment-color-light: var(--gl-spinner-segment-color-light);
 $gl-table-row-background-color-hover: var(--gl-table-row-background-color-hover);
 $gl-table-sorting-icon-color: var(--gl-table-sorting-icon-color);
+$gl-tab-selected-indicator-color-default: var(--gl-tab-selected-indicator-color-default);
 $gl-control-background-color-default: var(--gl-control-background-color-default);
 $gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
 $gl-control-background-color-concatenation: var(--gl-control-background-color-concatenation);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "89.5.0",
+  "version": "89.6.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -114,7 +114,7 @@
     "@gitlab/eslint-plugin": "20.0.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.2.1",
-    "@gitlab/svgs": "3.113.0",
+    "@gitlab/svgs": "3.114.0",
     "@jest/test-sequencer": "^29.7.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",

package/src/components/base/banner/banner.scss

@@ -1,6 +1,6 @@
 .gl-banner {
   background-color: var(--gl-banner-promo-background-color);
-  border-color: var(--gl-border-color-default);
+  border-color: var(--gl-banner-promo-border-color);
 }
 
 .gl-banner-illustration {

package/src/components/base/daterange_picker/daterange_picker.scss

@@ -5,11 +5,7 @@
 
   label {
     @include gl-font-weight-bold;
-  }
-
-  .gl-datepicker-input {
-    @apply gl-border-gray-100;
-    @include gl-text-gray-900;
+    color: var(--gl-text-color-strong);
   }
 
   .gl-daterange-picker-indicator {
@@ -17,8 +13,8 @@
     @include gl-flex-direction-row;
     @include gl-align-items-center;
     @include gl-align-self-end;
-    @include gl-text-gray-500;
     @include gl-gap-3;
     @include gl-h-7;
+    color: var(--gl-text-color-subtle);
   }
 }

package/src/components/base/daterange_picker/daterange_picker.vue

@@ -332,7 +332,14 @@ export default {
     >
       <!-- @slot Content to display for days selected. The value is -1 when no date range is selected.-->
       <slot v-bind="{ daysSelected: numberOfDays }"></slot>
-      <gl-icon v-if="tooltip" v-gl-tooltip name="information-o" :title="tooltip" :size="16" />
+      <gl-icon
+        v-if="tooltip"
+        v-gl-tooltip
+        name="information-o"
+        :title="tooltip"
+        :size="16"
+        variant="info"
+      />
     </div>
   </div>
 </template>

package/src/components/base/tabs/tabs/tabs.scss

@@ -1,29 +1,34 @@
 .gl-tabs-nav {
-  @apply gl-border-solid gl-border-gray-100 gl-border-0 gl-border-b-1;
+  @apply gl-border-b;
 }
 
 .gl-tab-nav-item {
   position: relative;
-  @include gl-text-gray-900;
   @include gl-px-4;
   @include gl-py-5;
   @include gl-line-height-normal;
   @include gl-font-base;
   @include gl-display-flex;
   @include gl-justify-content-center;
-  @include gl-overflow-hidden;
-  transition: box-shadow $gl-transition-duration-medium $gl-easing-out-cubic,
-              border-radius $gl-transition-duration-fast $gl-easing-out-cubic;
+  @apply gl-border;
+  @include gl-action-neutral-colors;
+  transition:
+    box-shadow $gl-transition-duration-medium $gl-easing-out-cubic,
+    background-color $gl-transition-duration-medium $gl-easing-out-cubic,
+    border-radius $gl-transition-duration-fast $gl-easing-out-cubic;
 
   &::before {
     content: '';
     position: absolute;
-    bottom: 0;
-    width: 100%;
     border-bottom: $gl-border-size-2 solid transparent;
     translate: 0 $gl-border-size-2;
-    transition: border-bottom $gl-transition-duration-medium $gl-easing-out-cubic,
-                translate $gl-transition-duration-medium $gl-easing-out-cubic;
+    transition:
+      border-bottom $gl-transition-duration-medium $gl-easing-out-cubic,
+      translate $gl-transition-duration-medium $gl-easing-out-cubic;
+    //offsets the bottom border from the parent border
+    bottom: -$gl-border-size-1;
+    left: -$gl-border-size-1;
+    right: -$gl-border-size-1;
   }
 
   @media (prefers-reduced-motion: reduce) {
@@ -32,12 +37,8 @@
     }
   }
 
-  &:hover {
-    @include gl-text-gray-900;
-  }
-
   &:hover:not(.gl-tab-nav-item-active)::before {
-    border-bottom-color: $gray-200;
+    border-bottom-color: var(--gl-border-color-strong);
     translate: 0;
   }
 
@@ -48,7 +49,7 @@
   &.disabled {
     @include gl-pointer-events-auto;
     @include gl-cursor-not-allowed;
-    @include gl-text-gray-400;
+    color: var(--gl-action-disabled-foreground-color);
 
     &:hover {
       @include gl-shadow-none;
@@ -65,23 +66,38 @@
   @include gl-py-3;
   @include gl-font-base;
   @include gl-line-height-normal;
-  @include gl-text-gray-900;
+  color: var(--gl-text-color-default);
 }
 
 .gl-tab-nav-item-active {
   @include gl-font-weight-bold;
-  @include gl-text-gray-900;
   z-index: 1;
 
   &:active,
   &:focus,
   &:focus:active {
-    @include gl-outline-none;
-    @include gl-focus;
+    @include gl-focus($color: var(--gl-action-neutral-border-color-active));
+
+    .gl-scrollable-tabs-nav & {
+      @include gl-focus($inset: true);
+
+      &::before {
+        border-radius: 0 0 $gl-border-size-1 $gl-border-size-1;
+        left: $gl-border-size-3;
+        right: $gl-border-size-3;
+        bottom: $gl-border-size-3;
+      }
+    }
+
+    &::before {
+      border-radius: 0 0 $gl-border-size-2 $gl-border-size-2;
+      left: 0;
+      right: 0;
+    }
   }
 
   &::before {
-    border-bottom-color: $blue-500;
+    border-bottom-color: var(--gl-tab-selected-indicator-color-default);
     translate: 0;
   }
 }
@@ -121,25 +137,23 @@
   @include gl-w-8;
   bottom: 0;
   position: sticky;
-  @include gl-text-gray-500;
   @include gl-p-2;
 }
 
 .gl-tabs-fade-left {
   left: 0;
-  @include gl-bg-gradient-blur(left, $white);
+  @include gl-bg-gradient-blur(left, var(--gl-background-color-default));
 }
 
 .gl-tabs-fade-right {
   right: 0;
-  @include gl-bg-gradient-blur(right, $white);
+  @include gl-bg-gradient-blur(right, var(--gl-background-color-default));
 }
 
 .gl-tabs-fade-icon-button {
-  @include gl-bg-transparent;
-  @apply gl-border-none;
+  @apply gl-border;
+  @include gl-action-neutral-colors;
   @include gl-p-0;
-  @include gl-text-gray-400;
   @include gl-h-full;
 }
 

package/src/scss/mixins.scss

@@ -197,3 +197,27 @@
     line-height: $gl-line-height-heading;
   }
 }
+
+@mixin gl-action-neutral-colors {
+  color: var(--gl-action-neutral-foreground-color-default);
+  background-color: var(--gl-action-neutral-background-color-default);
+  border-color: var(--gl-action-neutral-border-color-default);
+
+  &:hover {
+    color: var(--gl-action-neutral-foreground-color-hover);
+    background-color: var(--gl-action-neutral-background-color-hover);
+    border-color: var(--gl-action-neutral-border-color-hover);
+  }
+
+  &:focus {
+    color: var(--gl-action-neutral-foreground-color-focus);
+    background-color: var(--gl-action-neutral-background-color-focus);
+    border-color: var(--gl-action-neutral-border-color-focus);
+  }
+  
+  &:active {
+    color: var(--gl-action-neutral-foreground-color-active);
+    background-color: var(--gl-action-neutral-background-color-active);
+    border-color: var(--gl-action-neutral-border-color-active);
+  }
+}

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

@@ -496,6 +496,7 @@
   --gl-control-background-color-concatenation: var(--gl-color-neutral-10); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-disabled: var(--gl-color-neutral-10); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-default: var(--gl-color-neutral-0); /* Used for form control (input, radio button, checkbox, textarea) default background. */
+  --gl-tab-selected-indicator-color-default: var(--gl-color-blue-500); /* Used for the selected indicator of a tab. */
   --gl-spinner-segment-color-light: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner on a dark background. */
   --gl-spinner-segment-color-default: var(--gl-color-neutral-700); /* Used for the animated segment of a loading spinner. */
   --gl-spinner-track-color-light: var(--gl-color-neutral-800); /* Used for the static track (background) of a loading spinner on a dark background. */
@@ -568,8 +569,9 @@
   --gl-button-default-primary-background-color-default: var(--gl-color-neutral-0); /* Used for the background of an default primary button in the default state. */
   --gl-button-default-primary-foreground-color-default: var(--gl-color-neutral-800); /* Used for the foreground of a default primary button in the default state. */
   --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-banner-promo-border-color: var(--gl-color-purple-100); /* Used for the border of a promo banner. */
+  --gl-banner-promo-background-color: var(--gl-color-purple-50); /* Used for the background of a promo banner. */
+  --gl-banner-intro-border-color: var(--gl-color-blue-100); /* Used for the border of an info banner. */
   --gl-badge-tier-icon-color-active: var(--gl-color-purple-900); /* Used for the icon of a tier related badge in the active state. */
   --gl-badge-tier-icon-color-hover: var(--gl-color-purple-800); /* Used for the icon of a tier related badge in the hover state. */
   --gl-badge-tier-icon-color-default: var(--gl-color-purple-700); /* Used for the icon of a tier related badge when static or the default state when linked. */

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

@@ -471,7 +471,7 @@
   --gl-feedback-success-background-color: var(--gl-color-green-900); /* Used for the background of a success feedback item when confirming the successful completion of a user-initiated action. */
   --gl-feedback-info-icon-color: var(--gl-color-blue-300); /* Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
   --gl-feedback-info-text-color: var(--gl-color-blue-200); /* Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
-  --gl-feedback-info-background-color: var(--gl-color-blue-900); /* Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
+  --gl-feedback-info-background-color: var(--gl-color-blue-950); /* Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action. */
   --gl-feedback-neutral-icon-color: var(--gl-color-neutral-300); /* Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. */
   --gl-feedback-neutral-text-color: var(--gl-color-neutral-200); /* Used for the text of a neutral feedback item when there isn't a specific meaning or urgency. */
   --gl-feedback-neutral-background-color: var(--gl-color-neutral-900); /* Used for the background of a neutral feedback item when there isn't a specific meaning or urgency. */
@@ -496,6 +496,7 @@
   --gl-control-background-color-concatenation: var(--gl-color-alpha-light-4); /* Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-disabled: var(--gl-color-alpha-light-4); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-default: var(--gl-color-alpha-dark-40); /* Used for form control (input, radio button, checkbox, textarea) default background. */
+  --gl-tab-selected-indicator-color-default: var(--gl-color-blue-400); /* Used for the selected indicator of a tab. */
   --gl-spinner-segment-color-light: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner on a dark background. */
   --gl-spinner-segment-color-default: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner. */
   --gl-spinner-track-color-light: var(--gl-color-neutral-800); /* Used for the static track (background) of a loading spinner on a dark background. */
@@ -568,8 +569,9 @@
   --gl-button-default-primary-background-color-default: var(--gl-color-neutral-900); /* Used for the background of an default primary button in the default state. */
   --gl-button-default-primary-foreground-color-default: var(--gl-color-neutral-50); /* Used for the foreground of a default primary button in the default state. */
   --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-banner-promo-border-color: var(--gl-color-purple-800); /* Used for the border of a promo banner. */
+  --gl-banner-promo-background-color: var(--gl-color-purple-950); /* Used for the background of a promo banner. */
+  --gl-banner-intro-border-color: var(--gl-color-blue-800); /* Used for the border of an info banner. */
   --gl-badge-tier-icon-color-active: var(--gl-color-purple-950); /* Used for the icon of a tier related badge in the active state. */
   --gl-badge-tier-icon-color-hover: var(--gl-color-purple-950); /* Used for the icon of a tier related badge in the hover state. */
   --gl-badge-tier-icon-color-default: var(--gl-color-purple-950); /* Used for the icon of a tier related badge when static or the default state when linked. */

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

@@ -427,8 +427,9 @@ export const GL_BADGE_TIER_ICON_COLOR_DEFAULT = '#232150'; // Used for the icon
 export const GL_BADGE_TIER_ICON_COLOR_HOVER = '#232150'; // Used for the icon of a tier related badge in the hover state.
 export const GL_BADGE_TIER_ICON_COLOR_FOCUS = '#232150'; // Used for the icon of a tier related badge in the focus state.
 export const GL_BADGE_TIER_ICON_COLOR_ACTIVE = '#232150'; // Used for the icon of a tier related badge in the active state.
-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_BANNER_INTRO_BORDER_COLOR = '#064787'; // Used for the border of an info banner.
+export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#232150'; // Used for the background of a promo banner.
+export const GL_BANNER_PROMO_BORDER_COLOR = '#453894'; // Used for the border of a promo banner.
 export const GL_BREADCRUMB_SEPARATOR_COLOR = '#89888d'; // Used for the breadcrumb level separator.
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_DEFAULT = '#ececef'; // Used for the foreground of a default primary button in the default state.
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_HOVER = '#ececef'; // Used for the foreground of a default primary button in the hover state.
@@ -572,6 +573,7 @@ export const GL_SPINNER_SEGMENT_COLOR_DEFAULT = '#bfbfc3'; // Used for the anima
 export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3'; // Used for the animated segment of a loading spinner on a dark background.
 export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#28272d'; // Used for the background of a table row in hover state.
 export const GL_TABLE_SORTING_ICON_COLOR = '#fff'; // Used for the color of the sorting icons in the column headers.
+export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#428fdc'; // Used for the selected indicator of a tab.
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)'; // Used for form control (input, radio button, checkbox, textarea) default background.
 export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = 'rgba(255, 255, 255, 0.04)'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 export const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = 'rgba(255, 255, 255, 0.04)'; // Used for the background of static content that prepends or appends a text input.
@@ -764,7 +766,7 @@ export const GL_FEEDBACK_STRONG_LINK_COLOR = '#0b5cad'; // Used for a link on a
 export const GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR = '#28272d'; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
 export const GL_FEEDBACK_NEUTRAL_TEXT_COLOR = '#bfbfc3'; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
 export const GL_FEEDBACK_NEUTRAL_ICON_COLOR = '#a4a3a8'; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
-export const GL_FEEDBACK_INFO_BACKGROUND_COLOR = '#033464'; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
+export const GL_FEEDBACK_INFO_BACKGROUND_COLOR = '#002850'; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
 export const GL_FEEDBACK_INFO_TEXT_COLOR = '#9dc7f1'; // Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
 export const GL_FEEDBACK_INFO_ICON_COLOR = '#63a6e9'; // Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
 export const GL_FEEDBACK_SUCCESS_BACKGROUND_COLOR = '#0a4020'; // Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.

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

@@ -427,8 +427,9 @@ export const GL_BADGE_TIER_ICON_COLOR_DEFAULT = '#5943b6'; // Used for the icon
 export const GL_BADGE_TIER_ICON_COLOR_HOVER = '#453894'; // Used for the icon of a tier related badge in the hover state.
 export const GL_BADGE_TIER_ICON_COLOR_FOCUS = '#453894'; // Used for the icon of a tier related badge in the focus state.
 export const GL_BADGE_TIER_ICON_COLOR_ACTIVE = '#2f2a6b'; // Used for the icon of a tier related badge in the active state.
-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_BANNER_INTRO_BORDER_COLOR = '#cbe2f9'; // Used for the border of an info banner.
+export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#f4f0ff'; // Used for the background of a promo banner.
+export const GL_BANNER_PROMO_BORDER_COLOR = '#e1d8f9'; // Used for the border of a promo banner.
 export const GL_BREADCRUMB_SEPARATOR_COLOR = '#89888d'; // Used for the breadcrumb level separator.
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_DEFAULT = '#3a383f'; // Used for the foreground of a default primary button in the default state.
 export const GL_BUTTON_DEFAULT_PRIMARY_FOREGROUND_COLOR_HOVER = '#3a383f'; // Used for the foreground of a default primary button in the hover state.
@@ -572,6 +573,7 @@ export const GL_SPINNER_SEGMENT_COLOR_DEFAULT = '#4c4b51'; // Used for the anima
 export const GL_SPINNER_SEGMENT_COLOR_LIGHT = '#bfbfc3'; // Used for the animated segment of a loading spinner on a dark background.
 export const GL_TABLE_ROW_BACKGROUND_COLOR_HOVER = '#fbfafd'; // Used for the background of a table row in hover state.
 export const GL_TABLE_SORTING_ICON_COLOR = '#18171d'; // Used for the color of the sorting icons in the column headers.
+export const GL_TAB_SELECTED_INDICATOR_COLOR_DEFAULT = '#1f75cb'; // Used for the selected indicator of a tab.
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.
 export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = '#fbfafd'; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 export const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = '#fbfafd'; // Used for the background of static content that prepends or appends a text input.