@maicol07/material-web 2.2.0 → 2.5.0

package/tokens/versions/latest/sass/_md-comp-time-picker.scss

@@ -0,0 +1,257 @@
+//
+// 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.time-picker.clock-dial.container.size (Enabled / Container)
+$clock-dial-container-size: 256px;
+/// md.comp.time-picker.clock-dial.selector.center.container.size (Enabled / Container)
+$clock-dial-selector-center-container-size: 8px;
+/// md.comp.time-picker.clock-dial.selector.handle.container.size (Enabled / Container)
+$clock-dial-selector-handle-container-size: 48px;
+/// md.comp.time-picker.clock-dial.selector.track.container.width (Enabled / Container)
+$clock-dial-selector-track-container-width: 2px;
+/// md.comp.time-picker.period-selector.horizontal.container.height (Enabled / Container)
+$period-selector-horizontal-container-height: 38px;
+/// md.comp.time-picker.period-selector.horizontal.container.width (Enabled / Container)
+$period-selector-horizontal-container-width: 216px;
+/// md.comp.time-picker.period-selector.outline.width (Enabled / Container)
+$period-selector-outline-width: 1px;
+/// md.comp.time-picker.period-selector.vertical.container.height (Enabled / Container)
+$period-selector-vertical-container-height: 80px;
+/// md.comp.time-picker.period-selector.vertical.container.width (Enabled / Container)
+$period-selector-vertical-container-width: 52px;
+/// md.comp.time-picker.time-selector.24h-vertical.container.width (Enabled / Container)
+$time-selector-24h-vertical-container-width: 114px;
+/// md.comp.time-picker.time-selector.container.height (Enabled / Container)
+$time-selector-container-height: 80px;
+/// md.comp.time-picker.time-selector.container.width (Enabled / Container)
+$time-selector-container-width: 96px;
+/// md.comp.time-picker.clock-dial.color (Enabled / Container)
+$clock-dial-color: md-sys-color.$surface-container-highest;
+/// md.comp.time-picker.clock-dial.color.ignore (Enabled / Container)
+///
+/// @deprecated Deprecating token due to typo in name. Please use md.comp.time-picker.clock-dial.color instead"
+$clock-dial-color-ignore: md-sys-color.$on-surface-variant;
+/// md.comp.time-picker.clock-dial.label-text.font (Enabled / Label text)
+$clock-dial-label-text-font: md-sys-typescale.$body-large-font;
+/// md.comp.time-picker.clock-dial.label-text.line-height (Enabled / Label text)
+$clock-dial-label-text-line-height: md-sys-typescale.$body-large-line-height;
+/// md.comp.time-picker.clock-dial.label-text.size (Enabled / Label text)
+$clock-dial-label-text-size: md-sys-typescale.$body-large-size;
+/// md.comp.time-picker.clock-dial.label-text.tracking (Enabled / Label text)
+$clock-dial-label-text-tracking: md-sys-typescale.$body-large-tracking;
+/// md.comp.time-picker.clock-dial.label-text.weight (Enabled / Label text)
+$clock-dial-label-text-weight: md-sys-typescale.$body-large-weight;
+/// md.comp.time-picker.clock-dial.selected.label-text.color (Enabled / Label text)
+$clock-dial-selected-label-text-color: md-sys-color.$on-primary;
+/// md.comp.time-picker.clock-dial.selector.center.container.color (Enabled / Container)
+$clock-dial-selector-center-container-color: md-sys-color.$primary;
+/// md.comp.time-picker.clock-dial.selector.center.container.shape (Enabled / Container)
+$clock-dial-selector-center-container-shape: md-sys-shape.$corner-full;
+/// md.comp.time-picker.clock-dial.selector.handle.container.color (Enabled / Container)
+$clock-dial-selector-handle-container-color: md-sys-color.$primary;
+/// md.comp.time-picker.clock-dial.selector.handle.container.shape (Enabled / Container)
+$clock-dial-selector-handle-container-shape: md-sys-shape.$corner-full;
+/// md.comp.time-picker.clock-dial.selector.track.container.color (Enabled / Container)
+$clock-dial-selector-track-container-color: md-sys-color.$primary;
+/// md.comp.time-picker.clock-dial.shape (Enabled / Container)
+$clock-dial-shape: md-sys-shape.$corner-full;
+/// md.comp.time-picker.clock-dial.shape.ignore (Enabled / Container)
+///
+/// @deprecated Deprecating token due to typo in name. Please use md.comp.time-picker.clock-dial.shape instead
+$clock-dial-shape-ignore: md-sys-shape.$corner-full;
+/// md.comp.time-picker.clock-dial.unselected.label-text.color (Enabled / Label text)
+$clock-dial-unselected-label-text-color: md-sys-color.$on-surface;
+/// md.comp.time-picker.container.color (Enabled / Container)
+$container-color: md-sys-color.$surface-container-high;
+/// md.comp.time-picker.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level3;
+/// md.comp.time-picker.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-extra-large;
+/// md.comp.time-picker.headline.color (Enabled / Headline)
+$headline-color: md-sys-color.$on-surface-variant;
+/// md.comp.time-picker.headline.font (Enabled / Headline)
+$headline-font: md-sys-typescale.$label-medium-font;
+/// md.comp.time-picker.headline.line-height (Enabled / Headline)
+$headline-line-height: md-sys-typescale.$label-medium-line-height;
+/// md.comp.time-picker.headline.size (Enabled / Headline)
+$headline-size: md-sys-typescale.$label-medium-size;
+/// md.comp.time-picker.headline.tracking (Enabled / Headline)
+$headline-tracking: md-sys-typescale.$label-medium-tracking;
+/// md.comp.time-picker.headline.weight (Enabled / Headline)
+$headline-weight: md-sys-typescale.$label-medium-weight;
+/// md.comp.time-picker.period-selector.container.shape (Enabled / Container)
+$period-selector-container-shape: md-sys-shape.$corner-small;
+/// md.comp.time-picker.period-selector.focus.state-layer.opacity (Focused / State layer)
+$period-selector-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.time-picker.period-selector.hover.state-layer.opacity (Hovered / State layer)
+$period-selector-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.time-picker.period-selector.label-text.font (Enabled / Label text)
+$period-selector-label-text-font: md-sys-typescale.$title-medium-font;
+/// md.comp.time-picker.period-selector.label-text.line-height (Enabled / Label text)
+$period-selector-label-text-line-height: md-sys-typescale.$title-medium-line-height;
+/// md.comp.time-picker.period-selector.label-text.size (Enabled / Label text)
+$period-selector-label-text-size: md-sys-typescale.$title-medium-size;
+/// md.comp.time-picker.period-selector.label-text.tracking (Enabled / Label text)
+$period-selector-label-text-tracking: md-sys-typescale.$title-medium-tracking;
+/// md.comp.time-picker.period-selector.label-text.weight (Enabled / Label text)
+$period-selector-label-text-weight: md-sys-typescale.$title-medium-weight;
+/// md.comp.time-picker.period-selector.outline.color (Enabled / Container)
+$period-selector-outline-color: md-sys-color.$outline;
+/// md.comp.time-picker.period-selector.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$period-selector-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.time-picker.period-selector.selected.container.color (Enabled / Container)
+$period-selector-selected-container-color: md-sys-color.$tertiary-container;
+/// md.comp.time-picker.period-selector.selected.focus.label-text.color (Focused / Label text)
+$period-selector-selected-focus-label-text-color: md-sys-color.$on-tertiary-container;
+/// md.comp.time-picker.period-selector.selected.focus.state-layer.color (Focused / State layer)
+$period-selector-selected-focus-state-layer-color: md-sys-color.$on-tertiary-container;
+/// md.comp.time-picker.period-selector.selected.hover.label-text.color (Hovered / Label text)
+$period-selector-selected-hover-label-text-color: md-sys-color.$on-tertiary-container;
+/// md.comp.time-picker.period-selector.selected.hover.state-layer.color (Hovered / State layer)
+$period-selector-selected-hover-state-layer-color: md-sys-color.$on-tertiary-container;
+/// md.comp.time-picker.period-selector.selected.label-text.color (Enabled / Label text)
+$period-selector-selected-label-text-color: md-sys-color.$on-tertiary-container;
+/// md.comp.time-picker.period-selector.selected.pressed.label-text.color (Pressed (ripple) / Label text)
+$period-selector-selected-pressed-label-text-color: md-sys-color.$on-tertiary-container;
+/// md.comp.time-picker.period-selector.selected.pressed.state-layer.color (Pressed (ripple) / State layer)
+$period-selector-selected-pressed-state-layer-color: md-sys-color.$on-tertiary-container;
+/// md.comp.time-picker.period-selector.unselected.focus.label-text.color (Focused / Label text)
+$period-selector-unselected-focus-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.time-picker.period-selector.unselected.focus.state-layer.color (Focused / State layer)
+$period-selector-unselected-focus-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.time-picker.period-selector.unselected.hover.label-text.color (Hovered / Label text)
+$period-selector-unselected-hover-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.time-picker.period-selector.unselected.hover.state-layer.color (Hovered / State layer)
+$period-selector-unselected-hover-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.time-picker.period-selector.unselected.label-text.color (Enabled / Label text)
+$period-selector-unselected-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.time-picker.period-selector.unselected.pressed.label-text.color (Pressed (ripple) / Label text)
+$period-selector-unselected-pressed-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.time-picker.period-selector.unselected.pressed.state-layer.color (Pressed (ripple) / State layer)
+$period-selector-unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.time-picker.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.
+$surface-tint-layer-color: md-sys-color.$surface-tint;
+/// md.comp.time-picker.time-selector.container.shape (Enabled / Container)
+$time-selector-container-shape: md-sys-shape.$corner-small;
+/// md.comp.time-picker.time-selector.focus.state-layer.opacity (Focused / State layer)
+$time-selector-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.time-picker.time-selector.hover.state-layer.opacity (Hovered / State layer)
+$time-selector-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.time-picker.time-selector.label-text.font (Enabled / Label text)
+$time-selector-label-text-font: md-sys-typescale.$display-large-font;
+/// md.comp.time-picker.time-selector.label-text.line-height (Enabled / Label text)
+$time-selector-label-text-line-height: md-sys-typescale.$display-large-line-height;
+/// md.comp.time-picker.time-selector.label-text.size (Enabled / Label text)
+$time-selector-label-text-size: md-sys-typescale.$display-large-size;
+/// md.comp.time-picker.time-selector.label-text.tracking (Enabled / Label text)
+$time-selector-label-text-tracking: md-sys-typescale.$display-large-tracking;
+/// md.comp.time-picker.time-selector.label-text.weight (Enabled / Label text)
+$time-selector-label-text-weight: md-sys-typescale.$display-large-weight;
+/// md.comp.time-picker.time-selector.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$time-selector-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.time-picker.time-selector.selected.container.color (Enabled / Container)
+$time-selector-selected-container-color: md-sys-color.$primary-container;
+/// md.comp.time-picker.time-selector.selected.focus.label-text.color (Focused / Label text)
+$time-selector-selected-focus-label-text-color: md-sys-color.$on-primary-container;
+/// md.comp.time-picker.time-selector.selected.focus.state-layer.color (Focused / State layer)
+$time-selector-selected-focus-state-layer-color: md-sys-color.$on-primary-container;
+/// md.comp.time-picker.time-selector.selected.hover.label-text.color (Hovered / Label text)
+$time-selector-selected-hover-label-text-color: md-sys-color.$on-primary-container;
+/// md.comp.time-picker.time-selector.selected.hover.state-layer.color (Hovered / State layer)
+$time-selector-selected-hover-state-layer-color: md-sys-color.$on-primary-container;
+/// md.comp.time-picker.time-selector.selected.label-text.color (Enabled / Label text)
+$time-selector-selected-label-text-color: md-sys-color.$on-primary-container;
+/// md.comp.time-picker.time-selector.selected.pressed.label-text.color (Pressed (ripple) / Label text)
+$time-selector-selected-pressed-label-text-color: md-sys-color.$on-primary-container;
+/// md.comp.time-picker.time-selector.selected.pressed.state-layer.color (Pressed (ripple) / State layer)
+$time-selector-selected-pressed-state-layer-color: md-sys-color.$on-primary-container;
+/// md.comp.time-picker.time-selector.separator.color (Enabled / Separator)
+$time-selector-separator-color: md-sys-color.$on-surface;
+/// md.comp.time-picker.time-selector.separator.font (Enabled / Separator)
+$time-selector-separator-font: md-sys-typescale.$display-large-font;
+/// md.comp.time-picker.time-selector.separator.line-height (Enabled / Separator)
+$time-selector-separator-line-height: md-sys-typescale.$display-large-line-height;
+/// md.comp.time-picker.time-selector.separator.size (Enabled / Separator)
+$time-selector-separator-size: md-sys-typescale.$display-large-size;
+/// md.comp.time-picker.time-selector.separator.tracking (Enabled / Separator)
+$time-selector-separator-tracking: md-sys-typescale.$display-large-tracking;
+/// md.comp.time-picker.time-selector.separator.weight (Enabled / Separator)
+$time-selector-separator-weight: md-sys-typescale.$display-large-weight;
+/// md.comp.time-picker.time-selector.unselected.container.color (Enabled / Container)
+$time-selector-unselected-container-color: md-sys-color.$surface-container-highest;
+/// md.comp.time-picker.time-selector.unselected.focus.label-text.color (Focused / Label text)
+$time-selector-unselected-focus-label-text-color: md-sys-color.$on-surface;
+/// md.comp.time-picker.time-selector.unselected.focus.state-layer.color (Focused / State layer)
+$time-selector-unselected-focus-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.time-picker.time-selector.unselected.hover.label-text.color (Hovered / Label text)
+$time-selector-unselected-hover-label-text-color: md-sys-color.$on-surface;
+/// md.comp.time-picker.time-selector.unselected.hover.state-layer.color (Hovered / State layer)
+$time-selector-unselected-hover-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.time-picker.time-selector.unselected.label-text.color (Enabled / Label text)
+$time-selector-unselected-label-text-color: md-sys-color.$on-surface;
+/// md.comp.time-picker.time-selector.unselected.pressed.label-text.color (Pressed (ripple) / Label text)
+$time-selector-unselected-pressed-label-text-color: md-sys-color.$on-surface;
+/// md.comp.time-picker.time-selector.unselected.pressed.state-layer.color (Pressed (ripple) / State layer)
+$time-selector-unselected-pressed-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.time-picker.clock-dial.label-text.type (Enabled / Label text)
+@mixin clock-dial-label-text-type {
+  font-family: $clock-dial-label-text-font;
+  font-size: $clock-dial-label-text-size;
+  font-weight: $clock-dial-label-text-weight;
+  letter-spacing: $clock-dial-label-text-tracking;
+  line-height: $clock-dial-label-text-line-height;
+}
+/// md.comp.time-picker.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.time-picker.period-selector.label-text.type (Enabled / Label text)
+@mixin period-selector-label-text-type {
+  font-family: $period-selector-label-text-font;
+  font-size: $period-selector-label-text-size;
+  font-weight: $period-selector-label-text-weight;
+  letter-spacing: $period-selector-label-text-tracking;
+  line-height: $period-selector-label-text-line-height;
+}
+/// md.comp.time-picker.time-selector.label-text.type (Enabled / Label text)
+@mixin time-selector-label-text-type {
+  font-family: $time-selector-label-text-font;
+  font-size: $time-selector-label-text-size;
+  font-weight: $time-selector-label-text-weight;
+  letter-spacing: $time-selector-label-text-tracking;
+  line-height: $time-selector-label-text-line-height;
+}
+/// md.comp.time-picker.time-selector.separator.type (Enabled / Separator)
+@mixin time-selector-separator-type {
+  font-family: $time-selector-separator-font;
+  font-size: $time-selector-separator-size;
+  font-weight: $time-selector-separator-weight;
+  letter-spacing: $time-selector-separator-tracking;
+  line-height: $time-selector-separator-line-height;
+}

