From e8d4f35868ed605d06c7204d7d61cc504565d237 Mon Sep 17 00:00:00 2001 From: Andrew Seguin Date: Fri, 28 Mar 2025 13:05:36 -0600 Subject: [PATCH] refactor: remove md_comp files --- .../core/tokens/_token-definition.scss | 13 - .../core/tokens/m3/definitions/_index.scss | 86 ----- .../m3/definitions/_md-comp-checkbox.scss | 120 ------- .../_md-comp-circular-progress-indicator.scss | 27 -- .../m3/definitions/_md-comp-data-table.scss | 90 ----- .../m3/definitions/_md-comp-dialog.scss | 123 ------- .../definitions/_md-comp-elevated-button.scss | 87 ----- .../definitions/_md-comp-elevated-card.scss | 55 --- .../_md-comp-extended-fab-primary.scss | 90 ----- .../_md-comp-extended-fab-secondary.scss | 91 ----- .../_md-comp-extended-fab-tertiary.scss | 91 ----- .../_md-comp-fab-primary-small.scss | 59 ---- .../m3/definitions/_md-comp-fab-primary.scss | 59 ---- .../_md-comp-fab-secondary-small.scss | 60 ---- .../definitions/_md-comp-fab-secondary.scss | 60 ---- .../_md-comp-fab-tertiary-small.scss | 60 ---- .../m3/definitions/_md-comp-fab-tertiary.scss | 60 ---- .../definitions/_md-comp-filled-button.scss | 85 ----- .../m3/definitions/_md-comp-filled-card.scss | 52 --- .../_md-comp-filled-icon-button.scss | 73 ---- .../_md-comp-filled-text-field.scss | 189 ----------- .../_md-comp-filled-tonal-button.scss | 95 ------ .../m3/definitions/_md-comp-icon-button.scss | 64 ---- .../_md-comp-linear-progress-indicator.scss | 29 -- .../tokens/m3/definitions/_md-comp-list.scss | 252 -------------- .../definitions/_md-comp-outlined-button.scss | 80 ----- .../definitions/_md-comp-outlined-card.scss | 59 ---- .../_md-comp-outlined-icon-button.scss | 73 ---- .../_md-comp-outlined-text-field.scss | 171 ---------- .../definitions/_md-comp-plain-tooltip.scss | 51 --- .../m3/definitions/_md-comp-radio-button.scss | 62 ---- .../_md-comp-secondary-navigation-tab.scss | 80 ----- .../m3/definitions/_md-comp-slider.scss | 110 ------ .../m3/definitions/_md-comp-snackbar.scss | 125 ------- .../m3/definitions/_md-comp-switch.scss | 130 -------- .../m3/definitions/_md-comp-text-button.scss | 73 ---- .../unused/_md-comp-assist-chip.scss | 105 ------ .../m3/definitions/unused/_md-comp-badge.scss | 54 --- .../definitions/unused/_md-comp-banner.scss | 71 ---- .../unused/_md-comp-bottom-app-bar.scss | 29 -- .../unused/_md-comp-carousel-item.scss | 59 ---- .../unused/_md-comp-date-input-modal.scss | 87 ----- .../unused/_md-comp-date-picker-docked.scss | 248 -------------- .../unused/_md-comp-date-picker-modal.scss | 313 ------------------ .../definitions/unused/_md-comp-divider.scss | 19 -- .../unused/_md-comp-extended-fab-branded.scss | 82 ----- .../unused/_md-comp-extended-fab-surface.scss | 86 ----- .../unused/_md-comp-fab-branded-large.scss | 54 --- .../unused/_md-comp-fab-branded.scss | 54 --- .../unused/_md-comp-fab-primary-large.scss | 59 ---- .../unused/_md-comp-fab-secondary-large.scss | 60 ---- .../unused/_md-comp-fab-surface-large.scss | 58 ---- .../unused/_md-comp-fab-surface-small.scss | 58 ---- .../unused/_md-comp-fab-surface.scss | 58 ---- .../unused/_md-comp-fab-tertiary-large.scss | 60 ---- .../unused/_md-comp-filled-autocomplete.scss | 269 --------------- .../unused/_md-comp-filled-menu-button.scss | 94 ------ .../unused/_md-comp-filled-select.scss | 274 --------------- .../_md-comp-filled-tonal-icon-button.scss | 80 ----- .../unused/_md-comp-filter-chip.scss | 205 ------------ .../unused/_md-comp-full-screen-dialog.scss | 109 ------ .../unused/_md-comp-input-chip.scss | 180 ---------- .../m3/definitions/unused/_md-comp-menu.scss | 31 -- .../unused/_md-comp-navigation-bar.scss | 110 ------ .../unused/_md-comp-navigation-drawer.scss | 162 --------- .../unused/_md-comp-navigation-rail.scss | 127 ------- .../_md-comp-outlined-autocomplete.scss | 259 --------------- .../unused/_md-comp-outlined-menu-button.scss | 90 ----- .../_md-comp-outlined-segmented-button.scss | 108 ------ .../unused/_md-comp-outlined-select.scss | 264 --------------- .../_md-comp-primary-navigation-tab.scss | 117 ------- .../unused/_md-comp-rich-tooltip.scss | 121 ------- .../m3/definitions/unused/_md-comp-scrim.scss | 19 -- .../unused/_md-comp-search-bar.scss | 97 ------ .../unused/_md-comp-search-view.scss | 91 ----- .../unused/_md-comp-sheet-bottom.scss | 39 --- .../unused/_md-comp-sheet-floating.scss | 28 -- .../unused/_md-comp-sheet-side.scss | 87 ----- .../unused/_md-comp-standard-menu-button.scss | 94 ------ .../unused/_md-comp-suggestion-chip.scss | 121 ------- .../unused/_md-comp-time-input.scss | 222 ------------- .../unused/_md-comp-time-picker.scss | 268 --------------- .../unused/_md-comp-top-app-bar-large.scss | 59 ---- .../unused/_md-comp-top-app-bar-medium.scss | 59 ---- .../_md-comp-top-app-bar-small-centered.scss | 62 ---- .../unused/_md-comp-top-app-bar-small.scss | 60 ---- .../core/tokens/m3/mat/_tonal-button.scss | 58 +++- .../core/tokens/m3/mdc/_checkbox.scss | 79 ++++- src/material/core/tokens/m3/mdc/_chip.scss | 11 +- .../tokens/m3/mdc/_circular-progress.scss | 16 +- src/material/core/tokens/m3/mdc/_dialog.scss | 80 ++++- .../core/tokens/m3/mdc/_elevated-card.scss | 31 +- .../core/tokens/m3/mdc/_extended-fab.scss | 161 ++++++++- .../core/tokens/m3/mdc/_fab-small.scss | 97 +++++- src/material/core/tokens/m3/mdc/_fab.scss | 95 +++++- .../core/tokens/m3/mdc/_filled-button.scss | 57 +++- .../tokens/m3/mdc/_filled-text-field.scss | 133 +++++++- .../core/tokens/m3/mdc/_icon-button.scss | 38 ++- .../core/tokens/m3/mdc/_linear-progress.scss | 18 +- src/material/core/tokens/m3/mdc/_list.scss | 162 ++++++++- .../core/tokens/m3/mdc/_outlined-button.scss | 56 +++- .../core/tokens/m3/mdc/_outlined-card.scss | 35 +- .../tokens/m3/mdc/_outlined-text-field.scss | 126 ++++++- .../core/tokens/m3/mdc/_plain-tooltip.scss | 29 +- .../core/tokens/m3/mdc/_protected-button.scss | 60 +++- src/material/core/tokens/m3/mdc/_radio.scss | 34 +- .../m3/mdc/_secondary-navigation-tab.scss | 51 ++- src/material/core/tokens/m3/mdc/_slider.scss | 73 +++- .../core/tokens/m3/mdc/_snack-bar.scss | 72 +++- src/material/core/tokens/m3/mdc/_switch.scss | 79 ++++- .../core/tokens/m3/mdc/_text-button.scss | 48 ++- 111 files changed, 1629 insertions(+), 8674 deletions(-) delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-checkbox.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-circular-progress-indicator.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-data-table.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-dialog.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-elevated-button.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-elevated-card.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-extended-fab-primary.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-extended-fab-secondary.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-extended-fab-tertiary.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-fab-primary-small.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-fab-primary.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-fab-secondary-small.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-fab-secondary.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-fab-tertiary-small.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-fab-tertiary.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-filled-button.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-filled-card.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-filled-icon-button.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-filled-text-field.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-filled-tonal-button.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-icon-button.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-linear-progress-indicator.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-list.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-outlined-button.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-outlined-card.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-outlined-icon-button.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-outlined-text-field.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-plain-tooltip.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-radio-button.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-secondary-navigation-tab.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-slider.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-snackbar.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-switch.scss delete mode 100644 src/material/core/tokens/m3/definitions/_md-comp-text-button.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-assist-chip.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-badge.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-banner.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-bottom-app-bar.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-carousel-item.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-date-input-modal.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-date-picker-docked.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-date-picker-modal.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-divider.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-extended-fab-branded.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-extended-fab-surface.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-fab-branded-large.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-fab-branded.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-fab-primary-large.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-fab-secondary-large.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-fab-surface-large.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-fab-surface-small.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-fab-surface.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-fab-tertiary-large.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-filled-autocomplete.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-filled-menu-button.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-filled-select.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-filled-tonal-icon-button.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-filter-chip.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-full-screen-dialog.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-input-chip.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-menu.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-navigation-bar.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-navigation-drawer.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-navigation-rail.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-outlined-autocomplete.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-outlined-menu-button.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-outlined-segmented-button.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-outlined-select.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-primary-navigation-tab.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-rich-tooltip.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-scrim.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-search-bar.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-search-view.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-sheet-bottom.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-sheet-floating.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-sheet-side.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-standard-menu-button.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-suggestion-chip.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-time-input.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-time-picker.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-large.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-medium.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-small-centered.scss delete mode 100644 src/material/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-small.scss diff --git a/src/material/core/tokens/_token-definition.scss b/src/material/core/tokens/_token-definition.scss index 5e4d4e66335a..ec7401009879 100644 --- a/src/material/core/tokens/_token-definition.scss +++ b/src/material/core/tokens/_token-definition.scss @@ -7,7 +7,6 @@ @use '../m2/theming' as m2-theming; @use '../m2/typography' as m2-typography; @use '../style/sass-utils'; -@use './m3/definitions' as m3-token-definitions; // Indicates whether we're building internally. Used for backwards compatibility. $private-is-internal-build: false; @@ -56,18 +55,6 @@ $_tokens: null; $_component-prefix: null; $_system-fallbacks: null; -/// Gets all the MDC token values for a specific component. This function serves as single -/// point at which we directly reference a specific version of the MDC tokens. -/// @param {String} $component Name of the component for which to get the tokens -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @return {List} Map of token names to values -@function get-mdc-tokens($component, $systems, $exclude-hardcoded) { - $full-name: 'md-comp-' + $component + '-values'; - $fn: meta.get-function($name: $full-name, $module: 'm3-token-definitions'); - @return meta.call($fn, $systems, $exclude-hardcoded); -} - /// Gets the MDC tokens for the given prefix, M3 token values, and supported token slots. /// @param {List} $prefix The token prefix for the given tokens. /// @param {Map|(Map, Map)} $values A map of M3 token values for the given prefix. diff --git a/src/material/core/tokens/m3/definitions/_index.scss b/src/material/core/tokens/m3/definitions/_index.scss index 60eb8adf886f..1a4ff56056f6 100644 --- a/src/material/core/tokens/m3/definitions/_index.scss +++ b/src/material/core/tokens/m3/definitions/_index.scss @@ -1,37 +1,3 @@ -@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-dialog' as md-comp-dialog-*; -@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-primary' as md-comp-extended-fab-primary-*; -@forward './md-comp-extended-fab-secondary' as md-comp-extended-fab-secondary-*; -@forward './md-comp-extended-fab-tertiary' as md-comp-extended-fab-tertiary-*; -@forward './md-comp-fab-primary-small' as md-comp-fab-primary-small-*; -@forward './md-comp-fab-primary' as md-comp-fab-primary-*; -@forward './md-comp-fab-secondary-small' as md-comp-fab-secondary-small-*; -@forward './md-comp-fab-secondary' as md-comp-fab-secondary-*; -@forward './md-comp-fab-tertiary-small' as md-comp-fab-tertiary-small-*; -@forward './md-comp-fab-tertiary' as md-comp-fab-tertiary-*; -@forward './md-comp-filled-button' as md-comp-filled-button-*; -@forward './md-comp-filled-tonal-button' as md-comp-filled-tonal-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-text-field' as md-comp-filled-text-field-*; -@forward './md-comp-icon-button' as md-comp-icon-button-*; -@forward './md-comp-linear-progress-indicator' as md-comp-linear-progress-indicator-*; -@forward './md-comp-list' as md-comp-list-*; -@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-text-field' as md-comp-outlined-text-field-*; -@forward './md-comp-plain-tooltip' as md-comp-plain-tooltip-*; -@forward './md-comp-radio-button' as md-comp-radio-button-*; -@forward './md-comp-secondary-navigation-tab' as md-comp-secondary-navigation-tab-*; -@forward './md-comp-slider' as md-comp-slider-*; -@forward './md-comp-snackbar' as md-comp-snackbar-*; -@forward './md-comp-switch' as md-comp-switch-*; -@forward './md-comp-text-button' as md-comp-text-button-*; @forward './md-ref-palette' as md-ref-palette-*; @forward './md-ref-typeface' as md-ref-typeface-*; @forward './md-sys-color' as md-sys-color-*; @@ -40,55 +6,3 @@ @forward './md-sys-shape' as md-sys-shape-*; @forward './md-sys-state' as md-sys-state-*; @forward './md-sys-typescale' as md-sys-typescale-*; - -// Tokens that are in the spec, but are currently unused. -// @forward './unused/md-comp-assist-chip' as md-comp-assist-chip-*; -// @forward './unused/md-comp-badge' as md-comp-badge-*; -// @forward './unused/md-comp-banner' as md-comp-banner-*; -// @forward './unused/md-comp-bottom-app-bar' as md-comp-bottom-app-bar-*; -// @forward './unused/md-comp-carousel-item' as md-comp-carousel-item-*; -// @forward './unused/md-comp-date-input-modal' as md-comp-date-input-modal-*; -// @forward './unused/md-comp-date-picker-docked' as md-comp-date-picker-docked-*; -// @forward './unused/md-comp-date-picker-modal' as md-comp-date-picker-modal-*; -// @forward './unused/md-comp-divider' as md-comp-divider-*; -// @forward './unused/md-comp-extended-fab-branded' as md-comp-extended-fab-branded-*; -// @forward './unused/md-comp-extended-fab-surface' as md-comp-extended-fab-surface-*; -// @forward './unused/md-comp-fab-branded-large' as md-comp-fab-branded-large-*; -// @forward './unused/md-comp-fab-branded' as md-comp-fab-branded-*; -// @forward './unused/md-comp-fab-primary-large' as md-comp-fab-primary-large-*; -// @forward './unused/md-comp-fab-secondary-large' as md-comp-fab-secondary-large-*; -// @forward './unused/md-comp-fab-surface-large' as md-comp-fab-surface-large-*; -// @forward './unused/md-comp-fab-surface-small' as md-comp-fab-surface-small-*; -// @forward './unused/md-comp-fab-surface' as md-comp-fab-surface-*; -// @forward './unused/md-comp-fab-tertiary-large' as md-comp-fab-tertiary-large-*; -// @forward './unused/md-comp-filled-autocomplete' as md-comp-filled-autocomplete-*; -// @forward './unused/md-comp-filled-menu-button' as md-comp-filled-menu-button-*; -// @forward './unused/md-comp-filled-select' as md-comp-filled-select-*; -// @forward './unused/md-comp-filled-tonal-icon-button' as md-comp-filled-tonal-icon-button-*; -// @forward './unused/md-comp-filter-chip' as md-comp-filter-chip-*; -// @forward './unused/md-comp-full-screen-dialog' as md-comp-full-screen-dialog-*; -// @forward './unused/md-comp-input-chip' as md-comp-input-chip-*; -// @forward './unused/md-comp-menu' as md-comp-menu-*; -// @forward './unused/md-comp-navigation-bar' as md-comp-navigation-bar-*; -// @forward './unused/md-comp-navigation-drawer' as md-comp-navigation-drawer-*; -// @forward './unused/md-comp-navigation-rail' as md-comp-navigation-rail-*; -// @forward './unused/md-comp-outlined-autocomplete' as md-comp-outlined-autocomplete-*; -// @forward './unused/md-comp-outlined-menu-button' as md-comp-outlined-menu-button-*; -// @forward './unused/md-comp-outlined-segmented-button' as md-comp-outlined-segmented-button-*; -// @forward './unused/md-comp-outlined-select' as md-comp-outlined-select-*; -// @forward './unused/md-comp-primary-navigation-tab' as md-comp-primary-navigation-tab-*; -// @forward './unused/md-comp-rich-tooltip' as md-comp-rich-tooltip-*; -// @forward './unused/md-comp-scrim' as md-comp-scrim-*; -// @forward './unused/md-comp-search-bar' as md-comp-search-bar-*; -// @forward './unused/md-comp-search-view' as md-comp-search-view-*; -// @forward './unused/md-comp-sheet-bottom' as md-comp-sheet-bottom-*; -// @forward './unused/md-comp-sheet-floating' as md-comp-sheet-floating-*; -// @forward './unused/md-comp-sheet-side' as md-comp-sheet-side-*; -// @forward './unused/md-comp-standard-menu-button' as md-comp-standard-menu-button-*; -// @forward './unused/md-comp-suggestion-chip' as md-comp-suggestion-chip-*; -// @forward './unused/md-comp-time-input' as md-comp-time-input-*; -// @forward './unused/md-comp-time-picker' as md-comp-time-picker-*; -// @forward './unused/md-comp-top-app-bar-large' as md-comp-top-app-bar-large-*; -// @forward './unused/md-comp-top-app-bar-medium' as md-comp-top-app-bar-medium-*; -// @forward './unused/md-comp-top-app-bar-small-centered' as md-comp-top-app-bar-small-centered-*; -// @forward './unused/md-comp-top-app-bar-small' as md-comp-top-app-bar-small-*; diff --git a/src/material/core/tokens/m3/definitions/_md-comp-checkbox.scss b/src/material/core/tokens/m3/definitions/_md-comp-checkbox.scss deleted file mode 100644 index 96d079136c6e..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-checkbox.scss +++ /dev/null @@ -1,120 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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, 0), - '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, 0), - '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, 0), - '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, 0), - '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, 0), - '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/src/material/core/tokens/m3/definitions/_md-comp-circular-progress-indicator.scss b/src/material/core/tokens/m3/definitions/_md-comp-circular-progress-indicator.scss deleted file mode 100644 index 825cc0eed579..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-circular-progress-indicator.scss +++ /dev/null @@ -1,27 +0,0 @@ -@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/src/material/core/tokens/m3/definitions/_md-comp-data-table.scss b/src/material/core/tokens/m3/definitions/_md-comp-data-table.scss deleted file mode 100644 index 9c94d2c11791..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-data-table.scss +++ /dev/null @@ -1,90 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/_md-comp-dialog.scss b/src/material/core/tokens/m3/definitions/_md-comp-dialog.scss deleted file mode 100644 index a4dfe2511891..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-dialog.scss +++ /dev/null @@ -1,123 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'action-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'headline-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'supporting-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/_md-comp-elevated-button.scss b/src/material/core/tokens/m3/definitions/_md-comp-elevated-button.scss deleted file mode 100644 index 01bde1b9fc67..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-elevated-button.scss +++ /dev/null @@ -1,87 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/_md-comp-elevated-card.scss b/src/material/core/tokens/m3/definitions/_md-comp-elevated-card.scss deleted file mode 100644 index d5102433966c..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-elevated-card.scss +++ /dev/null @@ -1,55 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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) { - $values: ( - 'container-color': map.get($deps, 'md-sys-color', 'surface-container-low'), - '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') - ); - - @return $values; -} diff --git a/src/material/core/tokens/m3/definitions/_md-comp-extended-fab-primary.scss b/src/material/core/tokens/m3/definitions/_md-comp-extended-fab-primary.scss deleted file mode 100644 index 13283d811876..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-extended-fab-primary.scss +++ /dev/null @@ -1,90 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/_md-comp-extended-fab-secondary.scss b/src/material/core/tokens/m3/definitions/_md-comp-extended-fab-secondary.scss deleted file mode 100644 index 49423e715298..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-extended-fab-secondary.scss +++ /dev/null @@ -1,91 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/_md-comp-extended-fab-tertiary.scss b/src/material/core/tokens/m3/definitions/_md-comp-extended-fab-tertiary.scss deleted file mode 100644 index ed4ca80d6ec3..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-extended-fab-tertiary.scss +++ /dev/null @@ -1,91 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/_md-comp-fab-primary-small.scss b/src/material/core/tokens/m3/definitions/_md-comp-fab-primary-small.scss deleted file mode 100644 index 878ac93431ca..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-fab-primary-small.scss +++ /dev/null @@ -1,59 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/_md-comp-fab-primary.scss b/src/material/core/tokens/m3/definitions/_md-comp-fab-primary.scss deleted file mode 100644 index 77f4374530f4..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-fab-primary.scss +++ /dev/null @@ -1,59 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/_md-comp-fab-secondary-small.scss b/src/material/core/tokens/m3/definitions/_md-comp-fab-secondary-small.scss deleted file mode 100644 index 06e2c466bf80..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-fab-secondary-small.scss +++ /dev/null @@ -1,60 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/_md-comp-fab-secondary.scss b/src/material/core/tokens/m3/definitions/_md-comp-fab-secondary.scss deleted file mode 100644 index 9f2408254178..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-fab-secondary.scss +++ /dev/null @@ -1,60 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/_md-comp-fab-tertiary-small.scss b/src/material/core/tokens/m3/definitions/_md-comp-fab-tertiary-small.scss deleted file mode 100644 index b1aef65be20b..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-fab-tertiary-small.scss +++ /dev/null @@ -1,60 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/_md-comp-fab-tertiary.scss b/src/material/core/tokens/m3/definitions/_md-comp-fab-tertiary.scss deleted file mode 100644 index 0864030d5602..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-fab-tertiary.scss +++ /dev/null @@ -1,60 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/_md-comp-filled-button.scss b/src/material/core/tokens/m3/definitions/_md-comp-filled-button.scss deleted file mode 100644 index 33e6277ede92..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-filled-button.scss +++ /dev/null @@ -1,85 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/_md-comp-filled-card.scss b/src/material/core/tokens/m3/definitions/_md-comp-filled-card.scss deleted file mode 100644 index f0efd483581c..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-filled-card.scss +++ /dev/null @@ -1,52 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/_md-comp-filled-icon-button.scss b/src/material/core/tokens/m3/definitions/_md-comp-filled-icon-button.scss deleted file mode 100644 index 1b036fecf747..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-filled-icon-button.scss +++ /dev/null @@ -1,73 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/_md-comp-filled-text-field.scss b/src/material/core/tokens/m3/definitions/_md-comp-filled-text-field.scss deleted file mode 100644 index 831804e3edc1..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-filled-text-field.scss +++ /dev/null @@ -1,189 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'input-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'supporting-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/_md-comp-filled-tonal-button.scss b/src/material/core/tokens/m3/definitions/_md-comp-filled-tonal-button.scss deleted file mode 100644 index 0d457ed9428b..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-filled-tonal-button.scss +++ /dev/null @@ -1,95 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/_md-comp-icon-button.scss b/src/material/core/tokens/m3/definitions/_md-comp-icon-button.scss deleted file mode 100644 index e012646125e3..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-icon-button.scss +++ /dev/null @@ -1,64 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/_md-comp-linear-progress-indicator.scss b/src/material/core/tokens/m3/definitions/_md-comp-linear-progress-indicator.scss deleted file mode 100644 index bc58692e1350..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-linear-progress-indicator.scss +++ /dev/null @@ -1,29 +0,0 @@ -@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/src/material/core/tokens/m3/definitions/_md-comp-list.scss b/src/material/core/tokens/m3/definitions/_md-comp-list.scss deleted file mode 100644 index 9de3bffe5e88..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-list.scss +++ /dev/null @@ -1,252 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'list-item-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'list-item-leading-avatar-label-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'list-item-overline-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'list-item-supporting-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'list-item-trailing-supporting-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/_md-comp-outlined-button.scss b/src/material/core/tokens/m3/definitions/_md-comp-outlined-button.scss deleted file mode 100644 index eba0a07a64a4..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-outlined-button.scss +++ /dev/null @@ -1,80 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/_md-comp-outlined-card.scss b/src/material/core/tokens/m3/definitions/_md-comp-outlined-card.scss deleted file mode 100644 index c2b672ff4d7f..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-outlined-card.scss +++ /dev/null @@ -1,59 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/_md-comp-outlined-icon-button.scss b/src/material/core/tokens/m3/definitions/_md-comp-outlined-icon-button.scss deleted file mode 100644 index cb99cb528820..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-outlined-icon-button.scss +++ /dev/null @@ -1,73 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/_md-comp-outlined-text-field.scss b/src/material/core/tokens/m3/definitions/_md-comp-outlined-text-field.scss deleted file mode 100644 index d09bbf9c9f92..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-outlined-text-field.scss +++ /dev/null @@ -1,171 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'input-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'supporting-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/_md-comp-plain-tooltip.scss b/src/material/core/tokens/m3/definitions/_md-comp-plain-tooltip.scss deleted file mode 100644 index d777adc14f10..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-plain-tooltip.scss +++ /dev/null @@ -1,51 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'supporting-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/_md-comp-radio-button.scss b/src/material/core/tokens/m3/definitions/_md-comp-radio-button.scss deleted file mode 100644 index 986a0040146b..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-radio-button.scss +++ /dev/null @@ -1,62 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/_md-comp-secondary-navigation-tab.scss b/src/material/core/tokens/m3/definitions/_md-comp-secondary-navigation-tab.scss deleted file mode 100644 index 9c6bb7f2d4e5..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-secondary-navigation-tab.scss +++ /dev/null @@ -1,80 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/_md-comp-slider.scss b/src/material/core/tokens/m3/definitions/_md-comp-slider.scss deleted file mode 100644 index 6b507a845938..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-slider.scss +++ /dev/null @@ -1,110 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/_md-comp-snackbar.scss b/src/material/core/tokens/m3/definitions/_md-comp-snackbar.scss deleted file mode 100644 index 20e154d91efd..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-snackbar.scss +++ /dev/null @@ -1,125 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'action-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'supporting-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/_md-comp-switch.scss b/src/material/core/tokens/m3/definitions/_md-comp-switch.scss deleted file mode 100644 index 26e8b58cb587..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-switch.scss +++ /dev/null @@ -1,130 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/_md-comp-text-button.scss b/src/material/core/tokens/m3/definitions/_md-comp-text-button.scss deleted file mode 100644 index 6795035b9369..000000000000 --- a/src/material/core/tokens/m3/definitions/_md-comp-text-button.scss +++ /dev/null @@ -1,73 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-assist-chip.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-assist-chip.scss deleted file mode 100644 index 00eef420334b..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-assist-chip.scss +++ /dev/null @@ -1,105 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-badge.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-badge.scss deleted file mode 100644 index ab791cbcd159..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-badge.scss +++ /dev/null @@ -1,54 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'large-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-banner.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-banner.scss deleted file mode 100644 index 6be3c5a4772d..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-banner.scss +++ /dev/null @@ -1,71 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'supporting-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-bottom-app-bar.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-bottom-app-bar.scss deleted file mode 100644 index 3e630b7a35f0..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-bottom-app-bar.scss +++ /dev/null @@ -1,29 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/unused/_md-comp-carousel-item.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-carousel-item.scss deleted file mode 100644 index adb1f708d22d..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-carousel-item.scss +++ /dev/null @@ -1,59 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/unused/_md-comp-date-input-modal.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-date-input-modal.scss deleted file mode 100644 index bdd7b76534d5..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-date-input-modal.scss +++ /dev/null @@ -1,87 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'header-headline-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'header-supporting-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-date-picker-docked.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-date-picker-docked.scss deleted file mode 100644 index cce46b395fef..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-date-picker-docked.scss +++ /dev/null @@ -1,248 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'date-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'menu-button-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'menu-list-item-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'weekdays-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-date-picker-modal.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-date-picker-modal.scss deleted file mode 100644 index 058b9a517149..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-date-picker-modal.scss +++ /dev/null @@ -1,313 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'date-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'header-headline-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'header-supporting-text-type': - if( - $exclude-hardcoded-values, - null, - 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', 'secondary-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-secondary-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'), - // 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. - 'range-selection-header-headline-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'range-selection-month-subhead-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'weekdays-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'year-selection-year-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-divider.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-divider.scss deleted file mode 100644 index ba39b7dcbe19..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-divider.scss +++ /dev/null @@ -1,19 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/unused/_md-comp-extended-fab-branded.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-extended-fab-branded.scss deleted file mode 100644 index d18114b18b6f..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-extended-fab-branded.scss +++ /dev/null @@ -1,82 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-extended-fab-surface.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-extended-fab-surface.scss deleted file mode 100644 index c4d5c7ae4ca8..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-extended-fab-surface.scss +++ /dev/null @@ -1,86 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-branded-large.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-branded-large.scss deleted file mode 100644 index 530ace9a4d04..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-branded-large.scss +++ /dev/null @@ -1,54 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-branded.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-branded.scss deleted file mode 100644 index 17f1c291c66c..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-branded.scss +++ /dev/null @@ -1,54 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-primary-large.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-primary-large.scss deleted file mode 100644 index c2e00c82706d..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-primary-large.scss +++ /dev/null @@ -1,59 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-secondary-large.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-secondary-large.scss deleted file mode 100644 index 6192e5473f72..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-secondary-large.scss +++ /dev/null @@ -1,60 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-surface-large.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-surface-large.scss deleted file mode 100644 index 13105e976791..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-surface-large.scss +++ /dev/null @@ -1,58 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-surface-small.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-surface-small.scss deleted file mode 100644 index 074b76f04437..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-surface-small.scss +++ /dev/null @@ -1,58 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-surface.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-surface.scss deleted file mode 100644 index fe5843b69f42..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-surface.scss +++ /dev/null @@ -1,58 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-tertiary-large.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-tertiary-large.scss deleted file mode 100644 index d39c9dcc7e95..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-fab-tertiary-large.scss +++ /dev/null @@ -1,60 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/unused/_md-comp-filled-autocomplete.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-filled-autocomplete.scss deleted file mode 100644 index 8d5d4d42f487..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-filled-autocomplete.scss +++ /dev/null @@ -1,269 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'menu-list-item-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'text-field-input-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'text-field-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'text-field-supporting-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-filled-menu-button.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-filled-menu-button.scss deleted file mode 100644 index d3d9ed7a361c..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-filled-menu-button.scss +++ /dev/null @@ -1,94 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-filled-select.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-filled-select.scss deleted file mode 100644 index 4becc3330ef1..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-filled-select.scss +++ /dev/null @@ -1,274 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'menu-list-item-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'text-field-input-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'text-field-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'text-field-supporting-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-filled-tonal-icon-button.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-filled-tonal-icon-button.scss deleted file mode 100644 index 373395af3005..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-filled-tonal-icon-button.scss +++ /dev/null @@ -1,80 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/unused/_md-comp-filter-chip.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-filter-chip.scss deleted file mode 100644 index e004f587f3e3..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-filter-chip.scss +++ /dev/null @@ -1,205 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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, 0), - '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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-full-screen-dialog.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-full-screen-dialog.scss deleted file mode 100644 index e68603400d44..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-full-screen-dialog.scss +++ /dev/null @@ -1,109 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'header-action-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'header-headline-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-input-chip.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-input-chip.scss deleted file mode 100644 index 1a2199d6ef58..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-input-chip.scss +++ /dev/null @@ -1,180 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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, 0), - '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/src/material/core/tokens/m3/definitions/unused/_md-comp-menu.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-menu.scss deleted file mode 100644 index 85b6a5fd0480..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-menu.scss +++ /dev/null @@ -1,31 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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', '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-selected-container-color': - map.get($deps, 'md-sys-color', 'surface-variant') - ); -} diff --git a/src/material/core/tokens/m3/definitions/unused/_md-comp-navigation-bar.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-navigation-bar.scss deleted file mode 100644 index 0b0b14a34a43..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-navigation-bar.scss +++ /dev/null @@ -1,110 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-navigation-drawer.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-navigation-drawer.scss deleted file mode 100644 index 61f35ae7990b..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-navigation-drawer.scss +++ /dev/null @@ -1,162 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'headline-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'large-badge-label-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-navigation-rail.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-navigation-rail.scss deleted file mode 100644 index 7e364133847f..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-navigation-rail.scss +++ /dev/null @@ -1,127 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-outlined-autocomplete.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-outlined-autocomplete.scss deleted file mode 100644 index 2bd947d5830c..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-outlined-autocomplete.scss +++ /dev/null @@ -1,259 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'menu-list-item-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'text-field-input-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'text-field-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'text-field-supporting-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-outlined-menu-button.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-outlined-menu-button.scss deleted file mode 100644 index 0e5bde6a05e5..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-outlined-menu-button.scss +++ /dev/null @@ -1,90 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-outlined-segmented-button.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-outlined-segmented-button.scss deleted file mode 100644 index e26e6ae0599c..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-outlined-segmented-button.scss +++ /dev/null @@ -1,108 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-outlined-select.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-outlined-select.scss deleted file mode 100644 index cad2d00c9645..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-outlined-select.scss +++ /dev/null @@ -1,264 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'menu-list-item-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'text-field-input-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'text-field-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'text-field-supporting-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-primary-navigation-tab.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-primary-navigation-tab.scss deleted file mode 100644 index 8ab6793cfe64..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-primary-navigation-tab.scss +++ /dev/null @@ -1,117 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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 0 0)), - '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'), - // 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. - 'with-label-text-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-rich-tooltip.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-rich-tooltip.scss deleted file mode 100644 index 9d1b89c5dc55..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-rich-tooltip.scss +++ /dev/null @@ -1,121 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'action-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'subhead-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'supporting-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-scrim.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-scrim.scss deleted file mode 100644 index a70e771da930..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-scrim.scss +++ /dev/null @@ -1,19 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/unused/_md-comp-search-bar.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-search-bar.scss deleted file mode 100644 index a076c996e137..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-search-bar.scss +++ /dev/null @@ -1,97 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'input-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'supporting-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-search-view.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-search-view.scss deleted file mode 100644 index 615623c60f06..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-search-view.scss +++ /dev/null @@ -1,91 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'header-input-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'header-supporting-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-sheet-bottom.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-sheet-bottom.scss deleted file mode 100644 index f581ecdb8721..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-sheet-bottom.scss +++ /dev/null @@ -1,39 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/unused/_md-comp-sheet-floating.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-sheet-floating.scss deleted file mode 100644 index ae6b063f4be7..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-sheet-floating.scss +++ /dev/null @@ -1,28 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/unused/_md-comp-sheet-side.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-sheet-side.scss deleted file mode 100644 index 398970f126c3..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-sheet-side.scss +++ /dev/null @@ -1,87 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'docked-headline-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-standard-menu-button.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-standard-menu-button.scss deleted file mode 100644 index 0f294784e002..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-standard-menu-button.scss +++ /dev/null @@ -1,94 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'label-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-suggestion-chip.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-suggestion-chip.scss deleted file mode 100644 index 2975353814af..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-suggestion-chip.scss +++ /dev/null @@ -1,121 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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/src/material/core/tokens/m3/definitions/unused/_md-comp-time-input.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-time-input.scss deleted file mode 100644 index ac149d62fbb8..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-time-input.scss +++ /dev/null @@ -1,222 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'headline-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'period-selector-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'time-input-field-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'time-input-field-separator-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'time-input-field-supporting-text-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-time-picker.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-time-picker.scss deleted file mode 100644 index e14327db636c..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-time-picker.scss +++ /dev/null @@ -1,268 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'clock-dial-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'headline-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'period-selector-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'time-selector-label-text-type': - if( - $exclude-hardcoded-values, - null, - 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'), - // 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. - 'time-selector-separator-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-large.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-large.scss deleted file mode 100644 index 1560773f0deb..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-large.scss +++ /dev/null @@ -1,59 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'headline-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-medium.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-medium.scss deleted file mode 100644 index 80b0e603fedf..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-medium.scss +++ /dev/null @@ -1,59 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'headline-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-small-centered.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-small-centered.scss deleted file mode 100644 index 63c9909dab1f..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-small-centered.scss +++ /dev/null @@ -1,62 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'headline-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-small.scss b/src/material/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-small.scss deleted file mode 100644 index 9de00b9fbf8f..000000000000 --- a/src/material/core/tokens/m3/definitions/unused/_md-comp-top-app-bar-small.scss +++ /dev/null @@ -1,60 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@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'), - // 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. - 'headline-type': - if( - $exclude-hardcoded-values, - null, - 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/src/material/core/tokens/m3/mat/_tonal-button.scss b/src/material/core/tokens/m3/mat/_tonal-button.scss index 0069c240db12..83fce272dd46 100644 --- a/src/material/core/tokens/m3/mat/_tonal-button.scss +++ b/src/material/core/tokens/m3/mat/_tonal-button.scss @@ -12,7 +12,7 @@ $prefix: (mat, tonal-button); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the mat-flat-button @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $mdc-tokens: token-definition.get-mdc-tokens('filled-tonal-button', $systems, $exclude-hardcoded); + $mdc-tokens: values($systems, $exclude-hardcoded); $tokens: map.merge($mdc-tokens, ( horizontal-padding: token-definition.hardcode(24px, $exclude-hardcoded), @@ -86,7 +86,7 @@ $prefix: (mat, tonal-button); @function _fix-tokens($initial-tokens) { // Need to get the hardcoded values, because they include opacities that are used for the disabled // state. - $hardcoded-tokens: token-definition.get-mdc-tokens('filled-tonal-button', (), false); + $hardcoded-tokens: values((), false); @return token-definition.combine-color-tokens($initial-tokens, $hardcoded-tokens, ( ( @@ -99,3 +99,57 @@ $prefix: (mat, tonal-button); ) )); } + +@function values($deps, $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), + // 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. + label-text-type: + if( + $exclude-hardcoded-values, + null, + 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/src/material/core/tokens/m3/mdc/_checkbox.scss b/src/material/core/tokens/m3/mdc/_checkbox.scss index 27464d0c54e7..e6045566c5b7 100644 --- a/src/material/core/tokens/m3/mdc/_checkbox.scss +++ b/src/material/core/tokens/m3/mdc/_checkbox.scss @@ -11,7 +11,7 @@ $prefix: (mat, checkbox); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC checkbox @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $mdc-tokens: token-definition.get-mdc-tokens('checkbox', $systems, $exclude-hardcoded); + $mdc-tokens: values($systems, $exclude-hardcoded); $variant-tokens: ( primary: (), // Default, no overrides needed secondary: ( @@ -65,17 +65,17 @@ $prefix: (mat, checkbox); ); } -/// Renames the official checkbox tokens to match the names actually used in MDC's code (which are +/// Renames the official checkbox tokens to match the names actually used in MDCs code (which are /// different). This is a temporary workaround until MDC updates to use the correct names for the /// tokens. /// @param {Map} $tokens The map of checkbox tokens with the official tokens names /// @param {Map} $all-tokens Map of all checkbox tokens, including hardcoded values. /// This is necessary in order to do opacity lookups. -/// @return {Map} The given tokens, renamed to be compatible with MDC's token implementation. +/// @return {Map} The given tokens, renamed to be compatible with MDCs token implementation. @function _fix-tokens($tokens) { // Need to get the hardcoded values, because they include opacities that are used for the disabled // state. - $hardcoded-tokens: token-definition.get-mdc-tokens('checkbox', (), false); + $hardcoded-tokens: values((), false); $rename-keys: ( selected-icon-color: selected-checkmark-color, @@ -95,8 +95,7 @@ $prefix: (mat, checkbox); ); $remapped-tokens: token-definition.rename-map-keys($tokens, $rename-keys); - $remapped-hardcoded-tokens: - token-definition.rename-map-keys($hardcoded-tokens, $rename-keys); + $remapped-hardcoded-tokens: token-definition.rename-map-keys($hardcoded-tokens, $rename-keys); @return token-definition.combine-color-tokens( $remapped-tokens, $remapped-hardcoded-tokens, ( @@ -110,3 +109,71 @@ $prefix: (mat, checkbox); ), )); } + +@function values($deps, $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, 0), + 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, 0), + 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, 0), + 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, 0), + 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, 0), + 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/src/material/core/tokens/m3/mdc/_chip.scss b/src/material/core/tokens/m3/mdc/_chip.scss index 5942a58bcbd0..83a2251dba87 100644 --- a/src/material/core/tokens/m3/mdc/_chip.scss +++ b/src/material/core/tokens/m3/mdc/_chip.scss @@ -41,10 +41,9 @@ $prefix: (mat, chip); focus-outline-color: map.get($systems, md-sys-color, on-surface-variant), hover-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), - with-avatar-disabled-avatar-opacity: - token-definition.hardcode(0.38, $exclude-hardcoded), + with-avatar-disabled-avatar-opacity: token-definition.hardcode(0.38, $exclude-hardcoded), elevated-selected-container-color: map.get($systems, md-sys-color, secondary-container), - // In the M3 tokens this is a `surface` color, but in the MDC implementation it's + // In the M3 tokens this is a `surface` color, but in the MDC implementation its // never being emitted. We emit `transparent` so consumers override the color. elevated-container-color: token-definition.hardcode(transparent, $exclude-hardcoded), flat-selected-outline-width: token-definition.hardcode(0, $exclude-hardcoded), @@ -55,13 +54,13 @@ $prefix: (mat, chip); ), selected-hover-state-layer-color: map.get($systems, md-sys-color, on-secondary-container), selected-hover-state-layer-opacity: - map.get($systems, md-sys-state, hover-state-layer-opacity), + map.get($systems, md-sys-state, hover-state-layer-opacity), selected-focus-state-layer-color: map.get($systems, md-sys-color, on-secondary-container), selected-focus-state-layer-opacity: - map.get($systems, md-sys-state, focus-state-layer-opacity), + map.get($systems, md-sys-state, focus-state-layer-opacity), with-icon-disabled-icon-opacity: token-definition.hardcode(0.38, $exclude-hardcoded), with-trailing-icon-disabled-trailing-icon-opacity: - token-definition.hardcode(0.38, $exclude-hardcoded), + token-definition.hardcode(0.38, $exclude-hardcoded), ), ), ( // Color variants: diff --git a/src/material/core/tokens/m3/mdc/_circular-progress.scss b/src/material/core/tokens/m3/mdc/_circular-progress.scss index f994bfabda7a..a5d89ced95aa 100644 --- a/src/material/core/tokens/m3/mdc/_circular-progress.scss +++ b/src/material/core/tokens/m3/mdc/_circular-progress.scss @@ -10,8 +10,7 @@ $prefix: (mat, circular-progress); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC circular-progress @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $mdc-tokens: token-definition.get-mdc-tokens( - 'circular-progress-indicator', $systems, $exclude-hardcoded); + $mdc-tokens: values($systems, $exclude-hardcoded); $variant-tokens: ( primary: (), // Default, no overrides needed secondary: ( @@ -28,3 +27,16 @@ $prefix: (mat, circular-progress); @return token-definition.namespace-tokens( $prefix, ($mdc-tokens, $variant-tokens), $token-slots); } + +@function values($deps, $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/src/material/core/tokens/m3/mdc/_dialog.scss b/src/material/core/tokens/m3/mdc/_dialog.scss index fbe123d66b04..bb59796f0053 100644 --- a/src/material/core/tokens/m3/mdc/_dialog.scss +++ b/src/material/core/tokens/m3/mdc/_dialog.scss @@ -1,4 +1,5 @@ @use '../../token-definition'; +@use 'sass:map'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, dialog); @@ -9,7 +10,7 @@ $prefix: (mat, dialog); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC dialog @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: token-definition.get-mdc-tokens('dialog', $systems, $exclude-hardcoded); + $tokens: values($systems, $exclude-hardcoded); $tokens: token-definition.rename-map-keys($tokens, ( headline-color: subhead-color, headline-font: subhead-font, @@ -21,3 +22,80 @@ $prefix: (mat, dialog); @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); } + +@function values($deps, $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), + // 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. + action-label-text-type: if( + $exclude-hardcoded-values, + null, + 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), + // 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. + headline-type: if( + $exclude-hardcoded-values, + null, + 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), + // 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. + supporting-text-type: if( + $exclude-hardcoded-values, + null, + 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/src/material/core/tokens/m3/mdc/_elevated-card.scss b/src/material/core/tokens/m3/mdc/_elevated-card.scss index c0e8607ed9d9..ce1b95db8a46 100644 --- a/src/material/core/tokens/m3/mdc/_elevated-card.scss +++ b/src/material/core/tokens/m3/mdc/_elevated-card.scss @@ -11,7 +11,7 @@ $prefix: (mat, elevated-card); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC elevated-card @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: token-definition.get-mdc-tokens('elevated-card', $systems, $exclude-hardcoded); + $tokens: values($systems, $exclude-hardcoded); $elevation: map.get($tokens, container-elevation); @if ($elevation != null) { @@ -20,3 +20,32 @@ $prefix: (mat, elevated-card); @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); } + +@function values($deps, $exclude-hardcoded-values: false) { + $values: ( + container-color: map.get($deps, md-sys-color, surface-container-low), + 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) + ); + + @return $values; +} diff --git a/src/material/core/tokens/m3/mdc/_extended-fab.scss b/src/material/core/tokens/m3/mdc/_extended-fab.scss index 3c667b6f982c..c2f97e9228b8 100644 --- a/src/material/core/tokens/m3/mdc/_extended-fab.scss +++ b/src/material/core/tokens/m3/mdc/_extended-fab.scss @@ -11,8 +11,7 @@ $prefix: (mat, extended-fab); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC extended-fab @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: - token-definition.get-mdc-tokens('extended-fab-primary', $systems, $exclude-hardcoded); + $tokens: primary-values($systems, $exclude-hardcoded); $elevation-tokens: ( container-elevation, focus-container-elevation, @@ -24,19 +23,167 @@ $prefix: (mat, extended-fab); $elevation: map.get($tokens, $token); @if ($elevation != null) { - $tokens: map.set($tokens, $token + '-shadow', elevation.get-box-shadow($elevation)); + $tokens: map.set($tokens, $token + -shadow, elevation.get-box-shadow($elevation)); } } $variant-tokens: ( // Color variants primary: (), // Default, no overrides needed. - secondary: token-definition.get-mdc-tokens( - 'extended-fab-secondary', $systems, $exclude-hardcoded), - tertiary: token-definition.get-mdc-tokens( - 'extended-fab-tertiary', $systems, $exclude-hardcoded) + secondary: secondary-values($systems, $exclude-hardcoded), + tertiary: tertiary-values($systems, $exclude-hardcoded) ); @return token-definition.namespace-tokens( $prefix, ($tokens, $variant-tokens), $token-slots); } + +@function primary-values($deps, $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), + // 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. + label-text-type: if( + $exclude-hardcoded-values, + null, + 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) + ); +} + +@function secondary-values($deps, $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), + // 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. + label-text-type: if( + $exclude-hardcoded-values, + null, + 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) + ); +} + +@function tertiary-values($deps, $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), + // 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. + label-text-type: if( + $exclude-hardcoded-values, + null, + 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/src/material/core/tokens/m3/mdc/_fab-small.scss b/src/material/core/tokens/m3/mdc/_fab-small.scss index 865b5e89adda..546727a02161 100644 --- a/src/material/core/tokens/m3/mdc/_fab-small.scss +++ b/src/material/core/tokens/m3/mdc/_fab-small.scss @@ -11,7 +11,7 @@ $prefix: (mat, fab-small); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC fab-small @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: token-definition.get-mdc-tokens('fab-primary-small', $systems, $exclude-hardcoded); + $tokens: primary-values($systems, $exclude-hardcoded); $elevation-tokens: ( container-elevation, focus-container-elevation, @@ -23,19 +23,104 @@ $prefix: (mat, fab-small); $elevation: map.get($tokens, $token); @if ($elevation != null) { - $tokens: map.set($tokens, $token + '-shadow', elevation.get-box-shadow($elevation)); + $tokens: map.set($tokens, $token + -shadow, elevation.get-box-shadow($elevation)); } } $variant-tokens: ( // Color variants primary: (), // Default, no overrides needed. - secondary: token-definition.get-mdc-tokens( - 'fab-secondary-small', $systems, $exclude-hardcoded), - tertiary: token-definition.get-mdc-tokens( - 'fab-tertiary-small', $systems, $exclude-hardcoded) + secondary: secondary-values($systems, $exclude-hardcoded), + tertiary: tertiary-values($systems, $exclude-hardcoded) ); @return token-definition.namespace-tokens( $prefix, ($tokens, $variant-tokens), $token-slots); } + +@function primary-values($deps, $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) + ); +} + +@function secondary-values($deps, $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) + ); +} + +@function tertiary-values($deps, $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/src/material/core/tokens/m3/mdc/_fab.scss b/src/material/core/tokens/m3/mdc/_fab.scss index f686b7c66e47..b8508a48a1b8 100644 --- a/src/material/core/tokens/m3/mdc/_fab.scss +++ b/src/material/core/tokens/m3/mdc/_fab.scss @@ -11,7 +11,7 @@ $prefix: (mat, fab); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC fab @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: token-definition.get-mdc-tokens('fab-primary', $systems, $exclude-hardcoded); + $tokens: primary-values($systems, $exclude-hardcoded); $elevation-tokens: ( container-elevation, focus-container-elevation, @@ -23,17 +23,104 @@ $prefix: (mat, fab); $elevation: map.get($tokens, $token); @if ($elevation != null) { - $tokens: map.set($tokens, $token + '-shadow', elevation.get-box-shadow($elevation)); + $tokens: map.set($tokens, $token + -shadow, elevation.get-box-shadow($elevation)); } } $variant-tokens: ( // Color variants primary: (), // Default, no overrides needed. - secondary: token-definition.get-mdc-tokens('fab-secondary', $systems, $exclude-hardcoded), - tertiary: token-definition.get-mdc-tokens('fab-tertiary', $systems, $exclude-hardcoded) + secondary: secondary-values($systems, $exclude-hardcoded), + tertiary: tertiary-values($systems, $exclude-hardcoded) ); @return token-definition.namespace-tokens( $prefix, ($tokens, $variant-tokens), $token-slots); } + +@function primary-values($deps, $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) + ); +} + +@function secondary-values($deps, $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) + ); +} + +@function tertiary-values($deps, $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/src/material/core/tokens/m3/mdc/_filled-button.scss b/src/material/core/tokens/m3/mdc/_filled-button.scss index 368d80dd0e97..25bcaf693116 100644 --- a/src/material/core/tokens/m3/mdc/_filled-button.scss +++ b/src/material/core/tokens/m3/mdc/_filled-button.scss @@ -11,7 +11,7 @@ $prefix: (mat, filled-button); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC filled-button @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $mdc-tokens: token-definition.get-mdc-tokens('filled-button', $systems, $exclude-hardcoded); + $mdc-tokens: values($systems, $exclude-hardcoded); $variant-tokens: ( primary: (), // Default, no overrides needed. secondary: ( @@ -71,7 +71,7 @@ $prefix: (mat, filled-button); @function _fix-tokens($initial-tokens) { // Need to get the hardcoded values, because they include opacities that are used for the disabled // state. - $hardcoded-tokens: token-definition.get-mdc-tokens('filled-button', (), false); + $hardcoded-tokens: values((), false); @return token-definition.combine-color-tokens($initial-tokens, $hardcoded-tokens, ( ( @@ -84,3 +84,56 @@ $prefix: (mat, filled-button); ) )); } + +@function values($deps, $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), + // 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. + label-text-type: if( + $exclude-hardcoded-values, + null, + 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/src/material/core/tokens/m3/mdc/_filled-text-field.scss b/src/material/core/tokens/m3/mdc/_filled-text-field.scss index fbc7e5a6ea20..99c15efd3adf 100644 --- a/src/material/core/tokens/m3/mdc/_filled-text-field.scss +++ b/src/material/core/tokens/m3/mdc/_filled-text-field.scss @@ -11,8 +11,7 @@ $prefix: (mat, filled-text-field); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC filled-text-field @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $mdc-tokens: token-definition.get-mdc-tokens( - 'filled-text-field', $systems, $exclude-hardcoded); + $mdc-tokens: values($systems, $exclude-hardcoded); $variant-tokens: ( primary: (), // Default, no overrides needed secondary: ( @@ -47,7 +46,7 @@ $prefix: (mat, filled-text-field); @function _fix-tokens($initial-tokens, $systems) { // Need to get the hardcoded values, because they include opacities that are used for the disabled // state. - $hardcoded-tokens: token-definition.get-mdc-tokens('filled-text-field', (), false); + $hardcoded-tokens: values((), false); $tokens: token-definition.combine-color-tokens($initial-tokens, $hardcoded-tokens, ( ( @@ -89,3 +88,131 @@ $prefix: (mat, filled-text-field); @return $tokens; } + +@function values($deps, $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), + // 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. + input-text-type: if( + $exclude-hardcoded-values, + null, + 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), + // 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. + label-text-type: if( + $exclude-hardcoded-values, + null, + 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), + // 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. + supporting-text-type: if( + $exclude-hardcoded-values, + null, + 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/src/material/core/tokens/m3/mdc/_icon-button.scss b/src/material/core/tokens/m3/mdc/_icon-button.scss index f73f22bb02ce..01b871a6bff8 100644 --- a/src/material/core/tokens/m3/mdc/_icon-button.scss +++ b/src/material/core/tokens/m3/mdc/_icon-button.scss @@ -11,7 +11,7 @@ $prefix: (mat, icon-button); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC icon-button @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: token-definition.get-mdc-tokens('icon-button', $systems, $exclude-hardcoded); + $tokens: values($systems, $exclude-hardcoded); $variant-tokens: ( primary: ( icon-color: map.get($systems, md-sys-color, primary) @@ -40,15 +40,14 @@ $prefix: (mat, icon-button); @function _fix-tokens($tokens) { // Need to get the hardcoded values, because they include opacities that are used for the disabled // state. - $hardcoded-tokens: token-definition.get-mdc-tokens('icon-button', (), false); + $hardcoded-tokens: values((), false); $rename-keys: ( unselected-icon-color: icon-color, ); $remapped-tokens: token-definition.rename-map-keys($tokens, $rename-keys); - $remapped-hardcoded-tokens: - token-definition.rename-map-keys($hardcoded-tokens, $rename-keys); + $remapped-hardcoded-tokens: token-definition.rename-map-keys($hardcoded-tokens, $rename-keys); @return token-definition.combine-color-tokens( $remapped-tokens, $remapped-hardcoded-tokens, ( @@ -58,3 +57,34 @@ $prefix: (mat, icon-button); ), )); } + +@function values($deps, $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/src/material/core/tokens/m3/mdc/_linear-progress.scss b/src/material/core/tokens/m3/mdc/_linear-progress.scss index 4dead8032bdc..66358f165e42 100644 --- a/src/material/core/tokens/m3/mdc/_linear-progress.scss +++ b/src/material/core/tokens/m3/mdc/_linear-progress.scss @@ -10,8 +10,7 @@ $prefix: (mat, linear-progress); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC linear-progress @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $mdc-tokens: token-definition.get-mdc-tokens( - 'linear-progress-indicator', $systems, $exclude-hardcoded); + $mdc-tokens: values($systems, $exclude-hardcoded); $variant-tokens: ( primary: (), // Default, no overrides needed secondary: ( @@ -31,3 +30,18 @@ $prefix: (mat, linear-progress); @return token-definition.namespace-tokens( $prefix, ($mdc-tokens, $variant-tokens), $token-slots); } + +@function values($deps, $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/src/material/core/tokens/m3/mdc/_list.scss b/src/material/core/tokens/m3/mdc/_list.scss index fd36e025b79c..588aeb7e0847 100644 --- a/src/material/core/tokens/m3/mdc/_list.scss +++ b/src/material/core/tokens/m3/mdc/_list.scss @@ -10,7 +10,7 @@ $prefix: (mat, list); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC list @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $mdc-tokens: token-definition.get-mdc-tokens('list', $systems, $exclude-hardcoded); + $mdc-tokens: values($systems, $exclude-hardcoded); @return token-definition.namespace-tokens($prefix, _fix-tokens($mdc-tokens), $token-slots); } @@ -21,7 +21,7 @@ $prefix: (mat, list); @function _fix-tokens($tokens) { // This does not match the spec, which defines this to be `md.sys.color.surface`. // However, this interferes with the use case of placing a list on other components. For example, - // the bottom sheet's container color is `md.sys.color.surface-container-low`. Instead, allow the + // the bottom sheets container color is `md.sys.color.surface-container-low`. Instead, allow the // list to just display the colors for its background. @if map.get($tokens, list-item-container-color) != null { $tokens: map.set($tokens, list-item-container-color, transparent); @@ -35,3 +35,161 @@ $prefix: (mat, list); @return $tokens; } + +@function values($deps, $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), + // 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. + list-item-label-text-type: if( + $exclude-hardcoded-values, + null, + 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), + // 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. + list-item-leading-avatar-label-type: if( + $exclude-hardcoded-values, + null, + 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), + // 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. + list-item-overline-type: if( + $exclude-hardcoded-values, + null, + 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), + // 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. + list-item-supporting-text-type: if( + $exclude-hardcoded-values, + null, + 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), + // 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. + list-item-trailing-supporting-text-type: if( + $exclude-hardcoded-values, + null, + 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/src/material/core/tokens/m3/mdc/_outlined-button.scss b/src/material/core/tokens/m3/mdc/_outlined-button.scss index dc108c75b6b1..5317b6368dd8 100644 --- a/src/material/core/tokens/m3/mdc/_outlined-button.scss +++ b/src/material/core/tokens/m3/mdc/_outlined-button.scss @@ -11,8 +11,7 @@ $prefix: (mat, outlined-button); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC outlined-button @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $mdc-tokens: token-definition.get-mdc-tokens( - 'outlined-button', $systems, $exclude-hardcoded); + $mdc-tokens: values($systems, $exclude-hardcoded); $variant-tokens: ( primary: (), // Default, no overrides needed. secondary: ( @@ -69,7 +68,7 @@ $prefix: (mat, outlined-button); /// @param {Map} $initial-tokens Map of outlined button tokens currently being generated. /// @return {Map} The given tokens, with the invalid values replaced with valid ones. @function _fix-tokens($initial-tokens) { - $hardcoded-tokens: token-definition.get-mdc-tokens('outlined-button', (), false); + $hardcoded-tokens: values((), false); @return token-definition.combine-color-tokens($initial-tokens, $hardcoded-tokens, ( ( @@ -82,3 +81,54 @@ $prefix: (mat, outlined-button); ) )); } + +@function values($deps, $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), + // 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. + label-text-type: if( + $exclude-hardcoded-values, + null, + 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/src/material/core/tokens/m3/mdc/_outlined-card.scss b/src/material/core/tokens/m3/mdc/_outlined-card.scss index a5e27d7f100a..6d33898cf93e 100644 --- a/src/material/core/tokens/m3/mdc/_outlined-card.scss +++ b/src/material/core/tokens/m3/mdc/_outlined-card.scss @@ -11,7 +11,7 @@ $prefix: (mat, outlined-card); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC outlined-card @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: token-definition.get-mdc-tokens('outlined-card', $systems, $exclude-hardcoded); + $tokens: values($systems, $exclude-hardcoded); $elevation: map.get($tokens, container-elevation); @if ($elevation != null) { @@ -20,3 +20,36 @@ $prefix: (mat, outlined-card); @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); } + +@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/src/material/core/tokens/m3/mdc/_outlined-text-field.scss b/src/material/core/tokens/m3/mdc/_outlined-text-field.scss index 0f25bad5cd1b..bc9b309624db 100644 --- a/src/material/core/tokens/m3/mdc/_outlined-text-field.scss +++ b/src/material/core/tokens/m3/mdc/_outlined-text-field.scss @@ -11,8 +11,7 @@ $prefix: (mat, outlined-text-field); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC outlined-text-field @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $mdc-tokens: token-definition.get-mdc-tokens( - 'outlined-text-field', $systems, $exclude-hardcoded); + $mdc-tokens: values($systems, $exclude-hardcoded); $variant-tokens: ( primary: (), // Default, no overrides needed secondary: ( @@ -47,7 +46,7 @@ $prefix: (mat, outlined-text-field); @function _fix-tokens($initial-tokens) { // Need to get the hardcoded values, because they include opacities that are used for the disabled // state. - $hardcoded-tokens: token-definition.get-mdc-tokens('outlined-text-field', (), false); + $hardcoded-tokens: values((), false); @return token-definition.combine-color-tokens($initial-tokens, $hardcoded-tokens, ( ( @@ -84,3 +83,124 @@ $prefix: (mat, outlined-text-field); ) )); } + +@function values($deps, $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), + // 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. + input-text-type: if( + $exclude-hardcoded-values, + null, + 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), + // 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. + label-text-type: if( + $exclude-hardcoded-values, + null, + 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), + // 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. + supporting-text-type: if( + $exclude-hardcoded-values, + null, + 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/src/material/core/tokens/m3/mdc/_plain-tooltip.scss b/src/material/core/tokens/m3/mdc/_plain-tooltip.scss index 34d802ee7430..f7a2584534dd 100644 --- a/src/material/core/tokens/m3/mdc/_plain-tooltip.scss +++ b/src/material/core/tokens/m3/mdc/_plain-tooltip.scss @@ -1,4 +1,5 @@ @use '../../token-definition'; +@use 'sass:map'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, plain-tooltip); @@ -9,7 +10,33 @@ $prefix: (mat, plain-tooltip); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC plain-tooltip @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $mdc-tokens: token-definition.get-mdc-tokens('plain-tooltip', $systems, $exclude-hardcoded); + $mdc-tokens: values($systems, $exclude-hardcoded); @return token-definition.namespace-tokens($prefix, $mdc-tokens, $token-slots); } + +@function values($deps, $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), + // 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. + supporting-text-type: if( + $exclude-hardcoded-values, + null, + 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/src/material/core/tokens/m3/mdc/_protected-button.scss b/src/material/core/tokens/m3/mdc/_protected-button.scss index ace83ef1f522..83137db1c315 100644 --- a/src/material/core/tokens/m3/mdc/_protected-button.scss +++ b/src/material/core/tokens/m3/mdc/_protected-button.scss @@ -13,7 +13,7 @@ $prefix: (mat, protected-button); /// @return {Map} A set of tokens for the MDC protected-button @function get-tokens($systems, $exclude-hardcoded, $token-slots) { // Note: in M3 the "protected" button is called "elevated". - $tokens: token-definition.get-mdc-tokens('elevated-button', $systems, $exclude-hardcoded); + $tokens: values($systems, $exclude-hardcoded); $variant-tokens: ( primary: (), // Default, no overrides needed. secondary: ( @@ -70,7 +70,7 @@ $prefix: (mat, protected-button); @function _fix-tokens($initial-tokens) { // Need to get the hardcoded values, because they include // opacities that are used for the disabled state. - $hardcoded-tokens: token-definition.get-mdc-tokens('elevated-button', (), false); + $hardcoded-tokens: values((), false); $tokens: $initial-tokens; $elevation-tokens: ( container-elevation, @@ -84,7 +84,7 @@ $prefix: (mat, protected-button); $elevation: map.get($tokens, $token); @if ($elevation != null) { - $tokens: map.set($tokens, $token + '-shadow', elevation.get-box-shadow($elevation)); + $tokens: map.set($tokens, $token + -shadow, elevation.get-box-shadow($elevation)); } } @@ -99,3 +99,57 @@ $prefix: (mat, protected-button); ) )); } + +@function values($deps, $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), + // 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. + label-text-type: if( + $exclude-hardcoded-values, + null, + 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/src/material/core/tokens/m3/mdc/_radio.scss b/src/material/core/tokens/m3/mdc/_radio.scss index 54dcc66e28e6..6552285a1de9 100644 --- a/src/material/core/tokens/m3/mdc/_radio.scss +++ b/src/material/core/tokens/m3/mdc/_radio.scss @@ -10,7 +10,7 @@ $prefix: (mat, radio); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC radio @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $mdc-tokens: token-definition.get-mdc-tokens('radio-button', $systems, $exclude-hardcoded); + $mdc-tokens: values($systems, $exclude-hardcoded); $variant-tokens: ( primary: (), // Default, no overrides needed secondary: ( @@ -45,3 +45,35 @@ $prefix: (mat, radio); @return token-definition.namespace-tokens( $prefix, ($mdc-tokens, $variant-tokens), $token-slots); } + +@function values($deps, $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/src/material/core/tokens/m3/mdc/_secondary-navigation-tab.scss b/src/material/core/tokens/m3/mdc/_secondary-navigation-tab.scss index be41e0433177..21af0d67b14a 100644 --- a/src/material/core/tokens/m3/mdc/_secondary-navigation-tab.scss +++ b/src/material/core/tokens/m3/mdc/_secondary-navigation-tab.scss @@ -1,4 +1,5 @@ @use '../../token-definition'; +@use 'sass:map'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, secondary-navigation-tab); @@ -9,8 +10,54 @@ $prefix: (mat, secondary-navigation-tab); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC tab @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $mdc-tokens: token-definition.get-mdc-tokens( - 'secondary-navigation-tab', $systems, $exclude-hardcoded); + $mdc-tokens: values($systems, $exclude-hardcoded); @return token-definition.namespace-tokens($prefix, $mdc-tokens, $token-slots); } + +@function values($deps, $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), + // 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. + label-text-type: if( + $exclude-hardcoded-values, + null, + 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/src/material/core/tokens/m3/mdc/_slider.scss b/src/material/core/tokens/m3/mdc/_slider.scss index 16ff5001e983..ffb92fe6c445 100644 --- a/src/material/core/tokens/m3/mdc/_slider.scss +++ b/src/material/core/tokens/m3/mdc/_slider.scss @@ -11,11 +11,11 @@ $prefix: (mat, slider); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC slider @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: token-definition.get-mdc-tokens('slider', $systems, $exclude-hardcoded); - $handle-elevation: map.get($tokens, 'handle-elevation'); + $tokens: values($systems, $exclude-hardcoded); + $handle-elevation: map.get($tokens, handle-elevation); @if ($handle-elevation != null) { - $tokens: map.set($tokens, 'handle-elevation', elevation.get-box-shadow($handle-elevation)); + $tokens: map.set($tokens, handle-elevation, elevation.get-box-shadow($handle-elevation)); } $variant-tokens: ( @@ -67,3 +67,70 @@ $prefix: (mat, slider); @return token-definition.namespace-tokens( $prefix, ($tokens, $variant-tokens), $token-slots); } + +@function values($deps, $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), + // 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. + label-label-text-type: if( + $exclude-hardcoded-values, + null, + 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/src/material/core/tokens/m3/mdc/_snack-bar.scss b/src/material/core/tokens/m3/mdc/_snack-bar.scss index 719e5e7156ae..455f9263a79a 100644 --- a/src/material/core/tokens/m3/mdc/_snack-bar.scss +++ b/src/material/core/tokens/m3/mdc/_snack-bar.scss @@ -1,4 +1,5 @@ @use '../../token-definition'; +@use 'sass:map'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, snackbar); @@ -9,7 +10,76 @@ $prefix: (mat, snackbar); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC snackbar @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $mdc-tokens: token-definition.get-mdc-tokens('snackbar', $systems, $exclude-hardcoded); + $mdc-tokens: values($systems, $exclude-hardcoded); @return token-definition.namespace-tokens($prefix, $mdc-tokens, $token-slots); } + +@function values($deps, $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), + // 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. + action-label-text-type: if( + $exclude-hardcoded-values, + null, + 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), + // 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. + supporting-text-type: if( + $exclude-hardcoded-values, + null, + 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/src/material/core/tokens/m3/mdc/_switch.scss b/src/material/core/tokens/m3/mdc/_switch.scss index 5c57cc2d4ce4..2ac3f62a3729 100644 --- a/src/material/core/tokens/m3/mdc/_switch.scss +++ b/src/material/core/tokens/m3/mdc/_switch.scss @@ -11,14 +11,14 @@ $prefix: (mat, switch); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC switch @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: token-definition.get-mdc-tokens('switch', $systems, $exclude-hardcoded); + $tokens: values($systems, $exclude-hardcoded); $elevation-tokens: (handle-elevation, disabled-handle-elevation); @each $token in $elevation-tokens { $elevation: map.get($tokens, $token); @if ($elevation != null) { - $tokens: map.set($tokens, $token + '-shadow', elevation.get-box-shadow($elevation)); + $tokens: map.set($tokens, $token + -shadow, elevation.get-box-shadow($elevation)); } } @@ -80,3 +80,78 @@ $prefix: (mat, switch); @return token-definition.namespace-tokens( $prefix, ($tokens, $variant-tokens), $token-slots); } + +@function values($deps, $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/src/material/core/tokens/m3/mdc/_text-button.scss b/src/material/core/tokens/m3/mdc/_text-button.scss index 02187e7b971e..cb2f36610c51 100644 --- a/src/material/core/tokens/m3/mdc/_text-button.scss +++ b/src/material/core/tokens/m3/mdc/_text-button.scss @@ -11,7 +11,7 @@ $prefix: (mat, text-button); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of tokens for the MDC text-button @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $mdc-tokens: token-definition.get-mdc-tokens('text-button', $systems, $exclude-hardcoded); + $mdc-tokens: values($systems, $exclude-hardcoded); $variant-tokens: ( primary: (), // Default, no overrides needed. secondary: ( @@ -68,7 +68,7 @@ $prefix: (mat, text-button); @function _fix-tokens($initial-tokens) { // Need to get the hardcoded values, because they include opacities that are used for the disabled // state. - $hardcoded-tokens: token-definition.get-mdc-tokens('text-button', (), false); + $hardcoded-tokens: values((), false); @return token-definition.combine-color-tokens($initial-tokens, $hardcoded-tokens, ( ( @@ -77,3 +77,47 @@ $prefix: (mat, text-button); ), )); } + +@function values($deps, $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), + // 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. + label-text-type: if( + $exclude-hardcoded-values, + null, + 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) + ); +}