@gitlab/ui 138.3.0 → 138.4.0

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

@@ -23113,7 +23113,7 @@
           },
           "hover": {
             "key": "{nav.item.background.color.hover}",
-            "$value": "#28272d",
+            "$value": "#3a383d",
             "$type": "color",
             "$description": "Used for the background of a default navigation item in the hover state.",
             "$extensions": {
@@ -23124,7 +23124,7 @@
             "filePath": "src/tokens/contextual/nav.tokens.json",
             "isSource": true,
             "original": {
-              "$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": {
@@ -23146,7 +23146,7 @@
           },
           "focus": {
             "key": "{nav.item.background.color.focus}",
-            "$value": "#28272d",
+            "$value": "#3a383d",
             "$type": "color",
             "$description": "Used for the background of a default navigation item in the focus state.",
             "$extensions": {
@@ -23263,7 +23263,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$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": {
@@ -23392,7 +23392,7 @@
           "color": {
             "default": {
               "key": "{nav.item.selected.background.color.default}",
-              "$value": "#28272d",
+              "$value": "#3a383d",
               "$type": "color",
               "$description": "Used for the background of a selected navigation item in the default state.",
               "$extensions": {
@@ -23403,7 +23403,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$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": {
@@ -23426,7 +23426,7 @@
             },
             "hover": {
               "key": "{nav.item.selected.background.color.hover}",
-              "$value": "#28272d",
+              "$value": "#3a383d",
               "$type": "color",
               "$description": "Used for the background of a selected navigation item in the hover state.",
               "$extensions": {
@@ -23460,7 +23460,7 @@
             },
             "focus": {
               "key": "{nav.item.selected.background.color.focus}",
-              "$value": "#28272d",
+              "$value": "#3a383d",
               "$type": "color",
               "$description": "Used for the background of a selected navigation item in the focus state.",
               "$extensions": {
@@ -23527,6 +23527,41 @@
               ]
             }
           }
+        },
+        "indicator": {
+          "color": {
+            "key": "{nav.item.selected.indicator.color}",
+            "$value": "#fb8017",
+            "$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"
+              ]
+            },
+            "filePath": "src/tokens/contextual/nav.tokens.json",
+            "isSource": true,
+            "original": {
+              "$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"
+                ]
+              },
+              "key": "{nav.item.selected.indicator.color}"
+            },
+            "name": "NAV_ITEM_SELECTED_INDICATOR_COLOR",
+            "attributes": {},
+            "path": [
+              "nav",
+              "item",
+              "selected",
+              "indicator",
+              "color"
+            ]
+          }
         }
       }
     }
@@ -33367,7 +33402,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",
@@ -33379,7 +33414,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",
@@ -33570,6 +33605,41 @@
               "selected",
               "focus"
             ]
+          },
+          "disabled": {
+            "key": "{control.background.color.selected.disabled}",
+            "$value": "#747273",
+            "$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"
+              ]
+            },
+            "filePath": "src/tokens/semantic/control.tokens.json",
+            "isSource": true,
+            "original": {
+              "$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"
+                ]
+              },
+              "key": "{control.background.color.selected.disabled}"
+            },
+            "name": "CONTROL_BACKGROUND_COLOR_SELECTED_DISABLED",
+            "attributes": {},
+            "path": [
+              "control",
+              "background",
+              "color",
+              "selected",
+              "disabled"
+            ]
           }
         }
       }
@@ -33835,6 +33905,39 @@
               "selected",
               "focus"
             ]
+          },
+          "disabled": {
+            "key": "{control.border.color.selected.disabled}",
+            "$value": "#747273",
+            "$type": "color",
+            "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border when disabled.",
+            "$extensions": {
+              "com.figma.scopes": [
+                "STROKE_COLOR"
+              ]
+            },
+            "filePath": "src/tokens/semantic/control.tokens.json",
+            "isSource": true,
+            "original": {
+              "$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"
+                ]
+              },
+              "key": "{control.border.color.selected.disabled}"
+            },
+            "name": "CONTROL_BORDER_COLOR_SELECTED_DISABLED",
+            "attributes": {},
+            "path": [
+              "control",
+              "border",
+              "color",
+              "selected",
+              "disabled"
+            ]
           }
         }
       },
