@gitlab/ui 97.0.0 → 97.1.0

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -691,6 +691,7 @@ $gl-toggle-switch-icon-color-checked-hover: var(--gl-toggle-switch-icon-color-ch
 $gl-toggle-switch-icon-color-checked-focus: var(--gl-toggle-switch-icon-color-checked-focus);
 $gl-toggle-switch-icon-color-checked-active: var(--gl-toggle-switch-icon-color-checked-active);
 $gl-toggle-switch-icon-color-disabled: var(--gl-toggle-switch-icon-color-disabled);
+$gl-token-selector-token-container-token-background-color-focus: var(--gl-token-selector-token-container-token-background-color-focus);
 $gl-token-foreground-color: var(--gl-token-foreground-color);
 $gl-token-background-color: var(--gl-token-background-color);
 $gl-control-background-color-default: var(--gl-control-background-color-default);

package/package.json

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

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

@@ -21,8 +21,7 @@
     box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-hover);
   }
 
-  &:read-only,
-  &:not(:disabled):not(.form-control-plaintext):not([type='color']):read-only {
+  &:not(.gl-form-input-not-readonly):not(:disabled):not(.form-control-plaintext):not([type='color']):read-only {
     background: var(--gl-control-background-color-readonly);
     box-shadow: none;
   }

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

@@ -70,12 +70,16 @@ $toggle-height: 2.5 * $grid-size;
   position: relative;
   width: $toggle-width;
   height: $toggle-height;
-  @apply gl-outline-none;
   user-select: none;
+  box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-strong-neutral-border-color-default);
   @apply gl-rounded-pill;
   @apply gl-duration-slow;
   @apply gl-leading-normal;
 
+  @media (forced-colors: active) {
+    border: 1px solid;
+  }
+
   &::selection,
   &::before::selection,
   &::after::selection {
@@ -85,22 +89,22 @@ $toggle-height: 2.5 * $grid-size;
   &:hover {
     color: var(--gl-toggle-switch-icon-color-unchecked-hover);
     background-color: var(--gl-action-strong-neutral-background-color-hover);
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-strong-neutral-border-color-hover);
   }
 
   &:focus {
     color: var(--gl-toggle-switch-icon-color-unchecked-focus);
     background-color: var(--gl-action-strong-neutral-background-color-focus);
+    @include gl-focus($color: var(--gl-action-strong-neutral-border-color-focus), $important: true);
   }
 
   &:active {
     color: var(--gl-toggle-switch-icon-color-unchecked-active);
     background-color: var(--gl-action-strong-neutral-background-color-active);
-  }
-
-  &:active,
-  &:focus,
-  &:focus:active {
-    @apply gl-focus;
+    @include gl-focus(
+      $color: var(--gl-action-strong-neutral-border-color-active),
+      $important: true
+    );
   }
 
   .toggle-loading {
@@ -141,20 +145,30 @@ $toggle-height: 2.5 * $grid-size;
   &.is-checked {
     color: var(--gl-toggle-switch-icon-color-checked-default);
     background-color: var(--gl-action-strong-confirm-background-color-default);
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-strong-confirm-border-color-default);
 
     &:hover {
       color: var(--gl-toggle-switch-icon-color-checked-hover);
       background-color: var(--gl-action-strong-confirm-background-color-hover);
+      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-strong-confirm-border-color-hover);
     }
 
     &:focus {
       color: var(--gl-toggle-switch-icon-color-checked-focus);
       background-color: var(--gl-action-strong-confirm-background-color-focus);
+      @include gl-focus(
+        $color: var(--gl-action-strong-confirm-border-color-focus),
+        $important: true
+      );
     }
 
     &:active {
       color: var(--gl-toggle-switch-icon-color-checked-active);
       background-color: var(--gl-action-strong-confirm-background-color-active);
+      @include gl-focus(
+        $color: var(--gl-action-strong-confirm-border-color-active),
+        $important: true
+      );
     }
 
     .toggle-icon {
@@ -168,10 +182,17 @@ $toggle-height: 2.5 * $grid-size;
     @apply gl-cursor-not-allowed;
     color: var(--gl-action-disabled-background-color);
     background-color: var(--gl-action-disabled-background-color);
+    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-disabled-border-color);
 
     .toggle-icon {
       color: var(--gl-action-disabled-background-color);
       background-color: var(--gl-action-disabled-foreground-color);
     }
