@material/web 2.4.2-nightly.c72e5fe.0 → 2.4.2-nightly.e16e2f6.0

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

@@ -0,0 +1,35 @@
+//
+// 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-typescale';
+
+/// md.comp.app-bar.large.container.height
+$container-height: 152px;
+/// md.comp.app-bar.large.icon.size
+///
+/// @deprecated Please use icon size token in the common app bar set
+$icon-size: 24px;
+/// md.comp.app-bar.large.subtitle.font
+///
+/// @deprecated No subtitle support on the legacy app bar. Please use the new, flexible variant instead.
+@mixin subtitle-font {
+  @include md-sys-typescale.title-medium;
+}
+/// md.comp.app-bar.large.title.font
+@mixin title-font {
+  @include md-sys-typescale.headline-medium;
+}

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

@@ -0,0 +1,31 @@
+//
+// 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-typescale';
+
+/// md.comp.app-bar.medium-flexible.container.height
+$container-height: 112px;
+/// md.comp.app-bar.medium-flexible.with-subtitle.container.height
+$with-subtitle-container-height: 136px;
+/// md.comp.app-bar.medium-flexible.subtitle.font
+@mixin subtitle-font {
+  @include md-sys-typescale.label-large;
+}
+/// md.comp.app-bar.medium-flexible.title.font
+@mixin title-font {
+  @include md-sys-typescale.headline-medium;
+}

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

@@ -0,0 +1,35 @@
+//
+// 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-typescale';
+
+/// md.comp.app-bar.medium.container.height
+$container-height: 112px;
+/// md.comp.app-bar.medium.icon.size
+///
+/// @deprecated Please use icon size token in the common app bar set
+$icon-size: 24px;
+/// md.comp.app-bar.medium.subtitle.font
+///
+/// @deprecated No subtitle support on the legacy app bar. Please use the new, flexible variant instead.
+@mixin subtitle-font {
+  @include md-sys-typescale.label-large;
+}
+/// md.comp.app-bar.medium.title.font
+@mixin title-font {
+  @include md-sys-typescale.headline-small;
+}

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

@@ -0,0 +1,42 @@
+//
+// 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.app-bar.small.container.height
+$container-height: 64px;
+/// md.comp.app-bar.small.icon.size
+///
+/// @deprecated Please use icon size token in the common app bar set
+$icon-size: 24px;
+/// md.comp.app-bar.small.search.container.height
+$search-container-height: 56px;
+/// md.comp.app-bar.small.search.container.shape
+$search-container-shape: md-sys-shape.$corner-full;
+/// md.comp.app-bar.small.search.label-text.font
+@mixin search-label-text-font {
+  @include md-sys-typescale.body-large;
+}
+/// md.comp.app-bar.small.subtitle.font
+@mixin subtitle-font {
+  @include md-sys-typescale.label-medium;
+}
+/// md.comp.app-bar.small.title.font
+@mixin title-font {
+  @include md-sys-typescale.title-large;
+}

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

@@ -0,0 +1,59 @@
+//
+// 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.app-bar.avatar.size (Size)
+$avatar-size: 32px;
+/// md.comp.app-bar.icon-button-space (Spacing)
+$icon-button-space: 0px;
+/// md.comp.app-bar.icon.size (Size)
+$icon-size: 24px;
+/// md.comp.app-bar.leading-space (Spacing)
+$leading-space: 4px;
+/// md.comp.app-bar.search.leading-space (Spacing)
+$search-leading-space: 8px;
+/// md.comp.app-bar.search.trailing-space (Spacing)
+$search-trailing-space: 8px;
+/// md.comp.app-bar.trailing-space (Spacing)
+$trailing-space: 4px;
+/// md.comp.app-bar.container.color (Color)
+$container-color: md-sys-color.$surface;
+/// md.comp.app-bar.container.elevation (Color)
+$container-elevation: md-sys-elevation.$level0;
+/// md.comp.app-bar.container.shape (Shape)
+$container-shape: md-sys-shape.$corner-none;
+/// md.comp.app-bar.leading-icon.color (Color)
+$leading-icon-color: md-sys-color.$on-surface;
+/// md.comp.app-bar.on-scroll.container.color (Color)
+$on-scroll-container-color: md-sys-color.$surface-container;
+/// md.comp.app-bar.on-scroll.container.elevation (Color)
+$on-scroll-container-elevation: md-sys-elevation.$level2;
+/// md.comp.app-bar.search.container.color (Color)
+$search-container-color: md-sys-color.$surface-container;
+/// md.comp.app-bar.search.label.color (Color)
+$search-label-color: md-sys-color.$on-surface-variant;
+/// md.comp.app-bar.search.on-scroll.container.color (Color)
+$search-on-scroll-container-color: md-sys-color.$surface-container-highest;
+/// md.comp.app-bar.subtitle.color (Color)
+$subtitle-color: md-sys-color.$on-surface-variant;
+/// md.comp.app-bar.title.color (Color)
+$title-color: md-sys-color.$on-surface;
+/// md.comp.app-bar.trailing-icon.color (Color)
+$trailing-icon-color: md-sys-color.$on-surface-variant;

