@maicol07/material-web 2.2.0 → 2.5.0

package/tokens/versions/latest/sass/_md-comp-dialog.scss

@@ -0,0 +1,157 @@
+//
+// 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.dialog.with-divider.divider.height (Enabled / Divider)
+///
+/// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.thickness as a replacement
+$with-divider-divider-height: 1px;
+/// md.comp.dialog.with-icon.icon.size (Enabled / Icon)
+$with-icon-icon-size: 24px;
+/// md.comp.dialog.action.focus.label-text.color (Focused / Label text)
+$action-focus-label-text-color: md-sys-color.$primary;
+/// md.comp.dialog.action.focus.state-layer.color (Focused / State layer)
+$action-focus-state-layer-color: md-sys-color.$primary;
+/// md.comp.dialog.action.focus.state-layer.opacity (Focused / State layer)
+$action-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.dialog.action.hover.label-text.color (Hovered / Label text)
+$action-hover-label-text-color: md-sys-color.$primary;
+/// md.comp.dialog.action.hover.state-layer.color (Hovered / State layer)
+$action-hover-state-layer-color: md-sys-color.$primary;
+/// md.comp.dialog.action.hover.state-layer.opacity (Hovered / State layer)
+$action-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.dialog.action.label-text.color (Enabled / Label text)
+$action-label-text-color: md-sys-color.$primary;
+/// md.comp.dialog.action.label-text.font (Enabled / Label text)
+$action-label-text-font: md-sys-typescale.$label-large-font;
+/// md.comp.dialog.action.label-text.line-height (Enabled / Label text)
+$action-label-text-line-height: md-sys-typescale.$label-large-line-height;
+/// md.comp.dialog.action.label-text.size (Enabled / Label text)
+$action-label-text-size: md-sys-typescale.$label-large-size;
+/// md.comp.dialog.action.label-text.tracking (Enabled / Label text)
+$action-label-text-tracking: md-sys-typescale.$label-large-tracking;
+/// md.comp.dialog.action.label-text.weight (Enabled / Label text)
+$action-label-text-weight: md-sys-typescale.$label-large-weight;
+/// md.comp.dialog.action.pressed.label-text.color (Pressed (ripple) / Label text)
+$action-pressed-label-text-color: md-sys-color.$primary;
+/// md.comp.dialog.action.pressed.state-layer.color (Pressed (ripple) / State layer)
+$action-pressed-state-layer-color: md-sys-color.$primary;
+/// md.comp.dialog.action.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$action-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.dialog.container.color (Enabled / Container)
+$container-color: md-sys-color.$surface-container-high;
+/// md.comp.dialog.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level3;
+/// md.comp.dialog.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-extra-large;
+/// md.comp.dialog.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.dialog.headline.color (Enabled / Headline)
+$headline-color: md-sys-color.$on-surface;
+/// md.comp.dialog.headline.font (Enabled / Headline)
+$headline-font: md-sys-typescale.$headline-small-font;
+/// md.comp.dialog.headline.line-height (Enabled / Headline)
+$headline-line-height: md-sys-typescale.$headline-small-line-height;
+/// md.comp.dialog.headline.size (Enabled / Headline)
+$headline-size: md-sys-typescale.$headline-small-size;
+/// md.comp.dialog.headline.tracking (Enabled / Headline)
+$headline-tracking: md-sys-typescale.$headline-small-tracking;
+/// md.comp.dialog.headline.weight (Enabled / Headline)
+$headline-weight: md-sys-typescale.$headline-small-weight;
+/// md.comp.dialog.subhead.color (Enabled / Subhead)
+///
+/// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead
+$subhead-color: md-sys-color.$on-surface;
+/// md.comp.dialog.subhead.font (Enabled / Subhead)
+///
+/// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead
+$subhead-font: md-sys-typescale.$headline-small-font;
+/// md.comp.dialog.subhead.line-height (Enabled / Subhead)
+///
+/// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead
+$subhead-line-height: md-sys-typescale.$headline-small-line-height;
+/// md.comp.dialog.subhead.size (Enabled / Subhead)
+///
+/// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead
+$subhead-size: md-sys-typescale.$headline-small-size;
+/// md.comp.dialog.subhead.tracking (Enabled / Subhead)
+///
+/// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead
+$subhead-tracking: md-sys-typescale.$headline-small-tracking;
+/// md.comp.dialog.subhead.weight (Enabled / Subhead)
+///
+/// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead
+$subhead-weight: md-sys-typescale.$headline-small-weight;
+/// md.comp.dialog.supporting-text.color (Enabled / Supporting text)
+$supporting-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.dialog.supporting-text.font (Enabled / Supporting text)
+$supporting-text-font: md-sys-typescale.$body-medium-font;
+/// md.comp.dialog.supporting-text.line-height (Enabled / Supporting text)
+$supporting-text-line-height: md-sys-typescale.$body-medium-line-height;
+/// md.comp.dialog.supporting-text.size (Enabled / Supporting text)
+$supporting-text-size: md-sys-typescale.$body-medium-size;
+/// md.comp.dialog.supporting-text.tracking (Enabled / Supporting text)
+$supporting-text-tracking: md-sys-typescale.$body-medium-tracking;
+/// md.comp.dialog.supporting-text.weight (Enabled / Supporting text)
+$supporting-text-weight: md-sys-typescale.$body-medium-weight;
+/// md.comp.dialog.with-divider.divider.color (Enabled / Divider)
+///
+/// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.color as a replacement
+$with-divider-divider-color: md-sys-color.$outline;
+/// md.comp.dialog.with-icon.icon.color (Enabled / Icon)
+$with-icon-icon-color: md-sys-color.$secondary;
+/// md.comp.dialog.action.label-text.type (Enabled / Label text)
+@mixin action-label-text-type {
+  font-family: $action-label-text-font;
+  font-size: $action-label-text-size;
+  font-weight: $action-label-text-weight;
+  letter-spacing: $action-label-text-tracking;
+  line-height: $action-label-text-line-height;
+}
+/// md.comp.dialog.headline.type (Enabled / Headline)
+@mixin headline-type {
+  font-family: $headline-font;
+  font-size: $headline-size;
+  font-weight: $headline-weight;
+  letter-spacing: $headline-tracking;
+  line-height: $headline-line-height;
+}
+/// md.comp.dialog.subhead.type (Enabled / Subhead)
+///
+/// @deprecated Tokens deprecated to align taxonomy with full-screen dialogs. Please use md.comp.dialog.headline.… instead
+@mixin subhead-type {
+  font-family: $subhead-font;
+  font-size: $subhead-size;
+  font-weight: $subhead-weight;
+  letter-spacing: $subhead-tracking;
+  line-height: $subhead-line-height;
+}
+/// md.comp.dialog.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/latest/sass/_md-comp-divider.scss

