@gitlab/ui 85.12.2 → 85.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "85.12.2",
+  "version": "85.13.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -30,7 +30,6 @@
     "prebuild": "run-s build-tokens generate-utilities",
     "prepare": "run-s build-tokens generate-utilities",
     "generate-utilities": "make src/scss/utilities.scss",
-    "deprecate-gl-utils": "node ./bin/deprecate_utils.js",
     "copy-fonts": "make copy-fonts",
     "build-tokens": "node ./bin/build_tokens.js",
     "clean": "rm -r dist storybook src/scss/utilities.scss",

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

@@ -15,7 +15,7 @@
 .gl-form-radio {
   @include gl-font-base;
   @include gl-line-height-normal;
-  @include gl-text-gray-900;
+  color: var(--gl-text-color-default);
 
   &.form-check {
     @include gl-display-flex;
@@ -45,9 +45,10 @@
   .form-check-input:disabled,
   .form-check-input:disabled ~ .form-check-label,
   .custom-control-input:disabled,
-  .custom-control-input:disabled ~ .custom-control-label {
+  .custom-control-input:disabled ~ .custom-control-label,
+  .custom-control-input:disabled ~ .custom-control-label > .help-text {
     @include gl-cursor-not-allowed;
-    @include gl-text-gray-400;
+    color: var(--gl-text-color-disabled);
   }
 
   &.custom-control {
@@ -65,27 +66,27 @@
       }
 
       &::before {
-        @include gl-bg-white;
-        @include gl-border-gray-400;
+        background-color: var(--gl-control-background-color-default);
+        border-color: var(--gl-control-border-color-default);
       }
     }
 
-    .custom-control-input:not(:disabled):focus ~ .custom-control-label {
-      &::before {
-        @include gl-border-gray-500;
-        @include gl-focus;
-      }
+    .custom-control-input:not(:disabled):hover ~ .custom-control-label::before {
+      border-color: var(--gl-control-border-color-hover);
     }
 
-    .custom-control-input:checked ~ .custom-control-label {
-      &::before {
-        @include gl-bg-blue-500;
-        @include gl-border-blue-500;
+    .custom-control-input:not(:disabled):focus ~ .custom-control-label::before {
+      @include gl-focus;
+      border-color: var(--gl-control-border-color-focus);
+    }
 
-        @media (forced-colors: active) {
-          background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
-          border-color: LinKText; // stylelint-disable-line scale-unlimited/declaration-strict-value
-        }
+    .custom-control-input:checked  ~ .custom-control-label::before {
+      background-color: var(--gl-control-background-color-selected-default);
+      border-color: var(--gl-control-border-color-selected-default);
+
+      @media (forced-colors: active) {
+        background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
+        border-color: LinKText; // stylelint-disable-line scale-unlimited/declaration-strict-value
       }
     }
 
@@ -93,8 +94,8 @@
     .custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label,
     .custom-control-input[type='radio']:checked ~ .custom-control-label {
       &::after {
-        @include gl-bg-white;
         background: 50% 50% no-repeat;
+        background-color: var(--gl-control-indicator-color-selected);
         mask-repeat: no-repeat;
         mask-position: center center;
       }
@@ -116,11 +117,22 @@
     }
 
     .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover,
+    .custom-control-input:not(:disabled):hover:checked ~ .custom-control-label {
+      &::before  {
+        background-color: var(--gl-control-background-color-selected-hover);
+        border-color: var(--gl-control-border-color-selected-hover);
+      }
+    }
+
+    .custom-control-input:not(:disabled):focus:checked ~ .custom-control-label::before {
+      background-color: var(--gl-control-background-color-selected-focus);
+      border-color: var(--gl-control-border-color-selected-focus);
+    }
+
+    .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover,
+    .custom-control-input:not(:disabled):hover:checked ~ .custom-control-label,
     .custom-control-input:not(:disabled):focus:checked ~ .custom-control-label {
       &::before {
-        @include gl-bg-blue-700;
-        @include gl-border-blue-700;
-
         @media (forced-colors: active) {
           background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
           border-color: LinKText; // stylelint-disable-line scale-unlimited/declaration-strict-value
@@ -130,8 +142,8 @@
 
     &.custom-checkbox {
       .custom-control-input:indeterminate ~ .custom-control-label::before {
-        @include gl-bg-blue-500;
-        @include gl-border-blue-500;
+        background-color: var(--gl-control-background-color-selected-default);
+        border-color: var(--gl-control-border-color-selected-default);
 
         @media (forced-colors: active) {
           background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
@@ -139,11 +151,18 @@
         }
       }
 
-      .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before,
+      .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before {
+        background-color: var(--gl-control-background-color-selected-hover);
+        border-color: var(--gl-control-border-color-selected-hover);
+      }
+
       .custom-control-input:not(:disabled):focus:indeterminate ~ .custom-control-label::before {
-        @include gl-bg-blue-700;
-        @include gl-border-blue-700;
+        background-color: var(--gl-control-background-color-selected-focus);
+        border-color: var(--gl-control-border-color-selected-focus);
+      }
 
+      .custom-control-input:not(:disabled):indeterminate ~ .custom-control-label:hover::before,
+      .custom-control-input:not(:disabled):focus:indeterminate ~ .custom-control-label::before {
         @media (forced-colors: active) {
           background-color: LinkText; // stylelint-disable-line scale-unlimited/declaration-strict-value
           border-color: LinKText; // stylelint-disable-line scale-unlimited/declaration-strict-value
@@ -155,9 +174,9 @@
       @include gl-cursor-not-allowed;
 
       &::before {
-        @include gl-bg-gray-50;
-        @include gl-border-gray-100;
         @include gl-pointer-events-auto;
+        background-color: var(--gl-control-background-color-disabled);
+        border-color: var(--gl-control-border-color-disabled);
 
         @media (forced-colors: active) {
           opacity: 0.5;
@@ -168,22 +187,22 @@
     .custom-control-input:checked:disabled ~ .custom-control-label,
     .custom-control-input[type='checkbox']:indeterminate:disabled ~ .custom-control-label {
       &::before {
-        @include gl-bg-gray-100;
-        @include gl-border-gray-100;
+        background-color: var(--gl-control-background-color-disabled);
+        border-color: var(--gl-control-border-color-disabled);
       }
 
       &::after {
         background-image: none;
-        @include gl-bg-gray-500;
+        background-color: var(--gl-control-indicator-color-disabled);
 
         /* Ensure state indicators (like the checkmark for checked or
-           the dash for indeterminate) are visible in Windows High
-           Contrast Mode.
+          the dash for indeterminate) are visible in Windows High
+          Contrast Mode.
         */
         @media screen and (forced-colors: active) {
           forced-color-adjust: none;
           /* system color reference for disabled text applied to
-             background here.
+            background here.
           */
           // stylelint-disable-next-line
           background-color: GrayText;
@@ -194,9 +213,9 @@
 
   .help-text {
     @include gl-mt-2;
-    @include gl-text-gray-500;
     @include gl-mb-0;
     @include gl-font-base;
     @include gl-line-height-normal;
+    color: var(--gl-text-color-subtle);
   }
 }

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

@@ -17,6 +17,7 @@ consumer component.
   :is-chat-available="isChatAvailable"
   :predefined-prompts="predefinedPrompts"
   :badge-help-page-url="badgeHelpPageUrl"
+  :canceled-request-ids="cancelledRequestIds"
   :tool-name="toolName"
   :empty-state-title="emptyStateTitle"
   :empty-state-description="emptyStateDescription"
@@ -92,6 +93,7 @@ export default {
       error: null,
       isLoading: false,
       toolName: '',
+      cancelledRequestIds: []
     }
   },
   provide: {
@@ -113,6 +115,11 @@ export default {
     this.chatPromptPlaceholder = 'Type your question here';
   }
   methods: {
+    onChatCancel() {
+       // pushing last requestId of messages to canceled Request Ids
+      this.cancelledRequestIds.push(this.messages[this.messages.length - 1].requestId);
+      this.isLoading = false;
+    },
     onChatHidden() {
       ...
     },
@@ -125,7 +132,10 @@ export default {
       ...
     },
     onAiResponse(data) {
-      this.messages = data
+      // check if requestId was not cancelled
+      if (requestId && !this.cancelledRequestIds.includes(data.requestId)) {
+        this.messages = data
+      }
       …
       this.isLoading = false;
     },

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

@@ -84,6 +84,9 @@ export default {
       default: () => [],
       validator: itemsValidator,
     },
+    /**
+     * Array of RequestIds that have been canceled.
+     */
     canceledRequestIds: {
       type: Array,
       required: false,

package/src/scss/mixins.scss

@@ -54,8 +54,8 @@
 ) {
   @if $inset == true {
     @if $color {
-      box-shadow: inset 0 0 0 $outline-width $blue-400,
-        inset 0 0 0 #{$outline-width + $outline-offset} $white,
+      box-shadow: inset 0 0 0 $outline-width var(--gl-focus-ring-outer-color),
+        inset 0 0 0 #{$outline-width + $outline-offset} var(--gl-focus-ring-inner-color),
         inset 0 0 0 #{$outline-width + $outline-offset + 1px} $color,
         $focus-ring-inset if-important($important);
       outline: none if-important($important);
@@ -66,7 +66,8 @@
       outline: $focus-ring-outline if-important($important);
       outline-offset: $outline-offset;
     } @else {
-      box-shadow: inset 0 0 0 $outline-width $blue-400, $focus-ring-inset if-important($important);
+      box-shadow: inset 0 0 0 $outline-width var(--gl-focus-ring-outer-color),
+        $focus-ring-inset if-important($important);
       outline: none if-important($important);
       @media (forced-colors: active) {
         outline: 2px solid LinkText if-important($important);

package/src/scss/variables.scss

@@ -221,12 +221,13 @@ $gl-easing-out-cubic: cubic-bezier(0.22, 0.61, 0.36, 1);
 $outline-offset: 1px;
 $outline-width: 2px;
 $outline: #{$outline-offset + $outline-width};
-$focus-ring: 0 0 0 $outline-offset $white, 0 0 0 #{$outline-offset + $outline-width} $blue-400;
-$focus-ring-inset: inset 0 0 0 #{$outline-width + $outline-offset} $white,
-  inset 0 0 0 $outline-offset $white;
+$focus-ring: 0 0 0 $outline-offset var(--gl-focus-ring-inner-color),
+  0 0 0 #{$outline-offset + $outline-width} var(--gl-focus-ring-outer-color);
+$focus-ring-inset: inset 0 0 0 #{$outline-width + $outline-offset} var(--gl-focus-ring-inner-color),
+  inset 0 0 0 $outline-offset var(--gl-focus-ring-inner-color);
 $focus-ring-dark: 0 0 0 $outline-offset rgba($black, 0.6),
   0 0 0 #{$outline-offset + $outline-width} $blue-300;
-$focus-ring-outline: $outline-width solid $blue-400;
+$focus-ring-outline: $outline-width solid var(--gl-focus-ring-outer-color);
 
 // Toasts
 $toast-max-width: px-to-rem(586px);

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

@@ -506,6 +506,9 @@
   --gl-control-placeholder-color: var(--gl-color-neutral-400); /* Used for placeholder text within inputs. */
   --gl-control-text-color-valid: var(--gl-color-green-500); /* Used for the helper text when the input is valid. */
   --gl-control-text-color-error: var(--gl-color-red-500); /* Used for the helper text when the input is invalid. */
+  --gl-control-border-color-selected-focus: var(--gl-color-blue-700); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
+  --gl-control-border-color-selected-hover: var(--gl-color-blue-700); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */
+  --gl-control-border-color-selected-default: var(--gl-color-blue-500); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */
   --gl-control-border-color-error: var(--gl-color-red-500); /* Used for invalid form control (input, textarea) border. */
   --gl-control-border-color-disabled: var(--gl-color-neutral-100); /* Used for disabled form control (input, radio button, checkbox, textarea) border. */
   --gl-control-border-color-focus: var(--gl-color-neutral-900); /* Used for form control (input, radio button, checkbox, textarea) border on focus. */

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

@@ -506,6 +506,9 @@
   --gl-control-placeholder-color: var(--gl-color-neutral-500); /* Used for placeholder text within inputs. */
   --gl-control-text-color-valid: var(--gl-color-green-400); /* Used for the helper text when the input is valid. */
   --gl-control-text-color-error: var(--gl-color-red-400); /* Used for the helper text when the input is invalid. */
+  --gl-control-border-color-selected-focus: var(--gl-color-blue-200); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
+  --gl-control-border-color-selected-hover: var(--gl-color-blue-200); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */
+  --gl-control-border-color-selected-default: var(--gl-color-blue-400); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */
   --gl-control-border-color-error: var(--gl-color-red-400); /* Used for invalid form control (input, textarea) border. */
   --gl-control-border-color-disabled: var(--gl-color-neutral-800); /* Used for disabled form control (input, radio button, checkbox, textarea) border. */
   --gl-control-border-color-focus: var(--gl-color-neutral-50); /* Used for form control (input, radio button, checkbox, textarea) border on focus. */

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

@@ -508,6 +508,9 @@ export const GL_CONTROL_BORDER_COLOR_HOVER = '#a4a3a8'; // Used for form control
 export const GL_CONTROL_BORDER_COLOR_FOCUS = '#ececef'; // Used for form control (input, radio button, checkbox, textarea) border on focus.
 export const GL_CONTROL_BORDER_COLOR_DISABLED = '#434248'; // Used for disabled form control (input, radio button, checkbox, textarea) border.
 export const GL_CONTROL_BORDER_COLOR_ERROR = '#ec5941'; // Used for invalid form control (input, textarea) border.
+export const GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT = '#428fdc'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
+export const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
+export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
 export const GL_CONTROL_TEXT_COLOR_ERROR = '#ec5941'; // Used for the helper text when the input is invalid.
 export const GL_CONTROL_TEXT_COLOR_VALID = '#2da160'; // Used for the helper text when the input is valid.
 export const GL_CONTROL_PLACEHOLDER_COLOR = '#737278'; // Used for placeholder text within inputs.

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

@@ -508,6 +508,9 @@ export const GL_CONTROL_BORDER_COLOR_HOVER = '#626168'; // Used for form control
 export const GL_CONTROL_BORDER_COLOR_FOCUS = '#333238'; // Used for form control (input, radio button, checkbox, textarea) border on focus.
 export const GL_CONTROL_BORDER_COLOR_DISABLED = '#dcdcde'; // Used for disabled form control (input, radio button, checkbox, textarea) border.
 export const GL_CONTROL_BORDER_COLOR_ERROR = '#dd2b0e'; // Used for invalid form control (input, textarea) border.
+export const GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
+export const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
+export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
 export const GL_CONTROL_TEXT_COLOR_ERROR = '#dd2b0e'; // Used for the helper text when the input is invalid.
 export const GL_CONTROL_TEXT_COLOR_VALID = '#108548'; // Used for the helper text when the input is valid.
 export const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d'; // Used for placeholder text within inputs.

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

@@ -11116,6 +11116,80 @@
             "color",
             "error"
           ]
+        },
+        "selected": {
+          "default": {
+            "value": "#428fdc",
+            "$type": "color",
+            "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border.",
+            "filePath": "src/tokens/control.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.500}",
+                "dark": "{color.blue.400}"
+              },
+              "$type": "color",
+              "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border."
+            },
+            "name": "CONTROL_BORDER_COLOR_SELECTED_DEFAULT",
+            "attributes": {},
+            "path": [
+              "control",
+              "border",
+              "color",
+              "selected",
+              "default"
+            ]
+          },
+          "hover": {
+            "value": "#9dc7f1",
+            "$type": "color",
+            "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.",
+            "filePath": "src/tokens/control.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.700}",
+                "dark": "{color.blue.200}"
+              },
+              "$type": "color",
+              "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover."
+            },
+            "name": "CONTROL_BORDER_COLOR_SELECTED_HOVER",
+            "attributes": {},
+            "path": [
+              "control",
+              "border",
+              "color",
+              "selected",
+              "hover"
+            ]
+          },
+          "focus": {
+            "value": "#9dc7f1",
+            "$type": "color",
+            "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.",
+            "filePath": "src/tokens/control.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.700}",
+                "dark": "{color.blue.200}"
+              },
+              "$type": "color",
+              "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus."
+            },
+            "name": "CONTROL_BORDER_COLOR_SELECTED_FOCUS",
+            "attributes": {},
+            "path": [
+              "control",
+              "border",
+              "color",
+              "selected",
+              "focus"
+            ]
+          }
         }
       }
     },

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

@@ -11116,6 +11116,80 @@
             "color",
             "error"
           ]
+        },
+        "selected": {
+          "default": {
+            "value": "#1f75cb",
+            "$type": "color",
+            "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border.",
+            "filePath": "src/tokens/control.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.500}",
+                "dark": "{color.blue.400}"
+              },
+              "$type": "color",
+              "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border."
+            },
+            "name": "CONTROL_BORDER_COLOR_SELECTED_DEFAULT",
+            "attributes": {},
+            "path": [
+              "control",
+              "border",
+              "color",
+              "selected",
+              "default"
+            ]
+          },
+          "hover": {
+            "value": "#0b5cad",
+            "$type": "color",
+            "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.",
+            "filePath": "src/tokens/control.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.700}",
+                "dark": "{color.blue.200}"
+              },
+              "$type": "color",
+              "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover."
+            },
+            "name": "CONTROL_BORDER_COLOR_SELECTED_HOVER",
+            "attributes": {},
+            "path": [
+              "control",
+              "border",
+              "color",
+              "selected",
+              "hover"
+            ]
+          },
+          "focus": {
+            "value": "#0b5cad",
+            "$type": "color",
+            "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.",
+            "filePath": "src/tokens/control.tokens.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "default": "{color.blue.700}",
+                "dark": "{color.blue.200}"
+              },
+              "$type": "color",
+              "comment": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus."
+            },
+            "name": "CONTROL_BORDER_COLOR_SELECTED_FOCUS",
+            "attributes": {},
+            "path": [
+              "control",
+              "border",
+              "color",
+              "selected",
+              "focus"
+            ]
+          }
         }
       }
     },

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

