@gitlab/ui 85.8.0 → 85.10.0

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

@@ -514,6 +514,8 @@ $gl-control-background-color-selected-hover: $gl-color-blue-200; // Used for che
 $gl-control-background-color-selected-default: $gl-color-blue-400; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 $gl-control-background-color-disabled: $gl-color-neutral-950; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-default: $gl-color-neutral-900; // Used for form control (input, radio button, checkbox, textarea) default background.
+$gl-skeleton-loader-shimmer-color: $gl-color-neutral-700; // Used for the animated shimmer effect in a skeleton loader.
+$gl-skeleton-loader-background-color: $gl-color-neutral-800; // Used for the skeleton loader background color.
 $gl-popover-background-color: $gl-color-neutral-900; // Used for the background color of popover.
 $gl-breadcrumb-separator-color: $gl-color-neutral-700; // Used for the breadcrumb level separator.
 $gl-banner-promo-background-color: $gl-color-neutral-900; // Used as background for the default banner type.
@@ -534,6 +536,38 @@ $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disa
 $gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
 $gl-background-color-default: $gl-color-neutral-950; // Used for the default background color.
+$gl-action-confirm-icon-color-strong: $gl-color-neutral-900; // Used for the icon on a solid, strong confirm (positive) action background.
+$gl-action-confirm-icon-color-active: $gl-color-blue-50; // Used for the icon of a confirm (positive) action in the active state.
+$gl-action-confirm-icon-color-focus: $gl-color-blue-200; // Used for the icon of a confirm (positive) action in the focus state.
+$gl-action-confirm-icon-color-hover: $gl-color-blue-200; // Used for the icon of a confirm (positive) action in the hover state.
+$gl-action-confirm-icon-color-default: $gl-color-blue-400; // Used for the icon of a confirm (positive) action in the default state.
+$gl-action-confirm-text-color-strong: $gl-color-neutral-900; // Used for the text on a solid, strong confirm (positive) action background.
+$gl-action-confirm-text-color-active: $gl-color-blue-50; // Used for the text of a confirm (positive) action in the active state.
+$gl-action-confirm-text-color-focus: $gl-color-blue-200; // Used for the text of a confirm (positive) action in the focus state.
+$gl-action-confirm-text-color-hover: $gl-color-blue-200; // Used for the text of a confirm (positive) action in the hover state.
+$gl-action-confirm-text-color-default: $gl-color-blue-400; // Used for the text of a confirm (positive) action in the default state.
+$gl-action-confirm-border-color-strong-selected: $gl-color-blue-300; // Used for the border of a solid, strong confirm (positive) action when in a selected or current state.
+$gl-action-confirm-border-color-strong-active: $gl-color-blue-50; // Used for the border of a solid, strong confirm (positive) action in the active state.
+$gl-action-confirm-border-color-strong-focus: $gl-color-blue-100; // Used for the border of a solid, strong confirm (positive) action in the focus state.
+$gl-action-confirm-border-color-strong-hover: $gl-color-blue-100; // Used for the border of a solid, strong confirm (positive) action in the hover state.
+$gl-action-confirm-border-color-strong-default: $gl-color-blue-300; // Used for the border of a solid, strong confirm (positive) action in the default state.
+$gl-action-confirm-border-color-active: $gl-color-blue-50; // Used for the border of an outlined confirm (positive) action in the active state.
+$gl-action-confirm-border-color-focus: $gl-color-blue-200; // Used for the border of an outlined confirm (positive) action in the focus state.
+$gl-action-confirm-border-color-hover: $gl-color-blue-200; // Used for the border of an outlined confirm (positive) action in the hover state.
+$gl-action-confirm-border-color-default: $gl-color-blue-400; // Used for the border of an outlined confirm (positive) action in the default state.
+$gl-action-confirm-background-color-strong-selected: $gl-color-blue-400; // Used for the background of a solid, strong confirm (positive) action when in a selected or current state.
+$gl-action-confirm-background-color-strong-active: $gl-color-blue-200; // Used for the background of a solid, strong confirm (positive) action in the active state.
+$gl-action-confirm-background-color-strong-focus: $gl-color-blue-300; // Used for the background of a solid, strong confirm (positive) action in the focus state.
+$gl-action-confirm-background-color-strong-hover: $gl-color-blue-300; // Used for the background of a solid, strong confirm (positive) action in the hover state.
+$gl-action-confirm-background-color-strong-default: $gl-color-blue-400; // Used for the background of a solid, strong confirm (positive) action in the default state.
+$gl-action-confirm-background-color-subtle-active: $gl-color-blue-800; // Used for the background of a borderless, subtle confirm (positive) action in the active state.
+$gl-action-confirm-background-color-subtle-focus: $gl-color-blue-900; // Used for the background of a borderless, subtle confirm (positive) action in the focus state.
+$gl-action-confirm-background-color-subtle-hover: $gl-color-blue-900; // Used for the background of a borderless, subtle confirm (positive) action in the hover state.
+$gl-action-confirm-background-color-subtle-default: $gl-color-alpha-0; // Used for the background of a borderless, subtle confirm (positive) action in the default state.
+$gl-action-confirm-background-color-active: $gl-color-blue-800; // Used for the background of an outlined confirm (positive) action in the active state.
+$gl-action-confirm-background-color-focus: $gl-color-blue-900; // Used for the background of an outlined confirm (positive) action in the focus state.
+$gl-action-confirm-background-color-hover: $gl-color-blue-900; // Used for the background of an outlined confirm (positive) action in the hover state.
+$gl-action-confirm-background-color-default: $gl-color-neutral-900; // Used for the background of an outlined confirm (positive) action in the default state.
 $gl-action-neutral-icon-color-strong: $gl-color-neutral-900; // Used for the icon on a solid, strong neutral action background.
 $gl-action-neutral-icon-color-active: $gl-color-neutral-50; // Used for the icon of outlined and borderless neutral actions in the active state.
 $gl-action-neutral-icon-color-focus: $gl-color-neutral-200; // Used for the icon of outlined and borderless neutral actions in the focus state.