@@ -0,0 +1,23 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: 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';
+
+/// md.comp.divider.thickness (Enabled / Container)
+$thickness: 1px;
+/// md.comp.divider.color (Enabled / Container)
+$color: md-sys-color.$outline-variant;

package/tokens/versions/latest/sass/_md-comp-drag-handle.scss

@@ -0,0 +1,54 @@
+//
+// 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';
+
+/// md.comp.drag-handle.container.width (Enabled / Container)
+///
+/// The drag handle container is wider than than the handle, and stretches to fill vertical space.
+$container-width: 24px;
+/// md.comp.drag-handle.height (Enabled / Drag Handle)
+$height: 48px;
+/// md.comp.drag-handle.pressed.height (Pressed / Drag handle)
+$pressed-height: 52px;
+/// md.comp.drag-handle.pressed.width (Pressed / Drag handle)
+$pressed-width: 12px;
+/// md.comp.drag-handle.width (Enabled / Drag Handle)
+$width: 4px;
+/// md.comp.drag-handle.color (Enabled / Drag Handle)
+$color: md-sys-color.$outline;
+/// md.comp.drag-handle.elevation (Enabled / Drag Handle)
+$elevation: md-sys-elevation.$level0;
+/// md.comp.drag-handle.focus.state-layer.color (Focused / State layer)
+$focus-state-layer-color: md-sys-color.$inverse-on-surface;
+/// md.comp.drag-handle.focus.state-layer.opacity (Focused / State layer)
+$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.drag-handle.hover.state-layer.color (Hovered / State layer)
+$hover-state-layer-color: md-sys-color.$inverse-on-surface;
+/// md.comp.drag-handle.hover.state-layer.opacity (Hovered / State layer)
+$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.drag-handle.pressed.color (Pressed / Drag handle)
+$pressed-color: md-sys-color.$on-surface;
+/// md.comp.drag-handle.pressed.elevation (Pressed / Drag handle)
+$pressed-elevation: md-sys-elevation.$level0;
+/// md.comp.drag-handle.pressed.shape (Pressed / Drag handle)
+$pressed-shape: md-sys-shape.$corner-medium;
+/// md.comp.drag-handle.shape (Enabled / Drag Handle)
+$shape: md-sys-shape.$corner-full;

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

