@gitlab/ui 138.3.0 → 138.5.0

package/src/scss/themes.scss

@@ -31,7 +31,7 @@
   --gl-color-neutral-800: #3f3546;
   --gl-color-neutral-900: #2e2434;
   --gl-color-neutral-950: #1d1424;
-  --gl-color-neutral-1000: #09030e;
+  --gl-color-neutral-1000: #120a18;
 }
 
 :root.ui-blue,
@@ -49,7 +49,7 @@
   --gl-color-neutral-800: #333945;
   --gl-color-neutral-900: #222733;
   --gl-color-neutral-950: #121722;
-  --gl-color-neutral-1000: #03050d;
+  --gl-color-neutral-1000: #090d17;
 }
 
 :root.ui-green,
@@ -67,7 +67,7 @@
   --gl-color-neutral-800: #313b38;
   --gl-color-neutral-900: #1f2a26;
   --gl-color-neutral-950: #101916;
-  --gl-color-neutral-1000: #010705;
+  --gl-color-neutral-1000: #060f0c;
 }
 
 :root.ui-red,
@@ -85,7 +85,7 @@
   --gl-color-neutral-800: #423539;
   --gl-color-neutral-900: #312428;
   --gl-color-neutral-950: #201418;
-  --gl-color-neutral-1000: #0b0306;
+  --gl-color-neutral-1000: #150a0e;
 }
 
 :root.ui-gray,
@@ -103,5 +103,78 @@
   --gl-color-neutral-800: #383839;
   --gl-color-neutral-900: #272727;
   --gl-color-neutral-950: #171717;
-  --gl-color-neutral-1000: #050505;
+  --gl-color-neutral-1000: #0d0d0d;
+}
+
+// Theme overrides. Hand-maintained: keep these when regenerating the
+// ramps above.
+
+:root.ui-indigo,
+.ui-indigo-scope {
+  --gl-nav-item-selected-indicator-color: var(--gl-color-purple-500);
+  --gl-nav-item-foreground-color-default: var(--gl-color-purple-800);
+  --gl-nav-item-foreground-color-hover: var(--gl-color-purple-950);
+}
+
+:root.ui-indigo.gl-dark,
+.ui-indigo-scope.gl-dark-scope {
+  --gl-nav-item-selected-indicator-color: var(--gl-color-purple-300);
+  --gl-nav-item-foreground-color-default: var(--gl-color-purple-200);
+  --gl-nav-item-foreground-color-hover: var(--gl-color-purple-50);
+}
+
+:root.ui-blue,
+.ui-blue-scope {
+  --gl-nav-item-selected-indicator-color: var(--gl-color-blue-500);
+  --gl-nav-item-foreground-color-default: var(--gl-color-blue-800);
+  --gl-nav-item-foreground-color-hover: var(--gl-color-blue-950);
+}
+
+:root.ui-blue.gl-dark,
+.ui-blue-scope.gl-dark-scope {
+  --gl-nav-item-selected-indicator-color: var(--gl-color-blue-300);
+  --gl-nav-item-foreground-color-default: var(--gl-color-blue-200);
+  --gl-nav-item-foreground-color-hover: var(--gl-color-blue-50);
+}
+
+:root.ui-green,
+.ui-green-scope {
+  --gl-nav-item-selected-indicator-color: var(--gl-color-green-500);
+  --gl-nav-item-foreground-color-default: var(--gl-color-green-800);
+  --gl-nav-item-foreground-color-hover: var(--gl-color-green-950);
+}
+
+:root.ui-green.gl-dark,
+.ui-green-scope.gl-dark-scope {
+  --gl-nav-item-selected-indicator-color: var(--gl-color-green-300);
+  --gl-nav-item-foreground-color-default: var(--gl-color-green-200);
+  --gl-nav-item-foreground-color-hover: var(--gl-color-green-50);
+}
+
+:root.ui-red,
+.ui-red-scope {
+  --gl-nav-item-selected-indicator-color: var(--gl-color-red-500);
+  --gl-nav-item-foreground-color-default: var(--gl-color-red-800);
+  --gl-nav-item-foreground-color-hover: var(--gl-color-red-950);
+}
+
+:root.ui-red.gl-dark,
+.ui-red-scope.gl-dark-scope {
+  --gl-nav-item-selected-indicator-color: var(--gl-color-red-300);
+  --gl-nav-item-foreground-color-default: var(--gl-color-red-200);
+  --gl-nav-item-foreground-color-hover: var(--gl-color-red-50);
+}
+
+:root.ui-gray,
+.ui-gray-scope {
+  --gl-nav-item-selected-indicator-color: var(--gl-color-neutral-500);
+  --gl-nav-item-foreground-color-default: var(--gl-color-neutral-800);
+  --gl-nav-item-foreground-color-hover: var(--gl-color-neutral-950);
+}
+
+:root.ui-gray.gl-dark,
+.ui-gray-scope.gl-dark-scope {
+  --gl-nav-item-selected-indicator-color: var(--gl-color-neutral-300);
+  --gl-nav-item-foreground-color-default: var(--gl-color-neutral-200);
+  --gl-nav-item-foreground-color-hover: var(--gl-color-neutral-50);
 }

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

