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

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

@@ -0,0 +1,147 @@
+//
+// 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.banner.desktop.with-single-line.container.height (Enabled / Container)
+$desktop-with-single-line-container-height: 52px;
+/// md.comp.banner.desktop.with-three-lines.container.height (Enabled / Container)
+$desktop-with-three-lines-container-height: 90px;
+/// md.comp.banner.desktop.with-two-lines.with-image.container.height (Enabled / Container)
+$desktop-with-two-lines-with-image-container-height: 72px;
+/// md.comp.banner.divider.height (Enabled / Divider)
+///
+/// @deprecated Use standalone components tokens instead of embedded divider and button components.
+$divider-height: 1px;
+/// md.comp.banner.mobile.with-single-line.container.height (Enabled / Container)
+$mobile-with-single-line-container-height: 54px;
+/// md.comp.banner.mobile.with-two-lines.container.height (Enabled / Container)
+$mobile-with-two-lines-container-height: 112px;
+/// md.comp.banner.mobile.with-two-lines.with-image.container.height (Enabled / Container)
+$mobile-with-two-lines-with-image-container-height: 120px;
+/// md.comp.banner.with-image.image.size (Enabled / Supporting text)
+$with-image-image-size: 40px;
+/// md.comp.banner.action.focus.label-text.color (Focused / Label text)
+///
+/// @deprecated Use standalone components tokens instead of embedded divider and button components.
+$action-focus-label-text-color: md-sys-color.$primary;
+/// md.comp.banner.action.focus.state-layer.color (Focused / State layer)
+///
+/// @deprecated Use standalone components tokens instead of embedded divider and button components.
+$action-focus-state-layer-color: md-sys-color.$primary;
+/// md.comp.banner.action.focus.state-layer.opacity (Focused / State layer)
+///
+/// @deprecated Use standalone components tokens instead of embedded divider and button components.
+$action-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.banner.action.hover.label-text.color (Hovered / Label text)
+///
+/// @deprecated Use standalone components tokens instead of embedded divider and button components.
+$action-hover-label-text-color: md-sys-color.$primary;
+/// md.comp.banner.action.hover.state-layer.color (Hovered / State layer)
+///
+/// @deprecated Use standalone components tokens instead of embedded divider and button components.
+$action-hover-state-layer-color: md-sys-color.$primary;
+/// md.comp.banner.action.hover.state-layer.opacity (Hovered / State layer)
+///
+/// @deprecated Use standalone components tokens instead of embedded divider and button components.
+$action-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.banner.action.label-text.color (Enabled / Label text)
+///
+/// @deprecated Use standalone components tokens instead of embedded divider and button components.
+$action-label-text-color: md-sys-color.$primary;
+/// md.comp.banner.action.label-text.font (Enabled / Label text)
+///
+/// @deprecated Use standalone components tokens instead of embedded divider and button components.
+$action-label-text-font: md-sys-typescale.$label-large-font;
+/// md.comp.banner.action.label-text.line-height (Enabled / Label text)
+///
+/// @deprecated Use standalone components tokens instead of embedded divider and button components.
+$action-label-text-line-height: md-sys-typescale.$label-large-line-height;
+/// md.comp.banner.action.label-text.size (Enabled / Label text)
+///
+/// @deprecated Use standalone components tokens instead of embedded divider and button components.
+$action-label-text-size: md-sys-typescale.$label-large-size;
+/// md.comp.banner.action.label-text.tracking (Enabled / Label text)
+///
+/// @deprecated Use standalone components tokens instead of embedded divider and button components.
+$action-label-text-tracking: md-sys-typescale.$label-large-tracking;
+/// md.comp.banner.action.label-text.weight (Enabled / Label text)
+///
+/// @deprecated Use standalone components tokens instead of embedded divider and button components.
+$action-label-text-weight: md-sys-typescale.$label-large-weight;
+/// md.comp.banner.action.pressed.label-text.color (Pressed (ripple) / Label text)
+///
+/// @deprecated Use standalone components tokens instead of embedded divider and button components.
+$action-pressed-label-text-color: md-sys-color.$primary;
+/// md.comp.banner.action.pressed.state-layer.color (Pressed (ripple) / State layer)
+///
+/// @deprecated Use standalone components tokens instead of embedded divider and button components.
+$action-pressed-state-layer-color: md-sys-color.$primary;
+/// md.comp.banner.action.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+///
+/// @deprecated Use standalone components tokens instead of embedded divider and button components.
+$action-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.banner.container.color (Enabled / Container)
+$container-color: md-sys-color.$surface-container-low;
+/// md.comp.banner.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level1;
+/// md.comp.banner.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-none;
+/// md.comp.banner.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.banner.divider.color (Enabled / Divider)
+///
+/// @deprecated Use standalone components tokens instead of embedded divider and button components.
+$divider-color: md-sys-color.$surface-variant;
+/// md.comp.banner.supporting-text.color (Enabled / Supporting text)
+$supporting-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.banner.supporting-text.font (Enabled / Supporting text)
+$supporting-text-font: md-sys-typescale.$body-medium-font;
+/// md.comp.banner.supporting-text.line-height (Enabled / Supporting text)
+$supporting-text-line-height: md-sys-typescale.$body-medium-line-height;
+/// md.comp.banner.supporting-text.size (Enabled / Supporting text)
+$supporting-text-size: md-sys-typescale.$body-medium-size;
+/// md.comp.banner.supporting-text.tracking (Enabled / Supporting text)
+$supporting-text-tracking: md-sys-typescale.$body-medium-tracking;
+/// md.comp.banner.supporting-text.weight (Enabled / Supporting text)
+$supporting-text-weight: md-sys-typescale.$body-medium-weight;
+/// md.comp.banner.with-image.image.shape (Enabled / Supporting text)
+$with-image-image-shape: md-sys-shape.$corner-full;
+/// md.comp.banner.action.label-text.type (Enabled / Label text)
+///
+/// @deprecated Use standalone components tokens instead of embedded button components.
+@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.banner.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-banners-basic.scss