@@ -34009,7 +34112,7 @@
         },
         "disabled": {
           "key": "{control.indicator.color.disabled}",
-          "$value": "#8a8888",
+          "$value": "#18171d",
           "$type": "color",
           "$description": "Used for disabled checkbox and radio button state indicators.",
           "$extensions": {
@@ -34021,7 +34124,7 @@
           "filePath": "src/tokens/semantic/control.tokens.json",
           "isSource": true,
           "original": {
-            "$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/json/tokens.json

@@ -23263,7 +23263,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$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": {
@@ -23527,6 +23527,41 @@
               ]
             }
           }
+        },
+        "indicator": {
+          "color": {
+            "key": "{nav.item.selected.indicator.color}",
+            "$value": "#c74816",
+            "$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"
+              ]
+            },
+            "filePath": "src/tokens/contextual/nav.tokens.json",
+            "isSource": true,
+            "original": {
+              "$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"
+                ]
+              },
+              "key": "{nav.item.selected.indicator.color}"
+            },
+            "name": "NAV_ITEM_SELECTED_INDICATOR_COLOR",
+            "attributes": {},
+            "path": [
+              "nav",
+              "item",
+              "selected",
+              "indicator",
+              "color"
+            ]
+          }
         }
       }
     }
@@ -33367,7 +33402,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",
@@ -33379,7 +33414,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",
@@ -33570,6 +33605,41 @@
               "selected",
               "focus"
             ]
+          },
+          "disabled": {
+            "key": "{control.background.color.selected.disabled}",
+            "$value": "#8a8888",
+            "$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"
+              ]
+            },
+            "filePath": "src/tokens/semantic/control.tokens.json",
+            "isSource": true,
+            "original": {
+              "$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"
+                ]
+              },
+              "key": "{control.background.color.selected.disabled}"
+            },
+            "name": "CONTROL_BACKGROUND_COLOR_SELECTED_DISABLED",
+            "attributes": {},
+            "path": [
+              "control",
+              "background",
+              "color",
+              "selected",
+              "disabled"
+            ]
           }
         }
       }
@@ -33835,6 +33905,39 @@
               "selected",
               "focus"
             ]
+          },
+          "disabled": {
+            "key": "{control.border.color.selected.disabled}",
+            "$value": "#8a8888",
+            "$type": "color",
+            "$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border when disabled.",
+            "$extensions": {
+              "com.figma.scopes": [
+                "STROKE_COLOR"
+              ]
+            },
+            "filePath": "src/tokens/semantic/control.tokens.json",
+            "isSource": true,
+            "original": {
+              "$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"
+                ]
+              },
+              "key": "{control.border.color.selected.disabled}"
+            },
+            "name": "CONTROL_BORDER_COLOR_SELECTED_DISABLED",
+            "attributes": {},
+            "path": [
+              "control",
+              "border",
+              "color",
+              "selected",
+              "disabled"
+            ]
           }
         }
       },