+
+    &:active,
+    &:focus,
+    &:focus:active {
+      @include gl-focus($color: var(--gl-action-disabled-border-color), $important: true);
+    }
   }
 }

package/src/components/base/toggle/toggle.vue

@@ -179,6 +179,7 @@ export default {
       }"
       class="gl-toggle gl-shrink-0"
       type="button"
+      :disabled="disabled"
       @click.prevent="toggleFeature"
     >
       <gl-loading-icon v-if="isLoading" color="dark" class="toggle-loading" />

package/src/components/base/token_selector/token_selector.scss

@@ -1,16 +1,21 @@
 // This is overridden in the `gitlab-org/gitlab` codebase so we need to increase specificity using `gl-token-selector`
 .gl-token-selector {
   &.gl-token-selector-focus-glow {
-    @include gl-focus($color: $gray-900, $important: true);
+    @include gl-focus($color: var(--gl-control-border-color-focus), $important: true);
 
     &.is-invalid {
-      @include gl-focus($color: $red-500, $important: true);
+      @include gl-focus($color: var(--gl-control-border-color-error), $important: true);
     }
   }
+
+  &.gl-token-selector-view-only {
+    background: var(--gl-control-background-color-readonly) !important;
+    box-shadow: none !important;
+  }
 }
 
 .gl-token-selector-token-container:focus .gl-token {
-  @apply gl-bg-gray-300;
+  background-color: var(--gl-token-selector-token-container-token-background-color-focus);
 }
 
 .gl-token-selector-input {

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

@@ -187,13 +187,14 @@ export default {
       return false;
     },
     stateClass() {
-      if (this.state === null) {
-        return '!gl-shadow-inner-1-gray-400';
+      switch (this.state) {
+        case true:
+          return 'is-valid';
+        case false:
+          return 'is-invalid';
+        default:
+          return '';
       }
-
-      return this.state
-        ? 'is-valid !gl-shadow-inner-1-gray-400'
-        : 'is-invalid !gl-shadow-inner-1-red-500';
     },
     hasSelectedTokens() {
       return this.selectedTokens.length > 0;
@@ -387,8 +388,15 @@ export default {
   <div>
     <div
       ref="container"
-      class="gl-token-selector gl-form-input form-control form-control-plaintext gl-flex !gl-cursor-text gl-items-center !gl-px-3 !gl-py-2"
-      :class="[inputFocused ? 'gl-token-selector-focus-glow' : '', containerClass, stateClass]"
+      class="gl-token-selector gl-form-input gl-form-input-not-readonly form-control gl-flex !gl-cursor-text gl-items-center !gl-px-3 !gl-py-2"
+      :class="[
+        {
+          'gl-token-selector-focus-glow': inputFocused,
+          'gl-token-selector-view-only': viewOnly,
+        },
+        containerClass,
+        stateClass,
+      ]"
       @click="handleContainerClick"
     >
       <!-- @slot Optional content to display a placeholder when tokens list is empty
@@ -417,7 +425,7 @@ export default {
           <input
             ref="textInput"
             type="text"
-            class="gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-px-1 gl-font-regular gl-text-base gl-leading-normal gl-text-gray-900 gl-outline-none"
+            class="gl-token-selector-input gl-h-auto gl-w-4/10 gl-grow gl-border-none gl-bg-transparent gl-px-1 gl-font-regular gl-text-base gl-leading-normal gl-text-default gl-outline-none"
             :value="inputText"
             :autocomplete="autocomplete"
             :aria-labelledby="ariaLabelledby"

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

@@ -498,6 +498,7 @@
   --gl-control-background-color-disabled: var(--gl-color-neutral-10); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-default: var(--gl-color-neutral-0); /* Used for form control (input, radio button, checkbox, textarea) default background. */
   --gl-token-background-color: var(--gl-color-neutral-100); /* Used for the token background color. */
+  --gl-token-selector-token-container-token-background-color-focus: var(--gl-color-neutral-300); /* Used for the background color of a token in a token-selector when it's token-container is in the focus state. */
   --gl-tab-selected-indicator-color-default: var(--gl-color-blue-500); /* Used for the selected indicator of a tab. */
   --gl-spinner-segment-color-light: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner on a dark background. */
   --gl-spinner-segment-color-default: var(--gl-color-neutral-700); /* Used for the animated segment of a loading spinner. */

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

@@ -498,6 +498,7 @@
   --gl-control-background-color-disabled: var(--gl-color-alpha-light-4); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
   --gl-control-background-color-default: var(--gl-color-alpha-dark-40); /* Used for form control (input, radio button, checkbox, textarea) default background. */
   --gl-token-background-color: var(--gl-color-neutral-800); /* Used for the token background color. */
+  --gl-token-selector-token-container-token-background-color-focus: var(--gl-color-neutral-600); /* Used for the background color of a token in a token-selector when it's token-container is in the focus state. */
   --gl-tab-selected-indicator-color-default: var(--gl-color-blue-400); /* Used for the selected indicator of a tab. */
   --gl-spinner-segment-color-light: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner on a dark background. */
   --gl-spinner-segment-color-default: var(--gl-color-neutral-200); /* Used for the animated segment of a loading spinner. */

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

@@ -691,6 +691,7 @@ export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_HOVER = '#63a6e9'; // Used for
 export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS = '#63a6e9'; // Used for the icon color of a checked toggle switch in the focus state.
 export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE = '#9dc7f1'; // Used for the icon color of a checked toggle switch in the active state.
 export const GL_TOGGLE_SWITCH_ICON_COLOR_DISABLED = '#28272d'; // Used for the icon color of a disabled toggle switch.
+export const GL_TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS = '#626168'; // Used for the background color of a token in a token-selector when it's token-container is in the focus state.
 export const GL_TOKEN_FOREGROUND_COLOR = '#ececef'; // Used for the token foreground color.
 export const GL_TOKEN_BACKGROUND_COLOR = '#3a383f'; // Used for the token background color.
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)'; // Used for form control (input, radio button, checkbox, textarea) default background.

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

@@ -691,6 +691,7 @@ export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_HOVER = '#1068bf'; // Used for
 export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_FOCUS = '#1068bf'; // Used for the icon color of a checked toggle switch in the focus state.
 export const GL_TOGGLE_SWITCH_ICON_COLOR_CHECKED_ACTIVE = '#0b5cad'; // Used for the icon color of a checked toggle switch in the active state.
 export const GL_TOGGLE_SWITCH_ICON_COLOR_DISABLED = '#ececef'; // Used for the icon color of a disabled toggle switch.
+export const GL_TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS = '#a4a3a8'; // Used for the background color of a token in a token-selector when it's token-container is in the focus state.
 export const GL_TOKEN_FOREGROUND_COLOR = '#3a383f'; // Used for the token foreground color.
 export const GL_TOKEN_BACKGROUND_COLOR = '#dcdcde'; // Used for the token background color.
 export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for form control (input, radio button, checkbox, textarea) default background.

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

@@ -15349,6 +15349,41 @@
       }
     }
   },