package/tokens/versions/latest/sass/_md-comp-toolbar-docked.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-color';
+@use 'md-sys-shape';
+
+/// md.comp.toolbar.docked.container.height (Size)
+$container-height: 64px;
+/// md.comp.toolbar.docked.container.leading-space (Size)
+$container-leading-space: 16px;
+/// md.comp.toolbar.docked.container.max-spacing (Size)
+$container-max-spacing: 32px;
+/// md.comp.toolbar.docked.container.min-spacing (Size)
+$container-min-spacing: 4px;
+/// md.comp.toolbar.docked.container.trailing-space (Size)
+$container-trailing-space: 16px;
+/// md.comp.toolbar.docked.container.color (Color)
+///
+/// @deprecated Moving this token to the color token set
+$container-color: md-sys-color.$surface-container;
+/// md.comp.toolbar.docked.container.shape (Shape)
+$container-shape: md-sys-shape.$corner-none;

package/tokens/versions/latest/sass/_md-comp-toolbar-floating-fab.scss

@@ -0,0 +1,51 @@
+//
+// 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.toolbar.floating.fab.between-space
+$between-space: 8px;
+/// md.comp.toolbar.floating.fab.container.height (Expanded)
+$container-height: 56px;
+/// md.comp.toolbar.floating.fab.container.width (Expanded)
+$container-width: 56px;
+/// md.comp.toolbar.floating.fab.icon.size (Expanded)
+$icon-size: 24px;
+/// md.comp.toolbar.floating.fab.medium.container.height (Collapsed)
+$medium-container-height: 80px;
+/// md.comp.toolbar.floating.fab.medium.container.width (Collapsed)
+$medium-container-width: 80px;
+/// md.comp.toolbar.floating.fab.medium.icon.size (Collapsed)
+$medium-icon-size: 28px;
+/// md.comp.toolbar.floating.fab.container.elevation (Expanded)
+$container-elevation: md-sys-elevation.$level1;
+/// md.comp.toolbar.floating.fab.container.shape (Expanded)
+$container-shape: md-sys-shape.$corner-large;
+/// md.comp.toolbar.floating.fab.medium.container.elevation (Collapsed)
+$medium-container-elevation: md-sys-elevation.$level2;
+/// md.comp.toolbar.floating.fab.medium.container.shape (Collapsed)
+$medium-container-shape: md-sys-shape.$corner-large-increased;
+/// md.comp.toolbar.floating.fab.standard.container.color
+$standard-container-color: md-sys-color.$secondary-container;
+/// md.comp.toolbar.floating.fab.standard.icon.color
+$standard-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.toolbar.floating.fab.vibrant.container.color
+$vibrant-container-color: md-sys-color.$tertiary-container;
+/// md.comp.toolbar.floating.fab.vibrant.icon.color
+$vibrant-icon-color: md-sys-color.$on-tertiary-container;