@@ -34009,7 +34112,7 @@
         },
         "disabled": {
           "key": "{control.indicator.color.disabled}",
-          "$value": "#747273",
+          "$value": "#fff",
           "$type": "color",
           "$description": "Used for disabled checkbox and radio button state indicators.",
           "$extensions": {
@@ -34021,7 +34124,7 @@
           "filePath": "src/tokens/semantic/control.tokens.json",
           "isSource": true,
           "original": {
-            "$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/scss/_tokens.dark.scss

@@ -655,11 +655,11 @@ $gl-nav-item-font-size: $gl-font-size-300; // Used for the font size of a naviga
 $gl-nav-item-foreground-color-default: $gl-color-neutral-200; // Used for the foreground of a default navigation item in the default state.
 $gl-nav-item-foreground-color-hover: $gl-color-neutral-0; // Used for the foreground of a default navigation item in the hover state.
 $gl-nav-item-background-color-default: $gl-color-alpha-0; // Used for the background of a default navigation item in the default state.
-$gl-nav-item-background-color-hover: $gl-color-neutral-900; // Used for the background of a default navigation item in the hover state.
+$gl-nav-item-background-color-hover: $gl-color-neutral-800; // Used for the background of a default navigation item in the hover state.
 $gl-nav-item-background-color-active: $gl-color-neutral-950; // Used for the background of a default navigation item in the active state.
 $gl-nav-item-selected-font-weight: $gl-font-weight-bold; // Used for the font weight of a selected navigation item.
-$gl-nav-item-selected-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a selected navigation item in the default state.
-$gl-nav-item-selected-background-color-default: $gl-color-neutral-900; // Used for the background of a selected navigation item in the default state.
+$gl-nav-item-selected-background-color-default: $gl-color-neutral-800; // Used for the background of a selected navigation item in the default state.
+$gl-nav-item-selected-indicator-color: $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: $gl-color-neutral-700; // Used for the track color for all progress-bar variants.
 $gl-skeleton-loader-background-color: $gl-color-neutral-800; // Used for the skeleton loader background color.
 $gl-skeleton-loader-shimmer-color: $gl-color-neutral-700; // Used for the animated shimmer effect in a skeleton loader.
@@ -780,7 +780,7 @@ $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disa
 $gl-background-color-overlap: $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: $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: $gl-color-alpha-dark-40; // Used for form control (input, radio button, checkbox, textarea) default background.
-$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-disabled: $gl-color-alpha-light-4; // Used for disabled form control (input, textarea) background.
 $gl-control-background-color-concatenation: $gl-color-alpha-light-4; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-readonly: $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: $gl-color-neutral-50; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
@@ -791,7 +791,6 @@ $gl-control-border-color-focus: $gl-color-neutral-50; // Used for form control (
 $gl-control-border-color-disabled: $gl-color-neutral-800; // Used for disabled form control (input, radio button, checkbox, textarea) border.
 $gl-control-placeholder-color: $gl-color-neutral-400; // Used for placeholder text within inputs.
 $gl-control-indicator-color-selected: $gl-color-neutral-950; // Used for checkbox and radio button state indicators.
-$gl-control-indicator-color-disabled: $gl-color-neutral-400; // Used for disabled checkbox and radio button state indicators.
 $gl-feedback-strong-background-color: $gl-color-neutral-800; // Used for a background associated with strong feedback like a tooltip or toast message.
 $gl-feedback-strong-border-color: $gl-color-neutral-300; // Used for the border associated with strong feedback.
 $gl-feedback-strong-text-color: $gl-color-neutral-0; // Used for text on a strong feedback background.
@@ -1021,6 +1020,7 @@ $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-backgro
 $gl-modal-border-radius: $gl-border-radius-2xl; // Used for modal border radius.
 $gl-nav-item-foreground-color-focus: $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: $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: $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: $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: $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: $gl-nav-item-background-color-active; // Used for the background of a selected navigation item in the active state.
@@ -1079,12 +1079,14 @@ $gl-action-strong-confirm-border-color-hover: $gl-action-strong-confirm-border-c
 $gl-action-strong-neutral-background-color-focus: $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: $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: $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: $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: $gl-feedback-danger-border-color; // Used for invalid form control (input, textarea) border.
 $gl-control-border-color-selected-default: $gl-control-background-color-selected-default; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
 $gl-control-border-color-selected-hover: $gl-control-background-color-selected-hover; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
 $gl-control-border-radius: $gl-border-radius-lg; // Used for form control (input, radio button, checkbox, textarea) default border radius.
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
+$gl-control-indicator-color-disabled: $gl-control-indicator-color-selected; // Used for disabled checkbox and radio button state indicators.
 $gl-feedback-border-radius: $gl-border-radius-lg; // Used for the border radius of a feedback element.
 $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
 $gl-icon-color-default: $gl-text-color-default; // Used for the default icon color. Can be paired with default text.
@@ -1262,6 +1264,7 @@ $gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-fore
 $gl-action-strong-confirm-border-color-focus: $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: $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: $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: $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: $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: $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: $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/scss/_tokens.scss

@@ -640,8 +640,8 @@ $gl-nav-item-background-color-default: $gl-color-alpha-0; // Used for the backgr
 $gl-nav-item-background-color-hover: $gl-color-neutral-100; // Used for the background of a default navigation item in the hover state.
 $gl-nav-item-background-color-active: $gl-color-neutral-200; // Used for the background of a default navigation item in the active state.
 $gl-nav-item-selected-font-weight: $gl-font-weight-bold; // Used for the font weight of a selected navigation item.
-$gl-nav-item-selected-foreground-color-default: $gl-color-neutral-950; // Used for the foreground of a selected navigation item in the default state.
 $gl-nav-item-selected-background-color-default: $gl-color-neutral-100; // Used for the background of a selected navigation item in the default state.
+$gl-nav-item-selected-indicator-color: $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: $gl-color-neutral-200; // Used for the track color for all progress-bar variants.
 $gl-skeleton-loader-background-color: $gl-color-neutral-100; // Used for the skeleton loader background color.
 $gl-skeleton-loader-shimmer-color: $gl-color-neutral-50; // Used for the animated shimmer effect in a skeleton loader.
@@ -764,7 +764,7 @@ $gl-background-color-overlap: $gl-color-neutral-0; // Used for components, like
 $gl-background-color-section: $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: $gl-color-alpha-dark-24; // Used for an overlay that covers other content.
 $gl-control-background-color-default: $gl-color-neutral-0; // Used for form control (input, radio button, checkbox, textarea) default 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-disabled: $gl-color-neutral-10; // Used for disabled form control (input, textarea) background.
 $gl-control-background-color-concatenation: $gl-color-neutral-10; // Used for the background of static content that prepends or appends a text input.
 $gl-control-background-color-readonly: $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: $gl-color-neutral-800; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
@@ -775,7 +775,6 @@ $gl-control-border-color-focus: $gl-color-neutral-900; // Used for form control
 $gl-control-border-color-disabled: $gl-color-neutral-100; // Used for disabled form control (input, radio button, checkbox, textarea) border.
 $gl-control-placeholder-color: $gl-color-neutral-500; // Used for placeholder text within inputs.
 $gl-control-indicator-color-selected: $gl-color-neutral-0; // Used for checkbox and radio button state indicators.
-$gl-control-indicator-color-disabled: $gl-color-neutral-500; // Used for disabled checkbox and radio button state indicators.
 $gl-feedback-strong-background-color: $gl-color-neutral-800; // Used for a background associated with strong feedback like a tooltip or toast message.
 $gl-feedback-strong-border-color: $gl-color-neutral-1000; // Used for the border associated with strong feedback.
 $gl-feedback-strong-text-color: $gl-color-neutral-0; // Used for text on a strong feedback background.
@@ -1014,6 +1013,7 @@ $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-backgro
 $gl-modal-border-radius: $gl-border-radius-2xl; // Used for modal border radius.
 $gl-nav-item-foreground-color-focus: $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: $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: $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: $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: $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: $gl-nav-item-background-color-active; // Used for the background of a selected navigation item in the active state.
@@ -1073,12 +1073,14 @@ $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-back
 $gl-action-strong-neutral-foreground-color-hover: $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: $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: $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: $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: $gl-feedback-danger-border-color; // Used for invalid form control (input, textarea) border.
 $gl-control-border-color-selected-default: $gl-control-background-color-selected-default; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
 $gl-control-border-color-selected-hover: $gl-control-background-color-selected-hover; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
 $gl-control-border-radius: $gl-border-radius-lg; // Used for form control (input, radio button, checkbox, textarea) default border radius.
 $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
 $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
+$gl-control-indicator-color-disabled: $gl-control-indicator-color-selected; // Used for disabled checkbox and radio button state indicators.
 $gl-feedback-border-radius: $gl-border-radius-lg; // Used for the border radius of a feedback element.
 $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
 $gl-icon-color-default: $gl-text-color-default; // Used for the default icon color. Can be paired with default text.
@@ -1261,6 +1263,7 @@ $gl-action-strong-confirm-border-color-focus: $gl-action-strong-confirm-border-c
 $gl-action-strong-neutral-foreground-color-focus: $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: $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: $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: $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: $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: $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: $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/scss/_tokens_custom_properties.scss

@@ -699,6 +699,7 @@ $gl-nav-item-selected-background-color-default: var(--gl-nav-item-selected-backg
 $gl-nav-item-selected-background-color-hover: var(--gl-nav-item-selected-background-color-hover);
 $gl-nav-item-selected-background-color-focus: var(--gl-nav-item-selected-background-color-focus);
 $gl-nav-item-selected-background-color-active: var(--gl-nav-item-selected-background-color-active);
+$gl-nav-item-selected-indicator-color: var(--gl-nav-item-selected-indicator-color);
 $gl-progress-bar-indicator-color-default: var(--gl-progress-bar-indicator-color-default);
 $gl-progress-bar-indicator-color-success: var(--gl-progress-bar-indicator-color-success);
 $gl-progress-bar-indicator-color-warning: var(--gl-progress-bar-indicator-color-warning);
@@ -999,6 +1000,7 @@ $gl-control-background-color-readonly: var(--gl-control-background-color-readonl
 $gl-control-background-color-selected-default: var(--gl-control-background-color-selected-default);
 $gl-control-background-color-selected-hover: var(--gl-control-background-color-selected-hover);
 $gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-focus);
+$gl-control-background-color-selected-disabled: var(--gl-control-background-color-selected-disabled);
 $gl-control-border-color-default: var(--gl-control-border-color-default);
 $gl-control-border-color-hover: var(--gl-control-border-color-hover);
 $gl-control-border-color-focus: var(--gl-control-border-color-focus);
@@ -1007,6 +1009,7 @@ $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-border-color-selected-disabled: var(--gl-control-border-color-selected-disabled);
 $gl-control-border-radius: var(--gl-control-border-radius);
 $gl-control-text-color-error: var(--gl-control-text-color-error);
 $gl-control-text-color-valid: var(--gl-control-text-color-valid);

package/src/tokens/contextual/nav.tokens.json

@@ -100,7 +100,7 @@
           "hover": {
             "$value": {
               "default": "{color.neutral.100}",
-              "dark": "{color.neutral.900}"
+              "dark": "{color.neutral.800}"
             },
             "$type": "color",
             "$description": "Used for the background of a default navigation item in the hover state.",
@@ -151,10 +151,7 @@
         "foreground": {
           "color": {
             "default": {
-              "$value": {
-                "default": "{color.neutral.950}",
-                "dark": "{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": {
@@ -200,7 +197,7 @@
             "default": {
               "$value": {
                 "default": "{color.neutral.100}",
-                "dark": "{color.neutral.900}"
+                "dark": "{color.neutral.800}"
               },
               "$type": "color",
               "$description": "Used for the background of a selected navigation item in the default state.",
@@ -241,6 +238,21 @@
               }
             }
           }
+        },
+        "indicator": {
+          "color": {
+            "$value": {
+              "default": "{color.orange.500}",
+              "dark": "{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"
+              ]
+            }
+          }
         }
       }
     }