diff --git a/tokens/v0_160/_index.scss b/tokens/v0_160/_index.scss new file mode 100644 index 0000000000..302eab9fa9 --- /dev/null +++ b/tokens/v0_160/_index.scss @@ -0,0 +1,107 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// + +@forward './md-comp-assist-chip' as md-comp-assist-chip-*; +@forward './md-comp-badge' as md-comp-badge-*; +@forward './md-comp-banner' as md-comp-banner-*; +@forward './md-comp-bottom-app-bar' as md-comp-bottom-app-bar-*; +@forward './md-comp-carousel-item' as md-comp-carousel-item-*; +@forward './md-comp-checkbox' as md-comp-checkbox-*; +@forward './md-comp-circular-progress-indicator' as + md-comp-circular-progress-indicator-*; +@forward './md-comp-data-table' as md-comp-data-table-*; +@forward './md-comp-date-input-modal' as md-comp-date-input-modal-*; +@forward './md-comp-date-picker-docked' as md-comp-date-picker-docked-*; +@forward './md-comp-date-picker-modal' as md-comp-date-picker-modal-*; +@forward './md-comp-dialog' as md-comp-dialog-*; +@forward './md-comp-divider' as md-comp-divider-*; +@forward './md-comp-elevated-button' as md-comp-elevated-button-*; +@forward './md-comp-elevated-card' as md-comp-elevated-card-*; +@forward './md-comp-extended-fab-branded' as md-comp-extended-fab-branded-*; +@forward './md-comp-extended-fab-primary' as md-comp-extended-fab-primary-*; +@forward './md-comp-extended-fab-secondary' as md-comp-extended-fab-secondary-*; +@forward './md-comp-extended-fab-surface' as md-comp-extended-fab-surface-*; +@forward './md-comp-extended-fab-tertiary' as md-comp-extended-fab-tertiary-*; +@forward './md-comp-fab-branded' as md-comp-fab-branded-*; +@forward './md-comp-fab-branded-large' as md-comp-fab-branded-large-*; +@forward './md-comp-fab-primary' as md-comp-fab-primary-*; +@forward './md-comp-fab-primary-large' as md-comp-fab-primary-large-*; +@forward './md-comp-fab-primary-small' as md-comp-fab-primary-small-*; +@forward './md-comp-fab-secondary' as md-comp-fab-secondary-*; +@forward './md-comp-fab-secondary-large' as md-comp-fab-secondary-large-*; +@forward './md-comp-fab-secondary-small' as md-comp-fab-secondary-small-*; +@forward './md-comp-fab-surface' as md-comp-fab-surface-*; +@forward './md-comp-fab-surface-large' as md-comp-fab-surface-large-*; +@forward './md-comp-fab-surface-small' as md-comp-fab-surface-small-*; +@forward './md-comp-fab-tertiary' as md-comp-fab-tertiary-*; +@forward './md-comp-fab-tertiary-large' as md-comp-fab-tertiary-large-*; +@forward './md-comp-fab-tertiary-small' as md-comp-fab-tertiary-small-*; +@forward './md-comp-filled-autocomplete' as md-comp-filled-autocomplete-*; +@forward './md-comp-filled-button' as md-comp-filled-button-*; +@forward './md-comp-filled-card' as md-comp-filled-card-*; +@forward './md-comp-filled-icon-button' as md-comp-filled-icon-button-*; +@forward './md-comp-filled-menu-button' as md-comp-filled-menu-button-*; +@forward './md-comp-filled-select' as md-comp-filled-select-*; +@forward './md-comp-filled-text-field' as md-comp-filled-text-field-*; +@forward './md-comp-filled-tonal-button' as md-comp-filled-tonal-button-*; +@forward './md-comp-filled-tonal-icon-button' as + md-comp-filled-tonal-icon-button-*; +@forward './md-comp-filter-chip' as md-comp-filter-chip-*; +@forward './md-comp-full-screen-dialog' as md-comp-full-screen-dialog-*; +@forward './md-comp-icon-button' as md-comp-icon-button-*; +@forward './md-comp-input-chip' as md-comp-input-chip-*; +@forward './md-comp-linear-progress-indicator' as + md-comp-linear-progress-indicator-*; +@forward './md-comp-list' as md-comp-list-*; +@forward './md-comp-menu' as md-comp-menu-*; +@forward './md-comp-navigation-bar' as md-comp-navigation-bar-*; +@forward './md-comp-navigation-drawer' as md-comp-navigation-drawer-*; +@forward './md-comp-navigation-rail' as md-comp-navigation-rail-*; +@forward './md-comp-outlined-autocomplete' as md-comp-outlined-autocomplete-*; +@forward './md-comp-outlined-button' as md-comp-outlined-button-*; +@forward './md-comp-outlined-card' as md-comp-outlined-card-*; +@forward './md-comp-outlined-icon-button' as md-comp-outlined-icon-button-*; +@forward './md-comp-outlined-menu-button' as md-comp-outlined-menu-button-*; +@forward './md-comp-outlined-segmented-button' as + md-comp-outlined-segmented-button-*; +@forward './md-comp-outlined-select' as md-comp-outlined-select-*; +@forward './md-comp-outlined-text-field' as md-comp-outlined-text-field-*; +@forward './md-comp-plain-tooltip' as md-comp-plain-tooltip-*; +@forward './md-comp-primary-navigation-tab' as md-comp-primary-navigation-tab-*; +@forward './md-comp-radio-button' as md-comp-radio-button-*; +@forward './md-comp-rich-tooltip' as md-comp-rich-tooltip-*; +@forward './md-comp-scrim' as md-comp-scrim-*; +@forward './md-comp-search-bar' as md-comp-search-bar-*; +@forward './md-comp-search-view' as md-comp-search-view-*; +@forward './md-comp-secondary-navigation-tab' as + md-comp-secondary-navigation-tab-*; +@forward './md-comp-sheet-bottom' as md-comp-sheet-bottom-*; +@forward './md-comp-sheet-floating' as md-comp-sheet-floating-*; +@forward './md-comp-sheet-side' as md-comp-sheet-side-*; +@forward './md-comp-slider' as md-comp-slider-*; +@forward './md-comp-snackbar' as md-comp-snackbar-*; +@forward './md-comp-standard-menu-button' as md-comp-standard-menu-button-*; +@forward './md-comp-suggestion-chip' as md-comp-suggestion-chip-*; +@forward './md-comp-switch' as md-comp-switch-*; +@forward './md-comp-text-button' as md-comp-text-button-*; +@forward './md-comp-time-input' as md-comp-time-input-*; +@forward './md-comp-time-picker' as md-comp-time-picker-*; +@forward './md-comp-top-app-bar-large' as md-comp-top-app-bar-large-*; +@forward './md-comp-top-app-bar-medium' as md-comp-top-app-bar-medium-*; +@forward './md-comp-top-app-bar-small' as md-comp-top-app-bar-small-*; +@forward './md-comp-top-app-bar-small-centered' as + md-comp-top-app-bar-small-centered-*; +@forward './md-ref-palette' as md-ref-palette-*; +@forward './md-ref-typeface' as md-ref-typeface-*; +@forward './md-sys-color' as md-sys-color-*; +@forward './md-sys-elevation' as md-sys-elevation-*; +@forward './md-sys-motion' as md-sys-motion-*; +@forward './md-sys-shape' as md-sys-shape-*; +@forward './md-sys-state' as md-sys-state-*; +@forward './md-sys-typescale' as md-sys-typescale-*; diff --git a/tokens/v0_160/_md-comp-assist-chip.scss b/tokens/v0_160/_md-comp-assist-chip.scss new file mode 100644 index 0000000000..1456386374 --- /dev/null +++ b/tokens/v0_160/_md-comp-assist-chip.scss @@ -0,0 +1,109 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-height': if($exclude-hardcoded-values, null, 32px), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), + 'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'dragged-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'dragged-state-layer-opacity': + map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'), + 'elevated-container-color': map.get($deps, 'md-sys-color', 'surface'), + 'elevated-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'elevated-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'elevated-disabled-container-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'elevated-disabled-container-elevation': + map.get($deps, 'md-sys-elevation', 'level0'), + 'elevated-disabled-container-opacity': + if($exclude-hardcoded-values, null, 0.12), + 'elevated-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'elevated-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'elevated-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'flat-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'flat-disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'flat-disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12), + 'flat-focus-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'flat-outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'flat-outline-width': if($exclude-hardcoded-values, null, 1px), + 'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.assist-chip.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'with-icon-disabled-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'with-icon-dragged-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px), + 'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary') + ); +} diff --git a/tokens/v0_160/_md-comp-badge.scss b/tokens/v0_160/_md-comp-badge.scss new file mode 100644 index 0000000000..c40c678e00 --- /dev/null +++ b/tokens/v0_160/_md-comp-badge.scss @@ -0,0 +1,58 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-shape'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'color': map.get($deps, 'md-sys-color', 'error'), + 'large-color': map.get($deps, 'md-sys-color', 'error'), + 'large-label-text-color': map.get($deps, 'md-sys-color', 'on-error'), + 'large-label-text-font': + map.get($deps, 'md-sys-typescale', 'label-small-font'), + 'large-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-small-line-height'), + 'large-label-text-size': + map.get($deps, 'md-sys-typescale', 'label-small-size'), + 'large-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-small-tracking'), + 'large-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.badge.large.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-small-weight') + map.get($deps, 'md-sys-typescale', 'label-small-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-small-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-small-font') + ), + 'large-label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-small-weight'), + 'large-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'large-size': if($exclude-hardcoded-values, null, 16px), + 'shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'size': if($exclude-hardcoded-values, null, 6px) + ); +} diff --git a/tokens/v0_160/_md-comp-banner.scss b/tokens/v0_160/_md-comp-banner.scss new file mode 100644 index 0000000000..840e21c3ef --- /dev/null +++ b/tokens/v0_160/_md-comp-banner.scss @@ -0,0 +1,75 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'desktop-with-single-line-container-height': + if($exclude-hardcoded-values, null, 52px), + 'desktop-with-three-lines-container-height': + if($exclude-hardcoded-values, null, 90px), + 'desktop-with-two-lines-with-image-container-height': + if($exclude-hardcoded-values, null, 72px), + 'mobile-with-single-line-container-height': + if($exclude-hardcoded-values, null, 54px), + 'mobile-with-two-lines-container-height': + if($exclude-hardcoded-values, null, 112px), + 'mobile-with-two-lines-with-image-container-height': + if($exclude-hardcoded-values, null, 120px), + 'supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'supporting-text-font': + map.get($deps, 'md-sys-typescale', 'body-medium-font'), + 'supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-medium-line-height'), + 'supporting-text-size': + map.get($deps, 'md-sys-typescale', 'body-medium-size'), + 'supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-medium-tracking'), + 'supporting-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.banner.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-medium-weight') + map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-medium-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-medium-font') + ), + 'supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'body-medium-weight'), + 'with-image-image-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'with-image-image-size': if($exclude-hardcoded-values, null, 40px) + ); +} diff --git a/tokens/v0_160/_md-comp-bottom-app-bar.scss b/tokens/v0_160/_md-comp-bottom-app-bar.scss new file mode 100644 index 0000000000..52bf516f49 --- /dev/null +++ b/tokens/v0_160/_md-comp-bottom-app-bar.scss @@ -0,0 +1,35 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), + 'container-height': if($exclude-hardcoded-values, null, 80px), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint') + ); +} diff --git a/tokens/v0_160/_md-comp-carousel-item.scss b/tokens/v0_160/_md-comp-carousel-item.scss new file mode 100644 index 0000000000..f728ce6ea9 --- /dev/null +++ b/tokens/v0_160/_md-comp-carousel-item.scss @@ -0,0 +1,65 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'disabled-container-color': map.get($deps, 'md-sys-color', 'surface'), + 'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.38), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'with-outline-disabled-outline-color': + map.get($deps, 'md-sys-color', 'outline'), + 'with-outline-disabled-outline-opacity': + if($exclude-hardcoded-values, null, 0.12), + 'with-outline-focus-outline-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-outline-hover-outline-color': + map.get($deps, 'md-sys-color', 'outline'), + 'with-outline-outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'with-outline-outline-width': if($exclude-hardcoded-values, null, 1), + 'with-outline-pressed-outline-color': + map.get($deps, 'md-sys-color', 'outline') + ); +} diff --git a/tokens/v0_160/_md-comp-checkbox.scss b/tokens/v0_160/_md-comp-checkbox.scss new file mode 100644 index 0000000000..cc9b46dd88 --- /dev/null +++ b/tokens/v0_160/_md-comp-checkbox.scss @@ -0,0 +1,126 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-shape': if($exclude-hardcoded-values, null, 2px), + 'container-size': if($exclude-hardcoded-values, null, 18px), + 'error-focus-state-layer-color': map.get($deps, 'md-sys-color', 'error'), + 'error-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'error-hover-state-layer-color': map.get($deps, 'md-sys-color', 'error'), + 'error-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'error-pressed-state-layer-color': map.get($deps, 'md-sys-color', 'error'), + 'error-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'icon-size': if($exclude-hardcoded-values, null, 18px), + 'selected-container-color': map.get($deps, 'md-sys-color', 'primary'), + 'selected-disabled-container-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'selected-disabled-container-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'selected-disabled-container-outline-width': + if($exclude-hardcoded-values, null, 0px), + 'selected-disabled-icon-color': map.get($deps, 'md-sys-color', 'surface'), + 'selected-error-container-color': map.get($deps, 'md-sys-color', 'error'), + 'selected-error-focus-container-color': + map.get($deps, 'md-sys-color', 'error'), + 'selected-error-focus-icon-color': + map.get($deps, 'md-sys-color', 'on-error'), + 'selected-error-hover-container-color': + map.get($deps, 'md-sys-color', 'error'), + 'selected-error-hover-icon-color': + map.get($deps, 'md-sys-color', 'on-error'), + 'selected-error-icon-color': map.get($deps, 'md-sys-color', 'on-error'), + 'selected-error-pressed-container-color': + map.get($deps, 'md-sys-color', 'error'), + 'selected-error-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-error'), + 'selected-focus-container-color': map.get($deps, 'md-sys-color', 'primary'), + 'selected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'selected-focus-outline-width': if($exclude-hardcoded-values, null, 0px), + 'selected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'selected-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'selected-hover-container-color': map.get($deps, 'md-sys-color', 'primary'), + 'selected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'selected-hover-outline-width': if($exclude-hardcoded-values, null, 0px), + 'selected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'selected-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'selected-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'selected-outline-width': if($exclude-hardcoded-values, null, 0px), + 'selected-pressed-container-color': + map.get($deps, 'md-sys-color', 'primary'), + 'selected-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'selected-pressed-outline-width': if($exclude-hardcoded-values, null, 0px), + 'selected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'selected-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'state-layer-size': if($exclude-hardcoded-values, null, 40px), + 'unselected-disabled-container-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'unselected-disabled-outline-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-disabled-outline-width': + if($exclude-hardcoded-values, null, 2px), + 'unselected-error-focus-outline-color': + map.get($deps, 'md-sys-color', 'error'), + 'unselected-error-hover-outline-color': + map.get($deps, 'md-sys-color', 'error'), + 'unselected-error-outline-color': map.get($deps, 'md-sys-color', 'error'), + 'unselected-error-pressed-outline-color': + map.get($deps, 'md-sys-color', 'error'), + 'unselected-focus-outline-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-focus-outline-width': if($exclude-hardcoded-values, null, 2px), + 'unselected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'unselected-hover-outline-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-hover-outline-width': if($exclude-hardcoded-values, null, 2px), + 'unselected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'unselected-outline-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-outline-width': if($exclude-hardcoded-values, null, 2px), + 'unselected-pressed-outline-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-pressed-outline-width': if($exclude-hardcoded-values, null, 2px), + 'unselected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'unselected-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-circular-progress-indicator.scss b/tokens/v0_160/_md-comp-circular-progress-indicator.scss new file mode 100644 index 0000000000..bd35f46d05 --- /dev/null +++ b/tokens/v0_160/_md-comp-circular-progress-indicator.scss @@ -0,0 +1,39 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// User-configured context group "Audience": "3P" +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-shape'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-shape': md-sys-shape.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'active-indicator-color': map.get($deps, 'md-sys-color', 'primary'), + 'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-none'), + 'active-indicator-width': if($exclude-hardcoded-values, null, 4px), + 'four-color-active-indicator-four-color': + map.get($deps, 'md-sys-color', 'tertiary-container'), + 'four-color-active-indicator-one-color': + map.get($deps, 'md-sys-color', 'primary'), + 'four-color-active-indicator-three-color': + map.get($deps, 'md-sys-color', 'tertiary'), + 'four-color-active-indicator-two-color': + map.get($deps, 'md-sys-color', 'primary-container'), + 'size': if($exclude-hardcoded-values, null, 48px) + ); +} diff --git a/tokens/v0_160/_md-comp-data-table.scss b/tokens/v0_160/_md-comp-data-table.scss new file mode 100644 index 0000000000..97f75377ab --- /dev/null +++ b/tokens/v0_160/_md-comp-data-table.scss @@ -0,0 +1,96 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), + 'footer-container-color': map.get($deps, 'md-sys-color', 'surface'), + 'footer-container-height': if($exclude-hardcoded-values, null, 52px), + 'footer-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'footer-supporting-text-font': + map.get($deps, 'md-sys-typescale', 'body-medium-font'), + 'footer-supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-medium-line-height'), + 'footer-supporting-text-size': + map.get($deps, 'md-sys-typescale', 'body-medium-size'), + 'footer-supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-medium-tracking'), + 'footer-supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'body-medium-weight'), + 'header-container-color': map.get($deps, 'md-sys-color', 'surface'), + 'header-container-height': if($exclude-hardcoded-values, null, 56px), + 'header-headline-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'header-headline-font': + map.get($deps, 'md-sys-typescale', 'title-small-font'), + 'header-headline-line-height': + map.get($deps, 'md-sys-typescale', 'title-small-line-height'), + 'header-headline-size': + map.get($deps, 'md-sys-typescale', 'title-small-size'), + 'header-headline-tracking': + map.get($deps, 'md-sys-typescale', 'title-small-tracking'), + 'header-headline-weight': + map.get($deps, 'md-sys-typescale', 'title-small-weight'), + 'header-hover-headline-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'header-hover-sorting-icon-button-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'outline-color': map.get($deps, 'md-sys-color', 'outline-variant'), + 'outline-width': if($exclude-hardcoded-values, null, 1px), + 'row-item-container-height': if($exclude-hardcoded-values, null, 52px), + 'row-item-disabled-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'row-item-disabled-label-text-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'row-item-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'row-item-label-text-font': + map.get($deps, 'md-sys-typescale', 'body-medium-font'), + 'row-item-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-medium-line-height'), + 'row-item-label-text-size': + map.get($deps, 'md-sys-typescale', 'body-medium-size'), + 'row-item-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-medium-tracking'), + 'row-item-label-text-weight': + map.get($deps, 'md-sys-typescale', 'body-medium-weight'), + 'row-item-outline-color': map.get($deps, 'md-sys-color', 'outline-variant'), + 'row-item-outline-width': if($exclude-hardcoded-values, null, 1px), + 'row-item-selected-container-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'row-item-selected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'row-item-selected-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'row-item-unselected-container-color': + map.get($deps, 'md-sys-color', 'surface'), + 'row-item-unselected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'row-item-unselected-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-date-input-modal.scss b/tokens/v0_160/_md-comp-date-input-modal.scss new file mode 100644 index 0000000000..f37f717f32 --- /dev/null +++ b/tokens/v0_160/_md-comp-date-input-modal.scss @@ -0,0 +1,89 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 512px), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'container-width': if($exclude-hardcoded-values, null, 328px), + 'header-container-height': if($exclude-hardcoded-values, null, 120px), + 'header-container-width': if($exclude-hardcoded-values, null, 328px), + 'header-headline-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'header-headline-font': + map.get($deps, 'md-sys-typescale', 'headline-large-font'), + 'header-headline-line-height': + map.get($deps, 'md-sys-typescale', 'headline-large-line-height'), + 'header-headline-size': + map.get($deps, 'md-sys-typescale', 'headline-large-size'), + 'header-headline-tracking': + map.get($deps, 'md-sys-typescale', 'headline-large-tracking'), + 'header-headline-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-input.modal.header.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'headline-large-weight') + map.get($deps, 'md-sys-typescale', 'headline-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'headline-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'headline-large-font') + ), + 'header-headline-weight': + map.get($deps, 'md-sys-typescale', 'headline-large-weight'), + 'header-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'header-supporting-text-font': + map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'header-supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'header-supporting-text-size': + map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'header-supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'header-supporting-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-input.modal.header.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'header-supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight') + ); +} diff --git a/tokens/v0_160/_md-comp-date-picker-docked.scss b/tokens/v0_160/_md-comp-date-picker-docked.scss new file mode 100644 index 0000000000..d13a61a30e --- /dev/null +++ b/tokens/v0_160/_md-comp-date-picker-docked.scss @@ -0,0 +1,246 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 456px), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'container-width': if($exclude-hardcoded-values, null, 360px), + 'date-container-height': if($exclude-hardcoded-values, null, 48px), + 'date-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'date-container-width': if($exclude-hardcoded-values, null, 48px), + 'date-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'date-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'date-label-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'date-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'date-label-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'date-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'date-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.docked.date.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'date-label-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'date-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'date-selected-container-color': map.get($deps, 'md-sys-color', 'primary'), + 'date-selected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'date-selected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'date-selected-label-text-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'date-selected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'date-state-layer-height': if($exclude-hardcoded-values, null, 40px), + 'date-state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'date-state-layer-width': if($exclude-hardcoded-values, null, 40px), + 'date-today-container-outline-color': + map.get($deps, 'md-sys-color', 'primary'), + 'date-today-container-outline-width': + if($exclude-hardcoded-values, null, 1px), + 'date-today-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'date-today-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'date-today-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'date-today-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'date-unselected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'date-unselected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'date-unselected-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'date-unselected-outside-month-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'date-unselected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'header-height': if($exclude-hardcoded-values, null, 64px), + 'menu-button-container-height': if($exclude-hardcoded-values, null, 40px), + 'menu-button-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'menu-button-disabled-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-button-disabled-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'menu-button-disabled-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-button-disabled-label-text-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'menu-button-focus-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-button-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-button-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-button-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'menu-button-hover-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-button-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-button-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-button-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'menu-button-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-button-icon-size': if($exclude-hardcoded-values, null, 18px), + 'menu-button-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-button-label-text-font': + map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'menu-button-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'menu-button-label-text-size': + map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'menu-button-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'menu-button-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.docked.menu-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'menu-button-label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'menu-button-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-button-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-button-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-button-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px), + 'menu-list-item-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-list-item-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-list-item-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'menu-list-item-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-list-item-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-list-item-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'menu-list-item-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-list-item-label-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'menu-list-item-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'menu-list-item-label-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'menu-list-item-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'menu-list-item-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.docked.menu.list-item.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'menu-list-item-label-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'menu-list-item-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-list-item-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-list-item-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'menu-list-item-selected-container-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'menu-list-item-selected-focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-list-item-selected-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-list-item-selected-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-list-item-selected-leading-icon-size': + if($exclude-hardcoded-values, null, 24px), + 'menu-list-item-selected-pressed-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'weekdays-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'weekdays-label-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'weekdays-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'weekdays-label-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'weekdays-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'weekdays-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.docked.weekdays.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'weekdays-label-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight') + ); +} diff --git a/tokens/v0_160/_md-comp-date-picker-modal.scss b/tokens/v0_160/_md-comp-date-picker-modal.scss new file mode 100644 index 0000000000..07ffcf2ff6 --- /dev/null +++ b/tokens/v0_160/_md-comp-date-picker-modal.scss @@ -0,0 +1,305 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 568px), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'container-width': if($exclude-hardcoded-values, null, 360px), + 'date-container-height': if($exclude-hardcoded-values, null, 40px), + 'date-container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'date-container-width': if($exclude-hardcoded-values, null, 40px), + 'date-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'date-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'date-label-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'date-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'date-label-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'date-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'date-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.date.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'date-label-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'date-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'date-selected-container-color': map.get($deps, 'md-sys-color', 'primary'), + 'date-selected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'date-selected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'date-selected-label-text-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'date-selected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'date-state-layer-height': if($exclude-hardcoded-values, null, 40px), + 'date-state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'date-state-layer-width': if($exclude-hardcoded-values, null, 40px), + 'date-today-container-outline-color': + map.get($deps, 'md-sys-color', 'primary'), + 'date-today-container-outline-width': + if($exclude-hardcoded-values, null, 1px), + 'date-today-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'date-today-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'date-today-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'date-today-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'date-unselected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'date-unselected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'date-unselected-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'date-unselected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'header-container-height': if($exclude-hardcoded-values, null, 120px), + 'header-container-width': if($exclude-hardcoded-values, null, 360px), + 'header-headline-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'header-headline-font': + map.get($deps, 'md-sys-typescale', 'headline-large-font'), + 'header-headline-line-height': + map.get($deps, 'md-sys-typescale', 'headline-large-line-height'), + 'header-headline-size': + map.get($deps, 'md-sys-typescale', 'headline-large-size'), + 'header-headline-tracking': + map.get($deps, 'md-sys-typescale', 'headline-large-tracking'), + 'header-headline-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.header.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'headline-large-weight') + map.get($deps, 'md-sys-typescale', 'headline-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'headline-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'headline-large-font') + ), + 'header-headline-weight': + map.get($deps, 'md-sys-typescale', 'headline-large-weight'), + 'header-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'header-supporting-text-font': + map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'header-supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'header-supporting-text-size': + map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'header-supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'header-supporting-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.header.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'header-supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'range-selection-active-indicator-container-color': + map.get($deps, 'md-sys-color', 'primary-container'), + 'range-selection-active-indicator-container-height': + if($exclude-hardcoded-values, null, 40px), + 'range-selection-active-indicator-container-shape': + map.get($deps, 'md-sys-shape', 'corner-full'), + 'range-selection-container-elevation': + map.get($deps, 'md-sys-elevation', 'level0'), + 'range-selection-container-shape': + map.get($deps, 'md-sys-shape', 'corner-none'), + 'range-selection-date-in-range-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'range-selection-date-in-range-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'range-selection-date-in-range-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'range-selection-date-in-range-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'range-selection-date-in-range-label-text-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'range-selection-date-in-range-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'range-selection-date-in-range-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'range-selection-header-container-height': + if($exclude-hardcoded-values, null, 128px), + 'range-selection-header-headline-font': + map.get($deps, 'md-sys-typescale', 'title-large-font'), + 'range-selection-header-headline-line-height': + map.get($deps, 'md-sys-typescale', 'title-large-line-height'), + 'range-selection-header-headline-size': + map.get($deps, 'md-sys-typescale', 'title-large-size'), + 'range-selection-header-headline-tracking': + map.get($deps, 'md-sys-typescale', 'title-large-tracking'), + 'range-selection-header-headline-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.range-selection.header.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'title-large-weight') + map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'title-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'title-large-font') + ), + 'range-selection-header-headline-weight': + map.get($deps, 'md-sys-typescale', 'title-large-weight'), + 'range-selection-month-subhead-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'range-selection-month-subhead-font': + map.get($deps, 'md-sys-typescale', 'title-small-font'), + 'range-selection-month-subhead-line-height': + map.get($deps, 'md-sys-typescale', 'title-small-line-height'), + 'range-selection-month-subhead-size': + map.get($deps, 'md-sys-typescale', 'title-small-size'), + 'range-selection-month-subhead-tracking': + map.get($deps, 'md-sys-typescale', 'title-small-tracking'), + 'range-selection-month-subhead-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.range-selection.month.subhead.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'title-small-weight') + map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'title-small-line-height' + ) map.get($deps, 'md-sys-typescale', 'title-small-font') + ), + 'range-selection-month-subhead-weight': + map.get($deps, 'md-sys-typescale', 'title-small-weight'), + 'weekdays-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'weekdays-label-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'weekdays-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'weekdays-label-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'weekdays-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'weekdays-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.weekdays.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'weekdays-label-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'year-selection-year-container-height': + if($exclude-hardcoded-values, null, 36px), + 'year-selection-year-container-width': + if($exclude-hardcoded-values, null, 72px), + 'year-selection-year-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'year-selection-year-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'year-selection-year-label-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'year-selection-year-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'year-selection-year-label-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'year-selection-year-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'year-selection-year-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.date-picker.modal.year-selection.year.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'year-selection-year-label-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'year-selection-year-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'year-selection-year-selected-container-color': + map.get($deps, 'md-sys-color', 'primary'), + 'year-selection-year-selected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'year-selection-year-selected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'year-selection-year-selected-label-text-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'year-selection-year-selected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'year-selection-year-state-layer-height': + if($exclude-hardcoded-values, null, 36px), + 'year-selection-year-state-layer-shape': + map.get($deps, 'md-sys-shape', 'corner-full'), + 'year-selection-year-state-layer-width': + if($exclude-hardcoded-values, null, 72px), + 'year-selection-year-unselected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'year-selection-year-unselected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'year-selection-year-unselected-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'year-selection-year-unselected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant') + ); +} diff --git a/tokens/v0_160/_md-comp-dialog.scss b/tokens/v0_160/_md-comp-dialog.scss new file mode 100644 index 0000000000..3e6bcb6195 --- /dev/null +++ b/tokens/v0_160/_md-comp-dialog.scss @@ -0,0 +1,123 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'action-focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'action-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'action-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'action-hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'action-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'action-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'action-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'action-label-text-font': + map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'action-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'action-label-text-size': + map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'action-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'action-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.dialog.action.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'action-label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'action-pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'action-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'action-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'headline-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'headline-font': map.get($deps, 'md-sys-typescale', 'headline-small-font'), + 'headline-line-height': + map.get($deps, 'md-sys-typescale', 'headline-small-line-height'), + 'headline-size': map.get($deps, 'md-sys-typescale', 'headline-small-size'), + 'headline-tracking': + map.get($deps, 'md-sys-typescale', 'headline-small-tracking'), + 'headline-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.dialog.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'headline-small-weight') + map.get($deps, 'md-sys-typescale', 'headline-small-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'headline-small-line-height' + ) map.get($deps, 'md-sys-typescale', 'headline-small-font') + ), + 'headline-weight': + map.get($deps, 'md-sys-typescale', 'headline-small-weight'), + 'supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'supporting-text-font': + map.get($deps, 'md-sys-typescale', 'body-medium-font'), + 'supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-medium-line-height'), + 'supporting-text-size': + map.get($deps, 'md-sys-typescale', 'body-medium-size'), + 'supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-medium-tracking'), + 'supporting-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.dialog.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-medium-weight') + map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-medium-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-medium-font') + ), + 'supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'body-medium-weight'), + 'with-icon-icon-color': map.get($deps, 'md-sys-color', 'secondary'), + 'with-icon-icon-size': if($exclude-hardcoded-values, null, 24px) + ); +} diff --git a/tokens/v0_160/_md-comp-divider.scss b/tokens/v0_160/_md-comp-divider.scss new file mode 100644 index 0000000000..f541e41823 --- /dev/null +++ b/tokens/v0_160/_md-comp-divider.scss @@ -0,0 +1,25 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'color': map.get($deps, 'md-sys-color', 'outline-variant'), + 'thickness': if($exclude-hardcoded-values, null, 1px) + ); +} diff --git a/tokens/v0_160/_md-comp-elevated-button.scss b/tokens/v0_160/_md-comp-elevated-button.scss new file mode 100644 index 0000000000..663df7ce5a --- /dev/null +++ b/tokens/v0_160/_md-comp-elevated-button.scss @@ -0,0 +1,91 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'container-height': if($exclude-hardcoded-values, null, 40px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12), + 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), + 'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.elevated-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'with-icon-disabled-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px), + 'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary') + ); +} diff --git a/tokens/v0_160/_md-comp-elevated-card.scss b/tokens/v0_160/_md-comp-elevated-card.scss new file mode 100644 index 0000000000..6c481719ec --- /dev/null +++ b/tokens/v0_160/_md-comp-elevated-card.scss @@ -0,0 +1,59 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'disabled-container-color': map.get($deps, 'md-sys-color', 'surface'), + 'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.38), + 'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'dragged-state-layer-opacity': + map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-extended-fab-branded.scss b/tokens/v0_160/_md-comp-extended-fab-branded.scss new file mode 100644 index 0000000000..f772985e16 --- /dev/null +++ b/tokens/v0_160/_md-comp-extended-fab-branded.scss @@ -0,0 +1,86 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 56px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-size': if($exclude-hardcoded-values, null, 36px), + 'label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.branded.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-extended-fab-primary.scss b/tokens/v0_160/_md-comp-extended-fab-primary.scss new file mode 100644 index 0000000000..aea05203ab --- /dev/null +++ b/tokens/v0_160/_md-comp-extended-fab-primary.scss @@ -0,0 +1,94 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'primary-container'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 56px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), + 'focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), + 'hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'label-text-color': map.get($deps, 'md-sys-color', 'on-primary-container'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.primary.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), + 'pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-extended-fab-secondary.scss b/tokens/v0_160/_md-comp-extended-fab-secondary.scss new file mode 100644 index 0000000000..2b74a64e2d --- /dev/null +++ b/tokens/v0_160/_md-comp-extended-fab-secondary.scss @@ -0,0 +1,95 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'secondary-container'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 56px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.secondary.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-extended-fab-surface.scss b/tokens/v0_160/_md-comp-extended-fab-surface.scss new file mode 100644 index 0000000000..1c80c72b8b --- /dev/null +++ b/tokens/v0_160/_md-comp-extended-fab-surface.scss @@ -0,0 +1,90 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 56px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.surface.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-extended-fab-tertiary.scss b/tokens/v0_160/_md-comp-extended-fab-tertiary.scss new file mode 100644 index 0000000000..8fdb6f4383 --- /dev/null +++ b/tokens/v0_160/_md-comp-extended-fab-tertiary.scss @@ -0,0 +1,95 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'tertiary-container'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 56px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'label-text-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.extended-fab.tertiary.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-fab-branded-large.scss b/tokens/v0_160/_md-comp-fab-branded-large.scss new file mode 100644 index 0000000000..4172a98420 --- /dev/null +++ b/tokens/v0_160/_md-comp-fab-branded-large.scss @@ -0,0 +1,60 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 96px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'container-width': if($exclude-hardcoded-values, null, 96px), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-size': if($exclude-hardcoded-values, null, 48px), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-fab-branded.scss b/tokens/v0_160/_md-comp-fab-branded.scss new file mode 100644 index 0000000000..83bfaa69dc --- /dev/null +++ b/tokens/v0_160/_md-comp-fab-branded.scss @@ -0,0 +1,60 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 56px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'container-width': if($exclude-hardcoded-values, null, 56px), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-size': if($exclude-hardcoded-values, null, 36px), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-fab-primary-large.scss b/tokens/v0_160/_md-comp-fab-primary-large.scss new file mode 100644 index 0000000000..652b2df03a --- /dev/null +++ b/tokens/v0_160/_md-comp-fab-primary-large.scss @@ -0,0 +1,65 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'primary-container'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 96px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), + 'container-width': if($exclude-hardcoded-values, null, 96px), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), + 'focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), + 'hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), + 'icon-size': if($exclude-hardcoded-values, null, 36px), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), + 'pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-fab-primary-small.scss b/tokens/v0_160/_md-comp-fab-primary-small.scss new file mode 100644 index 0000000000..469f4521c4 --- /dev/null +++ b/tokens/v0_160/_md-comp-fab-primary-small.scss @@ -0,0 +1,65 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'primary-container'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 40px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'), + 'container-width': if($exclude-hardcoded-values, null, 40px), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), + 'focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), + 'hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), + 'pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-fab-primary.scss b/tokens/v0_160/_md-comp-fab-primary.scss new file mode 100644 index 0000000000..ea190b7a2c --- /dev/null +++ b/tokens/v0_160/_md-comp-fab-primary.scss @@ -0,0 +1,65 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'primary-container'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 56px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), + 'container-width': if($exclude-hardcoded-values, null, 56px), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), + 'focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), + 'hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary-container'), + 'pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-fab-secondary-large.scss b/tokens/v0_160/_md-comp-fab-secondary-large.scss new file mode 100644 index 0000000000..f02a81629c --- /dev/null +++ b/tokens/v0_160/_md-comp-fab-secondary-large.scss @@ -0,0 +1,66 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'secondary-container'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 96px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), + 'container-width': if($exclude-hardcoded-values, null, 96px), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'icon-size': if($exclude-hardcoded-values, null, 36px), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-fab-secondary-small.scss b/tokens/v0_160/_md-comp-fab-secondary-small.scss new file mode 100644 index 0000000000..6dda0426ef --- /dev/null +++ b/tokens/v0_160/_md-comp-fab-secondary-small.scss @@ -0,0 +1,66 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'secondary-container'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 40px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'), + 'container-width': if($exclude-hardcoded-values, null, 40px), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-fab-secondary.scss b/tokens/v0_160/_md-comp-fab-secondary.scss new file mode 100644 index 0000000000..9fcc950988 --- /dev/null +++ b/tokens/v0_160/_md-comp-fab-secondary.scss @@ -0,0 +1,66 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'secondary-container'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 56px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), + 'container-width': if($exclude-hardcoded-values, null, 56px), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-fab-surface-large.scss b/tokens/v0_160/_md-comp-fab-surface-large.scss new file mode 100644 index 0000000000..0ef03d14af --- /dev/null +++ b/tokens/v0_160/_md-comp-fab-surface-large.scss @@ -0,0 +1,64 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 96px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'container-width': if($exclude-hardcoded-values, null, 96px), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'icon-size': if($exclude-hardcoded-values, null, 36px), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-fab-surface-small.scss b/tokens/v0_160/_md-comp-fab-surface-small.scss new file mode 100644 index 0000000000..581732fc6e --- /dev/null +++ b/tokens/v0_160/_md-comp-fab-surface-small.scss @@ -0,0 +1,64 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 40px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'container-width': if($exclude-hardcoded-values, null, 40px), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-fab-surface.scss b/tokens/v0_160/_md-comp-fab-surface.scss new file mode 100644 index 0000000000..7b7e583d1d --- /dev/null +++ b/tokens/v0_160/_md-comp-fab-surface.scss @@ -0,0 +1,64 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 56px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'container-width': if($exclude-hardcoded-values, null, 56px), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-fab-tertiary-large.scss b/tokens/v0_160/_md-comp-fab-tertiary-large.scss new file mode 100644 index 0000000000..3c7adb856f --- /dev/null +++ b/tokens/v0_160/_md-comp-fab-tertiary-large.scss @@ -0,0 +1,66 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'tertiary-container'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 96px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), + 'container-width': if($exclude-hardcoded-values, null, 96px), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'icon-size': if($exclude-hardcoded-values, null, 36px), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-fab-tertiary-small.scss b/tokens/v0_160/_md-comp-fab-tertiary-small.scss new file mode 100644 index 0000000000..cc17f4014a --- /dev/null +++ b/tokens/v0_160/_md-comp-fab-tertiary-small.scss @@ -0,0 +1,66 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'tertiary-container'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 40px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'), + 'container-width': if($exclude-hardcoded-values, null, 40px), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-fab-tertiary.scss b/tokens/v0_160/_md-comp-fab-tertiary.scss new file mode 100644 index 0000000000..5db7be3059 --- /dev/null +++ b/tokens/v0_160/_md-comp-fab-tertiary.scss @@ -0,0 +1,66 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'tertiary-container'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 56px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), + 'container-width': if($exclude-hardcoded-values, null, 56px), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'lowered-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'lowered-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'lowered-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-filled-autocomplete.scss b/tokens/v0_160/_md-comp-filled-autocomplete.scss new file mode 100644 index 0000000000..06b02395c4 --- /dev/null +++ b/tokens/v0_160/_md-comp-filled-autocomplete.scss @@ -0,0 +1,267 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'menu-cascading-menu-indicator-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-cascading-menu-indicator-icon-size': + if($exclude-hardcoded-values, null, 24px), + 'menu-container-color': map.get($deps, 'md-sys-color', 'surface'), + 'menu-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), + 'menu-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'menu-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), + 'menu-container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'menu-divider-color': map.get($deps, 'md-sys-color', 'surface-variant'), + 'menu-divider-height': if($exclude-hardcoded-values, null, 1px), + 'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px), + 'menu-list-item-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-list-item-label-text-font': + map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'menu-list-item-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'menu-list-item-label-text-size': + map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'menu-list-item-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'menu-list-item-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-autocomplete.menu.list-item.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'menu-list-item-label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'menu-list-item-selected-container-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'text-field-active-indicator-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-active-indicator-height': + if($exclude-hardcoded-values, null, 1px), + 'text-field-caret-color': map.get($deps, 'md-sys-color', 'primary'), + 'text-field-container-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'text-field-container-shape': + map.get($deps, 'md-sys-shape', 'corner-extra-small-top'), + 'text-field-disabled-active-indicator-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-active-indicator-height': + if($exclude-hardcoded-values, null, 1px), + 'text-field-disabled-active-indicator-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-disabled-container-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-container-opacity': + if($exclude-hardcoded-values, null, 0.04), + 'text-field-disabled-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-input-text-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-disabled-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-label-text-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-disabled-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-leading-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-disabled-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-supporting-text-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-disabled-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-trailing-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-error-active-indicator-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-focus-active-indicator-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-focus-caret-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-focus-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-error-focus-label-text-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-error-focus-supporting-text-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-focus-trailing-icon-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-hover-active-indicator-color': + map.get($deps, 'md-sys-color', 'on-error-container'), + 'text-field-error-hover-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-error-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-error-container'), + 'text-field-error-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-error-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-error-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'text-field-error-hover-supporting-text-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-hover-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-error-container'), + 'text-field-error-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-error-label-text-color': map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-error-supporting-text-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-trailing-icon-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-focus-active-indicator-color': + map.get($deps, 'md-sys-color', 'primary'), + 'text-field-focus-active-indicator-height': + if($exclude-hardcoded-values, null, 2px), + 'text-field-focus-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-focus-label-text-color': + map.get($deps, 'md-sys-color', 'primary'), + 'text-field-focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-focus-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-focus-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-hover-active-indicator-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-hover-active-indicator-height': + if($exclude-hardcoded-values, null, 1px), + 'text-field-hover-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'text-field-hover-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-hover-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-input-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'text-field-input-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'text-field-input-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'text-field-input-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'text-field-input-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-autocomplete.text-field.input-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'text-field-input-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'text-field-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-label-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'text-field-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'text-field-label-text-populated-line-height': + map.get($deps, 'md-sys-typescale', 'body-small-line-height'), + 'text-field-label-text-populated-size': + map.get($deps, 'md-sys-typescale', 'body-small-size'), + 'text-field-label-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'text-field-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'text-field-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-autocomplete.text-field.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'text-field-label-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'text-field-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 20px), + 'text-field-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-supporting-text-font': + map.get($deps, 'md-sys-typescale', 'body-small-font'), + 'text-field-supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-small-line-height'), + 'text-field-supporting-text-size': + map.get($deps, 'md-sys-typescale', 'body-small-size'), + 'text-field-supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-small-tracking'), + 'text-field-supporting-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-autocomplete.text-field.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-small-weight') + map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-small-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-small-font') + ), + 'text-field-supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'body-small-weight'), + 'text-field-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-trailing-icon-size': if($exclude-hardcoded-values, null, 24px) + ); +} diff --git a/tokens/v0_160/_md-comp-filled-button.scss b/tokens/v0_160/_md-comp-filled-button.scss new file mode 100644 index 0000000000..742ab487ed --- /dev/null +++ b/tokens/v0_160/_md-comp-filled-button.scss @@ -0,0 +1,89 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'primary'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'container-height': if($exclude-hardcoded-values, null, 40px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12), + 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'with-icon-disabled-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'with-icon-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px), + 'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary') + ); +} diff --git a/tokens/v0_160/_md-comp-filled-card.scss b/tokens/v0_160/_md-comp-filled-card.scss new file mode 100644 index 0000000000..f362804ad2 --- /dev/null +++ b/tokens/v0_160/_md-comp-filled-card.scss @@ -0,0 +1,58 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface-variant'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'), + 'disabled-container-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.38), + 'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'dragged-state-layer-opacity': + map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-filled-icon-button.scss b/tokens/v0_160/_md-comp-filled-icon-button.scss new file mode 100644 index 0000000000..ceb7223a13 --- /dev/null +++ b/tokens/v0_160/_md-comp-filled-icon-button.scss @@ -0,0 +1,79 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'primary'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'container-size': if($exclude-hardcoded-values, null, 40px), + 'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12), + 'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'pressed-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'selected-container-color': map.get($deps, 'md-sys-color', 'primary'), + 'toggle-selected-focus-icon-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'toggle-selected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'toggle-selected-hover-icon-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'toggle-selected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'toggle-selected-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'toggle-selected-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'toggle-selected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'toggle-unselected-focus-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'toggle-unselected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'toggle-unselected-hover-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'toggle-unselected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'toggle-unselected-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'toggle-unselected-pressed-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'toggle-unselected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'unselected-container-color': + map.get($deps, 'md-sys-color', 'surface-variant') + ); +} diff --git a/tokens/v0_160/_md-comp-filled-menu-button.scss b/tokens/v0_160/_md-comp-filled-menu-button.scss new file mode 100644 index 0000000000..6a765f7b76 --- /dev/null +++ b/tokens/v0_160/_md-comp-filled-menu-button.scss @@ -0,0 +1,98 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'primary'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'container-height': if($exclude-hardcoded-values, null, 40px), + 'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12), + 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), + 'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-menu-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'pressed-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'trailing-icon-size': if($exclude-hardcoded-values, null, 18px), + 'with-icon-disabled-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-icon-disabled-leading-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'with-icon-focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'with-icon-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'with-icon-leading-icon-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'with-icon-leading-icon-size': if($exclude-hardcoded-values, null, 18px), + 'with-icon-pressed-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-primary') + ); +} diff --git a/tokens/v0_160/_md-comp-filled-select.scss b/tokens/v0_160/_md-comp-filled-select.scss new file mode 100644 index 0000000000..4d2b3d2bde --- /dev/null +++ b/tokens/v0_160/_md-comp-filled-select.scss @@ -0,0 +1,272 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'menu-cascading-menu-indicator-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-cascading-menu-indicator-icon-size': + if($exclude-hardcoded-values, null, 24px), + 'menu-container-color': map.get($deps, 'md-sys-color', 'surface'), + 'menu-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), + 'menu-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'menu-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), + 'menu-container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'menu-divider-color': map.get($deps, 'md-sys-color', 'surface-variant'), + 'menu-divider-height': if($exclude-hardcoded-values, null, 1px), + 'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px), + 'menu-list-item-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-list-item-label-text-font': + map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'menu-list-item-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'menu-list-item-label-text-size': + map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'menu-list-item-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'menu-list-item-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-select.menu.list-item.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'menu-list-item-label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'menu-list-item-selected-container-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'menu-list-item-with-leading-icon-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-list-item-with-leading-icon-leading-icon-size': + if($exclude-hardcoded-values, null, 24px), + 'menu-list-item-with-trailing-icon-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-list-item-with-trailing-icon-trailing-icon-size': + if($exclude-hardcoded-values, null, 24px), + 'text-field-active-indicator-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-active-indicator-height': + if($exclude-hardcoded-values, null, 1px), + 'text-field-container-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'text-field-container-shape': + map.get($deps, 'md-sys-shape', 'corner-extra-small-top'), + 'text-field-disabled-active-indicator-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-active-indicator-height': + if($exclude-hardcoded-values, null, 1px), + 'text-field-disabled-active-indicator-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-disabled-container-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-container-opacity': + if($exclude-hardcoded-values, null, 0.04), + 'text-field-disabled-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-input-text-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-disabled-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-label-text-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-disabled-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-leading-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-disabled-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-supporting-text-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-disabled-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-trailing-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-error-active-indicator-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-focus-active-indicator-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-focus-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-error-focus-label-text-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-error-focus-supporting-text-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-focus-trailing-icon-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-hover-active-indicator-color': + map.get($deps, 'md-sys-color', 'on-error-container'), + 'text-field-error-hover-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-error-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-error-container'), + 'text-field-error-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-error-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-error-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'text-field-error-hover-supporting-text-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-hover-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-error-container'), + 'text-field-error-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-error-label-text-color': map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-error-supporting-text-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-trailing-icon-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-focus-active-indicator-color': + map.get($deps, 'md-sys-color', 'primary'), + 'text-field-focus-active-indicator-height': + if($exclude-hardcoded-values, null, 2px), + 'text-field-focus-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-focus-label-text-color': + map.get($deps, 'md-sys-color', 'primary'), + 'text-field-focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-focus-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-focus-trailing-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'text-field-hover-active-indicator-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-hover-active-indicator-height': + if($exclude-hardcoded-values, null, 1px), + 'text-field-hover-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'text-field-hover-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-hover-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-input-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'text-field-input-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'text-field-input-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'text-field-input-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'text-field-input-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-select.text-field.input-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'text-field-input-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'text-field-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-label-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'text-field-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'text-field-label-text-populated-line-height': + map.get($deps, 'md-sys-typescale', 'body-small-line-height'), + 'text-field-label-text-populated-size': + map.get($deps, 'md-sys-typescale', 'body-small-size'), + 'text-field-label-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'text-field-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'text-field-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-select.text-field.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'text-field-label-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'text-field-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 20px), + 'text-field-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-supporting-text-font': + map.get($deps, 'md-sys-typescale', 'body-small-font'), + 'text-field-supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-small-line-height'), + 'text-field-supporting-text-size': + map.get($deps, 'md-sys-typescale', 'body-small-size'), + 'text-field-supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-small-tracking'), + 'text-field-supporting-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-select.text-field.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-small-weight') + map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-small-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-small-font') + ), + 'text-field-supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'body-small-weight'), + 'text-field-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-trailing-icon-size': if($exclude-hardcoded-values, null, 24px) + ); +} diff --git a/tokens/v0_160/_md-comp-filled-text-field.scss b/tokens/v0_160/_md-comp-filled-text-field.scss new file mode 100644 index 0000000000..26482ad563 --- /dev/null +++ b/tokens/v0_160/_md-comp-filled-text-field.scss @@ -0,0 +1,189 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'active-indicator-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'active-indicator-height': if($exclude-hardcoded-values, null, 1px), + 'caret-color': map.get($deps, 'md-sys-color', 'primary'), + 'container-color': map.get($deps, 'md-sys-color', 'surface-variant'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small-top'), + 'disabled-active-indicator-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-active-indicator-height': if($exclude-hardcoded-values, null, 1px), + 'disabled-active-indicator-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.04), + 'disabled-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-input-text-opacity': if($exclude-hardcoded-values, null, 0.38), + 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), + 'disabled-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-leading-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'disabled-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-supporting-text-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'error-active-indicator-color': map.get($deps, 'md-sys-color', 'error'), + 'error-focus-active-indicator-color': + map.get($deps, 'md-sys-color', 'error'), + 'error-focus-caret-color': map.get($deps, 'md-sys-color', 'error'), + 'error-focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'error-focus-label-text-color': map.get($deps, 'md-sys-color', 'error'), + 'error-focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'error-focus-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), + 'error-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'), + 'error-hover-active-indicator-color': + map.get($deps, 'md-sys-color', 'on-error-container'), + 'error-hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'error-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-error-container'), + 'error-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'error-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'error-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'error-hover-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), + 'error-hover-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-error-container'), + 'error-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'error-label-text-color': map.get($deps, 'md-sys-color', 'error'), + 'error-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'error-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), + 'error-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'), + 'focus-active-indicator-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-active-indicator-height': if($exclude-hardcoded-values, null, 2px), + 'focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'focus-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'focus-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'hover-active-indicator-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'hover-active-indicator-height': if($exclude-hardcoded-values, null, 1px), + 'hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'hover-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'hover-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'input-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'input-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'input-text-placeholder-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'input-text-prefix-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'input-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'input-text-suffix-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'input-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'input-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-text-field.input-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'input-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'label-text-populated-line-height': + map.get($deps, 'md-sys-typescale', 'body-small-line-height'), + 'label-text-populated-size': + map.get($deps, 'md-sys-typescale', 'body-small-size'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-text-field.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'leading-icon-size': if($exclude-hardcoded-values, null, 24px), + 'supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'supporting-text-font': + map.get($deps, 'md-sys-typescale', 'body-small-font'), + 'supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-small-line-height'), + 'supporting-text-size': + map.get($deps, 'md-sys-typescale', 'body-small-size'), + 'supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-small-tracking'), + 'supporting-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-text-field.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-small-weight') + map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-small-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-small-font') + ), + 'supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'body-small-weight'), + 'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'trailing-icon-size': if($exclude-hardcoded-values, null, 24px) + ); +} diff --git a/tokens/v0_160/_md-comp-filled-tonal-button.scss b/tokens/v0_160/_md-comp-filled-tonal-button.scss new file mode 100644 index 0000000000..231c083ac9 --- /dev/null +++ b/tokens/v0_160/_md-comp-filled-tonal-button.scss @@ -0,0 +1,99 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'secondary-container'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'container-height': if($exclude-hardcoded-values, null, 40px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12), + 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'label-text-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filled-tonal-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'with-icon-disabled-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'with-icon-focus-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'with-icon-hover-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'with-icon-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px), + 'with-icon-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container') + ); +} diff --git a/tokens/v0_160/_md-comp-filled-tonal-icon-button.scss b/tokens/v0_160/_md-comp-filled-tonal-icon-button.scss new file mode 100644 index 0000000000..032c57f078 --- /dev/null +++ b/tokens/v0_160/_md-comp-filled-tonal-icon-button.scss @@ -0,0 +1,86 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'secondary-container'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'container-size': if($exclude-hardcoded-values, null, 40px), + 'disabled-container-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12), + 'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'focus-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'selected-container-color': + map.get($deps, 'md-sys-color', 'secondary-container'), + 'toggle-selected-focus-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'toggle-selected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'toggle-selected-hover-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'toggle-selected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'toggle-selected-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'toggle-selected-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'toggle-selected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'toggle-unselected-focus-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'toggle-unselected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'toggle-unselected-hover-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'toggle-unselected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'toggle-unselected-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'toggle-unselected-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'toggle-unselected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-container-color': + map.get($deps, 'md-sys-color', 'surface-variant') + ); +} diff --git a/tokens/v0_160/_md-comp-filter-chip.scss b/tokens/v0_160/_md-comp-filter-chip.scss new file mode 100644 index 0000000000..6360d1a1c6 --- /dev/null +++ b/tokens/v0_160/_md-comp-filter-chip.scss @@ -0,0 +1,209 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-height': if($exclude-hardcoded-values, null, 32px), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), + 'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'elevated-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'elevated-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'elevated-disabled-container-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'elevated-disabled-container-elevation': + map.get($deps, 'md-sys-elevation', 'level0'), + 'elevated-disabled-container-opacity': + if($exclude-hardcoded-values, null, 0.12), + 'elevated-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'elevated-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'elevated-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'elevated-selected-container-color': + map.get($deps, 'md-sys-color', 'secondary-container'), + 'elevated-unselected-container-color': + map.get($deps, 'md-sys-color', 'surface'), + 'flat-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'flat-disabled-selected-container-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'flat-disabled-selected-container-opacity': + if($exclude-hardcoded-values, null, 0.12), + 'flat-disabled-unselected-outline-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'flat-disabled-unselected-outline-opacity': + if($exclude-hardcoded-values, null, 0.12), + 'flat-selected-container-color': + map.get($deps, 'md-sys-color', 'secondary-container'), + 'flat-selected-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level0'), + 'flat-selected-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'flat-selected-outline-width': if($exclude-hardcoded-values, null, 0px), + 'flat-selected-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level0'), + 'flat-unselected-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level0'), + 'flat-unselected-focus-outline-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'flat-unselected-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level0'), + 'flat-unselected-outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'flat-unselected-outline-width': if($exclude-hardcoded-values, null, 1px), + 'flat-unselected-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level0'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.filter-chip.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'selected-dragged-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-dragged-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-dragged-state-layer-opacity': + map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'), + 'selected-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'selected-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'selected-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'selected-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'unselected-dragged-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-dragged-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-dragged-state-layer-opacity': + map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'), + 'unselected-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'unselected-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'unselected-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'unselected-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px), + 'with-leading-icon-disabled-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-leading-icon-disabled-leading-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'with-leading-icon-selected-dragged-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'with-leading-icon-selected-focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'with-leading-icon-selected-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'with-leading-icon-selected-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'with-leading-icon-selected-pressed-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'with-leading-icon-unselected-dragged-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-leading-icon-unselected-focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-leading-icon-unselected-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-leading-icon-unselected-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-leading-icon-unselected-pressed-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-trailing-icon-disabled-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-trailing-icon-disabled-trailing-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'with-trailing-icon-selected-dragged-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'with-trailing-icon-selected-focus-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'with-trailing-icon-selected-hover-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'with-trailing-icon-selected-pressed-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'with-trailing-icon-selected-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'with-trailing-icon-unselected-dragged-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'with-trailing-icon-unselected-focus-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'with-trailing-icon-unselected-hover-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'with-trailing-icon-unselected-pressed-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'with-trailing-icon-unselected-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant') + ); +} diff --git a/tokens/v0_160/_md-comp-full-screen-dialog.scss b/tokens/v0_160/_md-comp-full-screen-dialog.scss new file mode 100644 index 0000000000..bfb35d67c0 --- /dev/null +++ b/tokens/v0_160/_md-comp-full-screen-dialog.scss @@ -0,0 +1,111 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), + 'header-action-focus-label-text-color': + map.get($deps, 'md-sys-color', 'primary'), + 'header-action-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'header-action-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'header-action-hover-label-text-color': + map.get($deps, 'md-sys-color', 'primary'), + 'header-action-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'header-action-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'header-action-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'header-action-label-text-font': + map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'header-action-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'header-action-label-text-size': + map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'header-action-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'header-action-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.full-screen-dialog.header.action.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'header-action-label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'header-action-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'primary'), + 'header-action-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'header-action-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'header-container-color': map.get($deps, 'md-sys-color', 'surface'), + 'header-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'header-container-height': if($exclude-hardcoded-values, null, 56px), + 'header-container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'header-headline-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'header-headline-font': + map.get($deps, 'md-sys-typescale', 'title-large-font'), + 'header-headline-line-height': + map.get($deps, 'md-sys-typescale', 'title-large-line-height'), + 'header-headline-size': + map.get($deps, 'md-sys-typescale', 'title-large-size'), + 'header-headline-tracking': + map.get($deps, 'md-sys-typescale', 'title-large-tracking'), + 'header-headline-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.full-screen-dialog.header.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'title-large-weight') + map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'title-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'title-large-font') + ), + 'header-headline-weight': + map.get($deps, 'md-sys-typescale', 'title-large-weight'), + 'header-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'header-icon-size': if($exclude-hardcoded-values, null, 24px), + 'header-on-scroll-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2') + ); +} diff --git a/tokens/v0_160/_md-comp-icon-button.scss b/tokens/v0_160/_md-comp-icon-button.scss new file mode 100644 index 0000000000..7e43e00d44 --- /dev/null +++ b/tokens/v0_160/_md-comp-icon-button.scss @@ -0,0 +1,70 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'selected-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'selected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'selected-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'selected-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'selected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'selected-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'selected-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'selected-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'selected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'selected-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'state-layer-size': if($exclude-hardcoded-values, null, 40px), + 'unselected-focus-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'unselected-hover-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'unselected-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-input-chip.scss b/tokens/v0_160/_md-comp-input-chip.scss new file mode 100644 index 0000000000..5c0115cf1c --- /dev/null +++ b/tokens/v0_160/_md-comp-input-chip.scss @@ -0,0 +1,184 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'container-height': if($exclude-hardcoded-values, null, 32px), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'), + 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), + 'disabled-selected-container-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-selected-container-opacity': + if($exclude-hardcoded-values, null, 0.12), + 'disabled-unselected-outline-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-unselected-outline-opacity': + if($exclude-hardcoded-values, null, 0.12), + 'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.input-chip.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'selected-container-color': + map.get($deps, 'md-sys-color', 'secondary-container'), + 'selected-dragged-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-dragged-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-dragged-state-layer-opacity': + map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'), + 'selected-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'selected-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'selected-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-outline-width': if($exclude-hardcoded-values, null, 0px), + 'selected-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'unselected-dragged-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-dragged-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-dragged-state-layer-opacity': + map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'), + 'unselected-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-focus-outline-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'unselected-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'unselected-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'unselected-outline-width': if($exclude-hardcoded-values, null, 1px), + 'unselected-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'with-avatar-avatar-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'with-avatar-avatar-size': if($exclude-hardcoded-values, null, 24px), + 'with-avatar-disabled-avatar-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'with-leading-icon-disabled-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-leading-icon-disabled-leading-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'with-leading-icon-leading-icon-size': + if($exclude-hardcoded-values, null, 18px), + 'with-leading-icon-selected-dragged-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'with-leading-icon-selected-focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-leading-icon-selected-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-leading-icon-selected-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-leading-icon-selected-pressed-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-leading-icon-unselected-dragged-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'with-leading-icon-unselected-focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-leading-icon-unselected-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-leading-icon-unselected-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'with-leading-icon-unselected-pressed-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-trailing-icon-disabled-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-trailing-icon-disabled-trailing-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'with-trailing-icon-selected-dragged-trailing-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-trailing-icon-selected-focus-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'with-trailing-icon-selected-hover-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'with-trailing-icon-selected-pressed-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'with-trailing-icon-selected-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'with-trailing-icon-trailing-icon-size': + if($exclude-hardcoded-values, null, 18px), + 'with-trailing-icon-unselected-dragged-trailing-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-trailing-icon-unselected-focus-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'with-trailing-icon-unselected-hover-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'with-trailing-icon-unselected-pressed-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'with-trailing-icon-unselected-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant') + ); +} diff --git a/tokens/v0_160/_md-comp-linear-progress-indicator.scss b/tokens/v0_160/_md-comp-linear-progress-indicator.scss new file mode 100644 index 0000000000..c0c80d0323 --- /dev/null +++ b/tokens/v0_160/_md-comp-linear-progress-indicator.scss @@ -0,0 +1,41 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// User-configured context group "Audience": "3P" +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-shape'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-shape': md-sys-shape.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'active-indicator-color': map.get($deps, 'md-sys-color', 'primary'), + 'active-indicator-height': if($exclude-hardcoded-values, null, 4px), + 'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-none'), + 'four-color-active-indicator-four-color': + map.get($deps, 'md-sys-color', 'tertiary-container'), + 'four-color-active-indicator-one-color': + map.get($deps, 'md-sys-color', 'primary'), + 'four-color-active-indicator-three-color': + map.get($deps, 'md-sys-color', 'tertiary'), + 'four-color-active-indicator-two-color': + map.get($deps, 'md-sys-color', 'primary-container'), + 'track-color': map.get($deps, 'md-sys-color', 'surface-variant'), + 'track-height': if($exclude-hardcoded-values, null, 4px), + 'track-shape': map.get($deps, 'md-sys-shape', 'corner-none') + ); +} diff --git a/tokens/v0_160/_md-comp-list.scss b/tokens/v0_160/_md-comp-list.scss new file mode 100644 index 0000000000..eb05f4f127 --- /dev/null +++ b/tokens/v0_160/_md-comp-list.scss @@ -0,0 +1,248 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'list-item-container-color': map.get($deps, 'md-sys-color', 'surface'), + 'list-item-container-elevation': + map.get($deps, 'md-sys-elevation', 'level0'), + 'list-item-container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), + 'list-item-disabled-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-disabled-label-text-opacity': + if($exclude-hardcoded-values, null, 0.3), + 'list-item-disabled-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-disabled-leading-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'list-item-disabled-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-disabled-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'list-item-disabled-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-disabled-trailing-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'list-item-dragged-container-elevation': + map.get($deps, 'md-sys-elevation', 'level4'), + 'list-item-dragged-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-dragged-leading-icon-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-dragged-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-dragged-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'list-item-dragged-trailing-icon-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-focus-leading-icon-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'list-item-focus-trailing-icon-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-hover-leading-icon-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'list-item-hover-trailing-icon-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-label-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'list-item-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'list-item-label-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'list-item-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'list-item-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'list-item-label-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'list-item-large-leading-video-height': + if($exclude-hardcoded-values, null, 69px), + 'list-item-leading-avatar-label-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'list-item-leading-avatar-label-font': + map.get($deps, 'md-sys-typescale', 'title-medium-font'), + 'list-item-leading-avatar-label-line-height': + map.get($deps, 'md-sys-typescale', 'title-medium-line-height'), + 'list-item-leading-avatar-label-size': + map.get($deps, 'md-sys-typescale', 'title-medium-size'), + 'list-item-leading-avatar-label-tracking': + map.get($deps, 'md-sys-typescale', 'title-medium-tracking'), + 'list-item-leading-avatar-label-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.leading-avatar-label.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'title-medium-weight') + map.get($deps, 'md-sys-typescale', 'title-medium-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'title-medium-line-height' + ) map.get($deps, 'md-sys-typescale', 'title-medium-font') + ), + 'list-item-leading-avatar-label-weight': + map.get($deps, 'md-sys-typescale', 'title-medium-weight'), + 'list-item-leading-avatar-color': + map.get($deps, 'md-sys-color', 'primary-container'), + 'list-item-leading-avatar-shape': + map.get($deps, 'md-sys-shape', 'corner-full'), + 'list-item-leading-avatar-size': if($exclude-hardcoded-values, null, 40px), + 'list-item-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-leading-icon-size': if($exclude-hardcoded-values, null, 18px), + 'list-item-leading-image-height': if($exclude-hardcoded-values, null, 56px), + 'list-item-leading-image-shape': + map.get($deps, 'md-sys-shape', 'corner-none'), + 'list-item-leading-image-width': if($exclude-hardcoded-values, null, 56px), + 'list-item-leading-video-shape': + map.get($deps, 'md-sys-shape', 'corner-none'), + 'list-item-leading-video-width': if($exclude-hardcoded-values, null, 100px), + 'list-item-one-line-container-height': + if($exclude-hardcoded-values, null, 56px), + 'list-item-overline-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-overline-font': + map.get($deps, 'md-sys-typescale', 'label-small-font'), + 'list-item-overline-line-height': + map.get($deps, 'md-sys-typescale', 'label-small-line-height'), + 'list-item-overline-size': + map.get($deps, 'md-sys-typescale', 'label-small-size'), + 'list-item-overline-tracking': + map.get($deps, 'md-sys-typescale', 'label-small-tracking'), + 'list-item-overline-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.overline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-small-weight') + map.get($deps, 'md-sys-typescale', 'label-small-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-small-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-small-font') + ), + 'list-item-overline-weight': + map.get($deps, 'md-sys-typescale', 'label-small-weight'), + 'list-item-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-pressed-leading-icon-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'list-item-pressed-trailing-icon-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-selected-trailing-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'list-item-small-leading-video-height': + if($exclude-hardcoded-values, null, 56px), + 'list-item-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-supporting-text-font': + map.get($deps, 'md-sys-typescale', 'body-medium-font'), + 'list-item-supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-medium-line-height'), + 'list-item-supporting-text-size': + map.get($deps, 'md-sys-typescale', 'body-medium-size'), + 'list-item-supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-medium-tracking'), + 'list-item-supporting-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-medium-weight') + map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-medium-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-medium-font') + ), + 'list-item-supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'body-medium-weight'), + 'list-item-three-line-container-height': + if($exclude-hardcoded-values, null, 88px), + 'list-item-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-trailing-icon-size': if($exclude-hardcoded-values, null, 24px), + 'list-item-trailing-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-trailing-supporting-text-font': + map.get($deps, 'md-sys-typescale', 'label-small-font'), + 'list-item-trailing-supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-small-line-height'), + 'list-item-trailing-supporting-text-size': + map.get($deps, 'md-sys-typescale', 'label-small-size'), + 'list-item-trailing-supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-small-tracking'), + 'list-item-trailing-supporting-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.list.list-item.trailing-supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-small-weight') + map.get($deps, 'md-sys-typescale', 'label-small-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-small-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-small-font') + ), + 'list-item-trailing-supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'label-small-weight'), + 'list-item-two-line-container-height': + if($exclude-hardcoded-values, null, 72px), + 'list-item-unselected-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface') + ); +} diff --git a/tokens/v0_160/_md-comp-menu.scss b/tokens/v0_160/_md-comp-menu.scss new file mode 100644 index 0000000000..ba9e155aed --- /dev/null +++ b/tokens/v0_160/_md-comp-menu.scss @@ -0,0 +1,121 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'cascading-menu-indicator-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'cascading-menu-indicator-icon-size': + if($exclude-hardcoded-values, null, 24px), + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'list-item-container-height': if($exclude-hardcoded-values, null, 48px), + 'list-item-disabled-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-disabled-label-text-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'list-item-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'list-item-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'list-item-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-label-text-font': + map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'list-item-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'list-item-label-text-size': + map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'list-item-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'list-item-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.menu.list-item.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'list-item-label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'list-item-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'list-item-selected-container-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'list-item-with-leading-icon-disabled-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-with-leading-icon-disabled-leading-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'list-item-with-leading-icon-focus-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-with-leading-icon-hover-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-with-leading-icon-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-with-leading-icon-leading-icon-size': + if($exclude-hardcoded-values, null, 24px), + 'list-item-with-leading-icon-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-with-trailing-icon-disabled-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'list-item-with-trailing-icon-disabled-trailing-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'list-item-with-trailing-icon-focus-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-with-trailing-icon-hover-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-with-trailing-icon-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-with-trailing-icon-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'list-item-with-trailing-icon-trailing-icon-size': + if($exclude-hardcoded-values, null, 24px) + ); +} diff --git a/tokens/v0_160/_md-comp-navigation-bar.scss b/tokens/v0_160/_md-comp-navigation-bar.scss new file mode 100644 index 0000000000..0e1c331ce6 --- /dev/null +++ b/tokens/v0_160/_md-comp-navigation-bar.scss @@ -0,0 +1,114 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'active-indicator-color': + map.get($deps, 'md-sys-color', 'secondary-container'), + 'active-indicator-height': if($exclude-hardcoded-values, null, 32px), + 'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'active-indicator-width': if($exclude-hardcoded-values, null, 64px), + 'active-focus-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'active-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'active-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'active-hover-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'active-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'active-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'active-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'active-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'active-label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-medium-weight-prominent'), + 'active-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'active-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'active-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), + 'container-height': if($exclude-hardcoded-values, null, 80px), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'inactive-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'inactive-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'inactive-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-medium-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-medium-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-medium-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-medium-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-bar.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-medium-weight') + map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-medium-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-medium-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-medium-weight'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-navigation-drawer.scss b/tokens/v0_160/_md-comp-navigation-drawer.scss new file mode 100644 index 0000000000..3806c745d1 --- /dev/null +++ b/tokens/v0_160/_md-comp-navigation-drawer.scss @@ -0,0 +1,162 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'active-indicator-color': + map.get($deps, 'md-sys-color', 'secondary-container'), + 'active-indicator-height': if($exclude-hardcoded-values, null, 56px), + 'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'active-indicator-width': if($exclude-hardcoded-values, null, 336px), + 'active-focus-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'active-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'active-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'active-hover-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'active-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'active-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'active-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'active-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'active-label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight-prominent'), + 'active-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'active-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'active-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'bottom-container-shape': map.get($deps, 'md-sys-shape', 'corner-large-top'), + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-height': if($exclude-hardcoded-values, null, 100%), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-large-end'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'container-width': if($exclude-hardcoded-values, null, 360px), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'headline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'headline-font': map.get($deps, 'md-sys-typescale', 'title-small-font'), + 'headline-line-height': + map.get($deps, 'md-sys-typescale', 'title-small-line-height'), + 'headline-size': map.get($deps, 'md-sys-typescale', 'title-small-size'), + 'headline-tracking': + map.get($deps, 'md-sys-typescale', 'title-small-tracking'), + 'headline-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-drawer.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'title-small-weight') + map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'title-small-line-height' + ) map.get($deps, 'md-sys-typescale', 'title-small-font') + ), + 'headline-weight': map.get($deps, 'md-sys-typescale', 'title-small-weight'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'inactive-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'inactive-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'inactive-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-drawer.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'large-badge-label-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'large-badge-label-font': + map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'large-badge-label-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'large-badge-label-size': + map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'large-badge-label-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'large-badge-label-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-drawer.large-badge-label.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'large-badge-label-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'modal-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'standard-container-elevation': map.get($deps, 'md-sys-elevation', 'level0') + ); +} diff --git a/tokens/v0_160/_md-comp-navigation-rail.scss b/tokens/v0_160/_md-comp-navigation-rail.scss new file mode 100644 index 0000000000..101ee007f6 --- /dev/null +++ b/tokens/v0_160/_md-comp-navigation-rail.scss @@ -0,0 +1,131 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'active-indicator-color': + map.get($deps, 'md-sys-color', 'secondary-container'), + 'active-indicator-height': if($exclude-hardcoded-values, null, 32px), + 'active-indicator-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'active-indicator-width': if($exclude-hardcoded-values, null, 56px), + 'active-focus-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'active-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'active-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'active-hover-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'active-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'active-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'active-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'active-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'active-label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-medium-weight-prominent'), + 'active-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'active-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'active-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), + 'container-width': if($exclude-hardcoded-values, null, 80px), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'inactive-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'inactive-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'inactive-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-medium-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-medium-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-medium-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-medium-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.navigation-rail.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-medium-weight') + map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-medium-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-medium-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-medium-weight'), + 'menu-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'menu-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'menu-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-icon-size': if($exclude-hardcoded-values, null, 24px), + 'menu-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'no-label-active-indicator-height': + if($exclude-hardcoded-values, null, 56px), + 'no-label-active-indicator-shape': + map.get($deps, 'md-sys-shape', 'corner-full'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-outlined-autocomplete.scss b/tokens/v0_160/_md-comp-outlined-autocomplete.scss new file mode 100644 index 0000000000..e0c0292f6b --- /dev/null +++ b/tokens/v0_160/_md-comp-outlined-autocomplete.scss @@ -0,0 +1,257 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'menu-cascading-menu-indicator-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-cascading-menu-indicator-icon-size': + if($exclude-hardcoded-values, null, 24px), + 'menu-container-color': map.get($deps, 'md-sys-color', 'surface'), + 'menu-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), + 'menu-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'menu-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), + 'menu-container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'menu-divider-color': map.get($deps, 'md-sys-color', 'surface-variant'), + 'menu-divider-height': if($exclude-hardcoded-values, null, 1px), + 'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px), + 'menu-list-item-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-list-item-label-text-font': + map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'menu-list-item-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'menu-list-item-label-text-size': + map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'menu-list-item-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'menu-list-item-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-autocomplete.menu.list-item.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'menu-list-item-label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'menu-list-item-selected-container-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'text-field-caret-color': map.get($deps, 'md-sys-color', 'primary'), + 'text-field-container-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'text-field-container-shape': + map.get($deps, 'md-sys-shape', 'corner-extra-small'), + 'text-field-disabled-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-input-text-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-disabled-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-label-text-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-disabled-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-leading-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-disabled-outline-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-outline-opacity': + if($exclude-hardcoded-values, null, 0.12), + 'text-field-disabled-outline-width': + if($exclude-hardcoded-values, null, 1px), + 'text-field-disabled-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-supporting-text-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-disabled-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-trailing-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-error-focus-caret-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-focus-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-error-focus-label-text-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-error-focus-outline-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-focus-supporting-text-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-focus-trailing-icon-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-hover-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-error-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-error-container'), + 'text-field-error-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-error-hover-outline-color': + map.get($deps, 'md-sys-color', 'on-error-container'), + 'text-field-error-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-error-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'text-field-error-hover-supporting-text-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-hover-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-error-container'), + 'text-field-error-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-error-label-text-color': map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-error-outline-color': map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-supporting-text-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-trailing-icon-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-focus-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-focus-label-text-color': + map.get($deps, 'md-sys-color', 'primary'), + 'text-field-focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-focus-outline-color': map.get($deps, 'md-sys-color', 'primary'), + 'text-field-focus-outline-width': if($exclude-hardcoded-values, null, 2px), + 'text-field-focus-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-focus-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-hover-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-hover-outline-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-hover-outline-width': if($exclude-hardcoded-values, null, 1px), + 'text-field-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'text-field-hover-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-hover-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-input-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'text-field-input-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'text-field-input-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'text-field-input-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'text-field-input-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-autocomplete.text-field.input-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'text-field-input-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'text-field-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-label-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'text-field-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'text-field-label-text-populated-line-height': + map.get($deps, 'md-sys-typescale', 'body-small-line-height'), + 'text-field-label-text-populated-size': + map.get($deps, 'md-sys-typescale', 'body-small-size'), + 'text-field-label-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'text-field-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'text-field-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-autocomplete.text-field.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'text-field-label-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'text-field-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 24px), + 'text-field-outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'text-field-outline-width': if($exclude-hardcoded-values, null, 1px), + 'text-field-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-supporting-text-font': + map.get($deps, 'md-sys-typescale', 'body-small-font'), + 'text-field-supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-small-line-height'), + 'text-field-supporting-text-size': + map.get($deps, 'md-sys-typescale', 'body-small-size'), + 'text-field-supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-small-tracking'), + 'text-field-supporting-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-autocomplete.text-field.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-small-weight') + map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-small-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-small-font') + ), + 'text-field-supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'body-small-weight'), + 'text-field-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-trailing-icon-size': if($exclude-hardcoded-values, null, 24px) + ); +} diff --git a/tokens/v0_160/_md-comp-outlined-button.scss b/tokens/v0_160/_md-comp-outlined-button.scss new file mode 100644 index 0000000000..10a449a0e3 --- /dev/null +++ b/tokens/v0_160/_md-comp-outlined-button.scss @@ -0,0 +1,84 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-height': if($exclude-hardcoded-values, null, 40px), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), + 'disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12), + 'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-outline-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'outline-width': if($exclude-hardcoded-values, null, 1px), + 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'with-icon-disabled-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px), + 'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary') + ); +} diff --git a/tokens/v0_160/_md-comp-outlined-card.scss b/tokens/v0_160/_md-comp-outlined-card.scss new file mode 100644 index 0000000000..a46bbcc0aa --- /dev/null +++ b/tokens/v0_160/_md-comp-outlined-card.scss @@ -0,0 +1,65 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-medium'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'disabled-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'disabled-outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12), + 'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'dragged-outline-color': map.get($deps, 'md-sys-color', 'outline-variant'), + 'dragged-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'dragged-state-layer-opacity': + map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'), + 'focus-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'focus-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'hover-outline-color': map.get($deps, 'md-sys-color', 'outline-variant'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'outline-color': map.get($deps, 'md-sys-color', 'outline-variant'), + 'outline-width': if($exclude-hardcoded-values, null, 1px), + 'pressed-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'pressed-outline-color': map.get($deps, 'md-sys-color', 'outline-variant'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-outlined-icon-button.scss b/tokens/v0_160/_md-comp-outlined-icon-button.scss new file mode 100644 index 0000000000..358c067da2 --- /dev/null +++ b/tokens/v0_160/_md-comp-outlined-icon-button.scss @@ -0,0 +1,79 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'container-size': if($exclude-hardcoded-values, null, 40px), + 'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'disabled-selected-container-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-selected-container-opacity': + if($exclude-hardcoded-values, null, 0.12), + 'disabled-unselected-outline-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-unselected-outline-opacity': + if($exclude-hardcoded-values, null, 0.12), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'selected-container-color': + map.get($deps, 'md-sys-color', 'inverse-surface'), + 'selected-focus-icon-color': + map.get($deps, 'md-sys-color', 'inverse-on-surface'), + 'selected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'inverse-on-surface'), + 'selected-hover-icon-color': + map.get($deps, 'md-sys-color', 'inverse-on-surface'), + 'selected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'inverse-on-surface'), + 'selected-icon-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'), + 'selected-pressed-icon-color': + map.get($deps, 'md-sys-color', 'inverse-on-surface'), + 'selected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'inverse-on-surface'), + 'unselected-focus-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-hover-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'unselected-outline-width': if($exclude-hardcoded-values, null, 1px), + 'unselected-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface') + ); +} diff --git a/tokens/v0_160/_md-comp-outlined-menu-button.scss b/tokens/v0_160/_md-comp-outlined-menu-button.scss new file mode 100644 index 0000000000..faaf6ea96f --- /dev/null +++ b/tokens/v0_160/_md-comp-outlined-menu-button.scss @@ -0,0 +1,94 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-height': if($exclude-hardcoded-values, null, 40px), + 'disabled-container-opacity': if($exclude-hardcoded-values, null, 0.12), + 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), + 'disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-outline-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'hover-trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-menu-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'outline-width': if($exclude-hardcoded-values, null, 1px), + 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'pressed-trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'trailing-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'trailing-icon-size': if($exclude-hardcoded-values, null, 18px), + 'with-icon-disabled-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'with-icon-focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-leading-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-leading-icon-size': if($exclude-hardcoded-values, null, 18px), + 'with-icon-pressed-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary') + ); +} diff --git a/tokens/v0_160/_md-comp-outlined-segmented-button.scss b/tokens/v0_160/_md-comp-outlined-segmented-button.scss new file mode 100644 index 0000000000..5f26f0bb28 --- /dev/null +++ b/tokens/v0_160/_md-comp-outlined-segmented-button.scss @@ -0,0 +1,112 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-height': if($exclude-hardcoded-values, null, 40px), + 'disabled-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), + 'disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-segmented-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'outline-width': if($exclude-hardcoded-values, null, 1px), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'selected-container-color': + map.get($deps, 'md-sys-color', 'secondary-container'), + 'selected-focus-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-hover-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'selected-with-icon-icon-color': + map.get($deps, 'md-sys-color', 'on-secondary-container'), + 'shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'unselected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-with-icon-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px) + ); +} diff --git a/tokens/v0_160/_md-comp-outlined-select.scss b/tokens/v0_160/_md-comp-outlined-select.scss new file mode 100644 index 0000000000..152530b1fb --- /dev/null +++ b/tokens/v0_160/_md-comp-outlined-select.scss @@ -0,0 +1,262 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'menu-cascading-menu-indicator-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-cascading-menu-indicator-icon-size': + if($exclude-hardcoded-values, null, 24px), + 'menu-container-color': map.get($deps, 'md-sys-color', 'surface'), + 'menu-container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), + 'menu-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'menu-container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), + 'menu-container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'menu-divider-color': map.get($deps, 'md-sys-color', 'surface-variant'), + 'menu-divider-height': if($exclude-hardcoded-values, null, 1px), + 'menu-list-item-container-height': if($exclude-hardcoded-values, null, 48px), + 'menu-list-item-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'menu-list-item-label-text-font': + map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'menu-list-item-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'menu-list-item-label-text-size': + map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'menu-list-item-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'menu-list-item-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-select.menu.list-item.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'menu-list-item-label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'menu-list-item-selected-container-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'menu-list-item-with-leading-icon-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-list-item-with-leading-icon-leading-icon-size': + if($exclude-hardcoded-values, null, 24px), + 'menu-list-item-with-trailing-icon-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'menu-list-item-with-trailing-icon-trailing-icon-size': + if($exclude-hardcoded-values, null, 24px), + 'text-field-container-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'text-field-container-shape': + map.get($deps, 'md-sys-shape', 'corner-extra-small'), + 'text-field-disabled-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-input-text-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-disabled-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-label-text-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-disabled-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-leading-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-disabled-outline-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-outline-opacity': + if($exclude-hardcoded-values, null, 0.12), + 'text-field-disabled-outline-width': + if($exclude-hardcoded-values, null, 1px), + 'text-field-disabled-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-supporting-text-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-disabled-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-disabled-trailing-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'text-field-error-focus-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-error-focus-label-text-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-error-focus-outline-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-focus-supporting-text-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-focus-trailing-icon-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-hover-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-error-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-error-container'), + 'text-field-error-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-error-hover-outline-color': + map.get($deps, 'md-sys-color', 'on-error-container'), + 'text-field-error-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-error-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'text-field-error-hover-supporting-text-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-hover-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-error-container'), + 'text-field-error-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-error-label-text-color': map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-error-outline-color': map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-supporting-text-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-error-trailing-icon-color': + map.get($deps, 'md-sys-color', 'error'), + 'text-field-focus-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-focus-label-text-color': + map.get($deps, 'md-sys-color', 'primary'), + 'text-field-focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-focus-outline-color': map.get($deps, 'md-sys-color', 'primary'), + 'text-field-focus-outline-width': if($exclude-hardcoded-values, null, 2px), + 'text-field-focus-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-focus-trailing-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'text-field-hover-input-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-hover-outline-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-hover-outline-width': if($exclude-hardcoded-values, null, 1px), + 'text-field-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'text-field-hover-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-hover-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'text-field-input-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'text-field-input-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'text-field-input-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'text-field-input-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'text-field-input-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-select.text-field.input-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'text-field-input-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'text-field-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-label-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'text-field-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'text-field-label-text-populated-line-height': + map.get($deps, 'md-sys-typescale', 'body-small-line-height'), + 'text-field-label-text-populated-size': + map.get($deps, 'md-sys-typescale', 'body-small-size'), + 'text-field-label-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'text-field-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'text-field-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-select.text-field.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'text-field-label-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'text-field-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-leading-icon-size': if($exclude-hardcoded-values, null, 24px), + 'text-field-outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'text-field-outline-width': if($exclude-hardcoded-values, null, 1px), + 'text-field-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-supporting-text-font': + map.get($deps, 'md-sys-typescale', 'body-small-font'), + 'text-field-supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-small-line-height'), + 'text-field-supporting-text-size': + map.get($deps, 'md-sys-typescale', 'body-small-size'), + 'text-field-supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-small-tracking'), + 'text-field-supporting-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-select.text-field.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-small-weight') + map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-small-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-small-font') + ), + 'text-field-supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'body-small-weight'), + 'text-field-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'text-field-trailing-icon-size': if($exclude-hardcoded-values, null, 24px) + ); +} diff --git a/tokens/v0_160/_md-comp-outlined-text-field.scss b/tokens/v0_160/_md-comp-outlined-text-field.scss new file mode 100644 index 0000000000..6eea56c221 --- /dev/null +++ b/tokens/v0_160/_md-comp-outlined-text-field.scss @@ -0,0 +1,171 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-shape'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'caret-color': map.get($deps, 'md-sys-color', 'primary'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), + 'disabled-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-input-text-opacity': if($exclude-hardcoded-values, null, 0.38), + 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), + 'disabled-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-leading-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12), + 'disabled-outline-width': if($exclude-hardcoded-values, null, 1px), + 'disabled-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-supporting-text-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'error-focus-caret-color': map.get($deps, 'md-sys-color', 'error'), + 'error-focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'error-focus-label-text-color': map.get($deps, 'md-sys-color', 'error'), + 'error-focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'error-focus-outline-color': map.get($deps, 'md-sys-color', 'error'), + 'error-focus-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), + 'error-focus-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'), + 'error-hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'error-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-error-container'), + 'error-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'error-hover-outline-color': + map.get($deps, 'md-sys-color', 'on-error-container'), + 'error-hover-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), + 'error-hover-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-error-container'), + 'error-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'error-label-text-color': map.get($deps, 'md-sys-color', 'error'), + 'error-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'error-outline-color': map.get($deps, 'md-sys-color', 'error'), + 'error-supporting-text-color': map.get($deps, 'md-sys-color', 'error'), + 'error-trailing-icon-color': map.get($deps, 'md-sys-color', 'error'), + 'focus-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'focus-outline-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-outline-width': if($exclude-hardcoded-values, null, 2px), + 'focus-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'focus-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'hover-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'hover-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'hover-outline-width': if($exclude-hardcoded-values, null, 1px), + 'hover-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'hover-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'input-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'input-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'input-text-placeholder-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'input-text-prefix-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'input-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'input-text-suffix-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'input-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'input-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-text-field.input-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'input-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'label-text-populated-line-height': + map.get($deps, 'md-sys-typescale', 'body-small-line-height'), + 'label-text-populated-size': + map.get($deps, 'md-sys-typescale', 'body-small-size'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-text-field.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'label-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'leading-icon-size': if($exclude-hardcoded-values, null, 24px), + 'outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'outline-width': if($exclude-hardcoded-values, null, 1px), + 'supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'supporting-text-font': + map.get($deps, 'md-sys-typescale', 'body-small-font'), + 'supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-small-line-height'), + 'supporting-text-size': + map.get($deps, 'md-sys-typescale', 'body-small-size'), + 'supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-small-tracking'), + 'supporting-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.outlined-text-field.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-small-weight') + map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-small-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-small-font') + ), + 'supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'body-small-weight'), + 'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'trailing-icon-size': if($exclude-hardcoded-values, null, 24px) + ); +} diff --git a/tokens/v0_160/_md-comp-plain-tooltip.scss b/tokens/v0_160/_md-comp-plain-tooltip.scss new file mode 100644 index 0000000000..f7e9c7243d --- /dev/null +++ b/tokens/v0_160/_md-comp-plain-tooltip.scss @@ -0,0 +1,55 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-shape'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'inverse-surface'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), + 'supporting-text-color': + map.get($deps, 'md-sys-color', 'inverse-on-surface'), + 'supporting-text-font': + map.get($deps, 'md-sys-typescale', 'body-small-font'), + 'supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-small-line-height'), + 'supporting-text-size': + map.get($deps, 'md-sys-typescale', 'body-small-size'), + 'supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-small-tracking'), + 'supporting-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.plain-tooltip.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-small-weight') + map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-small-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-small-font') + ), + 'supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'body-small-weight') + ); +} diff --git a/tokens/v0_160/_md-comp-primary-navigation-tab.scss b/tokens/v0_160/_md-comp-primary-navigation-tab.scss new file mode 100644 index 0000000000..177b640ede --- /dev/null +++ b/tokens/v0_160/_md-comp-primary-navigation-tab.scss @@ -0,0 +1,121 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'active-indicator-color': map.get($deps, 'md-sys-color', 'primary'), + 'active-indicator-height': if($exclude-hardcoded-values, null, 3px), + 'active-indicator-shape': + if($exclude-hardcoded-values, null, (3px 3px 0px 0px)), + 'active-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'active-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'active-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'active-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'active-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'active-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'container-height': if($exclude-hardcoded-values, null, 48px), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), + 'inactive-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'inactive-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'inactive-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'inactive-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'inactive-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'with-icon-and-label-text-container-height': + if($exclude-hardcoded-values, null, 64px), + 'with-icon-active-focus-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-active-hover-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-active-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-active-pressed-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-icon-size': if($exclude-hardcoded-values, null, 24px), + 'with-icon-inactive-focus-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-icon-inactive-hover-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-icon-inactive-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'with-icon-inactive-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-label-text-active-focus-label-text-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-label-text-active-hover-label-text-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-label-text-active-label-text-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-label-text-active-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-label-text-inactive-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-label-text-inactive-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-label-text-inactive-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'with-label-text-inactive-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-label-text-label-text-font': + map.get($deps, 'md-sys-typescale', 'title-small-font'), + 'with-label-text-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'title-small-line-height'), + 'with-label-text-label-text-size': + map.get($deps, 'md-sys-typescale', 'title-small-size'), + 'with-label-text-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'title-small-tracking'), + 'with-label-text-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.primary-navigation-tab.with-label-text.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'title-small-weight') + map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'title-small-line-height' + ) map.get($deps, 'md-sys-typescale', 'title-small-font') + ), + 'with-label-text-label-text-weight': + map.get($deps, 'md-sys-typescale', 'title-small-weight') + ); +} diff --git a/tokens/v0_160/_md-comp-radio-button.scss b/tokens/v0_160/_md-comp-radio-button.scss new file mode 100644 index 0000000000..9d20041490 --- /dev/null +++ b/tokens/v0_160/_md-comp-radio-button.scss @@ -0,0 +1,68 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'disabled-selected-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-selected-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'disabled-unselected-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-unselected-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'icon-size': if($exclude-hardcoded-values, null, 20px), + 'selected-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'selected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'selected-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'selected-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'selected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'selected-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'selected-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'selected-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'selected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'selected-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'state-layer-size': if($exclude-hardcoded-values, null, 40px), + 'unselected-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'unselected-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'unselected-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'unselected-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity') + ); +} diff --git a/tokens/v0_160/_md-comp-rich-tooltip.scss b/tokens/v0_160/_md-comp-rich-tooltip.scss new file mode 100644 index 0000000000..d5741ff98d --- /dev/null +++ b/tokens/v0_160/_md-comp-rich-tooltip.scss @@ -0,0 +1,121 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'action-focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'action-focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'action-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'action-hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'action-hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'action-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'action-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'action-label-text-font': + map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'action-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'action-label-text-size': + map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'action-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'action-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.rich-tooltip.action.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'action-label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'action-pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'action-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'action-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level2'), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'subhead-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'subhead-font': map.get($deps, 'md-sys-typescale', 'title-small-font'), + 'subhead-line-height': + map.get($deps, 'md-sys-typescale', 'title-small-line-height'), + 'subhead-size': map.get($deps, 'md-sys-typescale', 'title-small-size'), + 'subhead-tracking': + map.get($deps, 'md-sys-typescale', 'title-small-tracking'), + 'subhead-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.rich-tooltip.subhead.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'title-small-weight') + map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'title-small-line-height' + ) map.get($deps, 'md-sys-typescale', 'title-small-font') + ), + 'subhead-weight': map.get($deps, 'md-sys-typescale', 'title-small-weight'), + 'supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'supporting-text-font': + map.get($deps, 'md-sys-typescale', 'body-medium-font'), + 'supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-medium-line-height'), + 'supporting-text-size': + map.get($deps, 'md-sys-typescale', 'body-medium-size'), + 'supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-medium-tracking'), + 'supporting-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.rich-tooltip.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-medium-weight') + map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-medium-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-medium-font') + ), + 'supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'body-medium-weight') + ); +} diff --git a/tokens/v0_160/_md-comp-scrim.scss b/tokens/v0_160/_md-comp-scrim.scss new file mode 100644 index 0000000000..aaebc468ae --- /dev/null +++ b/tokens/v0_160/_md-comp-scrim.scss @@ -0,0 +1,25 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'scrim'), + 'container-opacity': if($exclude-hardcoded-values, null, 0.32) + ); +} diff --git a/tokens/v0_160/_md-comp-search-bar.scss b/tokens/v0_160/_md-comp-search-bar.scss new file mode 100644 index 0000000000..d07910482e --- /dev/null +++ b/tokens/v0_160/_md-comp-search-bar.scss @@ -0,0 +1,99 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'avatar-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'avatar-size': if($exclude-hardcoded-values, null, 30px), + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-height': if($exclude-hardcoded-values, null, 56px), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'hover-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'input-text-font': map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'input-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'input-text-size': map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'input-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'input-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.search-bar.input-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'input-text-weight': map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'pressed-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'supporting-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'supporting-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'supporting-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.search-bar.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant') + ); +} diff --git a/tokens/v0_160/_md-comp-search-view.scss b/tokens/v0_160/_md-comp-search-view.scss new file mode 100644 index 0000000000..d0cebf6eb0 --- /dev/null +++ b/tokens/v0_160/_md-comp-search-view.scss @@ -0,0 +1,93 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'divider-color': map.get($deps, 'md-sys-color', 'outline'), + 'docked-container-shape': + map.get($deps, 'md-sys-shape', 'corner-extra-large'), + 'docked-header-container-height': if($exclude-hardcoded-values, null, 56px), + 'full-screen-container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), + 'full-screen-header-container-height': + if($exclude-hardcoded-values, null, 72px), + 'header-input-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'header-input-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'header-input-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'header-input-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'header-input-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'header-input-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.search-view.header.input-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'header-input-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'header-leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'header-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'header-supporting-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'header-supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'header-supporting-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'header-supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'header-supporting-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.search-view.header.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'header-supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'header-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant') + ); +} diff --git a/tokens/v0_160/_md-comp-secondary-navigation-tab.scss b/tokens/v0_160/_md-comp-secondary-navigation-tab.scss new file mode 100644 index 0000000000..d69a987dfd --- /dev/null +++ b/tokens/v0_160/_md-comp-secondary-navigation-tab.scss @@ -0,0 +1,84 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'active-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'container-height': if($exclude-hardcoded-values, null, 48px), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), + 'divider-color': map.get($deps, 'md-sys-color', 'surface-variant'), + 'divider-height': if($exclude-hardcoded-values, null, 1px), + 'focus-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'inactive-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'title-small-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'title-small-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'title-small-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'title-small-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.secondary-navigation-tab.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'title-small-weight') + map.get($deps, 'md-sys-typescale', 'title-small-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'title-small-line-height' + ) map.get($deps, 'md-sys-typescale', 'title-small-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'title-small-weight'), + 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'with-icon-active-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'with-icon-icon-size': if($exclude-hardcoded-values, null, 24px), + 'with-icon-inactive-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'on-surface') + ); +} diff --git a/tokens/v0_160/_md-comp-sheet-bottom.scss b/tokens/v0_160/_md-comp-sheet-bottom.scss new file mode 100644 index 0000000000..0f9d237560 --- /dev/null +++ b/tokens/v0_160/_md-comp-sheet-bottom.scss @@ -0,0 +1,45 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'docked-container-color': map.get($deps, 'md-sys-color', 'surface'), + 'docked-container-shape': + map.get($deps, 'md-sys-shape', 'corner-extra-large-top'), + 'docked-container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'docked-drag-handle-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'docked-drag-handle-height': if($exclude-hardcoded-values, null, 4px), + 'docked-drag-handle-opacity': if($exclude-hardcoded-values, null, 0.4), + 'docked-drag-handle-width': if($exclude-hardcoded-values, null, 32px), + 'docked-minimized-container-shape': + map.get($deps, 'md-sys-shape', 'corner-none'), + 'docked-modal-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'docked-standard-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1') + ); +} diff --git a/tokens/v0_160/_md-comp-sheet-floating.scss b/tokens/v0_160/_md-comp-sheet-floating.scss new file mode 100644 index 0000000000..2c2f1e810e --- /dev/null +++ b/tokens/v0_160/_md-comp-sheet-floating.scss @@ -0,0 +1,34 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), +); + +@function values($deps: $_default) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint') + ); +} diff --git a/tokens/v0_160/_md-comp-sheet-side.scss b/tokens/v0_160/_md-comp-sheet-side.scss new file mode 100644 index 0000000000..249d9be2c8 --- /dev/null +++ b/tokens/v0_160/_md-comp-sheet-side.scss @@ -0,0 +1,91 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'detached-container-shape': map.get($deps, 'md-sys-shape', 'corner-large'), + 'docked-action-focus-label-text-color': + map.get($deps, 'md-sys-color', 'primary'), + 'docked-action-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'docked-action-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'docked-action-hover-label-text-color': + map.get($deps, 'md-sys-color', 'primary'), + 'docked-action-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'docked-action-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'docked-action-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'primary'), + 'docked-action-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'docked-action-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'docked-container-color': map.get($deps, 'md-sys-color', 'surface'), + 'docked-container-height': if($exclude-hardcoded-values, null, 100%), + 'docked-container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), + 'docked-container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'docked-container-width': if($exclude-hardcoded-values, null, 256px), + 'docked-divider-color': map.get($deps, 'md-sys-color', 'outline'), + 'docked-headline-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'docked-headline-font': + map.get($deps, 'md-sys-typescale', 'title-large-font'), + 'docked-headline-line-height': + map.get($deps, 'md-sys-typescale', 'title-large-line-height'), + 'docked-headline-size': + map.get($deps, 'md-sys-typescale', 'title-large-size'), + 'docked-headline-tracking': + map.get($deps, 'md-sys-typescale', 'title-large-tracking'), + 'docked-headline-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.sheet.side.docked.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'title-large-weight') + map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'title-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'title-large-font') + ), + 'docked-headline-weight': + map.get($deps, 'md-sys-typescale', 'title-large-weight'), + 'docked-modal-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'docked-modal-container-shape': + map.get($deps, 'md-sys-shape', 'corner-large-start'), + 'docked-standard-container-elevation': + map.get($deps, 'md-sys-elevation', 'level0') + ); +} diff --git a/tokens/v0_160/_md-comp-slider.scss b/tokens/v0_160/_md-comp-slider.scss new file mode 100644 index 0000000000..605dc3ac04 --- /dev/null +++ b/tokens/v0_160/_md-comp-slider.scss @@ -0,0 +1,114 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'active-track-color': map.get($deps, 'md-sys-color', 'primary'), + 'active-track-height': if($exclude-hardcoded-values, null, 4px), + 'active-track-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'disabled-active-track-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-active-track-opacity': if($exclude-hardcoded-values, null, 0.38), + 'disabled-handle-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-handle-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'disabled-handle-opacity': if($exclude-hardcoded-values, null, 0.38), + 'disabled-inactive-track-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-inactive-track-opacity': if($exclude-hardcoded-values, null, 0.12), + 'focus-handle-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'handle-color': map.get($deps, 'md-sys-color', 'primary'), + 'handle-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'handle-height': if($exclude-hardcoded-values, null, 20px), + 'handle-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'handle-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'handle-width': if($exclude-hardcoded-values, null, 20px), + 'hover-handle-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'inactive-track-color': map.get($deps, 'md-sys-color', 'surface-variant'), + 'inactive-track-height': if($exclude-hardcoded-values, null, 4px), + 'inactive-track-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'label-container-color': map.get($deps, 'md-sys-color', 'primary'), + 'label-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'label-container-height': if($exclude-hardcoded-values, null, 28px), + 'label-label-text-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'label-label-text-font': + map.get($deps, 'md-sys-typescale', 'label-medium-font'), + 'label-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-medium-line-height'), + 'label-label-text-size': + map.get($deps, 'md-sys-typescale', 'label-medium-size'), + 'label-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-medium-tracking'), + 'label-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.slider.label.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-medium-weight') + map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-medium-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-medium-font') + ), + 'label-label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-medium-weight'), + 'pressed-handle-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'state-layer-size': if($exclude-hardcoded-values, null, 40px), + 'track-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'with-overlap-handle-outline-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'with-overlap-handle-outline-width': + if($exclude-hardcoded-values, null, 1px), + 'with-tick-marks-active-container-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'with-tick-marks-active-container-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'with-tick-marks-container-shape': + map.get($deps, 'md-sys-shape', 'corner-full'), + 'with-tick-marks-container-size': if($exclude-hardcoded-values, null, 2px), + 'with-tick-marks-disabled-container-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-tick-marks-disabled-container-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'with-tick-marks-inactive-container-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'with-tick-marks-inactive-container-opacity': + if($exclude-hardcoded-values, null, 0.38) + ); +} diff --git a/tokens/v0_160/_md-comp-snackbar.scss b/tokens/v0_160/_md-comp-snackbar.scss new file mode 100644 index 0000000000..f3d85ec092 --- /dev/null +++ b/tokens/v0_160/_md-comp-snackbar.scss @@ -0,0 +1,127 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'action-focus-label-text-color': + map.get($deps, 'md-sys-color', 'inverse-primary'), + 'action-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'inverse-primary'), + 'action-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'action-hover-label-text-color': + map.get($deps, 'md-sys-color', 'inverse-primary'), + 'action-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'inverse-primary'), + 'action-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'action-label-text-color': map.get($deps, 'md-sys-color', 'inverse-primary'), + 'action-label-text-font': + map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'action-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'action-label-text-size': + map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'action-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'action-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.snackbar.action.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'action-label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'action-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'inverse-primary'), + 'action-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'inverse-primary'), + 'action-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'container-color': map.get($deps, 'md-sys-color', 'inverse-surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-small'), + 'icon-color': map.get($deps, 'md-sys-color', 'inverse-on-surface'), + 'icon-focus-icon-color': + map.get($deps, 'md-sys-color', 'inverse-on-surface'), + 'icon-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'inverse-on-surface'), + 'icon-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'icon-hover-icon-color': + map.get($deps, 'md-sys-color', 'inverse-on-surface'), + 'icon-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'inverse-on-surface'), + 'icon-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'icon-pressed-icon-color': + map.get($deps, 'md-sys-color', 'inverse-on-surface'), + 'icon-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'inverse-on-surface'), + 'icon-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'icon-size': if($exclude-hardcoded-values, null, 24px), + 'supporting-text-color': + map.get($deps, 'md-sys-color', 'inverse-on-surface'), + 'supporting-text-font': + map.get($deps, 'md-sys-typescale', 'body-medium-font'), + 'supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-medium-line-height'), + 'supporting-text-size': + map.get($deps, 'md-sys-typescale', 'body-medium-size'), + 'supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-medium-tracking'), + 'supporting-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.snackbar.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-medium-weight') + map.get($deps, 'md-sys-typescale', 'body-medium-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-medium-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-medium-font') + ), + 'supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'body-medium-weight'), + 'with-single-line-container-height': + if($exclude-hardcoded-values, null, 48px), + 'with-two-lines-container-height': if($exclude-hardcoded-values, null, 68px) + ); +} diff --git a/tokens/v0_160/_md-comp-standard-menu-button.scss b/tokens/v0_160/_md-comp-standard-menu-button.scss new file mode 100644 index 0000000000..ffb6062386 --- /dev/null +++ b/tokens/v0_160/_md-comp-standard-menu-button.scss @@ -0,0 +1,98 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-height': if($exclude-hardcoded-values, null, 40px), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), + 'disabled-trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-trailing-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'focus-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'hover-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.standard-menu-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'pressed-trailing-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'trailing-icon-size': if($exclude-hardcoded-values, null, 18px), + 'with-icon-disabled-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-icon-disabled-leading-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'with-icon-focus-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'with-icon-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'with-icon-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'with-icon-leading-icon-size': if($exclude-hardcoded-values, null, 18px), + 'with-icon-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-surface-variant') + ); +} diff --git a/tokens/v0_160/_md-comp-suggestion-chip.scss b/tokens/v0_160/_md-comp-suggestion-chip.scss new file mode 100644 index 0000000000..4bc060530e --- /dev/null +++ b/tokens/v0_160/_md-comp-suggestion-chip.scss @@ -0,0 +1,125 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-height': if($exclude-hardcoded-values, null, 32px), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-small'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), + 'dragged-container-elevation': map.get($deps, 'md-sys-elevation', 'level4'), + 'dragged-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'dragged-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'dragged-state-layer-opacity': + map.get($deps, 'md-sys-state', 'dragged-state-layer-opacity'), + 'elevated-container-color': map.get($deps, 'md-sys-color', 'surface'), + 'elevated-container-elevation': map.get($deps, 'md-sys-elevation', 'level1'), + 'elevated-container-shadow-color': map.get($deps, 'md-sys-color', 'shadow'), + 'elevated-disabled-container-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'elevated-disabled-container-elevation': + map.get($deps, 'md-sys-elevation', 'level0'), + 'elevated-disabled-container-opacity': + if($exclude-hardcoded-values, null, 0.12), + 'elevated-focus-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'elevated-hover-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'elevated-pressed-container-elevation': + map.get($deps, 'md-sys-elevation', 'level1'), + 'flat-container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'flat-disabled-outline-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'flat-disabled-outline-opacity': if($exclude-hardcoded-values, null, 0.12), + 'flat-focus-outline-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'flat-outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'flat-outline-width': if($exclude-hardcoded-values, null, 1px), + 'focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'label-text-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.suggestion-chip.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'with-leading-icon-disabled-leading-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-leading-icon-disabled-leading-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'with-leading-icon-dragged-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-leading-icon-focus-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-leading-icon-hover-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-leading-icon-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary'), + 'with-leading-icon-leading-icon-size': + if($exclude-hardcoded-values, null, 18px), + 'with-leading-icon-pressed-leading-icon-color': + map.get($deps, 'md-sys-color', 'primary') + ); +} diff --git a/tokens/v0_160/_md-comp-switch.scss b/tokens/v0_160/_md-comp-switch.scss new file mode 100644 index 0000000000..8e0aa493c4 --- /dev/null +++ b/tokens/v0_160/_md-comp-switch.scss @@ -0,0 +1,136 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'disabled-selected-handle-color': map.get($deps, 'md-sys-color', 'surface'), + 'disabled-selected-handle-opacity': if($exclude-hardcoded-values, null, 1), + 'disabled-selected-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-selected-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'disabled-selected-track-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-track-opacity': if($exclude-hardcoded-values, null, 0.12), + 'disabled-unselected-handle-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-unselected-handle-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'disabled-unselected-icon-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'disabled-unselected-icon-opacity': + if($exclude-hardcoded-values, null, 0.38), + 'disabled-unselected-track-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'disabled-unselected-track-outline-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'handle-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'pressed-handle-height': if($exclude-hardcoded-values, null, 28px), + 'pressed-handle-width': if($exclude-hardcoded-values, null, 28px), + 'selected-focus-handle-color': + map.get($deps, 'md-sys-color', 'primary-container'), + 'selected-focus-icon-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'selected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'selected-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'selected-focus-track-color': map.get($deps, 'md-sys-color', 'primary'), + 'selected-handle-color': map.get($deps, 'md-sys-color', 'on-primary'), + 'selected-handle-height': if($exclude-hardcoded-values, null, 24px), + 'selected-handle-width': if($exclude-hardcoded-values, null, 24px), + 'selected-hover-handle-color': + map.get($deps, 'md-sys-color', 'primary-container'), + 'selected-hover-icon-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'selected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'selected-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'selected-hover-track-color': map.get($deps, 'md-sys-color', 'primary'), + 'selected-icon-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'selected-icon-size': if($exclude-hardcoded-values, null, 16px), + 'selected-pressed-handle-color': + map.get($deps, 'md-sys-color', 'primary-container'), + 'selected-pressed-icon-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'selected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'primary'), + 'selected-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'selected-pressed-track-color': map.get($deps, 'md-sys-color', 'primary'), + 'selected-track-color': map.get($deps, 'md-sys-color', 'primary'), + 'state-layer-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'state-layer-size': if($exclude-hardcoded-values, null, 40px), + 'track-height': if($exclude-hardcoded-values, null, 32px), + 'track-outline-width': if($exclude-hardcoded-values, null, 2px), + 'track-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'track-width': if($exclude-hardcoded-values, null, 52px), + 'unselected-focus-handle-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-focus-icon-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'unselected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'unselected-focus-track-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'unselected-focus-track-outline-color': + map.get($deps, 'md-sys-color', 'outline'), + 'unselected-handle-color': map.get($deps, 'md-sys-color', 'outline'), + 'unselected-handle-height': if($exclude-hardcoded-values, null, 16px), + 'unselected-handle-width': if($exclude-hardcoded-values, null, 16px), + 'unselected-hover-handle-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-hover-icon-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'unselected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'unselected-hover-track-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'unselected-hover-track-outline-color': + map.get($deps, 'md-sys-color', 'outline'), + 'unselected-icon-color': map.get($deps, 'md-sys-color', 'surface-variant'), + 'unselected-icon-size': if($exclude-hardcoded-values, null, 16px), + 'unselected-pressed-handle-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'unselected-pressed-icon-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'unselected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'unselected-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'unselected-pressed-track-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'unselected-pressed-track-outline-color': + map.get($deps, 'md-sys-color', 'outline'), + 'unselected-track-color': map.get($deps, 'md-sys-color', 'surface-variant'), + 'unselected-track-outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'with-icon-handle-height': if($exclude-hardcoded-values, null, 24px), + 'with-icon-handle-width': if($exclude-hardcoded-values, null, 24px) + ); +} diff --git a/tokens/v0_160/_md-comp-text-button.scss b/tokens/v0_160/_md-comp-text-button.scss new file mode 100644 index 0000000000..b83f3a9373 --- /dev/null +++ b/tokens/v0_160/_md-comp-text-button.scss @@ -0,0 +1,77 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-height': if($exclude-hardcoded-values, null, 40px), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'disabled-label-text-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'disabled-label-text-opacity': if($exclude-hardcoded-values, null, 0.38), + 'focus-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'hover-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'label-text-font': map.get($deps, 'md-sys-typescale', 'label-large-font'), + 'label-text-line-height': + map.get($deps, 'md-sys-typescale', 'label-large-line-height'), + 'label-text-size': map.get($deps, 'md-sys-typescale', 'label-large-size'), + 'label-text-tracking': + map.get($deps, 'md-sys-typescale', 'label-large-tracking'), + 'label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.text-button.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-large-weight') + map.get($deps, 'md-sys-typescale', 'label-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-large-font') + ), + 'label-text-weight': + map.get($deps, 'md-sys-typescale', 'label-large-weight'), + 'pressed-label-text-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-color': map.get($deps, 'md-sys-color', 'primary'), + 'pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'with-icon-disabled-icon-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'with-icon-disabled-icon-opacity': if($exclude-hardcoded-values, null, 0.38), + 'with-icon-focus-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-hover-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-icon-color': map.get($deps, 'md-sys-color', 'primary'), + 'with-icon-icon-size': if($exclude-hardcoded-values, null, 18px), + 'with-icon-pressed-icon-color': map.get($deps, 'md-sys-color', 'primary') + ); +} diff --git a/tokens/v0_160/_md-comp-time-input.scss b/tokens/v0_160/_md-comp-time-input.scss new file mode 100644 index 0000000000..fcd337cb37 --- /dev/null +++ b/tokens/v0_160/_md-comp-time-input.scss @@ -0,0 +1,218 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), + 'headline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'headline-font': map.get($deps, 'md-sys-typescale', 'label-medium-font'), + 'headline-line-height': + map.get($deps, 'md-sys-typescale', 'label-medium-line-height'), + 'headline-size': map.get($deps, 'md-sys-typescale', 'label-medium-size'), + 'headline-tracking': + map.get($deps, 'md-sys-typescale', 'label-medium-tracking'), + 'headline-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-medium-weight') + map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-medium-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-medium-font') + ), + 'headline-weight': map.get($deps, 'md-sys-typescale', 'label-medium-weight'), + 'period-selector-container-height': + if($exclude-hardcoded-values, null, 72px), + 'period-selector-container-shape': + map.get($deps, 'md-sys-shape', 'corner-small'), + 'period-selector-container-width': if($exclude-hardcoded-values, null, 52px), + 'period-selector-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'period-selector-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'period-selector-label-text-font': + map.get($deps, 'md-sys-typescale', 'title-medium-font'), + 'period-selector-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'title-medium-line-height'), + 'period-selector-label-text-size': + map.get($deps, 'md-sys-typescale', 'title-medium-size'), + 'period-selector-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'title-medium-tracking'), + 'period-selector-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.period-selector.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'title-medium-weight') + map.get($deps, 'md-sys-typescale', 'title-medium-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'title-medium-line-height' + ) map.get($deps, 'md-sys-typescale', 'title-medium-font') + ), + 'period-selector-label-text-weight': + map.get($deps, 'md-sys-typescale', 'title-medium-weight'), + 'period-selector-outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'period-selector-outline-width': if($exclude-hardcoded-values, null, 1px), + 'period-selector-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'period-selector-selected-container-color': + map.get($deps, 'md-sys-color', 'tertiary-container'), + 'period-selector-selected-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'period-selector-selected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'period-selector-selected-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'period-selector-selected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'period-selector-selected-label-text-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'period-selector-selected-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'period-selector-selected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'period-selector-unselected-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'period-selector-unselected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'period-selector-unselected-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'period-selector-unselected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'period-selector-unselected-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'period-selector-unselected-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'period-selector-unselected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'surface-tint-layer-color': map.get($deps, 'md-sys-color', 'surface-tint'), + 'time-input-field-container-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'time-input-field-container-height': + if($exclude-hardcoded-values, null, 72px), + 'time-input-field-container-shape': + map.get($deps, 'md-sys-shape', 'corner-small'), + 'time-input-field-container-width': + if($exclude-hardcoded-values, null, 96px), + 'time-input-field-focus-container-color': + map.get($deps, 'md-sys-color', 'primary-container'), + 'time-input-field-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'time-input-field-focus-outline-color': + map.get($deps, 'md-sys-color', 'primary'), + 'time-input-field-focus-outline-width': + if($exclude-hardcoded-values, null, 2px), + 'time-input-field-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'time-input-field-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'time-input-field-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'time-input-field-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'time-input-field-label-text-font': + map.get($deps, 'md-sys-typescale', 'display-medium-font'), + 'time-input-field-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'display-medium-line-height'), + 'time-input-field-label-text-size': + map.get($deps, 'md-sys-typescale', 'display-medium-size'), + 'time-input-field-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'display-medium-tracking'), + 'time-input-field-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.time-input-field.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'display-medium-weight') + map.get($deps, 'md-sys-typescale', 'display-medium-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'display-medium-line-height' + ) map.get($deps, 'md-sys-typescale', 'display-medium-font') + ), + 'time-input-field-label-text-weight': + map.get($deps, 'md-sys-typescale', 'display-medium-weight'), + 'time-input-field-separator-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'time-input-field-separator-font': + map.get($deps, 'md-sys-typescale', 'display-large-font'), + 'time-input-field-separator-line-height': + map.get($deps, 'md-sys-typescale', 'display-large-line-height'), + 'time-input-field-separator-size': + map.get($deps, 'md-sys-typescale', 'display-large-size'), + 'time-input-field-separator-tracking': + map.get($deps, 'md-sys-typescale', 'display-large-tracking'), + 'time-input-field-separator-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.time-input-field.separator.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'display-large-weight') + map.get($deps, 'md-sys-typescale', 'display-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'display-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'display-large-font') + ), + 'time-input-field-separator-weight': + map.get($deps, 'md-sys-typescale', 'display-large-weight'), + 'time-input-field-supporting-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'time-input-field-supporting-text-font': + map.get($deps, 'md-sys-typescale', 'body-small-font'), + 'time-input-field-supporting-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-small-line-height'), + 'time-input-field-supporting-text-size': + map.get($deps, 'md-sys-typescale', 'body-small-size'), + 'time-input-field-supporting-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-small-tracking'), + 'time-input-field-supporting-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-input.time-input-field.supporting-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-small-weight') + map.get($deps, 'md-sys-typescale', 'body-small-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-small-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-small-font') + ), + 'time-input-field-supporting-text-weight': + map.get($deps, 'md-sys-typescale', 'body-small-weight') + ); +} diff --git a/tokens/v0_160/_md-comp-time-picker.scss b/tokens/v0_160/_md-comp-time-picker.scss new file mode 100644 index 0000000000..6aa0355052 --- /dev/null +++ b/tokens/v0_160/_md-comp-time-picker.scss @@ -0,0 +1,264 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-state'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-state': md-sys-state.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'clock-dial-color': map.get($deps, 'md-sys-color', 'surface-variant'), + 'clock-dial-container-size': if($exclude-hardcoded-values, null, 256px), + 'clock-dial-label-text-font': + map.get($deps, 'md-sys-typescale', 'body-large-font'), + 'clock-dial-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'body-large-line-height'), + 'clock-dial-label-text-size': + map.get($deps, 'md-sys-typescale', 'body-large-size'), + 'clock-dial-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'body-large-tracking'), + 'clock-dial-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.clock-dial.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'body-large-weight') + map.get($deps, 'md-sys-typescale', 'body-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'body-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'body-large-font') + ), + 'clock-dial-label-text-weight': + map.get($deps, 'md-sys-typescale', 'body-large-weight'), + 'clock-dial-selected-label-text-color': + map.get($deps, 'md-sys-color', 'on-primary'), + 'clock-dial-selector-center-container-color': + map.get($deps, 'md-sys-color', 'primary'), + 'clock-dial-selector-center-container-shape': + map.get($deps, 'md-sys-shape', 'corner-full'), + 'clock-dial-selector-center-container-size': + if($exclude-hardcoded-values, null, 8px), + 'clock-dial-selector-handle-container-color': + map.get($deps, 'md-sys-color', 'primary'), + 'clock-dial-selector-handle-container-shape': + map.get($deps, 'md-sys-shape', 'corner-full'), + 'clock-dial-selector-handle-container-size': + if($exclude-hardcoded-values, null, 48px), + 'clock-dial-selector-track-container-color': + map.get($deps, 'md-sys-color', 'primary'), + 'clock-dial-selector-track-container-width': + if($exclude-hardcoded-values, null, 2px), + 'clock-dial-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'clock-dial-unselected-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level3'), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-extra-large'), + 'headline-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'headline-font': map.get($deps, 'md-sys-typescale', 'label-medium-font'), + 'headline-line-height': + map.get($deps, 'md-sys-typescale', 'label-medium-line-height'), + 'headline-size': map.get($deps, 'md-sys-typescale', 'label-medium-size'), + 'headline-tracking': + map.get($deps, 'md-sys-typescale', 'label-medium-tracking'), + 'headline-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'label-medium-weight') + map.get($deps, 'md-sys-typescale', 'label-medium-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'label-medium-line-height' + ) map.get($deps, 'md-sys-typescale', 'label-medium-font') + ), + 'headline-weight': map.get($deps, 'md-sys-typescale', 'label-medium-weight'), + 'period-selector-container-shape': + map.get($deps, 'md-sys-shape', 'corner-small'), + 'period-selector-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'period-selector-horizontal-container-height': + if($exclude-hardcoded-values, null, 38px), + 'period-selector-horizontal-container-width': + if($exclude-hardcoded-values, null, 216px), + 'period-selector-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'period-selector-label-text-font': + map.get($deps, 'md-sys-typescale', 'title-medium-font'), + 'period-selector-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'title-medium-line-height'), + 'period-selector-label-text-size': + map.get($deps, 'md-sys-typescale', 'title-medium-size'), + 'period-selector-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'title-medium-tracking'), + 'period-selector-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.period-selector.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'title-medium-weight') + map.get($deps, 'md-sys-typescale', 'title-medium-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'title-medium-line-height' + ) map.get($deps, 'md-sys-typescale', 'title-medium-font') + ), + 'period-selector-label-text-weight': + map.get($deps, 'md-sys-typescale', 'title-medium-weight'), + 'period-selector-outline-color': map.get($deps, 'md-sys-color', 'outline'), + 'period-selector-outline-width': if($exclude-hardcoded-values, null, 1px), + 'period-selector-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'period-selector-selected-container-color': + map.get($deps, 'md-sys-color', 'tertiary-container'), + 'period-selector-selected-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'period-selector-selected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'period-selector-selected-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'period-selector-selected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'period-selector-selected-label-text-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'period-selector-selected-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'period-selector-selected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-tertiary-container'), + 'period-selector-unselected-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'period-selector-unselected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'period-selector-unselected-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'period-selector-unselected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'period-selector-unselected-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'period-selector-unselected-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'period-selector-unselected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'period-selector-vertical-container-height': + if($exclude-hardcoded-values, null, 80px), + 'period-selector-vertical-container-width': + if($exclude-hardcoded-values, null, 52px), + 'surface-tint-layer-color': map.get($deps, 'md-sys-color', 'surface-tint'), + 'time-selector-24h-vertical-container-width': + if($exclude-hardcoded-values, null, 114px), + 'time-selector-container-height': if($exclude-hardcoded-values, null, 80px), + 'time-selector-container-shape': + map.get($deps, 'md-sys-shape', 'corner-small'), + 'time-selector-container-width': if($exclude-hardcoded-values, null, 96px), + 'time-selector-focus-state-layer-opacity': + map.get($deps, 'md-sys-state', 'focus-state-layer-opacity'), + 'time-selector-hover-state-layer-opacity': + map.get($deps, 'md-sys-state', 'hover-state-layer-opacity'), + 'time-selector-label-text-font': + map.get($deps, 'md-sys-typescale', 'display-large-font'), + 'time-selector-label-text-line-height': + map.get($deps, 'md-sys-typescale', 'display-large-line-height'), + 'time-selector-label-text-size': + map.get($deps, 'md-sys-typescale', 'display-large-size'), + 'time-selector-label-text-tracking': + map.get($deps, 'md-sys-typescale', 'display-large-tracking'), + 'time-selector-label-text-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.time-selector.label-text.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'display-large-weight') + map.get($deps, 'md-sys-typescale', 'display-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'display-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'display-large-font') + ), + 'time-selector-label-text-weight': + map.get($deps, 'md-sys-typescale', 'display-large-weight'), + 'time-selector-pressed-state-layer-opacity': + map.get($deps, 'md-sys-state', 'pressed-state-layer-opacity'), + 'time-selector-selected-container-color': + map.get($deps, 'md-sys-color', 'primary-container'), + 'time-selector-selected-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'time-selector-selected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'time-selector-selected-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'time-selector-selected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'time-selector-selected-label-text-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'time-selector-selected-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'time-selector-selected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-primary-container'), + 'time-selector-separator-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'time-selector-separator-font': + map.get($deps, 'md-sys-typescale', 'display-large-font'), + 'time-selector-separator-line-height': + map.get($deps, 'md-sys-typescale', 'display-large-line-height'), + 'time-selector-separator-size': + map.get($deps, 'md-sys-typescale', 'display-large-size'), + 'time-selector-separator-tracking': + map.get($deps, 'md-sys-typescale', 'display-large-tracking'), + 'time-selector-separator-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.time-picker.time-selector.separator.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'display-large-weight') + map.get($deps, 'md-sys-typescale', 'display-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'display-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'display-large-font') + ), + 'time-selector-separator-weight': + map.get($deps, 'md-sys-typescale', 'display-large-weight'), + 'time-selector-unselected-container-color': + map.get($deps, 'md-sys-color', 'surface-variant'), + 'time-selector-unselected-focus-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'time-selector-unselected-focus-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'time-selector-unselected-hover-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'time-selector-unselected-hover-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'time-selector-unselected-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'time-selector-unselected-pressed-label-text-color': + map.get($deps, 'md-sys-color', 'on-surface'), + 'time-selector-unselected-pressed-state-layer-color': + map.get($deps, 'md-sys-color', 'on-surface') + ); +} diff --git a/tokens/v0_160/_md-comp-top-app-bar-large.scss b/tokens/v0_160/_md-comp-top-app-bar-large.scss new file mode 100644 index 0000000000..85fcbe8216 --- /dev/null +++ b/tokens/v0_160/_md-comp-top-app-bar-large.scss @@ -0,0 +1,63 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'container-height': if($exclude-hardcoded-values, null, 152px), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'headline-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'headline-font': map.get($deps, 'md-sys-typescale', 'headline-medium-font'), + 'headline-line-height': + map.get($deps, 'md-sys-typescale', 'headline-medium-line-height'), + 'headline-size': map.get($deps, 'md-sys-typescale', 'headline-medium-size'), + 'headline-tracking': + map.get($deps, 'md-sys-typescale', 'headline-medium-tracking'), + 'headline-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.top-app-bar.large.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'headline-medium-weight') + map.get($deps, 'md-sys-typescale', 'headline-medium-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'headline-medium-line-height' + ) map.get($deps, 'md-sys-typescale', 'headline-medium-font') + ), + 'headline-weight': + map.get($deps, 'md-sys-typescale', 'headline-medium-weight'), + 'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'leading-icon-size': if($exclude-hardcoded-values, null, 24px), + 'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'trailing-icon-size': if($exclude-hardcoded-values, null, 24px) + ); +} diff --git a/tokens/v0_160/_md-comp-top-app-bar-medium.scss b/tokens/v0_160/_md-comp-top-app-bar-medium.scss new file mode 100644 index 0000000000..fe23401de7 --- /dev/null +++ b/tokens/v0_160/_md-comp-top-app-bar-medium.scss @@ -0,0 +1,63 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'container-height': if($exclude-hardcoded-values, null, 112px), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'headline-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'headline-font': map.get($deps, 'md-sys-typescale', 'headline-small-font'), + 'headline-line-height': + map.get($deps, 'md-sys-typescale', 'headline-small-line-height'), + 'headline-size': map.get($deps, 'md-sys-typescale', 'headline-small-size'), + 'headline-tracking': + map.get($deps, 'md-sys-typescale', 'headline-small-tracking'), + 'headline-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.top-app-bar.medium.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'headline-small-weight') + map.get($deps, 'md-sys-typescale', 'headline-small-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'headline-small-line-height' + ) map.get($deps, 'md-sys-typescale', 'headline-small-font') + ), + 'headline-weight': + map.get($deps, 'md-sys-typescale', 'headline-small-weight'), + 'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'leading-icon-size': if($exclude-hardcoded-values, null, 24px), + 'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'trailing-icon-size': if($exclude-hardcoded-values, null, 24px) + ); +} diff --git a/tokens/v0_160/_md-comp-top-app-bar-small-centered.scss b/tokens/v0_160/_md-comp-top-app-bar-small-centered.scss new file mode 100644 index 0000000000..4c01c355f7 --- /dev/null +++ b/tokens/v0_160/_md-comp-top-app-bar-small-centered.scss @@ -0,0 +1,66 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'avatar-shape': map.get($deps, 'md-sys-shape', 'corner-full'), + 'avatar-size': if($exclude-hardcoded-values, null, 30px), + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'container-height': if($exclude-hardcoded-values, null, 64px), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'headline-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'headline-font': map.get($deps, 'md-sys-typescale', 'title-large-font'), + 'headline-line-height': + map.get($deps, 'md-sys-typescale', 'title-large-line-height'), + 'headline-size': map.get($deps, 'md-sys-typescale', 'title-large-size'), + 'headline-tracking': + map.get($deps, 'md-sys-typescale', 'title-large-tracking'), + 'headline-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.top-app-bar.small.centered.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'title-large-weight') + map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'title-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'title-large-font') + ), + 'headline-weight': map.get($deps, 'md-sys-typescale', 'title-large-weight'), + 'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'leading-icon-size': if($exclude-hardcoded-values, null, 24px), + 'on-scroll-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'trailing-icon-size': if($exclude-hardcoded-values, null, 24px) + ); +} diff --git a/tokens/v0_160/_md-comp-top-app-bar-small.scss b/tokens/v0_160/_md-comp-top-app-bar-small.scss new file mode 100644 index 0000000000..de4b2c6f8e --- /dev/null +++ b/tokens/v0_160/_md-comp-top-app-bar-small.scss @@ -0,0 +1,64 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@use 'sass:map'; + +@use './md-sys-color'; + +@use './md-sys-elevation'; + +@use './md-sys-shape'; + +@use './md-sys-typescale'; + +$_default: ( + 'md-sys-color': md-sys-color.values-light(), + 'md-sys-elevation': md-sys-elevation.values(), + 'md-sys-shape': md-sys-shape.values(), + 'md-sys-typescale': md-sys-typescale.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'container-color': map.get($deps, 'md-sys-color', 'surface'), + 'container-elevation': map.get($deps, 'md-sys-elevation', 'level0'), + 'container-height': if($exclude-hardcoded-values, null, 64px), + 'container-shape': map.get($deps, 'md-sys-shape', 'corner-none'), + 'container-surface-tint-layer-color': + map.get($deps, 'md-sys-color', 'surface-tint'), + 'headline-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'headline-font': map.get($deps, 'md-sys-typescale', 'title-large-font'), + 'headline-line-height': + map.get($deps, 'md-sys-typescale', 'title-large-line-height'), + 'headline-size': map.get($deps, 'md-sys-typescale', 'title-large-size'), + 'headline-tracking': + map.get($deps, 'md-sys-typescale', 'title-large-tracking'), + 'headline-type': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.comp.top-app-bar.small.headline.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-sys-typescale', 'title-large-weight') + map.get($deps, 'md-sys-typescale', 'title-large-size') #{'/'} map.get( + $deps, + 'md-sys-typescale', + 'title-large-line-height' + ) map.get($deps, 'md-sys-typescale', 'title-large-font') + ), + 'headline-weight': map.get($deps, 'md-sys-typescale', 'title-large-weight'), + 'leading-icon-color': map.get($deps, 'md-sys-color', 'on-surface'), + 'leading-icon-size': if($exclude-hardcoded-values, null, 24px), + 'on-scroll-container-elevation': + map.get($deps, 'md-sys-elevation', 'level2'), + 'trailing-icon-color': map.get($deps, 'md-sys-color', 'on-surface-variant'), + 'trailing-icon-size': if($exclude-hardcoded-values, null, 24px) + ); +} diff --git a/tokens/v0_160/_md-ref-palette.scss b/tokens/v0_160/_md-ref-palette.scss new file mode 100644 index 0000000000..75b6239956 --- /dev/null +++ b/tokens/v0_160/_md-ref-palette.scss @@ -0,0 +1,107 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// User-configured context group "Audience": "3P" +// + +@function values($exclude-hardcoded-values: false) { + @return ( + 'black': if($exclude-hardcoded-values, null, #000), + 'error0': if($exclude-hardcoded-values, null, #000), + 'error10': if($exclude-hardcoded-values, null, #410e0b), + 'error100': if($exclude-hardcoded-values, null, #fff), + 'error20': if($exclude-hardcoded-values, null, #601410), + 'error30': if($exclude-hardcoded-values, null, #8c1d18), + 'error40': if($exclude-hardcoded-values, null, #b3261e), + 'error50': if($exclude-hardcoded-values, null, #dc362e), + 'error60': if($exclude-hardcoded-values, null, #e46962), + 'error70': if($exclude-hardcoded-values, null, #ec928e), + 'error80': if($exclude-hardcoded-values, null, #f2b8b5), + 'error90': if($exclude-hardcoded-values, null, #f9dedc), + 'error95': if($exclude-hardcoded-values, null, #fceeee), + 'error99': if($exclude-hardcoded-values, null, #fffbf9), + 'neutral-variant0': if($exclude-hardcoded-values, null, #000), + 'neutral-variant10': if($exclude-hardcoded-values, null, #1d1a22), + 'neutral-variant100': if($exclude-hardcoded-values, null, #fff), + 'neutral-variant20': if($exclude-hardcoded-values, null, #322f37), + 'neutral-variant30': if($exclude-hardcoded-values, null, #49454f), + 'neutral-variant40': if($exclude-hardcoded-values, null, #605d66), + 'neutral-variant50': if($exclude-hardcoded-values, null, #79747e), + 'neutral-variant60': if($exclude-hardcoded-values, null, #938f99), + 'neutral-variant70': if($exclude-hardcoded-values, null, #aea9b4), + 'neutral-variant80': if($exclude-hardcoded-values, null, #cac4d0), + 'neutral-variant90': if($exclude-hardcoded-values, null, #e7e0ec), + 'neutral-variant95': if($exclude-hardcoded-values, null, #f5eefa), + 'neutral-variant99': if($exclude-hardcoded-values, null, #fffbfe), + 'neutral0': if($exclude-hardcoded-values, null, #000), + 'neutral10': if($exclude-hardcoded-values, null, #1c1b1f), + 'neutral100': if($exclude-hardcoded-values, null, #fff), + 'neutral12': if($exclude-hardcoded-values, null, #201f23), + 'neutral17': if($exclude-hardcoded-values, null, #2b292d), + 'neutral20': if($exclude-hardcoded-values, null, #313033), + 'neutral22': if($exclude-hardcoded-values, null, #313033), + 'neutral24': if($exclude-hardcoded-values, null, #313033), + 'neutral30': if($exclude-hardcoded-values, null, #484649), + 'neutral4': if($exclude-hardcoded-values, null, #0e0e11), + 'neutral40': if($exclude-hardcoded-values, null, #605d62), + 'neutral50': if($exclude-hardcoded-values, null, #787579), + 'neutral6': if($exclude-hardcoded-values, null, #141317), + 'neutral60': if($exclude-hardcoded-values, null, #939094), + 'neutral70': if($exclude-hardcoded-values, null, #aeaaae), + 'neutral80': if($exclude-hardcoded-values, null, #c9c5ca), + 'neutral87': if($exclude-hardcoded-values, null, #ddd8dd), + 'neutral90': if($exclude-hardcoded-values, null, #e6e1e5), + 'neutral92': if($exclude-hardcoded-values, null, #ece7ec), + 'neutral94': if($exclude-hardcoded-values, null, #f1ecf1), + 'neutral95': if($exclude-hardcoded-values, null, #f4eff4), + 'neutral96': if($exclude-hardcoded-values, null, #f7f2f7), + 'neutral98': if($exclude-hardcoded-values, null, #fdf8fd), + 'neutral99': if($exclude-hardcoded-values, null, #fffbfe), + 'primary0': if($exclude-hardcoded-values, null, #000), + 'primary10': if($exclude-hardcoded-values, null, #21005d), + 'primary100': if($exclude-hardcoded-values, null, #fff), + 'primary20': if($exclude-hardcoded-values, null, #381e72), + 'primary30': if($exclude-hardcoded-values, null, #4f378b), + 'primary40': if($exclude-hardcoded-values, null, #6750a4), + 'primary50': if($exclude-hardcoded-values, null, #7f67be), + 'primary60': if($exclude-hardcoded-values, null, #9a82db), + 'primary70': if($exclude-hardcoded-values, null, #b69df8), + 'primary80': if($exclude-hardcoded-values, null, #d0bcff), + 'primary90': if($exclude-hardcoded-values, null, #eaddff), + 'primary95': if($exclude-hardcoded-values, null, #f6edff), + 'primary99': if($exclude-hardcoded-values, null, #fffbfe), + 'secondary0': if($exclude-hardcoded-values, null, #000), + 'secondary10': if($exclude-hardcoded-values, null, #1d192b), + 'secondary100': if($exclude-hardcoded-values, null, #fff), + 'secondary20': if($exclude-hardcoded-values, null, #332d41), + 'secondary30': if($exclude-hardcoded-values, null, #4a4458), + 'secondary40': if($exclude-hardcoded-values, null, #625b71), + 'secondary50': if($exclude-hardcoded-values, null, #7a7289), + 'secondary60': if($exclude-hardcoded-values, null, #958da5), + 'secondary70': if($exclude-hardcoded-values, null, #b0a7c0), + 'secondary80': if($exclude-hardcoded-values, null, #ccc2dc), + 'secondary90': if($exclude-hardcoded-values, null, #e8def8), + 'secondary95': if($exclude-hardcoded-values, null, #f6edff), + 'secondary99': if($exclude-hardcoded-values, null, #fffbfe), + 'tertiary0': if($exclude-hardcoded-values, null, #000), + 'tertiary10': if($exclude-hardcoded-values, null, #31111d), + 'tertiary100': if($exclude-hardcoded-values, null, #fff), + 'tertiary20': if($exclude-hardcoded-values, null, #492532), + 'tertiary30': if($exclude-hardcoded-values, null, #633b48), + 'tertiary40': if($exclude-hardcoded-values, null, #7d5260), + 'tertiary50': if($exclude-hardcoded-values, null, #986977), + 'tertiary60': if($exclude-hardcoded-values, null, #b58392), + 'tertiary70': if($exclude-hardcoded-values, null, #d29dac), + 'tertiary80': if($exclude-hardcoded-values, null, #efb8c8), + 'tertiary90': if($exclude-hardcoded-values, null, #ffd8e4), + 'tertiary95': if($exclude-hardcoded-values, null, #ffecf1), + 'tertiary99': if($exclude-hardcoded-values, null, #fffbfa), + 'white': if($exclude-hardcoded-values, null, #fff) + ); +} diff --git a/tokens/v0_160/_md-ref-typeface.scss b/tokens/v0_160/_md-ref-typeface.scss new file mode 100644 index 0000000000..77d854cdf8 --- /dev/null +++ b/tokens/v0_160/_md-ref-typeface.scss @@ -0,0 +1,21 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// User-configured context group "Audience": "3P" +// + +@function values($exclude-hardcoded-values: false) { + @return ( + 'brand': if($exclude-hardcoded-values, null, (Roboto)), + 'plain': if($exclude-hardcoded-values, null, (Roboto)), + 'weight-bold': if($exclude-hardcoded-values, null, 700), + 'weight-medium': if($exclude-hardcoded-values, null, 500), + 'weight-regular': if($exclude-hardcoded-values, null, 400) + ); +} diff --git a/tokens/v0_160/_md-sys-color.scss b/tokens/v0_160/_md-sys-color.scss new file mode 100644 index 0000000000..15abca4f27 --- /dev/null +++ b/tokens/v0_160/_md-sys-color.scss @@ -0,0 +1,904 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// User-configured context group "Audience": "3P" +// User-configured context group "Scheme": "Dynamic" +// + +@use 'sass:map'; + +@use './md-ref-palette'; + +$_default-dark: ( + 'md-ref-palette': md-ref-palette.values(), +); + +@function values-dark($deps: $_default-dark) { + @return ( + 'background': + if( + map.get($deps, 'md-ref-palette', 'neutral10'), + var( + --md-sys-color-background, + map.get($deps, 'md-ref-palette', 'neutral10') + ), + null + ), + 'error': + if( + map.get($deps, 'md-ref-palette', 'error80'), + var(--md-sys-color-error, map.get($deps, 'md-ref-palette', 'error80')), + null + ), + 'error-container': + if( + map.get($deps, 'md-ref-palette', 'error30'), + var( + --md-sys-color-error-container, + map.get($deps, 'md-ref-palette', 'error30') + ), + null + ), + 'inverse-on-surface': + if( + map.get($deps, 'md-ref-palette', 'neutral20'), + var( + --md-sys-color-inverse-on-surface, + map.get($deps, 'md-ref-palette', 'neutral20') + ), + null + ), + 'inverse-primary': + if( + map.get($deps, 'md-ref-palette', 'primary40'), + var( + --md-sys-color-inverse-primary, + map.get($deps, 'md-ref-palette', 'primary40') + ), + null + ), + 'inverse-surface': + if( + map.get($deps, 'md-ref-palette', 'neutral90'), + var( + --md-sys-color-inverse-surface, + map.get($deps, 'md-ref-palette', 'neutral90') + ), + null + ), + 'on-background': + if( + map.get($deps, 'md-ref-palette', 'neutral90'), + var( + --md-sys-color-on-background, + map.get($deps, 'md-ref-palette', 'neutral90') + ), + null + ), + 'on-error': + if( + map.get($deps, 'md-ref-palette', 'error20'), + var( + --md-sys-color-on-error, + map.get($deps, 'md-ref-palette', 'error20') + ), + null + ), + 'on-error-container': + if( + map.get($deps, 'md-ref-palette', 'error90'), + var( + --md-sys-color-on-error-container, + map.get($deps, 'md-ref-palette', 'error90') + ), + null + ), + 'on-primary': + if( + map.get($deps, 'md-ref-palette', 'primary20'), + var( + --md-sys-color-on-primary, + map.get($deps, 'md-ref-palette', 'primary20') + ), + null + ), + 'on-primary-container': + if( + map.get($deps, 'md-ref-palette', 'primary90'), + var( + --md-sys-color-on-primary-container, + map.get($deps, 'md-ref-palette', 'primary90') + ), + null + ), + 'on-primary-fixed': + if( + map.get($deps, 'md-ref-palette', 'primary10'), + var( + --md-sys-color-on-primary-fixed, + map.get($deps, 'md-ref-palette', 'primary10') + ), + null + ), + 'on-primary-fixed-variant': + if( + map.get($deps, 'md-ref-palette', 'primary30'), + var( + --md-sys-color-on-primary-fixed-variant, + map.get($deps, 'md-ref-palette', 'primary30') + ), + null + ), + 'on-secondary': + if( + map.get($deps, 'md-ref-palette', 'secondary20'), + var( + --md-sys-color-on-secondary, + map.get($deps, 'md-ref-palette', 'secondary20') + ), + null + ), + 'on-secondary-container': + if( + map.get($deps, 'md-ref-palette', 'secondary90'), + var( + --md-sys-color-on-secondary-container, + map.get($deps, 'md-ref-palette', 'secondary90') + ), + null + ), + 'on-secondary-fixed': + if( + map.get($deps, 'md-ref-palette', 'secondary10'), + var( + --md-sys-color-on-secondary-fixed, + map.get($deps, 'md-ref-palette', 'secondary10') + ), + null + ), + 'on-secondary-fixed-variant': + if( + map.get($deps, 'md-ref-palette', 'secondary30'), + var( + --md-sys-color-on-secondary-fixed-variant, + map.get($deps, 'md-ref-palette', 'secondary30') + ), + null + ), + 'on-surface': + if( + map.get($deps, 'md-ref-palette', 'neutral90'), + var( + --md-sys-color-on-surface, + map.get($deps, 'md-ref-palette', 'neutral90') + ), + null + ), + 'on-surface-variant': + if( + map.get($deps, 'md-ref-palette', 'neutral-variant80'), + var( + --md-sys-color-on-surface-variant, + map.get($deps, 'md-ref-palette', 'neutral-variant80') + ), + null + ), + 'on-tertiary': + if( + map.get($deps, 'md-ref-palette', 'tertiary20'), + var( + --md-sys-color-on-tertiary, + map.get($deps, 'md-ref-palette', 'tertiary20') + ), + null + ), + 'on-tertiary-container': + if( + map.get($deps, 'md-ref-palette', 'tertiary90'), + var( + --md-sys-color-on-tertiary-container, + map.get($deps, 'md-ref-palette', 'tertiary90') + ), + null + ), + 'on-tertiary-fixed': + if( + map.get($deps, 'md-ref-palette', 'tertiary10'), + var( + --md-sys-color-on-tertiary-fixed, + map.get($deps, 'md-ref-palette', 'tertiary10') + ), + null + ), + 'on-tertiary-fixed-variant': + if( + map.get($deps, 'md-ref-palette', 'tertiary30'), + var( + --md-sys-color-on-tertiary-fixed-variant, + map.get($deps, 'md-ref-palette', 'tertiary30') + ), + null + ), + 'outline': + if( + map.get($deps, 'md-ref-palette', 'neutral-variant60'), + var( + --md-sys-color-outline, + map.get($deps, 'md-ref-palette', 'neutral-variant60') + ), + null + ), + 'outline-variant': + if( + map.get($deps, 'md-ref-palette', 'neutral-variant30'), + var( + --md-sys-color-outline-variant, + map.get($deps, 'md-ref-palette', 'neutral-variant30') + ), + null + ), + 'primary': + if( + map.get($deps, 'md-ref-palette', 'primary80'), + var( + --md-sys-color-primary, + map.get($deps, 'md-ref-palette', 'primary80') + ), + null + ), + 'primary-container': + if( + map.get($deps, 'md-ref-palette', 'primary30'), + var( + --md-sys-color-primary-container, + map.get($deps, 'md-ref-palette', 'primary30') + ), + null + ), + 'primary-fixed': + if( + map.get($deps, 'md-ref-palette', 'primary90'), + var( + --md-sys-color-primary-fixed, + map.get($deps, 'md-ref-palette', 'primary90') + ), + null + ), + 'primary-fixed-dim': + if( + map.get($deps, 'md-ref-palette', 'primary80'), + var( + --md-sys-color-primary-fixed-dim, + map.get($deps, 'md-ref-palette', 'primary80') + ), + null + ), + 'scrim': + if( + map.get($deps, 'md-ref-palette', 'neutral0'), + var(--md-sys-color-scrim, map.get($deps, 'md-ref-palette', 'neutral0')), + null + ), + 'secondary': + if( + map.get($deps, 'md-ref-palette', 'secondary80'), + var( + --md-sys-color-secondary, + map.get($deps, 'md-ref-palette', 'secondary80') + ), + null + ), + 'secondary-container': + if( + map.get($deps, 'md-ref-palette', 'secondary30'), + var( + --md-sys-color-secondary-container, + map.get($deps, 'md-ref-palette', 'secondary30') + ), + null + ), + 'secondary-fixed': + if( + map.get($deps, 'md-ref-palette', 'secondary90'), + var( + --md-sys-color-secondary-fixed, + map.get($deps, 'md-ref-palette', 'secondary90') + ), + null + ), + 'secondary-fixed-dim': + if( + map.get($deps, 'md-ref-palette', 'secondary80'), + var( + --md-sys-color-secondary-fixed-dim, + map.get($deps, 'md-ref-palette', 'secondary80') + ), + null + ), + 'shadow': + if( + map.get($deps, 'md-ref-palette', 'neutral0'), + var( + --md-sys-color-shadow, + map.get($deps, 'md-ref-palette', 'neutral0') + ), + null + ), + 'surface': + if( + map.get($deps, 'md-ref-palette', 'neutral10'), + var( + --md-sys-color-surface, + map.get($deps, 'md-ref-palette', 'neutral10') + ), + null + ), + 'surface-bright': + if( + map.get($deps, 'md-ref-palette', 'neutral24'), + var( + --md-sys-color-surface-bright, + map.get($deps, 'md-ref-palette', 'neutral24') + ), + null + ), + 'surface-container': + if( + map.get($deps, 'md-ref-palette', 'neutral12'), + var( + --md-sys-color-surface-container, + map.get($deps, 'md-ref-palette', 'neutral12') + ), + null + ), + 'surface-container-high': + if( + map.get($deps, 'md-ref-palette', 'neutral17'), + var( + --md-sys-color-surface-container-high, + map.get($deps, 'md-ref-palette', 'neutral17') + ), + null + ), + 'surface-container-highest': + if( + map.get($deps, 'md-ref-palette', 'neutral22'), + var( + --md-sys-color-surface-container-highest, + map.get($deps, 'md-ref-palette', 'neutral22') + ), + null + ), + 'surface-container-low': + if( + map.get($deps, 'md-ref-palette', 'neutral10'), + var( + --md-sys-color-surface-container-low, + map.get($deps, 'md-ref-palette', 'neutral10') + ), + null + ), + 'surface-container-lowest': + if( + map.get($deps, 'md-ref-palette', 'neutral4'), + var( + --md-sys-color-surface-container-lowest, + map.get($deps, 'md-ref-palette', 'neutral4') + ), + null + ), + 'surface-dim': + if( + map.get($deps, 'md-ref-palette', 'neutral6'), + var( + --md-sys-color-surface-dim, + map.get($deps, 'md-ref-palette', 'neutral6') + ), + null + ), + 'surface-tint': + if( + map.get($deps, 'md-ref-palette', 'primary80'), + var( + --md-sys-color-primary, + map.get($deps, 'md-ref-palette', 'primary80') + ), + null + ), + 'surface-variant': + if( + map.get($deps, 'md-ref-palette', 'neutral-variant30'), + var( + --md-sys-color-surface-variant, + map.get($deps, 'md-ref-palette', 'neutral-variant30') + ), + null + ), + 'tertiary': + if( + map.get($deps, 'md-ref-palette', 'tertiary80'), + var( + --md-sys-color-tertiary, + map.get($deps, 'md-ref-palette', 'tertiary80') + ), + null + ), + 'tertiary-container': + if( + map.get($deps, 'md-ref-palette', 'tertiary30'), + var( + --md-sys-color-tertiary-container, + map.get($deps, 'md-ref-palette', 'tertiary30') + ), + null + ), + 'tertiary-fixed': + if( + map.get($deps, 'md-ref-palette', 'tertiary90'), + var( + --md-sys-color-tertiary-fixed, + map.get($deps, 'md-ref-palette', 'tertiary90') + ), + null + ), + 'tertiary-fixed-dim': + if( + map.get($deps, 'md-ref-palette', 'tertiary80'), + var( + --md-sys-color-tertiary-fixed-dim, + map.get($deps, 'md-ref-palette', 'tertiary80') + ), + null + ) + ); +} + +$_default-light: ( + 'md-ref-palette': md-ref-palette.values(), +); + +@function values-light($deps: $_default-light) { + @return ( + 'background': + if( + map.get($deps, 'md-ref-palette', 'neutral99'), + var( + --md-sys-color-background, + map.get($deps, 'md-ref-palette', 'neutral99') + ), + null + ), + 'error': + if( + map.get($deps, 'md-ref-palette', 'error40'), + var(--md-sys-color-error, map.get($deps, 'md-ref-palette', 'error40')), + null + ), + 'error-container': + if( + map.get($deps, 'md-ref-palette', 'error90'), + var( + --md-sys-color-error-container, + map.get($deps, 'md-ref-palette', 'error90') + ), + null + ), + 'inverse-on-surface': + if( + map.get($deps, 'md-ref-palette', 'neutral95'), + var( + --md-sys-color-inverse-on-surface, + map.get($deps, 'md-ref-palette', 'neutral95') + ), + null + ), + 'inverse-primary': + if( + map.get($deps, 'md-ref-palette', 'primary80'), + var( + --md-sys-color-inverse-primary, + map.get($deps, 'md-ref-palette', 'primary80') + ), + null + ), + 'inverse-surface': + if( + map.get($deps, 'md-ref-palette', 'neutral20'), + var( + --md-sys-color-inverse-surface, + map.get($deps, 'md-ref-palette', 'neutral20') + ), + null + ), + 'on-background': + if( + map.get($deps, 'md-ref-palette', 'neutral10'), + var( + --md-sys-color-on-background, + map.get($deps, 'md-ref-palette', 'neutral10') + ), + null + ), + 'on-error': + if( + map.get($deps, 'md-ref-palette', 'error100'), + var( + --md-sys-color-on-error, + map.get($deps, 'md-ref-palette', 'error100') + ), + null + ), + 'on-error-container': + if( + map.get($deps, 'md-ref-palette', 'error10'), + var( + --md-sys-color-on-error-container, + map.get($deps, 'md-ref-palette', 'error10') + ), + null + ), + 'on-primary': + if( + map.get($deps, 'md-ref-palette', 'primary100'), + var( + --md-sys-color-on-primary, + map.get($deps, 'md-ref-palette', 'primary100') + ), + null + ), + 'on-primary-container': + if( + map.get($deps, 'md-ref-palette', 'primary10'), + var( + --md-sys-color-on-primary-container, + map.get($deps, 'md-ref-palette', 'primary10') + ), + null + ), + 'on-primary-fixed': + if( + map.get($deps, 'md-ref-palette', 'primary10'), + var( + --md-sys-color-on-primary-fixed, + map.get($deps, 'md-ref-palette', 'primary10') + ), + null + ), + 'on-primary-fixed-variant': + if( + map.get($deps, 'md-ref-palette', 'primary30'), + var( + --md-sys-color-on-primary-fixed-variant, + map.get($deps, 'md-ref-palette', 'primary30') + ), + null + ), + 'on-secondary': + if( + map.get($deps, 'md-ref-palette', 'secondary100'), + var( + --md-sys-color-on-secondary, + map.get($deps, 'md-ref-palette', 'secondary100') + ), + null + ), + 'on-secondary-container': + if( + map.get($deps, 'md-ref-palette', 'secondary10'), + var( + --md-sys-color-on-secondary-container, + map.get($deps, 'md-ref-palette', 'secondary10') + ), + null + ), + 'on-secondary-fixed': + if( + map.get($deps, 'md-ref-palette', 'secondary10'), + var( + --md-sys-color-on-secondary-fixed, + map.get($deps, 'md-ref-palette', 'secondary10') + ), + null + ), + 'on-secondary-fixed-variant': + if( + map.get($deps, 'md-ref-palette', 'secondary30'), + var( + --md-sys-color-on-secondary-fixed-variant, + map.get($deps, 'md-ref-palette', 'secondary30') + ), + null + ), + 'on-surface': + if( + map.get($deps, 'md-ref-palette', 'neutral10'), + var( + --md-sys-color-on-surface, + map.get($deps, 'md-ref-palette', 'neutral10') + ), + null + ), + 'on-surface-variant': + if( + map.get($deps, 'md-ref-palette', 'neutral-variant30'), + var( + --md-sys-color-on-surface-variant, + map.get($deps, 'md-ref-palette', 'neutral-variant30') + ), + null + ), + 'on-tertiary': + if( + map.get($deps, 'md-ref-palette', 'tertiary100'), + var( + --md-sys-color-on-tertiary, + map.get($deps, 'md-ref-palette', 'tertiary100') + ), + null + ), + 'on-tertiary-container': + if( + map.get($deps, 'md-ref-palette', 'tertiary10'), + var( + --md-sys-color-on-tertiary-container, + map.get($deps, 'md-ref-palette', 'tertiary10') + ), + null + ), + 'on-tertiary-fixed': + if( + map.get($deps, 'md-ref-palette', 'tertiary10'), + var( + --md-sys-color-on-tertiary-fixed, + map.get($deps, 'md-ref-palette', 'tertiary10') + ), + null + ), + 'on-tertiary-fixed-variant': + if( + map.get($deps, 'md-ref-palette', 'tertiary30'), + var( + --md-sys-color-on-tertiary-fixed-variant, + map.get($deps, 'md-ref-palette', 'tertiary30') + ), + null + ), + 'outline': + if( + map.get($deps, 'md-ref-palette', 'neutral-variant50'), + var( + --md-sys-color-outline, + map.get($deps, 'md-ref-palette', 'neutral-variant50') + ), + null + ), + 'outline-variant': + if( + map.get($deps, 'md-ref-palette', 'neutral-variant80'), + var( + --md-sys-color-outline-variant, + map.get($deps, 'md-ref-palette', 'neutral-variant80') + ), + null + ), + 'primary': + if( + map.get($deps, 'md-ref-palette', 'primary40'), + var( + --md-sys-color-primary, + map.get($deps, 'md-ref-palette', 'primary40') + ), + null + ), + 'primary-container': + if( + map.get($deps, 'md-ref-palette', 'primary90'), + var( + --md-sys-color-primary-container, + map.get($deps, 'md-ref-palette', 'primary90') + ), + null + ), + 'primary-fixed': + if( + map.get($deps, 'md-ref-palette', 'primary90'), + var( + --md-sys-color-primary-fixed, + map.get($deps, 'md-ref-palette', 'primary90') + ), + null + ), + 'primary-fixed-dim': + if( + map.get($deps, 'md-ref-palette', 'primary80'), + var( + --md-sys-color-primary-fixed-dim, + map.get($deps, 'md-ref-palette', 'primary80') + ), + null + ), + 'scrim': + if( + map.get($deps, 'md-ref-palette', 'neutral0'), + var(--md-sys-color-scrim, map.get($deps, 'md-ref-palette', 'neutral0')), + null + ), + 'secondary': + if( + map.get($deps, 'md-ref-palette', 'secondary40'), + var( + --md-sys-color-secondary, + map.get($deps, 'md-ref-palette', 'secondary40') + ), + null + ), + 'secondary-container': + if( + map.get($deps, 'md-ref-palette', 'secondary90'), + var( + --md-sys-color-secondary-container, + map.get($deps, 'md-ref-palette', 'secondary90') + ), + null + ), + 'secondary-fixed': + if( + map.get($deps, 'md-ref-palette', 'secondary90'), + var( + --md-sys-color-secondary-fixed, + map.get($deps, 'md-ref-palette', 'secondary90') + ), + null + ), + 'secondary-fixed-dim': + if( + map.get($deps, 'md-ref-palette', 'secondary80'), + var( + --md-sys-color-secondary-fixed-dim, + map.get($deps, 'md-ref-palette', 'secondary80') + ), + null + ), + 'shadow': + if( + map.get($deps, 'md-ref-palette', 'neutral0'), + var( + --md-sys-color-shadow, + map.get($deps, 'md-ref-palette', 'neutral0') + ), + null + ), + 'surface': + if( + map.get($deps, 'md-ref-palette', 'neutral99'), + var( + --md-sys-color-surface, + map.get($deps, 'md-ref-palette', 'neutral99') + ), + null + ), + 'surface-bright': + if( + map.get($deps, 'md-ref-palette', 'neutral98'), + var( + --md-sys-color-surface-bright, + map.get($deps, 'md-ref-palette', 'neutral98') + ), + null + ), + 'surface-container': + if( + map.get($deps, 'md-ref-palette', 'neutral94'), + var( + --md-sys-color-surface-container, + map.get($deps, 'md-ref-palette', 'neutral94') + ), + null + ), + 'surface-container-high': + if( + map.get($deps, 'md-ref-palette', 'neutral92'), + var( + --md-sys-color-surface-container-high, + map.get($deps, 'md-ref-palette', 'neutral92') + ), + null + ), + 'surface-container-highest': + if( + map.get($deps, 'md-ref-palette', 'neutral90'), + var( + --md-sys-color-surface-container-highest, + map.get($deps, 'md-ref-palette', 'neutral90') + ), + null + ), + 'surface-container-low': + if( + map.get($deps, 'md-ref-palette', 'neutral96'), + var( + --md-sys-color-surface-container-low, + map.get($deps, 'md-ref-palette', 'neutral96') + ), + null + ), + 'surface-container-lowest': + if( + map.get($deps, 'md-ref-palette', 'neutral100'), + var( + --md-sys-color-surface-container-lowest, + map.get($deps, 'md-ref-palette', 'neutral100') + ), + null + ), + 'surface-dim': + if( + map.get($deps, 'md-ref-palette', 'neutral87'), + var( + --md-sys-color-surface-dim, + map.get($deps, 'md-ref-palette', 'neutral87') + ), + null + ), + 'surface-tint': + if( + map.get($deps, 'md-ref-palette', 'primary40'), + var( + --md-sys-color-primary, + map.get($deps, 'md-ref-palette', 'primary40') + ), + null + ), + 'surface-variant': + if( + map.get($deps, 'md-ref-palette', 'neutral-variant90'), + var( + --md-sys-color-surface-variant, + map.get($deps, 'md-ref-palette', 'neutral-variant90') + ), + null + ), + 'tertiary': + if( + map.get($deps, 'md-ref-palette', 'tertiary40'), + var( + --md-sys-color-tertiary, + map.get($deps, 'md-ref-palette', 'tertiary40') + ), + null + ), + 'tertiary-container': + if( + map.get($deps, 'md-ref-palette', 'tertiary90'), + var( + --md-sys-color-tertiary-container, + map.get($deps, 'md-ref-palette', 'tertiary90') + ), + null + ), + 'tertiary-fixed': + if( + map.get($deps, 'md-ref-palette', 'tertiary90'), + var( + --md-sys-color-tertiary-fixed, + map.get($deps, 'md-ref-palette', 'tertiary90') + ), + null + ), + 'tertiary-fixed-dim': + if( + map.get($deps, 'md-ref-palette', 'tertiary80'), + var( + --md-sys-color-tertiary-fixed-dim, + map.get($deps, 'md-ref-palette', 'tertiary80') + ), + null + ) + ); +} diff --git a/tokens/v0_160/_md-sys-elevation.scss b/tokens/v0_160/_md-sys-elevation.scss new file mode 100644 index 0000000000..d3c1b38a3c --- /dev/null +++ b/tokens/v0_160/_md-sys-elevation.scss @@ -0,0 +1,21 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@function values($exclude-hardcoded-values: false) { + @return ( + 'level0': if($exclude-hardcoded-values, null, 0), + 'level1': if($exclude-hardcoded-values, null, 1), + 'level2': if($exclude-hardcoded-values, null, 3), + 'level3': if($exclude-hardcoded-values, null, 6), + 'level4': if($exclude-hardcoded-values, null, 8), + 'level5': if($exclude-hardcoded-values, null, 12) + ); +} diff --git a/tokens/v0_160/_md-sys-motion.scss b/tokens/v0_160/_md-sys-motion.scss new file mode 100644 index 0000000000..2c2fdfd513 --- /dev/null +++ b/tokens/v0_160/_md-sys-motion.scss @@ -0,0 +1,53 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// User-configured context group "Platform": "Web" +// + +@function values($exclude-hardcoded-values: false) { + @return ( + 'duration-extra-long1': if($exclude-hardcoded-values, null, 700ms), + 'duration-extra-long2': if($exclude-hardcoded-values, null, 800ms), + 'duration-extra-long3': if($exclude-hardcoded-values, null, 900ms), + 'duration-extra-long4': if($exclude-hardcoded-values, null, 1000ms), + 'duration-long1': if($exclude-hardcoded-values, null, 450ms), + 'duration-long2': if($exclude-hardcoded-values, null, 500ms), + 'duration-long3': if($exclude-hardcoded-values, null, 550ms), + 'duration-long4': if($exclude-hardcoded-values, null, 600ms), + 'duration-medium1': if($exclude-hardcoded-values, null, 250ms), + 'duration-medium2': if($exclude-hardcoded-values, null, 300ms), + 'duration-medium3': if($exclude-hardcoded-values, null, 350ms), + 'duration-medium4': if($exclude-hardcoded-values, null, 400ms), + 'duration-short1': if($exclude-hardcoded-values, null, 50ms), + 'duration-short2': if($exclude-hardcoded-values, null, 100ms), + 'duration-short3': if($exclude-hardcoded-values, null, 150ms), + 'duration-short4': if($exclude-hardcoded-values, null, 200ms), + 'easing-emphasized': + if($exclude-hardcoded-values, null, cubic-bezier(0.2, 0, 0, 1)), + 'easing-emphasized-accelerate': + if($exclude-hardcoded-values, null, cubic-bezier(0.3, 0, 0.8, 0.15)), + 'easing-emphasized-decelerate': + if($exclude-hardcoded-values, null, cubic-bezier(0.05, 0.7, 0.1, 1)), + 'easing-legacy': + if($exclude-hardcoded-values, null, cubic-bezier(0.4, 0, 0.2, 1)), + 'easing-legacy-accelerate': + if($exclude-hardcoded-values, null, cubic-bezier(0.4, 0, 1, 1)), + 'easing-legacy-decelerate': + if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 0.2, 1)), + 'easing-linear': + if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 1, 1)), + 'easing-standard': + if($exclude-hardcoded-values, null, cubic-bezier(0.2, 0, 0, 1)), + 'easing-standard-accelerate': + if($exclude-hardcoded-values, null, cubic-bezier(0.3, 0, 1, 1)), + 'easing-standard-decelerate': + if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 0, 1)), + 'path': /** TODO: type "motion_path" is not supported. */ null + ); +} diff --git a/tokens/v0_160/_md-sys-shape.scss b/tokens/v0_160/_md-sys-shape.scss new file mode 100644 index 0000000000..fcce9a7481 --- /dev/null +++ b/tokens/v0_160/_md-sys-shape.scss @@ -0,0 +1,30 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@function values($exclude-hardcoded-values: false) { + @return ( + 'corner-extra-large': if($exclude-hardcoded-values, null, 28px), + 'corner-extra-large-top': + if($exclude-hardcoded-values, null, (28px 28px 0px 0px)), + 'corner-extra-small': if($exclude-hardcoded-values, null, 4px), + 'corner-extra-small-top': + if($exclude-hardcoded-values, null, (4px 4px 0px 0px)), + 'corner-full': if($exclude-hardcoded-values, null, 9999px), + 'corner-large': if($exclude-hardcoded-values, null, 16px), + 'corner-large-end': if($exclude-hardcoded-values, null, (0px 16px 16px 0px)), + 'corner-large-start': + if($exclude-hardcoded-values, null, (16px 0px 0px 16px)), + 'corner-large-top': if($exclude-hardcoded-values, null, (16px 16px 0px 0px)), + 'corner-medium': if($exclude-hardcoded-values, null, 12px), + 'corner-none': if($exclude-hardcoded-values, null, 0px), + 'corner-small': if($exclude-hardcoded-values, null, 8px) + ); +} diff --git a/tokens/v0_160/_md-sys-state.scss b/tokens/v0_160/_md-sys-state.scss new file mode 100644 index 0000000000..dd6371c17f --- /dev/null +++ b/tokens/v0_160/_md-sys-state.scss @@ -0,0 +1,19 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// + +@function values($exclude-hardcoded-values: false) { + @return ( + 'dragged-state-layer-opacity': if($exclude-hardcoded-values, null, 0.16), + 'focus-state-layer-opacity': if($exclude-hardcoded-values, null, 0.12), + 'hover-state-layer-opacity': if($exclude-hardcoded-values, null, 0.08), + 'pressed-state-layer-opacity': if($exclude-hardcoded-values, null, 0.12) + ); +} diff --git a/tokens/v0_160/_md-sys-typescale.scss b/tokens/v0_160/_md-sys-typescale.scss new file mode 100644 index 0000000000..09dc206480 --- /dev/null +++ b/tokens/v0_160/_md-sys-typescale.scss @@ -0,0 +1,284 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// Design system display name: Google Material 3 +// Design system version: v0.160 +// User-configured context group "Audience": "3P" +// + +@use 'sass:map'; + +@use './md-ref-typeface'; + +$_default: ( + 'md-ref-typeface': md-ref-typeface.values(), +); + +@function values($deps: $_default, $exclude-hardcoded-values: false) { + @return ( + 'body-large': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.body-large.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-ref-typeface', 'weight-regular') + if($exclude-hardcoded-values, null, 1rem) #{'/'} if( + $exclude-hardcoded-values, + null, + 1.5rem + ) map.get($deps, 'md-ref-typeface', 'plain') + ), + 'body-large-font': map.get($deps, 'md-ref-typeface', 'plain'), + 'body-large-line-height': if($exclude-hardcoded-values, null, 1.5rem), + 'body-large-size': if($exclude-hardcoded-values, null, 1rem), + 'body-large-tracking': if($exclude-hardcoded-values, null, 0.031rem), + 'body-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), + 'body-medium': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.body-medium.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-ref-typeface', 'weight-regular') + if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if( + $exclude-hardcoded-values, + null, + 1.25rem + ) map.get($deps, 'md-ref-typeface', 'plain') + ), + 'body-medium-font': map.get($deps, 'md-ref-typeface', 'plain'), + 'body-medium-line-height': if($exclude-hardcoded-values, null, 1.25rem), + 'body-medium-size': if($exclude-hardcoded-values, null, 0.875rem), + 'body-medium-tracking': if($exclude-hardcoded-values, null, 0.016rem), + 'body-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), + 'body-small': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.body-small.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-ref-typeface', 'weight-regular') + if($exclude-hardcoded-values, null, 0.75rem) #{'/'} if( + $exclude-hardcoded-values, + null, + 1rem + ) map.get($deps, 'md-ref-typeface', 'plain') + ), + 'body-small-font': map.get($deps, 'md-ref-typeface', 'plain'), + 'body-small-line-height': if($exclude-hardcoded-values, null, 1rem), + 'body-small-size': if($exclude-hardcoded-values, null, 0.75rem), + 'body-small-tracking': if($exclude-hardcoded-values, null, 0.025rem), + 'body-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), + 'display-large': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.display-large.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-ref-typeface', 'weight-regular') + if($exclude-hardcoded-values, null, 3.562rem) #{'/'} if( + $exclude-hardcoded-values, + null, + 4rem + ) map.get($deps, 'md-ref-typeface', 'brand') + ), + 'display-large-font': map.get($deps, 'md-ref-typeface', 'brand'), + 'display-large-line-height': if($exclude-hardcoded-values, null, 4rem), + 'display-large-size': if($exclude-hardcoded-values, null, 3.562rem), + 'display-large-tracking': if($exclude-hardcoded-values, null, -0.016rem), + 'display-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), + 'display-medium': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.display-medium.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-ref-typeface', 'weight-regular') + if($exclude-hardcoded-values, null, 2.812rem) #{'/'} if( + $exclude-hardcoded-values, + null, + 3.25rem + ) map.get($deps, 'md-ref-typeface', 'brand') + ), + 'display-medium-font': map.get($deps, 'md-ref-typeface', 'brand'), + 'display-medium-line-height': if($exclude-hardcoded-values, null, 3.25rem), + 'display-medium-size': if($exclude-hardcoded-values, null, 2.812rem), + 'display-medium-tracking': if($exclude-hardcoded-values, null, 0rem), + 'display-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), + 'display-small': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.display-small.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-ref-typeface', 'weight-regular') + if($exclude-hardcoded-values, null, 2.25rem) #{'/'} if( + $exclude-hardcoded-values, + null, + 2.75rem + ) map.get($deps, 'md-ref-typeface', 'brand') + ), + 'display-small-font': map.get($deps, 'md-ref-typeface', 'brand'), + 'display-small-line-height': if($exclude-hardcoded-values, null, 2.75rem), + 'display-small-size': if($exclude-hardcoded-values, null, 2.25rem), + 'display-small-tracking': if($exclude-hardcoded-values, null, 0rem), + 'display-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), + 'headline-large': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.headline-large.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-ref-typeface', 'weight-regular') + if($exclude-hardcoded-values, null, 2rem) #{'/'} if( + $exclude-hardcoded-values, + null, + 2.5rem + ) map.get($deps, 'md-ref-typeface', 'brand') + ), + 'headline-large-font': map.get($deps, 'md-ref-typeface', 'brand'), + 'headline-large-line-height': if($exclude-hardcoded-values, null, 2.5rem), + 'headline-large-size': if($exclude-hardcoded-values, null, 2rem), + 'headline-large-tracking': if($exclude-hardcoded-values, null, 0rem), + 'headline-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), + 'headline-medium': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.headline-medium.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-ref-typeface', 'weight-regular') + if($exclude-hardcoded-values, null, 1.75rem) #{'/'} if( + $exclude-hardcoded-values, + null, + 2.25rem + ) map.get($deps, 'md-ref-typeface', 'brand') + ), + 'headline-medium-font': map.get($deps, 'md-ref-typeface', 'brand'), + 'headline-medium-line-height': if($exclude-hardcoded-values, null, 2.25rem), + 'headline-medium-size': if($exclude-hardcoded-values, null, 1.75rem), + 'headline-medium-tracking': if($exclude-hardcoded-values, null, 0rem), + 'headline-medium-weight': + map.get($deps, 'md-ref-typeface', 'weight-regular'), + 'headline-small': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.headline-small.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-ref-typeface', 'weight-regular') + if($exclude-hardcoded-values, null, 1.5rem) #{'/'} if( + $exclude-hardcoded-values, + null, + 2rem + ) map.get($deps, 'md-ref-typeface', 'brand') + ), + 'headline-small-font': map.get($deps, 'md-ref-typeface', 'brand'), + 'headline-small-line-height': if($exclude-hardcoded-values, null, 2rem), + 'headline-small-size': if($exclude-hardcoded-values, null, 1.5rem), + 'headline-small-tracking': if($exclude-hardcoded-values, null, 0rem), + 'headline-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), + 'label-large': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.label-large.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-ref-typeface', 'weight-medium') + if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if( + $exclude-hardcoded-values, + null, + 1.25rem + ) map.get($deps, 'md-ref-typeface', 'plain') + ), + 'label-large-font': map.get($deps, 'md-ref-typeface', 'plain'), + 'label-large-line-height': if($exclude-hardcoded-values, null, 1.25rem), + 'label-large-size': if($exclude-hardcoded-values, null, 0.875rem), + 'label-large-tracking': if($exclude-hardcoded-values, null, 0.006rem), + 'label-large-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'), + 'label-large-weight-prominent': + map.get($deps, 'md-ref-typeface', 'weight-bold'), + 'label-medium': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.label-medium.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-ref-typeface', 'weight-medium') + if($exclude-hardcoded-values, null, 0.75rem) #{'/'} if( + $exclude-hardcoded-values, + null, + 1rem + ) map.get($deps, 'md-ref-typeface', 'plain') + ), + 'label-medium-font': map.get($deps, 'md-ref-typeface', 'plain'), + 'label-medium-line-height': if($exclude-hardcoded-values, null, 1rem), + 'label-medium-size': if($exclude-hardcoded-values, null, 0.75rem), + 'label-medium-tracking': if($exclude-hardcoded-values, null, 0.031rem), + 'label-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'), + 'label-medium-weight-prominent': + map.get($deps, 'md-ref-typeface', 'weight-bold'), + 'label-small': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.label-small.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-ref-typeface', 'weight-medium') + if($exclude-hardcoded-values, null, 0.688rem) #{'/'} if( + $exclude-hardcoded-values, + null, + 1rem + ) map.get($deps, 'md-ref-typeface', 'plain') + ), + 'label-small-font': map.get($deps, 'md-ref-typeface', 'plain'), + 'label-small-line-height': if($exclude-hardcoded-values, null, 1rem), + 'label-small-size': if($exclude-hardcoded-values, null, 0.688rem), + 'label-small-tracking': if($exclude-hardcoded-values, null, 0.031rem), + 'label-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'), + 'title-large': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.title-large.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-ref-typeface', 'weight-regular') + if($exclude-hardcoded-values, null, 1.375rem) #{'/'} if( + $exclude-hardcoded-values, + null, + 1.75rem + ) map.get($deps, 'md-ref-typeface', 'brand') + ), + 'title-large-font': map.get($deps, 'md-ref-typeface', 'brand'), + 'title-large-line-height': if($exclude-hardcoded-values, null, 1.75rem), + 'title-large-size': if($exclude-hardcoded-values, null, 1.375rem), + 'title-large-tracking': if($exclude-hardcoded-values, null, 0rem), + 'title-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), + 'title-medium': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.title-medium.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-ref-typeface', 'weight-medium') + if($exclude-hardcoded-values, null, 1rem) #{'/'} if( + $exclude-hardcoded-values, + null, + 1.5rem + ) map.get($deps, 'md-ref-typeface', 'plain') + ), + 'title-medium-font': map.get($deps, 'md-ref-typeface', 'plain'), + 'title-medium-line-height': if($exclude-hardcoded-values, null, 1.5rem), + 'title-medium-size': if($exclude-hardcoded-values, null, 1rem), + 'title-medium-tracking': if($exclude-hardcoded-values, null, 0.009rem), + 'title-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'), + 'title-small': + if( + $exclude-hardcoded-values, + null, + /** Warning: risk of reduced fidelity from using this composite typography token. Tokens md.sys.typescale.title-small.tracking cannot be represented in the "font" property shorthand. Consider using the discrete properties instead. */ + map.get($deps, 'md-ref-typeface', 'weight-medium') + if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if( + $exclude-hardcoded-values, + null, + 1.25rem + ) map.get($deps, 'md-ref-typeface', 'plain') + ), + 'title-small-font': map.get($deps, 'md-ref-typeface', 'plain'), + 'title-small-line-height': if($exclude-hardcoded-values, null, 1.25rem), + 'title-small-size': if($exclude-hardcoded-values, null, 0.875rem), + 'title-small-tracking': if($exclude-hardcoded-values, null, 0.006rem), + 'title-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium') + ); +} diff --git a/tokens/v0_160/index.test.scss b/tokens/v0_160/index.test.scss new file mode 100644 index 0000000000..731a49f5af --- /dev/null +++ b/tokens/v0_160/index.test.scss @@ -0,0 +1,584 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// + +@use 'true' as test; + +@use './index'; + +@include test.describe('index') { + @include test.describe('index.md-comp-assist-chip-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-assist-chip-values()); + } + } + + @include test.describe('index.md-comp-badge-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-badge-values()); + } + } + + @include test.describe('index.md-comp-banner-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-banner-values()); + } + } + + @include test.describe('index.md-comp-bottom-app-bar-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-bottom-app-bar-values()); + } + } + + @include test.describe('index.md-comp-carousel-item-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-carousel-item-values()); + } + } + + @include test.describe('index.md-comp-checkbox-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-checkbox-values()); + } + } + + @include test.describe('index.md-comp-circular-progress-indicator-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true( + index.md-comp-circular-progress-indicator-values() + ); + } + } + + @include test.describe('index.md-comp-data-table-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-data-table-values()); + } + } + + @include test.describe('index.md-comp-date-input-modal-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-date-input-modal-values()); + } + } + + @include test.describe('index.md-comp-date-picker-docked-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-date-picker-docked-values()); + } + } + + @include test.describe('index.md-comp-date-picker-modal-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-date-picker-modal-values()); + } + } + + @include test.describe('index.md-comp-dialog-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-dialog-values()); + } + } + + @include test.describe('index.md-comp-divider-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-divider-values()); + } + } + + @include test.describe('index.md-comp-elevated-button-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-elevated-button-values()); + } + } + + @include test.describe('index.md-comp-elevated-card-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-elevated-card-values()); + } + } + + @include test.describe('index.md-comp-extended-fab-branded-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-extended-fab-branded-values()); + } + } + + @include test.describe('index.md-comp-extended-fab-primary-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-extended-fab-primary-values()); + } + } + + @include test.describe('index.md-comp-extended-fab-secondary-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-extended-fab-secondary-values()); + } + } + + @include test.describe('index.md-comp-extended-fab-surface-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-extended-fab-surface-values()); + } + } + + @include test.describe('index.md-comp-extended-fab-tertiary-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-extended-fab-tertiary-values()); + } + } + + @include test.describe('index.md-comp-fab-branded-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-fab-branded-values()); + } + } + + @include test.describe('index.md-comp-fab-branded-large-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-fab-branded-large-values()); + } + } + + @include test.describe('index.md-comp-fab-primary-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-fab-primary-values()); + } + } + + @include test.describe('index.md-comp-fab-primary-large-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-fab-primary-large-values()); + } + } + + @include test.describe('index.md-comp-fab-primary-small-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-fab-primary-small-values()); + } + } + + @include test.describe('index.md-comp-fab-secondary-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-fab-secondary-values()); + } + } + + @include test.describe('index.md-comp-fab-secondary-large-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-fab-secondary-large-values()); + } + } + + @include test.describe('index.md-comp-fab-secondary-small-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-fab-secondary-small-values()); + } + } + + @include test.describe('index.md-comp-fab-surface-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-fab-surface-values()); + } + } + + @include test.describe('index.md-comp-fab-surface-large-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-fab-surface-large-values()); + } + } + + @include test.describe('index.md-comp-fab-surface-small-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-fab-surface-small-values()); + } + } + + @include test.describe('index.md-comp-fab-tertiary-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-fab-tertiary-values()); + } + } + + @include test.describe('index.md-comp-fab-tertiary-large-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-fab-tertiary-large-values()); + } + } + + @include test.describe('index.md-comp-fab-tertiary-small-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-fab-tertiary-small-values()); + } + } + + @include test.describe('index.md-comp-filled-autocomplete-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-filled-autocomplete-values()); + } + } + + @include test.describe('index.md-comp-filled-button-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-filled-button-values()); + } + } + + @include test.describe('index.md-comp-filled-card-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-filled-card-values()); + } + } + + @include test.describe('index.md-comp-filled-icon-button-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-filled-icon-button-values()); + } + } + + @include test.describe('index.md-comp-filled-menu-button-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-filled-menu-button-values()); + } + } + + @include test.describe('index.md-comp-filled-select-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-filled-select-values()); + } + } + + @include test.describe('index.md-comp-filled-text-field-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-filled-text-field-values()); + } + } + + @include test.describe('index.md-comp-filled-tonal-button-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-filled-tonal-button-values()); + } + } + + @include test.describe('index.md-comp-filled-tonal-icon-button-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true( + index.md-comp-filled-tonal-icon-button-values() + ); + } + } + + @include test.describe('index.md-comp-filter-chip-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-filter-chip-values()); + } + } + + @include test.describe('index.md-comp-full-screen-dialog-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-full-screen-dialog-values()); + } + } + + @include test.describe('index.md-comp-icon-button-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-icon-button-values()); + } + } + + @include test.describe('index.md-comp-input-chip-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-input-chip-values()); + } + } + + @include test.describe('index.md-comp-linear-progress-indicator-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true( + index.md-comp-linear-progress-indicator-values() + ); + } + } + + @include test.describe('index.md-comp-list-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-list-values()); + } + } + + @include test.describe('index.md-comp-menu-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-menu-values()); + } + } + + @include test.describe('index.md-comp-navigation-bar-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-navigation-bar-values()); + } + } + + @include test.describe('index.md-comp-navigation-drawer-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-navigation-drawer-values()); + } + } + + @include test.describe('index.md-comp-navigation-rail-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-navigation-rail-values()); + } + } + + @include test.describe('index.md-comp-outlined-autocomplete-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-outlined-autocomplete-values()); + } + } + + @include test.describe('index.md-comp-outlined-button-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-outlined-button-values()); + } + } + + @include test.describe('index.md-comp-outlined-card-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-outlined-card-values()); + } + } + + @include test.describe('index.md-comp-outlined-icon-button-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-outlined-icon-button-values()); + } + } + + @include test.describe('index.md-comp-outlined-menu-button-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-outlined-menu-button-values()); + } + } + + @include test.describe('index.md-comp-outlined-segmented-button-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true( + index.md-comp-outlined-segmented-button-values() + ); + } + } + + @include test.describe('index.md-comp-outlined-select-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-outlined-select-values()); + } + } + + @include test.describe('index.md-comp-outlined-text-field-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-outlined-text-field-values()); + } + } + + @include test.describe('index.md-comp-plain-tooltip-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-plain-tooltip-values()); + } + } + + @include test.describe('index.md-comp-primary-navigation-tab-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-primary-navigation-tab-values()); + } + } + + @include test.describe('index.md-comp-radio-button-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-radio-button-values()); + } + } + + @include test.describe('index.md-comp-rich-tooltip-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-rich-tooltip-values()); + } + } + + @include test.describe('index.md-comp-scrim-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-scrim-values()); + } + } + + @include test.describe('index.md-comp-search-bar-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-search-bar-values()); + } + } + + @include test.describe('index.md-comp-search-view-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-search-view-values()); + } + } + + @include test.describe('index.md-comp-secondary-navigation-tab-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true( + index.md-comp-secondary-navigation-tab-values() + ); + } + } + + @include test.describe('index.md-comp-sheet-bottom-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-sheet-bottom-values()); + } + } + + @include test.describe('index.md-comp-sheet-floating-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-sheet-floating-values()); + } + } + + @include test.describe('index.md-comp-sheet-side-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-sheet-side-values()); + } + } + + @include test.describe('index.md-comp-slider-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-slider-values()); + } + } + + @include test.describe('index.md-comp-snackbar-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-snackbar-values()); + } + } + + @include test.describe('index.md-comp-standard-menu-button-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-standard-menu-button-values()); + } + } + + @include test.describe('index.md-comp-suggestion-chip-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-suggestion-chip-values()); + } + } + + @include test.describe('index.md-comp-switch-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-switch-values()); + } + } + + @include test.describe('index.md-comp-text-button-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-text-button-values()); + } + } + + @include test.describe('index.md-comp-time-input-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-time-input-values()); + } + } + + @include test.describe('index.md-comp-time-picker-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-time-picker-values()); + } + } + + @include test.describe('index.md-comp-top-app-bar-large-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-top-app-bar-large-values()); + } + } + + @include test.describe('index.md-comp-top-app-bar-medium-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-top-app-bar-medium-values()); + } + } + + @include test.describe('index.md-comp-top-app-bar-small-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-comp-top-app-bar-small-values()); + } + } + + @include test.describe('index.md-comp-top-app-bar-small-centered-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true( + index.md-comp-top-app-bar-small-centered-values() + ); + } + } + + @include test.describe('index.md-ref-palette-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-ref-palette-values()); + } + } + + @include test.describe('index.md-ref-typeface-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-ref-typeface-values()); + } + } + + @include test.describe('index.md-sys-color-values-dark') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-sys-color-values-dark()); + } + } + + @include test.describe('index.md-sys-color-values-light') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-sys-color-values-light()); + } + } + + @include test.describe('index.md-sys-elevation-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-sys-elevation-values()); + } + } + + @include test.describe('index.md-sys-motion-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-sys-motion-values()); + } + } + + @include test.describe('index.md-sys-shape-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-sys-shape-values()); + } + } + + @include test.describe('index.md-sys-state-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-sys-state-values()); + } + } + + @include test.describe('index.md-sys-typescale-values') { + @include test.it('should forward non-empty map') { + @include test.assert-true(index.md-sys-typescale-values()); + } + } +} diff --git a/tokens/v0_160/lib.test.scss b/tokens/v0_160/lib.test.scss new file mode 100644 index 0000000000..7bb54aa2be --- /dev/null +++ b/tokens/v0_160/lib.test.scss @@ -0,0 +1,663 @@ +// +// Copyright 2023 Google LLC +// SPDX-License-Identifier: Apache-2.0 +// +// +// !!! THIS FILE WAS AUTOMATICALLY GENERATED !!! +// !!! DO NOT MODIFY IT BY HAND !!! +// + +@use 'true' as test; + +@use './md-comp-assist-chip'; +@use './md-comp-badge'; +@use './md-comp-banner'; +@use './md-comp-bottom-app-bar'; +@use './md-comp-carousel-item'; +@use './md-comp-checkbox'; +@use './md-comp-circular-progress-indicator'; +@use './md-comp-data-table'; +@use './md-comp-date-input-modal'; +@use './md-comp-date-picker-docked'; +@use './md-comp-date-picker-modal'; +@use './md-comp-dialog'; +@use './md-comp-divider'; +@use './md-comp-elevated-button'; +@use './md-comp-elevated-card'; +@use './md-comp-extended-fab-branded'; +@use './md-comp-extended-fab-primary'; +@use './md-comp-extended-fab-secondary'; +@use './md-comp-extended-fab-surface'; +@use './md-comp-extended-fab-tertiary'; +@use './md-comp-fab-branded'; +@use './md-comp-fab-branded-large'; +@use './md-comp-fab-primary'; +@use './md-comp-fab-primary-large'; +@use './md-comp-fab-primary-small'; +@use './md-comp-fab-secondary'; +@use './md-comp-fab-secondary-large'; +@use './md-comp-fab-secondary-small'; +@use './md-comp-fab-surface'; +@use './md-comp-fab-surface-large'; +@use './md-comp-fab-surface-small'; +@use './md-comp-fab-tertiary'; +@use './md-comp-fab-tertiary-large'; +@use './md-comp-fab-tertiary-small'; +@use './md-comp-filled-autocomplete'; +@use './md-comp-filled-button'; +@use './md-comp-filled-card'; +@use './md-comp-filled-icon-button'; +@use './md-comp-filled-menu-button'; +@use './md-comp-filled-select'; +@use './md-comp-filled-text-field'; +@use './md-comp-filled-tonal-button'; +@use './md-comp-filled-tonal-icon-button'; +@use './md-comp-filter-chip'; +@use './md-comp-full-screen-dialog'; +@use './md-comp-icon-button'; +@use './md-comp-input-chip'; +@use './md-comp-linear-progress-indicator'; +@use './md-comp-list'; +@use './md-comp-menu'; +@use './md-comp-navigation-bar'; +@use './md-comp-navigation-drawer'; +@use './md-comp-navigation-rail'; +@use './md-comp-outlined-autocomplete'; +@use './md-comp-outlined-button'; +@use './md-comp-outlined-card'; +@use './md-comp-outlined-icon-button'; +@use './md-comp-outlined-menu-button'; +@use './md-comp-outlined-segmented-button'; +@use './md-comp-outlined-select'; +@use './md-comp-outlined-text-field'; +@use './md-comp-plain-tooltip'; +@use './md-comp-primary-navigation-tab'; +@use './md-comp-radio-button'; +@use './md-comp-rich-tooltip'; +@use './md-comp-scrim'; +@use './md-comp-search-bar'; +@use './md-comp-search-view'; +@use './md-comp-secondary-navigation-tab'; +@use './md-comp-sheet-bottom'; +@use './md-comp-sheet-floating'; +@use './md-comp-sheet-side'; +@use './md-comp-slider'; +@use './md-comp-snackbar'; +@use './md-comp-standard-menu-button'; +@use './md-comp-suggestion-chip'; +@use './md-comp-switch'; +@use './md-comp-text-button'; +@use './md-comp-time-input'; +@use './md-comp-time-picker'; +@use './md-comp-top-app-bar-large'; +@use './md-comp-top-app-bar-medium'; +@use './md-comp-top-app-bar-small'; +@use './md-comp-top-app-bar-small-centered'; +@use './md-ref-palette'; +@use './md-ref-typeface'; +@use './md-sys-color'; +@use './md-sys-elevation'; +@use './md-sys-motion'; +@use './md-sys-shape'; +@use './md-sys-state'; +@use './md-sys-typescale'; + +@include test.describe('lib') { + @include test.describe('md-comp-assist-chip.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-assist-chip.values()); + } + } + + @include test.describe('md-comp-badge.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-badge.values()); + } + } + + @include test.describe('md-comp-banner.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-banner.values()); + } + } + + @include test.describe('md-comp-bottom-app-bar.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-bottom-app-bar.values()); + } + } + + @include test.describe('md-comp-carousel-item.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-carousel-item.values()); + } + } + + @include test.describe('md-comp-checkbox.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-checkbox.values()); + } + } + + @include test.describe('md-comp-circular-progress-indicator.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-circular-progress-indicator.values()); + } + } + + @include test.describe('md-comp-data-table.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-data-table.values()); + } + } + + @include test.describe('md-comp-date-input-modal.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-date-input-modal.values()); + } + } + + @include test.describe('md-comp-date-picker-docked.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-date-picker-docked.values()); + } + } + + @include test.describe('md-comp-date-picker-modal.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-date-picker-modal.values()); + } + } + + @include test.describe('md-comp-dialog.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-dialog.values()); + } + } + + @include test.describe('md-comp-divider.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-divider.values()); + } + } + + @include test.describe('md-comp-elevated-button.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-elevated-button.values()); + } + } + + @include test.describe('md-comp-elevated-card.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-elevated-card.values()); + } + } + + @include test.describe('md-comp-extended-fab-branded.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-extended-fab-branded.values()); + } + } + + @include test.describe('md-comp-extended-fab-primary.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-extended-fab-primary.values()); + } + } + + @include test.describe('md-comp-extended-fab-secondary.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-extended-fab-secondary.values()); + } + } + + @include test.describe('md-comp-extended-fab-surface.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-extended-fab-surface.values()); + } + } + + @include test.describe('md-comp-extended-fab-tertiary.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-extended-fab-tertiary.values()); + } + } + + @include test.describe('md-comp-fab-branded.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-fab-branded.values()); + } + } + + @include test.describe('md-comp-fab-branded-large.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-fab-branded-large.values()); + } + } + + @include test.describe('md-comp-fab-primary.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-fab-primary.values()); + } + } + + @include test.describe('md-comp-fab-primary-large.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-fab-primary-large.values()); + } + } + + @include test.describe('md-comp-fab-primary-small.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-fab-primary-small.values()); + } + } + + @include test.describe('md-comp-fab-secondary.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-fab-secondary.values()); + } + } + + @include test.describe('md-comp-fab-secondary-large.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-fab-secondary-large.values()); + } + } + + @include test.describe('md-comp-fab-secondary-small.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-fab-secondary-small.values()); + } + } + + @include test.describe('md-comp-fab-surface.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-fab-surface.values()); + } + } + + @include test.describe('md-comp-fab-surface-large.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-fab-surface-large.values()); + } + } + + @include test.describe('md-comp-fab-surface-small.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-fab-surface-small.values()); + } + } + + @include test.describe('md-comp-fab-tertiary.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-fab-tertiary.values()); + } + } + + @include test.describe('md-comp-fab-tertiary-large.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-fab-tertiary-large.values()); + } + } + + @include test.describe('md-comp-fab-tertiary-small.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-fab-tertiary-small.values()); + } + } + + @include test.describe('md-comp-filled-autocomplete.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-filled-autocomplete.values()); + } + } + + @include test.describe('md-comp-filled-button.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-filled-button.values()); + } + } + + @include test.describe('md-comp-filled-card.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-filled-card.values()); + } + } + + @include test.describe('md-comp-filled-icon-button.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-filled-icon-button.values()); + } + } + + @include test.describe('md-comp-filled-menu-button.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-filled-menu-button.values()); + } + } + + @include test.describe('md-comp-filled-select.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-filled-select.values()); + } + } + + @include test.describe('md-comp-filled-text-field.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-filled-text-field.values()); + } + } + + @include test.describe('md-comp-filled-tonal-button.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-filled-tonal-button.values()); + } + } + + @include test.describe('md-comp-filled-tonal-icon-button.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-filled-tonal-icon-button.values()); + } + } + + @include test.describe('md-comp-filter-chip.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-filter-chip.values()); + } + } + + @include test.describe('md-comp-full-screen-dialog.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-full-screen-dialog.values()); + } + } + + @include test.describe('md-comp-icon-button.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-icon-button.values()); + } + } + + @include test.describe('md-comp-input-chip.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-input-chip.values()); + } + } + + @include test.describe('md-comp-linear-progress-indicator.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-linear-progress-indicator.values()); + } + } + + @include test.describe('md-comp-list.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-list.values()); + } + } + + @include test.describe('md-comp-menu.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-menu.values()); + } + } + + @include test.describe('md-comp-navigation-bar.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-navigation-bar.values()); + } + } + + @include test.describe('md-comp-navigation-drawer.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-navigation-drawer.values()); + } + } + + @include test.describe('md-comp-navigation-rail.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-navigation-rail.values()); + } + } + + @include test.describe('md-comp-outlined-autocomplete.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-outlined-autocomplete.values()); + } + } + + @include test.describe('md-comp-outlined-button.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-outlined-button.values()); + } + } + + @include test.describe('md-comp-outlined-card.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-outlined-card.values()); + } + } + + @include test.describe('md-comp-outlined-icon-button.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-outlined-icon-button.values()); + } + } + + @include test.describe('md-comp-outlined-menu-button.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-outlined-menu-button.values()); + } + } + + @include test.describe('md-comp-outlined-segmented-button.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-outlined-segmented-button.values()); + } + } + + @include test.describe('md-comp-outlined-select.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-outlined-select.values()); + } + } + + @include test.describe('md-comp-outlined-text-field.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-outlined-text-field.values()); + } + } + + @include test.describe('md-comp-plain-tooltip.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-plain-tooltip.values()); + } + } + + @include test.describe('md-comp-primary-navigation-tab.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-primary-navigation-tab.values()); + } + } + + @include test.describe('md-comp-radio-button.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-radio-button.values()); + } + } + + @include test.describe('md-comp-rich-tooltip.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-rich-tooltip.values()); + } + } + + @include test.describe('md-comp-scrim.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-scrim.values()); + } + } + + @include test.describe('md-comp-search-bar.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-search-bar.values()); + } + } + + @include test.describe('md-comp-search-view.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-search-view.values()); + } + } + + @include test.describe('md-comp-secondary-navigation-tab.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-secondary-navigation-tab.values()); + } + } + + @include test.describe('md-comp-sheet-bottom.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-sheet-bottom.values()); + } + } + + @include test.describe('md-comp-sheet-floating.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-sheet-floating.values()); + } + } + + @include test.describe('md-comp-sheet-side.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-sheet-side.values()); + } + } + + @include test.describe('md-comp-slider.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-slider.values()); + } + } + + @include test.describe('md-comp-snackbar.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-snackbar.values()); + } + } + + @include test.describe('md-comp-standard-menu-button.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-standard-menu-button.values()); + } + } + + @include test.describe('md-comp-suggestion-chip.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-suggestion-chip.values()); + } + } + + @include test.describe('md-comp-switch.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-switch.values()); + } + } + + @include test.describe('md-comp-text-button.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-text-button.values()); + } + } + + @include test.describe('md-comp-time-input.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-time-input.values()); + } + } + + @include test.describe('md-comp-time-picker.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-time-picker.values()); + } + } + + @include test.describe('md-comp-top-app-bar-large.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-top-app-bar-large.values()); + } + } + + @include test.describe('md-comp-top-app-bar-medium.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-top-app-bar-medium.values()); + } + } + + @include test.describe('md-comp-top-app-bar-small.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-top-app-bar-small.values()); + } + } + + @include test.describe('md-comp-top-app-bar-small-centered.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-comp-top-app-bar-small-centered.values()); + } + } + + @include test.describe('md-ref-palette.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-ref-palette.values()); + } + } + + @include test.describe('md-ref-typeface.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-ref-typeface.values()); + } + } + + @include test.describe('md-sys-color.values-dark') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-sys-color.values-dark()); + } + } + + @include test.describe('md-sys-color.values-light') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-sys-color.values-light()); + } + } + + @include test.describe('md-sys-elevation.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-sys-elevation.values()); + } + } + + @include test.describe('md-sys-motion.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-sys-motion.values()); + } + } + + @include test.describe('md-sys-shape.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-sys-shape.values()); + } + } + + @include test.describe('md-sys-state.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-sys-state.values()); + } + } + + @include test.describe('md-sys-typescale.values') { + @include test.it('should return non-empty map') { + @include test.assert-true(md-sys-typescale.values()); + } + } +}