@gitlab/ui 136.0.0 → 136.2.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/components/base/toast/index.js

@@ -46,21 +46,34 @@ function showToast(message, options = {}) {
   return toast;
 }
 
+/**
+ * Adds a `$toast` property to the component it's applied to.
+ *
+ * Use this to opt individual components into toasts, instead of adding `$toast`
+ * to every component in the app with `GlToastPlugin`.
+ */
+export const GlToastMixin = {
+  beforeCreate() {
+    if (this.$toast) {
+      return;
+    }
+    this.$toast = { show: showToast.bind(this) };
+  },
+};
+
 /**
  * Note: This is not a typical Vue component and needs to be registered before instantiating a Vue app.
  * Once registered, the toast will be globally available throughout your app.
  *
- * See https://design.gitlab.com/storybook for detailed documentation.
+ * See https://design.gitlab.com/components/toast for detailed documentation.
  */
-export default {
+export const GlToastPlugin = {
   install(V) {
-    V.mixin({
-      beforeCreate() {
-        if (this.$toast) {
-          return;
-        }
-        this.$toast = { show: showToast.bind(this) };
-      },
-    });
+    V.mixin(GlToastMixin);
   },
 };
+
+/**
+ * @deprecated Use the named `GlToastPlugin` export instead.
+ */
+export default GlToastPlugin;

package/src/components/base/tooltip/tooltip.scss

@@ -11,6 +11,7 @@
     @apply gl-rounded-feedback;
     background: var(--gl-feedback-strong-background-color);
     color: var(--gl-feedback-strong-text-color);
+    --gl-text-color-subtle: var(--gl-tooltip-text-color-subtle);
   }
 
   .arrow {

package/src/components/index.js

@@ -33,7 +33,7 @@ export { default as GlBadge } from './base/badge/badge.vue';
 export { default as GlBanner } from './base/banner/banner.vue';
 export { default as GlButton } from './base/button/button.vue';
 export { default as GlTooltip } from './base/tooltip/tooltip.vue';
-export { default as GlToast } from './base/toast';
+export { default as GlToast, GlToastMixin, GlToastPlugin } from './base/toast';
 export { default as GlDashboardSkeleton } from './regions/dashboard_skeleton/dashboard_skeleton.vue';
 export { default as GlEmptyState } from './regions/empty_state/empty_state.vue';
 export { default as GlForm } from './base/form/form.vue';

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. */
@@ -647,6 +655,7 @@
   --gl-toggle-switch-track-color-checked-active: var(--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: var(--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: var(--gl-color-neutral-100); /** Used for the token background color. */
+  --gl-tooltip-text-color-subtle: var(--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: var(--gl-color-neutral-1000);
   --white: var(--gl-color-neutral-0);
   --blue-50: var(--gl-color-blue-50);
@@ -1001,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. */
@@ -1218,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. */
@@ -1241,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. */
@@ -1249,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. */
@@ -665,6 +673,7 @@
   --gl-toggle-switch-track-color-checked-active: var(--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: var(--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: var(--gl-color-neutral-800); /** Used for the token background color. */
+  --gl-tooltip-text-color-subtle: var(--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: var(--gl-color-neutral-0);
   --white: var(--gl-color-neutral-900);
   --blue-50: var(--gl-color-blue-900);
@@ -1008,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. */
@@ -1220,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. */
@@ -1242,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": {
@@ -5429,6 +5439,16 @@
       ]
     }
   },
+  "🔒/tooltip-text-color-subtle": {
+    "$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"
+      ]
+    }
+  },
   "action-border-radius": {
     "$value": "{border-radius-lg}",
     "$type": "dimension",

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": {
@@ -5373,6 +5383,16 @@
       ]
     }
   },
+  "🔒/tooltip-text-color-subtle": {
+    "$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"
+      ]
+    }
+  },
   "action-border-radius": {
     "$value": "{border-radius-lg}",
     "$type": "dimension",