@material/web 2.4.1 → 2.4.2-nightly.067f9cd.0

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

@@ -0,0 +1,130 @@
+//
+// 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.primary-navigation-tab.active-indicator.height (Enabled / Active indicator)
+$active-indicator-height: 3px;
+/// md.comp.primary-navigation-tab.active-indicator.shape (Enabled / Active indicator)
+$active-indicator-shape: 3px 3px 0px 0px;
+/// md.comp.primary-navigation-tab.container.height (Enabled / Container)
+$container-height: 48px;
+/// md.comp.primary-navigation-tab.divider.height (Enabled / Divider)
+///
+/// @deprecated Use standalone divider component instead of nested tokens.
+$divider-height: 1px;
+/// md.comp.primary-navigation-tab.with-icon-and-label-text.container.height (Enabled / Container)
+$with-icon-and-label-text-container-height: 64px;
+/// md.comp.primary-navigation-tab.with-icon.icon.size (Enabled / Icon)
+$with-icon-icon-size: 24px;
+/// md.comp.primary-navigation-tab.active-indicator.color (Enabled / Active indicator)
+$active-indicator-color: md-sys-color.$primary;
+/// md.comp.primary-navigation-tab.active.focus.state-layer.color (Focused / State layer)
+$active-focus-state-layer-color: md-sys-color.$primary;
+/// md.comp.primary-navigation-tab.active.focus.state-layer.opacity (Focused / State layer)
+$active-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.primary-navigation-tab.active.hover.state-layer.color (Hovered / State layer)
+$active-hover-state-layer-color: md-sys-color.$primary;
+/// md.comp.primary-navigation-tab.active.hover.state-layer.opacity (Hovered / State layer)
+$active-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.primary-navigation-tab.active.pressed.state-layer.color (Pressed (ripple) / State layer)
+$active-pressed-state-layer-color: md-sys-color.$primary;
+/// md.comp.primary-navigation-tab.active.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$active-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.primary-navigation-tab.container.color (Enabled / Container)
+$container-color: md-sys-color.$surface;
+/// md.comp.primary-navigation-tab.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level0;
+/// md.comp.primary-navigation-tab.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-none;
+/// md.comp.primary-navigation-tab.divider.color (Enabled / Divider)
+///
+/// @deprecated Use standalone divider component instead of nested tokens.
+$divider-color: md-sys-color.$surface-variant;
+/// md.comp.primary-navigation-tab.focus.indicator.color (Focused / Focus indicator)
+$focus-indicator-color: md-sys-color.$secondary;
+/// md.comp.primary-navigation-tab.focus.indicator.outline.offset (Focused / Focus indicator)
+$focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset;
+/// md.comp.primary-navigation-tab.focus.indicator.thickness (Focused / Focus indicator)
+$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;
+/// md.comp.primary-navigation-tab.inactive.focus.state-layer.color (Focused / State layer)
+$inactive-focus-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.primary-navigation-tab.inactive.focus.state-layer.opacity (Focused / State layer)
+$inactive-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.primary-navigation-tab.inactive.hover.state-layer.color (Hovered / State layer)
+$inactive-hover-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.primary-navigation-tab.inactive.hover.state-layer.opacity (Hovered / State layer)
+$inactive-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.primary-navigation-tab.inactive.pressed.state-layer.color (Pressed (ripple) / State layer)
+$inactive-pressed-state-layer-color: md-sys-color.$primary;
+/// md.comp.primary-navigation-tab.inactive.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$inactive-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.primary-navigation-tab.with-icon.active.focus.icon.color (Focused / Icon)
+$with-icon-active-focus-icon-color: md-sys-color.$primary;
+/// md.comp.primary-navigation-tab.with-icon.active.hover.icon.color (Hovered / Icon)
+$with-icon-active-hover-icon-color: md-sys-color.$primary;
+/// md.comp.primary-navigation-tab.with-icon.active.icon.color (Enabled / Icon)
+$with-icon-active-icon-color: md-sys-color.$primary;
+/// md.comp.primary-navigation-tab.with-icon.active.pressed.icon.color (Pressed (ripple) / Icon)
+$with-icon-active-pressed-icon-color: md-sys-color.$primary;
+/// md.comp.primary-navigation-tab.with-icon.inactive.focus.icon.color (Focused / Icon)
+$with-icon-inactive-focus-icon-color: md-sys-color.$on-surface;
+/// md.comp.primary-navigation-tab.with-icon.inactive.hover.icon.color (Hovered / Icon)
+$with-icon-inactive-hover-icon-color: md-sys-color.$on-surface;
+/// md.comp.primary-navigation-tab.with-icon.inactive.icon.color (Enabled / Icon)
+$with-icon-inactive-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.primary-navigation-tab.with-icon.inactive.pressed.icon.color (Pressed (ripple) / Icon)
+$with-icon-inactive-pressed-icon-color: md-sys-color.$on-surface;
+/// md.comp.primary-navigation-tab.with-label-text.active.focus.label-text.color (Focused / Label text)
+$with-label-text-active-focus-label-text-color: md-sys-color.$primary;
+/// md.comp.primary-navigation-tab.with-label-text.active.hover.label-text.color (Hovered / Label text)
+$with-label-text-active-hover-label-text-color: md-sys-color.$primary;
+/// md.comp.primary-navigation-tab.with-label-text.active.label-text.color (Enabled / Label text)
+$with-label-text-active-label-text-color: md-sys-color.$primary;
+/// md.comp.primary-navigation-tab.with-label-text.active.pressed.label-text.color (Pressed (ripple) / Label text)
+$with-label-text-active-pressed-label-text-color: md-sys-color.$primary;
+/// md.comp.primary-navigation-tab.with-label-text.inactive.focus.label-text.color (Focused / Label text)
+$with-label-text-inactive-focus-label-text-color: md-sys-color.$on-surface;
+/// md.comp.primary-navigation-tab.with-label-text.inactive.hover.label-text.color (Hovered / Label text)
+$with-label-text-inactive-hover-label-text-color: md-sys-color.$on-surface;
+/// md.comp.primary-navigation-tab.with-label-text.inactive.label-text.color (Enabled / Label text)
+$with-label-text-inactive-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.primary-navigation-tab.with-label-text.inactive.pressed.label-text.color (Pressed (ripple) / Label text)
+$with-label-text-inactive-pressed-label-text-color: md-sys-color.$on-surface;
+/// md.comp.primary-navigation-tab.with-label-text.label-text.font (Enabled / Label text)
+$with-label-text-label-text-font: md-sys-typescale.$title-small-font;
+/// md.comp.primary-navigation-tab.with-label-text.label-text.line-height (Enabled / Label text)
+$with-label-text-label-text-line-height: md-sys-typescale.$title-small-line-height;
+/// md.comp.primary-navigation-tab.with-label-text.label-text.size (Enabled / Label text)
+$with-label-text-label-text-size: md-sys-typescale.$title-small-size;
+/// md.comp.primary-navigation-tab.with-label-text.label-text.tracking (Enabled / Label text)
+$with-label-text-label-text-tracking: md-sys-typescale.$title-small-tracking;
+/// md.comp.primary-navigation-tab.with-label-text.label-text.weight (Enabled / Label text)
+$with-label-text-label-text-weight: md-sys-typescale.$title-small-weight;
+/// md.comp.primary-navigation-tab.with-label-text.label-text.type (Enabled / Label text)
+@mixin with-label-text-label-text-type {
+  font-family: $with-label-text-label-text-font;
+  font-size: $with-label-text-label-text-size;
+  font-weight: $with-label-text-label-text-weight;
+  letter-spacing: $with-label-text-label-text-tracking;
+  line-height: $with-label-text-label-text-line-height;
+}