@@ -0,0 +1,86 @@
+//
+// 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-shape';
+@use 'md-sys-typescale';
+
+/// md.comp.banners.basic.actions-close-button-space (Body text)
+$actions-close-button-space: 8px;
+/// md.comp.banners.basic.actions.between-space (Button actions)
+$actions-between-space: 8px;
+/// md.comp.banners.basic.actions.bottom-space (Button actions)
+$actions-bottom-space: 0px;
+/// md.comp.banners.basic.actions.leading-space (Button actions)
+$actions-leading-space: 8px;
+/// md.comp.banners.basic.actions.top-space (Button actions)
+$actions-top-space: 0px;
+/// md.comp.banners.basic.actions.trailing-space (Button actions)
+$actions-trailing-space: 8px;
+/// md.comp.banners.basic.body-text.bottom-space (Body text)
+$body-text-bottom-space: 14px;
+/// md.comp.banners.basic.body-text.leading-space (Body text)
+$body-text-leading-space: 0px;
+/// md.comp.banners.basic.body-text.top-space (Body text)
+$body-text-top-space: 14px;
+/// md.comp.banners.basic.body-text.trailing-space (Body text)
+$body-text-trailing-space: 48px;
+/// md.comp.banners.basic.bottom-space (Container)
+$bottom-space: 4px;
+/// md.comp.banners.basic.centered.body-text.trailing-space (Body text)
+$centered-body-text-trailing-space: 0px;
+/// md.comp.banners.basic.height (Container)
+$height: 56px;
+/// md.comp.banners.basic.icon.container.size (Leading icon)
+$icon-container-size: 48px;
+/// md.comp.banners.basic.icon.size (Leading icon)
+$icon-size: 24px;
+/// md.comp.banners.basic.leading-space (Container)
+$leading-space: 4px;
+/// md.comp.banners.basic.mobile.actions-close-button-space (Body text)
+$mobile-actions-close-button-space: 4px;
+/// md.comp.banners.basic.mobile.actions.trailing-space (Button actions)
+$mobile-actions-trailing-space: 4px;
+/// md.comp.banners.basic.mobile.height (Container)
+$mobile-height: 112px;
+/// md.comp.banners.basic.mobile.top-space (Container)
+$mobile-top-space: 8px;
+/// md.comp.banners.basic.round.no-icon.body-text.leading-space (Body text)
+$round-no-icon-body-text-leading-space: 16px;
+/// md.comp.banners.basic.square.no-icon.body-text.leading-space (Body text)
+$square-no-icon-body-text-leading-space: 12px;
+/// md.comp.banners.basic.top-space (Container)
+$top-space: 4px;
+/// md.comp.banners.basic.trailing-space (Container)
+$trailing-space: 4px;
+/// md.comp.banners.basic.two-lines.body-text.bottom-space (Body text)
+$two-lines-body-text-bottom-space: 8px;
+/// md.comp.banners.basic.two-lines.body-text.top-space (Body text)
+$two-lines-body-text-top-space: 8px;
+/// md.comp.banners.basic.two-lines.container-buttons-bottom-space (Button actions)
+$two-lines-container-buttons-bottom-space: 4px;
+/// md.comp.banners.basic.two-lines.container-buttons-top-space (Button actions)
+$two-lines-container-buttons-top-space: 4px;
+/// md.comp.banners.basic.two-lines.height (Container)
+$two-lines-height: 64px;
+/// md.comp.banners.basic.shape.round (Container)
+$shape-round: md-sys-shape.$corner-extra-large;
+/// md.comp.banners.basic.shape.square (Container)
+$shape-square: md-sys-shape.$corner-none;
+/// md.comp.banners.basic.body-text.type (Body text)
+@mixin body-text-type {
+  @include md-sys-typescale.body-medium;
+}

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

