@gitlab/ui 93.1.0 → 93.2.0

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

@@ -23,9 +23,9 @@ $toggle-translate-width: 2 * $grid-size;
 $toggle-height: 2.5 * $grid-size;
 
 .gl-toggle-wrapper {
-  @include gl-line-height-normal;
-  @include gl-font-weight-normal;
-  @include gl-display-inline-flex;
+  @apply gl-leading-normal;
+  @apply gl-font-normal;
+  @apply gl-inline-flex;
 
   &.is-disabled {
     @include gl-cursor-not-allowed;
@@ -57,15 +57,15 @@ $toggle-height: 2.5 * $grid-size;
 .gl-help-label {
   @apply gl-mt-3;
   @include gl-text-gray-500;
-  @include gl-font-weight-normal;
+  @apply gl-font-normal;
 }
 
 .gl-toggle-label-inline {
-  @include gl-flex-direction-row;
-  @include gl-align-items-center;
+  @apply gl-flex-row;
+  @apply gl-items-center;
 
   .gl-toggle-label {
-    @include gl-white-space-nowrap;
+    @apply gl-whitespace-nowrap;
     @apply gl-mb-0;
     @apply gl-mr-3;
   }
@@ -77,13 +77,13 @@ $toggle-height: 2.5 * $grid-size;
 }
 
 .gl-toggle-label {
-  @include gl-font-weight-bold;
+  @apply gl-font-bold;
 }
 
 .gl-toggle {
-  @include gl-display-inline-flex;
-  @include gl-align-items-center;
-  @include gl-justify-content-center;
+  @apply gl-inline-flex;
+  @apply gl-items-center;
+  @apply gl-justify-center;
   @apply gl-border-0;
   @include gl-cursor-pointer;
   @include gl-bg-gray-600;
@@ -94,12 +94,12 @@ $toggle-height: 2.5 * $grid-size;
   user-select: none;
   @include gl-rounded-pill;
   @include gl-transition-slow;
-  @include gl-line-height-normal;
+  @apply gl-leading-normal;
 
   &::selection,
   &::before::selection,
   &::after::selection {
-    @include gl-bg-none;
+    @apply gl-bg-transparent;
   }
 
   &:hover,
@@ -123,12 +123,12 @@ $toggle-height: 2.5 * $grid-size;
     @include gl-rounded-full;
     @include gl-bg-white;
     position: absolute;
-    @include gl-display-inline-flex;
-    @include gl-align-items-center;
+    @apply gl-inline-flex;
+    @apply gl-items-center;
     left: $gl-spacing-scale-1;
     top: $gl-spacing-scale-1;
-    @include gl-transition-medium;
-    @include gl-justify-content-center;
+    @apply gl-transition-all;
+    @apply gl-justify-center;
     @apply gl-p-1;
 
     > svg {

package/src/components/base/token/token.scss

@@ -3,9 +3,9 @@
   @include gl-bg-gray-100;
   @include gl-rounded-small;
   @apply gl-pl-3;
-  @include gl-display-inline-flex;
-  @include gl-flex-direction-column;
-  @include gl-justify-content-center;
+  @apply gl-inline-flex;
+  @apply gl-flex-col;
+  @apply gl-justify-center;
 
   &.gl-token-view-only {
     @apply gl-py-2;
@@ -15,21 +15,21 @@
 
 .gl-token-search-type-variant {
   @include gl-bg-gray-100;
-  @include gl-rounded-top-right-none;
-  @include gl-rounded-bottom-right-none;
+  @apply gl-rounded-tr-none;
+  @apply gl-rounded-br-none;
 }
 
 .gl-token-search-value-variant {
-  @include gl-rounded-top-left-none;
-  @include gl-rounded-bottom-left-none;
+  @apply gl-rounded-tl-none;
+  @apply gl-rounded-bl-none;
 }
 
 .gl-token-content {
-  @include gl-font-sm;
-  @include gl-line-height-normal;
-  @include gl-display-flex;
-  @include gl-align-items-center;
-  @include gl-reset-color;
+  @apply gl-text-sm;
+  @apply gl-leading-normal;
+  @apply gl-flex;
+  @apply gl-items-center;
+  @apply gl-text-inherit;
 
   > .gl-avatar:first-child,
   > .gl-spinner-container:first-child {
@@ -39,7 +39,7 @@
 
 .gl-token-close {
   @apply gl-ml-2;
-  @include gl-reset-color;
+  @apply gl-text-inherit;
   @include gl-cursor-pointer;
 
   opacity: 0.8;

package/src/components/base/token/token.vue

@@ -35,6 +35,7 @@ export default {
   },
   computed: {
     variantClass() {
+      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
       return `gl-token-${this.variant}-variant`;
     },
     viewOnlyClass() {

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

@@ -1,11 +1,11 @@
 .gl-tooltip {
-  @include gl-font-sm;
+  @apply gl-text-sm;
   @apply gl-p-2;
 
   .tooltip-inner {
     @apply gl-rounded-base;
-    @include gl-line-height-normal;
-    @include gl-font-weight-normal;
+    @apply gl-leading-normal;
+    @apply gl-font-normal;
     @apply gl-py-3;
     @apply gl-px-4;
     background: var(--gl-feedback-strong-background-color);

package/src/components/charts/legend/legend.scss

@@ -20,7 +20,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
     background-image: linear-gradient(to bottom, $transparent-rgba, var(--white, #{$white}));
     bottom: 0;
     content: '';
-    @include gl-display-block;
+    @apply gl-block;
     @include gl-h-4;
     position: absolute;
     @include gl-w-full;
@@ -28,20 +28,20 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
 }
 
 .gl-legend-inline {
-    @include gl-display-flex;
+    @apply gl-flex;
     @include gl-flex-wrap;
-    @include gl-flex-shrink-0;
+    @apply gl-shrink-0;
 
   .gl-legend-inline-series {
-    @include gl-display-flex;
-    @include gl-flex-shrink-0;
-    @include gl-justify-content-space-between;
-    @include gl-align-items-center;
+    @apply gl-flex;
+    @apply gl-shrink-0;
+    @apply gl-justify-between;
+    @apply gl-items-center;
     @apply gl-pr-5;
 
     &:hover {
       @include gl-cursor-pointer;
-      @include gl-text-decoration-underline;
+      @apply gl-underline;
     }
 
     .gl-legend-inline-series-label {
@@ -52,22 +52,22 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
 
 .gl-legend-tabular {
   .gl-legend-tabular-header {
-    @include gl-display-flex;
-    @include gl-justify-content-end;
+    @apply gl-flex;
+    @apply gl-justify-end;
   }
 
   .gl-legend-tabular-header-cell,
   .gl-legend-tabular-details-cell {
-    @include gl-white-space-nowrap;
+    @apply gl-whitespace-nowrap;
     @include gl-overflow-hidden;
-    @include gl-text-overflow-ellipsis;
+    @apply gl-text-ellipsis;
     @include gl-text-right;
     @include gl-w-eighth;
   }
 
   .gl-legend-tabular-header-cell {
-    @include gl-font-weight-bold;
-    @include gl-line-height-24;
+    @apply gl-font-bold;
+    @apply gl-leading-24;
     @apply gl-px-3;
   }
 
@@ -77,7 +77,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
   }
 
   .gl-legend-tabular-row {
-    @include gl-display-flex;
+    @apply gl-flex;
 
     &:nth-child(odd) {
       background-color: var(--gray-50, #{$gray-50});
@@ -86,12 +86,12 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
 
   .gl-legend-tabular-title-cell,
   .gl-legend-tabular-details-cell {
-    @include gl-line-height-24;
+    @apply gl-leading-24;
     @apply gl-px-3;
   }
 
   .gl-legend-tabular-title-cell {
     @include gl-overflow-hidden;
-    @include gl-w-half;
+    @apply gl-w-1/2;
   }
 }

package/src/components/charts/series_label/series_label.scss

@@ -1,16 +1,16 @@
 .gl-series-label-container {
-  @include gl-display-flex;
-  @include gl-font-base;
+  @apply gl-flex;
+  @apply gl-text-base;
   @include gl-overflow-hidden;
-  @include gl-overflow-wrap-break;
+  @apply gl-break-words;
 }
 
 .gl-series-label-color {
-  @include gl-flex-shrink-0;
+  @apply gl-shrink-0;
   @apply gl-mr-3;
 
   svg {
-    @include gl-display-block;
+    @apply gl-block;
   }
 }
 
@@ -19,5 +19,5 @@
   // as there are quite a few possible cases where
   // Prometheus queries return long labels with no spaces.
   @include gl-overflow-hidden;
-  @include gl-overflow-wrap-break;
+  @apply gl-break-words;
 }

package/src/components/charts/single_stat/single_stat.scss

@@ -1,5 +1,5 @@
 .gl-single-stat {
-  @include gl-line-height-1;
+  @apply gl-leading-1;
 
   &:hover[tabindex='0'] {
     @include gl-bg-gray-50;

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

@@ -1,5 +1,5 @@
 .duo-chat-loader {
-  @include gl-display-flex;
+  @apply gl-flex;
   @include gl-text-gray-500;
 
   .transition {

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

@@ -7,13 +7,13 @@
   }
 
   pre {
-    @include gl-reset-color;
+    @apply gl-text-inherit;
     padding: $gl-spacing-scale-3 $gl-spacing-scale-4;
   }
 
   pre code {
-    @include gl-font-sm;
-    @include gl-line-height-1;
+    @apply gl-text-sm;
+    @apply gl-leading-1;
     @include gl-bg-transparent;
     white-space: inherit;
   }
@@ -25,7 +25,7 @@
   copy-code,
   insert-code-snippet {
     position: absolute;
-    @include gl-transition-medium;
+    @apply gl-transition-all;
     @include gl-opacity-0;
     right: $gl-spacing-scale-3;
     top: $gl-spacing-scale-3;

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

@@ -37,16 +37,16 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 
 .duo-chat-drawer {
   right: 0;
-  @include gl-transition-medium;
+  @apply gl-transition-all;
   position: fixed;
   @include gl-h-full;
   @include gl-w-full;
   @include gl-overflow-y-auto;
   @include gl-shadow-lg;
-  @include gl-font-base;
-  @include gl-line-height-normal;
-  @include gl-display-flex;
-  @include gl-flex-direction-column;
+  @apply gl-text-base;
+  @apply gl-leading-normal;
+  @apply gl-flex;
+  @apply gl-flex-col;
 }
 
 .duo-chat-drawer-header {
@@ -60,7 +60,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 }
 
 .duo-chat-drawer-body {
-  @include gl-flex-grow-1;
+  @apply gl-grow;
   // prevent safari bug where box shadow is visible
   // above the drawer when hovering interactive elements
   // see https://gitlab.com/gitlab-org/gitlab/-/issues/366558
@@ -82,7 +82,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
   &::before {
     background: $duo-chat-scrim-gradient;
     top: -$gl-border-size-1;
-    @include gl-translate-y-n100;
+    @apply -gl-translate-y-full;
     content: '';
     left: 0;
     position: absolute;
@@ -124,8 +124,8 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 }
 
 .duo-chat-input {
-  @include gl-display-flex;
-  @include gl-flex-direction-column;
+  @apply gl-flex;
+  @apply gl-flex-col;
   max-height: 240px;
   overflow: hidden;
 
@@ -142,14 +142,14 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 
   &::after {
     content: attr(data-value) ' ';
-    @include gl-visibility-hidden;
-    @include gl-white-space-pre-wrap;
+    @apply gl-invisible;
+    @apply gl-whitespace-pre-wrap;
     @apply gl-py-4;
   }
 }
 
 .slash-commands {
-  @include gl-mt-n2;
+  @apply -gl-mt-2;
 
   .active-command {
     @include gl-bg-gray-50;
@@ -157,12 +157,12 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
   }
 
   .gl-dropdown-item button.dropdown-item {
-    @include gl-font-sm;
+    @apply gl-text-sm;
     @apply gl-px-3;
-    @include gl-bg-none;
+    @apply gl-bg-transparent;
 
     &:hover {
-      @include gl-bg-none;
+      @apply gl-bg-transparent;
     }
   }
 }

package/src/components/shared_components/charts/tooltip_default_format.scss

@@ -1,18 +1,18 @@
 .gl-charts-tooltip-default-format-series {
-  @include gl-display-flex;
-  @include gl-justify-content-space-between;
+  @apply gl-flex;
+  @apply gl-justify-between;
 
   &-label,
   &-value {
-    @include gl-font-sm;
+    @apply gl-text-sm;
   }
 
   &-label {
-    @include gl-line-height-normal;
+    @apply gl-leading-normal;
     @apply gl-mr-7;
   }
 
   &-value {
-    @include gl-font-weight-bold;
+    @apply gl-font-bold;
   }
 }

package/src/scss/typescale/_index.scss

@@ -1,10 +1,10 @@
 @mixin gl-typescale-ui($selector: 'body') {
   #{$selector} {
-    @include gl-font-base;
+    @apply gl-text-base;
     @include gl-text-gray-900;
     @include gl-font-regular;
-    @include gl-font-weight-normal;
-    @include gl-line-height-normal;
+    @apply gl-font-normal;
+    @apply gl-leading-normal;
   }
 
   h1,
@@ -20,7 +20,7 @@
   .gl-h4,
   .gl-h5,
   .gl-h6 {
-    @include gl-font-weight-bold;
+    @apply gl-font-bold;
     @apply gl-mt-0;
     @apply gl-mb-0;
   }
@@ -44,29 +44,29 @@
 
   h3,
   .gl-h3 {
-    @include gl-font-lg;
-    @include gl-line-height-20;
+    @apply gl-text-lg;
+    @apply gl-leading-20;
   }
 
   h4,
   .gl-h4 {
-    @include gl-font-base;
-    @include gl-line-height-20;
+    @apply gl-text-base;
+    @apply gl-leading-20;
   }
 
   h5,
   .gl-h5,
   h6,
   .gl-h6 {
-    @include gl-font-base;
-    @include gl-line-height-20;
+    @apply gl-text-base;
+    @apply gl-leading-20;
     @include gl-text-gray-700;
   }
 
   p,
   .gl-paragraph {
-    @include gl-font-base;
-    @include gl-line-height-20;
+    @apply gl-text-base;
+    @apply gl-leading-20;
     @apply gl-mt-0;
     @apply gl-mb-0;
 
@@ -76,16 +76,16 @@
     }
 
     &.lg {
-      @include gl-line-height-24;
+      @apply gl-leading-24;
     }
   }
 
   .sm {
-    @include gl-font-sm;
+    @apply gl-text-sm;
   }
 
   .lg {
-    @include gl-font-lg;
+    @apply gl-text-lg;
   }
 
   .monospace {

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

@@ -426,6 +426,7 @@
   --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, 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-warning: var(--gl-color-orange-600); /* Used for text that requires caution or careful attention. */
   --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. */
   --gl-text-color-strong: var(--gl-color-neutral-950); /* Used for text with the highest contrast. */

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

@@ -426,6 +426,7 @@
   --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, 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-warning: var(--gl-color-orange-300); /* Used for text that requires caution or careful attention. */
   --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. */
   --gl-text-color-strong: var(--gl-color-neutral-0); /* Used for text with the highest contrast. */

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

@@ -904,6 +904,7 @@ export const GL_TEXT_COLOR_SUBTLE = '#bfbfc3'; // Used for supplemental text tha
 export const GL_TEXT_COLOR_STRONG = '#fff'; // Used for text with the highest contrast.
 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_WARNING = '#d99530'; // Used for text that requires caution or careful attention.
 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, completion, approval, addition, or validity.
 export const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.

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

@@ -904,6 +904,7 @@ export const GL_TEXT_COLOR_SUBTLE = '#626168'; // Used for supplemental text tha
 export const GL_TEXT_COLOR_STRONG = '#18171d'; // Used for text with the highest contrast.
 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_WARNING = '#9e5400'; // Used for text that requires caution or careful attention.
 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, completion, approval, addition, or validity.
 export const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.

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

@@ -20706,6 +20706,28 @@
           "link"
         ]
       },
+      "warning": {
+        "value": "#d99530",
+        "$type": "color",
+        "comment": "Used for text that requires caution or careful attention.",
+        "filePath": "src/tokens/text.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.orange.600}",
+            "dark": "{color.orange.300}"
+          },
+          "$type": "color",
+          "comment": "Used for text that requires caution or careful attention."
+        },
+        "name": "TEXT_COLOR_WARNING",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "warning"
+        ]
+      },
       "danger": {
         "value": "#f57f6c",
         "$type": "color",

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

@@ -20706,6 +20706,28 @@
           "link"
         ]
       },
+      "warning": {
+        "value": "#9e5400",
+        "$type": "color",
+        "comment": "Used for text that requires caution or careful attention.",
+        "filePath": "src/tokens/text.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": {
+            "default": "{color.orange.600}",
+            "dark": "{color.orange.300}"
+          },
+          "$type": "color",
+          "comment": "Used for text that requires caution or careful attention."
+        },
+        "name": "TEXT_COLOR_WARNING",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "warning"
+        ]
+      },
       "danger": {
         "value": "#c91c00",
         "$type": "color",

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

@@ -424,6 +424,7 @@ $gl-action-neutral-background-color-default: rgba(137, 136, 141, 0.0); // Used f
 $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, 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-warning: $gl-color-orange-300; // Used for text that requires caution or careful attention.
 $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.
 $gl-text-color-strong: $gl-color-neutral-0; // Used for text with the highest contrast.

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

@@ -424,6 +424,7 @@ $gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); // Used f
 $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, 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-warning: $gl-color-orange-600; // Used for text that requires caution or careful attention.
 $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.
 $gl-text-color-strong: $gl-color-neutral-950; // Used for text with the highest contrast.

package/src/tokens/build/scss/_tokens_custom_properties.scss

@@ -904,6 +904,7 @@ $gl-text-color-subtle: var(--gl-text-color-subtle);
 $gl-text-color-strong: var(--gl-text-color-strong);
 $gl-text-color-heading: var(--gl-text-color-heading);
 $gl-text-color-link: var(--gl-text-color-link);
+$gl-text-color-warning: var(--gl-text-color-warning);
 $gl-text-color-danger: var(--gl-text-color-danger);
 $gl-text-color-success: var(--gl-text-color-success);
 $gl-text-color-disabled: var(--gl-text-color-disabled);

package/src/tokens/build/tailwind/tokens.cjs

@@ -209,6 +209,7 @@ const textColors = {
   strong: 'var(--gl-text-color-strong, var(--gl-color-neutral-950, #18171d))',
   heading: 'var(--gl-text-color-heading, var(--gl-color-neutral-950, #18171d))',
   link: 'var(--gl-text-color-link, var(--gl-color-blue-700, #0b5cad))',
+  warning: 'var(--gl-text-color-warning, var(--gl-color-orange-600, #9e5400))',
   danger: 'var(--gl-text-color-danger, var(--gl-color-red-600, #c91c00))',
   success: 'var(--gl-text-color-success, var(--gl-color-green-600, #217645))',
   disabled: 'var(--gl-text-color-disabled, var(--gl-color-neutral-400, #89888d))',

package/src/tokens/text.tokens.json

@@ -68,6 +68,14 @@
         "$type": "color",
         "$description": "Used for default text links."
       },
+      "warning": {
+        "$value": {
+          "default": "{color.orange.600}",
+          "dark": "{color.orange.300}"
+        },
+        "$type": "color",
+        "$description": "Used for text that requires caution or careful attention."
+      },
       "danger": {
         "$value": {
           "default": "{color.red.600}",