@gitlab/ui 136.1.0 → 136.2.0

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

@@ -635,6 +635,14 @@
   --gl-link-mention-background-color-default: var(--gl-color-blue-100); /** Used for the mention link default background. */
   --gl-link-mention-background-color-current: var(--gl-color-orange-100); /** Used for the mention link background when referencing the current user. */
   --gl-nav-item-font-size: var(--gl-font-size-300); /** Used for the font size of a navigation item */
+  --gl-nav-item-foreground-color-default: var(--gl-color-neutral-600); /** Used for the foreground of a default navigation item in the default state. */
+  --gl-nav-item-foreground-color-hover: var(--gl-color-neutral-950); /** 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-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-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. */
@@ -1002,14 +1010,11 @@
   --gl-dropdown-option-background-color-unselected-active: var(--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: var(--gl-dropdown-option-background-color-selected-hover); /** Used for the background of a selected dropdown option in the focus state. */
   --gl-modal-border-radius: var(--gl-border-radius-2xl); /** Used for modal border radius. */
-  --gl-nav-item-foreground-color-default: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: 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-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. */
   --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /** Used for the indicator color for the primary progress-bar variant. */
   --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /** Used for the indicator color for the success progress-bar variant. */
   --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /** Used for the indicator color for the warning progress-bar variant. */
@@ -1219,12 +1224,9 @@
   --gl-dropdown-option-indicator-color-selected-active: var(--gl-control-background-color-selected-focus); /** Used for the dropdown selected option indicator in the active state. */
   --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of an unselected dropdown option in the focus state. */
   --gl-nav-item-border-radius: var(--gl-action-border-radius); /** Used for the border radius of a navigation item */
-  --gl-nav-item-foreground-color-hover: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--gl-action-selected-border-color-active); /** Used for the selected indicator of a tab. */
   --gl-toggle-switch-track-color-unchecked-hover: var(--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: var(--gl-toggle-switch-background-color-unchecked-default); /** Used for the background color of the unchecked toggle switch thumb in the hover state. */
@@ -1242,7 +1244,7 @@
   --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-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-focus: var(--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: 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. */
   --gl-toggle-switch-background-color-checked-focus: var(--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: var(--gl-action-selected-foreground-color-focus); /** Used for the foreground of a selected action in the active state. */
@@ -1250,7 +1252,6 @@
   --gl-action-strong-confirm-border-color-active: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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/css/tokens.dark.css

@@ -653,6 +653,14 @@
   --gl-link-mention-background-color-default: var(--gl-color-blue-800); /** Used for the mention link default background. */
   --gl-link-mention-background-color-current: var(--gl-color-orange-800); /** Used for the mention link background when referencing the current user. */
   --gl-nav-item-font-size: var(--gl-font-size-300); /** Used for the font size of a navigation item */
+  --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-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-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. */
@@ -1009,14 +1017,11 @@
   --gl-dropdown-option-background-color-unselected-active: var(--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: var(--gl-dropdown-option-background-color-selected-hover); /** Used for the background of a selected dropdown option in the focus state. */
   --gl-modal-border-radius: var(--gl-border-radius-2xl); /** Used for modal border radius. */
-  --gl-nav-item-foreground-color-default: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: 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-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. */
   --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /** Used for the indicator color for the primary progress-bar variant. */
   --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /** Used for the indicator color for the success progress-bar variant. */
   --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /** Used for the indicator color for the warning progress-bar variant. */
@@ -1221,12 +1226,9 @@
   --gl-dropdown-option-indicator-color-selected-active: var(--gl-control-background-color-selected-focus); /** Used for the dropdown selected option indicator in the active state. */
   --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /** Used for the background of an unselected dropdown option in the focus state. */
   --gl-nav-item-border-radius: var(--gl-action-border-radius); /** Used for the border radius of a navigation item */
-  --gl-nav-item-foreground-color-hover: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--gl-action-selected-border-color-active); /** Used for the selected indicator of a tab. */
   --gl-toggle-switch-track-color-unchecked-hover: var(--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: var(--gl-toggle-switch-background-color-unchecked-default); /** Used for the background color of the unchecked toggle switch thumb in the hover state. */
@@ -1243,14 +1245,13 @@
   --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-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-focus: var(--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: 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. */
   --gl-toggle-switch-background-color-checked-focus: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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: var(--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/figma/mode.dark.json

@@ -4802,7 +4802,7 @@
     }
   },
   "🔒/nav-item-foreground-color-default": {
-    "$value": "{action-neutral-foreground-color-default}",
+    "$value": "{color-neutral-200}",
     "$type": "color",
     "$description": "Used for the foreground of a default navigation item in the default state.",
     "$extensions": {
@@ -4812,7 +4812,7 @@
     }
   },
   "🔒/nav-item-foreground-color-hover": {
-    "$value": "{action-neutral-foreground-color-hover}",
+    "$value": "{color-neutral-0}",
     "$type": "color",
     "$description": "Used for the foreground of a default navigation item in the hover state.",
     "$extensions": {
@@ -4822,7 +4822,7 @@
     }
   },
   "🔒/nav-item-foreground-color-focus": {
-    "$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": {
@@ -4832,7 +4832,7 @@
     }
   },
   "🔒/nav-item-foreground-color-active": {
-    "$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": {
@@ -4842,7 +4842,7 @@
     }
   },
   "🔒/nav-item-background-color-default": {
-    "$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": {
@@ -4852,7 +4852,7 @@
     }
   },
   "🔒/nav-item-background-color-hover": {
-    "$value": "{action-neutral-background-color-hover}",
+    "$value": "{color-neutral-900}",
     "$type": "color",
     "$description": "Used for the background of a default navigation item in the hover state.",
     "$extensions": {
@@ -4862,7 +4862,7 @@
     }
   },
   "🔒/nav-item-background-color-focus": {
-    "$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": {
@@ -4872,7 +4872,7 @@
     }
   },
   "🔒/nav-item-background-color-active": {
-    "$value": "{action-neutral-background-color-active}",
+    "$value": "{color-neutral-950}",
     "$type": "color",
     "$description": "Used for the background of a default navigation item in the active state.",
     "$extensions": {
@@ -4881,8 +4881,18 @@
       ]
     }
   },
+  "🔒/nav-item-selected-font-weight": {
+    "$value": "{font-weight-bold}",
+    "$type": "fontWeight",
+    "$description": "Used for the font weight of a selected navigation item.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "FONT_WEIGHT"
+      ]
+    }
+  },
   "🔒/nav-item-selected-foreground-color-default": {
-    "$value": "{action-selected-foreground-color-default}",
+    "$value": "{color-neutral-0}",
     "$type": "color",
     "$description": "Used for the foreground of a selected navigation item in the default state.",
     "$extensions": {
@@ -4892,7 +4902,7 @@
     }
   },
   "🔒/nav-item-selected-foreground-color-hover": {
-    "$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": {
@@ -4902,7 +4912,7 @@
     }
   },
   "🔒/nav-item-selected-foreground-color-focus": {
-    "$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": {
@@ -4912,7 +4922,7 @@
     }
   },
   "🔒/nav-item-selected-foreground-color-active": {
-    "$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": {
@@ -4922,7 +4932,7 @@
     }
   },
   "🔒/nav-item-selected-background-color-default": {
-    "$value": "{action-selected-background-color-default}",
+    "$value": "{color-neutral-900}",
     "$type": "color",
     "$description": "Used for the background of a selected navigation item in the default state.",
     "$extensions": {
@@ -4932,7 +4942,7 @@
     }
   },
   "🔒/nav-item-selected-background-color-hover": {
-    "$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": {
@@ -4942,7 +4952,7 @@
     }
   },
   "🔒/nav-item-selected-background-color-focus": {
-    "$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": {
@@ -4952,7 +4962,7 @@
     }
   },
   "🔒/nav-item-selected-background-color-active": {
-    "$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": {

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

@@ -4746,7 +4746,7 @@
     }
   },
   "🔒/nav-item-foreground-color-default": {
-    "$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": {
@@ -4756,7 +4756,7 @@
     }
   },
   "🔒/nav-item-foreground-color-hover": {
-    "$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": {
@@ -4766,7 +4766,7 @@
     }
   },
   "🔒/nav-item-foreground-color-focus": {
-    "$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": {
@@ -4776,7 +4776,7 @@
     }
   },
   "🔒/nav-item-foreground-color-active": {
-    "$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": {
@@ -4786,7 +4786,7 @@
     }
   },
   "🔒/nav-item-background-color-default": {
-    "$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": {
@@ -4796,7 +4796,7 @@
     }
   },
   "🔒/nav-item-background-color-hover": {
-    "$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": {
@@ -4806,7 +4806,7 @@
     }
   },
   "🔒/nav-item-background-color-focus": {
-    "$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": {
@@ -4816,7 +4816,7 @@
     }
   },
   "🔒/nav-item-background-color-active": {
-    "$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": {
@@ -4825,8 +4825,18 @@
       ]
     }
   },