@@ -642,8 +642,8 @@
   --gl-nav-item-background-color-hover: var(--gl-color-neutral-100); /** Used for the background of a default navigation item in the hover state. */
   --gl-nav-item-background-color-active: var(--gl-color-neutral-200); /** Used for the background of a default navigation item in the active state. */
   --gl-nav-item-selected-font-weight: var(--gl-font-weight-bold); /** Used for the font weight of a selected navigation item. */
-  --gl-nav-item-selected-foreground-color-default: var(--gl-color-neutral-950); /** Used for the foreground of a selected navigation item in the default state. */
   --gl-nav-item-selected-background-color-default: var(--gl-color-neutral-100); /** Used for the background of a selected navigation item in the default state. */
+  --gl-nav-item-selected-indicator-color: var(--gl-color-orange-500); /** Used for the indicator beside a selected navigation item. Tinted themes override it in src/scss/themes.scss. */
   --gl-progress-bar-track-color: var(--gl-color-neutral-200); /** Used for the track color for all progress-bar variants. */
   --gl-skeleton-loader-background-color: var(--gl-color-neutral-100); /** Used for the skeleton loader background color. */
   --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-50); /** Used for the animated shimmer effect in a skeleton loader. */
@@ -766,7 +766,7 @@
   --gl-background-color-section: var(--gl-color-neutral-0); /** Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
   --gl-background-color-overlay: var(--gl-color-alpha-dark-24); /** Used for an overlay that covers other content. */
   --gl-control-background-color-default: var(--gl-color-neutral-0); /** Used for form control (input, radio button, checkbox, textarea) default background. */
-  --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-disabled: var(--gl-color-neutral-10); /** Used for disabled form control (input, textarea) background. */
   --gl-control-background-color-concatenation: var(--gl-color-neutral-10); /** Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-readonly: var(--gl-color-alpha-dark-2); /** Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-selected-default: var(--gl-color-neutral-800); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
@@ -777,7 +777,6 @@
   --gl-control-border-color-disabled: var(--gl-color-neutral-100); /** Used for disabled form control (input, radio button, checkbox, textarea) border. */
   --gl-control-placeholder-color: var(--gl-color-neutral-500); /** Used for placeholder text within inputs. */
   --gl-control-indicator-color-selected: var(--gl-color-neutral-0); /** Used for checkbox and radio button state indicators. */