@@ -504,6 +504,9 @@ $gl-control-indicator-color-selected: $gl-color-neutral-900; // Used for checkbo
 $gl-control-placeholder-color: $gl-color-neutral-500; // Used for placeholder text within inputs.
 $gl-control-text-color-valid: $gl-color-green-400; // Used for the helper text when the input is valid.
 $gl-control-text-color-error: $gl-color-red-400; // Used for the helper text when the input is invalid.
+$gl-control-border-color-selected-focus: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
+$gl-control-border-color-selected-hover: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
+$gl-control-border-color-selected-default: $gl-color-blue-400; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
 $gl-control-border-color-error: $gl-color-red-400; // Used for invalid form control (input, textarea) border.
 $gl-control-border-color-disabled: $gl-color-neutral-800; // Used for disabled form control (input, radio button, checkbox, textarea) border.
 $gl-control-border-color-focus: $gl-color-neutral-50; // Used for form control (input, radio button, checkbox, textarea) border on focus.

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

@@ -504,6 +504,9 @@ $gl-control-indicator-color-selected: $gl-color-neutral-0; // Used for checkbox
 $gl-control-placeholder-color: $gl-color-neutral-400; // Used for placeholder text within inputs.
 $gl-control-text-color-valid: $gl-color-green-500; // Used for the helper text when the input is valid.
 $gl-control-text-color-error: $gl-color-red-500; // Used for the helper text when the input is invalid.