package/dist/tokens/scss/_tokens.scss

@@ -514,6 +514,8 @@ $gl-control-background-color-selected-hover: $gl-color-blue-700; // Used for che
 $gl-control-background-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
 $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-skeleton-loader-shimmer-color: $gl-color-neutral-50; // Used for the animated shimmer effect in a skeleton loader.
+$gl-skeleton-loader-background-color: $gl-color-neutral-100; // Used for the skeleton loader background color.
 $gl-popover-background-color: $gl-color-neutral-0; // Used for the background color of popover.
 $gl-breadcrumb-separator-color: $gl-color-neutral-200; // Used for the breadcrumb level separator.
 $gl-banner-promo-background-color: $gl-color-neutral-10; // Used as background for the default banner type.
@@ -534,6 +536,38 @@ $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disab
 $gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-10; // Used to slightly differentiate the background from the default.
 $gl-background-color-default: $gl-color-neutral-0; // Used for the default background color.
+$gl-action-confirm-icon-color-strong: $gl-color-neutral-0; // Used for the icon on a solid, strong confirm (positive) action background.
+$gl-action-confirm-icon-color-active: $gl-color-blue-900; // Used for the icon of a confirm (positive) action in the active state.
+$gl-action-confirm-icon-color-focus: $gl-color-blue-700; // Used for the icon of a confirm (positive) action in the focus state.
+$gl-action-confirm-icon-color-hover: $gl-color-blue-700; // Used for the icon of a confirm (positive) action in the hover state.
+$gl-action-confirm-icon-color-default: $gl-color-blue-500; // Used for the icon of a confirm (positive) action in the default state.
+$gl-action-confirm-text-color-strong: $gl-color-neutral-0; // Used for the text on a solid, strong confirm (positive) action background.
+$gl-action-confirm-text-color-active: $gl-color-blue-900; // Used for the text of a confirm (positive) action in the active state.
+$gl-action-confirm-text-color-focus: $gl-color-blue-700; // Used for the text of a confirm (positive) action in the focus state.
+$gl-action-confirm-text-color-hover: $gl-color-blue-700; // Used for the text of a confirm (positive) action in the hover state.
+$gl-action-confirm-text-color-default: $gl-color-blue-500; // Used for the text of a confirm (positive) action in the default state.
+$gl-action-confirm-border-color-strong-selected: $gl-color-blue-600; // Used for the border of a solid, strong confirm (positive) action when in a selected or current state.
+$gl-action-confirm-border-color-strong-active: $gl-color-blue-900; // Used for the border of a solid, strong confirm (positive) action in the active state.
+$gl-action-confirm-border-color-strong-focus: $gl-color-blue-800; // Used for the border of a solid, strong confirm (positive) action in the focus state.
+$gl-action-confirm-border-color-strong-hover: $gl-color-blue-800; // Used for the border of a solid, strong confirm (positive) action in the hover state.
+$gl-action-confirm-border-color-strong-default: $gl-color-blue-600; // Used for the border of a solid, strong confirm (positive) action in the default state.
+$gl-action-confirm-border-color-active: $gl-color-blue-900; // Used for the border of an outlined confirm (positive) action in the active state.
+$gl-action-confirm-border-color-focus: $gl-color-blue-700; // Used for the border of an outlined confirm (positive) action in the focus state.
+$gl-action-confirm-border-color-hover: $gl-color-blue-700; // Used for the border of an outlined confirm (positive) action in the hover state.
+$gl-action-confirm-border-color-default: $gl-color-blue-500; // Used for the border of an outlined confirm (positive) action in the default state.
+$gl-action-confirm-background-color-strong-selected: $gl-color-blue-500; // Used for the background of a solid, strong confirm (positive) action when in a selected or current state.
+$gl-action-confirm-background-color-strong-active: $gl-color-blue-700; // Used for the background of a solid, strong confirm (positive) action in the active state.
+$gl-action-confirm-background-color-strong-focus: $gl-color-blue-600; // Used for the background of a solid, strong confirm (positive) action in the focus state.
+$gl-action-confirm-background-color-strong-hover: $gl-color-blue-600; // Used for the background of a solid, strong confirm (positive) action in the hover state.
+$gl-action-confirm-background-color-strong-default: $gl-color-blue-500; // Used for the background of a solid, strong confirm (positive) action in the default state.
+$gl-action-confirm-background-color-subtle-active: $gl-color-blue-100; // Used for the background of a borderless, subtle confirm (positive) action in the active state.
+$gl-action-confirm-background-color-subtle-focus: $gl-color-blue-50; // Used for the background of a borderless, subtle confirm (positive) action in the focus state.
+$gl-action-confirm-background-color-subtle-hover: $gl-color-blue-50; // Used for the background of a borderless, subtle confirm (positive) action in the hover state.
+$gl-action-confirm-background-color-subtle-default: $gl-color-alpha-0; // Used for the background of a borderless, subtle confirm (positive) action in the default state.
+$gl-action-confirm-background-color-active: $gl-color-blue-100; // Used for the background of an outlined confirm (positive) action in the active state.
+$gl-action-confirm-background-color-focus: $gl-color-blue-50; // Used for the background of an outlined confirm (positive) action in the focus state.
+$gl-action-confirm-background-color-hover: $gl-color-blue-50; // Used for the background of an outlined confirm (positive) action in the hover state.
+$gl-action-confirm-background-color-default: $gl-color-neutral-0; // Used for the background of an outlined confirm (positive) action in the default state.
 $gl-action-neutral-icon-color-strong: $gl-color-neutral-0; // Used for the icon on a solid, strong neutral action background.
 $gl-action-neutral-icon-color-active: $gl-color-neutral-900; // Used for the icon of outlined and borderless neutral actions in the active state.
 $gl-action-neutral-icon-color-focus: $gl-color-neutral-700; // Used for the icon of outlined and borderless neutral actions in the focus state.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -38,6 +38,38 @@ $gl-action-neutral-icon-color-hover: var(--gl-action-neutral-icon-color-hover);
 $gl-action-neutral-icon-color-focus: var(--gl-action-neutral-icon-color-focus);
 $gl-action-neutral-icon-color-active: var(--gl-action-neutral-icon-color-active);
 $gl-action-neutral-icon-color-strong: var(--gl-action-neutral-icon-color-strong);
