@gitlab/ui 86.15.0 → 87.1.0

package/src/components/base/popover/popover.scss

@@ -4,9 +4,7 @@ $gl-popover-max-width: $grid-size * 35;
 
 .gl-popover {
   max-width: $gl-popover-max-width;
-  @include gl-border-1;
-  @include gl-border-solid;
-  @include gl-border-none;
+  @apply gl-border-none;
   @include gl-shadow-md;
   @include gl-font-sm;
 
@@ -77,7 +75,7 @@ $gl-popover-max-width: $grid-size * 35;
   .popover-header {
     color: var(--gl-text-color-heading);
     @include gl-heading-scale-200;
-    @include gl-border-bottom-0;
+    @apply gl-border-b-0;
     @include gl-pb-0;
   }
 

package/src/components/base/search_box_by_click/search_box_by_click.scss

@@ -4,7 +4,7 @@
   .gl-search-box-by-click-history > button {
     padding-left: $gl-spacing-scale-4 !important;
     padding-right: $gl-spacing-scale-3 !important;
-    @include gl-border-none;
+    @apply gl-border-none;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     @include gl-inset-border-1-gray-400;

package/src/components/base/search_box_by_type/search_box_by_type.scss

@@ -37,7 +37,7 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
 
 .gl-search-box-by-type-input-borderless,
 .gl-search-box-by-type-input-borderless.gl-form-input {
-  @include gl-border-none;
+  @apply gl-border-none;
   @include gl-font-base;
   @include gl-h-auto;
   @include gl-line-height-normal;

package/src/components/base/table/table.scss

@@ -5,9 +5,8 @@ table.gl-table {
   tr {
     th,
     td {
-      @include gl-border-b-solid;
+      @apply gl-border-b-solid gl-border-b-1;
       border-color: var(--gl-border-color-default);
-      @include gl-border-b-1;
       @include gl-p-5;
       @include gl-bg-transparent;
       @include gl-line-height-normal;
@@ -77,22 +76,18 @@ table.gl-table {
       }
 
       > td[data-label] {
-        @include gl-border-l-1;
-        @include gl-border-r-1;
-        @include gl-border-l-solid;
-        @include gl-border-r-solid;
+        @apply gl-border-l-1 gl-border-r-1 gl-border-l-solid gl-border-r-solid;
 
         &::before {
           @include gl-text-left;
         }
 
         &:first-child {
-          @include gl-border-t-solid;
-          @include gl-border-t-1;
+          @apply gl-border-t-solid gl-border-t-1;
         }
 
         &:not(:first-child) {
-          @include gl-border-t-none;
+          @apply gl-border-t-0;
         }
       }
 

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

@@ -1,11 +1,9 @@
 .gl-tabs-nav {
-  @include gl-border-solid;
-  @include gl-border-gray-100;
-  @include gl-border-0;
-  @include gl-border-b-1;
+  @apply gl-border-solid gl-border-gray-100 gl-border-0 gl-border-b-1;
 }
 
 .gl-tab-nav-item {
+  position: relative;
   @include gl-text-gray-900;
   @include gl-px-4;
   @include gl-py-5;
@@ -14,15 +12,37 @@
   @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;
+
+  &::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: box-shadow 100ms linear;
+  @media (prefers-reduced-motion: reduce) {
+    &, &::before {
+      transition-duration: .01ms;
+    }
+  }
 
   &:hover {
     @include gl-text-gray-900;
+  }
 
-    &:not(.gl-tab-nav-item-active) {
-      @include gl-inset-border-b-2-gray-200;
-    }
+  &:hover:not(.gl-tab-nav-item-active)::before {
+    border-bottom-color: $gray-200;
+    translate: 0;
+  }
+
+  &:focus {
+    border-radius: $gl-border-radius-base;
   }
 
   &.disabled {
@@ -51,13 +71,18 @@
 .gl-tab-nav-item-active {
   @include gl-font-weight-bold;
   @include gl-text-gray-900;
-  @include gl-inset-border-b-2-blue-500;
+  z-index: 1;
 
   &:active,
   &:focus,
   &:focus:active {
-    box-shadow: inset 0 -#{$gl-border-size-2} 0 0 $blue-500, $focus-ring;
     @include gl-outline-none;
+    @include gl-focus;
+  }
+
+  &::before {
+    border-bottom-color: $blue-500;
+    translate: 0;
   }
 }
 
@@ -112,7 +137,7 @@
 
 .gl-tabs-fade-icon-button {
   @include gl-bg-transparent;
-  @include gl-border-none;
+  @apply gl-border-none;
   @include gl-p-0;
   @include gl-text-gray-400;
   @include gl-h-full;

package/src/components/base/toggle/toggle.scss

@@ -80,7 +80,7 @@
   @include gl-display-inline-flex;
   @include gl-align-items-center;
   @include gl-justify-content-center;
-  @include gl-border-0;
+  @apply gl-border-0;
   @include gl-cursor-pointer;
   @include gl-bg-gray-600;
   @include gl-p-1;

package/src/components/base/tooltip/tooltip.scss

@@ -17,7 +17,7 @@
     @include gl-w-2;
 
     &::before {
-      @include gl-border-4;
+      @apply gl-border-4;
     }
   }
 }
@@ -31,21 +31,21 @@
 }
 
 .gl-tooltip.bs-tooltip-top .arrow::before {
-  @include gl-border-b-0;
+  @apply gl-border-b-0;
   border-top-color: var(--gl-feedback-background-color-strong);
 }
 
 .gl-tooltip.bs-tooltip-right .arrow::before {
-  @include gl-border-l-0;
+  @apply gl-border-l-0;
   border-right-color: var(--gl-feedback-background-color-strong);
 }
 
 .gl-tooltip.bs-tooltip-bottom .arrow::before {
-  @include gl-border-t-0;
+  @apply gl-border-t-0;
   border-bottom-color: var(--gl-feedback-background-color-strong);
 }
 
 .gl-tooltip.bs-tooltip-left .arrow::before {
-  @include gl-border-r-0;
+  @apply gl-border-r-0;
   border-left-color: var(--gl-feedback-background-color-strong);
 }

package/src/components/experimental/duo/chat/duo_chat.scss

@@ -50,9 +50,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 }
 
 .duo-chat-drawer-header {
-  @include gl-border-b-solid;
-  @include gl-border-b-gray-100;
-  @include gl-border-b-1;
+  @apply gl-border-b-solid gl-border-b-gray-100 gl-border-b-1;
 }
 
 .duo-chat-drawer-header-sticky {
@@ -70,9 +68,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 }
 
 .duo-chat-drawer-footer {
-  @include gl-border-t-solid;
-  @include gl-border-t-gray-100;
-  @include gl-border-t-1;
+  @apply gl-border-t-solid gl-border-t-gray-100 gl-border-t-1;
   @include gl-p-5;
 }
 

package/src/components/shared_components/clear_icon_button/clear_icon_button.scss

@@ -1,6 +1,6 @@
 .gl-clear-icon-button {
   @include gl-bg-transparent;
-  @include gl-border-none;
+  @apply gl-border-none;
   @include gl-cursor-pointer;
   @include gl-text-gray-500;
 

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

@@ -417,7 +417,7 @@
   --gl-action-neutral-background-color-hover: rgba(164, 163, 168, 0.16); /* Used for the background of a neutral action in the hover state. */
   --gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); /* Used for the background of a neutral action in the default state. */
   --gl-text-color-disabled: var(--gl-color-neutral-400); /* Used for disabled text. */
-  --gl-text-color-success: var(--gl-color-green-600); /* Used for text indicating success or validity. */
+  --gl-text-color-success: var(--gl-color-green-600); /* Used for text indicating success, completion, approval, addition, or validity. */
   --gl-text-color-danger: var(--gl-color-red-600); /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
   --gl-text-color-link: var(--gl-color-blue-700); /* Used for default text links. */
   --gl-text-color-heading: var(--gl-color-neutral-950); /* Used for headings level 1-6. */

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

@@ -417,7 +417,7 @@
   --gl-action-neutral-background-color-hover: rgba(137, 136, 141, 0.4); /* Used for the background of a neutral action in the hover state. */
   --gl-action-neutral-background-color-default: rgba(137, 136, 141, 0.0); /* Used for the background of a neutral action in the default state. */
   --gl-text-color-disabled: var(--gl-color-neutral-400); /* Used for disabled text. */
-  --gl-text-color-success: var(--gl-color-green-300); /* Used for text indicating success or validity. */
+  --gl-text-color-success: var(--gl-color-green-300); /* Used for text indicating success, completion, approval, addition, or validity. */
   --gl-text-color-danger: var(--gl-color-red-300); /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
   --gl-text-color-link: var(--gl-color-blue-300); /* Used for default text links. */
   --gl-text-color-heading: var(--gl-color-neutral-0); /* Used for headings level 1-6. */

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

@@ -613,5 +613,5 @@ export const GL_TEXT_COLOR_STRONG = '#fff'; // Used for text with the highest co
 export const GL_TEXT_COLOR_HEADING = '#fff'; // Used for headings level 1-6.
 export const GL_TEXT_COLOR_LINK = '#63a6e9'; // Used for default text links.
 export const GL_TEXT_COLOR_DANGER = '#f57f6c'; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
-export const GL_TEXT_COLOR_SUCCESS = '#52b87a'; // Used for text indicating success or validity.
+export const GL_TEXT_COLOR_SUCCESS = '#52b87a'; // Used for text indicating success, completion, approval, addition, or validity.
 export const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.

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

@@ -613,5 +613,5 @@ export const GL_TEXT_COLOR_STRONG = '#18171d'; // Used for text with the highest
 export const GL_TEXT_COLOR_HEADING = '#18171d'; // Used for headings level 1-6.
 export const GL_TEXT_COLOR_LINK = '#0b5cad'; // Used for default text links.
 export const GL_TEXT_COLOR_DANGER = '#c91c00'; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
-export const GL_TEXT_COLOR_SUCCESS = '#217645'; // Used for text indicating success or validity.
+export const GL_TEXT_COLOR_SUCCESS = '#217645'; // Used for text indicating success, completion, approval, addition, or validity.
 export const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.

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

@@ -13585,7 +13585,7 @@
       "success": {
         "value": "#52b87a",
         "$type": "color",
-        "comment": "Used for text indicating success or validity.",
+        "comment": "Used for text indicating success, completion, approval, addition, or validity.",
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -13594,7 +13594,7 @@
             "dark": "{color.green.300}"
           },
           "$type": "color",
-          "comment": "Used for text indicating success or validity."
+          "comment": "Used for text indicating success, completion, approval, addition, or validity."
         },
         "name": "TEXT_COLOR_SUCCESS",
         "attributes": {},

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

@@ -13585,7 +13585,7 @@
       "success": {
         "value": "#217645",
         "$type": "color",
-        "comment": "Used for text indicating success or validity.",
+        "comment": "Used for text indicating success, completion, approval, addition, or validity.",
         "filePath": "src/tokens/text.tokens.json",
         "isSource": true,
         "original": {
@@ -13594,7 +13594,7 @@
             "dark": "{color.green.300}"
           },
           "$type": "color",
-          "comment": "Used for text indicating success or validity."
+          "comment": "Used for text indicating success, completion, approval, addition, or validity."
         },
         "name": "TEXT_COLOR_SUCCESS",
         "attributes": {},

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

@@ -415,7 +415,7 @@ $gl-action-neutral-background-color-active: rgba(137, 136, 141, 0.16); // Used f
 $gl-action-neutral-background-color-hover: rgba(137, 136, 141, 0.4); // Used for the background of a neutral action in the hover state.
 $gl-action-neutral-background-color-default: rgba(137, 136, 141, 0.0); // Used for the background of a neutral action in the default state.
 $gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
-$gl-text-color-success: $gl-color-green-300; // Used for text indicating success or validity.
+$gl-text-color-success: $gl-color-green-300; // Used for text indicating success, completion, approval, addition, or validity.
 $gl-text-color-danger: $gl-color-red-300; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
 $gl-text-color-link: $gl-color-blue-300; // Used for default text links.
 $gl-text-color-heading: $gl-color-neutral-0; // Used for headings level 1-6.

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

@@ -415,7 +415,7 @@ $gl-action-neutral-background-color-active: rgba(83, 81, 88, 0.24); // Used for
 $gl-action-neutral-background-color-hover: rgba(164, 163, 168, 0.16); // Used for the background of a neutral action in the hover state.
 $gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); // Used for the background of a neutral action in the default state.
 $gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
-$gl-text-color-success: $gl-color-green-600; // Used for text indicating success or validity.
+$gl-text-color-success: $gl-color-green-600; // Used for text indicating success, completion, approval, addition, or validity.
 $gl-text-color-danger: $gl-color-red-600; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
 $gl-text-color-link: $gl-color-blue-700; // Used for default text links.
 $gl-text-color-heading: $gl-color-neutral-950; // Used for headings level 1-6.

package/src/tokens/text.tokens.json

@@ -82,7 +82,7 @@
           "dark": "{color.green.300}"
         },
         "$type": "color",
-        "$description": "Used for text indicating success or validity."
+        "$description": "Used for text indicating success, completion, approval, addition, or validity."
       },
       "disabled": {
         "$value": {