@@ -0,0 +1,89 @@
+//
+// 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-shape';
+@use 'md-sys-typescale';
+@use 'md-sys-typescale-emphasized';
+
+/// md.comp.banners.rich.actions.between-space (Button action)
+$actions-between-space: 8px;
+/// md.comp.banners.rich.actions.bottom-space (Button action)
+$actions-bottom-space: 12px;
+/// md.comp.banners.rich.actions.leading-space (Button action)
+$actions-leading-space: 12px;
+/// md.comp.banners.rich.actions.top-space (Button action)
+$actions-top-space: 12px;
+/// md.comp.banners.rich.actions.trailing-space (Button action)
+$actions-trailing-space: 12px;
+/// md.comp.banners.rich.body-text.bottom-space (Body text)
+$body-text-bottom-space: 0px;
+/// md.comp.banners.rich.body-text.leading-space (Body text)
+$body-text-leading-space: 0px;
+/// md.comp.banners.rich.body-text.text-actions-space (Body text)
+$body-text-text-actions-space: 8px;
+/// md.comp.banners.rich.body-text.top-space (Body text)
+$body-text-top-space: 0px;
+/// md.comp.banners.rich.body-text.trailing-space (Body text)
+$body-text-trailing-space: 48px;
+/// md.comp.banners.rich.bottom-space (Container)
+$bottom-space: 12px;
+/// md.comp.banners.rich.icon-text-space (Leading element)
+$icon-text-space: 4px;
+/// md.comp.banners.rich.icon.size (Leading element)
+$icon-size: 24px;
+/// md.comp.banners.rich.image-text-space (Leading element)
+$image-text-space: 8px;
+/// md.comp.banners.rich.image.size (Leading element)
+$image-size: 80px;
+/// md.comp.banners.rich.leading-element.bottom-space (Leading element)
+$leading-element-bottom-space: 12px;
+/// md.comp.banners.rich.leading-element.leading-space (Leading element)
+$leading-element-leading-space: 4px;
+/// md.comp.banners.rich.leading-element.top-space (Leading element)
+$leading-element-top-space: 12px;
+/// md.comp.banners.rich.leading-element.trailing-space (Leading element)
+$leading-element-trailing-space: 4px;
+/// md.comp.banners.rich.leading-space (Container)
+$leading-space: 12px;
+/// md.comp.banners.rich.title-text.bottom-space (Title text)
+$title-text-bottom-space: 14px;
+/// md.comp.banners.rich.title-text.height (Title text)
+$title-text-height: 48px;
+/// md.comp.banners.rich.title-text.leading-space (Title text)
+$title-text-leading-space: 0px;
+/// md.comp.banners.rich.title-text.top-space (Title text)
+$title-text-top-space: 14px;
+/// md.comp.banners.rich.title-text.trailing-space (Title text)
+$title-text-trailing-space: 0px;
+/// md.comp.banners.rich.top-space (Container)
+$top-space: 12px;
+/// md.comp.banners.rich.trailing-space (Container)
+$trailing-space: 12px;
+/// md.comp.banners.rich.with-image-leading-space (Container)
+$with-image-leading-space: 20px;
+/// md.comp.banners.rich.image.shape (Leading element)
+$image-shape: md-sys-shape.$corner-none;
+/// md.comp.banners.rich.shape (Container)
+$shape: md-sys-shape.$corner-extra-large;
+/// md.comp.banners.rich.body-text.type (Body text)
+@mixin body-text-type {
+  @include md-sys-typescale.body-medium;
+}
+/// md.comp.banners.rich.title-text.type (Title text)
+@mixin title-text-type {
+  @include md-sys-typescale-emphasized.body-medium;
+}

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