package/tokens/versions/v30_0/sass/_md-comp-assist-chip.scss

@@ -0,0 +1,134 @@
+//
+// 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.assist-chip.container.height (Enabled / Container)
+$container-height: 32px;
+/// md.comp.assist-chip.disabled.label-text.opacity (Disabled / Label text)
+$disabled-label-text-opacity: 0.38;
+/// md.comp.assist-chip.elevated.disabled.container.opacity (Disabled / Container)
+$elevated-disabled-container-opacity: 0.12;
+/// md.comp.assist-chip.flat.disabled.outline.opacity (Disabled / Container)
+$flat-disabled-outline-opacity: 0.12;
+/// md.comp.assist-chip.flat.outline.width (Enabled / Container)
+$flat-outline-width: 1px;
+/// md.comp.assist-chip.with-icon.disabled.icon.opacity (Disabled / Icon)
+$with-icon-disabled-icon-opacity: 0.38;
+/// md.comp.assist-chip.with-icon.icon.size (Enabled / Icon)
+$with-icon-icon-size: 18px;
+/// md.comp.assist-chip.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-small;
+/// md.comp.assist-chip.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.assist-chip.disabled.label-text.color (Disabled / Label text)
+$disabled-label-text-color: md-sys-color.$on-surface;
+/// md.comp.assist-chip.dragged.container.elevation (Dragged / Container)
+$dragged-container-elevation: md-sys-elevation.$level4;
+/// md.comp.assist-chip.dragged.label-text.color (Dragged / Label text)
+$dragged-label-text-color: md-sys-color.$on-surface;
+/// md.comp.assist-chip.dragged.state-layer.color (Dragged / State layer)
+$dragged-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.assist-chip.dragged.state-layer.opacity (Dragged / State layer)
+$dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;
+/// md.comp.assist-chip.elevated.container.color (Enabled / Container)
+$elevated-container-color: md-sys-color.$surface-container-low;
+/// md.comp.assist-chip.elevated.container.elevation (Enabled / Container)
+$elevated-container-elevation: md-sys-elevation.$level1;
+/// md.comp.assist-chip.elevated.container.shadow-color (Enabled / Container)
+$elevated-container-shadow-color: md-sys-color.$shadow;
+/// md.comp.assist-chip.elevated.disabled.container.color (Disabled / Container)
+$elevated-disabled-container-color: md-sys-color.$on-surface;
+/// md.comp.assist-chip.elevated.disabled.container.elevation (Disabled / Container)
+$elevated-disabled-container-elevation: md-sys-elevation.$level0;
+/// md.comp.assist-chip.elevated.focus.container.elevation (Focused / Container)
+$elevated-focus-container-elevation: md-sys-elevation.$level1;
+/// md.comp.assist-chip.elevated.hover.container.elevation (Hovered / Container)
+$elevated-hover-container-elevation: md-sys-elevation.$level2;
+/// md.comp.assist-chip.elevated.pressed.container.elevation (Pressed (ripple) / Container)
+$elevated-pressed-container-elevation: md-sys-elevation.$level1;
+/// md.comp.assist-chip.flat.container.elevation (Enabled / Container)
+$flat-container-elevation: md-sys-elevation.$level0;
+/// md.comp.assist-chip.flat.disabled.outline.color (Disabled / Container)
+$flat-disabled-outline-color: md-sys-color.$on-surface;
+/// md.comp.assist-chip.flat.focus.outline.color (Focused / Container)
+$flat-focus-outline-color: md-sys-color.$on-surface;
+/// md.comp.assist-chip.flat.outline.color (Enabled / Container)
+$flat-outline-color: md-sys-color.$outline-variant;
+/// md.comp.assist-chip.focus.indicator.color (Focused / Focus indicator)
+$focus-indicator-color: md-sys-color.$secondary;
+/// md.comp.assist-chip.focus.indicator.outline.offset (Focused / Focus indicator)
+$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;
+/// md.comp.assist-chip.focus.indicator.thickness (Focused / Focus indicator)
+$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;
+/// md.comp.assist-chip.focus.label-text.color (Focused / Label text)
+$focus-label-text-color: md-sys-color.$on-surface;
+/// md.comp.assist-chip.focus.state-layer.color (Focused / State layer)
+$focus-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.assist-chip.focus.state-layer.opacity (Focused / State layer)
+$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.assist-chip.hover.label-text.color (Hovered / Label text)
+$hover-label-text-color: md-sys-color.$on-surface;
+/// md.comp.assist-chip.hover.state-layer.color (Hovered / State layer)
+$hover-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.assist-chip.hover.state-layer.opacity (Hovered / State layer)
+$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.assist-chip.label-text.color (Enabled / Label text)
+$label-text-color: md-sys-color.$on-surface;
+/// md.comp.assist-chip.label-text.font (Enabled / Label text)
+$label-text-font: md-sys-typescale.$label-large-font;
+/// md.comp.assist-chip.label-text.line-height (Enabled / Label text)
+$label-text-line-height: md-sys-typescale.$label-large-line-height;
+/// md.comp.assist-chip.label-text.size (Enabled / Label text)
+$label-text-size: md-sys-typescale.$label-large-size;
+/// md.comp.assist-chip.label-text.tracking (Enabled / Label text)
+$label-text-tracking: md-sys-typescale.$label-large-tracking;
+/// md.comp.assist-chip.label-text.weight (Enabled / Label text)
+$label-text-weight: md-sys-typescale.$label-large-weight;
+/// md.comp.assist-chip.pressed.label-text.color (Pressed (ripple) / Label text)
+$pressed-label-text-color: md-sys-color.$on-surface;
+/// md.comp.assist-chip.pressed.state-layer.color (Pressed (ripple) / State layer)
+$pressed-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.assist-chip.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.assist-chip.with-icon.disabled.icon.color (Disabled / Icon)
+$with-icon-disabled-icon-color: md-sys-color.$on-surface;
+/// md.comp.assist-chip.with-icon.dragged.icon.color (Dragged / Icon)
+$with-icon-dragged-icon-color: md-sys-color.$primary;
+/// md.comp.assist-chip.with-icon.focus.icon.color (Focused / Icon)
+$with-icon-focus-icon-color: md-sys-color.$primary;
+/// md.comp.assist-chip.with-icon.hover.icon.color (Hovered / Icon)
+$with-icon-hover-icon-color: md-sys-color.$primary;
+/// md.comp.assist-chip.with-icon.icon.color (Enabled / Icon)
+$with-icon-icon-color: md-sys-color.$primary;
+/// md.comp.assist-chip.with-icon.pressed.icon.color (Pressed (ripple) / Icon)
+$with-icon-pressed-icon-color: md-sys-color.$primary;
+/// md.comp.assist-chip.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-badge.scss

