@material/web 2.4.2-nightly.7619df0.0 → 2.4.2-nightly.a44effd.0

package/tokens/versions/latest/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: formats/sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 34.0.21
+// 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/latest/sass/_md-comp-app-bar-meta.scss

@@ -0,0 +1,24 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// Auto-generated token metadata.
+$avatar-size--resolved: 32px;
+$icon-button-space--resolved: 0px;
+$icon-size--resolved: 24px;
+$leading-space--resolved: 4px;
+$search-leading-space--resolved: 8px;
+$search-trailing-space--resolved: 8px;
+$trailing-space--resolved: 4px;
+$container-color--resolved: var(--md-sys-color-surface);
+$container-elevation--resolved: var(--md-sys-elevation-level0);
+$container-shape--resolved: var(--md-sys-shape-corner-none);
+$leading-icon-color--resolved: var(--md-sys-color-on-surface);
+$on-scroll-container-color--resolved: var(--md-sys-color-surface-container);
+$on-scroll-container-elevation--resolved: var(--md-sys-elevation-level2);
+$search-container-color--resolved: var(--md-sys-color-surface-container);
+$search-label-color--resolved: var(--md-sys-color-on-surface-variant);
+$search-on-scroll-container-color--resolved: var(--md-sys-color-surface-container-highest);
+$subtitle-color--resolved: var(--md-sys-color-on-surface-variant);
+$title-color--resolved: var(--md-sys-color-on-surface);
+$trailing-icon-color--resolved: var(--md-sys-color-on-surface-variant);

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

@@ -0,0 +1,9 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// Auto-generated token metadata.
+$container-height--resolved: 64px;
+$icon-size--resolved: 24px;
+$search-container-height--resolved: 56px;
+$search-container-shape--resolved: var(--md-sys-shape-corner-full);

package/tokens/versions/latest/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: formats/sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 34.0.21
+// 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/latest/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: formats/sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 34.0.21
+// 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/latest/sass/_md-comp-assist-chip-meta.scss

@@ -0,0 +1,55 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// Auto-generated token metadata.
+$container-height--resolved: 32px;
+$disabled-label-text-opacity--resolved: 0.38;
+$elevated-disabled-container-opacity--resolved: 0.12;
+$flat-disabled-outline-opacity--resolved: 0.12;
+$flat-outline-width--resolved: 1px;
+$with-icon-disabled-icon-opacity--resolved: 0.38;
+$with-icon-icon-size--resolved: 18px;
+$container-shape--resolved: var(--md-sys-shape-corner-small);
+$container-surface-tint-layer-color--resolved: var(--md-sys-color-surface-tint);
+$disabled-label-text-color--resolved: var(--md-sys-color-on-surface);
+$dragged-container-elevation--resolved: var(--md-sys-elevation-level4);
+$dragged-label-text-color--resolved: var(--md-sys-color-on-surface);
+$dragged-state-layer-color--resolved: var(--md-sys-color-on-surface);
+$dragged-state-layer-opacity--resolved: var(--md-sys-state-dragged-state-layer-opacity);
+$elevated-container-color--resolved: var(--md-sys-color-surface-container-low);
+$elevated-container-elevation--resolved: var(--md-sys-elevation-level1);
+$elevated-container-shadow-color--resolved: var(--md-sys-color-shadow);
+$elevated-disabled-container-color--resolved: var(--md-sys-color-on-surface);
+$elevated-disabled-container-elevation--resolved: var(--md-sys-elevation-level0);
+$elevated-focus-container-elevation--resolved: var(--md-sys-elevation-level1);
+$elevated-hover-container-elevation--resolved: var(--md-sys-elevation-level2);
+$elevated-pressed-container-elevation--resolved: var(--md-sys-elevation-level1);
+$flat-container-elevation--resolved: var(--md-sys-elevation-level0);
+$flat-disabled-outline-color--resolved: var(--md-sys-color-on-surface);
+$flat-focus-outline-color--resolved: var(--md-sys-color-on-surface);
+$flat-outline-color--resolved: var(--md-sys-color-outline-variant);
+$focus-indicator-color--resolved: var(--md-sys-color-secondary);
+$focus-indicator-outline-offset--resolved: var(--md-sys-state-focus-indicator-outer-offset);
+$focus-indicator-thickness--resolved: var(--md-sys-state-focus-indicator-thickness);
+$focus-label-text-color--resolved: var(--md-sys-color-on-surface);
+$focus-state-layer-color--resolved: var(--md-sys-color-on-surface);
+$focus-state-layer-opacity--resolved: var(--md-sys-state-focus-state-layer-opacity);
+$hover-label-text-color--resolved: var(--md-sys-color-on-surface);
+$hover-state-layer-color--resolved: var(--md-sys-color-on-surface);
+$hover-state-layer-opacity--resolved: var(--md-sys-state-hover-state-layer-opacity);
+$label-text-color--resolved: var(--md-sys-color-on-surface);
+$label-text-font--resolved: var(--md-sys-typescale-label-large-font);
+$label-text-line-height--resolved: var(--md-sys-typescale-label-large-line-height);
+$label-text-size--resolved: var(--md-sys-typescale-label-large-size);
+$label-text-tracking--resolved: var(--md-sys-typescale-label-large-tracking);
+$label-text-weight--resolved: var(--md-sys-typescale-label-large-weight);
+$pressed-label-text-color--resolved: var(--md-sys-color-on-surface);
+$pressed-state-layer-color--resolved: var(--md-sys-color-on-surface);
+$pressed-state-layer-opacity--resolved: var(--md-sys-state-pressed-state-layer-opacity);
+$with-icon-disabled-icon-color--resolved: var(--md-sys-color-on-surface);
+$with-icon-dragged-icon-color--resolved: var(--md-sys-color-primary);
+$with-icon-focus-icon-color--resolved: var(--md-sys-color-primary);
+$with-icon-hover-icon-color--resolved: var(--md-sys-color-primary);
+$with-icon-icon-color--resolved: var(--md-sys-color-primary);
+$with-icon-pressed-icon-color--resolved: var(--md-sys-color-primary);

