@gitlab/ui 89.5.0 → 89.7.0

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.
@@ -660,6 +662,16 @@ $gl-avatar-fallback-text-color-purple: $gl-color-purple-200; // Purple text colo
 $gl-avatar-fallback-text-color-red: $gl-color-red-200; // Red text color for avatar fallback with no particular meaning.
 $gl-avatar-border-color-hover: $gl-color-alpha-light-24; // Used to increase the edge definition of an avatar in the hover state.
 $gl-avatar-border-color-default: $gl-color-alpha-light-8; // Used to define the edge of an avatar.
+$gl-alert-danger-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of a danger alert.
+$gl-alert-danger-border-top-color: $gl-color-red-400; // Used for the border color of a danger alert.
+$gl-alert-warning-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of a warning alert.
+$gl-alert-warning-border-top-color: $gl-color-orange-400; // Used for the border color of a warning alert.
+$gl-alert-success-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of a success alert.
+$gl-alert-success-border-top-color: $gl-color-green-400; // Used for the border color of a success alert.
+$gl-alert-info-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of an info alert.
+$gl-alert-info-border-top-color: $gl-color-blue-400; // Used for the border color of an info alert.
+$gl-alert-neutral-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of a neutral alert.
+$gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-subtle: $gl-color-neutral-900; // Used for a subtle border in combination with the default background.
@@ -764,6 +776,16 @@ $gl-badge-neutral-background-color-hover: $gl-badge-neutral-background-color-def
 $gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a muted badge in the focus state.
 $gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a muted badge in the focus state.
 $gl-badge-muted-background-color-hover: $gl-badge-muted-background-color-default; // Used for the background of a muted badge in the hover state.
+$gl-alert-danger-background-color: $gl-background-color-subtle; // Used for the background color of a danger alert.
+$gl-alert-danger-title-color: $gl-color-red-300; // Used for the title color of a danger alert.
+$gl-alert-warning-background-color: $gl-background-color-subtle; // Used for the background color of a warning alert.
+$gl-alert-warning-title-color: $gl-color-orange-300; // Used for the title color of a warning alert.
+$gl-alert-success-background-color: $gl-background-color-subtle; // Used for the background color of a success alert.
+$gl-alert-success-title-color: $gl-color-green-300; // Used for the title color of a success alert.
+$gl-alert-info-background-color: $gl-background-color-subtle; // Used for the background color of an info alert.
+$gl-alert-info-title-color: $gl-color-blue-300; // Used for the title color of an info alert.
+$gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
+$gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
 $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
 $gl-action-strong-neutral-foreground-color-hover: $gl-action-strong-neutral-foreground-color-default; // Used for the foreground of a strong neutral action in the hover state.
 $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.

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.
@@ -660,6 +662,16 @@ $gl-avatar-fallback-text-color-purple: $gl-color-purple-800; // Purple text colo
 $gl-avatar-fallback-text-color-red: $gl-color-red-800; // Red text color for avatar fallback with no particular meaning.
 $gl-avatar-border-color-hover: $gl-color-alpha-dark-24; // Used to increase the edge definition of an avatar in the hover state.
 $gl-avatar-border-color-default: $gl-color-alpha-dark-8; // Used to define the edge of an avatar.
+$gl-alert-danger-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a danger alert.
+$gl-alert-danger-border-top-color: $gl-color-alpha-0; // Used for the border color of a danger alert.
+$gl-alert-warning-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a warning alert.
+$gl-alert-warning-border-top-color: $gl-color-alpha-0; // Used for the border color of a warning alert.
+$gl-alert-success-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a success alert.
+$gl-alert-success-border-top-color: $gl-color-alpha-0; // Used for the border color of a success alert.
+$gl-alert-info-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of an info alert.
+$gl-alert-info-border-top-color: $gl-color-alpha-0; // Used for the border color of an info alert.
+$gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
+$gl-alert-neutral-border-top-color: $gl-color-alpha-0; // Used for the border center color of a neutral alert.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.
 $gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
@@ -764,6 +776,16 @@ $gl-badge-neutral-background-color-hover: $gl-badge-neutral-background-color-def
 $gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a muted badge in the focus state.
 $gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a muted badge in the focus state.
 $gl-badge-muted-background-color-hover: $gl-badge-muted-background-color-default; // Used for the background of a muted badge in the hover state.
