@material/web 2.4.1 → 2.4.2-nightly.082faad.0

package/tokens/versions/v30_0/sass/_md-comp-navigation-bar.scss

@@ -0,0 +1,150 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-color';
+@use 'md-sys-elevation';
+@use 'md-sys-shape';
+@use 'md-sys-state';
+@use 'md-sys-state-focus-indicator';
+@use 'md-sys-typescale';
+
+/// md.comp.navigation-bar.active-indicator.height (Enabled / Active indicator)
+$active-indicator-height: 32px;
+/// md.comp.navigation-bar.active-indicator.width (Enabled / Active indicator)
+$active-indicator-width: 64px;
+/// md.comp.navigation-bar.badge.shape (Enabled / [Deprecated] Badge)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.*` tokens.
+$badge-shape: 3px;
+/// md.comp.navigation-bar.badge.size (Enabled / [Deprecated] Badge)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.*` tokens.
+$badge-size: 6px;
+/// md.comp.navigation-bar.container.height (Enabled / Container)
+$container-height: 80px;
+/// md.comp.navigation-bar.icon.size (Enabled / Icon)
+$icon-size: 24px;
+/// md.comp.navigation-bar.large-badge.shape (Enabled / [Deprecated] Large badge)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.
+$large-badge-shape: 8px;
+/// md.comp.navigation-bar.large-badge.size (Enabled / [Deprecated] Large badge)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.
+$large-badge-size: 16px;
+/// md.comp.navigation-bar.active-indicator.color (Enabled / Active indicator)
+$active-indicator-color: md-sys-color.$secondary-container;
+/// md.comp.navigation-bar.active-indicator.shape (Enabled / Active indicator)
+$active-indicator-shape: md-sys-shape.$corner-full;
+/// md.comp.navigation-bar.active.focus.icon.color (Enabled / Icon)
+$active-focus-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-bar.active.focus.label-text.color (Enabled / Label text)
+$active-focus-label-text-color: md-sys-color.$on-surface;
+/// md.comp.navigation-bar.active.focus.state-layer.color (Enabled / State layer)
+$active-focus-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.navigation-bar.active.hover.icon.color (Enabled / Icon)
+$active-hover-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-bar.active.hover.label-text.color (Enabled / Label text)
+$active-hover-label-text-color: md-sys-color.$on-surface;
+/// md.comp.navigation-bar.active.hover.state-layer.color (Enabled / State layer)
+$active-hover-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.navigation-bar.active.icon.color (Enabled / Icon)
+$active-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-bar.active.label-text.color (Enabled / Label text)
+$active-label-text-color: md-sys-color.$on-surface;
+/// md.comp.navigation-bar.active.label-text.weight (Enabled / Label text)
+$active-label-text-weight: md-sys-typescale.$label-medium-weight-prominent;
+/// md.comp.navigation-bar.active.pressed.icon.color (Enabled / Icon)
+$active-pressed-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-bar.active.pressed.label-text.color (Enabled / Label text)
+$active-pressed-label-text-color: md-sys-color.$on-surface;
+/// md.comp.navigation-bar.active.pressed.state-layer.color (Enabled / State layer)
+$active-pressed-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.navigation-bar.badge.color (Enabled / [Deprecated] Badge)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.*` tokens.
+$badge-color: md-sys-color.$error;
+/// md.comp.navigation-bar.container.color (Enabled / Container)
+$container-color: md-sys-color.$surface-container;
+/// md.comp.navigation-bar.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level2;
+/// md.comp.navigation-bar.container.shadow-color (Enabled / Container)
+///
+/// @deprecated Bug: should not have been created. Remove any shadows on navigation bars.
+$container-shadow-color: md-sys-color.$shadow;
+/// md.comp.navigation-bar.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-none;
+/// md.comp.navigation-bar.container.surface-tint-layer.color (Enabled / Container)
+///
+/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.
+$container-surface-tint-layer-color: md-sys-color.$surface-tint;
+/// md.comp.navigation-bar.focus.indicator.color (Enabled / Focus indicator)
+$focus-indicator-color: md-sys-color.$secondary;
+/// md.comp.navigation-bar.focus.indicator.outline.offset (Enabled / Focus indicator)
+$focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset;
+/// md.comp.navigation-bar.focus.indicator.thickness (Enabled / Focus indicator)
+$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;
+/// md.comp.navigation-bar.focus.state-layer.opacity (Enabled / State layer)
+$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.navigation-bar.hover.state-layer.opacity (Enabled / State layer)
+$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.navigation-bar.inactive.focus.icon.color (Enabled / Icon)
+$inactive-focus-icon-color: md-sys-color.$on-surface;
+/// md.comp.navigation-bar.inactive.focus.label-text.color (Enabled / Label text)
+$inactive-focus-label-text-color: md-sys-color.$on-surface;
+/// md.comp.navigation-bar.inactive.focus.state-layer.color (Enabled / State layer)
+$inactive-focus-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.navigation-bar.inactive.hover.icon.color (Enabled / Icon)
+$inactive-hover-icon-color: md-sys-color.$on-surface;
+/// md.comp.navigation-bar.inactive.hover.label-text.color (Enabled / Label text)
+$inactive-hover-label-text-color: md-sys-color.$on-surface;
+/// md.comp.navigation-bar.inactive.hover.state-layer.color (Enabled / State layer)
+$inactive-hover-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.navigation-bar.inactive.icon.color (Enabled / Icon)
+$inactive-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.navigation-bar.inactive.label-text.color (Enabled / Label text)
+$inactive-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.navigation-bar.inactive.pressed.icon.color (Enabled / Icon)
+$inactive-pressed-icon-color: md-sys-color.$on-surface;
+/// md.comp.navigation-bar.inactive.pressed.label-text.color (Enabled / Label text)
+$inactive-pressed-label-text-color: md-sys-color.$on-surface;
+/// md.comp.navigation-bar.inactive.pressed.state-layer.color (Enabled / State layer)
+$inactive-pressed-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.navigation-bar.label-text.font (Enabled / Label text)
+$label-text-font: md-sys-typescale.$label-medium-font;
+/// md.comp.navigation-bar.label-text.line-height (Enabled / Label text)
+$label-text-line-height: md-sys-typescale.$label-medium-line-height;
+/// md.comp.navigation-bar.label-text.size (Enabled / Label text)
+$label-text-size: md-sys-typescale.$label-medium-size;
+/// md.comp.navigation-bar.label-text.tracking (Enabled / Label text)
+$label-text-tracking: md-sys-typescale.$label-medium-tracking;
+/// md.comp.navigation-bar.label-text.weight (Enabled / Label text)
+$label-text-weight: md-sys-typescale.$label-medium-weight;
+/// md.comp.navigation-bar.large-badge.color (Enabled / [Deprecated] Large badge)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.
+$large-badge-color: md-sys-color.$error;
+/// md.comp.navigation-bar.pressed.state-layer.opacity (Enabled / State layer)
+$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.navigation-bar.label-text.type (Enabled / Label text)
+@mixin label-text-type {
+  font-family: $label-text-font;
+  font-size: $label-text-size;
+  font-weight: $label-text-weight;
+  letter-spacing: $label-text-tracking;
+  line-height: $label-text-line-height;
+}

package/tokens/versions/v30_0/sass/_md-comp-navigation-drawer.scss

@@ -0,0 +1,187 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-ref-palette';
+@use 'md-sys-color';
+@use 'md-sys-elevation';
+@use 'md-sys-shape';
+@use 'md-sys-state';
+@use 'md-sys-state-focus-indicator';
+@use 'md-sys-typescale';
+
+/// md.comp.navigation-drawer.active-indicator.height (Enabled / Active indicator)
+$active-indicator-height: 56px;
+/// md.comp.navigation-drawer.active-indicator.width (Enabled / Active indicator)
+$active-indicator-width: 336px;
+/// md.comp.navigation-drawer.container.height (Enabled / Container)
+$container-height: 100%;
+/// md.comp.navigation-drawer.container.width (Enabled / Container)
+$container-width: 360px;
+/// md.comp.navigation-drawer.icon.size (Enabled / Icon)
+$icon-size: 24px;
+/// md.comp.navigation-drawer.scrim.opacity (Enabled / [Deprecated] Scrim)
+///
+/// @deprecated Bug fix. Token does not represent M3 design intent. Use Neutral-Variant10 at 50% for scrims instead.
+$scrim-opacity: 0.4;
+/// md.comp.navigation-drawer.active-indicator.color (Enabled / Active indicator)
+$active-indicator-color: md-sys-color.$secondary-container;
+/// md.comp.navigation-drawer.active-indicator.shape (Enabled / Active indicator)
+$active-indicator-shape: md-sys-shape.$corner-full;
+/// md.comp.navigation-drawer.active.focus.icon.color (Focused / Icon)
+$active-focus-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-drawer.active.focus.label-text.color (Focused / Label text)
+$active-focus-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-drawer.active.focus.state-layer.color (Focused / State layer)
+$active-focus-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-drawer.active.hover.icon.color (Hovered / Icon)
+$active-hover-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-drawer.active.hover.label-text.color (Hovered / Label text)
+$active-hover-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-drawer.active.hover.state-layer.color (Hovered / State layer)
+$active-hover-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-drawer.active.icon.color (Enabled / Icon)
+$active-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-drawer.active.label-text.color (Enabled / Label text)
+$active-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-drawer.active.label-text.weight (Enabled / Label text)
+$active-label-text-weight: md-sys-typescale.$label-large-weight-prominent;
+/// md.comp.navigation-drawer.active.pressed.icon.color (Pressed (ripple) / Icon)
+$active-pressed-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-drawer.active.pressed.label-text.color (Pressed (ripple) / Label text)
+$active-pressed-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-drawer.active.pressed.state-layer.color (Pressed (ripple) / State layer)
+$active-pressed-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-drawer.bottom.container.shape (Enabled / Container)
+$bottom-container-shape: md-sys-shape.$corner-large-top;
+/// md.comp.navigation-drawer.container.color (Enabled / Container)
+///
+/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Use "md.comp.navigation-drawer.modal.container.color" or "md.comp.navigation-drawer.standard.container.color" instead depending on desired configuration.
+$container-color: md-sys-color.$surface;
+/// md.comp.navigation-drawer.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-large-end;
+/// md.comp.navigation-drawer.container.surface-tint-layer.color (Enabled / Container)
+///
+/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.
+$container-surface-tint-layer-color: md-sys-color.$surface-tint;
+/// md.comp.navigation-drawer.divider.color (Enabled / Divider)
+///
+/// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.color as a replacement
+$divider-color: md-sys-color.$outline;
+/// md.comp.navigation-drawer.focus.indicator.color (Focused / Focus indicator)
+$focus-indicator-color: md-sys-color.$secondary;
+/// md.comp.navigation-drawer.focus.indicator.outline.offset (Focused / Focus indicator)
+$focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset;
+/// md.comp.navigation-drawer.focus.indicator.thickness (Focused / Focus indicator)
+$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;
+/// md.comp.navigation-drawer.focus.state-layer.opacity (Focused / State layer)
+$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.navigation-drawer.headline.color (Enabled / Headline)
+$headline-color: md-sys-color.$on-surface-variant;
+/// md.comp.navigation-drawer.headline.font (Enabled / Headline)
+$headline-font: md-sys-typescale.$title-small-font;
+/// md.comp.navigation-drawer.headline.line-height (Enabled / Headline)
+$headline-line-height: md-sys-typescale.$title-small-line-height;
+/// md.comp.navigation-drawer.headline.size (Enabled / Headline)
+$headline-size: md-sys-typescale.$title-small-size;
+/// md.comp.navigation-drawer.headline.tracking (Enabled / Headline)
+$headline-tracking: md-sys-typescale.$title-small-tracking;
+/// md.comp.navigation-drawer.headline.weight (Enabled / Headline)
+$headline-weight: md-sys-typescale.$title-small-weight;
+/// md.comp.navigation-drawer.hover.state-layer.opacity (Hovered / State layer)
+$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.navigation-drawer.inactive.focus.icon.color (Focused / Icon)
+$inactive-focus-icon-color: md-sys-color.$on-surface;
+/// md.comp.navigation-drawer.inactive.focus.label-text.color (Focused / Label text)
+$inactive-focus-label-text-color: md-sys-color.$on-surface;
+/// md.comp.navigation-drawer.inactive.focus.state-layer.color (Focused / State layer)
+$inactive-focus-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.navigation-drawer.inactive.hover.icon.color (Hovered / Icon)
+$inactive-hover-icon-color: md-sys-color.$on-surface;
+/// md.comp.navigation-drawer.inactive.hover.label-text.color (Hovered / Label text)
+$inactive-hover-label-text-color: md-sys-color.$on-surface;
+/// md.comp.navigation-drawer.inactive.hover.state-layer.color (Hovered / State layer)
+$inactive-hover-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.navigation-drawer.inactive.icon.color (Enabled / Icon)
+$inactive-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.navigation-drawer.inactive.label-text.color (Enabled / Label text)
+$inactive-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.navigation-drawer.inactive.pressed.icon.color (Pressed (ripple) / Icon)
+$inactive-pressed-icon-color: md-sys-color.$on-surface;
+/// md.comp.navigation-drawer.inactive.pressed.label-text.color (Pressed (ripple) / Label text)
+$inactive-pressed-label-text-color: md-sys-color.$on-surface;
+/// md.comp.navigation-drawer.inactive.pressed.state-layer.color (Pressed (ripple) / State layer)
+$inactive-pressed-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-drawer.label-text.font (Enabled / Label text)
+$label-text-font: md-sys-typescale.$label-large-font;
+/// md.comp.navigation-drawer.label-text.line-height (Enabled / Label text)
+$label-text-line-height: md-sys-typescale.$label-large-line-height;
+/// md.comp.navigation-drawer.label-text.size (Enabled / Label text)
+$label-text-size: md-sys-typescale.$label-large-size;
+/// md.comp.navigation-drawer.label-text.tracking (Enabled / Label text)
+$label-text-tracking: md-sys-typescale.$label-large-tracking;
+/// md.comp.navigation-drawer.label-text.weight (Enabled / Label text)
+$label-text-weight: md-sys-typescale.$label-large-weight;
+/// md.comp.navigation-drawer.large-badge-label.color (Enabled / Large badge label)
+$large-badge-label-color: md-sys-color.$on-surface-variant;
+/// md.comp.navigation-drawer.large-badge-label.font (Enabled / Large badge label)
+$large-badge-label-font: md-sys-typescale.$label-large-font;
+/// md.comp.navigation-drawer.large-badge-label.line-height (Enabled / Large badge label)
+$large-badge-label-line-height: md-sys-typescale.$label-large-line-height;
+/// md.comp.navigation-drawer.large-badge-label.size (Enabled / Large badge label)
+$large-badge-label-size: md-sys-typescale.$label-large-size;
+/// md.comp.navigation-drawer.large-badge-label.tracking (Enabled / Large badge label)
+$large-badge-label-tracking: md-sys-typescale.$label-large-tracking;
+/// md.comp.navigation-drawer.large-badge-label.weight (Enabled / Large badge label)
+$large-badge-label-weight: md-sys-typescale.$label-large-weight;
+/// md.comp.navigation-drawer.modal.container.color (Enabled / Container)
+$modal-container-color: md-sys-color.$surface-container-low;
+/// md.comp.navigation-drawer.modal.container.elevation (Enabled / Container)
+$modal-container-elevation: md-sys-elevation.$level1;
+/// md.comp.navigation-drawer.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.navigation-drawer.scrim.color (Enabled / [Deprecated] Scrim)
+///
+/// @deprecated Bug fix. Token does not represent M3 design intent. Use Neutral-Variant10 at 50% for scrims instead.
+$scrim-color: md-ref-palette.$neutral-variant20;
+/// md.comp.navigation-drawer.standard.container.color (Enabled / Container)
+$standard-container-color: md-sys-color.$surface;
+/// md.comp.navigation-drawer.standard.container.elevation (Enabled / Container)
+$standard-container-elevation: md-sys-elevation.$level0;
+/// md.comp.navigation-drawer.headline.type (Enabled / Headline)
+@mixin headline-type {
+  font-family: $headline-font;
+  font-size: $headline-size;
+  font-weight: $headline-weight;
+  letter-spacing: $headline-tracking;
+  line-height: $headline-line-height;
+}
+/// md.comp.navigation-drawer.label-text.type (Enabled / Label text)
+@mixin label-text-type {
+  font-family: $label-text-font;
+  font-size: $label-text-size;
+  font-weight: $label-text-weight;
+  letter-spacing: $label-text-tracking;
+  line-height: $label-text-line-height;
+}
+/// md.comp.navigation-drawer.large-badge-label.type (Enabled / Large badge label)
+@mixin large-badge-label-type {
+  font-family: $large-badge-label-font;
+  font-size: $large-badge-label-size;
+  font-weight: $large-badge-label-weight;
+  letter-spacing: $large-badge-label-tracking;
+  line-height: $large-badge-label-line-height;
+}

package/tokens/versions/v30_0/sass/_md-comp-navigation-rail.scss

@@ -0,0 +1,233 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-color';
+@use 'md-sys-elevation';
+@use 'md-sys-shape';
+@use 'md-sys-state';
+@use 'md-sys-typescale';
+
+/// md.comp.navigation-rail.active-indicator.height (Enabled / Active indicator)
+$active-indicator-height: 32px;
+/// md.comp.navigation-rail.active-indicator.width (Enabled / Active indicator)
+$active-indicator-width: 56px;
+/// md.comp.navigation-rail.badge.shape (Enabled / [Deprecated] Badge)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.*` tokens.
+$badge-shape: 3px;
+/// md.comp.navigation-rail.badge.size (Enabled / [Deprecated] Badge)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.*` tokens.
+$badge-size: 6px;
+/// md.comp.navigation-rail.container.width (Enabled / Container)
+$container-width: 80px;
+/// md.comp.navigation-rail.icon.size (Enabled / Icon)
+$icon-size: 24px;
+/// md.comp.navigation-rail.large-badge.shape (Enabled / [Deprecated] Large badge)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.
+$large-badge-shape: 8px;
+/// md.comp.navigation-rail.large-badge.size (Enabled / [Deprecated] Large badge)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.
+$large-badge-size: 16px;
+/// md.comp.navigation-rail.menu.icon.size (Enabled / Icon)
+///
+/// @deprecated Using menu button token instead, this token no longer needed.
+$menu-icon-size: 24px;
+/// md.comp.navigation-rail.no-label.active-indicator.height (Enabled / Active indicator)
+$no-label-active-indicator-height: 56px;
+/// md.comp.navigation-rail.active-indicator.color (Enabled / Active indicator)
+$active-indicator-color: md-sys-color.$secondary-container;
+/// md.comp.navigation-rail.active-indicator.shape (Enabled / Active indicator)
+$active-indicator-shape: md-sys-shape.$corner-full;
+/// md.comp.navigation-rail.active.focus.icon.color (Focused / Icon)
+$active-focus-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-rail.active.focus.label-text.color (Focused / Label text)
+$active-focus-label-text-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.active.focus.state-layer.color (Focused / State layer)
+$active-focus-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.active.hover.icon.color (Hovered / Icon)
+$active-hover-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-rail.active.hover.label-text.color (Hovered / Label text)
+$active-hover-label-text-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.active.hover.state-layer.color (Hovered / State layer)
+$active-hover-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.active.icon.color (Enabled / Icon)
+$active-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-rail.active.label-text.color (Enabled / Label text)
+$active-label-text-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.active.label-text.weight (Enabled / Label text)
+$active-label-text-weight: md-sys-typescale.$label-medium-weight-prominent;
+/// md.comp.navigation-rail.active.pressed.icon.color (Pressed (ripple) / Icon)
+$active-pressed-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.navigation-rail.active.pressed.label-text.color (Pressed (ripple) / Label text)
+$active-pressed-label-text-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.active.pressed.state-layer.color (Pressed (ripple) / State layer)
+$active-pressed-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.badge.color (Enabled / [Deprecated] Badge)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.*` tokens.
+$badge-color: md-sys-color.$error;
+/// md.comp.navigation-rail.container.color (Enabled / Container)
+$container-color: md-sys-color.$surface;
+/// md.comp.navigation-rail.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level0;
+/// md.comp.navigation-rail.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-none;
+/// md.comp.navigation-rail.focus.state-layer.opacity (Focused / State layer)
+$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.navigation-rail.hover.state-layer.opacity (Hovered / State layer)
+$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.navigation-rail.inactive.focus.icon.color (Focused / Icon)
+$inactive-focus-icon-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.inactive.focus.label-text.color (Focused / Label text)
+$inactive-focus-label-text-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.inactive.focus.state-layer.color (Focused / State layer)
+$inactive-focus-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.inactive.hover.icon.color (Hovered / Icon)
+$inactive-hover-icon-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.inactive.hover.label-text.color (Hovered / Label text)
+$inactive-hover-label-text-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.inactive.hover.state-layer.color (Hovered / State layer)
+$inactive-hover-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.inactive.icon.color (Enabled / Icon)
+$inactive-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.navigation-rail.inactive.label-text.color (Enabled / Label text)
+$inactive-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.navigation-rail.inactive.pressed.icon.color (Pressed (ripple) / Icon)
+$inactive-pressed-icon-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.inactive.pressed.label-text.color (Pressed (ripple) / Label text)
+$inactive-pressed-label-text-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.inactive.pressed.state-layer.color (Pressed (ripple) / State layer)
+$inactive-pressed-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.label-text.font (Enabled / Label text)
+$label-text-font: md-sys-typescale.$label-medium-font;
+/// md.comp.navigation-rail.label-text.font-family (Enabled / Label text)
+///
+/// @deprecated For consistency, we have standardized typography naming. Replace usage with the suggested token.
+$label-text-font-family: md-sys-typescale.$label-medium-font;
+/// md.comp.navigation-rail.label-text.font-size (Enabled / Label text)
+///
+/// @deprecated For consistency, we have standardized typography naming. Replace usage with the suggested token.
+$label-text-font-size: md-sys-typescale.$label-medium-size;
+/// md.comp.navigation-rail.label-text.letter-spacing (Enabled / Label text)
+///
+/// @deprecated For consistency, we have standardized typography naming. Replace usage with the suggested token.
+$label-text-letter-spacing: md-sys-typescale.$label-medium-tracking;
+/// md.comp.navigation-rail.label-text.line-height (Enabled / Label text)
+$label-text-line-height: md-sys-typescale.$label-medium-line-height;
+/// md.comp.navigation-rail.label-text.size (Enabled / Label text)
+$label-text-size: md-sys-typescale.$label-medium-size;
+/// md.comp.navigation-rail.label-text.tracking (Enabled / Label text)
+$label-text-tracking: md-sys-typescale.$label-medium-tracking;
+/// md.comp.navigation-rail.label-text.weight (Enabled / Label text)
+$label-text-weight: md-sys-typescale.$label-medium-weight;
+/// md.comp.navigation-rail.large-badge-label.color (Enabled / [Deprecated] Large badge label)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.
+$large-badge-label-color: md-sys-color.$on-error;
+/// md.comp.navigation-rail.large-badge-label.font (Enabled / [Deprecated] Large badge label)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.
+$large-badge-label-font: md-sys-typescale.$label-small-font;
+/// md.comp.navigation-rail.large-badge-label.font-family (Enabled / [Deprecated] Large badge label)
+///
+/// @deprecated For consistency, we have standardized typography naming. Replace usage with the suggested token.
+$large-badge-label-font-family: md-sys-typescale.$label-small-font;
+/// md.comp.navigation-rail.large-badge-label.line-height (Enabled / [Deprecated] Large badge label)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.
+$large-badge-label-line-height: md-sys-typescale.$label-small-line-height;
+/// md.comp.navigation-rail.large-badge-label.size (Enabled / [Deprecated] Large badge label)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.
+$large-badge-label-size: md-sys-typescale.$label-small-size;
+/// md.comp.navigation-rail.large-badge-label.tracking (Enabled / [Deprecated] Large badge label)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.
+$large-badge-label-tracking: md-sys-typescale.$label-small-tracking;
+/// md.comp.navigation-rail.large-badge-label.weight (Enabled / [Deprecated] Large badge label)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.
+$large-badge-label-weight: md-sys-typescale.$label-small-weight;
+/// md.comp.navigation-rail.large-badge.color (Enabled / [Deprecated] Large badge)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.
+$large-badge-color: md-sys-color.$error;
+/// md.comp.navigation-rail.menu.focus.icon.color (Focused / Icon)
+///
+/// @deprecated Using menu button token instead, this token no longer needed.
+$menu-focus-icon-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.menu.focus.state-layer.color (Focused / State layer)
+///
+/// @deprecated Using menu button token instead, this token no longer needed.
+$menu-focus-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.menu.focus.state-layer.opacity (Focused / State layer)
+///
+/// @deprecated Using menu button token instead, this token no longer needed.
+$menu-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.navigation-rail.menu.hover.icon.color (Hovered / Icon)
+///
+/// @deprecated Using menu button token instead, this token no longer needed.
+$menu-hover-icon-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.menu.hover.state-layer.color (Hovered / State layer)
+///
+/// @deprecated Using menu button token instead, this token no longer needed.
+$menu-hover-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.menu.hover.state-layer.opacity (Hovered / State layer)
+///
+/// @deprecated Using menu button token instead, this token no longer needed.
+$menu-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.navigation-rail.menu.icon.color (Enabled / Icon)
+///
+/// @deprecated Using menu button token instead, this token no longer needed.
+$menu-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.navigation-rail.menu.pressed.icon.color (Pressed (ripple) / Icon)
+///
+/// @deprecated Using menu button token instead, this token no longer needed.
+$menu-pressed-icon-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.menu.pressed.state-layer.color (Pressed (ripple) / State layer)
+///
+/// @deprecated Using menu button token instead, this token no longer needed.
+$menu-pressed-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.navigation-rail.menu.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+///
+/// @deprecated Using menu button token instead, this token no longer needed.
+$menu-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.navigation-rail.no-label.active-indicator.shape (Enabled / Active indicator)
+$no-label-active-indicator-shape: md-sys-shape.$corner-full;
+/// md.comp.navigation-rail.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.navigation-rail.label-text.type (Enabled / Label text)
+@mixin label-text-type {
+  font-family: $label-text-font;
+  font-size: $label-text-size;
+  font-weight: $label-text-weight;
+  letter-spacing: $label-text-tracking;
+  line-height: $label-text-line-height;
+}
+/// md.comp.navigation-rail.large-badge-label.type (Enabled / [Deprecated] Large badge label)
+///
+/// @deprecated Badge values were refactored out into their own token set. Replace usage with the equivalent `md.comp.badge.large.*` tokens.
+@mixin large-badge-label-type {
+  font-family: $large-badge-label-font;
+  font-size: $large-badge-label-size;
+  font-weight: $large-badge-label-weight;
+  letter-spacing: $large-badge-label-tracking;
+  line-height: $large-badge-label-line-height;
+}