-  --gl-control-indicator-color-disabled: var(--gl-color-neutral-500); /** Used for disabled checkbox and radio button state indicators. */
   --gl-feedback-strong-background-color: var(--gl-color-neutral-800); /** Used for a background associated with strong feedback like a tooltip or toast message. */
   --gl-feedback-strong-border-color: var(--gl-color-neutral-1000); /** Used for the border associated with strong feedback. */
   --gl-feedback-strong-text-color: var(--gl-color-neutral-0); /** Used for text on a strong feedback background. */
@@ -1016,6 +1015,7 @@
   --gl-modal-border-radius: var(--gl-border-radius-2xl); /** Used for modal border radius. */
   --gl-nav-item-foreground-color-focus: var(--gl-nav-item-foreground-color-hover); /** Used for the foreground of a default navigation item in the focus state. */
   --gl-nav-item-background-color-focus: var(--gl-nav-item-background-color-hover); /** Used for the background of a default navigation item in the focus state. */
+  --gl-nav-item-selected-foreground-color-default: var(--gl-nav-item-foreground-color-hover); /** Used for the foreground of a selected navigation item in the default state. */
   --gl-nav-item-selected-foreground-color-hover: var(--gl-nav-item-foreground-color-hover); /** Used for the foreground of a selected navigation item in the hover state. */
   --gl-nav-item-selected-background-color-hover: var(--gl-nav-item-background-color-hover); /** Used for the background of a selected navigation item in the hover state. */
   --gl-nav-item-selected-background-color-active: var(--gl-nav-item-background-color-active); /** Used for the background of a selected navigation item in the active state. */
@@ -1075,12 +1075,14 @@
   --gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-default); /** Used for the foreground of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /** Used for the border of a strong neutral action in the hover state. */
   --gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-hover); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background on focus. */
+  --gl-control-background-color-selected-disabled: var(--gl-action-selected-background-color-disabled); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background when disabled. */
   --gl-control-border-color-error: var(--gl-feedback-danger-border-color); /** Used for invalid form control (input, textarea) border. */
   --gl-control-border-color-selected-default: var(--gl-control-background-color-selected-default); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */
   --gl-control-border-color-selected-hover: var(--gl-control-background-color-selected-hover); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */
   --gl-control-border-radius: var(--gl-border-radius-lg); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */
   --gl-control-text-color-error: var(--gl-text-color-danger); /** Used for the helper text when the input is invalid. */
   --gl-control-text-color-valid: var(--gl-text-color-success); /** Used for the helper text when the input is valid. */
+  --gl-control-indicator-color-disabled: var(--gl-control-indicator-color-selected); /** Used for disabled checkbox and radio button state indicators. */
   --gl-feedback-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a feedback element. */
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /** Used for the inner neutral portion of the focus ring. */
   --gl-icon-color-default: var(--gl-text-color-default); /** Used for the default icon color. Can be paired with default text. */
@@ -1263,6 +1265,7 @@
   --gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-hover); /** Used for the foreground of a strong neutral action in the focus state. */
   --gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-hover); /** Used for the border of a strong neutral action in the focus state. */
   --gl-control-border-color-selected-focus: var(--gl-control-background-color-selected-focus); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
+  --gl-control-border-color-selected-disabled: var(--gl-control-background-color-selected-disabled); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border when disabled. */
   --gl-button-confirm-primary-foreground-color-active: var(--gl-button-confirm-primary-foreground-color-focus); /** Used for the foreground of a confirm (positive) primary button in the active state. */
   --gl-nav-item-selected-foreground-color-active: var(--gl-nav-item-foreground-color-active); /** Used for the foreground of a selected navigation item in the active state. */
   --gl-toggle-switch-track-color-unchecked-focus: var(--gl-toggle-switch-track-color-unchecked-hover); /** Used for the track color of an unchecked toggle switch in the focus state. The track is deliberately unchanged from the default state; focus is carried by the focus ring, the track border and the thumb size. */

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