+$gl-control-border-color-selected-focus: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
+$gl-control-border-color-selected-hover: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
+$gl-control-border-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
 $gl-control-border-color-error: $gl-color-red-500; // Used for invalid form control (input, textarea) border.
 $gl-control-border-color-disabled: $gl-color-neutral-100; // Used for disabled form control (input, radio button, checkbox, textarea) border.
 $gl-control-border-color-focus: $gl-color-neutral-900; // Used for form control (input, radio button, checkbox, textarea) border on focus.

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

@@ -508,6 +508,9 @@ $gl-control-border-color-hover: var(--gl-control-border-color-hover);
 $gl-control-border-color-focus: var(--gl-control-border-color-focus);
 $gl-control-border-color-disabled: var(--gl-control-border-color-disabled);
 $gl-control-border-color-error: var(--gl-control-border-color-error);
+$gl-control-border-color-selected-default: var(--gl-control-border-color-selected-default);
+$gl-control-border-color-selected-hover: var(--gl-control-border-color-selected-hover);
+$gl-control-border-color-selected-focus: var(--gl-control-border-color-selected-focus);
 $gl-control-text-color-error: var(--gl-control-text-color-error);
 $gl-control-text-color-valid: var(--gl-control-text-color-valid);
 $gl-control-placeholder-color: var(--gl-control-placeholder-color);

package/src/tokens/control.tokens.json

@@ -87,6 +87,32 @@
           },
           "$type": "color",
           "$description": "Used for invalid form control (input, textarea) border."
+        },
+        "selected": {
+          "default": {
+            "$value": {
+              "default": "{color.blue.500}",
+              "dark": "{color.blue.400}"
+            },
+            "$type": "color",
+            "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border."
+          },
+          "hover": {
+            "$value": {
+              "default": "{color.blue.700}",
+              "dark": "{color.blue.200}"
+            },
+            "$type": "color",
+            "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover."
+          },
+          "focus": {
+            "$value": {
+              "default": "{color.blue.700}",
+              "dark": "{color.blue.200}"
+            },
+            "$type": "color",
+            "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus."
+          }
         }
       }
     },