package/tokens/versions/v30_0/sass/_md-comp-progress-indicator-circular.scss

@@ -0,0 +1,47 @@
+//
+// 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
+
+/// md.comp.progress-indicator.circular.active-indicator.thickness (Circular - baseline)
+$active-indicator-thickness: 4px;
+/// md.comp.progress-indicator.circular.active-indicator.wave.amplitude (Circular - baseline)
+$active-indicator-wave-amplitude: 1.6px;
+/// md.comp.progress-indicator.circular.active-indicator.wave.wavelength (Circular - baseline)
+$active-indicator-wave-wavelength: 15px;
+/// md.comp.progress-indicator.circular.size (Circular - baseline)
+$size: 40px;
+/// md.comp.progress-indicator.circular.thick.active-indicator.thickness ([Deprecated] Circular - thick)
+///
+/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code
+$thick-active-indicator-thickness: 8px;
+/// md.comp.progress-indicator.circular.thick.size ([Deprecated] Circular - thick)
+///
+/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code
+$thick-size: 52px;
+/// md.comp.progress-indicator.circular.thick.track-active-indicator-space ([Deprecated] Circular - thick)
+///
+/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code
+$thick-track-active-indicator-space: 4px;
+/// md.comp.progress-indicator.circular.thick.track.thickness ([Deprecated] Circular - thick)
+///
+/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code
+$thick-track-thickness: 8px;
+/// md.comp.progress-indicator.circular.track-active-indicator-space (Circular - baseline)
+$track-active-indicator-space: 4px;
+/// md.comp.progress-indicator.circular.track.thickness (Circular - baseline)
+$track-thickness: 4px;
+/// md.comp.progress-indicator.circular.with-wave.size (Circular - baseline)
+$with-wave-size: 48px;

