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

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

@@ -0,0 +1,80 @@
+//
+// 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-typescale';
+
+/// md.comp.date-input.modal.container.height (Enabled / Container)
+$container-height: 512px;
+/// md.comp.date-input.modal.container.width (Enabled / Container)
+$container-width: 328px;
+/// md.comp.date-input.modal.header.container.height (Enabled / Container)
+$header-container-height: 120px;
+/// md.comp.date-input.modal.header.container.width (Enabled / Container)
+$header-container-width: 328px;
+/// md.comp.date-input.modal.container.color (Enabled / Container)
+$container-color: md-sys-color.$surface-container-high;
+/// md.comp.date-input.modal.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level3;
+/// md.comp.date-input.modal.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-extra-large;
+/// md.comp.date-input.modal.container.surface-tint-layer.color (Enabled / Container)
+///
+/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.
+$container-surface-tint-layer-color: md-sys-color.$surface-tint;
+/// md.comp.date-input.modal.header.headline.color (Enabled / Headline)
+$header-headline-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-input.modal.header.headline.font (Enabled / Headline)
+$header-headline-font: md-sys-typescale.$headline-large-font;
+/// md.comp.date-input.modal.header.headline.line-height (Enabled / Headline)
+$header-headline-line-height: md-sys-typescale.$headline-large-line-height;
+/// md.comp.date-input.modal.header.headline.size (Enabled / Headline)
+$header-headline-size: md-sys-typescale.$headline-large-size;
+/// md.comp.date-input.modal.header.headline.tracking (Enabled / Headline)
+$header-headline-tracking: md-sys-typescale.$headline-large-tracking;
+/// md.comp.date-input.modal.header.headline.weight (Enabled / Headline)
+$header-headline-weight: md-sys-typescale.$headline-large-weight;
+/// md.comp.date-input.modal.header.supporting-text.color (Enabled / Supporting text)
+$header-supporting-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-input.modal.header.supporting-text.font (Enabled / Supporting text)
+$header-supporting-text-font: md-sys-typescale.$label-large-font;
+/// md.comp.date-input.modal.header.supporting-text.line-height (Enabled / Supporting text)
+$header-supporting-text-line-height: md-sys-typescale.$label-large-line-height;
+/// md.comp.date-input.modal.header.supporting-text.size (Enabled / Supporting text)
+$header-supporting-text-size: md-sys-typescale.$label-large-size;
+/// md.comp.date-input.modal.header.supporting-text.tracking (Enabled / Supporting text)
+$header-supporting-text-tracking: md-sys-typescale.$label-large-tracking;
+/// md.comp.date-input.modal.header.supporting-text.weight (Enabled / Supporting text)
+$header-supporting-text-weight: md-sys-typescale.$label-large-weight;
+/// md.comp.date-input.modal.header.headline.type (Enabled / Headline)
+@mixin header-headline-type {
+  font-family: $header-headline-font;
+  font-size: $header-headline-size;
+  font-weight: $header-headline-weight;
+  letter-spacing: $header-headline-tracking;
+  line-height: $header-headline-line-height;
+}
+/// md.comp.date-input.modal.header.supporting-text.type (Enabled / Supporting text)
+@mixin header-supporting-text-type {
+  font-family: $header-supporting-text-font;
+  font-size: $header-supporting-text-size;
+  font-weight: $header-supporting-text-weight;
+  letter-spacing: $header-supporting-text-tracking;
+  line-height: $header-supporting-text-line-height;
+}

package/tokens/versions/v30_0/sass/_md-comp-date-picker-docked.scss