package/tokens/versions/latest/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: formats/sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 34.0.21
+// 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/latest/sass/_md-comp-badge-meta.scss

@@ -0,0 +1,17 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// Auto-generated token metadata.
+$large-size--resolved: 16px;
+$size--resolved: 6px;
+$color--resolved: var(--md-sys-color-error);
+$large-color--resolved: var(--md-sys-color-error);
+$large-label-text-color--resolved: var(--md-sys-color-on-error);
+$large-label-text-font--resolved: var(--md-sys-typescale-label-small-font);
+$large-label-text-line-height--resolved: var(--md-sys-typescale-label-small-line-height);
+$large-label-text-size--resolved: var(--md-sys-typescale-label-small-size);
+$large-label-text-tracking--resolved: var(--md-sys-typescale-label-small-tracking);
+$large-label-text-weight--resolved: var(--md-sys-typescale-label-small-weight);
+$large-shape--resolved: var(--md-sys-shape-corner-full);
+$shape--resolved: var(--md-sys-shape-corner-full);

package/tokens/versions/latest/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: formats/sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 34.0.21
+// 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/latest/sass/_md-comp-banner-meta.scss

@@ -0,0 +1,40 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// Auto-generated token metadata.
+$desktop-with-single-line-container-height--resolved: 52px;
+$desktop-with-three-lines-container-height--resolved: 90px;
+$desktop-with-two-lines-with-image-container-height--resolved: 72px;
+$divider-height--resolved: 1px;
+$mobile-with-single-line-container-height--resolved: 54px;
+$mobile-with-two-lines-container-height--resolved: 112px;
+$mobile-with-two-lines-with-image-container-height--resolved: 120px;
+$with-image-image-size--resolved: 40px;
+$action-focus-label-text-color--resolved: var(--md-sys-color-primary);
+$action-focus-state-layer-color--resolved: var(--md-sys-color-primary);
+$action-focus-state-layer-opacity--resolved: var(--md-sys-state-focus-state-layer-opacity);
+$action-hover-label-text-color--resolved: var(--md-sys-color-primary);
+$action-hover-state-layer-color--resolved: var(--md-sys-color-primary);
+$action-hover-state-layer-opacity--resolved: var(--md-sys-state-hover-state-layer-opacity);
+$action-label-text-color--resolved: var(--md-sys-color-primary);
+$action-label-text-font--resolved: var(--md-sys-typescale-label-large-font);
+$action-label-text-line-height--resolved: var(--md-sys-typescale-label-large-line-height);
+$action-label-text-size--resolved: var(--md-sys-typescale-label-large-size);
+$action-label-text-tracking--resolved: var(--md-sys-typescale-label-large-tracking);
+$action-label-text-weight--resolved: var(--md-sys-typescale-label-large-weight);
+$action-pressed-label-text-color--resolved: var(--md-sys-color-primary);
+$action-pressed-state-layer-color--resolved: var(--md-sys-color-primary);
+$action-pressed-state-layer-opacity--resolved: var(--md-sys-state-pressed-state-layer-opacity);
+$container-color--resolved: var(--md-sys-color-surface-container-low);
+$container-elevation--resolved: var(--md-sys-elevation-level1);
+$container-shape--resolved: var(--md-sys-shape-corner-none);
+$container-surface-tint-layer-color--resolved: var(--md-sys-color-surface-tint);
+$divider-color--resolved: var(--md-sys-color-surface-variant);
+$supporting-text-color--resolved: var(--md-sys-color-on-surface-variant);
+$supporting-text-font--resolved: var(--md-sys-typescale-body-medium-font);
+$supporting-text-line-height--resolved: var(--md-sys-typescale-body-medium-line-height);
+$supporting-text-size--resolved: var(--md-sys-typescale-body-medium-size);
+$supporting-text-tracking--resolved: var(--md-sys-typescale-body-medium-tracking);
+$supporting-text-weight--resolved: var(--md-sys-typescale-body-medium-weight);
+$with-image-image-shape--resolved: var(--md-sys-shape-corner-full);

package/tokens/versions/latest/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: formats/sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 34.0.21
+// 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;
+}