package/tokens/versions/v30_0/sass/_md-comp-progress-indicator-linear.scss

@@ -0,0 +1,65 @@
+//
+// 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
+
+/// md.comp.progress-indicator.linear.active-indicator.thickness (Linear - baseline)
+$active-indicator-thickness: 4px;
+/// md.comp.progress-indicator.linear.active-indicator.wave.amplitude (Linear - baseline)
+$active-indicator-wave-amplitude: 3px;
+/// md.comp.progress-indicator.linear.active-indicator.wave.wavelength (Linear - baseline)
+$active-indicator-wave-wavelength: 40px;
+/// md.comp.progress-indicator.linear.height (Linear - baseline)
+$height: 4px;
+/// md.comp.progress-indicator.linear.indeterminate.active-indicator.wave.wavelength (Linear - baseline)
+$indeterminate-active-indicator-wave-wavelength: 20px;
+/// md.comp.progress-indicator.linear.stop-indicator.size (Linear - baseline)
+$stop-indicator-size: 4px;
+/// md.comp.progress-indicator.linear.stop-indicator.trailing-space (Linear - baseline)
+$stop-indicator-trailing-space: 0px;
+/// md.comp.progress-indicator.linear.thick.active-indicator.thickness ([Deprecated] Linear - thick)
+///
+/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code
+$thick-active-indicator-thickness: 8px;
+/// md.comp.progress-indicator.linear.thick.height ([Deprecated] Linear - thick)
+///
+/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code
+$thick-height: 8px;
+/// md.comp.progress-indicator.linear.thick.stop-indicator.size ([Deprecated] Linear - thick)
+///
+/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code
+$thick-stop-indicator-size: 4px;
+/// md.comp.progress-indicator.linear.thick.stop-indicator.trailing-space ([Deprecated] Linear - thick)
+///
+/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code
+$thick-stop-indicator-trailing-space: 2px;
+/// md.comp.progress-indicator.linear.thick.track-active-indicator-space ([Deprecated] Linear - thick)
+///
+/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code
+$thick-track-active-indicator-space: 4px;
+/// md.comp.progress-indicator.linear.thick.track.thickness ([Deprecated] Linear - thick)
+///
+/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code
+$thick-track-thickness: 8px;
+/// md.comp.progress-indicator.linear.thick.with-wave.height ([Deprecated] Linear - thick)
+///
+/// @deprecated No longer tokenized as a variant, but rather a sample configuration in code
+$thick-with-wave-height: 14px;
+/// md.comp.progress-indicator.linear.track-active-indicator-space (Linear - baseline)
+$track-active-indicator-space: 4px;
+/// md.comp.progress-indicator.linear.track.thickness (Linear - baseline)
+$track-thickness: 4px;
+/// md.comp.progress-indicator.linear.with-wave.height (Linear - baseline)
+$with-wave-height: 10px;