@@ -0,0 +1,190 @@
+//
+// 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.elevated-button.container.height ([Deprecated] Enabled / [Deprecated] Container)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$container-height: 40px;
+/// md.comp.elevated-button.disabled.container.opacity ([Deprecated] Disabled / [Deprecated] Container)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$disabled-container-opacity: 0.12;
+/// md.comp.elevated-button.disabled.label-text.opacity ([Deprecated] Disabled / [Deprecated] Label text)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$disabled-label-text-opacity: 0.38;
+/// md.comp.elevated-button.with-icon.disabled.icon.opacity ([Deprecated] Disabled / [Deprecated] Icon)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$with-icon-disabled-icon-opacity: 0.38;
+/// md.comp.elevated-button.with-icon.icon.size ([Deprecated] Enabled / [Deprecated] Icon)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$with-icon-icon-size: 18px;
+/// md.comp.elevated-button.container.color ([Deprecated] Enabled / [Deprecated] Container)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$container-color: md-sys-color.$surface-container-low;
+/// md.comp.elevated-button.container.elevation ([Deprecated] Enabled / [Deprecated] Container)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$container-elevation: md-sys-elevation.$level1;
+/// md.comp.elevated-button.container.shadow-color ([Deprecated] Enabled / [Deprecated] Container)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$container-shadow-color: md-sys-color.$shadow;
+/// md.comp.elevated-button.container.shape ([Deprecated] Enabled / [Deprecated] Container)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$container-shape: md-sys-shape.$corner-full;
+/// md.comp.elevated-button.container.surface-tint-layer.color ([Deprecated] Enabled / [Deprecated] 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.elevated-button.disabled.container.color ([Deprecated] Disabled / [Deprecated] Container)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$disabled-container-color: md-sys-color.$on-surface;
+/// md.comp.elevated-button.disabled.container.elevation ([Deprecated] Disabled / [Deprecated] Container)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$disabled-container-elevation: md-sys-elevation.$level0;
+/// md.comp.elevated-button.disabled.label-text.color ([Deprecated] Disabled / [Deprecated] Label text)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$disabled-label-text-color: md-sys-color.$on-surface;
+/// md.comp.elevated-button.focus.container.elevation ([Deprecated] Focused / [Deprecated] Container)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$focus-container-elevation: md-sys-elevation.$level1;
+/// md.comp.elevated-button.focus.indicator.color ([Deprecated] Focused / [Deprecated] Focus indicator)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$focus-indicator-color: md-sys-color.$secondary;
+/// md.comp.elevated-button.focus.indicator.outline.offset ([Deprecated] Focused / [Deprecated] Focus indicator)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;
+/// md.comp.elevated-button.focus.indicator.thickness ([Deprecated] Focused / [Deprecated] Focus indicator)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;
+/// md.comp.elevated-button.focus.label-text.color ([Deprecated] Focused / [Deprecated] Label text)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$focus-label-text-color: md-sys-color.$primary;
+/// md.comp.elevated-button.focus.state-layer.color ([Deprecated] Focused / [Deprecated] State layer)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$focus-state-layer-color: md-sys-color.$primary;
+/// md.comp.elevated-button.focus.state-layer.opacity ([Deprecated] Focused / [Deprecated] State layer)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.elevated-button.hover.container.elevation ([Deprecated] Hovered / [Deprecated] Container)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$hover-container-elevation: md-sys-elevation.$level2;
+/// md.comp.elevated-button.hover.label-text.color ([Deprecated] Hovered / [Deprecated] Label text)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$hover-label-text-color: md-sys-color.$primary;
+/// md.comp.elevated-button.hover.state-layer.color ([Deprecated] Hovered / [Deprecated] State layer)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$hover-state-layer-color: md-sys-color.$primary;
+/// md.comp.elevated-button.hover.state-layer.opacity ([Deprecated] Hovered / [Deprecated] State layer)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.elevated-button.label-text.color ([Deprecated] Enabled / [Deprecated] Label text)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$label-text-color: md-sys-color.$primary;
+/// md.comp.elevated-button.label-text.font ([Deprecated] Enabled / [Deprecated] Label text)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$label-text-font: md-sys-typescale.$label-large-font;
+/// md.comp.elevated-button.label-text.line-height ([Deprecated] Enabled / [Deprecated] Label text)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$label-text-line-height: md-sys-typescale.$label-large-line-height;
+/// md.comp.elevated-button.label-text.size ([Deprecated] Enabled / [Deprecated] Label text)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$label-text-size: md-sys-typescale.$label-large-size;
+/// md.comp.elevated-button.label-text.tracking ([Deprecated] Enabled / [Deprecated] Label text)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$label-text-tracking: md-sys-typescale.$label-large-tracking;
+/// md.comp.elevated-button.label-text.weight ([Deprecated] Enabled / [Deprecated] Label text)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$label-text-weight: md-sys-typescale.$label-large-weight;
+/// md.comp.elevated-button.pressed.container.elevation ([Deprecated] Pressed (ripple) / [Deprecated] Container)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$pressed-container-elevation: md-sys-elevation.$level1;
+/// md.comp.elevated-button.pressed.label-text.color ([Deprecated] Pressed (ripple) / [Deprecated] Label text)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$pressed-label-text-color: md-sys-color.$primary;
+/// md.comp.elevated-button.pressed.state-layer.color ([Deprecated] Pressed (ripple) / [Deprecated] State layer)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$pressed-state-layer-color: md-sys-color.$primary;
+/// md.comp.elevated-button.pressed.state-layer.opacity ([Deprecated] Pressed (ripple) / [Deprecated] State layer)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.elevated-button.with-icon.disabled.icon.color ([Deprecated] Disabled / [Deprecated] Icon)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$with-icon-disabled-icon-color: md-sys-color.$on-surface;
+/// md.comp.elevated-button.with-icon.focus.icon.color ([Deprecated] Focused / [Deprecated] Icon)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$with-icon-focus-icon-color: md-sys-color.$primary;
+/// md.comp.elevated-button.with-icon.hover.icon.color ([Deprecated] Hovered / [Deprecated] Icon)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$with-icon-hover-icon-color: md-sys-color.$primary;
+/// md.comp.elevated-button.with-icon.icon.color ([Deprecated] Enabled / [Deprecated] Icon)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$with-icon-icon-color: md-sys-color.$primary;
+/// md.comp.elevated-button.with-icon.pressed.icon.color ([Deprecated] Pressed (ripple) / [Deprecated] Icon)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+$with-icon-pressed-icon-color: md-sys-color.$primary;
+/// md.comp.elevated-button.label-text.type ([Deprecated] Enabled / [Deprecated] Label text)
+///
+/// @deprecated This token is deprecated. Use the corresponding token from either the md.comp.button.elevated or md.comp.button.(size) set instead.
+@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-elevated-card.scss

