@gitlab/ui 95.5.1 → 96.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "95.5.1",
+  "version": "96.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -54,10 +54,14 @@ $toggle-height: 2.5 * $grid-size;
   }
 }
 
+.gl-description-label {
+  @apply gl-text-subtle;
+}
+
 .gl-help-label {
   @apply gl-mt-3;
-  @apply gl-text-gray-500;
   @apply gl-font-normal;
+  @apply gl-text-subtle;
 }
 
 .gl-toggle-label-inline {
@@ -78,6 +82,7 @@ $toggle-height: 2.5 * $grid-size;
 
 .gl-toggle-label {
   @apply gl-font-bold;
+  @apply gl-text-strong;
 }
 
 .gl-toggle {
@@ -86,7 +91,8 @@ $toggle-height: 2.5 * $grid-size;
   @apply gl-justify-center;
   @apply gl-border-0;
   @apply gl-cursor-pointer;
-  @apply gl-bg-gray-600;
+  color: var(--gl-toggle-switch-icon-color-unchecked-default);
+  background-color: var(--gl-action-strong-neutral-background-color-default);
   position: relative;
   width: $toggle-width;
   height: $toggle-height;
@@ -102,11 +108,19 @@ $toggle-height: 2.5 * $grid-size;
     @apply gl-bg-transparent;
   }
 
-  &:hover,
-  &:active,
-  &:focus,
-  &:focus:active {
-    @apply gl-bg-gray-700;
+  &:hover {
+    color: var(--gl-toggle-switch-icon-color-unchecked-hover);
+    background-color: var(--gl-action-strong-neutral-background-color-hover);
+  }
+
+  &:focus {
+    color: var(--gl-toggle-switch-icon-color-unchecked-focus);
+    background-color: var(--gl-action-strong-neutral-background-color-focus);
+  }
+
+  &:active {
+    color: var(--gl-toggle-switch-icon-color-unchecked-active);
+    background-color: var(--gl-action-strong-neutral-background-color-active);
   }
 
   &:active,
@@ -121,7 +135,6 @@ $toggle-height: 2.5 * $grid-size;
 
   .toggle-icon {
     @apply gl-rounded-full;
-    @apply gl-bg-white;
     position: absolute;
     @apply gl-inline-flex;
     @apply gl-items-center;
@@ -130,30 +143,60 @@ $toggle-height: 2.5 * $grid-size;
     @apply gl-transition-all;
     @apply gl-justify-center;
     @apply gl-p-1;
+    background-color: var(--gl-action-strong-neutral-foreground-color-default);
+
+    &:hover {
+      background-color: var(--gl-action-strong-neutral-foreground-color-hover);
+    }
+
+    &:focus {
+      background-color: var(--gl-action-strong-neutral-foreground-color-focus);
+    }
+
+    &:active {
+      background-color: var(--gl-action-strong-neutral-foreground-color-active);
+    }
 
     > svg {
       @apply gl-w-4;
       @apply gl-h-4;
-      @apply gl-fill-gray-600;
       @apply gl-align-baseline;
     }
   }
 
   &.is-checked {
-    @apply gl-bg-blue-500;
+    color: var(--gl-toggle-switch-icon-color-checked-default);
+    background-color: var(--gl-action-strong-confirm-background-color-default);
 
-    &:hover,
-    &:active,
-    &:focus,
-    &:focus:active {
-      @apply gl-bg-blue-600;
+    &:hover {
+      color: var(--gl-toggle-switch-icon-color-checked-hover);
+      background-color: var(--gl-action-strong-confirm-background-color-hover);
+    }
+
+    &:focus {
+      color: var(--gl-toggle-switch-icon-color-checked-focus);
+      background-color: var(--gl-action-strong-confirm-background-color-focus);
+    }
+
+    &:active {
+      color: var(--gl-toggle-switch-icon-color-checked-active);
+      background-color: var(--gl-action-strong-confirm-background-color-active);
     }
 
     .toggle-icon {
       transform: translateX($toggle-translate-width);
+      background-color: var(--gl-action-strong-confirm-foreground-color-default);
+
+      &:hover {
+        background-color: var(--gl-action-strong-confirm-foreground-color-hover);
+      }
+
+      &:focus {
+        background-color: var(--gl-action-strong-confirm-foreground-color-focus);
+      }
 
-      > svg {
-        @apply gl-fill-blue-500;
+      &:active {
+        background-color: var(--gl-action-strong-confirm-foreground-color-active);
       }
     }
   }

package/src/components/experimental/duo/chat/constants.js

@@ -1,5 +1,4 @@
 export const CHAT_RESET_MESSAGE = '/reset';
-export const CHAT_CLEAN_MESSAGE = '/clean';
 export const CHAT_CLEAR_MESSAGE = '/clear';
 export const CHAT_INCLUDE_MESSAGE = '/include';
 

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

@@ -17,7 +17,6 @@ import GlDuoChatLoader from './components/duo_chat_loader/duo_chat_loader.vue';
 import GlDuoChatPredefinedPrompts from './components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue';
 import GlDuoChatConversation from './components/duo_chat_conversation/duo_chat_conversation.vue';
 import {
-  CHAT_CLEAN_MESSAGE,
   CHAT_RESET_MESSAGE,
   CHAT_CLEAR_MESSAGE,
   CHAT_INCLUDE_MESSAGE,
@@ -393,11 +392,7 @@ export default {
           return;
         }
 
-        if (
-          ![CHAT_RESET_MESSAGE, CHAT_CLEAN_MESSAGE, CHAT_CLEAR_MESSAGE].includes(
-            this.caseInsensitivePrompt
-          )
-        ) {
+        if (![CHAT_RESET_MESSAGE, CHAT_CLEAR_MESSAGE].includes(this.caseInsensitivePrompt)) {
           this.displaySubmitButton = false;
         }
 

package/src/components/experimental/duo/chat/mock_data.js

@@ -2,8 +2,8 @@ import { setStoryTimeout } from '../../../../utils/test_utils';
 import {
   DOCUMENTATION_SOURCE_TYPES,
   MESSAGE_MODEL_ROLES,
+  CHAT_CLEAR_MESSAGE,
   CHAT_RESET_MESSAGE,
-  CHAT_CLEAN_MESSAGE,
   CHAT_INCLUDE_MESSAGE,
 } from './constants';
 import { getMockContextItems } from './components/duo_chat_context/mock_context_data';
@@ -154,7 +154,7 @@ export const SLASH_COMMANDS = [
     description: 'Reset conversation, ignore the previous messages.',
   },
   {
-    name: CHAT_CLEAN_MESSAGE,
+    name: CHAT_CLEAR_MESSAGE,
     shouldSubmit: true,
     description: 'Delete all messages in this conversation.',
   },