@material/web 2.4.1 → 2.4.2-nightly.067f9cd.0

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

@@ -0,0 +1,408 @@
+//
+// 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.list.divider.bottom-space (Spacing)
+$divider-bottom-space: 0px;
+/// md.comp.list.divider.height (Color / Enabled)
+///
+/// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.thickness as a replacement
+$divider-height: 1px;
+/// md.comp.list.divider.leading-space (Spacing)
+$divider-leading-space: 16px;
+/// md.comp.list.divider.top-space (Spacing)
+$divider-top-space: 0px;
+/// md.comp.list.divider.trailing-space (Spacing)
+$divider-trailing-space: 16px;
+/// md.comp.list.list-item.between-space (Spacing)
+$list-item-between-space: 12px;
+/// md.comp.list.list-item.bottom-space (Spacing)
+$list-item-bottom-space: 10px;
+/// md.comp.list.list-item.container.height (Color / Enabled)
+///
+/// @deprecated Removing single height value in favor of distinct height values for 1, 2, or 3 line list items.
+$list-item-container-height: 56px;
+/// md.comp.list.list-item.disabled.label-text.opacity (Color / Disabled)
+$list-item-disabled-label-text-opacity: 0.38;
+/// md.comp.list.list-item.disabled.leading-icon.opacity (Color / Disabled)
+$list-item-disabled-leading-icon-opacity: 0.38;
+/// md.comp.list.list-item.disabled.overline.opacity (Color / Disabled)
+$list-item-disabled-overline-opacity: 0.38;
+/// md.comp.list.list-item.disabled.state-layer.opacity (Color / Disabled)
+$list-item-disabled-state-layer-opacity: 0.1;
+/// md.comp.list.list-item.disabled.supporting-text.opacity (Color / Disabled)
+$list-item-disabled-supporting-text-opacity: 0.38;
+/// md.comp.list.list-item.disabled.trailing-icon.opacity (Color / Disabled)
+$list-item-disabled-trailing-icon-opacity: 0.38;
+/// md.comp.list.list-item.large.leading-video.height (Size and typography)
+$list-item-large-leading-video-height: 64px;
+/// md.comp.list.list-item.large.leading-video.width (Size and typography)
+$list-item-large-leading-video-width: 114px;
+/// md.comp.list.list-item.leading-avatar.size (Size and typography)
+$list-item-leading-avatar-size: 40px;
+/// md.comp.list.list-item.leading-icon.expressive.size (Size and typography)
+$list-item-leading-icon-expressive-size: 20px;
+/// md.comp.list.list-item.leading-icon.size (Size and typography)
+$list-item-leading-icon-size: 24px;
+/// md.comp.list.list-item.leading-image.height (Size and typography)
+$list-item-leading-image-height: 56px;
+/// md.comp.list.list-item.leading-image.width (Size and typography)
+$list-item-leading-image-width: 56px;
+/// md.comp.list.list-item.leading-space (Spacing)
+$list-item-leading-space: 16px;
+/// md.comp.list.list-item.leading-video.width (Size and typography)
+$list-item-leading-video-width: 100px;
+/// md.comp.list.list-item.one-line.container.height (Size and typography)
+$list-item-one-line-container-height: 56px;
+/// md.comp.list.list-item.selected.disabled.container.opacity (Color / Disabled - Selected)
+$list-item-selected-disabled-container-opacity: 0.38;
+/// md.comp.list.list-item.selected.disabled.label-text.opacity (Color / Disabled - Selected)
+$list-item-selected-disabled-label-text-opacity: 0.38;
+/// md.comp.list.list-item.selected.disabled.leading-icon.opacity (Color / Disabled - Selected)
+$list-item-selected-disabled-leading-icon-opacity: 0.38;
+/// md.comp.list.list-item.selected.disabled.overline.opacity (Color / Disabled - Selected)
+$list-item-selected-disabled-overline-opacity: 0.38;
+/// md.comp.list.list-item.selected.disabled.state-layer.opacity (Color / Disabled - Selected)
+$list-item-selected-disabled-state-layer-opacity: 0.1;
+/// md.comp.list.list-item.selected.disabled.supporting-text.opacity (Color / Disabled - Selected)
+$list-item-selected-disabled-supporting-text-opacity: 0.38;
+/// md.comp.list.list-item.selected.disabled.trailing-icon.opacity (Color / Disabled - Selected)
+$list-item-selected-disabled-trailing-icon-opacity: 0.38;
+/// md.comp.list.list-item.selected.disabled.trailing-supporting-text.opacity (Color / Disabled - Selected)
+$list-item-selected-disabled-trailing-supporting-text-opacity: 0.38;
+/// md.comp.list.list-item.small.leading-video.height (Size and typography)
+$list-item-small-leading-video-height: 56px;
+/// md.comp.list.list-item.small.leading-video.width (Size and typography)
+$list-item-small-leading-video-width: 100px;
+/// md.comp.list.list-item.three-line.container.height (Size and typography)
+$list-item-three-line-container-height: 88px;
+/// md.comp.list.list-item.top-space (Spacing)
+$list-item-top-space: 10px;
+/// md.comp.list.list-item.trailing-icon.expressive.size (Size and typography)
+$list-item-trailing-icon-expressive-size: 20px;
+/// md.comp.list.list-item.trailing-icon.size (Size and typography)
+$list-item-trailing-icon-size: 24px;
+/// md.comp.list.list-item.trailing-space (Spacing)
+$list-item-trailing-space: 16px;
+/// md.comp.list.list-item.two-line.container.height (Size and typography)
+$list-item-two-line-container-height: 72px;
+/// md.comp.list.md.comp.list.list-item.one-line.container.height (Color / Enabled)
+///
+/// @deprecated Typo in token name. Please use `md.comp.list.list-item.one-line.container.height `.
+$md-comp-list-list-item-one-line-container-height: 56px;
+/// md.comp.list.md.comp.list.list-item.three-line.container.height (Color / Enabled)
+///
+/// @deprecated Typo in token name. Please use `md.comp.list.list-item.three-line.container.height`.
+$md-comp-list-list-item-three-line-container-height: 88px;
+/// md.comp.list.md.comp.list.list-item.two-line.container.height (Color / Enabled)
+///
+/// @deprecated Typo in token name. Please use `md.comp.list.md.comp.list.list-item.two-line.container.height`.
+$md-comp-list-list-item-two-line-container-height: 72px;
+/// md.comp.list.segmented.gap (Spacing)
+$segmented-gap: 2px;
+/// md.comp.list.container.shape (Shape)
+$container-shape: md-sys-shape.$corner-large;
+/// md.comp.list.divider.color (Color / Enabled)
+///
+/// @deprecated Depcrecating all divider tokens nested across components. Please use the standalone divider component token md.comp.divider.color as a replacement
+$divider-color: md-sys-color.$outline;
+/// md.comp.list.focus.indicator.color (Color / Focused / Focus indicator)
+$focus-indicator-color: md-sys-color.$secondary;
+/// md.comp.list.focus.indicator.outline.offset (Color / Focused / Focus indicator)
+$focus-indicator-outline-offset: md-sys-state-focus-indicator.$inner-offset;
+/// md.comp.list.focus.indicator.thickness (Color / Focused / Focus indicator)
+$focus-indicator-thickness: md-sys-state-focus-indicator.$thickness;
+/// md.comp.list.list-item.container.color (Color / Enabled)
+$list-item-container-color: md-sys-color.$surface;
+/// md.comp.list.list-item.container.elevation (Color / Enabled)
+$list-item-container-elevation: md-sys-elevation.$level0;
+/// md.comp.list.list-item.container.expressive.shape (Shape)
+$list-item-container-expressive-shape: md-sys-shape.$corner-extra-small;
+/// md.comp.list.list-item.container.shape (Shape)
+$list-item-container-shape: md-sys-shape.$corner-none;
+/// md.comp.list.list-item.disabled.container.expressive.shape (Shape)
+$list-item-disabled-container-expressive-shape: md-sys-shape.$corner-extra-small;
+/// md.comp.list.list-item.disabled.label-text.color (Color / Disabled)
+$list-item-disabled-label-text-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.disabled.leading-icon.color (Color / Disabled)
+$list-item-disabled-leading-icon-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.disabled.overline.color (Color / Disabled)
+$list-item-disabled-overline-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.disabled.state-layer.color (Color / Disabled)
+$list-item-disabled-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.disabled.supporting-text.color (Color / Disabled)
+$list-item-disabled-supporting-text-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.disabled.trailing-icon.color (Color / Disabled)
+$list-item-disabled-trailing-icon-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.dragged.container.elevation (Color / Dragged (baseline only))
+$list-item-dragged-container-elevation: md-sys-elevation.$level4;
+/// md.comp.list.list-item.dragged.container.expressive.shape (Shape)
+$list-item-dragged-container-expressive-shape: md-sys-shape.$corner-large;
+/// md.comp.list.list-item.dragged.label-text.color (Color / Dragged (baseline only))
+$list-item-dragged-label-text-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.dragged.leading-icon.icon.color (Color / Dragged (baseline only))
+$list-item-dragged-leading-icon-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.list.list-item.dragged.state-layer.color (Color / Dragged (baseline only))
+$list-item-dragged-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.dragged.state-layer.opacity (Color / Dragged (baseline only))
+$list-item-dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;
+/// md.comp.list.list-item.dragged.trailing-icon.icon.color (Color / Dragged (baseline only))
+$list-item-dragged-trailing-icon-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.list.list-item.focus.label-text.color (Color / Focused)
+$list-item-focus-label-text-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.focus.leading-icon.icon.color (Color / Focused)
+$list-item-focus-leading-icon-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.list.list-item.focus.state-layer.color (Color / Focused)
+$list-item-focus-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.focus.state-layer.opacity (Color / Focused)
+$list-item-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.list.list-item.focus.trailing-icon.icon.color (Color / Focused)
+$list-item-focus-trailing-icon-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.list.list-item.focused.container.expressive.shape (Shape)
+$list-item-focused-container-expressive-shape: md-sys-shape.$corner-large;
+/// md.comp.list.list-item.hover.label-text.color (Color / Hovered)
+$list-item-hover-label-text-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.hover.leading-icon.icon.color (Color / Hovered)
+$list-item-hover-leading-icon-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.list.list-item.hover.state-layer.color (Color / Hovered)
+$list-item-hover-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.hover.state-layer.opacity (Color / Hovered)
+$list-item-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.list.list-item.hover.trailing-icon.icon.color (Color / Hovered)
+$list-item-hover-trailing-icon-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.list.list-item.hovered.container.expressive.shape (Shape)
+$list-item-hovered-container-expressive-shape: md-sys-shape.$corner-medium;
+/// md.comp.list.list-item.label-text.color (Color / Enabled)
+$list-item-label-text-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.label-text.font (Size and typography)
+$list-item-label-text-font: md-sys-typescale.$body-large-font;
+/// md.comp.list.list-item.label-text.line-height (Size and typography)
+$list-item-label-text-line-height: md-sys-typescale.$body-large-line-height;
+/// md.comp.list.list-item.label-text.size (Size and typography)
+$list-item-label-text-size: md-sys-typescale.$body-large-size;
+/// md.comp.list.list-item.label-text.tracking (Size and typography)
+$list-item-label-text-tracking: md-sys-typescale.$body-large-tracking;
+/// md.comp.list.list-item.label-text.weight (Size and typography)
+$list-item-label-text-weight: md-sys-typescale.$body-large-weight;
+/// md.comp.list.list-item.leading-avatar-label.color (Color / Enabled)
+$list-item-leading-avatar-label-color: md-sys-color.$on-primary-container;
+/// md.comp.list.list-item.leading-avatar-label.font (Size and typography)
+$list-item-leading-avatar-label-font: md-sys-typescale.$title-medium-font;
+/// md.comp.list.list-item.leading-avatar-label.line-height (Size and typography)
+$list-item-leading-avatar-label-line-height: md-sys-typescale.$title-medium-line-height;
+/// md.comp.list.list-item.leading-avatar-label.size (Size and typography)
+$list-item-leading-avatar-label-size: md-sys-typescale.$title-medium-size;
+/// md.comp.list.list-item.leading-avatar-label.tracking (Size and typography)
+$list-item-leading-avatar-label-tracking: md-sys-typescale.$title-medium-tracking;
+/// md.comp.list.list-item.leading-avatar-label.weight (Size and typography)
+$list-item-leading-avatar-label-weight: md-sys-typescale.$title-medium-weight;
+/// md.comp.list.list-item.leading-avatar.color (Color / Enabled)
+$list-item-leading-avatar-color: md-sys-color.$primary-container;
+/// md.comp.list.list-item.leading-avatar.shape (Shape)
+$list-item-leading-avatar-shape: md-sys-shape.$corner-full;
+/// md.comp.list.list-item.leading-icon.color (Color / Enabled)
+$list-item-leading-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.list.list-item.leading-image.expressive.shape (Shape)
+$list-item-leading-image-expressive-shape: md-sys-shape.$corner-small;
+/// md.comp.list.list-item.leading-image.shape (Shape)
+$list-item-leading-image-shape: md-sys-shape.$corner-none;
+/// md.comp.list.list-item.leading-video.shape (Shape)
+$list-item-leading-video-shape: md-sys-shape.$corner-small;
+/// md.comp.list.list-item.overline.color (Color / Enabled)
+$list-item-overline-color: md-sys-color.$on-surface-variant;
+/// md.comp.list.list-item.overline.font (Size and typography)
+$list-item-overline-font: md-sys-typescale.$label-small-font;
+/// md.comp.list.list-item.overline.line-height (Size and typography)
+$list-item-overline-line-height: md-sys-typescale.$label-small-line-height;
+/// md.comp.list.list-item.overline.size (Size and typography)
+$list-item-overline-size: md-sys-typescale.$label-small-size;
+/// md.comp.list.list-item.overline.tracking (Size and typography)
+$list-item-overline-tracking: md-sys-typescale.$label-small-tracking;
+/// md.comp.list.list-item.overline.weight (Size and typography)
+$list-item-overline-weight: md-sys-typescale.$label-small-weight;
+/// md.comp.list.list-item.pressed.container.expressive.shape (Shape)
+$list-item-pressed-container-expressive-shape: md-sys-shape.$corner-large;
+/// md.comp.list.list-item.pressed.label-text.color (Color / Pressed (ripple))
+$list-item-pressed-label-text-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.pressed.leading-icon.icon.color (Color / Pressed (ripple))
+$list-item-pressed-leading-icon-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.list.list-item.pressed.state-layer.color (Color / Pressed (ripple))
+$list-item-pressed-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.pressed.state-layer.opacity (Color / Pressed (ripple))
+$list-item-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.list.list-item.pressed.trailing-icon.icon.color (Color / Pressed (ripple))
+$list-item-pressed-trailing-icon-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.list.list-item.segmented.container.color (Color / Enabled)
+$list-item-segmented-container-color: md-sys-color.$surface;
+/// md.comp.list.list-item.selected.container.color (Color / Enabled - Selected)
+$list-item-selected-container-color: md-sys-color.$secondary-container;
+/// md.comp.list.list-item.selected.container.expressive.shape (Shape)
+$list-item-selected-container-expressive-shape: md-sys-shape.$corner-large;
+/// md.comp.list.list-item.selected.container.shape (Shape)
+$list-item-selected-container-shape: md-sys-shape.$corner-large;
+/// md.comp.list.list-item.selected.disabled.container.color (Color / Disabled - Selected)
+$list-item-selected-disabled-container-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.disabled.container.expressive.shape (Shape)
+$list-item-selected-disabled-container-expressive-shape: md-sys-shape.$corner-large;
+/// md.comp.list.list-item.selected.disabled.label-text.color (Color / Disabled - Selected)
+$list-item-selected-disabled-label-text-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.disabled.leading-icon.color (Color / Disabled - Selected)
+$list-item-selected-disabled-leading-icon-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.disabled.overline.color (Color / Disabled - Selected)
+$list-item-selected-disabled-overline-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.disabled.state-layer.color (Color / Disabled - Selected)
+$list-item-selected-disabled-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.disabled.supporting-text.color (Color / Disabled - Selected)
+$list-item-selected-disabled-supporting-text-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.disabled.trailing-icon.color (Color / Disabled - Selected)
+$list-item-selected-disabled-trailing-icon-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.disabled.trailing-supporting-text.color (Color / Disabled - Selected)
+$list-item-selected-disabled-trailing-supporting-text-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.dragged.container.expressive.shape (Shape)
+$list-item-selected-dragged-container-expressive-shape: md-sys-shape.$corner-large;
+/// md.comp.list.list-item.selected.dragged.label-text.color (Color / Dragged (baseline only))
+$list-item-selected-dragged-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.list.list-item.selected.dragged.leading-icon.color (Color / Dragged (baseline only))
+$list-item-selected-dragged-leading-icon-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.dragged.state-layer.color (Color / Dragged (baseline only))
+$list-item-selected-dragged-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.dragged.state-layer.opacity (Color / Dragged (baseline only))
+$list-item-selected-dragged-state-layer-opacity: md-sys-state.$dragged-state-layer-opacity;
+/// md.comp.list.list-item.selected.dragged.trailing-icon.color (Color / Dragged (baseline only))
+$list-item-selected-dragged-trailing-icon-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.focus.label-text.color (Color / Focused - Selected)
+$list-item-selected-focus-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.list.list-item.selected.focus.leading-icon.color (Color / Focused - Selected)
+$list-item-selected-focus-leading-icon-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.focus.state-layer.color (Color / Focused - Selected)
+$list-item-selected-focus-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.focus.state-layer.opacity (Color / Focused - Selected)
+$list-item-selected-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.list.list-item.selected.focus.trailing-icon.color (Color / Focused - Selected)
+$list-item-selected-focus-trailing-icon-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.focused.container.expressive.shape (Shape)
+$list-item-selected-focused-container-expressive-shape: md-sys-shape.$corner-large;
+/// md.comp.list.list-item.selected.hover.label-text.color (Color / Hovered - Selected)
+$list-item-selected-hover-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.list.list-item.selected.hover.leading-icon.color (Color / Hovered - Selected)
+$list-item-selected-hover-leading-icon-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.hover.state-layer.color (Color / Hovered - Selected)
+$list-item-selected-hover-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.hover.state-layer.opacity (Color / Hovered - Selected)
+$list-item-selected-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.list.list-item.selected.hover.trailing-icon.color (Color / Hovered - Selected)
+$list-item-selected-hover-trailing-icon-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.hovered.container.expressive.shape (Shape)
+$list-item-selected-hovered-container-expressive-shape: md-sys-shape.$corner-large;
+/// md.comp.list.list-item.selected.label-text.color (Color / Enabled - Selected)
+$list-item-selected-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.list.list-item.selected.leading-icon.color (Color / Enabled - Selected)
+$list-item-selected-leading-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.list.list-item.selected.overline.color (Color / Enabled - Selected)
+$list-item-selected-overline-color: md-sys-color.$on-secondary-container;
+/// md.comp.list.list-item.selected.pressed.container.expressive.shape (Shape)
+$list-item-selected-pressed-container-expressive-shape: md-sys-shape.$corner-large;
+/// md.comp.list.list-item.selected.pressed.label-text.color (Color / Pressed - Selected)
+$list-item-selected-pressed-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.list.list-item.selected.pressed.leading-icon.color (Color / Pressed - Selected)
+$list-item-selected-pressed-leading-icon-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.pressed.state-layer.color (Color / Pressed - Selected)
+$list-item-selected-pressed-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.pressed.state-layer.opacity (Color / Pressed - Selected)
+$list-item-selected-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.list.list-item.selected.pressed.trailing-icon.color (Color / Pressed - Selected)
+$list-item-selected-pressed-trailing-icon-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.selected.supporting-text.color (Color / Enabled - Selected)
+$list-item-selected-supporting-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.list.list-item.selected.trailing-icon.color (Color / Enabled - Selected)
+$list-item-selected-trailing-icon-color: md-sys-color.$on-secondary-container;
+/// md.comp.list.list-item.selected.trailing-supporting-text.color (Color / Enabled - Selected)
+$list-item-selected-trailing-supporting-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.list.list-item.supporting-text.color (Color / Enabled)
+$list-item-supporting-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.list.list-item.supporting-text.font (Size and typography)
+$list-item-supporting-text-font: md-sys-typescale.$body-medium-font;
+/// md.comp.list.list-item.supporting-text.line-height (Size and typography)
+$list-item-supporting-text-line-height: md-sys-typescale.$body-medium-line-height;
+/// md.comp.list.list-item.supporting-text.size (Size and typography)
+$list-item-supporting-text-size: md-sys-typescale.$body-medium-size;
+/// md.comp.list.list-item.supporting-text.tracking (Size and typography)
+$list-item-supporting-text-tracking: md-sys-typescale.$body-medium-tracking;
+/// md.comp.list.list-item.supporting-text.weight (Size and typography)
+$list-item-supporting-text-weight: md-sys-typescale.$body-medium-weight;
+/// md.comp.list.list-item.trailing-icon.color (Color / Enabled)
+$list-item-trailing-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.list.list-item.trailing-supporting-text.color (Color / Enabled)
+$list-item-trailing-supporting-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.list.list-item.trailing-supporting-text.font (Size and typography)
+$list-item-trailing-supporting-text-font: md-sys-typescale.$label-small-font;
+/// md.comp.list.list-item.trailing-supporting-text.line-height (Size and typography)
+$list-item-trailing-supporting-text-line-height: md-sys-typescale.$label-small-line-height;
+/// md.comp.list.list-item.trailing-supporting-text.size (Size and typography)
+$list-item-trailing-supporting-text-size: md-sys-typescale.$label-small-size;
+/// md.comp.list.list-item.trailing-supporting-text.tracking (Size and typography)
+$list-item-trailing-supporting-text-tracking: md-sys-typescale.$label-small-tracking;
+/// md.comp.list.list-item.trailing-supporting-text.weight (Size and typography)
+$list-item-trailing-supporting-text-weight: md-sys-typescale.$label-small-weight;
+/// md.comp.list.list-item.unselected.trailing-icon.color (Color / Enabled)
+$list-item-unselected-trailing-icon-color: md-sys-color.$on-surface;
+/// md.comp.list.list-item.label-text.type (Size and typography)
+@mixin list-item-label-text-type {
+  font-family: $list-item-label-text-font;
+  font-size: $list-item-label-text-size;
+  font-weight: $list-item-label-text-weight;
+  letter-spacing: $list-item-label-text-tracking;
+  line-height: $list-item-label-text-line-height;
+}
+/// md.comp.list.list-item.leading-avatar-label.type (Size and typography)
+@mixin list-item-leading-avatar-label-type {
+  font-family: $list-item-leading-avatar-label-font;
+  font-size: $list-item-leading-avatar-label-size;
+  font-weight: $list-item-leading-avatar-label-weight;
+  letter-spacing: $list-item-leading-avatar-label-tracking;
+  line-height: $list-item-leading-avatar-label-line-height;
+}
+/// md.comp.list.list-item.overline.type (Size and typography)
+@mixin list-item-overline-type {
+  font-family: $list-item-overline-font;
+  font-size: $list-item-overline-size;
+  font-weight: $list-item-overline-weight;
+  letter-spacing: $list-item-overline-tracking;
+  line-height: $list-item-overline-line-height;
+}
+/// md.comp.list.list-item.supporting-text.type (Size and typography)
+@mixin list-item-supporting-text-type {
+  font-family: $list-item-supporting-text-font;
+  font-size: $list-item-supporting-text-size;
+  font-weight: $list-item-supporting-text-weight;
+  letter-spacing: $list-item-supporting-text-tracking;
+  line-height: $list-item-supporting-text-line-height;
+}
+/// md.comp.list.list-item.trailing-supporting-text.type (Size and typography)
+@mixin list-item-trailing-supporting-text-type {
+  font-family: $list-item-trailing-supporting-text-font;
+  font-size: $list-item-trailing-supporting-text-size;
+  font-weight: $list-item-trailing-supporting-text-weight;
+  letter-spacing: $list-item-trailing-supporting-text-tracking;
+  line-height: $list-item-trailing-supporting-text-line-height;
+}

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

@@ -0,0 +1,38 @@
+//
+// 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.loading-indicator.active-indicator.size (Size)
+$active-indicator-size: 38px;
+/// md.comp.loading-indicator.container.height (Size)
+$container-height: 48px;
+/// md.comp.loading-indicator.container.width (Size)
+$container-width: 48px;
+/// md.comp.loading-indicator.active-indicator.color (Color)
+$active-indicator-color: md-sys-color.$primary;
+/// md.comp.loading-indicator.contained.active-indicator.color (Color)
+$contained-active-indicator-color: md-sys-color.$on-primary-container;
+/// md.comp.loading-indicator.contained.container.color (Color)
+$contained-container-color: md-sys-color.$primary-container;
+/// md.comp.loading-indicator.container.color (Color)
+///
+/// @deprecated Deprecated in favor of a distinct variant which uses a different color mapping with, and without container.
+$container-color: md-sys-color.$secondary-container;
+/// md.comp.loading-indicator.container.shape (Shape)
+$container-shape: md-sys-shape.$corner-full;