@gitlab/ui 136.1.0 → 136.3.0

package/src/components/base/nav_item/nav_item.scss

@@ -50,6 +50,7 @@
   }
 
   &.selected {
+    font-weight: var(--gl-nav-item-selected-font-weight);
     color: var(--gl-nav-item-selected-foreground-color-default);
     background-color: var(--gl-nav-item-selected-background-color-default);
 
@@ -71,6 +72,36 @@
   }
 }
 
+.gl-nav-item.selected::before {
+  @apply gl-absolute;
+  content: "";
+  background-color: currentColor;
+}
+
+.gl-nav-item-indicator-left.selected::before {
+  @apply -gl-left-3;
+  @apply gl-top-2;
+  @apply gl-bottom-2;
+  @apply gl-w-1;
+  @apply gl-rounded-r-default;
+}
+
+.gl-nav-item-indicator-right.selected::before {
+  @apply -gl-right-3;
+  @apply gl-top-2;
+  @apply gl-bottom-2;
+  @apply gl-w-1;
+  @apply gl-rounded-l-default;
+}
+
+.gl-nav-item-indicator-bottom.selected::before {
+  @apply -gl-bottom-3;
+  @apply gl-left-2;
+  @apply gl-right-2;
+  @apply gl-h-1;
+  @apply gl-rounded-t-default;
+}
+
 .gl-nav-item-slot {
   @apply gl-flex;
   @apply gl-items-center;

package/src/components/base/nav_item/nav_item.vue

@@ -1,4 +1,5 @@
 <script>
+import { navItemIndicatorPositionOptions } from '../../../utils/constants';
 import GlAnimatedChevronRightDownIcon from '../animated_icon/animated_chevron_right_down_icon.vue';
 import GlIcon from '../icon/icon.vue';
 
@@ -65,6 +66,15 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Position of the selected indicator
+     */
+    indicatorPosition: {
+      type: String,
+      required: false,
+      default: 'left',
+      validator: (value) => navItemIndicatorPositionOptions[value] !== undefined,
+    },
   },
   computed: {
     ariaExpanded() {
@@ -73,6 +83,7 @@ export default {
     classes() {
       return [
         'gl-nav-item',
+        navItemIndicatorPositionOptions[this.indicatorPosition],
         {
           'gl-nav-item-is-icon-only': this.isIconOnly,
           'gl-nav-item-has-start-slot': this.icon || Boolean(this.$scopedSlots.icon),

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

@@ -433,6 +433,7 @@
   --gl-alert-warning-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a warning alert. */
   --gl-alert-danger-border-top-color: var(--gl-color-alpha-0); /** Used for the border color of a danger alert. */
   --gl-alert-danger-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a danger alert. */
+  --gl-application-chrome-background-color: var(--gl-color-neutral-50); /** Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation. */
   --gl-avatar-border-color-default: var(--gl-color-alpha-dark-8); /** Used to define the edge of an avatar. */
   --gl-avatar-border-color-hover: var(--gl-color-alpha-dark-24); /** Used to increase the edge definition of an avatar in the hover state. */
   --gl-avatar-circle-border-radius-default: var(--gl-border-radius-full); /** Border radius for cirlce avatars at all sizes. */
@@ -635,6 +636,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 +1011,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 +1225,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 +1245,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 +1253,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

@@ -449,6 +449,7 @@
   --gl-alert-danger-title-color: var(--gl-color-red-300); /** Used for the title color of a danger alert. */
   --gl-alert-danger-border-top-color: var(--gl-color-red-400); /** Used for the border color of a danger alert. */
   --gl-alert-danger-border-bottom-color: var(--gl-color-alpha-0); /** Used for the border bottom color of a danger alert. */
+  --gl-application-chrome-background-color: var(--gl-color-neutral-1000); /** Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation. */
   --gl-avatar-border-color-default: var(--gl-color-alpha-light-8); /** Used to define the edge of an avatar. */
   --gl-avatar-border-color-hover: var(--gl-color-alpha-light-24); /** Used to increase the edge definition of an avatar in the hover state. */
   --gl-avatar-circle-border-radius-default: var(--gl-border-radius-full); /** Border radius for cirlce avatars at all sizes. */
@@ -653,6 +654,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 +1018,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 +1227,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 +1246,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

@@ -312,6 +312,17 @@
       ]
     }
   },
+  "🔒/application-chrome-background-color": {
+    "$value": "{color-neutral-1000}",
+    "$type": "color",
+    "$description": "Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "FRAME_FILL",
+        "SHAPE_FILL"
+      ]
+    }
+  },
   "🔒/avatar-border-color-default": {
     "$value": "{color-alpha-light-8}",
     "$type": "color",
@@ -4802,7 +4813,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 +4823,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 +4833,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 +4843,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 +4853,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 +4863,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 +4873,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 +4883,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 +4892,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 +4913,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 +4923,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 +4933,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 +4943,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 +4953,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 +4963,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 +4973,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

@@ -312,6 +312,17 @@
       ]
     }
   },
+  "🔒/application-chrome-background-color": {
+    "$value": "{color-neutral-50}",
+    "$type": "color",
+    "$description": "Used for the application chrome background, the lowest layer of the interface that sits beneath panels and contains global navigation, user actions, application navigation, and AI navigation.",
+    "$extensions": {
+      "com.figma.scopes": [
+        "FRAME_FILL",
+        "SHAPE_FILL"
+      ]
+    }
+  },
   "🔒/avatar-border-color-default": {
     "$value": "{color-alpha-dark-8}",
     "$type": "color",
@@ -4746,7 +4757,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 +4767,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 +4777,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 +4787,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 +4797,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 +4807,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 +4817,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 +4827,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 +4836,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 +4857,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 +4867,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 +4877,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 +4887,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 +4897,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 +4907,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 +4917,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

@@ -377,6 +377,7 @@ export const GL_ALERT_DANGER_TITLE_COLOR = '#f6806d';
 export const GL_ALERT_DANGER_BACKGROUND_COLOR = '#28272d';
 export const GL_ALERT_DANGER_BORDER_TOP_COLOR = '#ec5941';
 export const GL_ALERT_DANGER_BORDER_BOTTOM_COLOR = 'rgba(0, 0, 0, 0)';
+export const GL_APPLICATION_CHROME_BACKGROUND_COLOR = '#050506';
 export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(255, 255, 255, 0.08)';
 export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(255, 255, 255, 0.24)';
 export const GL_AVATAR_CIRCLE_BORDER_RADIUS_DEFAULT = '9999px';
@@ -767,22 +768,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';