package/tokens/versions/v30_0/sass/_md-comp-progress-indicator.scss

@@ -0,0 +1,48 @@
+//
+// 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-shape';
+
+/// md.comp.progress-indicator.active-indicator-track-space ([Deprecated] Enabled / [Deprecated] Spacing)
+///
+/// @deprecated Token is deprecated.
+$active-indicator-track-space: 4px;
+/// md.comp.progress-indicator.active-indicator.thickness ([Deprecated] Enabled / [Deprecated] Active Indicator)
+///
+/// @deprecated Token is deprecated.
+$active-indicator-thickness: 4px;
+/// md.comp.progress-indicator.stop-indicator.size ([Deprecated] Enabled / [Deprecated] Stop indicator)
+///
+/// @deprecated Token is deprecated.
+$stop-indicator-size: 4px;
+/// md.comp.progress-indicator.track.thickness ([Deprecated] Enabled / [Deprecated] Track)
+///
+/// @deprecated Token is deprecated.
+$track-thickness: 4px;
+/// md.comp.progress-indicator.active-indicator.color (Color)
+$active-indicator-color: md-sys-color.$primary;
+/// md.comp.progress-indicator.active-indicator.shape (Shape)
+$active-indicator-shape: md-sys-shape.$corner-full;
+/// md.comp.progress-indicator.stop-indicator.color (Color)
+$stop-indicator-color: md-sys-color.$primary;
+/// md.comp.progress-indicator.stop-indicator.shape (Shape)
+$stop-indicator-shape: md-sys-shape.$corner-full;
+/// md.comp.progress-indicator.track.color (Color)
+$track-color: md-sys-color.$secondary-container;
+/// md.comp.progress-indicator.track.shape (Shape)
+$track-shape: md-sys-shape.$corner-full;

package/tokens/versions/v30_0/sass/_md-comp-radio-button.scss