@@ -657,11 +657,11 @@
   --gl-nav-item-foreground-color-default: var(--gl-color-neutral-200); /** Used for the foreground of a default navigation item in the default state. */
   --gl-nav-item-foreground-color-hover: var(--gl-color-neutral-0); /** Used for the foreground of a default navigation item in the hover state. */
   --gl-nav-item-background-color-default: var(--gl-color-alpha-0); /** Used for the background of a default navigation item in the default state. */
-  --gl-nav-item-background-color-hover: var(--gl-color-neutral-900); /** Used for the background of a default navigation item in the hover state. */
+  --gl-nav-item-background-color-hover: var(--gl-color-neutral-800); /** Used for the background of a default navigation item in the hover state. */
   --gl-nav-item-background-color-active: var(--gl-color-neutral-950); /** Used for the background of a default navigation item in the active state. */
   --gl-nav-item-selected-font-weight: var(--gl-font-weight-bold); /** Used for the font weight of a selected navigation item. */
-  --gl-nav-item-selected-foreground-color-default: var(--gl-color-neutral-0); /** Used for the foreground of a selected navigation item in the default state. */
-  --gl-nav-item-selected-background-color-default: var(--gl-color-neutral-900); /** Used for the background of a selected navigation item in the default state. */
+  --gl-nav-item-selected-background-color-default: var(--gl-color-neutral-800); /** Used for the background of a selected navigation item in the default state. */
+  --gl-nav-item-selected-indicator-color: var(--gl-color-orange-300); /** Used for the indicator beside a selected navigation item. Tinted themes override it in src/scss/themes.scss. */
   --gl-progress-bar-track-color: var(--gl-color-neutral-700); /** Used for the track color for all progress-bar variants. */
   --gl-skeleton-loader-background-color: var(--gl-color-neutral-800); /** Used for the skeleton loader background color. */
   --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-700); /** Used for the animated shimmer effect in a skeleton loader. */
@@ -782,7 +782,7 @@
   --gl-background-color-overlap: var(--gl-color-neutral-900); /** Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content. */
   --gl-background-color-section: var(--gl-color-neutral-800); /** Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
   --gl-control-background-color-default: var(--gl-color-alpha-dark-40); /** Used for form control (input, radio button, checkbox, textarea) default background. */
-  --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-disabled: var(--gl-color-alpha-light-4); /** Used for disabled form control (input, textarea) background. */
   --gl-control-background-color-concatenation: var(--gl-color-alpha-light-4); /** Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-readonly: var(--gl-color-alpha-light-8); /** Used for the background of static content that prepends or appends a text input. */
   --gl-control-background-color-selected-default: var(--gl-color-neutral-50); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background. */
@@ -793,7 +793,6 @@
   --gl-control-border-color-disabled: var(--gl-color-neutral-800); /** Used for disabled form control (input, radio button, checkbox, textarea) border. */
   --gl-control-placeholder-color: var(--gl-color-neutral-400); /** Used for placeholder text within inputs. */
   --gl-control-indicator-color-selected: var(--gl-color-neutral-950); /** Used for checkbox and radio button state indicators. */
-  --gl-control-indicator-color-disabled: var(--gl-color-neutral-400); /** Used for disabled checkbox and radio button state indicators. */
   --gl-feedback-strong-background-color: var(--gl-color-neutral-800); /** Used for a background associated with strong feedback like a tooltip or toast message. */
   --gl-feedback-strong-border-color: var(--gl-color-neutral-300); /** Used for the border associated with strong feedback. */
   --gl-feedback-strong-text-color: var(--gl-color-neutral-0); /** Used for text on a strong feedback background. */
@@ -1023,6 +1022,7 @@
   --gl-modal-border-radius: var(--gl-border-radius-2xl); /** Used for modal border radius. */
   --gl-nav-item-foreground-color-focus: var(--gl-nav-item-foreground-color-hover); /** Used for the foreground of a default navigation item in the focus state. */
   --gl-nav-item-background-color-focus: var(--gl-nav-item-background-color-hover); /** Used for the background of a default navigation item in the focus state. */
