@material/web 2.4.1 → 2.4.2-nightly.082faad.0

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

@@ -0,0 +1,300 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-color';
+@use 'md-sys-elevation';
+@use 'md-sys-shape';
+@use 'md-sys-state';
+@use 'md-sys-state-focus-indicator';
+@use 'md-sys-typescale';
+
+/// md.comp.input-chip.container.height (Enabled / Container)
+$container-height: 32px;
+/// md.comp.input-chip.disabled.label-text.opacity (Disabled / Label text)
+$disabled-label-text-opacity: 0.38;
+/// md.comp.input-chip.disabled.outline.opacity (Disabled / Container)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status.
+$disabled-outline-opacity: 0.12;
+/// md.comp.input-chip.disabled.selected.container.opacity (Disabled / Container)
+$disabled-selected-container-opacity: 0.12;
+/// md.comp.input-chip.disabled.unselected.outline.opacity (Disabled / Container)
+$disabled-unselected-outline-opacity: 0.12;
+/// md.comp.input-chip.outline.width (Enabled / Container)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status.
+$outline-width: 1px;
+/// md.comp.input-chip.selected.outline.width (Enabled / Container)
+$selected-outline-width: 0px;
+/// md.comp.input-chip.unselected.outline.width (Enabled / Container)
+$unselected-outline-width: 1px;
+/// md.comp.input-chip.with-avatar.avatar.size (Enabled / Avatar)
+$with-avatar-avatar-size: 24px;
+/// md.comp.input-chip.with-avatar.disabled.avatar.opacity (Disabled / Avatar)
+$with-avatar-disabled-avatar-opacity: 0.38;
+/// md.comp.input-chip.with-leading-icon.disabled.leading-icon.opacity (Disabled / Leading icon)
+$with-leading-icon-disabled-leading-icon-opacity: 0.38;
+/// md.comp.input-chip.with-leading-icon.leading-icon.size (Enabled / Leading icon)
+$with-leading-icon-leading-icon-size: 18px;
+/// md.comp.input-chip.with-trailing-icon.disabled.trailing-icon.opacity (Disabled / Trailing icon)
+$with-trailing-icon-disabled-trailing-icon-opacity: 0.38;
+/// md.comp.input-chip.with-trailing-icon.trailing-icon.size (Enabled / Trailing icon)
+$with-trailing-icon-trailing-icon-size: 18px;
+/// md.comp.input-chip.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level0;
+/// md.comp.input-chip.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-small;
+/// md.comp.input-chip.disabled.label-text.color (Disabled / Label text)
+$disabled-label-text-color: md-sys-color.$on-surface;
+/// md.comp.input-chip.disabled.outline.color (Disabled / Container)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status.
+$disabled-outline-color: md-sys-color.$on-surface;
+/// md.comp.input-chip.disabled.selected.container.color (Disabled / Container)
+$disabled-selected-container-color: md-sys-color.$on-surface;
+/// md.comp.input-chip.disabled.unselected.outline.color (Disabled / Container)
+$disabled-unselected-outline-color: md-sys-color.$on-surface;
+/// md.comp.input-chip.dragged.container.elevation (Dragged / Container)
+$dragged-container-elevation: md-sys-elevation.$level4;
+/// md.comp.input-chip.dragged.label-text.color (Dragged / Label text)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status.
+$dragged-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.dragged.state-layer.color (Dragged / State layer)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status.
+$dragged-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.dragged.state-layer.opacity (Dragged / State layer)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status.
+$dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;
+/// md.comp.input-chip.focus.indicator.color (Focused / Focus indicator)
+$focus-indicator-color: md-sys-color.$secondary;
+/// md.comp.input-chip.focus.indicator.outline.offset (Focused / Focus indicator)
+$focus-indicator-outline-offset: md-sys-state-focus-indicator.$outer-offset;
+/// md.comp.input-chip.focus.indicator.thickness (Focused / Focus indicator)
+$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;
+/// md.comp.input-chip.focus.label-text.color (Focused / Label text)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status.
+$focus-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.focus.outline.color (Focused / Container)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status.
+$focus-outline-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.focus.state-layer.color (Focused / State layer)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status.
+$focus-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.focus.state-layer.opacity (Focused / State layer)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status.
+$focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.input-chip.hover.label-text.color (Hovered / Label text)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status.
+$hover-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.hover.state-layer.color (Hovered / State layer)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status.
+$hover-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.hover.state-layer.opacity (Hovered / State layer)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status.
+$hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.input-chip.label-text.color (Enabled / Label text)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status.
+$label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.label-text.font (Enabled / Label text)
+$label-text-font: md-sys-typescale.$label-large-font;
+/// md.comp.input-chip.label-text.line-height (Enabled / Label text)
+$label-text-line-height: md-sys-typescale.$label-large-line-height;
+/// md.comp.input-chip.label-text.size (Enabled / Label text)
+$label-text-size: md-sys-typescale.$label-large-size;
+/// md.comp.input-chip.label-text.tracking (Enabled / Label text)
+$label-text-tracking: md-sys-typescale.$label-large-tracking;
+/// md.comp.input-chip.label-text.weight (Enabled / Label text)
+$label-text-weight: md-sys-typescale.$label-large-weight;
+/// md.comp.input-chip.outline.color (Enabled / Container)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status.
+$outline-color: md-sys-color.$outline;
+/// md.comp.input-chip.pressed.label-text.color (Pressed (ripple) / Label text)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status.
+$pressed-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.pressed.state-layer.color (Pressed (ripple) / State layer)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status.
+$pressed-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.selected.…" or "md.comp.input-chip.unselected.…" tokens depending on component status.
+$pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.input-chip.selected.container.color (Enabled / Container)
+$selected-container-color: md-sys-color.$secondary-container;
+/// md.comp.input-chip.selected.dragged.label-text.color (Dragged / Label text)
+$selected-dragged-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.input-chip.selected.dragged.state-layer.color (Dragged / State layer)
+$selected-dragged-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.input-chip.selected.dragged.state-layer.opacity (Dragged / State layer)
+$selected-dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;
+/// md.comp.input-chip.selected.focus.label-text.color (Focused / Label text)
+$selected-focus-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.input-chip.selected.focus.state-layer.color (Focused / State layer)
+$selected-focus-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.input-chip.selected.focus.state-layer.opacity (Focused / State layer)
+$selected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.input-chip.selected.hover.label-text.color (Hovered / Label text)
+$selected-hover-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.input-chip.selected.hover.state-layer.color (Hovered / State layer)
+$selected-hover-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.input-chip.selected.hover.state-layer.opacity (Hovered / State layer)
+$selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.input-chip.selected.label-text.color (Enabled / Label text)
+$selected-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.input-chip.selected.pressed.label-text.color (Pressed (ripple) / Label text)
+$selected-pressed-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.input-chip.selected.pressed.state-layer.color (Pressed (ripple) / State layer)
+$selected-pressed-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.input-chip.selected.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.input-chip.unselected.dragged.label-text.color (Dragged / Label text)
+$unselected-dragged-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.unselected.dragged.state-layer.color (Dragged / State layer)
+$unselected-dragged-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.unselected.dragged.state-layer.opacity (Dragged / State layer)
+$unselected-dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;
+/// md.comp.input-chip.unselected.focus.label-text.color (Focused / Label text)
+$unselected-focus-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.unselected.focus.outline.color (Focused / Container)
+$unselected-focus-outline-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.unselected.focus.state-layer.color (Focused / State layer)
+$unselected-focus-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.unselected.focus.state-layer.opacity (Focused / State layer)
+$unselected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.input-chip.unselected.hover.label-text.color (Hovered / Label text)
+$unselected-hover-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.unselected.hover.state-layer.color (Hovered / State layer)
+$unselected-hover-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.unselected.hover.state-layer.opacity (Hovered / State layer)
+$unselected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.input-chip.unselected.label-text.color (Enabled / Label text)
+$unselected-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.unselected.outline.color (Enabled / Container)
+$unselected-outline-color: md-sys-color.$outline-variant;
+/// md.comp.input-chip.unselected.pressed.label-text.color (Pressed (ripple) / Label text)
+$unselected-pressed-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.unselected.pressed.state-layer.color (Pressed (ripple) / State layer)
+$unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.unselected.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$unselected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.input-chip.with-avatar.avatar.shape (Enabled / Avatar)
+$with-avatar-avatar-shape: md-sys-shape.$corner-full;
+/// md.comp.input-chip.with-leading-icon.disabled.leading-icon.color (Disabled / Leading icon)
+$with-leading-icon-disabled-leading-icon-color: md-sys-color.$on-surface;
+/// md.comp.input-chip.with-leading-icon.dragged.leading-icon.color (Dragged / Leading icon)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-leading-icon.selected.…" or "md.comp.input-chip.with-leading-icon.unselected.…" tokens depending on component status.
+$with-leading-icon-dragged-leading-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.with-leading-icon.focus.leading-icon.color (Focused / Leading icon)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-leading-icon.selected.…" or "md.comp.input-chip.with-leading-icon.unselected.…" tokens depending on component status.
+$with-leading-icon-focus-leading-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.with-leading-icon.hover.leading-icon.color (Hovered / Leading icon)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-leading-icon.selected.…" or "md.comp.input-chip.with-leading-icon.unselected.…" tokens depending on component status.
+$with-leading-icon-hover-leading-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.with-leading-icon.leading-icon.color (Enabled / Leading icon)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-leading-icon.selected.…" or "md.comp.input-chip.with-leading-icon.unselected.…" tokens depending on component status.
+$with-leading-icon-leading-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.with-leading-icon.pressed.leading-icon.color (Pressed (ripple) / Leading icon)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-leading-icon.selected.…" or "md.comp.input-chip.with-leading-icon.unselected.…" tokens depending on component status.
+$with-leading-icon-pressed-leading-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.with-leading-icon.selected.dragged.leading-icon.color (Dragged / Leading icon)
+$with-leading-icon-selected-dragged-leading-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.input-chip.with-leading-icon.selected.focus.leading-icon.color (Focused / Leading icon)
+$with-leading-icon-selected-focus-leading-icon-color: md-sys-color.$primary;
+/// md.comp.input-chip.with-leading-icon.selected.hover.leading-icon.color (Hovered / Leading icon)
+$with-leading-icon-selected-hover-leading-icon-color: md-sys-color.$primary;
+/// md.comp.input-chip.with-leading-icon.selected.leading-icon.color (Enabled / Leading icon)
+$with-leading-icon-selected-leading-icon-color: md-sys-color.$primary;
+/// md.comp.input-chip.with-leading-icon.selected.pressed.leading-icon.color (Pressed (ripple) / Leading icon)
+$with-leading-icon-selected-pressed-leading-icon-color: md-sys-color.$primary;
+/// md.comp.input-chip.with-leading-icon.unselected.dragged.leading-icon.color (Dragged / Leading icon)
+$with-leading-icon-unselected-dragged-leading-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.with-leading-icon.unselected.focus.leading-icon.color (Focused / Leading icon)
+$with-leading-icon-unselected-focus-leading-icon-color: md-sys-color.$primary;
+/// md.comp.input-chip.with-leading-icon.unselected.hover.leading-icon.color (Hovered / Leading icon)
+$with-leading-icon-unselected-hover-leading-icon-color: md-sys-color.$primary;
+/// md.comp.input-chip.with-leading-icon.unselected.leading-icon.color (Enabled / Leading icon)
+$with-leading-icon-unselected-leading-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.with-leading-icon.unselected.pressed.leading-icon.color (Pressed (ripple) / Leading icon)
+$with-leading-icon-unselected-pressed-leading-icon-color: md-sys-color.$primary;
+/// md.comp.input-chip.with-trailing-icon.disabled.trailing-icon.color (Disabled / Trailing icon)
+$with-trailing-icon-disabled-trailing-icon-color: md-sys-color.$on-surface;
+/// md.comp.input-chip.with-trailing-icon.dragged.trailing-icon.color (Dragged / Trailing icon)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-trailing-icon.selected.…" or "md.comp.input-chip.with-trailing-icon.unselected.…" tokens depending on component status.
+$with-trailing-icon-dragged-trailing-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.with-trailing-icon.focus.trailing-icon.color (Focused / Trailing icon)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-trailing-icon.selected.…" or "md.comp.input-chip.with-trailing-icon.unselected.…" tokens depending on component status.
+$with-trailing-icon-focus-trailing-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.with-trailing-icon.hover.trailing-icon.color (Hovered / Trailing icon)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-trailing-icon.selected.…" or "md.comp.input-chip.with-trailing-icon.unselected.…" tokens depending on component status.
+$with-trailing-icon-hover-trailing-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.with-trailing-icon.pressed.trailing-icon.color (Pressed (ripple) / Trailing icon)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-trailing-icon.selected.…" or "md.comp.input-chip.with-trailing-icon.unselected.…" tokens depending on component status.
+$with-trailing-icon-pressed-trailing-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.with-trailing-icon.selected.dragged.trailing-icon.color (Dragged / Trailing icon)
+$with-trailing-icon-selected-dragged-trailing-icon-color: md-sys-color.$primary;
+/// md.comp.input-chip.with-trailing-icon.selected.focus.trailing-icon.color (Focused / Trailing icon)
+$with-trailing-icon-selected-focus-trailing-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.input-chip.with-trailing-icon.selected.hover.trailing-icon.color (Hovered / Trailing icon)
+$with-trailing-icon-selected-hover-trailing-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.input-chip.with-trailing-icon.selected.pressed.trailing-icon.color (Pressed (ripple) / Trailing icon)
+$with-trailing-icon-selected-pressed-trailing-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.input-chip.with-trailing-icon.selected.trailing-icon.color (Enabled / Trailing icon)
+$with-trailing-icon-selected-trailing-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.input-chip.with-trailing-icon.trailing-icon.color (Enabled / Trailing icon)
+///
+/// @deprecated With this update we are introducing selected and unselected state tokens for input chips. Please replace these tokens with the newly added and equivalent "md.comp.input-chip.with-trailing-icon.selected.…" or "md.comp.input-chip.with-trailing-icon.unselected.…" tokens depending on component status.
+$with-trailing-icon-trailing-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.with-trailing-icon.unselected.dragged.trailing-icon.color (Dragged / Trailing icon)
+$with-trailing-icon-unselected-dragged-trailing-icon-color: md-sys-color.$primary;
+/// md.comp.input-chip.with-trailing-icon.unselected.focus.trailing-icon.color (Focused / Trailing icon)
+$with-trailing-icon-unselected-focus-trailing-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.with-trailing-icon.unselected.hover.trailing-icon.color (Hovered / Trailing icon)
+$with-trailing-icon-unselected-hover-trailing-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.with-trailing-icon.unselected.pressed.trailing-icon.color (Pressed (ripple) / Trailing icon)
+$with-trailing-icon-unselected-pressed-trailing-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.with-trailing-icon.unselected.trailing-icon.color (Enabled / Trailing icon)
+$with-trailing-icon-unselected-trailing-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.input-chip.label-text.type (Enabled / Label text)
+@mixin label-text-type {
+  font-family: $label-text-font;
+  font-size: $label-text-size;
+  font-weight: $label-text-weight;
+  letter-spacing: $label-text-tracking;
+  line-height: $label-text-line-height;
+}