+$gl-alert-danger-background-color: $gl-feedback-danger-background-color; // Used for the background color of a danger alert.
+$gl-alert-danger-title-color: $gl-text-color-heading; // Used for the title color of a danger alert.
+$gl-alert-warning-background-color: $gl-feedback-warning-background-color; // Used for the background color of a warning alert.
+$gl-alert-warning-title-color: $gl-text-color-heading; // Used for the title color of a warning alert.
+$gl-alert-success-background-color: $gl-feedback-success-background-color; // Used for the background color of a success alert.
+$gl-alert-success-title-color: $gl-text-color-heading; // Used for the title color of a success alert.
+$gl-alert-info-background-color: $gl-feedback-info-background-color; // Used for the background color of an info alert.
+$gl-alert-info-title-color: $gl-text-color-heading; // Used for the title color of an info alert.
+$gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
+$gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
 $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
 $gl-action-strong-neutral-foreground-color-hover: $gl-action-strong-neutral-foreground-color-default; // Used for the foreground of a strong neutral action in the hover state.
 $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -301,6 +301,26 @@ $data-viz-orange-700: var(--data-viz-orange-700);
 $data-viz-orange-800: var(--data-viz-orange-800);
 $data-viz-orange-900: var(--data-viz-orange-900);
 $data-viz-orange-950: var(--data-viz-orange-950);
+$gl-alert-neutral-title-color: var(--gl-alert-neutral-title-color);
+$gl-alert-neutral-background-color: var(--gl-alert-neutral-background-color);
+$gl-alert-neutral-border-top-color: var(--gl-alert-neutral-border-top-color);
+$gl-alert-neutral-border-bottom-color: var(--gl-alert-neutral-border-bottom-color);
+$gl-alert-info-title-color: var(--gl-alert-info-title-color);
+$gl-alert-info-background-color: var(--gl-alert-info-background-color);
+$gl-alert-info-border-top-color: var(--gl-alert-info-border-top-color);
+$gl-alert-info-border-bottom-color: var(--gl-alert-info-border-bottom-color);
+$gl-alert-success-title-color: var(--gl-alert-success-title-color);
+$gl-alert-success-background-color: var(--gl-alert-success-background-color);
+$gl-alert-success-border-top-color: var(--gl-alert-success-border-top-color);
+$gl-alert-success-border-bottom-color: var(--gl-alert-success-border-bottom-color);
+$gl-alert-warning-title-color: var(--gl-alert-warning-title-color);
+$gl-alert-warning-background-color: var(--gl-alert-warning-background-color);
+$gl-alert-warning-border-top-color: var(--gl-alert-warning-border-top-color);
+$gl-alert-warning-border-bottom-color: var(--gl-alert-warning-border-bottom-color);
+$gl-alert-danger-title-color: var(--gl-alert-danger-title-color);
+$gl-alert-danger-background-color: var(--gl-alert-danger-background-color);
+$gl-alert-danger-border-top-color: var(--gl-alert-danger-border-top-color);
+$gl-alert-danger-border-bottom-color: var(--gl-alert-danger-border-bottom-color);
 $gl-avatar-border-color-default: var(--gl-avatar-border-color-default);
 $gl-avatar-border-color-hover: var(--gl-avatar-border-color-hover);
 $gl-avatar-fallback-text-color-red: var(--gl-avatar-fallback-text-color-red);
@@ -429,6 +449,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 +593,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.7.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/alert/alert.scss

@@ -7,6 +7,35 @@
  */
 // stylelint-disable length-zero-no-unit
 $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