@@ -0,0 +1,53 @@
+//
+// 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';
+@use 'md-sys-typescale';
+
+/// md.comp.badge.large.size (Enabled / Container)
+$large-size: 16px;
+/// md.comp.badge.size (Enabled / Container)
+$size: 6px;
+/// md.comp.badge.color (Enabled / Container)
+$color: md-sys-color.$error;
+/// md.comp.badge.large.color (Enabled / Container)
+$large-color: md-sys-color.$error;
+/// md.comp.badge.large.label-text.color (Enabled / Label text)
+$large-label-text-color: md-sys-color.$on-error;
+/// md.comp.badge.large.label-text.font (Enabled / Label text)
+$large-label-text-font: md-sys-typescale.$label-small-font;
+/// md.comp.badge.large.label-text.line-height (Enabled / Label text)
+$large-label-text-line-height: md-sys-typescale.$label-small-line-height;
+/// md.comp.badge.large.label-text.size (Enabled / Label text)
+$large-label-text-size: md-sys-typescale.$label-small-size;
+/// md.comp.badge.large.label-text.tracking (Enabled / Label text)
+$large-label-text-tracking: md-sys-typescale.$label-small-tracking;
+/// md.comp.badge.large.label-text.weight (Enabled / Label text)
+$large-label-text-weight: md-sys-typescale.$label-small-weight;
+/// md.comp.badge.large.shape (Enabled / Container)
+$large-shape: md-sys-shape.$corner-full;
+/// md.comp.badge.shape (Enabled / Container)
+$shape: md-sys-shape.$corner-full;
+/// md.comp.badge.large.label-text.type (Enabled / Label text)
+@mixin large-label-text-type {
+  font-family: $large-label-text-font;
+  font-size: $large-label-text-size;
+  font-weight: $large-label-text-weight;
+  letter-spacing: $large-label-text-tracking;
+  line-height: $large-label-text-line-height;
+}

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;
+}