@@ -0,0 +1,43 @@
+//
+// 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.banners.banners.close-button.pressed.state-layer.color (Close button color)
+$banners-close-button-pressed-state-layer-color: md-sys-color.$primary;
+/// md.comp.banners.close-button.color (Close button color)
+$close-button-color: md-sys-color.$primary;
+/// md.comp.banners.close-button.focused.state-layer.color (Close button color)
+$close-button-focused-state-layer-color: md-sys-color.$primary;
+/// md.comp.banners.close-button.hovered.state-layer.color (Close button color)
+$close-button-hovered-state-layer-color: md-sys-color.$primary;
+/// md.comp.banners.standard.body-text.color (Color - Standard)
+$standard-body-text-color: md-sys-color.$on-surface;
+/// md.comp.banners.standard.color (Color - Standard)
+$standard-color: md-sys-color.$surface-container;
+/// md.comp.banners.standard.icon.color (Color - Standard)
+$standard-icon-color: md-sys-color.$on-surface;
+/// md.comp.banners.standard.title-text.color (Color - Standard)
+$standard-title-text-color: md-sys-color.$on-surface;
+/// md.comp.banners.vibrant.body-text.color (Color -Vibrant)
+$vibrant-body-text-color: md-sys-color.$on-primary-container;
+/// md.comp.banners.vibrant.color (Color -Vibrant)
+$vibrant-color: md-sys-color.$primary-container;
+/// md.comp.banners.vibrant.icon.color (Color -Vibrant)
+$vibrant-icon-color: md-sys-color.$on-primary-container;
+/// md.comp.banners.vibrant.title-text.color (Color -Vibrant)
+$vibrant-title-text-color: md-sys-color.$on-primary-container;

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

@@ -0,0 +1,37 @@
+//
+// 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';
+
+/// md.comp.bottom-app-bar.container.height (Enabled / Container)
+$container-height: 80px;
+/// md.comp.bottom-app-bar.with-fab.container.height (Enabled / Container)
+///
+/// @deprecated Bottom app bar design updated to use a single height for all configurations, with vertically centered content. Please use md.comp.bottom-app-bar.container.height instead
+$with-fab-container-height: 72px;
+/// md.comp.bottom-app-bar.container.color (Enabled / Container)
+$container-color: md-sys-color.$surface-container;
+/// md.comp.bottom-app-bar.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level2;
+/// md.comp.bottom-app-bar.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-none;
+/// md.comp.bottom-app-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;

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