package/tokens/versions/v30_0/sass/_md-comp-linear-progress-indicator.scss

@@ -0,0 +1,60 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-color';
+@use 'md-sys-shape';
+
+/// md.comp.linear-progress-indicator.active-indicator.height ([Deprecated] Enabled / [Deprecated] Active indicator)
+///
+/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead.
+$active-indicator-height: 4px;
+/// md.comp.linear-progress-indicator.track.height ([Deprecated] Enabled / [Deprecated] Track)
+///
+/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead.
+$track-height: 4px;
+/// md.comp.linear-progress-indicator.active-indicator.color ([Deprecated] Enabled / [Deprecated] Active indicator)
+///
+/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead.
+$active-indicator-color: md-sys-color.$primary;
+/// md.comp.linear-progress-indicator.active-indicator.shape ([Deprecated] Enabled / [Deprecated] Active indicator)
+///
+/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead.
+$active-indicator-shape: md-sys-shape.$corner-none;
+/// md.comp.linear-progress-indicator.four-color.active-indicator.four.color ([Deprecated] Enabled / [Deprecated] Active indicator)
+///
+/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead.
+$four-color-active-indicator-four-color: md-sys-color.$tertiary-container;
+/// md.comp.linear-progress-indicator.four-color.active-indicator.one.color ([Deprecated] Enabled / [Deprecated] Active indicator)
+///
+/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead.
+$four-color-active-indicator-one-color: md-sys-color.$primary;
+/// md.comp.linear-progress-indicator.four-color.active-indicator.three.color ([Deprecated] Enabled / [Deprecated] Active indicator)
+///
+/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead.
+$four-color-active-indicator-three-color: md-sys-color.$tertiary;
+/// md.comp.linear-progress-indicator.four-color.active-indicator.two.color ([Deprecated] Enabled / [Deprecated] Active indicator)
+///
+/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead.
+$four-color-active-indicator-two-color: md-sys-color.$primary-container;
+/// md.comp.linear-progress-indicator.track.color ([Deprecated] Enabled / [Deprecated] Track)
+///
+/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead.
+$track-color: md-sys-color.$surface-container-highest;
+/// md.comp.linear-progress-indicator.track.shape ([Deprecated] Enabled / [Deprecated] Track)
+///
+/// @deprecated Token set deprecated in favour of a merged token set which combines the circular and linear progress indicator. Please use "md.com.progress-indicator" tokens instead.
+$track-shape: md-sys-shape.$corner-none;

