@gitlab/ui 93.0.0 → 93.2.0

package/src/components/base/avatar_link/avatar_link.scss

@@ -1,14 +1,14 @@
 .gl-avatar-link {
-  @include gl-display-inline-flex;
+  @apply gl-inline-flex;
 
   .gl-avatar {
     @include gl-transition-property-border-color;
-    @include gl-transition-duration-slow;
-    @include gl-transition-timing-function-ease;
+    @apply gl-duration-slow;
+    @apply gl-ease-ease;
   }
 
   &:hover {
-    @include gl-text-decoration-none;
+    @apply gl-no-underline;
 
     .gl-avatar {
       outline: 1px solid var(--gl-avatar-border-color-hover);
@@ -16,12 +16,12 @@
 
     .gl-avatar-labeled {
       &-label {
-        @include gl-text-decoration-underline;
+        @apply gl-underline;
         @include gl-text-decoration-color-gray-900;
       }
 
       &-sublabel {
-        @include gl-text-decoration-underline;
+        @apply gl-underline;
         @include gl-text-decoration-color-gray-500;
       }
     }

package/src/components/base/avatars_inline/avatars_inline.scss

@@ -7,7 +7,7 @@
   // Mask size plus border cutout effect
   --mask-cutout: calc(var(--avatar-radius) + 1.5px);
 
-  @include gl-display-inline-flex;
+  @apply gl-inline-flex;
 }
 
 .gl-avatars-inline-sm {
@@ -23,7 +23,7 @@
 }
 
 .gl-avatars-inline-child {
-  @include gl-display-inline-flex;
+  @apply gl-inline-flex;
 
   // Don't include the badge
   &:not(:last-child) {
@@ -39,18 +39,18 @@
   // Remove mask on hovered or focused avatar and bring it forward
   &:not(:last-child):hover,
   &:not(:last-child):focus-within {
-    @include gl-z-index-1;
+    @apply gl-z-1;
     mask: none;
   }
 }
 
 .gl-avatars-inline-badge {
-  @include gl-display-inline-flex;
-  @include gl-align-items-center;
-  @include gl-justify-content-center;
-  @include gl-font-sm;
+  @apply gl-inline-flex;
+  @apply gl-items-center;
+  @apply gl-justify-center;
+  @apply gl-text-sm;
   @apply gl-px-2;
-  @include gl-line-height-normal;
+  @apply gl-leading-normal;
   @include gl-rounded-pill;
   background-color: var(--gl-status-neutral-background-color);
   color: var(--gl-status-neutral-text-color);
@@ -58,7 +58,7 @@
   min-width: var(--avatar-size);
 
   &.lg {
-    @include gl-font-base;
+    @apply gl-text-base;
     @include gl-rounded-6;
   }
 }

package/src/components/base/badge/badge.scss

@@ -33,7 +33,7 @@ $badge-min-width: $gl-spacing-scale-3;
       // Needed to override bootstrap's badge variant background
       background-color: $hover-background-color;
       box-shadow: inset 0 0 0 $gl-border-size-1 $hover-border-color;
-      @include gl-text-decoration-none;
+      @apply gl-no-underline;
 
       .gl-badge-icon {
         color: $hover-icon-color;
@@ -71,9 +71,9 @@ $badge-min-width: $gl-spacing-scale-3;
 /* Basic badge styles */
 
 .gl-badge {
-  @include gl-font-sm;
-  @include gl-font-weight-normal;
-  @include gl-line-height-normal;
+  @apply gl-text-sm;
+  @apply gl-font-normal;
+  @apply gl-leading-normal;
 
   /*
     CSS Grid is used here to deal with 3 cases:
@@ -106,7 +106,7 @@ $badge-min-width: $gl-spacing-scale-3;
   .gl-badge-icon {
     @include gl-h-5;
     @include gl-w-5;
-    @include gl-flex-shrink-0;
+    @apply gl-shrink-0;
     top: auto;
   }
 
@@ -247,5 +247,5 @@ $badge-min-width: $gl-spacing-scale-3;
 
 .gl-new-dropdown-contents .gl-badge,
 .gl-tab-nav-item .gl-badge {
-  @include gl-my-n1;
+  @apply -gl-my-1;
 }

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

@@ -4,7 +4,7 @@
 }
 
 .gl-banner-illustration {
-  @include gl-flex-shrink-0;
+  @apply gl-shrink-0;
   @apply gl-mr-6;
 
   img {

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -2,14 +2,14 @@
 $breadcrumb-max-width: $grid-size * 16;
 
 .gl-breadcrumbs {
-  @include gl-display-flex;
+  @apply gl-flex;
 }
 
 .gl-breadcrumb-list {
   @include gl-bg-transparent;
   @apply gl-p-0;
-  @include gl-align-items-center;
-  @include gl-line-height-normal;
+  @apply gl-items-center;
+  @apply gl-leading-normal;
   @apply gl-m-0;
   @include gl-flex-nowrap;
   @include gl-max-w-full;
@@ -17,9 +17,9 @@ $breadcrumb-max-width: $grid-size * 16;
 
 // bootstrap overrides
 .gl-breadcrumb-item {
-  @include gl-font-sm;
-  @include gl-line-height-normal;
-  @include gl-flex-shrink-0;
+  @apply gl-text-sm;
+  @apply gl-leading-normal;
+  @apply gl-shrink-0;
 
   &:not(:last-child)::after {
     color: var(--gl-breadcrumb-separator-color);
@@ -28,7 +28,7 @@ $breadcrumb-max-width: $grid-size * 16;
   }
 
   > a {
-    @include gl-display-inline-block;
+    @apply gl-inline-block;
     border-radius: $gl-border-radius-base;
     color: var(--gl-text-color-subtle);
     text-decoration-thickness: auto;
@@ -52,5 +52,5 @@ $breadcrumb-max-width: $grid-size * 16;
 
 .gl-breadcrumb-item:last-child > a {
   color: var(--gl-text-color-default);
-  @include gl-font-weight-bold;
+  @apply gl-font-bold;
 }

package/src/components/base/broadcast_message/broadcast_message.scss

@@ -9,11 +9,11 @@
 $gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
 
 .gl-broadcast-message {
-  @include gl-display-flex;
-  @include gl-justify-content-space-between;
-  @include gl-align-items-flex-start;
-  @include gl-font-base;
-  @include gl-line-height-20;
+  @apply gl-flex;
+  @apply gl-justify-between;
+  @apply gl-items-start;
+  @apply gl-text-base;
+  @apply gl-leading-20;
   padding-left: calc(#{$gl-spacing-scale-5} + #{$gl-broadcast-message-padding-x});
   padding-right: calc(#{$gl-spacing-scale-4} + #{$gl-broadcast-message-padding-x});
   @apply gl-py-5;
@@ -108,8 +108,8 @@ $gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
   }
 
   &-content {
-    @include gl-display-flex;
-    @include gl-justify-content-center;
+    @apply gl-flex;
+    @apply gl-justify-center;
   }
 
   &-icon {
@@ -117,7 +117,7 @@ $gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
     line-height: $gl-line-height-16;
 
     > svg {
-      @include gl-vertical-align-bottom;
+      @apply gl-align-bottom;
     }
   }
 
@@ -128,7 +128,7 @@ $gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
   }
 
   &-dismiss {
-    @include gl-my-n2;
+    @apply -gl-my-2;
     @apply gl-ml-5;
     color: inherit !important;
   }

package/src/components/base/button/button.scss

@@ -61,14 +61,14 @@
 
 // low specificity so that display can be overridden to hide buttons
 .gl-button {
-  @include gl-display-inline-flex;
+  @apply gl-inline-flex;
 }
 
 .gl-button:not(.btn-link) {
   &:focus,
   &:active,
   &:focus:active {
-    @include gl-text-decoration-none;
+    @apply gl-no-underline;
   }
 }
 
@@ -79,13 +79,13 @@
   @apply gl-py-3;
   @apply gl-px-4;
   background-color: var(--gl-button-default-primary-background-color-default);
-  @include gl-line-height-normal;
+  @apply gl-leading-normal;
   color: var(--gl-button-default-primary-foreground-color-default);
   @include gl-fill-current-color;
   @include gl-button-border(var(--gl-button-default-primary-border-color-default));
-  @include gl-justify-content-center;
-  @include gl-align-items-center;
-  @include gl-font-base;
+  @apply gl-justify-center;
+  @apply gl-items-center;
+  @apply gl-text-base;
 
   @media (forced-colors: active) {
     border: 1px solid;
@@ -93,8 +93,8 @@
 
   .gl-button-text {
     @include gl-overflow-hidden;
-    @include gl-text-overflow-ellipsis;
-    @include gl-white-space-nowrap;
+    @apply gl-text-ellipsis;
+    @apply gl-whitespace-nowrap;
     // Added to address a FF bug which causes cut off text: https://bugzilla.mozilla.org/show_bug.cgi?id=1406552
     padding-top: 1px;
     padding-bottom: 1px;
@@ -105,7 +105,7 @@
   .gl-button-icon {
     @include gl-h-5;
     @include gl-w-5;
-    @include gl-flex-shrink-0;
+    @apply gl-shrink-0;
     @apply gl-mr-2;
     top: auto;
   }
@@ -113,7 +113,7 @@
   gl-emoji {
     @apply gl-mr-2;
     position: relative;
-    @include gl-font-lg;
+    @apply gl-text-lg;
   }
 
   &.btn-default,
@@ -370,7 +370,7 @@
   &.btn-success-tertiary {
     @include gl-bg-transparent;
     @include gl-text-green-500;
-    @include gl-font-weight-normal;
+    @apply gl-font-normal;
     @include gl-inset-border-1-green-500;
 
     &:hover {
@@ -400,11 +400,11 @@
   &.btn-sm {
     @apply gl-py-2;
     @apply gl-px-3;
-    @include gl-line-height-normal;
-    @include gl-font-base;
+    @apply gl-leading-normal;
+    @apply gl-text-base;
 
     gl-emoji {
-      @include gl-font-sm;
+      @apply gl-text-sm;
     }
   }
 
@@ -442,7 +442,7 @@
 
   &.btn-icon {
     @apply gl-p-3;
-    @include gl-line-height-normal;
+    @apply gl-leading-normal;
 
     .gl-button-icon {
       @apply gl-mr-0;
@@ -477,8 +477,8 @@
   &.btn-link {
     @include gl-bg-transparent;
     @apply gl-border-0;
-    @include gl-font-base;
-    @include gl-line-height-normal;
+    @apply gl-text-base;
+    @apply gl-leading-normal;
     color: var(--gl-button-link-text-color-default);
     @apply gl-py-0;
     @apply gl-px-0;
@@ -491,7 +491,7 @@
 
     &:active {
       color: var(--gl-button-link-text-color-active);
-      @include gl-text-decoration-underline;
+      @apply gl-underline;
     }
 
     &:active,

package/src/components/base/card/card.scss

@@ -2,11 +2,11 @@
   background-color: var(--gl-background-color-default);
   @apply gl-border-solid;
   @apply gl-rounded-base;
-  @include gl-display-flex;
-  @include gl-flex-direction-column;
-  @include gl-overflow-wrap-break;
+  @apply gl-flex;
+  @apply gl-flex-col;
+  @apply gl-break-words;
   position: relative;
-  @include gl-font-base;
+  @apply gl-text-base;
 }
 
 .gl-card,

package/src/components/base/datepicker/datepicker.scss

@@ -20,14 +20,14 @@ $pd-week-color: var(--gl-text-color-subtle);
 @import 'pikaday/scss/pikaday';
 
 .gl-datepicker-actions {
-  @include gl-font-sm;
+  @apply gl-text-sm;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
-  @include gl-display-flex;
-  @include gl-justify-content-center;
-  @include gl-align-items-center;
+  @apply gl-flex;
+  @apply gl-justify-center;
+  @apply gl-items-center;
   @include gl-pointer-events-none;
   @apply gl-px-2;
 
@@ -60,7 +60,7 @@ $pd-week-color: var(--gl-text-color-subtle);
   }
 
   .pika-title {
-    @include gl-line-height-normal;
+    @apply gl-leading-normal;
     @apply gl-mb-5;
     @include gl-h-5;
   }
@@ -152,7 +152,7 @@ $pd-week-color: var(--gl-text-color-subtle);
 
   .pika-label {
     @apply gl-rounded-small;
-    @include gl-font-base;
+    @apply gl-text-base;
     @apply gl-py-0;
 
     background-color: var(--gl-action-neutral-background-color-default);
@@ -177,12 +177,12 @@ $pd-week-color: var(--gl-text-color-subtle);
 
   th {
     @apply gl-pb-3;
-    @include gl-font-weight-bold;
-    @include gl-line-height-normal;
+    @apply gl-font-bold;
+    @apply gl-leading-normal;
   }
 
   abbr[title] {
-    @include gl-text-decoration-none;
+    @apply gl-no-underline;
     @include gl-cursor-default;
   }
 
@@ -191,9 +191,9 @@ $pd-week-color: var(--gl-text-color-subtle);
     @include gl-shadow-none;
     @apply gl-py-3;
     @include gl-text-center;
-    @include gl-line-height-normal;
+    @apply gl-leading-normal;
     @include gl-w-7;
-    @include gl-font-base;
+    @apply gl-text-base;
 
     &:hover {
       box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-hover);
@@ -205,11 +205,11 @@ $pd-week-color: var(--gl-text-color-subtle);
   }
 
   .is-today > .pika-button {
-    @include gl-font-weight-bold;
+    @apply gl-font-bold;
   }
 
   .is-selected > .pika-button {
-    @include gl-font-weight-normal;
+    @apply gl-font-normal;
 
     &:hover {
       background-color: var(--gl-control-background-color-selected-hover);
@@ -219,7 +219,7 @@ $pd-week-color: var(--gl-text-color-subtle);
   }
 
   .is-selected.is-today > .pika-button {
-    @include gl-font-weight-bold;
+    @apply gl-font-bold;
   }
 
   .is-disabled {

package/src/components/base/datepicker/datepicker.vue

@@ -224,6 +224,7 @@ export default {
         'gl-datepicker',
         'd-inline-block',
         'gl-w-full',
+        // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
         `gl-form-input-${this.computedWidth}`,
       ];
     },

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

@@ -1,18 +1,18 @@
 .gl-daterange-picker {
-  @include gl-line-height-normal;
-  @include gl-font-base;
+  @apply gl-leading-normal;
+  @apply gl-text-base;
   @include gl-font-regular;
 
   label {
-    @include gl-font-weight-bold;
+    @apply gl-font-bold;
     color: var(--gl-text-color-strong);
   }
 
   .gl-daterange-picker-indicator {
-    @include gl-display-flex;
-    @include gl-flex-direction-row;
-    @include gl-align-items-center;
-    @include gl-align-self-end;
+    @apply gl-flex;
+    @apply gl-flex-row;
+    @apply gl-items-center;
+    @apply gl-self-end;
     @include gl-gap-3;
     @include gl-h-7;
     color: var(--gl-text-color-subtle);

package/src/components/base/drawer/drawer.scss

@@ -9,16 +9,16 @@ $gl-drawer-scrim-gradient: linear-gradient(
 .gl-drawer {
   background-color: var(--drawer-variant-bg-color);
   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;
 
   .gl-drawer-header-sticky {
     background-color: var(--drawer-variant-bg-color);
@@ -69,7 +69,7 @@ $gl-drawer-scrim-gradient: linear-gradient(
   &::before {
     background: $gl-drawer-scrim-gradient;
     top: -$gl-border-size-1;
-    @include gl-translate-y-n100;
+    @apply -gl-translate-y-full;
     content: '';
     left: 0;
     position: absolute;
@@ -92,25 +92,25 @@ $gl-drawer-scrim-gradient: linear-gradient(
 
 .gl-drawer-title {
   color: var(--gl-text-color-heading);
-  @include gl-display-flex;
-  @include gl-align-items-center;
-  @include gl-justify-content-space-between;
+  @apply gl-flex;
+  @apply gl-items-center;
+  @apply gl-justify-between;
 
   svg {
     @include gl-w-5;
     @include gl-h-5;
-    @include gl-vertical-align-middle;
+    @apply gl-align-middle;
   }
 }
 
 .gl-drawer-close-button {
-  @include gl-align-self-start;
-  @include gl-bg-none;
+  @apply gl-self-start;
+  @apply gl-bg-transparent;
   @apply gl-border-none;
 }
 
 .gl-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
@@ -149,5 +149,5 @@ $gl-drawer-scrim-gradient: linear-gradient(
 
 .gl-drawer-enter-active,
 .gl-drawer-leave-active {
-  @include gl-transition-medium;
+  @apply gl-transition-all;
 }

package/src/components/base/drawer/drawer.vue

@@ -62,6 +62,7 @@ export default {
       return Boolean(this.$slots.footer);
     },
     variantClass() {
+      // eslint-disable-next-line @gitlab/tailwind -- Not a CSS utility
       return `gl-drawer-${this.variant}`;
     },
   },

package/src/components/base/dropdown/dropdown.scss

@@ -19,8 +19,8 @@
   }
 
   .gl-dropdown-inner {
-    @include gl-display-flex;
-    @include gl-flex-direction-column;
+    @apply gl-flex;
+    @apply gl-flex-col;
     max-height: $gl-max-dropdown-max-height;
 
     > :first-child {
@@ -33,17 +33,17 @@
   }
 
   .gl-dropdown-contents {
-    @include gl-flex-grow-1;
+    @apply gl-grow;
     overflow-y: auto;
   }
 
   .gl-dropdown-header-top {
     @apply gl-border-1 gl-border-b-solid gl-border-gray-200;
-    @include gl-display-flex;
-    @include gl-font-base;
-    @include gl-font-weight-bold;
-    @include gl-justify-content-center;
-    @include gl-line-height-normal;
+    @apply gl-flex;
+    @apply gl-text-base;
+    @apply gl-font-bold;
+    @apply gl-justify-center;
+    @apply gl-leading-normal;
     @apply gl-m-0;
     @apply gl-mb-3;
     @apply gl-pb-3;
@@ -62,7 +62,7 @@
   .dropdown-toggle {
     // Remove bootstrap's dropdown caret
     &::after {
-      @include gl-display-none;
+      @apply gl-hidden;
     }
 
     &.gl-button,
@@ -88,7 +88,7 @@
     &::after {
       @apply gl-border-0;
       content: '';
-      @include gl-display-block;
+      @apply gl-block;
       @include gl-w-5;
       @include gl-h-5;
       @include gl-bg-current-color;
@@ -123,24 +123,24 @@
 
   .gl-dropdown-toggle {
     &.btn-block {
-      @include gl-justify-content-space-between;
+      @apply gl-justify-between;
     }
 
     .gl-button-text {
-      @include gl-display-inline-flex;
+      @apply gl-inline-flex;
     }
   }
 
   .gl-dropdown-button-text {
     @include gl-mr-auto;
     @include gl-overflow-hidden;
-    @include gl-text-overflow-ellipsis;
+    @apply gl-text-ellipsis;
   }
 
   // Fix rounded split dropdown button: https://gitlab.com/gitlab-org/gitlab-ui/issues/626
   &.dropdown.show .dropdown-toggle-split {
-    @include gl-rounded-top-left-none;
-    @include gl-rounded-bottom-left-none;
+    @apply gl-rounded-tl-none;
+    @apply gl-rounded-bl-none;
   }
 
   // The `&.dropdown` is necessary to strengthen the specificity of these selectors