+$gl-action-confirm-background-color-default: var(--gl-action-confirm-background-color-default);
+$gl-action-confirm-background-color-hover: var(--gl-action-confirm-background-color-hover);
+$gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-focus);
+$gl-action-confirm-background-color-active: var(--gl-action-confirm-background-color-active);
+$gl-action-confirm-background-color-subtle-default: var(--gl-action-confirm-background-color-subtle-default);
+$gl-action-confirm-background-color-subtle-hover: var(--gl-action-confirm-background-color-subtle-hover);
+$gl-action-confirm-background-color-subtle-focus: var(--gl-action-confirm-background-color-subtle-focus);
+$gl-action-confirm-background-color-subtle-active: var(--gl-action-confirm-background-color-subtle-active);
+$gl-action-confirm-background-color-strong-default: var(--gl-action-confirm-background-color-strong-default);
+$gl-action-confirm-background-color-strong-hover: var(--gl-action-confirm-background-color-strong-hover);
+$gl-action-confirm-background-color-strong-focus: var(--gl-action-confirm-background-color-strong-focus);
+$gl-action-confirm-background-color-strong-active: var(--gl-action-confirm-background-color-strong-active);
+$gl-action-confirm-background-color-strong-selected: var(--gl-action-confirm-background-color-strong-selected);
+$gl-action-confirm-border-color-default: var(--gl-action-confirm-border-color-default);
+$gl-action-confirm-border-color-hover: var(--gl-action-confirm-border-color-hover);
+$gl-action-confirm-border-color-focus: var(--gl-action-confirm-border-color-focus);
+$gl-action-confirm-border-color-active: var(--gl-action-confirm-border-color-active);
+$gl-action-confirm-border-color-strong-default: var(--gl-action-confirm-border-color-strong-default);
+$gl-action-confirm-border-color-strong-hover: var(--gl-action-confirm-border-color-strong-hover);
+$gl-action-confirm-border-color-strong-focus: var(--gl-action-confirm-border-color-strong-focus);
+$gl-action-confirm-border-color-strong-active: var(--gl-action-confirm-border-color-strong-active);
+$gl-action-confirm-border-color-strong-selected: var(--gl-action-confirm-border-color-strong-selected);
+$gl-action-confirm-text-color-default: var(--gl-action-confirm-text-color-default);
+$gl-action-confirm-text-color-hover: var(--gl-action-confirm-text-color-hover);
+$gl-action-confirm-text-color-focus: var(--gl-action-confirm-text-color-focus);
+$gl-action-confirm-text-color-active: var(--gl-action-confirm-text-color-active);
+$gl-action-confirm-text-color-strong: var(--gl-action-confirm-text-color-strong);
+$gl-action-confirm-icon-color-default: var(--gl-action-confirm-icon-color-default);
+$gl-action-confirm-icon-color-hover: var(--gl-action-confirm-icon-color-hover);
+$gl-action-confirm-icon-color-focus: var(--gl-action-confirm-icon-color-focus);
+$gl-action-confirm-icon-color-active: var(--gl-action-confirm-icon-color-active);
+$gl-action-confirm-icon-color-strong: var(--gl-action-confirm-icon-color-strong);
 $gl-background-color-default: var(--gl-background-color-default);
 $gl-background-color-subtle: var(--gl-background-color-subtle);
 $gl-background-color-strong: var(--gl-background-color-strong);