package/tokens/versions/v30_0/sass/_md-comp-list-expand.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: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-color';
+@use 'md-sys-shape';
+
+/// md.comp.list.expand.collapsed.list-item.trailing-icon.container.color (Color)
+$collapsed-list-item-trailing-icon-container-color: md-sys-color.$surface;
+/// md.comp.list.expand.collapsed.list-item.trailing-icon.icon.color (Color)
+$collapsed-list-item-trailing-icon-icon-color: md-sys-color.$on-surface;
+/// md.comp.list.expand.container.shape (Shape)
+$container-shape: md-sys-shape.$corner-large;
+/// md.comp.list.expand.expanded.list-item.container.color (Color)
+$expanded-list-item-container-color: md-sys-color.$surface;
+/// md.comp.list.expand.expanded.list-item.segmented.container.color (Color)
+$expanded-list-item-segmented-container-color: md-sys-color.$surface;
+/// md.comp.list.expand.expanded.list-item.trailing-icon.container.color (Color)
+$expanded-list-item-trailing-icon-container-color: md-sys-color.$surface-container;
+/// md.comp.list.expand.expanded.list-item.trailing-icon.icon.color (Color)
+$expanded-list-item-trailing-icon-icon-color: md-sys-color.$on-surface;
+/// md.comp.list.expand.trailing-icon.shape (Shape)
+$trailing-icon-shape: md-sys-shape.$corner-full;