@@ -0,0 +1,125 @@
+//
+// 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-state';
+
+/// md.comp.button.elevated.disabled.container.opacity (Disabled)
+$disabled-container-opacity: 0.1;
+/// md.comp.button.elevated.disabled.icon.opacity (Disabled)
+$disabled-icon-opacity: 0.38;
+/// md.comp.button.elevated.disabled.label-text.opacity (Disabled)
+$disabled-label-text-opacity: 0.38;
+/// md.comp.button.elevated.container.color (Enabled)
+$container-color: md-sys-color.$surface-container-low;
+/// md.comp.button.elevated.container.elevation (Enabled)
+$container-elevation: md-sys-elevation.$level1;
+/// md.comp.button.elevated.container.shadow-color (Enabled)
+$container-shadow-color: md-sys-color.$shadow;
+/// md.comp.button.elevated.disabled.container.color (Disabled)
+$disabled-container-color: md-sys-color.$on-surface;
+/// md.comp.button.elevated.disabled.container.elevation (Disabled)
+$disabled-container-elevation: md-sys-elevation.$level0;
+/// md.comp.button.elevated.disabled.icon.color (Disabled)
+$disabled-icon-color: md-sys-color.$on-surface;
+/// md.comp.button.elevated.disabled.label-text.color (Disabled)
+$disabled-label-text-color: md-sys-color.$on-surface;
+/// md.comp.button.elevated.focused.container.elevation (Focused)
+$focused-container-elevation: md-sys-elevation.$level1;
+/// md.comp.button.elevated.focused.icon.color (Focused)
+$focused-icon-color: md-sys-color.$primary;
+/// md.comp.button.elevated.focused.label-text.color (Focused)
+$focused-label-text-color: md-sys-color.$primary;
+/// md.comp.button.elevated.focused.state-layer.color (Focused)
+$focused-state-layer-color: md-sys-color.$primary;
+/// md.comp.button.elevated.focused.state-layer.opacity (Focused)
+$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.button.elevated.hovered.container.elevation (Hovered)
+///
+/// @deprecated No longer part of the design spec
+$hovered-container-elevation: md-sys-elevation.$level2;
+/// md.comp.button.elevated.hovered.icon.color (Hovered)
+$hovered-icon-color: md-sys-color.$primary;
+/// md.comp.button.elevated.hovered.label-text.color (Hovered)
+$hovered-label-text-color: md-sys-color.$primary;
+/// md.comp.button.elevated.hovered.state-layer.color (Hovered)
+$hovered-state-layer-color: md-sys-color.$primary;
+/// md.comp.button.elevated.hovered.state-layer.opacity (Hovered)
+$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.button.elevated.icon.color (Enabled)
+$icon-color: md-sys-color.$primary;
+/// md.comp.button.elevated.label-text.color (Enabled)
+$label-text-color: md-sys-color.$primary;
+/// md.comp.button.elevated.pressed.container.elevation (Pressed)
+$pressed-container-elevation: md-sys-elevation.$level1;
+/// md.comp.button.elevated.pressed.icon.color (Pressed)
+$pressed-icon-color: md-sys-color.$primary;
+/// md.comp.button.elevated.pressed.label-text.color (Pressed)
+$pressed-label-text-color: md-sys-color.$primary;
+/// md.comp.button.elevated.pressed.state-layer.color (Pressed)
+$pressed-state-layer-color: md-sys-color.$primary;
+/// md.comp.button.elevated.pressed.state-layer.opacity (Pressed)
+$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.button.elevated.selected.container.color (Enabled)
+$selected-container-color: md-sys-color.$primary;
+/// md.comp.button.elevated.selected.focused.icon.color (Focused)
+$selected-focused-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.focused.label-text.color (Focused)
+$selected-focused-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.focused.state-layer.color (Focused)
+$selected-focused-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.hovered.icon.color (Hovered)
+$selected-hovered-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.hovered.label-text.color (Hovered)
+$selected-hovered-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.hovered.state-layer.color (Hovered)
+$selected-hovered-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.icon.color (Enabled)
+$selected-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.label-text.color (Enabled)
+$selected-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.pressed.icon.color (Pressed)
+$selected-pressed-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.pressed.label-text.color (Pressed)
+$selected-pressed-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.selected.pressed.state-layer.color (Pressed)
+$selected-pressed-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.button.elevated.unselected.container.color (Enabled)
+$unselected-container-color: md-sys-color.$surface-container-low;
+/// md.comp.button.elevated.unselected.focused.icon.color (Focused)
+$unselected-focused-icon-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.focused.label-text.color (Focused)
+$unselected-focused-label-text-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.focused.state-layer.color (Focused)
+$unselected-focused-state-layer-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.hovered.icon.color (Hovered)
+$unselected-hovered-icon-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.hovered.label-text.color (Hovered)
+$unselected-hovered-label-text-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.hovered.state-layer.color (Hovered)
+$unselected-hovered-state-layer-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.icon.color (Enabled)
+$unselected-icon-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.label-text.color (Enabled)
+$unselected-label-text-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.pressed.icon.color (Pressed)
+$unselected-pressed-icon-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.pressed.label-text.color (Pressed)
+$unselected-pressed-label-text-color: md-sys-color.$primary;
+/// md.comp.button.elevated.unselected.pressed.state-layer.color (Pressed)
+$unselected-pressed-state-layer-color: md-sys-color.$primary;

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