@@ -0,0 +1,72 @@
+//
+// 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-state';
+
+/// md.comp.radio-button.disabled.selected.icon.opacity (Disabled / Icon)
+$disabled-selected-icon-opacity: 0.38;
+/// md.comp.radio-button.disabled.unselected.icon.opacity (Disabled / Icon)
+$disabled-unselected-icon-opacity: 0.38;
+/// md.comp.radio-button.icon.size (Enabled / Icon)
+$icon-size: 20px;
+/// md.comp.radio-button.state-layer.size (Enabled / State layer)
+$state-layer-size: 40px;
+/// md.comp.radio-button.disabled.selected.icon.color (Disabled / Icon)
+$disabled-selected-icon-color: md-sys-color.$on-surface;
+/// md.comp.radio-button.disabled.unselected.icon.color (Disabled / Icon)
+$disabled-unselected-icon-color: md-sys-color.$on-surface;
+/// md.comp.radio-button.selected.focus.icon.color (Focused / Icon)
+$selected-focus-icon-color: md-sys-color.$primary;
+/// md.comp.radio-button.selected.focus.state-layer.color (Focused / State layer)
+$selected-focus-state-layer-color: md-sys-color.$primary;
+/// md.comp.radio-button.selected.focus.state-layer.opacity (Focused / State layer)
+$selected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.radio-button.selected.hover.icon.color (Hovered / Icon)
+$selected-hover-icon-color: md-sys-color.$primary;
+/// md.comp.radio-button.selected.hover.state-layer.color (Hovered / State layer)
+$selected-hover-state-layer-color: md-sys-color.$primary;
+/// md.comp.radio-button.selected.hover.state-layer.opacity (Hovered / State layer)
+$selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.radio-button.selected.icon.color (Enabled / Icon)
+$selected-icon-color: md-sys-color.$primary;
+/// md.comp.radio-button.selected.pressed.icon.color (Pressed (ripple) / Icon)
+$selected-pressed-icon-color: md-sys-color.$primary;
+/// md.comp.radio-button.selected.pressed.state-layer.color (Pressed (ripple) / State layer)
+$selected-pressed-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.radio-button.selected.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.radio-button.unselected.focus.icon.color (Focused / Icon)
+$unselected-focus-icon-color: md-sys-color.$on-surface;
+/// md.comp.radio-button.unselected.focus.state-layer.color (Focused / State layer)
+$unselected-focus-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.radio-button.unselected.focus.state-layer.opacity (Focused / State layer)
+$unselected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.radio-button.unselected.hover.icon.color (Hovered / Icon)
+$unselected-hover-icon-color: md-sys-color.$on-surface;
+/// md.comp.radio-button.unselected.hover.state-layer.color (Hovered / State layer)
+$unselected-hover-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.radio-button.unselected.hover.state-layer.opacity (Hovered / State layer)
+$unselected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.radio-button.unselected.icon.color (Enabled / Icon)
+$unselected-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.radio-button.unselected.pressed.icon.color (Pressed (ripple) / Icon)
+$unselected-pressed-icon-color: md-sys-color.$on-surface;
+/// md.comp.radio-button.unselected.pressed.state-layer.color (Pressed (ripple) / State layer)
+$unselected-pressed-state-layer-color: md-sys-color.$primary;
+/// md.comp.radio-button.unselected.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$unselected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;

package/tokens/versions/v30_0/sass/_md-comp-rich-tooltip.scss