package/tokens/versions/v30_0/sass/_md-comp-list-reorder.scss

@@ -0,0 +1,45 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-color';
+@use 'md-sys-shape';
+@use 'md-sys-state';
+
+/// md.comp.list.reorder.list-item.container.color (Color)
+$list-item-container-color: md-sys-color.$tertiary-container;
+/// md.comp.list.reorder.list-item.drop-zone.color (Color)
+$list-item-drop-zone-color: md-sys-color.$surface-container-low;
+/// md.comp.list.reorder.list-item.label-text.color (Color)
+$list-item-label-text-color: md-sys-color.$on-tertiary-container;
+/// md.comp.list.reorder.list-item.leading-icon.color (Color)
+$list-item-leading-icon-color: md-sys-color.$on-tertiary-container;
+/// md.comp.list.reorder.list-item.overline.color (Color)
+$list-item-overline-color: md-sys-color.$on-tertiary-container;
+/// md.comp.list.reorder.list-item.shadow-color (Color)
+$list-item-shadow-color: md-sys-color.$shadow;
+/// md.comp.list.reorder.list-item.shape (Shape)
+$list-item-shape: md-sys-shape.$corner-large;
+/// md.comp.list.reorder.list-item.state-layer.color (Color)
+$list-item-state-layer-color: md-sys-color.$on-tertiary-container;
+/// md.comp.list.reorder.list-item.state-layer.opacity (Color)
+$list-item-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.list.reorder.list-item.supporting-text.color (Color)
+$list-item-supporting-text-color: md-sys-color.$on-tertiary-container;
+/// md.comp.list.reorder.list-item.trailing-icon.color (Color)
+$list-item-trailing-icon-color: md-sys-color.$on-tertiary-container;
+/// md.comp.list.reorder.list-item.trailing-supporting-text.color (Color)
+$list-item-trailing-supporting-text-color: md-sys-color.$on-tertiary-container;