+  "token-selector": {
+    "token-container": {
+      "token": {
+        "background": {
+          "color": {
+            "focus": {
+              "value": "#626168",
+              "$type": "color",
+              "comment": "Used for the background color of a token in a token-selector when it's token-container is in the focus state.",
+              "filePath": "src/tokens/contextual/token-selector.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.300}",
+                  "dark": "{color.neutral.600}"
+                },
+                "$type": "color",
+                "comment": "Used for the background color of a token in a token-selector when it's token-container is in the focus state."
+              },
+              "name": "TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS",
+              "attributes": {},
+              "path": [
+                "token-selector",
+                "token-container",
+                "token",
+                "background",
+                "color",
+                "focus"
+              ]
+            }
+          }
+        }
+      }
+    }
+  },
   "token": {
     "foreground": {
       "color": {

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

@@ -15349,6 +15349,41 @@
       }
     }
   },
+  "token-selector": {
+    "token-container": {
+      "token": {
+        "background": {
+          "color": {
+            "focus": {
+              "value": "#a4a3a8",
+              "$type": "color",
+              "comment": "Used for the background color of a token in a token-selector when it's token-container is in the focus state.",
+              "filePath": "src/tokens/contextual/token-selector.tokens.json",
+              "isSource": true,
+              "original": {
+                "value": {
+                  "default": "{color.neutral.300}",
+                  "dark": "{color.neutral.600}"
+                },
+                "$type": "color",
+                "comment": "Used for the background color of a token in a token-selector when it's token-container is in the focus state."
+              },
+              "name": "TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS",
+              "attributes": {},
+              "path": [
+                "token-selector",
+                "token-container",
+                "token",
+                "background",
+                "color",
+                "focus"
+              ]
+            }
+          }
+        }
+      }
+    }
+  },
   "token": {
     "foreground": {
       "color": {

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

@@ -496,6 +496,7 @@ $gl-control-background-color-concatenation: $gl-color-alpha-light-4; // Used for
 $gl-control-background-color-disabled: $gl-color-alpha-light-4; // Used for disabled form control (checkbox, input, radio button, textarea) background.
 $gl-control-background-color-default: $gl-color-alpha-dark-40; // Used for form control (input, radio button, checkbox, textarea) default background.
 $gl-token-background-color: $gl-color-neutral-800; // Used for the token background color.
+$gl-token-selector-token-container-token-background-color-focus: $gl-color-neutral-600; // Used for the background color of a token in a token-selector when it's token-container is in the focus state.
 $gl-tab-selected-indicator-color-default: $gl-color-blue-400; // Used for the selected indicator of a tab.
 $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
 $gl-spinner-segment-color-default: $gl-color-neutral-200; // Used for the animated segment of a loading spinner.

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

@@ -496,6 +496,7 @@ $gl-control-background-color-concatenation: $gl-color-neutral-10; // Used for th
 $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-token-background-color: $gl-color-neutral-100; // Used for the token background color.
+$gl-token-selector-token-container-token-background-color-focus: $gl-color-neutral-300; // Used for the background color of a token in a token-selector when it's token-container is in the focus state.
 $gl-tab-selected-indicator-color-default: $gl-color-blue-500; // Used for the selected indicator of a tab.
 $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
 $gl-spinner-segment-color-default: $gl-color-neutral-700; // Used for the animated segment of a loading spinner.

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

@@ -691,6 +691,7 @@ $gl-toggle-switch-icon-color-checked-hover: var(--gl-toggle-switch-icon-color-ch
 $gl-toggle-switch-icon-color-checked-focus: var(--gl-toggle-switch-icon-color-checked-focus);
 $gl-toggle-switch-icon-color-checked-active: var(--gl-toggle-switch-icon-color-checked-active);
 $gl-toggle-switch-icon-color-disabled: var(--gl-toggle-switch-icon-color-disabled);
+$gl-token-selector-token-container-token-background-color-focus: var(--gl-token-selector-token-container-token-background-color-focus);
 $gl-token-foreground-color: var(--gl-token-foreground-color);
 $gl-token-background-color: var(--gl-token-background-color);
 $gl-control-background-color-default: var(--gl-control-background-color-default);

package/src/tokens/contextual/token-selector.tokens.json

@@ -0,0 +1,20 @@
+{
+  "token-selector": {
+    "token-container": {
+      "token": {
+        "background": {
+          "color": {
+            "focus": {
+              "$value": {
+                "default": "{color.neutral.300}",
+                "dark": "{color.neutral.600}"
+              },
+              "$type": "color",
+              "$description": "Used for the background color of a token in a token-selector when it's token-container is in the focus state."
+            }
+          }
+        }
+      }
+    }
+  }
+}