@@ -0,0 +1,241 @@
+//
+// 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-typescale';
+
+/// md.comp.date-picker.docked.container.height (Enabled / Container)
+$container-height: 456px;
+/// md.comp.date-picker.docked.container.width (Enabled / Container)
+$container-width: 360px;
+/// md.comp.date-picker.docked.date.container.height (Enabled / Container)
+$date-container-height: 48px;
+/// md.comp.date-picker.docked.date.container.width (Enabled / Container)
+$date-container-width: 48px;
+/// md.comp.date-picker.docked.date.state-layer.height (Enabled / State layer)
+$date-state-layer-height: 40px;
+/// md.comp.date-picker.docked.date.state-layer.width (Enabled / State layer)
+$date-state-layer-width: 40px;
+/// md.comp.date-picker.docked.date.today.container.outline.width (Enabled / Container)
+$date-today-container-outline-width: 1px;
+/// md.comp.date-picker.docked.date.unselected.outside-month.label-text.opacity (Enabled / Label text)
+$date-unselected-outside-month-label-text-opacity: 0.38;
+/// md.comp.date-picker.docked.header.height (Enabled / Header)
+$header-height: 64px;
+/// md.comp.date-picker.docked.menu-button.container.height (Enabled / Container)
+$menu-button-container-height: 40px;
+/// md.comp.date-picker.docked.menu-button.disabled.icon.opacity (Disabled / Icon)
+$menu-button-disabled-icon-opacity: 0.38;
+/// md.comp.date-picker.docked.menu-button.disabled.label-text.opacity (Disabled / Label text)
+$menu-button-disabled-label-text-opacity: 0.38;
+/// md.comp.date-picker.docked.menu-button.icon.size (Enabled / Icon)
+$menu-button-icon-size: 18px;
+/// md.comp.date-picker.docked.menu.list-item.container.height (Enabled / Container)
+$menu-list-item-container-height: 48px;
+/// md.comp.date-picker.docked.menu.list-item.selected.leading-icon.size (Enabled / Leading icon)
+$menu-list-item-selected-leading-icon-size: 24px;
+/// md.comp.date-picker.docked.container.color (Enabled / Container)
+$container-color: md-sys-color.$surface-container-high;
+/// md.comp.date-picker.docked.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level3;
+/// md.comp.date-picker.docked.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-large;
+/// md.comp.date-picker.docked.container.surface-tint-layer.color (Enabled / Container)
+///
+/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.
+$container-surface-tint-layer-color: md-sys-color.$surface-tint;
+/// md.comp.date-picker.docked.date.container.shape (Enabled / Container)
+$date-container-shape: md-sys-shape.$corner-full;
+/// md.comp.date-picker.docked.date.focus.state-layer.opacity (Focused / State layer)
+$date-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.date-picker.docked.date.hover.state-layer.opacity (Hovered / State layer)
+$date-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.date-picker.docked.date.label-text.font (Enabled / Label text)
+$date-label-text-font: md-sys-typescale.$body-large-font;
+/// md.comp.date-picker.docked.date.label-text.line-height (Enabled / Label text)
+$date-label-text-line-height: md-sys-typescale.$body-large-line-height;
+/// md.comp.date-picker.docked.date.label-text.size (Enabled / Label text)
+$date-label-text-size: md-sys-typescale.$body-large-size;
+/// md.comp.date-picker.docked.date.label-text.tracking (Enabled / Label text)
+$date-label-text-tracking: md-sys-typescale.$body-large-tracking;
+/// md.comp.date-picker.docked.date.label-text.weight (Enabled / Label text)
+$date-label-text-weight: md-sys-typescale.$body-large-weight;
+/// md.comp.date-picker.docked.date.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$date-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.date-picker.docked.date.selected.container.color (Enabled / Container)
+$date-selected-container-color: md-sys-color.$primary;
+/// md.comp.date-picker.docked.date.selected.focus.state-layer.color (Focused / State layer)
+$date-selected-focus-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.date-picker.docked.date.selected.hover.state-layer.color (Hovered / State layer)
+$date-selected-hover-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.date-picker.docked.date.selected.label-text.color (Enabled / Label text)
+$date-selected-label-text-color: md-sys-color.$on-primary;
+/// md.comp.date-picker.docked.date.selected.pressed.state-layer.color (Pressed (ripple) / State layer)
+$date-selected-pressed-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.date-picker.docked.date.state-layer.shape (Enabled / State layer)
+$date-state-layer-shape: md-sys-shape.$corner-full;
+/// md.comp.date-picker.docked.date.today.container.outline.color (Enabled / Container)
+$date-today-container-outline-color: md-sys-color.$primary;
+/// md.comp.date-picker.docked.date.today.focus.state-layer.color (Focused / State layer)
+$date-today-focus-state-layer-color: md-sys-color.$primary;
+/// md.comp.date-picker.docked.date.today.hover.state-layer.color (Hovered / State layer)
+$date-today-hover-state-layer-color: md-sys-color.$primary;
+/// md.comp.date-picker.docked.date.today.label-text.color (Enabled / Label text)
+$date-today-label-text-color: md-sys-color.$primary;
+/// md.comp.date-picker.docked.date.today.pressed.state-layer.color (Pressed (ripple) / State layer)
+$date-today-pressed-state-layer-color: md-sys-color.$primary;
+/// md.comp.date-picker.docked.date.unselected.focus.state-layer.color (Focused / State layer)
+$date-unselected-focus-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.docked.date.unselected.hover.state-layer.color (Hovered / State layer)
+$date-unselected-hover-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.docked.date.unselected.label-text.color (Enabled / Label text)
+$date-unselected-label-text-color: md-sys-color.$on-surface;
+/// md.comp.date-picker.docked.date.unselected.outside-month.label-text.color (Enabled / Label text)
+$date-unselected-outside-month-label-text-color: md-sys-color.$on-surface;
+/// md.comp.date-picker.docked.date.unselected.pressed.state-layer.color (Pressed (ripple) / State layer)
+$date-unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.docked.menu-button.container.shape (Enabled / Container)
+$menu-button-container-shape: md-sys-shape.$corner-full;
+/// md.comp.date-picker.docked.menu-button.disabled.icon.color (Disabled / Icon)
+$menu-button-disabled-icon-color: md-sys-color.$on-surface;
+/// md.comp.date-picker.docked.menu-button.disabled.label-text.color (Disabled / Label text)
+$menu-button-disabled-label-text-color: md-sys-color.$on-surface;
+/// md.comp.date-picker.docked.menu-button.focus.icon.color (Focused / Icon)
+$menu-button-focus-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.docked.menu-button.focus.label-text.color (Focused / Label text)
+$menu-button-focus-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.docked.menu-button.focus.state-layer.color (Focused / State layer)
+$menu-button-focus-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.docked.menu-button.focus.state-layer.opacity (Focused / State layer)
+$menu-button-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.date-picker.docked.menu-button.hover.icon.color (Hovered / Icon)
+$menu-button-hover-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.docked.menu-button.hover.label-text.color (Hovered / Label text)
+$menu-button-hover-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.docked.menu-button.hover.state-layer.color (Hovered / State layer)
+$menu-button-hover-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.docked.menu-button.hover.state-layer.opacity (Hovered / State layer)
+$menu-button-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.date-picker.docked.menu-button.icon.color (Enabled / Icon)
+$menu-button-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.docked.menu-button.label-text.color (Enabled / Label text)
+$menu-button-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.docked.menu-button.label-text.font (Enabled / Label text)
+$menu-button-label-text-font: md-sys-typescale.$label-large-font;
+/// md.comp.date-picker.docked.menu-button.label-text.line-height (Enabled / Label text)
+$menu-button-label-text-line-height: md-sys-typescale.$label-large-line-height;
+/// md.comp.date-picker.docked.menu-button.label-text.size (Enabled / Label text)
+$menu-button-label-text-size: md-sys-typescale.$label-large-size;
+/// md.comp.date-picker.docked.menu-button.label-text.tracking (Enabled / Label text)
+$menu-button-label-text-tracking: md-sys-typescale.$label-large-tracking;
+/// md.comp.date-picker.docked.menu-button.label-text.weight (Enabled / Label text)
+$menu-button-label-text-weight: md-sys-typescale.$label-large-weight;
+/// md.comp.date-picker.docked.menu-button.pressed.icon.color (Pressed (ripple) / Icon)
+$menu-button-pressed-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.docked.menu-button.pressed.label-text.color (Pressed (ripple) / Label text)
+$menu-button-pressed-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.docked.menu-button.pressed.state-layer.color (Pressed (ripple) / State layer)
+$menu-button-pressed-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.docked.menu-button.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$menu-button-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.date-picker.docked.menu.list-item.focus.label-text.color (Focused / Label text)
+$menu-list-item-focus-label-text-color: md-sys-color.$on-surface;
+/// md.comp.date-picker.docked.menu.list-item.focus.state-layer.color (Focused / State layer)
+$menu-list-item-focus-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.date-picker.docked.menu.list-item.focus.state-layer.opacity (Focused / State layer)
+$menu-list-item-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.date-picker.docked.menu.list-item.hover.label-text.color (Hovered / Label text)
+$menu-list-item-hover-label-text-color: md-sys-color.$on-surface;
+/// md.comp.date-picker.docked.menu.list-item.hover.state-layer.color (Hovered / State layer)
+$menu-list-item-hover-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.date-picker.docked.menu.list-item.hover.state-layer.opacity (Hovered / State layer)
+$menu-list-item-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.date-picker.docked.menu.list-item.label-text.color (Enabled / Label text)
+$menu-list-item-label-text-color: md-sys-color.$on-surface;
+/// md.comp.date-picker.docked.menu.list-item.label-text.font (Enabled / Label text)
+$menu-list-item-label-text-font: md-sys-typescale.$body-large-font;
+/// md.comp.date-picker.docked.menu.list-item.label-text.line-height (Enabled / Label text)
+$menu-list-item-label-text-line-height: md-sys-typescale.$body-large-line-height;
+/// md.comp.date-picker.docked.menu.list-item.label-text.size (Enabled / Label text)
+$menu-list-item-label-text-size: md-sys-typescale.$body-large-size;
+/// md.comp.date-picker.docked.menu.list-item.label-text.tracking (Enabled / Label text)
+$menu-list-item-label-text-tracking: md-sys-typescale.$body-large-tracking;
+/// md.comp.date-picker.docked.menu.list-item.label-text.weight (Enabled / Label text)
+$menu-list-item-label-text-weight: md-sys-typescale.$body-large-weight;
+/// md.comp.date-picker.docked.menu.list-item.pressed.label-text.color (Pressed (ripple) / Label text)
+$menu-list-item-pressed-label-text-color: md-sys-color.$on-surface;
+/// md.comp.date-picker.docked.menu.list-item.pressed.state-layer.color (Pressed (ripple) / State layer)
+$menu-list-item-pressed-state-layer-color: md-sys-color.$on-surface;
+/// md.comp.date-picker.docked.menu.list-item.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$menu-list-item-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.date-picker.docked.menu.list-item.selected.container.color (Enabled / Container)
+$menu-list-item-selected-container-color: md-sys-color.$surface-variant;
+/// md.comp.date-picker.docked.menu.list-item.selected.focus.leading-icon.color (Focused / Leading icon)
+$menu-list-item-selected-focus-leading-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.docked.menu.list-item.selected.hover.leading-icon.color (Hovered / Leading icon)
+$menu-list-item-selected-hover-leading-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.docked.menu.list-item.selected.leading-icon.color (Enabled / Leading icon)
+$menu-list-item-selected-leading-icon-color: md-sys-color.$on-surface;
+/// md.comp.date-picker.docked.menu.list-item.selected.pressed.leading-icon.color (Pressed (ripple) / Leading icon)
+$menu-list-item-selected-pressed-leading-icon-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.docked.weekdays.label-text.color (Enabled / Label text)
+$weekdays-label-text-color: md-sys-color.$on-surface;
+/// md.comp.date-picker.docked.weekdays.label-text.font (Enabled / Label text)
+$weekdays-label-text-font: md-sys-typescale.$body-large-font;
+/// md.comp.date-picker.docked.weekdays.label-text.line-height (Enabled / Label text)
+$weekdays-label-text-line-height: md-sys-typescale.$body-large-line-height;
+/// md.comp.date-picker.docked.weekdays.label-text.size (Enabled / Label text)
+$weekdays-label-text-size: md-sys-typescale.$body-large-size;
+/// md.comp.date-picker.docked.weekdays.label-text.tracking (Enabled / Label text)
+$weekdays-label-text-tracking: md-sys-typescale.$body-large-tracking;
+/// md.comp.date-picker.docked.weekdays.label-text.weight (Enabled / Label text)
+$weekdays-label-text-weight: md-sys-typescale.$body-large-weight;
+/// md.comp.date-picker.docked.date.label-text.type (Enabled / Label text)
+@mixin date-label-text-type {
+  font-family: $date-label-text-font;
+  font-size: $date-label-text-size;
+  font-weight: $date-label-text-weight;
+  letter-spacing: $date-label-text-tracking;
+  line-height: $date-label-text-line-height;
+}
+/// md.comp.date-picker.docked.menu-button.label-text.type (Enabled / Label text)
+@mixin menu-button-label-text-type {
+  font-family: $menu-button-label-text-font;
+  font-size: $menu-button-label-text-size;
+  font-weight: $menu-button-label-text-weight;
+  letter-spacing: $menu-button-label-text-tracking;
+  line-height: $menu-button-label-text-line-height;
+}
+/// md.comp.date-picker.docked.menu.list-item.label-text.type (Enabled / Label text)
+@mixin menu-list-item-label-text-type {
+  font-family: $menu-list-item-label-text-font;
+  font-size: $menu-list-item-label-text-size;
+  font-weight: $menu-list-item-label-text-weight;
+  letter-spacing: $menu-list-item-label-text-tracking;
+  line-height: $menu-list-item-label-text-line-height;
+}
+/// md.comp.date-picker.docked.weekdays.label-text.type (Enabled / Label text)
+@mixin weekdays-label-text-type {
+  font-family: $weekdays-label-text-font;
+  font-size: $weekdays-label-text-size;
+  font-weight: $weekdays-label-text-weight;
+  letter-spacing: $weekdays-label-text-tracking;
+  line-height: $weekdays-label-text-line-height;
+}