+  "🔒/nav-item-selected-font-weight": {
+    "$value": "{font-weight-bold}",
+    "$type": "fontWeight",
+    "$description": "Used for the font weight of a selected navigation item.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "FONT_WEIGHT"
+      ]
+    }
+  },
   "🔒/nav-item-selected-foreground-color-default": {
-    "$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": {
@@ -4836,7 +4846,7 @@
     }
   },
   "🔒/nav-item-selected-foreground-color-hover": {
-    "$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": {
@@ -4846,7 +4856,7 @@
     }
   },
   "🔒/nav-item-selected-foreground-color-focus": {
-    "$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": {
@@ -4856,7 +4866,7 @@
     }
   },
   "🔒/nav-item-selected-foreground-color-active": {
-    "$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": {
@@ -4866,7 +4876,7 @@
     }
   },
   "🔒/nav-item-selected-background-color-default": {
-    "$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": {
@@ -4876,7 +4886,7 @@
     }
   },
   "🔒/nav-item-selected-background-color-hover": {
-    "$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": {
@@ -4886,7 +4896,7 @@
     }
   },
   "🔒/nav-item-selected-background-color-focus": {
-    "$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": {
@@ -4896,7 +4906,7 @@
     }
   },
   "🔒/nav-item-selected-background-color-active": {
-    "$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": {

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

@@ -767,22 +767,23 @@ export const GL_MODAL_BORDER_RADIUS = '1rem';
 export const GL_NAV_ITEM_BORDER_RADIUS = '0.5rem';
 export const GL_NAV_ITEM_FONT_SIZE = '0.875rem';
 export const GL_NAV_ITEM_FONT_WEIGHT = 425;
-export const GL_NAV_ITEM_FOREGROUND_COLOR_DEFAULT = '#ececef';
-export const GL_NAV_ITEM_FOREGROUND_COLOR_HOVER = '#ececef';
-export const GL_NAV_ITEM_FOREGROUND_COLOR_FOCUS = '#ececef';
-export const GL_NAV_ITEM_FOREGROUND_COLOR_ACTIVE = '#ececef';
+export const GL_NAV_ITEM_FOREGROUND_COLOR_DEFAULT = '#bfbfc3';
+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 = 'rgba(255, 255, 255, 0.16)';
-export const GL_NAV_ITEM_BACKGROUND_COLOR_FOCUS = 'rgba(255, 255, 255, 0.16)';
-export const GL_NAV_ITEM_BACKGROUND_COLOR_ACTIVE = 'rgba(255, 255, 255, 0.08)';
-export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_DEFAULT = '#18171d';
-export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_HOVER = '#18171d';
-export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_FOCUS = '#18171d';
-export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_ACTIVE = '#18171d';
-export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_DEFAULT = '#ececef';
-export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_HOVER = '#fbfafd';
-export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_FOCUS = '#fbfafd';
-export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_ACTIVE = '#fff';
+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_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_ACTIVE = '#18171d';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#63a6e9';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#52b87a';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#d99530';

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

@@ -767,22 +767,23 @@ export const GL_MODAL_BORDER_RADIUS = '1rem';
 export const GL_NAV_ITEM_BORDER_RADIUS = '0.5rem';
 export const GL_NAV_ITEM_FONT_SIZE = '0.875rem';
 export const GL_NAV_ITEM_FONT_WEIGHT = 425;
-export const GL_NAV_ITEM_FOREGROUND_COLOR_DEFAULT = '#28272d';
-export const GL_NAV_ITEM_FOREGROUND_COLOR_HOVER = '#28272d';
-export const GL_NAV_ITEM_FOREGROUND_COLOR_FOCUS = '#28272d';
-export const GL_NAV_ITEM_FOREGROUND_COLOR_ACTIVE = '#28272d';
+export const GL_NAV_ITEM_FOREGROUND_COLOR_DEFAULT = '#626168';
+export const GL_NAV_ITEM_FOREGROUND_COLOR_HOVER = '#18171d';
+export const GL_NAV_ITEM_FOREGROUND_COLOR_FOCUS = '#18171d';
+export const GL_NAV_ITEM_FOREGROUND_COLOR_ACTIVE = '#18171d';
 export const GL_NAV_ITEM_BACKGROUND_COLOR_DEFAULT = 'rgba(0, 0, 0, 0)';
-export const GL_NAV_ITEM_BACKGROUND_COLOR_HOVER = 'rgba(5, 5, 6, 0.06)';
-export const GL_NAV_ITEM_BACKGROUND_COLOR_FOCUS = 'rgba(5, 5, 6, 0.06)';
-export const GL_NAV_ITEM_BACKGROUND_COLOR_ACTIVE = 'rgba(5, 5, 6, 0.16)';
-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 = '#3a383f';
-export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_HOVER = '#18171d';
-export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_FOCUS = '#18171d';
-export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_ACTIVE = '#050506';
+export const GL_NAV_ITEM_BACKGROUND_COLOR_HOVER = '#dcdcde';
+export const GL_NAV_ITEM_BACKGROUND_COLOR_FOCUS = '#dcdcde';
+export const GL_NAV_ITEM_BACKGROUND_COLOR_ACTIVE = '#bfbfc3';
+export const GL_NAV_ITEM_SELECTED_FONT_WEIGHT = 600;
+export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_DEFAULT = '#18171d';
+export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_HOVER = '#18171d';
+export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_FOCUS = '#18171d';
+export const GL_NAV_ITEM_SELECTED_FOREGROUND_COLOR_ACTIVE = '#18171d';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_DEFAULT = '#dcdcde';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_HOVER = '#dcdcde';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_FOCUS = '#dcdcde';
+export const GL_NAV_ITEM_SELECTED_BACKGROUND_COLOR_ACTIVE = '#bfbfc3';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#1f75cb';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#108548';
 export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#ab6100';