@@ -433,6 +465,8 @@ $gl-banner-intro-border-color: var(--gl-banner-intro-border-color);
 $gl-banner-promo-background-color: var(--gl-banner-promo-background-color);
 $gl-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);
 $gl-popover-background-color: var(--gl-popover-background-color);
+$gl-skeleton-loader-background-color: var(--gl-skeleton-loader-background-color);
+$gl-skeleton-loader-shimmer-color: var(--gl-skeleton-loader-shimmer-color);
 $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-selected-default: var(--gl-control-background-color-selected-default);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "85.8.0",
+  "version": "85.10.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -173,7 +173,8 @@
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",
     "postcss-scss": "4.0.4",
-    "prettier": "2.6.2",
+    "prettier": "3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rollup": "^2.53.1",
@@ -191,8 +192,8 @@
     "storybook-dark-mode": "4.0.2",
     "style-dictionary": "^3.8.0",
     "stylelint": "15.10.2",
-    "tailwind-config-viewer": "1.7.3",
-    "tailwindcss": "3.4.1",
+    "tailwind-config-viewer": "2.0.4",
+    "tailwindcss": "3.4.4",
     "vue": "2.7.16",
     "vue-loader": "^15.8.3",
     "vue-loader-vue3": "npm:vue-loader@17",

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

