@gitlab/ui 136.0.0 → 136.2.0

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

@@ -22747,7 +22747,7 @@
         "color": {
           "default": {
             "key": "{nav.item.foreground.color.default}",
-            "$value": "#28272d",
+            "$value": "#626168",
             "$type": "color",
             "$description": "Used for the foreground of a default navigation item in the default state.",
             "$extensions": {
@@ -22758,7 +22758,7 @@
             "filePath": "src/tokens/contextual/nav.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{action.neutral.foreground.color.default}",
+              "$value": "{color.neutral.600}",
               "$type": "color",
               "$description": "Used for the foreground of a default navigation item in the default state.",
               "$extensions": {
@@ -22780,7 +22780,7 @@
           },
           "hover": {
             "key": "{nav.item.foreground.color.hover}",
-            "$value": "#28272d",
+            "$value": "#18171d",
             "$type": "color",
             "$description": "Used for the foreground of a default navigation item in the hover state.",
             "$extensions": {
@@ -22791,7 +22791,7 @@
             "filePath": "src/tokens/contextual/nav.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{action.neutral.foreground.color.hover}",
+              "$value": "{color.neutral.950}",
               "$type": "color",
               "$description": "Used for the foreground of a default navigation item in the hover state.",
               "$extensions": {
@@ -22813,7 +22813,7 @@
           },
           "focus": {
             "key": "{nav.item.foreground.color.focus}",
-            "$value": "#28272d",
+            "$value": "#18171d",
             "$type": "color",
             "$description": "Used for the foreground of a default navigation item in the focus state.",
             "$extensions": {
@@ -22824,7 +22824,7 @@
             "filePath": "src/tokens/contextual/nav.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{action.neutral.foreground.color.focus}",
+              "$value": "{nav.item.foreground.color.hover}",
               "$type": "color",
               "$description": "Used for the foreground of a default navigation item in the focus state.",
               "$extensions": {
@@ -22846,7 +22846,7 @@
           },
           "active": {
             "key": "{nav.item.foreground.color.active}",
-            "$value": "#28272d",
+            "$value": "#18171d",
             "$type": "color",
             "$description": "Used for the foreground of a default navigation item in the active state.",
             "$extensions": {
@@ -22857,7 +22857,7 @@
             "filePath": "src/tokens/contextual/nav.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{action.neutral.foreground.color.active}",
+              "$value": "{nav.item.foreground.color.focus}",
               "$type": "color",
               "$description": "Used for the foreground of a default navigation item in the active state.",
               "$extensions": {
@@ -22894,7 +22894,7 @@
             "filePath": "src/tokens/contextual/nav.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{action.neutral.background.color.default}",
+              "$value": "{color.alpha.0}",
               "$type": "color",
               "$description": "Used for the background of a default navigation item in the default state.",
               "$extensions": {
@@ -22916,7 +22916,7 @@
           },
           "hover": {
             "key": "{nav.item.background.color.hover}",
-            "$value": "rgba(5, 5, 6, 0.06)",
+            "$value": "#dcdcde",
             "$type": "color",
             "$description": "Used for the background of a default navigation item in the hover state.",
             "$extensions": {
@@ -22927,7 +22927,7 @@
             "filePath": "src/tokens/contextual/nav.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{action.neutral.background.color.hover}",
+              "$value": "{color.neutral.100}",
               "$type": "color",
               "$description": "Used for the background of a default navigation item in the hover state.",
               "$extensions": {
@@ -22949,7 +22949,7 @@
           },
           "focus": {
             "key": "{nav.item.background.color.focus}",
-            "$value": "rgba(5, 5, 6, 0.06)",
+            "$value": "#dcdcde",
             "$type": "color",
             "$description": "Used for the background of a default navigation item in the focus state.",
             "$extensions": {
@@ -22960,7 +22960,7 @@
             "filePath": "src/tokens/contextual/nav.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{action.neutral.background.color.focus}",
+              "$value": "{nav.item.background.color.hover}",
               "$type": "color",
               "$description": "Used for the background of a default navigation item in the focus state.",
               "$extensions": {
@@ -22982,7 +22982,7 @@
           },
           "active": {
             "key": "{nav.item.background.color.active}",
-            "$value": "rgba(5, 5, 6, 0.16)",
+            "$value": "#bfbfc3",
             "$type": "color",
             "$description": "Used for the background of a default navigation item in the active state.",
             "$extensions": {
@@ -22993,7 +22993,7 @@
             "filePath": "src/tokens/contextual/nav.tokens.json",
             "isSource": true,
             "original": {
-              "$value": "{action.neutral.background.color.active}",
+              "$value": "{color.neutral.200}",
               "$type": "color",
               "$description": "Used for the background of a default navigation item in the active state.",
               "$extensions": {
@@ -23016,11 +23016,46 @@
         }
       },
       "selected": {
+        "font": {
+          "weight": {
+            "key": "{nav.item.selected.font.weight}",
+            "$value": 600,
+            "$type": "fontWeight",
+            "$description": "Used for the font weight of a selected navigation item.",
+            "$extensions": {
+              "com.figma.scopes": [
+                "FONT_WEIGHT"
+              ]
+            },
+            "filePath": "src/tokens/contextual/nav.tokens.json",
+            "isSource": true,
+            "original": {
+              "$value": "{font.weight.bold}",
+              "$type": "fontWeight",
+              "$description": "Used for the font weight of a selected navigation item.",
+              "$extensions": {
+                "com.figma.scopes": [
+                  "FONT_WEIGHT"
+                ]
+              },
+              "key": "{nav.item.selected.font.weight}"
+            },
+            "name": "NAV_ITEM_SELECTED_FONT_WEIGHT",
+            "attributes": {},
+            "path": [
+              "nav",
+              "item",
+              "selected",
+              "font",
+              "weight"
+            ]
+          }
+        },
         "foreground": {
           "color": {
             "default": {
               "key": "{nav.item.selected.foreground.color.default}",
-              "$value": "#fff",
+              "$value": "#18171d",
               "$type": "color",
               "$description": "Used for the foreground of a selected navigation item in the default state.",
               "$extensions": {
@@ -23031,7 +23066,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{action.selected.foreground.color.default}",
+                "$value": "{color.neutral.950}",
                 "$type": "color",
                 "$description": "Used for the foreground of a selected navigation item in the default state.",
                 "$extensions": {
@@ -23054,7 +23089,7 @@
             },
             "hover": {
               "key": "{nav.item.selected.foreground.color.hover}",
-              "$value": "#fff",
+              "$value": "#18171d",
               "$type": "color",
               "$description": "Used for the foreground of a selected navigation item in the hover state.",
               "$extensions": {
@@ -23065,7 +23100,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{action.selected.foreground.color.hover}",
+                "$value": "{nav.item.foreground.color.hover}",
                 "$type": "color",
                 "$description": "Used for the foreground of a selected navigation item in the hover state.",
                 "$extensions": {
@@ -23088,7 +23123,7 @@
             },
             "focus": {
               "key": "{nav.item.selected.foreground.color.focus}",
-              "$value": "#fff",
+              "$value": "#18171d",
               "$type": "color",
               "$description": "Used for the foreground of a selected navigation item in the focus state.",
               "$extensions": {
@@ -23099,7 +23134,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{action.selected.foreground.color.focus}",
+                "$value": "{nav.item.foreground.color.focus}",
                 "$type": "color",
                 "$description": "Used for the foreground of a selected navigation item in the focus state.",
                 "$extensions": {
@@ -23122,7 +23157,7 @@
             },
             "active": {
               "key": "{nav.item.selected.foreground.color.active}",
-              "$value": "#fff",
+              "$value": "#18171d",
               "$type": "color",
               "$description": "Used for the foreground of a selected navigation item in the active state.",
               "$extensions": {
@@ -23133,7 +23168,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{action.selected.foreground.color.active}",
+                "$value": "{nav.item.foreground.color.active}",
                 "$type": "color",
                 "$description": "Used for the foreground of a selected navigation item in the active state.",
                 "$extensions": {
@@ -23160,7 +23195,7 @@
           "color": {
             "default": {
               "key": "{nav.item.selected.background.color.default}",
-              "$value": "#3a383f",
+              "$value": "#dcdcde",
               "$type": "color",
               "$description": "Used for the background of a selected navigation item in the default state.",
               "$extensions": {
@@ -23171,7 +23206,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{action.selected.background.color.default}",
+                "$value": "{color.neutral.100}",
                 "$type": "color",
                 "$description": "Used for the background of a selected navigation item in the default state.",
                 "$extensions": {
@@ -23194,7 +23229,7 @@
             },
             "hover": {
               "key": "{nav.item.selected.background.color.hover}",
-              "$value": "#18171d",
+              "$value": "#dcdcde",
               "$type": "color",
               "$description": "Used for the background of a selected navigation item in the hover state.",
               "$extensions": {
@@ -23205,7 +23240,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{action.selected.background.color.hover}",
+                "$value": "{nav.item.background.color.hover}",
                 "$type": "color",
                 "$description": "Used for the background of a selected navigation item in the hover state.",
                 "$extensions": {
@@ -23228,7 +23263,7 @@
             },
             "focus": {
               "key": "{nav.item.selected.background.color.focus}",
-              "$value": "#18171d",
+              "$value": "#dcdcde",
               "$type": "color",
               "$description": "Used for the background of a selected navigation item in the focus state.",
               "$extensions": {
@@ -23239,7 +23274,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{action.selected.background.color.focus}",
+                "$value": "{nav.item.background.color.focus}",
                 "$type": "color",
                 "$description": "Used for the background of a selected navigation item in the focus state.",
                 "$extensions": {
@@ -23262,7 +23297,7 @@
             },
             "active": {
               "key": "{nav.item.selected.background.color.active}",
-              "$value": "#050506",
+              "$value": "#bfbfc3",
               "$type": "color",
               "$description": "Used for the background of a selected navigation item in the active state.",
               "$extensions": {
@@ -23273,7 +23308,7 @@
               "filePath": "src/tokens/contextual/nav.tokens.json",
               "isSource": true,
               "original": {
-                "$value": "{action.selected.background.color.active}",
+                "$value": "{nav.item.background.color.active}",
                 "$type": "color",
                 "$description": "Used for the background of a selected navigation item in the active state.",
                 "$extensions": {
@@ -24901,6 +24936,44 @@
       }
     }
   },
+  "tooltip": {
+    "text": {
+      "color": {
+        "subtle": {
+          "key": "{tooltip.text.color.subtle}",
+          "$value": "#bfbfc3",
+          "$type": "color",
+          "$description": "Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.",
+          "$extensions": {
+            "com.figma.scopes": [
+              "TEXT_FILL"
+            ]
+          },
+          "filePath": "src/tokens/contextual/tooltip.tokens.json",
+          "isSource": true,
+          "original": {
+            "$value": "{color.neutral.200}",
+            "$type": "color",
+            "$description": "Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.",
+            "$extensions": {
+              "com.figma.scopes": [
+                "TEXT_FILL"
+              ]
+            },
+            "key": "{tooltip.text.color.subtle}"
+          },
+          "name": "TOOLTIP_TEXT_COLOR_SUBTLE",
+          "attributes": {},
+          "path": [
+            "tooltip",
+            "text",
+            "color",
+            "subtle"
+          ]
+        }
+      }
+    }
+  },
   "data-viz": {
     "green": {
       "50": {

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

@@ -651,6 +651,14 @@ $gl-link-mention-text-color-current: $gl-color-orange-100; // Used for the menti
 $gl-link-mention-background-color-default: $gl-color-blue-800; // Used for the mention link default background.
 $gl-link-mention-background-color-current: $gl-color-orange-800; // Used for the mention link background when referencing the current user.
 $gl-nav-item-font-size: $gl-font-size-300; // Used for the font size of a navigation item
+$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-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-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.
@@ -663,6 +671,7 @@ $gl-toggle-switch-track-color-checked-hover: $gl-color-neutral-10; // Used for t
 $gl-toggle-switch-track-color-checked-active: $gl-color-neutral-0; // Used for the track color of a checked toggle switch in the active state.
 $gl-token-selector-token-container-token-background-color-focus: $gl-color-neutral-600; // Used for the background color of a token in a token-selector when it's token-container is in the focus state.
 $gl-token-background-color: $gl-color-neutral-800; // Used for the token background color.
+$gl-tooltip-text-color-subtle: $gl-color-neutral-200; // Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.
 $black: $gl-color-neutral-0 !default;
 $white: $gl-color-neutral-900 !default;
 $blue-50: $gl-color-blue-900 !default;
@@ -1006,14 +1015,11 @@ $gl-dropdown-option-background-color-unselected-hover: $gl-action-neutral-backgr
 $gl-dropdown-option-background-color-unselected-active: $gl-action-neutral-background-color-active; // Used for the background of an unselected dropdown option in the active state.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
 $gl-modal-border-radius: $gl-border-radius-2xl; // Used for modal border radius.
-$gl-nav-item-foreground-color-default: $gl-action-neutral-foreground-color-default; // Used for the foreground of a default navigation item in the default state.
-$gl-nav-item-background-color-default: $gl-action-neutral-background-color-default; // Used for the background of a default navigation item in the default state.
-$gl-nav-item-background-color-hover: $gl-action-neutral-background-color-hover; // Used for the background of a default navigation item in the hover state.
-$gl-nav-item-background-color-active: $gl-action-neutral-background-color-active; // Used for the background of a default navigation item in the active state.
-$gl-nav-item-selected-foreground-color-default: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected navigation item in the default state.
-$gl-nav-item-selected-background-color-default: $gl-action-selected-background-color-default; // Used for the background of a selected navigation item in the default state.
-$gl-nav-item-selected-background-color-hover: $gl-action-selected-background-color-hover; // Used for the background of a selected navigation item in the hover state.
-$gl-nav-item-selected-background-color-active: $gl-action-selected-background-color-active; // Used for the background of a selected navigation item in the active state.
+$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-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.
 $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
 $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
@@ -1218,12 +1224,9 @@ $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color
 $gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-nav-item-border-radius: $gl-action-border-radius; // Used for the border radius of a navigation item
-$gl-nav-item-foreground-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the foreground of a default navigation item in the hover state.
-$gl-nav-item-foreground-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the foreground of a default navigation item in the focus state.
-$gl-nav-item-foreground-color-active: $gl-action-neutral-foreground-color-active; // Used for the foreground of a default navigation item in the active state.
-$gl-nav-item-background-color-focus: $gl-action-neutral-background-color-focus; // Used for the background of a default navigation item in the focus state.
-$gl-nav-item-selected-foreground-color-hover: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected navigation item in the hover state.
-$gl-nav-item-selected-background-color-focus: $gl-action-selected-background-color-focus; // Used for the background of a selected navigation item in the focus state.
+$gl-nav-item-foreground-color-active: $gl-nav-item-foreground-color-focus; // Used for the foreground of a default navigation item in the active state.
+$gl-nav-item-selected-foreground-color-focus: $gl-nav-item-foreground-color-focus; // Used for the foreground of a selected navigation item in the focus state.
+$gl-nav-item-selected-background-color-focus: $gl-nav-item-background-color-focus; // Used for the background of a selected navigation item in the focus state.
 $gl-tab-selected-indicator-color-default: $gl-action-selected-border-color-active; // Used for the selected indicator of a tab.
 $gl-toggle-switch-track-color-unchecked-hover: $gl-toggle-switch-track-color-unchecked-default; // Used for the track color of an unchecked toggle switch in the hover state.
 $gl-toggle-switch-background-color-unchecked-hover: $gl-toggle-switch-background-color-unchecked-default; // Used for the background color of the unchecked toggle switch thumb in the hover state.
@@ -1240,13 +1243,12 @@ $gl-action-strong-confirm-border-color-focus: $gl-action-strong-confirm-border-c
 $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-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-focus: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected navigation item in the focus 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.
 $gl-toggle-switch-background-color-checked-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the background color of the checked toggle switch thumb in the focus state.
 $gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
 $gl-action-strong-confirm-foreground-color-active: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a strong confirm action in the active state.
 $gl-action-strong-confirm-border-color-active: $gl-action-strong-confirm-border-color-focus; // Used for the border of a strong confirm action in the active state.
 $gl-action-strong-neutral-border-color-active: $gl-action-strong-neutral-border-color-focus; // Used for the border of a strong neutral action in the active state.
-$gl-nav-item-selected-foreground-color-active: $gl-action-selected-foreground-color-active; // Used for the foreground of a selected navigation item in the active state.
 $gl-toggle-switch-track-color-unchecked-active: $gl-toggle-switch-track-color-unchecked-focus; // Used for the track color of an unchecked toggle switch in the active state.
 $gl-toggle-switch-background-color-checked-active: $gl-action-strong-confirm-foreground-color-active; // Used for the background color of the checked toggle switch thumb in the active state.

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

@@ -633,6 +633,14 @@ $gl-link-mention-text-color-current: $gl-color-orange-800; // Used for the menti
 $gl-link-mention-background-color-default: $gl-color-blue-100; // Used for the mention link default background.
 $gl-link-mention-background-color-current: $gl-color-orange-100; // Used for the mention link background when referencing the current user.
 $gl-nav-item-font-size: $gl-font-size-300; // Used for the font size of a navigation item
+$gl-nav-item-foreground-color-default: $gl-color-neutral-600; // Used for the foreground of a default navigation item in the default state.
+$gl-nav-item-foreground-color-hover: $gl-color-neutral-950; // 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-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-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.
@@ -645,6 +653,7 @@ $gl-toggle-switch-track-color-checked-hover: $gl-color-neutral-950; // Used for
 $gl-toggle-switch-track-color-checked-active: $gl-color-neutral-1000; // Used for the track color of a checked toggle switch in the active state.
 $gl-token-selector-token-container-token-background-color-focus: $gl-color-neutral-300; // Used for the background color of a token in a token-selector when it's token-container is in the focus state.
 $gl-token-background-color: $gl-color-neutral-100; // Used for the token background color.
+$gl-tooltip-text-color-subtle: $gl-color-neutral-200; // Used for supplemental tooltip text that is less prominent than the default text and remains the same color regardless of mode.
 $black: $gl-color-neutral-1000 !default;
 $white: $gl-color-neutral-0 !default;
 $blue-50: $gl-color-blue-50 !default;
@@ -999,14 +1008,11 @@ $gl-dropdown-option-background-color-unselected-hover: $gl-action-neutral-backgr
 $gl-dropdown-option-background-color-unselected-active: $gl-action-neutral-background-color-active; // Used for the background of an unselected dropdown option in the active state.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
 $gl-modal-border-radius: $gl-border-radius-2xl; // Used for modal border radius.
-$gl-nav-item-foreground-color-default: $gl-action-neutral-foreground-color-default; // Used for the foreground of a default navigation item in the default state.
-$gl-nav-item-background-color-default: $gl-action-neutral-background-color-default; // Used for the background of a default navigation item in the default state.
-$gl-nav-item-background-color-hover: $gl-action-neutral-background-color-hover; // Used for the background of a default navigation item in the hover state.
-$gl-nav-item-background-color-active: $gl-action-neutral-background-color-active; // Used for the background of a default navigation item in the active state.
-$gl-nav-item-selected-foreground-color-default: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected navigation item in the default state.
-$gl-nav-item-selected-background-color-default: $gl-action-selected-background-color-default; // Used for the background of a selected navigation item in the default state.
-$gl-nav-item-selected-background-color-hover: $gl-action-selected-background-color-hover; // Used for the background of a selected navigation item in the hover state.
-$gl-nav-item-selected-background-color-active: $gl-action-selected-background-color-active; // Used for the background of a selected navigation item in the active state.
+$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-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.
 $gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
 $gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
@@ -1216,12 +1222,9 @@ $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color
 $gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-nav-item-border-radius: $gl-action-border-radius; // Used for the border radius of a navigation item
-$gl-nav-item-foreground-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the foreground of a default navigation item in the hover state.
-$gl-nav-item-foreground-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the foreground of a default navigation item in the focus state.
-$gl-nav-item-foreground-color-active: $gl-action-neutral-foreground-color-active; // Used for the foreground of a default navigation item in the active state.
-$gl-nav-item-background-color-focus: $gl-action-neutral-background-color-focus; // Used for the background of a default navigation item in the focus state.
-$gl-nav-item-selected-foreground-color-hover: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected navigation item in the hover state.
-$gl-nav-item-selected-background-color-focus: $gl-action-selected-background-color-focus; // Used for the background of a selected navigation item in the focus state.
+$gl-nav-item-foreground-color-active: $gl-nav-item-foreground-color-focus; // Used for the foreground of a default navigation item in the active state.
+$gl-nav-item-selected-foreground-color-focus: $gl-nav-item-foreground-color-focus; // Used for the foreground of a selected navigation item in the focus state.
+$gl-nav-item-selected-background-color-focus: $gl-nav-item-background-color-focus; // Used for the background of a selected navigation item in the focus state.
 $gl-tab-selected-indicator-color-default: $gl-action-selected-border-color-active; // Used for the selected indicator of a tab.
 $gl-toggle-switch-track-color-unchecked-hover: $gl-toggle-switch-track-color-unchecked-default; // Used for the track color of an unchecked toggle switch in the hover state.
 $gl-toggle-switch-background-color-unchecked-hover: $gl-toggle-switch-background-color-unchecked-default; // Used for the background color of the unchecked toggle switch thumb in the hover state.
@@ -1239,7 +1242,7 @@ $gl-action-strong-neutral-foreground-color-focus: $gl-action-strong-neutral-fore
 $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-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-focus: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected navigation item in the focus 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.
 $gl-toggle-switch-background-color-checked-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the background color of the checked toggle switch thumb in the focus state.
 $gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
@@ -1247,6 +1250,5 @@ $gl-action-strong-confirm-foreground-color-active: $gl-action-strong-confirm-for
 $gl-action-strong-confirm-border-color-active: $gl-action-strong-confirm-border-color-focus; // Used for the border of a strong confirm action in the active state.
 $gl-action-strong-neutral-foreground-color-active: $gl-action-strong-neutral-foreground-color-focus; // Used for the foreground of a strong neutral action in the active state.
 $gl-action-strong-neutral-border-color-active: $gl-action-strong-neutral-border-color-focus; // Used for the border of a strong neutral action in the active state.
-$gl-nav-item-selected-foreground-color-active: $gl-action-selected-foreground-color-active; // Used for the foreground of a selected navigation item in the active state.
 $gl-toggle-switch-track-color-unchecked-active: $gl-toggle-switch-track-color-unchecked-focus; // Used for the track color of an unchecked toggle switch in the active state.
 $gl-toggle-switch-background-color-checked-active: $gl-action-strong-confirm-foreground-color-active; // Used for the background color of the checked toggle switch thumb in the active state.

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

@@ -684,6 +684,7 @@ $gl-nav-item-background-color-default: var(--gl-nav-item-background-color-defaul
 $gl-nav-item-background-color-hover: var(--gl-nav-item-background-color-hover);
 $gl-nav-item-background-color-focus: var(--gl-nav-item-background-color-focus);
 $gl-nav-item-background-color-active: var(--gl-nav-item-background-color-active);
+$gl-nav-item-selected-font-weight: var(--gl-nav-item-selected-font-weight);
 $gl-nav-item-selected-foreground-color-default: var(--gl-nav-item-selected-foreground-color-default);
 $gl-nav-item-selected-foreground-color-hover: var(--gl-nav-item-selected-foreground-color-hover);
 $gl-nav-item-selected-foreground-color-focus: var(--gl-nav-item-selected-foreground-color-focus);
@@ -736,6 +737,7 @@ $gl-token-selector-token-container-token-background-color-focus: var(--gl-token-
 $gl-token-border-radius: var(--gl-token-border-radius);
 $gl-token-foreground-color: var(--gl-token-foreground-color);
 $gl-token-background-color: var(--gl-token-background-color);
+$gl-tooltip-text-color-subtle: var(--gl-tooltip-text-color-subtle);
 $data-viz-green-50: var(--data-viz-green-50);
 $data-viz-green-100: var(--data-viz-green-100);
 $data-viz-green-200: var(--data-viz-green-200);