@@ -0,0 +1,75 @@
+//
+// 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';
+
+/// md.comp.elevated-card.disabled.container.opacity (Disabled / Container)
+$disabled-container-opacity: 0.38;
+/// md.comp.elevated-card.icon.size (Enabled / Icon)
+$icon-size: 24px;
+/// md.comp.elevated-card.container.color (Enabled / Container)
+$container-color: md-sys-color.$surface-container-low;
+/// md.comp.elevated-card.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level1;
+/// md.comp.elevated-card.container.shadow-color (Enabled / Container)
+$container-shadow-color: md-sys-color.$shadow;
+/// md.comp.elevated-card.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-medium;
+/// md.comp.elevated-card.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.elevated-card.disabled.container.color (Disabled / Container)
+$disabled-container-color: md-sys-color.$surface;
+/// md.comp.elevated-card.disabled.container.elevation (Disabled / Container)
+$disabled-container-elevation: md-sys-elevation.$level1;
+/// md.comp.elevated-card.dragged.container.elevation (Dragged / Container)
+$dragged-container-elevation: md-sys-elevation.$level4;
+/// md.comp.elevated-card.dragged.state-layer.color (Dragged / State layer)
+$dragged-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.elevated-card.dragged.state-layer.opacity (Dragged / State layer)
+$dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;
+/// md.comp.elevated-card.focus.container.elevation (Focused / Container)
+$focus-container-elevation: md-sys-elevation.$level1;
+/// md.comp.elevated-card.focus.indicator.color (Focused / Focus indicator)
+$focus-indicator-color: md-sys-color.$secondary;
+/// md.comp.elevated-card.focus.indicator.outline.offset (Focused / Focus indicator)
+$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;
+/// md.comp.elevated-card.focus.indicator.thickness (Focused / Focus indicator)
+$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;
+/// md.comp.elevated-card.focus.state-layer.color (Focused / State layer)
+$focus-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.elevated-card.focus.state-layer.opacity (Focused / State layer)
+$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.elevated-card.hover.container.elevation (Hovered / Container)
+$hover-container-elevation: md-sys-elevation.$level2;
+/// md.comp.elevated-card.hover.state-layer.color (Hovered / State layer)
+$hover-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.elevated-card.hover.state-layer.opacity (Hovered / State layer)
+$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.elevated-card.icon.color (Enabled / Icon)
+$icon-color: md-sys-color.$primary;
+/// md.comp.elevated-card.pressed.container.elevation (Pressed (ripple) / Container)
+$pressed-container-elevation: md-sys-elevation.$level1;
+/// md.comp.elevated-card.pressed.state-layer.color (Pressed (ripple) / State layer)
+$pressed-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.elevated-card.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;