package/tokens/versions/v30_0/sass/_md-comp-date-picker-modal.scss

@@ -0,0 +1,295 @@
+//
+// 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-typescale';
+
+/// md.comp.date-picker.modal.container.height (Enabled / Container)
+$container-height: 524px;
+/// md.comp.date-picker.modal.container.width (Enabled / Container)
+$container-width: 360px;
+/// md.comp.date-picker.modal.date.container.height (Enabled / Container)
+$date-container-height: 40px;
+/// md.comp.date-picker.modal.date.container.width (Enabled / Container)
+$date-container-width: 40px;
+/// md.comp.date-picker.modal.date.state-layer.height (Enabled / State layer)
+$date-state-layer-height: 40px;
+/// md.comp.date-picker.modal.date.state-layer.width (Enabled / State layer)
+$date-state-layer-width: 40px;
+/// md.comp.date-picker.modal.date.today.container.outline.width (Enabled / Container)
+$date-today-container-outline-width: 1px;
+/// md.comp.date-picker.modal.header.container.height (Enabled / Container)
+$header-container-height: 120px;
+/// md.comp.date-picker.modal.header.container.width (Enabled / Container)
+$header-container-width: 360px;
+/// md.comp.date-picker.modal.range-selection.active-indicator.container.height (Enabled / Container)
+$range-selection-active-indicator-container-height: 40px;
+/// md.comp.date-picker.modal.range-selection.header.container.height (Enabled / Container)
+$range-selection-header-container-height: 128px;
+/// md.comp.date-picker.modal.year-selection.year.container.height (Enabled / Container)
+$year-selection-year-container-height: 36px;
+/// md.comp.date-picker.modal.year-selection.year.container.width (Enabled / Container)
+$year-selection-year-container-width: 72px;
+/// md.comp.date-picker.modal.year-selection.year.state-layer.height (Enabled / State layer)
+$year-selection-year-state-layer-height: 36px;
+/// md.comp.date-picker.modal.year-selection.year.state-layer.width (Enabled / State layer)
+$year-selection-year-state-layer-width: 72px;
+/// md.comp.date-picker.modal.container.color (Enabled / Container)
+$container-color: md-sys-color.$surface-container-high;
+/// md.comp.date-picker.modal.container.elevation (Enabled / Container)
+$container-elevation: md-sys-elevation.$level3;
+/// md.comp.date-picker.modal.container.shape (Enabled / Container)
+$container-shape: md-sys-shape.$corner-extra-large;
+/// md.comp.date-picker.modal.container.surface-tint-layer.color (Enabled / Container)
+///
+/// @deprecated Deprecated as part of the update from opacity based surfaces to tonal surfaces. Surfaces no longer use surface-tint layers for tinting, please use the desired surface role directly as the container color.
+$container-surface-tint-layer-color: md-sys-color.$surface-tint;
+/// md.comp.date-picker.modal.date.container.shape (Enabled / Container)
+$date-container-shape: md-sys-shape.$corner-full;
+/// md.comp.date-picker.modal.date.focus.state-layer.opacity (Focused / State layer)
+$date-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.date-picker.modal.date.hover.state-layer.opacity (Hovered / State layer)
+$date-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.date-picker.modal.date.label-text.font (Enabled / Label text)
+$date-label-text-font: md-sys-typescale.$body-large-font;
+/// md.comp.date-picker.modal.date.label-text.line-height (Enabled / Label text)
+$date-label-text-line-height: md-sys-typescale.$body-large-line-height;
+/// md.comp.date-picker.modal.date.label-text.size (Enabled / Label text)
+$date-label-text-size: md-sys-typescale.$body-large-size;
+/// md.comp.date-picker.modal.date.label-text.tracking (Enabled / Label text)
+$date-label-text-tracking: md-sys-typescale.$body-large-tracking;
+/// md.comp.date-picker.modal.date.label-text.weight (Enabled / Label text)
+$date-label-text-weight: md-sys-typescale.$body-large-weight;
+/// md.comp.date-picker.modal.date.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$date-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.date-picker.modal.date.selected.container.color (Enabled / Container)
+$date-selected-container-color: md-sys-color.$primary;
+/// md.comp.date-picker.modal.date.selected.focus.state-layer.color (Focused / State layer)
+$date-selected-focus-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.date-picker.modal.date.selected.hover.state-layer.color (Hovered / State layer)
+$date-selected-hover-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.date-picker.modal.date.selected.label-text.color (Enabled / Label text)
+$date-selected-label-text-color: md-sys-color.$on-primary;
+/// md.comp.date-picker.modal.date.selected.pressed.state-layer.color (Pressed (ripple) / State layer)
+$date-selected-pressed-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.date-picker.modal.date.state-layer.shape (Enabled / State layer)
+$date-state-layer-shape: md-sys-shape.$corner-full;
+/// md.comp.date-picker.modal.date.today.container.outline.color (Enabled / Container)
+$date-today-container-outline-color: md-sys-color.$primary;
+/// md.comp.date-picker.modal.date.today.focus.state-layer.color (Focused / State layer)
+$date-today-focus-state-layer-color: md-sys-color.$primary;
+/// md.comp.date-picker.modal.date.today.hover.state-layer.color (Hovered / State layer)
+$date-today-hover-state-layer-color: md-sys-color.$primary;
+/// md.comp.date-picker.modal.date.today.label-text.color (Enabled / Label text)
+$date-today-label-text-color: md-sys-color.$primary;
+/// md.comp.date-picker.modal.date.today.pressed.state-layer.color (Pressed (ripple) / State layer)
+$date-today-pressed-state-layer-color: md-sys-color.$primary;
+/// md.comp.date-picker.modal.date.unselected.focus.state-layer.color (Focused / State layer)
+$date-unselected-focus-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.modal.date.unselected.hover.state-layer.color (Hovered / State layer)
+$date-unselected-hover-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.modal.date.unselected.label-text.color (Enabled / Label text)
+$date-unselected-label-text-color: md-sys-color.$on-surface;
+/// md.comp.date-picker.modal.date.unselected.pressed.state-layer.color (Pressed (ripple) / State layer)
+$date-unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.modal.header.headline.color (Enabled / Headline)
+$header-headline-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.modal.header.headline.font (Enabled / Headline)
+$header-headline-font: md-sys-typescale.$headline-large-font;
+/// md.comp.date-picker.modal.header.headline.line-height (Enabled / Headline)
+$header-headline-line-height: md-sys-typescale.$headline-large-line-height;
+/// md.comp.date-picker.modal.header.headline.size (Enabled / Headline)
+$header-headline-size: md-sys-typescale.$headline-large-size;
+/// md.comp.date-picker.modal.header.headline.tracking (Enabled / Headline)
+$header-headline-tracking: md-sys-typescale.$headline-large-tracking;
+/// md.comp.date-picker.modal.header.headline.weight (Enabled / Headline)
+$header-headline-weight: md-sys-typescale.$headline-large-weight;
+/// md.comp.date-picker.modal.header.supporting-text.color (Enabled / Header)
+$header-supporting-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.modal.header.supporting-text.font (Enabled / Header)
+$header-supporting-text-font: md-sys-typescale.$label-large-font;
+/// md.comp.date-picker.modal.header.supporting-text.line-height (Enabled / Header)
+$header-supporting-text-line-height: md-sys-typescale.$label-large-line-height;
+/// md.comp.date-picker.modal.header.supporting-text.size (Enabled / Header)
+$header-supporting-text-size: md-sys-typescale.$label-large-size;
+/// md.comp.date-picker.modal.header.supporting-text.tracking (Enabled / Header)
+$header-supporting-text-tracking: md-sys-typescale.$label-large-tracking;
+/// md.comp.date-picker.modal.header.supporting-text.weight (Enabled / Header)
+$header-supporting-text-weight: md-sys-typescale.$label-large-weight;
+/// md.comp.date-picker.modal.range-selection.active-indicator.container.color (Enabled / Container)
+$range-selection-active-indicator-container-color: md-sys-color.$secondary-container;
+/// md.comp.date-picker.modal.range-selection.active-indicator.container.shape (Enabled / Container)
+$range-selection-active-indicator-container-shape: md-sys-shape.$corner-full;
+/// md.comp.date-picker.modal.range-selection.container.elevation (Enabled / Container)
+$range-selection-container-elevation: md-sys-elevation.$level0;
+/// md.comp.date-picker.modal.range-selection.container.shape (Enabled / Container)
+$range-selection-container-shape: md-sys-shape.$corner-none;
+/// md.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.color (Focused / State layer)
+$range-selection-date-in-range-focus-state-layer-color: md-sys-color.$on-primary-container;
+/// md.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.opacity (Focused / State layer)
+$range-selection-date-in-range-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.date-picker.modal.range-selection.date.in-range.focus.state-layer.opcaity (Focused / State layer)
+///
+/// @deprecated Fixed spelling (was ".opcaity" should be ".opacity")
+$range-selection-date-in-range-focus-state-layer-opcaity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.color (Hovered / State layer)
+$range-selection-date-in-range-hover-state-layer-color: md-sys-color.$on-primary-container;
+/// md.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.opacity (Hovered / State layer)
+$range-selection-date-in-range-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.date-picker.modal.range-selection.date.in-range.hover.state-layer.opcaity (Hovered / State layer)
+///
+/// @deprecated Fixed spelling (was ".opcaity" should be ".opacity")
+$range-selection-date-in-range-hover-state-layer-opcaity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.date-picker.modal.range-selection.date.in-range.label-text.color (Enabled / Label text)
+$range-selection-date-in-range-label-text-color: md-sys-color.$on-secondary-container;
+/// md.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.color (Pressed (ripple) / State layer)
+$range-selection-date-in-range-pressed-state-layer-color: md-sys-color.$on-primary-container;
+/// md.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$range-selection-date-in-range-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.date-picker.modal.range-selection.date.in-range.pressed.state-layer.opcaity (Pressed (ripple) / State layer)
+///
+/// @deprecated Fixed spelling (was ".opcaity" should be ".opacity")
+$range-selection-date-in-range-pressed-state-layer-opcaity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.date-picker.modal.range-selection.header.headline.font (Enabled / Headline)
+$range-selection-header-headline-font: md-sys-typescale.$title-large-font;
+/// md.comp.date-picker.modal.range-selection.header.headline.line-height (Enabled / Headline)
+$range-selection-header-headline-line-height: md-sys-typescale.$title-large-line-height;
+/// md.comp.date-picker.modal.range-selection.header.headline.size (Enabled / Headline)
+$range-selection-header-headline-size: md-sys-typescale.$title-large-size;
+/// md.comp.date-picker.modal.range-selection.header.headline.tracking (Enabled / Headline)
+$range-selection-header-headline-tracking: md-sys-typescale.$title-large-tracking;
+/// md.comp.date-picker.modal.range-selection.header.headline.weight (Enabled / Headline)
+$range-selection-header-headline-weight: md-sys-typescale.$title-large-weight;
+/// md.comp.date-picker.modal.range-selection.month.subhead.color (Enabled / Subhead)
+$range-selection-month-subhead-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.modal.range-selection.month.subhead.font (Enabled / Subhead)
+$range-selection-month-subhead-font: md-sys-typescale.$title-small-font;
+/// md.comp.date-picker.modal.range-selection.month.subhead.line-height (Enabled / Subhead)
+$range-selection-month-subhead-line-height: md-sys-typescale.$title-small-line-height;
+/// md.comp.date-picker.modal.range-selection.month.subhead.size (Enabled / Subhead)
+$range-selection-month-subhead-size: md-sys-typescale.$title-small-size;
+/// md.comp.date-picker.modal.range-selection.month.subhead.tracking (Enabled / Subhead)
+$range-selection-month-subhead-tracking: md-sys-typescale.$title-small-tracking;
+/// md.comp.date-picker.modal.range-selection.month.subhead.weight (Enabled / Subhead)
+$range-selection-month-subhead-weight: md-sys-typescale.$title-small-weight;
+/// md.comp.date-picker.modal.weekdays.label-text.color (Enabled / Label text)
+$weekdays-label-text-color: md-sys-color.$on-surface;
+/// md.comp.date-picker.modal.weekdays.label-text.font (Enabled / Label text)
+$weekdays-label-text-font: md-sys-typescale.$body-large-font;
+/// md.comp.date-picker.modal.weekdays.label-text.line-height (Enabled / Label text)
+$weekdays-label-text-line-height: md-sys-typescale.$body-large-line-height;
+/// md.comp.date-picker.modal.weekdays.label-text.size (Enabled / Label text)
+$weekdays-label-text-size: md-sys-typescale.$body-large-size;
+/// md.comp.date-picker.modal.weekdays.label-text.tracking (Enabled / Label text)
+$weekdays-label-text-tracking: md-sys-typescale.$body-large-tracking;
+/// md.comp.date-picker.modal.weekdays.label-text.weight (Enabled / Label text)
+$weekdays-label-text-weight: md-sys-typescale.$body-large-weight;
+/// md.comp.date-picker.modal.year-selection.year.focus.state-layer.opacity (Focused / State layer)
+$year-selection-year-focus-state-layer-opacity: md-sys-state.$focus-state-layer-opacity;
+/// md.comp.date-picker.modal.year-selection.year.hover.state-layer.opacity (Hovered / State layer)
+$year-selection-year-hover-state-layer-opacity: md-sys-state.$hover-state-layer-opacity;
+/// md.comp.date-picker.modal.year-selection.year.label-text.font (Enabled / Label text)
+$year-selection-year-label-text-font: md-sys-typescale.$body-large-font;
+/// md.comp.date-picker.modal.year-selection.year.label-text.line-height (Enabled / Label text)
+$year-selection-year-label-text-line-height: md-sys-typescale.$body-large-line-height;
+/// md.comp.date-picker.modal.year-selection.year.label-text.size (Enabled / Label text)
+$year-selection-year-label-text-size: md-sys-typescale.$body-large-size;
+/// md.comp.date-picker.modal.year-selection.year.label-text.tracking (Enabled / Label text)
+$year-selection-year-label-text-tracking: md-sys-typescale.$body-large-tracking;
+/// md.comp.date-picker.modal.year-selection.year.label-text.weight (Enabled / Label text)
+$year-selection-year-label-text-weight: md-sys-typescale.$body-large-weight;
+/// md.comp.date-picker.modal.year-selection.year.pressed.state-layer.opacity (Pressed (ripple) / State layer)
+$year-selection-year-pressed-state-layer-opacity: md-sys-state.$pressed-state-layer-opacity;
+/// md.comp.date-picker.modal.year-selection.year.selected.container.color (Enabled / Container)
+$year-selection-year-selected-container-color: md-sys-color.$primary;
+/// md.comp.date-picker.modal.year-selection.year.selected.focus.state-layer.color (Focused / State layer)
+$year-selection-year-selected-focus-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.date-picker.modal.year-selection.year.selected.hover.state-layer.color (Hovered / State layer)
+$year-selection-year-selected-hover-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.date-picker.modal.year-selection.year.selected.label-text.color (Enabled / Label text)
+$year-selection-year-selected-label-text-color: md-sys-color.$on-primary;
+/// md.comp.date-picker.modal.year-selection.year.selected.pressed.state-layer.color (Pressed (ripple) / State layer)
+$year-selection-year-selected-pressed-state-layer-color: md-sys-color.$on-primary;
+/// md.comp.date-picker.modal.year-selection.year.state-layer.shape (Enabled / State layer)
+$year-selection-year-state-layer-shape: md-sys-shape.$corner-full;
+/// md.comp.date-picker.modal.year-selection.year.unselected.focus.state-layer.color (Focused / State layer)
+$year-selection-year-unselected-focus-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.modal.year-selection.year.unselected.hover.state-layer.color (Hovered / State layer)
+$year-selection-year-unselected-hover-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.modal.year-selection.year.unselected.label-text.color (Enabled / Label text)
+$year-selection-year-unselected-label-text-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.modal.year-selection.year.unselected.pressed.state-layer.color (Pressed (ripple) / State layer)
+$year-selection-year-unselected-pressed-state-layer-color: md-sys-color.$on-surface-variant;
+/// md.comp.date-picker.modal.date.label-text.type (Enabled / Label text)
+@mixin date-label-text-type {
+  font-family: $date-label-text-font;
+  font-size: $date-label-text-size;
+  font-weight: $date-label-text-weight;
+  letter-spacing: $date-label-text-tracking;
+  line-height: $date-label-text-line-height;
+}
+/// md.comp.date-picker.modal.header.headline.type (Enabled / Headline)
+@mixin header-headline-type {
+  font-family: $header-headline-font;
+  font-size: $header-headline-size;
+  font-weight: $header-headline-weight;
+  letter-spacing: $header-headline-tracking;
+  line-height: $header-headline-line-height;
+}
+/// md.comp.date-picker.modal.header.supporting-text.type (Enabled / Supporting text)
+@mixin header-supporting-text-type {
+  font-family: $header-supporting-text-font;
+  font-size: $header-supporting-text-size;
+  font-weight: $header-supporting-text-weight;
+  letter-spacing: $header-supporting-text-tracking;
+  line-height: $header-supporting-text-line-height;
+}
+/// md.comp.date-picker.modal.range-selection.header.headline.type (Enabled / Headline)
+@mixin range-selection-header-headline-type {
+  font-family: $range-selection-header-headline-font;
+  font-size: $range-selection-header-headline-size;
+  font-weight: $range-selection-header-headline-weight;
+  letter-spacing: $range-selection-header-headline-tracking;
+  line-height: $range-selection-header-headline-line-height;
+}
+/// md.comp.date-picker.modal.range-selection.month.subhead.type (Enabled / Subhead)
+@mixin range-selection-month-subhead-type {
+  font-family: $range-selection-month-subhead-font;
+  font-size: $range-selection-month-subhead-size;
+  font-weight: $range-selection-month-subhead-weight;
+  letter-spacing: $range-selection-month-subhead-tracking;
+  line-height: $range-selection-month-subhead-line-height;
+}
+/// md.comp.date-picker.modal.weekdays.label-text.type (Enabled / Label text)
+@mixin weekdays-label-text-type {
+  font-family: $weekdays-label-text-font;
+  font-size: $weekdays-label-text-size;
+  font-weight: $weekdays-label-text-weight;
+  letter-spacing: $weekdays-label-text-tracking;
+  line-height: $weekdays-label-text-line-height;
+}
+/// md.comp.date-picker.modal.year-selection.year.label-text.type (Enabled / Label text)
+@mixin year-selection-year-label-text-type {
+  font-family: $year-selection-year-label-text-font;
+  font-size: $year-selection-year-label-text-size;
+  font-weight: $year-selection-year-label-text-weight;
+  letter-spacing: $year-selection-year-label-text-tracking;
+  line-height: $year-selection-year-label-text-line-height;
+}