package/tokens/versions/latest/sass/_md-comp-toolbar-floating.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';
+
+/// md.comp.toolbar.floating.container.between-space (Size)
+$container-between-space: 4px;
+/// md.comp.toolbar.floating.container.external-padding (Size)
+///
+/// @deprecated Deprecating for a vertical and horizontal option
+$container-external-padding: 16px;
+/// md.comp.toolbar.floating.container.height (Size)
+///
+/// @deprecated Deprecating this for a vertical and horizontal variant
+$container-height: 64px;
+/// md.comp.toolbar.floating.container.leading-space (Size)
+$container-leading-space: 8px;
+/// md.comp.toolbar.floating.container.trailing-space (Size)
+$container-trailing-space: 8px;
+/// md.comp.toolbar.floating.horizontal.container.external-space (Size)
+$horizontal-container-external-space: 16px;
+/// md.comp.toolbar.floating.horizontal.container.height (Size)
+$horizontal-container-height: 64px;
+/// md.comp.toolbar.floating.vertical.container.external-space (Size)
+$vertical-container-external-space: 24px;
+/// md.comp.toolbar.floating.vertical.container.width (Size)
+$vertical-container-width: 64px;
+/// md.comp.toolbar.floating.container.elevation (Elevation)
+$container-elevation: md-sys-elevation.$level3;
+/// md.comp.toolbar.floating.container.shape (Shape)
+$container-shape: md-sys-shape.$corner-full;
+/// md.comp.toolbar.floating.standard.container.color (Color)
+///
+/// @deprecated Deprecating this token here and putting it into the color token set
+$standard-container-color: md-sys-color.$surface-container;
+/// md.comp.toolbar.floating.vibrant.button.selected.container.color (Color)
+///
+/// @deprecated Deprecating this token here and putting it into the color token set
+$vibrant-button-selected-container-color: md-sys-color.$surface-container;
+/// md.comp.toolbar.floating.vibrant.button.selected.icon.color (Color)
+///
+/// @deprecated Deprecating this token here and putting it into the color token set
+$vibrant-button-selected-icon-color: md-sys-color.$on-surface;
+/// md.comp.toolbar.floating.vibrant.button.selected.text.color (Color)
+///
+/// @deprecated Deprecating this token here and putting it into the color token set
+$vibrant-button-selected-text-color: md-sys-color.$on-surface;
+/// md.comp.toolbar.floating.vibrant.button.unselected.icon.color (Color)
+///
+/// @deprecated Deprecating this token here and putting it into the color token set
+$vibrant-button-unselected-icon-color: md-sys-color.$on-primary-container;
+/// md.comp.toolbar.floating.vibrant.button.unselected.text.color (Color)
+///
+/// @deprecated Deprecating this token here and putting it into the color token set
+$vibrant-button-unselected-text-color: md-sys-color.$on-primary-container;
+/// md.comp.toolbar.floating.vibrant.container.color (Color)
+///
+/// @deprecated Deprecating this token here and putting it into the color token set
+$vibrant-container-color: md-sys-color.$primary-container;