+$gl-alert-top-border-size: 2px;
+
+@mixin gl-alert-variant(
+  $variant,
+  $background-color,
+  $title-color,
+  $border-top-color,
+  $border-bottom-color,
+  $icon-color
+) {
+  .gl-alert-#{$variant} {
+    background-color: $background-color;
+    border-bottom: 1px solid $border-bottom-color;
+
+    &::before {
+      background: linear-gradient(to right, transparent 0%, $border-top-color 50%, transparent 100%);
+    }
+
+    .gl-alert-title {
+      color: $title-color;
+    }
+
+    @media (forced-colors: none) {
+      .gl-alert-icon {
+        color: $icon-color;
+      }
+    }
+  }
+}
 
 .gl-alert {
   @include gl-font-base;
@@ -15,7 +44,17 @@ $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
   @include gl-py-5;
 
   @media (forced-colors: active) {
-    border: 1px solid;
+    border: 1px solid transparent;
+  }
+
+  &::before {
+    content: "";
+    display: block;
+    width: 100%;
+    height: $gl-alert-top-border-size;
+    position: absolute;
+    top: -1px; // To accumilate for the border width
+    left: 0;
   }
 
   &-not-dismissible {
@@ -80,46 +119,53 @@ $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
 // This is the replacement for .gl-alert-dismiss
 .gl-dismiss-btn {
   position: absolute;
-  top: $gl-spacing-scale-4;
+  top: calc(#{$gl-spacing-scale-4} + #{$gl-alert-top-border-size});
   right: calc(#{$gl-spacing-scale-4} + #{$gl-alert-padding-x});
 }
 
-.gl-alert-danger {
-  background-color: var(--gl-feedback-danger-background-color);
-
-  .gl-alert-icon {
-    color: var(--gl-feedback-danger-icon-color);
-  }
-}
-
-.gl-alert-warning {
-  background-color: var(--gl-feedback-warning-background-color);
-
-  .gl-alert-icon {
-    color: var(--gl-feedback-warning-icon-color);
-  }
-}
-
-.gl-alert-tip {
-  background-color: var(--gl-feedback-neutral-background-color);
-
-  .gl-alert-icon {
-    color: var(--gl-feedback-neutral-icon-color);
-  }
-}
-
-.gl-alert-info {
-  background-color: var(--gl-feedback-info-background-color);
-
-  .gl-alert-icon {
-    color: var(--gl-feedback-info-icon-color);
-  }
-}
-
-.gl-alert-success {
-  background-color: var(--gl-feedback-success-background-color);
-
-  .gl-alert-icon {
-    color: var(--gl-feedback-success-icon-color);
-  }
-}
+/* Variants */
+
+@include gl-alert-variant(
+  $variant: danger,
+  $background-color: var(--gl-alert-danger-background-color),
+  $title-color: var(--gl-alert-danger-title-color),
+  $border-top-color: var(--gl-alert-danger-border-top-color),
+  $border-bottom-color: var(--gl-alert-danger-border-bottom-color),
+  $icon-color: var(--gl-feedback-danger-icon-color),
+);
+
+@include gl-alert-variant(
+  $variant: warning,
+  $background-color: var(--gl-alert-warning-background-color),
+  $title-color: var(--gl-alert-warning-title-color),
+  $border-top-color: var(--gl-alert-warning-border-top-color),
+  $border-bottom-color: var(--gl-alert-warning-border-bottom-color),
+  $icon-color: var(--gl-feedback-warning-icon-color),
+);
+
+@include gl-alert-variant(
+  $variant: tip,
+  $background-color: var(--gl-alert-neutral-background-color),
+  $title-color: var(--gl-alert-neutral-title-color),
+  $border-top-color: var(--gl-alert-neutral-border-top-color),
+  $border-bottom-color: var(--gl-alert-neutral-border-bottom-color),
+  $icon-color: var(--gl-feedback-neutral-icon-color),
+);
+
+@include gl-alert-variant(
+  $variant: info,
+  $background-color: var(--gl-alert-info-background-color),
+  $title-color: var(--gl-alert-info-title-color),
+  $border-top-color: var(--gl-alert-info-border-top-color),
+  $border-bottom-color: var(--gl-alert-info-border-bottom-color),
+  $icon-color: var(--gl-feedback-info-icon-color),
+);
+
+@include gl-alert-variant(
+  $variant: success,
+  $background-color: var(--gl-alert-success-background-color),
+  $title-color: var(--gl-alert-success-title-color),
+  $border-top-color: var(--gl-alert-success-border-top-color),
+  $border-bottom-color: var(--gl-alert-success-border-bottom-color),
+  $icon-color: var(--gl-feedback-success-icon-color),
+);

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/components/experimental/duo/chat/duo_chat.vue

@@ -9,7 +9,6 @@ import GlAlert from '../../../base/alert/alert.vue';
 import GlFormInputGroup from '../../../base/form/form_input_group/form_input_group.vue';
 import GlFormTextarea from '../../../base/form/form_textarea/form_textarea.vue';
 import GlForm from '../../../base/form/form.vue';
-import GlFormText from '../../../base/form/form_text/form_text.vue';
 import GlExperimentBadge from '../../experiment_badge/experiment_badge.vue';
 import { badgeTypes, badgeTypeValidator } from '../../experiment_badge/constants';
 import { SafeHtmlDirective as SafeHtml } from '../../../../directives/safe_html/safe_html';
@@ -55,7 +54,6 @@ export default {
     GlFormInputGroup,
     GlFormTextarea,
     GlForm,
-    GlFormText,
     GlExperimentBadge,
     GlDuoChatLoader,
     GlDuoChatPredefinedPrompts,
@@ -602,11 +600,12 @@ export default {
             />
           </template>
         </gl-form-input-group>
-        <gl-form-text
-          class="gl-mt-3 gl-leading-20 gl-text-gray-400"
+        <p
+          class="gl-mb-0 gl-mt-3 gl-text-sm gl-leading-20 gl-text-subtle"
           data-testid="chat-legal-disclaimer"
-          >{{ $options.i18n.CHAT_LEGAL_DISCLAIMER }}</gl-form-text
         >
+          {{ $options.i18n.CHAT_LEGAL_DISCLAIMER }}
+        </p>
       </gl-form>
     </footer>
   </aside>

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. */
@@ -662,6 +664,16 @@
   --gl-avatar-fallback-text-color-red: var(--gl-color-red-800); /* Red text color for avatar fallback with no particular meaning. */
   --gl-avatar-border-color-hover: var(--gl-color-alpha-dark-24); /* Used to increase the edge definition of an avatar in the hover state. */
   --gl-avatar-border-color-default: var(--gl-color-alpha-dark-8); /* Used to define the edge of an avatar. */
+  --gl-alert-danger-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a danger alert. */
+  --gl-alert-danger-border-top-color: var(--gl-color-alpha-0); /* Used for the border color of a danger alert. */
+  --gl-alert-warning-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a warning alert. */
+  --gl-alert-warning-border-top-color: var(--gl-color-alpha-0); /* Used for the border color of a warning alert. */
+  --gl-alert-success-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a success alert. */
+  --gl-alert-success-border-top-color: var(--gl-color-alpha-0); /* Used for the border color of a success alert. */
+  --gl-alert-info-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of an info alert. */
+  --gl-alert-info-border-top-color: var(--gl-color-alpha-0); /* Used for the border color of an info alert. */
+  --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a neutral alert. */
+  --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /* Used for the border center color of a neutral alert. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
   --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
   --gl-border-color-subtle: var(--gl-color-neutral-50); /* Used for a subtle border in combination with the default background. */
@@ -766,6 +778,16 @@
   --gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-hover); /* Used for the icon of a muted badge in the focus state. */
   --gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /* Used for the text of a muted badge in the focus state. */
   --gl-badge-muted-background-color-hover: var(--gl-badge-muted-background-color-default); /* Used for the background of a muted badge in the hover state. */
+  --gl-alert-danger-background-color: var(--gl-feedback-danger-background-color); /* Used for the background color of a danger alert. */
+  --gl-alert-danger-title-color: var(--gl-text-color-heading); /* Used for the title color of a danger alert. */
+  --gl-alert-warning-background-color: var(--gl-feedback-warning-background-color); /* Used for the background color of a warning alert. */
+  --gl-alert-warning-title-color: var(--gl-text-color-heading); /* Used for the title color of a warning alert. */
+  --gl-alert-success-background-color: var(--gl-feedback-success-background-color); /* Used for the background color of a success alert. */
+  --gl-alert-success-title-color: var(--gl-text-color-heading); /* Used for the title color of a success alert. */
+  --gl-alert-info-background-color: var(--gl-feedback-info-background-color); /* Used for the background color of an info alert. */
+  --gl-alert-info-title-color: var(--gl-text-color-heading); /* Used for the title color of an info alert. */
+  --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /* Used for the background color of a neutral alert. */
+  --gl-alert-neutral-title-color: var(--gl-text-color-heading); /* Used for the title color of a neutral alert. */
   --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /* Used for the border of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-default); /* Used for the foreground of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /* Used for the background of a strong neutral action in the focus state. */