+  --gl-nav-item-selected-foreground-color-default: var(--gl-nav-item-foreground-color-hover); /** Used for the foreground of a selected navigation item in the default state. */
   --gl-nav-item-selected-foreground-color-hover: var(--gl-nav-item-foreground-color-hover); /** Used for the foreground of a selected navigation item in the hover state. */
   --gl-nav-item-selected-background-color-hover: var(--gl-nav-item-background-color-hover); /** Used for the background of a selected navigation item in the hover state. */
   --gl-nav-item-selected-background-color-active: var(--gl-nav-item-background-color-active); /** Used for the background of a selected navigation item in the active state. */
@@ -1081,12 +1081,14 @@
   --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /** Used for the background of a strong neutral action in the focus state. */
   --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /** Used for the border of a strong neutral action in the hover state. */
   --gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-hover); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background on focus. */
+  --gl-control-background-color-selected-disabled: var(--gl-action-selected-background-color-disabled); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) background when disabled. */
   --gl-control-border-color-error: var(--gl-feedback-danger-border-color); /** Used for invalid form control (input, textarea) border. */
   --gl-control-border-color-selected-default: var(--gl-control-background-color-selected-default); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */
   --gl-control-border-color-selected-hover: var(--gl-control-background-color-selected-hover); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */
   --gl-control-border-radius: var(--gl-border-radius-lg); /** Used for form control (input, radio button, checkbox, textarea) default border radius. */
   --gl-control-text-color-error: var(--gl-text-color-danger); /** Used for the helper text when the input is invalid. */
   --gl-control-text-color-valid: var(--gl-text-color-success); /** Used for the helper text when the input is valid. */
+  --gl-control-indicator-color-disabled: var(--gl-control-indicator-color-selected); /** Used for disabled checkbox and radio button state indicators. */
   --gl-feedback-border-radius: var(--gl-border-radius-lg); /** Used for the border radius of a feedback element. */
   --gl-focus-ring-inner-color: var(--gl-background-color-default); /** Used for the inner neutral portion of the focus ring. */
   --gl-icon-color-default: var(--gl-text-color-default); /** Used for the default icon color. Can be paired with default text. */
@@ -1264,6 +1266,7 @@
   --gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-hover); /** Used for the border of a strong confirm action in the focus state. */
   --gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-hover); /** Used for the border of a strong neutral action in the focus state. */
   --gl-control-border-color-selected-focus: var(--gl-control-background-color-selected-focus); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
+  --gl-control-border-color-selected-disabled: var(--gl-control-background-color-selected-disabled); /** Used for checked and indeterminate (selected) form control (checkbox, radio button) border when disabled. */
   --gl-button-confirm-primary-foreground-color-active: var(--gl-button-confirm-primary-foreground-color-focus); /** Used for the foreground of a confirm (positive) primary button in the active state. */
   --gl-nav-item-selected-foreground-color-active: var(--gl-nav-item-foreground-color-active); /** Used for the foreground of a selected navigation item in the active state. */
   --gl-toggle-switch-track-color-unchecked-focus: var(--gl-toggle-switch-track-color-unchecked-hover); /** Used for the track color of an unchecked toggle switch in the focus state. The track is deliberately unchanged from the default state; focus is carried by the focus ring, the track border and the thumb size. */

package/src/tokens/build/docs/tokens-tailwind-docs.dark.json

@@ -5903,7 +5903,7 @@
         "key": "{control.background.color.disabled}",
         "$value": "rgba(255, 255, 255, 0.04)",
         "$type": "color",