package/tokens/versions/latest/sass/_md-comp-extended-fab-branded.scss

@@ -0,0 +1,100 @@
+//
+// 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.extended-fab.branded.container.height (Enabled / Container)
+$container-height: 56px;
+/// md.comp.extended-fab.branded.icon.size (Enabled / Icon)
+$icon-size: 36px;
+/// md.comp.extended-fab.branded.container.color (Enabled / Container)
+$container-color: md-sys-color.$surface-container-high;
+/// md.comp.extended-fab.branded.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level3;
+/// md.comp.extended-fab.branded.container.shadow-color (Enabled / Container)
+$container-shadow-color: md-sys-color.$shadow;
+/// md.comp.extended-fab.branded.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-large;
+/// md.comp.extended-fab.branded.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.extended-fab.branded.focus.container.elevation (Focused / Container)
+$focus-container-elevation: md-sys-elevation.$level3;
+/// md.comp.extended-fab.branded.focus.indicator.color (Focused / Focus indicator)
+$focus-indicator-color: md-sys-color.$secondary;
+/// md.comp.extended-fab.branded.focus.indicator.outline.offset (Focused / Focus indicator)
+$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;
+/// md.comp.extended-fab.branded.focus.indicator.thickness (Focused / Focus indicator)
+$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;
+/// md.comp.extended-fab.branded.focus.label-text.color (Focused / Label text)
+$focus-label-text-color: md-sys-color.$primary;
+/// md.comp.extended-fab.branded.focus.state-layer.color (Focused / State layer)
+$focus-state-layer-color: md-sys-color.$primary;
+/// md.comp.extended-fab.branded.focus.state-layer.opacity (Focused / State layer)
+$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.extended-fab.branded.hover.container.elevation (Hovered / Container)
+$hover-container-elevation: md-sys-elevation.$level4;
+/// md.comp.extended-fab.branded.hover.label-text.color (Hovered / Label text)
+$hover-label-text-color: md-sys-color.$primary;
+/// md.comp.extended-fab.branded.hover.state-layer.color (Hovered / State layer)
+$hover-state-layer-color: md-sys-color.$primary;
+/// md.comp.extended-fab.branded.hover.state-layer.opacity (Hovered / State layer)
+$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.extended-fab.branded.label-text.color (Enabled / Label text)
+$label-text-color: md-sys-color.$on-surface;
+/// md.comp.extended-fab.branded.label-text.font (Enabled / Label text)
+$label-text-font: md-sys-typescale.$label-large-font;
+/// md.comp.extended-fab.branded.label-text.line-height (Enabled / Label text)
+$label-text-line-height: md-sys-typescale.$label-large-line-height;
+/// md.comp.extended-fab.branded.label-text.size (Enabled / Label text)
+$label-text-size: md-sys-typescale.$label-large-size;
+/// md.comp.extended-fab.branded.label-text.tracking (Enabled / Label text)
+$label-text-tracking: md-sys-typescale.$label-large-tracking;
+/// md.comp.extended-fab.branded.label-text.weight (Enabled / Label text)
+$label-text-weight: md-sys-typescale.$label-large-weight;
+/// md.comp.extended-fab.branded.lowered.container.color (Enabled / Container)
+$lowered-container-color: md-sys-color.$surface-container-low;
+/// md.comp.extended-fab.branded.lowered.container.elevation (Enabled / Container)
+$lowered-container-elevation: md-sys-elevation.$level1;
+/// md.comp.extended-fab.branded.lowered.focus.container.elevation (Focused / Container)
+$lowered-focus-container-elevation: md-sys-elevation.$level1;
+/// md.comp.extended-fab.branded.lowered.hover.container.elevation (Hovered / Container)
+$lowered-hover-container-elevation: md-sys-elevation.$level2;
+/// md.comp.extended-fab.branded.lowered.pressed.container.elevation (Pressed (ripple) / Container)
+$lowered-pressed-container-elevation: md-sys-elevation.$level1;
+/// md.comp.extended-fab.branded.pressed.container.elevation (Pressed (ripple) / Container)
+$pressed-container-elevation: md-sys-elevation.$level3;
+/// md.comp.extended-fab.branded.pressed.label-text.color (Pressed (ripple) / Label text)
+$pressed-label-text-color: md-sys-color.$primary;
+/// md.comp.extended-fab.branded.pressed.state-layer.color (Pressed (ripple) / State layer)
+$pressed-state-layer-color: md-sys-color.$primary;
+/// md.comp.extended-fab.branded.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.extended-fab.branded.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-extended-fab-large.scss

@@ -0,0 +1,36 @@
+//
+// 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.extended-fab.large.container.height
+$container-height: 96px;
+/// md.comp.extended-fab.large.icon-label-space
+$icon-label-space: 16px;
+/// md.comp.extended-fab.large.icon.size
+$icon-size: 36px;
+/// md.comp.extended-fab.large.leading-space
+$leading-space: 28px;
+/// md.comp.extended-fab.large.trailing-space
+$trailing-space: 28px;
+/// md.comp.extended-fab.large.container.shape
+$container-shape: md-sys-shape.$corner-extra-large;
+/// md.comp.extended-fab.large.label-text
+@mixin label-text {
+  @include md-sys-typescale.headline-small;
+}