package/tokens/versions/latest/sass/_md-comp-toolbar-standard.scss

@@ -0,0 +1,87 @@
+//
+// 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-state';
+
+/// md.comp.toolbar.standard.disabled.icon.opacity (Disabled)
+$disabled-icon-opacity: 0.38;
+/// md.comp.toolbar.standard.disabled.label-text.opacity (Disabled)
+$disabled-label-text-opacity: 0.38;
+/// md.comp.toolbar.standard.button.container.color (Enabled)
+$button-container-color: md-sys-color.$surface-container;
+/// md.comp.toolbar.standard.container.color (Enabled)
+$container-color: md-sys-color.$surface-container;
+/// md.comp.toolbar.standard.container.shape (Enabled)
+$container-shape: md-sys-shape.$corner-full;
+/// md.comp.toolbar.standard.disabled.icon.color (Disabled)
+$disabled-icon-color: md-sys-color.$on-surface;
+/// md.comp.toolbar.standard.disabled.label-text.color (Disabled)
+$disabled-label-text-color: md-sys-color.$on-surface;
+/// md.comp.toolbar.standard.focused.icon.color (Focused)
+$focused-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.toolbar.standard.focused.label-text.color (Focused)
+$focused-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.toolbar.standard.focused.state-layer.color (Focused)
+$focused-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.toolbar.standard.focused.state-layer.opacity (Focused)
+$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.toolbar.standard.hovered.icon.color (Hovered)
+$hovered-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.toolbar.standard.hovered.label-text.color (Hovered)
+$hovered-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.toolbar.standard.hovered.state-layer.color (Hovered)
+$hovered-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.toolbar.standard.hovered.state-layer.opacity (Hovered)
+$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.toolbar.standard.icon.color (Enabled)
+$icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.toolbar.standard.label-text.color (Enabled)
+$label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.toolbar.standard.pressed.icon.color (Pressed)
+$pressed-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.toolbar.standard.pressed.label-text.color (Pressed)
+$pressed-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.toolbar.standard.pressed.state-layer.color (Pressed)
+$pressed-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.toolbar.standard.pressed.state-layer.opacity (Pressed)
+$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.toolbar.standard.selected.button.container.color (Enabled)
+$selected-button-container-color: md-sys-color.$secondary-container;
+/// md.comp.toolbar.standard.selected.focused.icon.color (Focused)
+$selected-focused-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.toolbar.standard.selected.focused.label-text.color (Focused)
+$selected-focused-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.toolbar.standard.selected.focused.state-layer.color (Focused)
+$selected-focused-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.toolbar.standard.selected.hovered.icon.color (Hovered)
+$selected-hovered-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.toolbar.standard.selected.hovered.label-text.color (Hovered)
+$selected-hovered-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.toolbar.standard.selected.hovered.state-layer.color (Hovered)
+$selected-hovered-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.toolbar.standard.selected.icon.color (Enabled)
+$selected-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.toolbar.standard.selected.label-text.color (Enabled)
+$selected-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.toolbar.standard.selected.pressed.icon.color (Pressed)
+$selected-pressed-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.toolbar.standard.selected.pressed.label-text.color (Pressed)
+$selected-pressed-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.toolbar.standard.selected.pressed.state-layer.color (Pressed)
+$selected-pressed-state-layer-color: md-sys-color.$on-secondary-container;