@@ -0,0 +1,113 @@
+//
+// 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.rich-tooltip.action.focus.label-text.color (Focused / Label text)
+$action-focus-label-text-color: md-sys-color.$primary;
+/// md.comp.rich-tooltip.action.focus.state-layer.color (Focused / State layer)
+$action-focus-state-layer-color: md-sys-color.$primary;
+/// md.comp.rich-tooltip.action.focus.state-layer.opacity (Focused / State layer)
+$action-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.rich-tooltip.action.hover.label-text.color (Hovered / Label text)
+$action-hover-label-text-color: md-sys-color.$primary;
+/// md.comp.rich-tooltip.action.hover.state-layer.color (Hovered / State layer)
+$action-hover-state-layer-color: md-sys-color.$primary;
+/// md.comp.rich-tooltip.action.hover.state-layer.opacity (Hovered / State layer)
+$action-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.rich-tooltip.action.label-text.color (Enabled / Label text)
+$action-label-text-color: md-sys-color.$primary;
+/// md.comp.rich-tooltip.action.label-text.font (Enabled / Label text)
+$action-label-text-font: md-sys-typescale.$label-large-font;
+/// md.comp.rich-tooltip.action.label-text.line-height (Enabled / Label text)
+$action-label-text-line-height: md-sys-typescale.$label-large-line-height;
+/// md.comp.rich-tooltip.action.label-text.size (Enabled / Label text)
+$action-label-text-size: md-sys-typescale.$label-large-size;
+/// md.comp.rich-tooltip.action.label-text.tracking (Enabled / Label text)
+$action-label-text-tracking: md-sys-typescale.$label-large-tracking;
+/// md.comp.rich-tooltip.action.label-text.weight (Enabled / Label text)
+$action-label-text-weight: md-sys-typescale.$label-large-weight;
+/// md.comp.rich-tooltip.action.pressed.label-text.color (Pressed (ripple) / Label text)
+$action-pressed-label-text-color: md-sys-color.$primary;
+/// md.comp.rich-tooltip.action.pressed.state-layer.color (Pressed (ripple) / State layer)
+$action-pressed-state-layer-color: md-sys-color.$primary;
+/// md.comp.rich-tooltip.action.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$action-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.rich-tooltip.container.color (Enabled / Container)
+$container-color: md-sys-color.$surface-container;
+/// md.comp.rich-tooltip.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level2;
+/// md.comp.rich-tooltip.container.shadow-color (Enabled / Container)
+$container-shadow-color: md-sys-color.$shadow;
+/// md.comp.rich-tooltip.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-medium;
+/// md.comp.rich-tooltip.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.rich-tooltip.subhead.color (Enabled / Subhead)
+$subhead-color: md-sys-color.$on-surface-variant;
+/// md.comp.rich-tooltip.subhead.font (Enabled / Subhead)
+$subhead-font: md-sys-typescale.$title-small-font;
+/// md.comp.rich-tooltip.subhead.line-height (Enabled / Subhead)
+$subhead-line-height: md-sys-typescale.$title-small-line-height;
+/// md.comp.rich-tooltip.subhead.size (Enabled / Subhead)
+$subhead-size: md-sys-typescale.$title-small-size;
+/// md.comp.rich-tooltip.subhead.tracking (Enabled / Subhead)
+$subhead-tracking: md-sys-typescale.$title-small-tracking;
+/// md.comp.rich-tooltip.subhead.weight (Enabled / Subhead)
+$subhead-weight: md-sys-typescale.$title-small-weight;
+/// md.comp.rich-tooltip.supporting-text.color (Enabled / Supporting text)
+$supporting-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.rich-tooltip.supporting-text.font (Enabled / Supporting text)
+$supporting-text-font: md-sys-typescale.$body-medium-font;
+/// md.comp.rich-tooltip.supporting-text.line-height (Enabled / Supporting text)
+$supporting-text-line-height: md-sys-typescale.$body-medium-line-height;
+/// md.comp.rich-tooltip.supporting-text.size (Enabled / Supporting text)
+$supporting-text-size: md-sys-typescale.$body-medium-size;
+/// md.comp.rich-tooltip.supporting-text.tracking (Enabled / Supporting text)
+$supporting-text-tracking: md-sys-typescale.$body-medium-tracking;
+/// md.comp.rich-tooltip.supporting-text.weight (Enabled / Supporting text)
+$supporting-text-weight: md-sys-typescale.$body-medium-weight;
+/// md.comp.rich-tooltip.action.label-text.type (Enabled / Label text)
+@mixin action-label-text-type {
+  font-family: $action-label-text-font;
+  font-size: $action-label-text-size;
+  font-weight: $action-label-text-weight;
+  letter-spacing: $action-label-text-tracking;
+  line-height: $action-label-text-line-height;
+}
+/// md.comp.rich-tooltip.subhead.type (Enabled / Subhead)
+@mixin subhead-type {
+  font-family: $subhead-font;
+  font-size: $subhead-size;
+  font-weight: $subhead-weight;
+  letter-spacing: $subhead-tracking;
+  line-height: $subhead-line-height;
+}
+/// md.comp.rich-tooltip.supporting-text.type (Enabled / Supporting text)
+@mixin supporting-text-type {
+  font-family: $supporting-text-font;
+  font-size: $supporting-text-size;
+  font-weight: $supporting-text-weight;
+  letter-spacing: $supporting-text-tracking;
+  line-height: $supporting-text-line-height;
+}

package/tokens/versions/v30_0/sass/_md-comp-scrim.scss

@@ -0,0 +1,23 @@
+//
+// 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';
+
+/// md.comp.scrim.container.opacity
+$container-opacity: 0.32;
+/// md.comp.scrim.container.color
+$container-color: md-sys-color.$scrim;

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