-        "$description": "Used for disabled form control (checkbox, input, radio button, textarea) background.",
+        "$description": "Used for disabled form control (input, textarea) background.",
         "$extensions": {
           "com.figma.scopes": [
             "FRAME_FILL",
@@ -5915,7 +5915,7 @@
         "original": {
           "$value": "{color.alpha.light.4}",
           "$type": "color",
-          "$description": "Used for disabled form control (checkbox, input, radio button, textarea) background.",
+          "$description": "Used for disabled form control (input, textarea) background.",
           "$extensions": {
             "com.figma.scopes": [
               "FRAME_FILL",

package/src/tokens/build/docs/tokens-tailwind-docs.json

@@ -5903,7 +5903,7 @@
         "key": "{control.background.color.disabled}",
         "$value": "#f7f7f5",
         "$type": "color",
-        "$description": "Used for disabled form control (checkbox, input, radio button, textarea) background.",
+        "$description": "Used for disabled form control (input, textarea) background.",
         "$extensions": {
           "com.figma.scopes": [
             "FRAME_FILL",
@@ -5915,7 +5915,7 @@
         "original": {
           "$value": "{color.neutral.10}",
           "$type": "color",
-          "$description": "Used for disabled form control (checkbox, input, radio button, textarea) background.",
+          "$description": "Used for disabled form control (input, textarea) background.",
           "$extensions": {
             "com.figma.scopes": [
               "FRAME_FILL",

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

@@ -4913,7 +4913,7 @@
     }
   },
   "🔒/nav-item-background-color-hover": {
-    "$value": "{color-neutral-900}",
+    "$value": "{color-neutral-800}",
     "$type": "color",
     "$description": "Used for the background of a default navigation item in the hover state.",
     "$extensions": {
@@ -4953,7 +4953,7 @@
     }
   },
   "🔒/nav-item-selected-foreground-color-default": {
-    "$value": "{color-neutral-0}",
+    "$value": "{🔒/nav-item-foreground-color-hover}",
     "$type": "color",
     "$description": "Used for the foreground of a selected navigation item in the default state.",
     "$extensions": {
@@ -4993,7 +4993,7 @@
     }
   },
   "🔒/nav-item-selected-background-color-default": {
-    "$value": "{color-neutral-900}",
+    "$value": "{color-neutral-800}",
     "$type": "color",
     "$description": "Used for the background of a selected navigation item in the default state.",
     "$extensions": {
@@ -5032,6 +5032,16 @@
       ]
     }
   },
+  "🔒/nav-item-selected-indicator-color": {
+    "$value": "{color-orange-300}",
+    "$type": "color",
+    "$description": "Used for the indicator beside a selected navigation item. Tinted themes override it in src/scss/themes.scss.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL"
+      ]
+    }
+  },
   "🔒/progress-bar-indicator-color-default": {
     "$value": "{status-info-icon-color}",
     "$type": "color",
@@ -6608,7 +6618,7 @@
   "control-background-color-disabled": {
     "$value": "{color-alpha-light-4}",
     "$type": "color",
-    "$description": "Used for disabled form control (checkbox, input, radio button, textarea) background.",
+    "$description": "Used for disabled form control (input, textarea) background.",
     "$extensions": {
       "com.figma.scopes": [
         "FRAME_FILL",
@@ -6671,6 +6681,17 @@
       ]
     }
   },
+  "control-background-color-selected-disabled": {
+    "$value": "{action-selected-background-color-disabled}",
+    "$type": "color",
+    "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background when disabled.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "FRAME_FILL",
+        "SHAPE_FILL"
+      ]
+    }
+  },
   "control-border-color-default": {
     "$value": "{color-neutral-500}",
     "$type": "color",
@@ -6751,6 +6772,16 @@
       ]
     }
   },
+  "control-border-color-selected-disabled": {
+    "$value": "{control-background-color-selected-disabled}",
+    "$type": "color",
+    "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border when disabled.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
   "control-border-radius": {
     "$value": "{border-radius-lg}",
     "$type": "dimension",
@@ -6803,7 +6834,7 @@
     }
   },
   "control-indicator-color-disabled": {
-    "$value": "{color-neutral-400}",
+    "$value": "{control-indicator-color-selected}",
     "$type": "color",
     "$description": "Used for disabled checkbox and radio button state indicators.",
     "$extensions": {

package/src/tokens/build/figma/mode.json

@@ -4897,7 +4897,7 @@
     }
   },
   "🔒/nav-item-selected-foreground-color-default": {
-    "$value": "{color-neutral-950}",
+    "$value": "{🔒/nav-item-foreground-color-hover}",
     "$type": "color",
     "$description": "Used for the foreground of a selected navigation item in the default state.",
     "$extensions": {
@@ -4976,6 +4976,16 @@
       ]
     }
   },
+  "🔒/nav-item-selected-indicator-color": {
+    "$value": "{color-orange-500}",
+    "$type": "color",
+    "$description": "Used for the indicator beside a selected navigation item. Tinted themes override it in src/scss/themes.scss.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "SHAPE_FILL"
+      ]
+    }
+  },
   "🔒/progress-bar-indicator-color-default": {
     "$value": "{status-info-icon-color}",
     "$type": "color",
@@ -6544,7 +6554,7 @@
   "control-background-color-disabled": {
     "$value": "{color-neutral-10}",
     "$type": "color",
-    "$description": "Used for disabled form control (checkbox, input, radio button, textarea) background.",
+    "$description": "Used for disabled form control (input, textarea) background.",
     "$extensions": {
       "com.figma.scopes": [
         "FRAME_FILL",
@@ -6607,6 +6617,17 @@
       ]
     }
   },
+  "control-background-color-selected-disabled": {
+    "$value": "{action-selected-background-color-disabled}",
+    "$type": "color",
+    "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background when disabled.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "FRAME_FILL",
+        "SHAPE_FILL"
+      ]
+    }
+  },
   "control-border-color-default": {
     "$value": "{color-neutral-400}",
     "$type": "color",
@@ -6687,6 +6708,16 @@
       ]
     }
   },