package/tokens/versions/v30_0/sass/_md-comp-list-reveal.scss

@@ -0,0 +1,50 @@
+//
+// Copyright 2026 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+// AUTOGENERATED. DO NOT MODIFY.
+// To modify this file, update the source template,
+// or run the compiler: go/carbon-service-code-gen-mwtc.
+// Source template: sassvars/contextualtokenset.scss.tmpl
+
+// Design system: Google Material 3
+// Version: 30.0.14
+// Configured context tags:
+//   audience: 3p
+//   font: static
+//   platform: web
+// Output format: sass_vars
+
+@use 'md-sys-color';
+@use 'md-sys-shape';
+
+/// md.comp.list.reveal.list-item.action.icon-button.container.color (Color / Swipe action)
+$list-item-action-icon-button-container-color: md-sys-color.$primary;
+/// md.comp.list.reveal.list-item.action.icon-button.focused.state-layer.color (Color / Swipe action)
+$list-item-action-icon-button-focused-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.list.reveal.list-item.action.icon-button.hovered.state-layer.color (Color / Swipe action)
+$list-item-action-icon-button-hovered-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.list.reveal.list-item.action.icon-button.icon.color (Color / Swipe action)
+$list-item-action-icon-button-icon-color: md-sys-color.$on-primary;
+/// md.comp.list.reveal.list-item.action.icon-button.pressed.state-layer.color (Color / Swipe action)
+$list-item-action-icon-button-pressed-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.list.reveal.list-item.container.color (Color)
+$list-item-container-color: md-sys-color.$surface;
+/// md.comp.list.reveal.list-item.container.shape (Shape)
+$list-item-container-shape: md-sys-shape.$corner-large;
+/// md.comp.list.reveal.list-item.icon-button.action.container.shape (Shape)
+$list-item-icon-button-action-container-shape: md-sys-shape.$corner-large;
+/// md.comp.list.reveal.list-item.icon-button.container.color (Color / Revealed icon)
+$list-item-icon-button-container-color: md-sys-color.$secondary-container;
+/// md.comp.list.reveal.list-item.icon-button.container.shape (Shape)
+$list-item-icon-button-container-shape: md-sys-shape.$corner-full;
+/// md.comp.list.reveal.list-item.icon-button.focused.state-layer.color (Color / Revealed icon)
+$list-item-icon-button-focused-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.list.reveal.list-item.icon-button.hovered.state-layer.color (Color / Revealed icon)
+$list-item-icon-button-hovered-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.list.reveal.list-item.icon-button.icon.color (Color / Revealed icon)
+$list-item-icon-button-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.list.reveal.list-item.icon-button.pressed.state-layer.color (Color / Revealed icon)
+$list-item-icon-button-pressed-state-layer-color: md-sys-color.$on-secondary-container;
+/// md.comp.list.reveal.list-item.segmented.container.shape (Shape)
+$list-item-segmented-container-shape: md-sys-shape.$corner-large;