@@ -0,0 +1,125 @@
+//
+// 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-state';
+
+/// md.comp.button.filled.disabled.container.opacity (Disabled)
+$disabled-container-opacity: 0.1;
+/// md.comp.button.filled.disabled.icon.opacity (Disabled)
+$disabled-icon-opacity: 0.38;
+/// md.comp.button.filled.disabled.label-text.opacity (Disabled)
+$disabled-label-text-opacity: 0.38;
+/// md.comp.button.filled.container.color (Enabled)
+$container-color: md-sys-color.$primary;
+/// md.comp.button.filled.container.elevation (Enabled)
+$container-elevation: md-sys-elevation.$level0;
+/// md.comp.button.filled.container.shadow-color (Enabled)
+$container-shadow-color: md-sys-color.$shadow;
+/// md.comp.button.filled.disabled.container.color (Disabled)
+$disabled-container-color: md-sys-color.$on-surface;
+/// md.comp.button.filled.disabled.container.elevation (Disabled)
+$disabled-container-elevation: md-sys-elevation.$level0;
+/// md.comp.button.filled.disabled.icon.color (Disabled)
+$disabled-icon-color: md-sys-color.$on-surface;
+/// md.comp.button.filled.disabled.label-text.color (Disabled)
+$disabled-label-text-color: md-sys-color.$on-surface;
+/// md.comp.button.filled.focused.container.elevation (Focused)
+$focused-container-elevation: md-sys-elevation.$level0;
+/// md.comp.button.filled.focused.icon.color (Focused)
+$focused-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.focused.label-text.color (Focused)
+$focused-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.focused.state-layer.color (Focused)
+$focused-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.focused.state-layer.opacity (Focused)
+$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.button.filled.hovered.container.elevation (Hovered)
+///
+/// @deprecated No longer part of the design spec
+$hovered-container-elevation: md-sys-elevation.$level1;
+/// md.comp.button.filled.hovered.icon.color (Hovered)
+$hovered-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.hovered.label-text.color (Hovered)
+$hovered-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.hovered.state-layer.color (Hovered)
+$hovered-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.hovered.state-layer.opacity (Hovered)
+$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.button.filled.icon.color (Enabled)
+$icon-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.label-text.color (Enabled)
+$label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.pressed.container.elevation (Pressed)
+$pressed-container-elevation: md-sys-elevation.$level0;
+/// md.comp.button.filled.pressed.icon.color (Pressed)
+$pressed-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.pressed.label-text.color (Pressed)
+$pressed-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.pressed.state-layer.color (Pressed)
+$pressed-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.pressed.state-layer.opacity (Pressed)
+$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.button.filled.selected.container.color (Enabled)
+$selected-container-color: md-sys-color.$primary;
+/// md.comp.button.filled.selected.focused.icon.color (Focused)
+$selected-focused-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.focused.label-text.color (Focused)
+$selected-focused-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.focused.state-layer.color (Focused)
+$selected-focused-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.hovered.icon.color (Hovered)
+$selected-hovered-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.hovered.label-text.color (Hovered)
+$selected-hovered-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.hovered.state-layer.color (Hovered)
+$selected-hovered-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.icon.color (Enabled)
+$selected-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.label-text.color (Enabled)
+$selected-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.pressed.icon.color (Pressed)
+$selected-pressed-icon-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.pressed.label-text.color (Pressed)
+$selected-pressed-label-text-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.selected.pressed.state-layer.color (Pressed)
+$selected-pressed-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.button.filled.unselected.container.color (Enabled)
+$unselected-container-color: md-sys-color.$surface-container;
+/// md.comp.button.filled.unselected.focused.icon.color (Focused)
+$unselected-focused-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.focused.label-text.color (Focused)
+$unselected-focused-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.focused.state-layer.color (Focused)
+$unselected-focused-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.hovered.icon.color (Hovered)
+$unselected-hovered-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.hovered.label-text.color (Hovered)
+$unselected-hovered-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.hovered.state-layer.color (Hovered)
+$unselected-hovered-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.icon.color (Enabled)
+$unselected-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.label-text.color (Enabled)
+$unselected-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.pressed.icon.color (Pressed)
+$unselected-pressed-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.pressed.label-text.color (Pressed)
+$unselected-pressed-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.button.filled.unselected.pressed.state-layer.color (Pressed)
+$unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;