+  "control-border-color-selected-disabled": {
+    "$value": "{control-background-color-selected-disabled}",
+    "$type": "color",
+    "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border when disabled.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "STROKE_COLOR"
+      ]
+    }
+  },
   "control-border-radius": {
     "$value": "{border-radius-lg}",
     "$type": "dimension",
@@ -6739,7 +6770,7 @@
     }
   },
   "control-indicator-color-disabled": {
-    "$value": "{color-neutral-500}",
+    "$value": "{control-indicator-color-selected}",
     "$type": "color",
     "$description": "Used for disabled checkbox and radio button state indicators.",
     "$extensions": {

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

@@ -777,18 +777,19 @@ export const GL_NAV_ITEM_FOREGROUND_COLOR_HOVER = '#fff';
 export const GL_NAV_ITEM_FOREGROUND_COLOR_FOCUS = '#fff';
 export const GL_NAV_ITEM_FOREGROUND_COLOR_ACTIVE = '#fff';
 export const GL_NAV_ITEM_BACKGROUND_COLOR_DEFAULT = 'rgba(0, 0, 0, 0)';
-export const GL_NAV_ITEM_BACKGROUND_COLOR_HOVER = '#28272d';
-export const GL_NAV_ITEM_BACKGROUND_COLOR_FOCUS = '#28272d';
+export const GL_NAV_ITEM_BACKGROUND_COLOR_HOVER = '#3a383d';
+export const GL_NAV_ITEM_BACKGROUND_COLOR_FOCUS = '#3a383d';
 export const GL_NAV_ITEM_BACKGROUND_COLOR_ACTIVE = '#18171d';
 export const GL_NAV_ITEM_SELECTED_FONT_WEIGHT = 600;
 export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_DEFAULT = '#fff';
 export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_HOVER = '#fff';
 export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_FOCUS = '#fff';
 export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_ACTIVE = '#fff';
-export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_DEFAULT = '#28272d';
-export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_HOVER = '#28272d';
-export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_FOCUS = '#28272d';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_DEFAULT = '#3a383d';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_HOVER = '#3a383d';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_FOCUS = '#3a383d';
 export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_ACTIVE = '#18171d';
+export const GL_NAV_ITEM_SELECTED_INDICATOR_COLOR = '#fb8017';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#64a7e9';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#35b597';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#fb8017';
@@ -1089,6 +1090,7 @@ export const GL_CONTROL_BACKGROUND_COLOR_READONLY = 'rgba(255, 255, 255, 0.08)';
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#ecebea';
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#f7f7f5';
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#f7f7f5';
+export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DISABLED = '#747273';
 export const GL_CONTROL_BORDER_COLOR_DEFAULT = '#747273';
 export const GL_CONTROL_BORDER_COLOR_HOVER = '#a5a3a3';
 export const GL_CONTROL_BORDER_COLOR_FOCUS = '#ecebea';
@@ -1097,12 +1099,13 @@ export const GL_CONTROL_BORDER_COLOR_ERROR = '#fc7988';
 export const GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT = '#ecebea';
 export const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = '#f7f7f5';
 export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#f7f7f5';
+export const GL_CONTROL_BORDER_COLOR_SELECTED_DISABLED = '#747273';
 export const GL_CONTROL_BORDER_RADIUS = '0.5rem';
 export const GL_CONTROL_TEXT_COLOR_ERROR = '#fc7988';
 export const GL_CONTROL_TEXT_COLOR_VALID = '#35b597';
 export const GL_CONTROL_PLACEHOLDER_COLOR = '#8a8888';
 export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#18171d';
-export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#8a8888';
+export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#18171d';
 export const GL_FEEDBACK_BORDER_RADIUS = '0.5rem';
 export const GL_FEEDBACK_STRONG_BACKGROUND_COLOR = '#3a383d';
 export const GL_FEEDBACK_STRONG_BORDER_COLOR = '#a5a3a3';

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

@@ -789,6 +789,7 @@ export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_DEFAULT = '#dcdbd9';
 export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_HOVER = '#dcdbd9';
 export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_FOCUS = '#dcdbd9';
 export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_ACTIVE = '#c1bfbe';
+export const GL_NAV_ITEM_SELECTED_INDICATOR_COLOR = '#c74816';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#1f73ca';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#0d8070';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#c74816';
@@ -1089,6 +1090,7 @@ export const GL_CONTROL_BACKGROUND_COLOR_READONLY = 'rgba(5, 5, 6, 0.02)';
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#3a383d';
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#18171d';
 export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#18171d';
+export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DISABLED = '#8a8888';
 export const GL_CONTROL_BORDER_COLOR_DEFAULT = '#8a8888';
 export const GL_CONTROL_BORDER_COLOR_HOVER = '#646163';
 export const GL_CONTROL_BORDER_COLOR_FOCUS = '#28272d';
@@ -1097,12 +1099,13 @@ export const GL_CONTROL_BORDER_COLOR_ERROR = '#de1d4b';
 export const GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT = '#3a383d';
 export const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = '#18171d';
 export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#18171d';
+export const GL_CONTROL_BORDER_COLOR_SELECTED_DISABLED = '#8a8888';
 export const GL_CONTROL_BORDER_RADIUS = '0.5rem';
 export const GL_CONTROL_TEXT_COLOR_ERROR = '#c52042';
 export const GL_CONTROL_TEXT_COLOR_VALID = '#0c7265';
 export const GL_CONTROL_PLACEHOLDER_COLOR = '#747273';
 export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#fff';
-export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#747273';
+export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#fff';
 export const GL_FEEDBACK_BORDER_RADIUS = '0.5rem';
 export const GL_FEEDBACK_STRONG_BACKGROUND_COLOR = '#3a383d';
 export const GL_FEEDBACK_STRONG_BORDER_COLOR = '#050408';