@@ -370,7 +370,7 @@ export default {
 <template>
   <div :class="datepickerClasses">
     <div v-if="showDefaultField" class="gl-display-flex gl-align-items-start gl-gap-3">
-      <div class="gl-relative gl-display-flex gl-flex-grow-1">
+      <div class="gl-display-flex gl-flex-grow-1 gl-relative">
         <!--
       @slot (optional) Input to display and bind the datepicker to. Defaults to `<gl-form-input />`
       @binding {string} formattedDate

package/src/components/base/form/form_fields/validators.js

@@ -14,7 +14,7 @@ const EMOJI_REGEX = emojiRegex();
 // // Bad
 // export const projectPathIsUnique = ...
 // ```
-export const factory = (failMessage, isValid) => (val) => !isValid(val) ? failMessage : '';
+export const factory = (failMessage, isValid) => (val) => (!isValid(val) ? failMessage : '');
 
 /**
  * Validator function to check if a string is present and non-empty.

package/src/components/base/form/form_input/form_input.scss

@@ -1,48 +1,53 @@
 .gl-form-input,
 .gl-form-input.form-control {
-  @include gl-bg-white;
   @include gl-font-regular;
   @include gl-font-base;
   @include gl-line-height-normal;
   @include gl-py-3;
   @include gl-px-4;
   @include gl-h-auto;
-  @include gl-text-gray-900;
-  @include gl-inset-border-1-gray-400;
   @include gl-border-none;
   @include form-control-focus($ignore-warning: true);
   appearance: none;
+  background: var(--gl-control-background-color-default);
+  color: var(--gl-text-color-default);
+  box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-default);
 
   @media (forced-colors: active) {
     border: 1px solid;
   }
 
+  &:hover {
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-hover);
+  }
+
   &:disabled,
   &:not(.form-control-plaintext):not([type='color']):read-only {
-    @include gl-bg-gray-10;
-    @include gl-inset-border-1-gray-100;
+    background: var(--gl-control-background-color-disabled);
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-disabled);
   }
 
   &:disabled {
     @include gl-cursor-not-allowed;
-    @include gl-text-gray-500;
+    color: var(--gl-text-color-disabled);
   }
 
   &:not(.form-control-plaintext):focus {
-    @include gl-focus($color: $gray-900);
-    @include gl-text-gray-900;
+    @include gl-focus($color: var(--gl-control-border-color-focus));
+    background: var(--gl-control-background-color-default);
+    color: var(--gl-text-color-default);
   }
 
   &.is-invalid {
-    @include gl-inset-border-1-red-500;
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-error);
 
     &:focus {
-      @include gl-focus($color: $red-500);
+      @include gl-focus($color: var(--gl-control-border-color-error));
     }
   }
 
   &::placeholder {
-    @include gl-text-gray-400;
+    color: var(--gl-control-placeholder-color);
   }
 
   &.form-control-plaintext {

package/src/components/base/popover/popover.vue

@@ -100,7 +100,7 @@ export default {
       </slot>
       <div v-if="showCloseButton" class="gl-mt-n2 gl-mr-n3 gl-ml-3 gl-h-0">
         <close-button
-          :class="{ 'gl-float-right gl-mt-2': !hasTitle }"
+          :class="{ 'gl-mt-2 gl-float-right': !hasTitle }"
           data-testid="close-button"
           @click="close"
         />

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -238,7 +238,7 @@ export default {
             </template>
           </gl-disclosure-dropdown-item>
         </template>
-        <div v-else class="gl-font-sm gl-text-secondary gl-py-2 gl-px-4">
+        <div v-else class="gl-font-sm gl-py-2 gl-px-4 gl-text-secondary">
           {{ noRecentSearchesText }}
         </div>
 

package/src/components/base/skeleton_loader/skeleton_loader.scss

@@ -8,10 +8,10 @@
   }
 
   .primary-stop {
-    @include gl-stop-color-gray-100;
+    stop-color: var(--gl-skeleton-loader-background-color);
   }
 
   .secondary-stop {
-    @include gl-stop-color-gray-50;
+    stop-color: var(--gl-skeleton-loader-shimmer-color);
   }
 }

package/src/components/base/table/table.vue

@@ -112,7 +112,7 @@ export default {
         <slot :name="headSlotName" v-bind="scope"
           ><span>{{ scope.label }}</span></slot
         ><template v-if="isSortable(scope)">
-          <div class="gl-ml-2 gl-w-5 gl-text-gray-900 gl-display-flex gl-justify-content-center">
+          <div class="gl-ml-2 gl-w-5 gl-display-flex gl-justify-content-center gl-text-gray-900">
             <span
               name="sort-icon"
               data-testid="sort-icon"

package/src/components/base/token_selector/token_selector.vue

@@ -415,7 +415,7 @@ export default {
           <input
             ref="textInput"
             type="text"
-            class="gl-token-selector-input gl-bg-none gl-font-regular gl-font-base gl-line-height-normal gl-px-1 gl-h-auto gl-text-gray-900 gl-border-none gl-outline-none gl-flex-grow-1 gl-w-40p"
+            class="gl-token-selector-input gl-bg-none gl-font-regular gl-font-base gl-line-height-normal gl-px-1 gl-h-auto gl-border-none gl-outline-none gl-flex-grow-1 gl-w-40p gl-text-gray-900"
             :value="inputText"
             :autocomplete="autocomplete"
             :aria-labelledby="ariaLabelledby"

package/src/components/charts/single_stat/single_stat.vue

@@ -121,7 +121,7 @@ export default {
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <div class="gl-display-flex gl-align-items-center gl-text-gray-700 gl-mb-2">
+    <div class="gl-display-flex gl-align-items-center gl-mb-2 gl-text-gray-700">
       <gl-icon
         v-if="showTitleIcon"
         :name="titleIcon"

package/src/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.vue

@@ -54,7 +54,7 @@ export default {
   <div class="gl-display-flex gl-flex-direction-column gl-justify-content-end">
     <div
       v-if="showDelimiter"
-      class="gl-my-5 gl-display-flex gl-align-items-center gl-text-gray-500 gl-gap-4"
+      class="gl-my-5 gl-display-flex gl-align-items-center gl-gap-4 gl-text-gray-500"
       data-testid="conversation-delimiter"
     >
       <hr class="gl-flex-grow-1" />

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

@@ -76,7 +76,7 @@ export default {
           <transition-group
             ref="transition"
             name="text"
-            class="transition gl-display-inline-block gl-relative gl-vertical-align-bottom"
+            class="transition gl-display-inline-block gl-vertical-align-bottom gl-relative"
             @after-leave="computeTransitionWidth"
           >
             <span

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

@@ -187,8 +187,8 @@ export default {
   <div
     class="gl-p-4 gl-mb-4 gl-rounded-lg gl-line-height-20 gl-word-break-word duo-chat-message"
     :class="{
-      'gl-ml-auto gl-bg-blue-100 gl-text-blue-900 gl-rounded-bottom-right-none': isUserMessage,
-      'gl-rounded-bottom-left-none gl-text-gray-900 gl-border-1 gl-border-solid gl-border-gray-50':
+      'gl-ml-auto gl-bg-blue-100 gl-rounded-bottom-right-none gl-text-blue-900': isUserMessage,
+      'gl-rounded-bottom-left-none gl-border-1 gl-border-solid gl-border-gray-50 gl-text-gray-900':
         isAssistantMessage,
       'gl-bg-white': isAssistantMessage && !error,
       'gl-bg-red-50 gl-border-none!': error,
@@ -199,7 +199,7 @@ export default {
       :aria-label="$options.i18n.MESSAGE_ERROR"
       name="status_warning_borderless"
       :size="16"
-      class="gl-text-red-600 gl-border gl-border-red-500 gl-rounded-full gl-mr-3 gl-flex-shrink-0 error-icon"
+      class="gl-border gl-border-red-500 gl-rounded-full gl-mr-3 gl-flex-shrink-0 error-icon gl-text-red-600"
       data-testid="error"
     />
     <div ref="content-wrapper" :class="{ 'has-error': error }">

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

@@ -409,7 +409,7 @@ export default {
   <aside
     v-if="!isHidden"
     id="chat-component"
-    class="markdown-code-block duo-chat-drawer gl-max-h-full gl-bottom-0 gl-shadow-none gl-border-l gl-border-t duo-chat"
+    class="markdown-code-block duo-chat-drawer gl-max-h-full gl-shadow-none gl-border-l gl-border-t duo-chat gl-bottom-0"
     role="complementary"
     data-testid="chat-component"
   >
@@ -444,7 +444,7 @@ export default {
         :dismissible="false"
         variant="tip"
         :show-icon="false"
-        class="gl-text-center gl-border-t gl-p-4 gl-text-gray-700 gl-bg-gray-50 legal-warning gl-max-w-full"
+        class="gl-text-center gl-border-t gl-p-4 gl-bg-gray-50 legal-warning gl-max-w-full gl-text-gray-700"
         role="alert"
         data-testid="chat-legal-warning"
         >{{ $options.i18n.CHAT_LEGAL_GENERATED_BY_AI }}</gl-alert
@@ -523,7 +523,7 @@ export default {
             <gl-card
               v-if="shouldShowSlashCommands"
               ref="commands"
-              class="slash-commands !gl-absolute gl-translate-y-n100 gl-list-style-none gl-pl-0 gl-w-full gl-shadow-md"
+              class="slash-commands gl-translate-y-n100 gl-list-style-none gl-pl-0 gl-w-full gl-shadow-md !gl-absolute"
               body-class="gl-p-2!"
             >
               <gl-dropdown-item
@@ -535,7 +535,7 @@ export default {
               >
                 <span class="gl-display-flex gl-justify-content-space-between">
                   <span class="gl-display-block">{{ command.name }}</span>
-                  <small class="gl-text-gray-500 gl-font-style-italic gl-text-right gl-pl-3">{{
+                  <small class="gl-font-style-italic gl-text-right gl-pl-3 gl-text-gray-500">{{
                     command.description
                   }}</small>
                 </span>
@@ -546,7 +546,7 @@ export default {
               ref="prompt"
               v-model="prompt"
               data-testid="chat-prompt-input"
-              class="gl-absolute gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none!"
+              class="gl-h-full! gl-py-4! gl-bg-transparent! gl-rounded-top-right-none gl-rounded-bottom-right-none gl-shadow-none! gl-absolute"
               :class="{ 'gl-text-truncate': !prompt }"
               :placeholder="inputPlaceholder"
               autofocus
@@ -561,7 +561,7 @@ export default {
               icon="paper-airplane"
               category="primary"
               variant="confirm"
-              class="!gl-absolute gl-bottom-2 gl-right-2 gl-rounded-base!"
+              class="gl-rounded-base! !gl-absolute gl-bottom-2 gl-right-2"
               type="submit"
               data-testid="chat-prompt-submit-button"
               :aria-label="$options.i18n.CHAT_SUBMIT_LABEL"
@@ -571,7 +571,7 @@ export default {
               icon="stop"
               category="primary"
               variant="default"
-              class="!gl-absolute gl-bottom-2 gl-right-2 gl-rounded-base!"
+              class="gl-rounded-base! !gl-absolute gl-bottom-2 gl-right-2"
               data-testid="chat-prompt-cancel-button"
               :aria-label="$options.i18n.CHAT_CANCEL_LABEL"
               @click="cancelPrompt"
@@ -579,7 +579,7 @@ export default {
           </template>
         </gl-form-input-group>
         <gl-form-text
-          class="gl-text-gray-400 gl-line-height-20 gl-mt-3"
+          class="gl-line-height-20 gl-mt-3 gl-text-gray-400"
           data-testid="chat-legal-disclaimer"
           >{{ $options.i18n.CHAT_LEGAL_DISCLAIMER }}</gl-form-text
         >