package/tokens/versions/latest/sass/_md-comp-toolbar-vibrant.scss

@@ -0,0 +1,87 @@
+//
+// 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-state';
+
+/// md.comp.toolbar.vibrant.disabled.icon.opacity (Disabled)
+$disabled-icon-opacity: 0.38;
+/// md.comp.toolbar.vibrant.disabled.label-text.opacity (Disabled)
+$disabled-label-text-opacity: 0.38;
+/// md.comp.toolbar.vibrant.button.container.color (Enabled)
+$button-container-color: md-sys-color.$primary-container;
+/// md.comp.toolbar.vibrant.container.color (Enabled)
+$container-color: md-sys-color.$primary-container;
+/// md.comp.toolbar.vibrant.container.shape (Enabled)
+$container-shape: md-sys-shape.$corner-full;
+/// md.comp.toolbar.vibrant.disabled.icon.color (Disabled)
+$disabled-icon-color: md-sys-color.$on-surface;
+/// md.comp.toolbar.vibrant.disabled.label-text.color (Disabled)
+$disabled-label-text-color: md-sys-color.$on-surface;
+/// md.comp.toolbar.vibrant.focused.icon.color (Focused)
+$focused-icon-color: md-sys-color.$on-primary-container;
+/// md.comp.toolbar.vibrant.focused.label-text.color (Focused)
+$focused-label-text-color: md-sys-color.$on-primary-container;
+/// md.comp.toolbar.vibrant.focused.state-layer.color (Focused)
+$focused-state-layer-color: md-sys-color.$on-primary-container;
+/// md.comp.toolbar.vibrant.focused.state-layer.opacity (Focused)
+$focused-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.toolbar.vibrant.hovered.icon.color (Hovered)
+$hovered-icon-color: md-sys-color.$on-primary-container;
+/// md.comp.toolbar.vibrant.hovered.label-text.color (Hovered)
+$hovered-label-text-color: md-sys-color.$on-primary-container;
+/// md.comp.toolbar.vibrant.hovered.state-layer.color (Hovered)
+$hovered-state-layer-color: md-sys-color.$on-primary-container;
+/// md.comp.toolbar.vibrant.hovered.state-layer.opacity (Hovered)
+$hovered-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.toolbar.vibrant.icon.color (Enabled)
+$icon-color: md-sys-color.$on-primary-container;
+/// md.comp.toolbar.vibrant.label-text.color (Enabled)
+$label-text-color: md-sys-color.$on-primary-container;
+/// md.comp.toolbar.vibrant.pressed.icon.color (Pressed)
+$pressed-icon-color: md-sys-color.$on-primary-container;
+/// md.comp.toolbar.vibrant.pressed.label-text.color (Pressed)
+$pressed-label-text-color: md-sys-color.$on-primary-container;
+/// md.comp.toolbar.vibrant.pressed.state-layer.color (Pressed)
+$pressed-state-layer-color: md-sys-color.$on-primary-container;
+/// md.comp.toolbar.vibrant.pressed.state-layer.opacity (Pressed)
+$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.toolbar.vibrant.selected.button.container.color (Enabled)
+$selected-button-container-color: md-sys-color.$surface-container;
+/// md.comp.toolbar.vibrant.selected.focused.icon.color (Focused)
+$selected-focused-icon-color: md-sys-color.$on-surface;
+/// md.comp.toolbar.vibrant.selected.focused.label-text.color (Focused)
+$selected-focused-label-text-color: md-sys-color.$on-surface;
+/// md.comp.toolbar.vibrant.selected.focused.state-layer.color (Focused)
+$selected-focused-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.toolbar.vibrant.selected.hovered.icon.color (Hovered)
+$selected-hovered-icon-color: md-sys-color.$on-surface;
+/// md.comp.toolbar.vibrant.selected.hovered.label-text.color (Hovered)
+$selected-hovered-label-text-color: md-sys-color.$on-surface;
+/// md.comp.toolbar.vibrant.selected.hovered.state-layer.color (Hovered)
+$selected-hovered-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.toolbar.vibrant.selected.icon.color (Enabled)
+$selected-icon-color: md-sys-color.$on-surface;
+/// md.comp.toolbar.vibrant.selected.label-text.color (Enabled)
+$selected-label-text-color: md-sys-color.$on-surface;
+/// md.comp.toolbar.vibrant.selected.pressed.icon.color (Pressed)
+$selected-pressed-icon-color: md-sys-color.$on-surface;
+/// md.comp.toolbar.vibrant.selected.pressed.label-text.color (Pressed)
+$selected-pressed-label-text-color: md-sys-color.$on-surface;
+/// md.comp.toolbar.vibrant.selected.pressed.state-layer.color (Pressed)
+$selected-pressed-state-layer-color: md-sys-color.$on-surface;