@@ -0,0 +1,102 @@
+//
+// 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.search-bar.avatar.size (Enabled / Avatar)
+$avatar-size: 30px;
+/// md.comp.search-bar.container.height (Enabled / Container)
+$container-height: 56px;
+/// md.comp.search-bar.avatar.shape (Enabled / Avatar)
+$avatar-shape: md-sys-shape.$corner-full;
+/// md.comp.search-bar.container.color (Enabled / Container)
+$container-color: md-sys-color.$surface-container-high;
+/// md.comp.search-bar.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level3;
+/// md.comp.search-bar.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-full;
+/// md.comp.search-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.search-bar.focus.indicator.color (Focused / Focus indicator)
+$focus-indicator-color: md-sys-color.$secondary;
+/// md.comp.search-bar.focus.indicator.outline.offset (Focused / Focus indicator)
+$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;
+/// md.comp.search-bar.focus.indicator.thickness (Focused / Focus indicator)
+$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;
+/// md.comp.search-bar.hover.state-layer.color (Hovered / State layer)
+$hover-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.search-bar.hover.state-layer.opacity (Hovered / State layer)
+$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.search-bar.hover.supporting-text.color (Hovered / Supporting text)
+$hover-supporting-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.search-bar.input-text.color (Enabled / Input text)
+$input-text-color: md-sys-color.$on-surface;
+/// md.comp.search-bar.input-text.font (Enabled / Input text)
+$input-text-font: md-sys-typescale.$body-large-font;
+/// md.comp.search-bar.input-text.line-height (Enabled / Input text)
+$input-text-line-height: md-sys-typescale.$body-large-line-height;
+/// md.comp.search-bar.input-text.size (Enabled / Input text)
+$input-text-size: md-sys-typescale.$body-large-size;
+/// md.comp.search-bar.input-text.tracking (Enabled / Input text)
+$input-text-tracking: md-sys-typescale.$body-large-tracking;
+/// md.comp.search-bar.input-text.weight (Enabled / Input text)
+$input-text-weight: md-sys-typescale.$body-large-weight;
+/// md.comp.search-bar.leading-icon.color (Enabled / Leading icon)
+$leading-icon-color: md-sys-color.$on-surface;
+/// md.comp.search-bar.pressed.state-layer.color (Pressed (ripple) / State layer)
+$pressed-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.search-bar.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.search-bar.pressed.supporting-text.color (Pressed (ripple) / Supporting text)
+$pressed-supporting-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.search-bar.supporting-text.color (Enabled / Supporting text)
+$supporting-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.search-bar.supporting-text.font (Enabled / Supporting text)
+$supporting-text-font: md-sys-typescale.$body-large-font;
+/// md.comp.search-bar.supporting-text.line-height (Enabled / Supporting text)
+$supporting-text-line-height: md-sys-typescale.$body-large-line-height;
+/// md.comp.search-bar.supporting-text.size (Enabled / Supporting text)
+$supporting-text-size: md-sys-typescale.$body-large-size;
+/// md.comp.search-bar.supporting-text.tracking (Enabled / Supporting text)
+$supporting-text-tracking: md-sys-typescale.$body-large-tracking;
+/// md.comp.search-bar.supporting-text.weight (Enabled / Supporting text)
+$supporting-text-weight: md-sys-typescale.$body-large-weight;
+/// md.comp.search-bar.trailing-icon.color (Enabled / Trailing icon)
+$trailing-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.search-bar.input-text.type (Enabled / Input text)
+@mixin input-text-type {
+  font-family: $input-text-font;
+  font-size: $input-text-size;
+  font-weight: $input-text-weight;
+  letter-spacing: $input-text-tracking;
+  line-height: $input-text-line-height;
+}
+/// md.comp.search-bar.supporting-text.type (Enabled / Supporting text)
+@mixin supporting-text-type {
+  font-family: $supporting-text-font;
+  font-size: $supporting-text-size;
+  font-weight: $supporting-text-weight;
+  letter-spacing: $supporting-text-tracking;
+  line-height: $supporting-text-line-height;
+}