diff --git a/src/material/core/tokens/_token-definition.scss b/src/material/core/tokens/_token-definition.scss index ec7401009879..9866b71f5614 100644 --- a/src/material/core/tokens/_token-definition.scss +++ b/src/material/core/tokens/_token-definition.scss @@ -6,7 +6,6 @@ @use '../m2/palette' as m2-palette; @use '../m2/theming' as m2-theming; @use '../m2/typography' as m2-typography; -@use '../style/sass-utils'; // Indicates whether we're building internally. Used for backwards compatibility. $private-is-internal-build: false; @@ -136,41 +135,6 @@ $_system-fallbacks: null; @return $result; } -/// At the time of writing, some color tokens (e.g. disabled state) are defined as a solid color -/// token and a separate opacity token. This function applies the opacity to the color and drops the -/// opacity key from the map. Can be removed once b/213331407 is resolved. -/// @param {Map} $tokens The map of tokens currently being generated -/// @param {Map} $all-tokens A map of all tokens, including hardcoded values -/// @param {List} $pairs Pairs of color token names and their opacities. Should be in the shape of -/// `((color: 'color-key', opacity: 'opacity-key'))`. -/// @return {Map} The initial tokens with the combined color values. -@function combine-color-tokens($tokens, $opacity-lookup, $pairs) { - $result: $tokens; - - @each $pair in $pairs { - $color-key: map.get($pair, color); - $opacity-key: map.get($pair, opacity); - $color: map.get($tokens, $color-key); - - @if (sass-utils.is-css-var-name($color)) { - $color: var(#{$color}); - } - - $opacity: map.get($opacity-lookup, $opacity-key); - - @if(meta.type-of($color) == 'color') { - $result: map.remove($result, $opacity-key); - $result: map.set($result, $color-key, rgba($color, $opacity)); - } @else if($color != null) { - $result: map.remove($result, $opacity-key); - $combined-color: #{color-mix(in srgb, #{$color} #{($opacity * 100) + '%'}, transparent)}; - $result: map.set($result, $color-key, $combined-color); - } - } - - @return $result; -} - /// Inherited function from MDC that computes which contrast tone to use on top of a color. /// This is used only in a narrow set of use cases when generating M2 button tokens to maintain /// backwards compatibility. diff --git a/src/material/core/tokens/m3/_index.scss b/src/material/core/tokens/m3/_index.scss index b9a7a6f130bc..f6e664f48dc7 100644 --- a/src/material/core/tokens/m3/_index.scss +++ b/src/material/core/tokens/m3/_index.scss @@ -1,149 +1,58 @@ -@use 'sass:meta'; @use 'sass:map'; -@use './mat/app' as tokens-mat-app; -@use './mat/autocomplete' as tokens-mat-autocomplete; -@use './mat/badge' as tokens-mat-badge; -@use './mat/text-button' as tokens-mat-text-button; -@use './mat/protected-button' as tokens-mat-protected-button; -@use './mat/filled-button' as tokens-mat-filled-button; -@use './mat/outlined-button' as tokens-mat-outlined-button; -@use './mat/dialog' as tokens-mat-dialog; -@use './mat/bottom-sheet' as tokens-mat-bottom-sheet; -@use './mat/card' as tokens-mat-card; -@use './mat/chip' as tokens-mat-chip; -@use './mat/datepicker' as tokens-mat-datepicker; -@use './mat/divider' as tokens-mat-divider; -@use './mat/expansion' as tokens-mat-expansion; -@use './mat/fab' as tokens-mat-fab; -@use './mat/fab-small' as tokens-mat-fab-small; -@use './mat/form-field' as tokens-mat-form-field; -@use './mat/grid-list' as tokens-mat-grid-list; -@use './mat/icon' as tokens-mat-icon; -@use './mat/icon-button' as tokens-mat-icon-button; -@use './mat/list' as tokens-mat-list; -@use './mat/menu' as tokens-mat-menu; -@use './mat/option' as tokens-mat-option; -@use './mat/optgroup' as tokens-mat-optgroup; -@use './mat/paginator' as tokens-mat-paginator; -@use './mat/checkbox' as tokens-mat-checkbox; -@use './mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox; -@use './mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox; -@use './mat/radio' as tokens-mat-radio; -@use './mat/ripple' as tokens-mat-ripple; -@use './mat/select' as tokens-mat-select; -@use './mat/sidenav' as tokens-mat-sidenav; -@use './mat/slider' as tokens-mat-slider; -@use './mat/switch' as tokens-mat-switch; -@use './mat/snack-bar' as tokens-mat-snack-bar; -@use './mat/sort' as tokens-mat-sort; -@use './mat/standard-button-toggle' as tokens-mat-button-toggle; -@use './mat/stepper' as tokens-mat-stepper; -@use './mat/tab-header' as tokens-mat-tab-header; -@use './mat/table' as tokens-mat-table; -@use './mat/toolbar' as tokens-mat-toolbar; -@use './mat/tree' as tokens-mat-tree; -@use './mat/timepicker' as tokens-mat-timepicker; -@use './mat/tonal-button' as tokens-mat-tonal-button; -@use './mdc/checkbox' as tokens-mdc-checkbox; -@use './mdc/text-button' as tokens-mdc-text-button; -@use './mdc/protected-button' as tokens-mdc-protected-button; -@use './mdc/filled-button' as tokens-mdc-filled-button; -@use './mdc/outlined-button' as tokens-mdc-outlined-button; -@use './mdc/chip' as tokens-mdc-chip; -@use './mdc/circular-progress' as tokens-mdc-circular-progress; -@use './mdc/dialog' as tokens-mdc-dialog; -@use './mdc/elevated-card' as tokens-mdc-elevated-card; -@use './mdc/extended-fab' as tokens-mdc-extended-fab; -@use './mdc/fab' as tokens-mdc-fab; -@use './mdc/fab-small' as tokens-mdc-fab-small; -@use './mdc/filled-text-field' as tokens-mdc-filled-text-field; -@use './mdc/icon-button' as tokens-mdc-icon-button; -@use './mdc/linear-progress' as tokens-mdc-linear-progress; -@use './mdc/list' as tokens-mdc-list; -@use './mdc/outlined-card' as tokens-mdc-outlined-card; -@use './mdc/outlined-text-field' as tokens-mdc-outlined-text-field; -@use './mdc/plain-tooltip' as tokens-mdc-plain-tooltip; -@use './mdc/radio' as tokens-mdc-radio; -@use './mdc/slider' as tokens-mdc-slider; -@use './mdc/snack-bar' as tokens-mdc-snack-bar; -@use './mdc/switch' as tokens-mdc-switch; -@use './mdc/secondary-navigation-tab' as tokens-mdc-secondary-navigation-tab; -@use './mdc/tab-indicator' as tokens-mdc-tab-indicator; - -$_module-names: ( - // Custom tokens - tokens-mat-app, - tokens-mat-autocomplete, - tokens-mat-badge, - tokens-mat-bottom-sheet, - tokens-mat-button-toggle, - tokens-mat-card, - tokens-mat-chip, - tokens-mat-datepicker, - tokens-mat-dialog, - tokens-mat-divider, - tokens-mat-expansion, - tokens-mat-fab, - tokens-mat-fab-small, - tokens-mat-filled-button, - tokens-mat-tonal-button, - tokens-mat-form-field, - tokens-mat-grid-list, - tokens-mat-icon-button, - tokens-mat-icon, - tokens-mat-menu, - tokens-mat-optgroup, - tokens-mat-option, - tokens-mat-outlined-button, - tokens-mat-paginator, - tokens-mat-checkbox, - tokens-mat-full-pseudo-checkbox, - tokens-mat-list, - tokens-mat-minimal-pseudo-checkbox, - tokens-mat-protected-button, - tokens-mat-radio, - tokens-mat-ripple, - tokens-mat-select, - tokens-mat-sidenav, - tokens-mat-slider, - tokens-mat-switch, - tokens-mat-snack-bar, - tokens-mat-sort, - tokens-mat-stepper, - tokens-mat-tab-header, - tokens-mat-table, - tokens-mat-text-button, - tokens-mat-toolbar, - tokens-mat-tree, - tokens-mat-timepicker, - // MDC tokens - tokens-mdc-checkbox, - tokens-mdc-chip, - tokens-mdc-text-button, - tokens-mdc-protected-button, - tokens-mdc-filled-button, - tokens-mdc-outlined-button, - tokens-mdc-chip, - tokens-mdc-circular-progress, - tokens-mdc-dialog, - tokens-mdc-elevated-card, - tokens-mdc-extended-fab, - tokens-mdc-fab, - tokens-mdc-fab-small, - tokens-mdc-filled-text-field, - tokens-mdc-icon-button, - tokens-mdc-linear-progress, - tokens-mdc-list, - tokens-mdc-outlined-card, - tokens-mdc-outlined-text-field, - tokens-mdc-plain-tooltip, - tokens-mdc-radio, - tokens-mdc-slider, - tokens-mdc-snack-bar, - tokens-mdc-switch, - tokens-mdc-secondary-navigation-tab, - tokens-mdc-tab-indicator -); +@use './mat/app'; +@use './mat/autocomplete'; +@use './mat/badge'; +@use './mat/bottom-sheet'; +@use './mat/card'; +@use './mat/checkbox'; +@use './mat/chip'; +@use './mat/circular-progress'; +@use './mat/datepicker'; +@use './mat/dialog'; +@use './mat/divider'; +@use './mat/elevated-card'; +@use './mat/expansion'; +@use './mat/extended-fab'; +@use './mat/fab'; +@use './mat/fab-small'; +@use './mat/filled-button'; +@use './mat/filled-text-field'; +@use './mat/form-field'; +@use './mat/full-pseudo-checkbox'; +@use './mat/grid-list'; +@use './mat/icon'; +@use './mat/icon-button'; +@use './mat/linear-progress'; +@use './mat/list'; +@use './mat/menu'; +@use './mat/minimal-pseudo-checkbox'; +@use './mat/optgroup'; +@use './mat/option'; +@use './mat/outlined-button'; +@use './mat/outlined-card'; +@use './mat/outlined-text-field'; +@use './mat/paginator'; +@use './mat/plain-tooltip'; +@use './mat/protected-button'; +@use './mat/radio'; +@use './mat/ripple'; +@use './mat/secondary-navigation-tab'; +@use './mat/select'; +@use './mat/sidenav'; +@use './mat/slider'; +@use './mat/snack-bar'; +@use './mat/sort'; +@use './mat/standard-button-toggle'; +@use './mat/stepper'; +@use './mat/switch'; +@use './mat/tab-header'; +@use './mat/tab-indicator'; +@use './mat/table'; +@use './mat/text-button'; +@use './mat/timepicker'; +@use './mat/tonal-button'; +@use './mat/toolbar'; +@use './mat/tree'; /// Gets the full set of M3 tokens for the given theme object. /// @param {Map} $systems The MDC system tokens @@ -151,15 +60,67 @@ $_module-names: ( /// @param {Map} $token-slots Possible token slots /// @return {Map} Full set of M3 tokens @function get-m3-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: (); + $tokens-list: ( + app.get-tokens($systems, $exclude-hardcoded, $token-slots), + autocomplete.get-tokens($systems, $exclude-hardcoded, $token-slots), + badge.get-tokens($systems, $exclude-hardcoded, $token-slots), + bottom-sheet.get-tokens($systems, $exclude-hardcoded, $token-slots), + card.get-tokens($systems, $exclude-hardcoded, $token-slots), + checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots), + chip.get-tokens($systems, $exclude-hardcoded, $token-slots), + circular-progress.get-tokens($systems, $exclude-hardcoded, $token-slots), + datepicker.get-tokens($systems, $exclude-hardcoded, $token-slots), + dialog.get-tokens($systems, $exclude-hardcoded, $token-slots), + divider.get-tokens($systems, $exclude-hardcoded, $token-slots), + elevated-card.get-tokens($systems, $exclude-hardcoded, $token-slots), + expansion.get-tokens($systems, $exclude-hardcoded, $token-slots), + extended-fab.get-tokens($systems, $exclude-hardcoded, $token-slots), + fab.get-tokens($systems, $exclude-hardcoded, $token-slots), + fab-small.get-tokens($systems, $exclude-hardcoded, $token-slots), + filled-button.get-tokens($systems, $exclude-hardcoded, $token-slots), + filled-text-field.get-tokens($systems, $exclude-hardcoded, $token-slots), + form-field.get-tokens($systems, $exclude-hardcoded, $token-slots), + full-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots), + grid-list.get-tokens($systems, $exclude-hardcoded, $token-slots), + icon.get-tokens($systems, $exclude-hardcoded, $token-slots), + icon-button.get-tokens($systems, $exclude-hardcoded, $token-slots), + linear-progress.get-tokens($systems, $exclude-hardcoded, $token-slots), + list.get-tokens($systems, $exclude-hardcoded, $token-slots), + menu.get-tokens($systems, $exclude-hardcoded, $token-slots), + minimal-pseudo-checkbox.get-tokens($systems, $exclude-hardcoded, $token-slots), + optgroup.get-tokens($systems, $exclude-hardcoded, $token-slots), + option.get-tokens($systems, $exclude-hardcoded, $token-slots), + outlined-button.get-tokens($systems, $exclude-hardcoded, $token-slots), + outlined-card.get-tokens($systems, $exclude-hardcoded, $token-slots), + outlined-text-field.get-tokens($systems, $exclude-hardcoded, $token-slots), + paginator.get-tokens($systems, $exclude-hardcoded, $token-slots), + plain-tooltip.get-tokens($systems, $exclude-hardcoded, $token-slots), + protected-button.get-tokens($systems, $exclude-hardcoded, $token-slots), + radio.get-tokens($systems, $exclude-hardcoded, $token-slots), + ripple.get-tokens($systems, $exclude-hardcoded, $token-slots), + secondary-navigation-tab.get-tokens($systems, $exclude-hardcoded, $token-slots), + select.get-tokens($systems, $exclude-hardcoded, $token-slots), + sidenav.get-tokens($systems, $exclude-hardcoded, $token-slots), + slider.get-tokens($systems, $exclude-hardcoded, $token-slots), + snack-bar.get-tokens($systems, $exclude-hardcoded, $token-slots), + sort.get-tokens($systems, $exclude-hardcoded, $token-slots), + standard-button-toggle.get-tokens($systems, $exclude-hardcoded, $token-slots), + stepper.get-tokens($systems, $exclude-hardcoded, $token-slots), + switch.get-tokens($systems, $exclude-hardcoded, $token-slots), + tab-header.get-tokens($systems, $exclude-hardcoded, $token-slots), + tab-indicator.get-tokens($systems, $exclude-hardcoded, $token-slots), + table.get-tokens($systems, $exclude-hardcoded, $token-slots), + text-button.get-tokens($systems, $exclude-hardcoded, $token-slots), + timepicker.get-tokens($systems, $exclude-hardcoded, $token-slots), + tonal-button.get-tokens($systems, $exclude-hardcoded, $token-slots), + toolbar.get-tokens($systems, $exclude-hardcoded, $token-slots), + tree.get-tokens($systems, $exclude-hardcoded, $token-slots), + ); - @each $module-name in $_module-names { - $fn: meta.get-function( - $name: 'get-tokens', - $module: $module-name, - ); - $tokens: map.deep-merge($tokens, meta.call($fn, $systems, $exclude-hardcoded, $token-slots)); + $merged-tokens: (); + @each $tokens in $tokens-list { + $merged-tokens: map.deep-merge($merged-tokens, $tokens); } - @return $tokens; + @return $merged-tokens; } diff --git a/src/material/core/tokens/m3/mat/_app.scss b/src/material/core/tokens/m3/mat/_app.scss index 07e945a46c92..45553bfdac46 100644 --- a/src/material/core/tokens/m3/mat/_app.scss +++ b/src/material/core/tokens/m3/mat/_app.scss @@ -12,7 +12,6 @@ $prefix: (mat, app); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the app @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $shadow-color: map.get($systems, md-sys-color, shadow); $tokens: ( background-color: map.get($systems, md-sys-color, background), text-color: map.get($systems, md-sys-color, on-background), @@ -20,6 +19,7 @@ $prefix: (mat, app); // If the shadow-color is an actual color, convert it to a box-shadow value. Otherwise // use the token value as itself (e,g. as a CSS var name). + $shadow-color: map.get($systems, md-sys-color, shadow); @if (meta.type-of($shadow-color) == color) { @for $zValue from 0 through 24 { $shadow: elevation.get-box-shadow($zValue, $shadow-color); diff --git a/src/material/core/tokens/m3/mat/_badge.scss b/src/material/core/tokens/m3/mat/_badge.scss index 65be1ae562a4..e3cf74071bae 100644 --- a/src/material/core/tokens/m3/mat/_badge.scss +++ b/src/material/core/tokens/m3/mat/_badge.scss @@ -11,13 +11,12 @@ $prefix: (mat, badge); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the mat-badge @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: (( + $tokens: ( background-color: map.get($systems, md-sys-color, error), text-color: map.get($systems, md-sys-color, on-error), disabled-state-background-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, error), - $alpha: 0.38, - ), + $alpha: 0.38), disabled-state-text-color: map.get($systems, md-sys-color, on-error), text-font: map.get($systems, md-sys-typescale, label-small-font), text-size: map.get($systems, md-sys-typescale, label-small-size), @@ -45,7 +44,9 @@ $prefix: (mat, badge); large-size-text-size: map.get($systems, md-sys-typescale, label-small-size), large-size-container-padding: token-definition.hardcode(0 4px, $exclude-hardcoded), legacy-large-size-container-size: token-definition.hardcode(unset, $exclude-hardcoded), - ), ( + ); + + $variant-tokens: ( primary: ( background-color: map.get($systems, md-sys-color, primary), text-color: map.get($systems, md-sys-color, on-primary), @@ -74,7 +75,7 @@ $prefix: (mat, badge); disabled-state-text-color: map.get($systems, md-sys-color, on-tertiary), ), error: () // Default, no overrides needed - )); + ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_checkbox.scss b/src/material/core/tokens/m3/mat/_checkbox.scss index baba1f094020..3ee9029806fc 100644 --- a/src/material/core/tokens/m3/mat/_checkbox.scss +++ b/src/material/core/tokens/m3/mat/_checkbox.scss @@ -13,14 +13,78 @@ $prefix: (mat, checkbox); @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: ( disabled-label-color: - sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38), + sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38), + disabled-selected-checkmark-color: map.get($systems, md-sys-color, surface), + disabled-selected-icon-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.38), + disabled-unselected-icon-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.38), label-text-color: map.get($systems, md-sys-color, on-surface), label-text-font: map.get($systems, md-sys-typescale, body-medium-font), label-text-line-height: map.get($systems, md-sys-typescale, body-medium-line-height), label-text-size: map.get($systems, md-sys-typescale, body-medium-size), label-text-tracking: map.get($systems, md-sys-typescale, body-medium-tracking), label-text-weight: map.get($systems, md-sys-typescale, body-medium-weight), + selected-checkmark-color: map.get($systems, md-sys-color, on-primary), + selected-focus-icon-color: map.get($systems, md-sys-color, primary), + selected-focus-state-layer-color: map.get($systems, md-sys-color, primary), + selected-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + selected-hover-icon-color: map.get($systems, md-sys-color, primary), + selected-hover-state-layer-color: map.get($systems, md-sys-color, primary), + selected-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + selected-icon-color: map.get($systems, md-sys-color, primary), + selected-pressed-icon-color: map.get($systems, md-sys-color, primary), + selected-pressed-state-layer-color: map.get($systems, md-sys-color, on-surface), + selected-pressed-state-layer-opacity: + map.get($systems, md-sys-state, pressed-state-layer-opacity), + state-layer-size: if($exclude-hardcoded, null, 40px), + unselected-focus-icon-color: map.get($systems, md-sys-color, on-surface), + unselected-focus-state-layer-color: map.get($systems, md-sys-color, on-surface), + unselected-focus-state-layer-opacity: + map.get($systems, md-sys-state, focus-state-layer-opacity), + unselected-hover-icon-color: map.get($systems, md-sys-color, on-surface), + unselected-hover-state-layer-color: map.get($systems, md-sys-color, on-surface), + unselected-hover-state-layer-opacity: + map.get($systems, md-sys-state, hover-state-layer-opacity), + unselected-icon-color: map.get($systems, md-sys-color, on-surface-variant), + unselected-pressed-state-layer-color: map.get($systems, md-sys-color, primary), + unselected-pressed-state-layer-opacity: + map.get($systems, md-sys-state, pressed-state-layer-opacity), ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + $variant-tokens: ( + primary: (), // Default, no overrides needed + secondary: ( + selected-focus-icon-color: map.get($systems, md-sys-color, secondary), + selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary), + selected-hover-icon-color: map.get($systems, md-sys-color, secondary), + selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary), + selected-icon-color: map.get($systems, md-sys-color, secondary), + selected-pressed-icon-color: map.get($systems, md-sys-color, secondary), + unselected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary), + selected-checkmark-color: map.get($systems, md-sys-color, on-secondary), + ), + tertiary: ( + selected-focus-icon-color: map.get($systems, md-sys-color, tertiary), + selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary), + selected-hover-icon-color: map.get($systems, md-sys-color, tertiary), + selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary), + selected-icon-color: map.get($systems, md-sys-color, tertiary), + selected-pressed-icon-color: map.get($systems, md-sys-color, tertiary), + unselected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary), + selected-checkmark-color: map.get($systems, md-sys-color, on-tertiary), + ), + error: ( + selected-focus-icon-color: map.get($systems, md-sys-color, error), + selected-focus-state-layer-color: map.get($systems, md-sys-color, error), + selected-hover-icon-color: map.get($systems, md-sys-color, error), + selected-hover-state-layer-color: map.get($systems, md-sys-color, error), + selected-icon-color: map.get($systems, md-sys-color, error), + selected-pressed-icon-color: map.get($systems, md-sys-color, error), + unselected-pressed-state-layer-color: map.get($systems, md-sys-color, error), + selected-checkmark-color: map.get($systems, md-sys-color, on-error), + ) + ); + + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_chip.scss b/src/material/core/tokens/m3/mat/_chip.scss index 3deb9511cd37..f0f09b732d5f 100644 --- a/src/material/core/tokens/m3/mat/_chip.scss +++ b/src/material/core/tokens/m3/mat/_chip.scss @@ -1,4 +1,5 @@ @use 'sass:map'; +@use '../../../style/sass-utils'; @use '../../token-definition'; // The prefix used to generate the fully qualified name for tokens in this file. @@ -10,37 +11,106 @@ $prefix: (mat, chip); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the mat-chip @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: (( - disabled-container-opacity: token-definition.hardcode(1, $exclude-hardcoded), - selected-trailing-icon-color: map.get($systems, md-sys-color, on-secondary-container), - selected-disabled-trailing-icon-color: map.get($systems, md-sys-color, on-surface), - trailing-action-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), - selected-trailing-action-state-layer-color: + // MDC has a chip component, but they seem to have made up the tokens rather than using ones + // generated from the token database, therefore we need a custom token function for it. + $tokens: sass-utils.merge-all( + token-definition.generate-typography-tokens($systems, label-text, label-large), + ( + disabled-container-opacity: token-definition.hardcode(1, $exclude-hardcoded), + selected-trailing-icon-color: map.get($systems, md-sys-color, on-secondary-container), + selected-disabled-trailing-icon-color: map.get($systems, md-sys-color, on-surface), + trailing-action-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), + selected-trailing-action-state-layer-color: map.get($systems, md-sys-color, on-secondary-container), - trailing-action-hover-state-layer-opacity: + trailing-action-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), - trailing-action-focus-state-layer-opacity: + trailing-action-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), - trailing-action-opacity: token-definition.hardcode(1, $exclude-hardcoded), - trailing-action-focus-opacity: token-definition.hardcode(1, $exclude-hardcoded), - ), ( + trailing-action-opacity: token-definition.hardcode(1, $exclude-hardcoded), + trailing-action-focus-opacity: token-definition.hardcode(1, $exclude-hardcoded), + container-shape-radius: token-definition.hardcode(8px, $exclude-hardcoded), + with-avatar-avatar-size: token-definition.hardcode(24px, $exclude-hardcoded), + with-avatar-avatar-shape-radius: token-definition.hardcode(24px, $exclude-hardcoded), + label-text-color: map.get($systems, md-sys-color, on-surface-variant), + disabled-label-text-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), + $alpha: 0.38, + ), + with-icon-icon-size: token-definition.hardcode(18px, $exclude-hardcoded), + with-icon-icon-color: map.get($systems, md-sys-color, on-surface-variant), + with-icon-disabled-icon-color: map.get($systems, md-sys-color, on-surface), + with-icon-selected-icon-color: map.get($systems, md-sys-color, on-secondary-container), + with-trailing-icon-trailing-icon-color: map.get($systems, md-sys-color, on-surface-variant), + with-trailing-icon-disabled-trailing-icon-color: + map.get($systems, md-sys-color, on-surface), + focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + focus-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), + outline-width: token-definition.hardcode(1px, $exclude-hardcoded), + outline-color: map.get($systems, md-sys-color, outline), + disabled-outline-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), + $alpha: 0.12, + ), + 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), + 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 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), + selected-label-text-color: map.get($systems, md-sys-color, on-secondary-container), + flat-disabled-selected-container-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), + $alpha: 0.12, + ), + 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), + 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), + 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), + ), + ); + + $variant-tokens: ( + // Color variants: primary: ( selected-trailing-icon-color: map.get($systems, md-sys-color, on-primary-container), selected-trailing-action-state-layer-color: - map.get($systems, md-sys-color, on-primary-container), + map.get($systems, md-sys-color, on-primary-container), + with-icon-selected-icon-color: map.get($systems, md-sys-color, on-primary-container), + elevated-selected-container-color: map.get($systems, md-sys-color, primary-container), + selected-label-text-color: map.get($systems, md-sys-color, on-primary-container), + selected-hover-state-layer-color: map.get($systems, md-sys-color, on-primary-container), + selected-focus-state-layer-color: map.get($systems, md-sys-color, on-primary-container), ), secondary: (), // Default, no overrides needed. tertiary: ( selected-trailing-icon-color: map.get($systems, md-sys-color, on-tertiary-container), selected-trailing-action-state-layer-color: - map.get($systems, md-sys-color, on-tertiary-container), + map.get($systems, md-sys-color, on-tertiary-container), + with-icon-selected-icon-color: map.get($systems, md-sys-color, on-tertiary-container), + elevated-selected-container-color: map.get($systems, md-sys-color, tertiary-container), + selected-label-text-color: map.get($systems, md-sys-color, on-tertiary-container), + selected-hover-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container), + selected-focus-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container), ), error: ( selected-trailing-icon-color: map.get($systems, md-sys-color, on-error-container), selected-trailing-action-state-layer-color: - map.get($systems, md-sys-color, on-error-container), - ), - )); + map.get($systems, md-sys-color, on-error-container), + with-icon-selected-icon-color: map.get($systems, md-sys-color, on-error-container), + elevated-selected-container-color: map.get($systems, md-sys-color, error-container), + selected-label-text-color: map.get($systems, md-sys-color, on-error-container), + selected-hover-state-layer-color: map.get($systems, md-sys-color, on-error-container), + selected-focus-state-layer-color: map.get($systems, md-sys-color, on-error-container), + ) + ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mdc/_circular-progress.scss b/src/material/core/tokens/m3/mat/_circular-progress.scss similarity index 53% rename from src/material/core/tokens/m3/mdc/_circular-progress.scss rename to src/material/core/tokens/m3/mat/_circular-progress.scss index a5d89ced95aa..8d4ff8df5d78 100644 --- a/src/material/core/tokens/m3/mdc/_circular-progress.scss +++ b/src/material/core/tokens/m3/mat/_circular-progress.scss @@ -10,7 +10,12 @@ $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: values($systems, $exclude-hardcoded); + $tokens: ( + active-indicator-color: map.get($systems, md-sys-color, primary), + active-indicator-width: if($exclude-hardcoded, null, 4px), + size: if($exclude-hardcoded, null, 48px) + ); + $variant-tokens: ( primary: (), // Default, no overrides needed secondary: ( @@ -25,18 +30,5 @@ $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) - ); + $prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_datepicker.scss b/src/material/core/tokens/m3/mat/_datepicker.scss index 02343b4931ab..22b565808521 100644 --- a/src/material/core/tokens/m3/mat/_datepicker.scss +++ b/src/material/core/tokens/m3/mat/_datepicker.scss @@ -12,7 +12,7 @@ $prefix: (mat, datepicker); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the mat-datepicker @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: (( + $tokens: ( calendar-date-in-range-state-background-color: map.get($systems, md-sys-color, primary-container), calendar-date-in-comparison-range-state-background-color: @@ -81,7 +81,9 @@ $prefix: (mat, datepicker); calendar-period-button-text-weight: map.get($systems, md-sys-typescale, title-small-weight), calendar-header-text-size: map.get($systems, md-sys-typescale, title-small-size), calendar-header-text-weight: map.get($systems, md-sys-typescale, title-small-weight), - ), ( + ); + + $variant-tokens: ( // Color variants: primary: (), // Default, no overrides needed. secondary: ( @@ -117,7 +119,7 @@ $prefix: (mat, datepicker); calendar-date-today-outline-color: map.get($systems, md-sys-color, error), calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, error), ) - )); + ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_dialog.scss b/src/material/core/tokens/m3/mat/_dialog.scss index 8d1bd2e6d655..2d648e2ddf60 100644 --- a/src/material/core/tokens/m3/mat/_dialog.scss +++ b/src/material/core/tokens/m3/mat/_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,23 +10,37 @@ $prefix: (mat, dialog); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the dialog @function get-tokens($systems, $exclude-hardcoded, $token-slots) { + // headline-padding: + // The vertical padding values are a bit weird, because MDC uses a `::before` pseudo + // element to size the title which in turn means that we can't set a specific padding + // and get the exact same space out of it. These values were determined through + // trial and error so that the first line of text is 24px from the top and the bottom + // of the text is 16px from the content under it. $tokens: ( + actions-alignment: token-definition.hardcode(flex-end, $exclude-hardcoded), + actions-padding: token-definition.hardcode(16px 24px, $exclude-hardcoded), + container-color: map.get($systems, md-sys-color, surface), container-elevation-shadow: token-definition.hardcode(none, $exclude-hardcoded), container-max-width: token-definition.hardcode(560px, $exclude-hardcoded), - container-small-max-width: - token-definition.hardcode(calc(100vw - 32px), $exclude-hardcoded), container-min-width: token-definition.hardcode(280px, $exclude-hardcoded), - actions-alignment: token-definition.hardcode(flex-end, $exclude-hardcoded), + container-shape: map.get($systems, md-sys-shape, corner-extra-large), + container-small-max-width: + token-definition.hardcode(calc(100vw - 32px), $exclude-hardcoded), content-padding: token-definition.hardcode(20px 24px, $exclude-hardcoded), - with-actions-content-padding: token-definition.hardcode(20px 24px 0, $exclude-hardcoded), - actions-padding: token-definition.hardcode(16px 24px, $exclude-hardcoded), - - // The vertical padding values are a bit weird, because MDC uses a `::before` pseudo - // element to size the title which in turn means that we can't set a specific padding - // and get the exact same space out of it. These values were determined through - // trial and error so that the first line of text is 24px from the top and the bottom - // of the text is 16px from the content under it. headline-padding: token-definition.hardcode(6px 24px 13px, $exclude-hardcoded), + subhead-color: map.get($systems, md-sys-color, on-surface), + subhead-font: map.get($systems, md-sys-typescale, headline-small-font), + subhead-line-height: map.get($systems, md-sys-typescale, headline-small-line-height), + subhead-size: map.get($systems, md-sys-typescale, headline-small-size), + subhead-tracking: map.get($systems, md-sys-typescale, headline-small-tracking), + subhead-weight: map.get($systems, md-sys-typescale, headline-small-weight), + supporting-text-color: map.get($systems, md-sys-color, on-surface-variant), + supporting-text-font: map.get($systems, md-sys-typescale, body-medium-font), + supporting-text-line-height: map.get($systems, md-sys-typescale, body-medium-line-height), + supporting-text-size: map.get($systems, md-sys-typescale, body-medium-size), + supporting-text-tracking: map.get($systems, md-sys-typescale, body-medium-tracking), + supporting-text-weight: map.get($systems, md-sys-typescale, body-medium-weight), + with-actions-content-padding: token-definition.hardcode(20px 24px 0, $exclude-hardcoded), ); @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); diff --git a/src/material/core/tokens/m3/mat/_elevated-card.scss b/src/material/core/tokens/m3/mat/_elevated-card.scss new file mode 100644 index 000000000000..6eae6562e6ce --- /dev/null +++ b/src/material/core/tokens/m3/mat/_elevated-card.scss @@ -0,0 +1,27 @@ +@use 'sass:map'; +@use '../../../style/elevation'; +@use '../../token-definition'; + +// The prefix used to generate the fully qualified name for tokens in this file. +$prefix: (mat, elevated-card); + +/// Generates the tokens for MDC elevated-card +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @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: ( + container-color: map.get($systems, md-sys-color, surface-container-low), + container-elevation: map.get($systems, md-sys-elevation, level1), + container-shape: map.get($systems, md-sys-shape, corner-medium), + ); + + $elevation: map.get($tokens, container-elevation); + + @if ($elevation != null) { + $tokens: map.set($tokens, container-elevation, elevation.get-box-shadow($elevation)); + } + + @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); +} diff --git a/src/material/core/tokens/m3/mat/_extended-fab.scss b/src/material/core/tokens/m3/mat/_extended-fab.scss new file mode 100644 index 000000000000..a87e3288abc3 --- /dev/null +++ b/src/material/core/tokens/m3/mat/_extended-fab.scss @@ -0,0 +1,64 @@ +@use 'sass:map'; +@use '../../../style/elevation'; +@use '../../token-definition'; + +// The prefix used to generate the fully qualified name for tokens in this file. +$prefix: (mat, extended-fab); + +/// Generates the tokens for MDC extended-fab +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @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: ( + container-elevation-shadow: map.get($systems, md-sys-elevation, level3), + container-height: if($exclude-hardcoded, null, 56px), + container-shape: map.get($systems, md-sys-shape, corner-large), + focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3), + hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4), + label-text-font: map.get($systems, md-sys-typescale, label-large-font), + label-text-size: map.get($systems, md-sys-typescale, label-large-size), + label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking), + label-text-weight: map.get($systems, md-sys-typescale, label-large-weight), + pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3), + ); + + $elevation-tokens: ( + container-elevation-shadow, + focus-container-elevation-shadow, + hover-container-elevation-shadow, + pressed-container-elevation-shadow, + ); + + @each $token in $elevation-tokens { + $elevation: map.get($tokens, $token); + + @if ($elevation != null) { + $tokens: map.set($tokens, $token, elevation.get-box-shadow($elevation)); + } + } + + $variant-tokens: ( + // Color variants + primary: (), // Default, no overrides needed. + secondary: ( + container-height: if($exclude-hardcoded, null, 56px), + container-shape: map.get($systems, md-sys-shape, corner-large), + label-text-font: map.get($systems, md-sys-typescale, label-large-font), + label-text-size: map.get($systems, md-sys-typescale, label-large-size), + label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking), + label-text-weight: map.get($systems, md-sys-typescale, label-large-weight), + ), + tertiary: ( + container-height: if($exclude-hardcoded, null, 56px), + container-shape: map.get($systems, md-sys-shape, corner-large), + label-text-font: map.get($systems, md-sys-typescale, label-large-font), + label-text-size: map.get($systems, md-sys-typescale, label-large-size), + label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking), + label-text-weight: map.get($systems, md-sys-typescale, label-large-weight), + ) + ); + + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); +} diff --git a/src/material/core/tokens/m3/mat/_fab-small.scss b/src/material/core/tokens/m3/mat/_fab-small.scss index ae7e4bb332a4..a15bc9e0596c 100644 --- a/src/material/core/tokens/m3/mat/_fab-small.scss +++ b/src/material/core/tokens/m3/mat/_fab-small.scss @@ -1,6 +1,7 @@ @use 'sass:map'; @use '../../../style/sass-utils'; @use '../../token-definition'; +@use '../../../style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, fab-small); @@ -11,21 +12,44 @@ $prefix: (mat, fab-small); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the mat-mini-fab @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: (( + $tokens: ( foreground-color: map.get($systems, md-sys-color, on-primary-container), state-layer-color: map.get($systems, md-sys-color, on-primary-container), ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, on-primary-container), + map.get($systems, md-sys-color, on-primary-container), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), - hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), - focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), - pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), disabled-state-container-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, on-surface), $alpha: 0.12), + map.get($systems, md-sys-color, on-surface), $alpha: 0.12), disabled-state-foreground-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, on-surface), $alpha: 0.38), - ), ( + map.get($systems, md-sys-color, on-surface), $alpha: 0.38), + container-color: map.get($systems, md-sys-color, primary-container), + container-elevation-shadow: map.get($systems, md-sys-elevation, level3), + container-shape: map.get($systems, md-sys-shape, corner-medium), + focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3), + focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4), + hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3), + pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), + ); + + $elevation-tokens: ( + container-elevation-shadow, + focus-container-elevation-shadow, + hover-container-elevation-shadow, + pressed-container-elevation-shadow, + ); + + @each $token in $elevation-tokens { + $elevation: map.get($tokens, $token); + + @if ($elevation != null) { + $tokens: map.set($tokens, $token, elevation.get-box-shadow($elevation)); + } + } + + $variant-tokens: ( // Color variants primary: (), // Default, no overrides needed. secondary: ( @@ -35,6 +59,15 @@ $prefix: (mat, fab-small); map.get($systems, md-sys-color, on-secondary-container), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), + container-color: map.get($systems, md-sys-color, secondary-container), + container-elevation-shadow: map.get($systems, md-sys-elevation, level3), + container-shape: map.get($systems, md-sys-shape, corner-medium), + focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3), + focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4), + hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3), + pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), ), tertiary: ( foreground-color: map.get($systems, md-sys-color, on-tertiary-container), @@ -43,8 +76,16 @@ $prefix: (mat, fab-small); map.get($systems, md-sys-color, on-tertiary-container), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), + container-color: map.get($systems, md-sys-color, tertiary-container), + container-elevation-shadow: map.get($systems, md-sys-elevation, level3), + container-shape: map.get($systems, md-sys-shape, corner-medium), + focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3), + focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4), + hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3), ) - )); + ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_fab.scss b/src/material/core/tokens/m3/mat/_fab.scss index c93d62a182d3..a9395fdadaa3 100644 --- a/src/material/core/tokens/m3/mat/_fab.scss +++ b/src/material/core/tokens/m3/mat/_fab.scss @@ -1,6 +1,7 @@ @use 'sass:map'; @use '../../../style/sass-utils'; @use '../../token-definition'; +@use '../../../style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, fab); @@ -11,21 +12,29 @@ $prefix: (mat, fab); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the mat-fab @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: (( + $tokens: ( foreground-color: map.get($systems, md-sys-color, on-primary-container), state-layer-color: map.get($systems, md-sys-color, on-primary-container), ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, on-primary-container), + map.get($systems, md-sys-color, on-primary-container), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), - hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), - focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), - pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), disabled-state-container-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, on-surface), $alpha: 0.12), + map.get($systems, md-sys-color, on-surface), $alpha: 0.12), disabled-state-foreground-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, on-surface), $alpha: 0.38), - ), ( + map.get($systems, md-sys-color, on-surface), $alpha: 0.38), + container-color: map.get($systems, md-sys-color, primary-container), + container-elevation-shadow: map.get($systems, md-sys-elevation, level3), + container-shape: map.get($systems, md-sys-shape, corner-large), + focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3), + focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4), + hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3), + pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), + ); + + $variant-tokens: ( // Color variants primary: (), // Default, no overrides needed. secondary: ( @@ -35,6 +44,14 @@ $prefix: (mat, fab); map.get($systems, md-sys-color, on-secondary-container), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), + container-color: map.get($systems, md-sys-color, secondary-container), + container-elevation-shadow: map.get($systems, md-sys-elevation, level3), + container-shape: map.get($systems, md-sys-shape, corner-large), + focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3), + focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4), + hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3), ), tertiary: ( foreground-color: map.get($systems, md-sys-color, on-tertiary-container), @@ -43,8 +60,31 @@ $prefix: (mat, fab); map.get($systems, md-sys-color, on-tertiary-container), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), + container-color: map.get($systems, md-sys-color, tertiary-container), + container-elevation-shadow: map.get($systems, md-sys-elevation, level3), + container-shape: map.get($systems, md-sys-shape, corner-large), + focus-container-elevation-shadow: map.get($systems, md-sys-elevation, level3), + focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + hover-container-elevation-shadow: map.get($systems, md-sys-elevation, level4), + hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + pressed-container-elevation-shadow: map.get($systems, md-sys-elevation, level3), ) - )); + ); + + $elevation-tokens: ( + container-elevation-shadow, + focus-container-elevation-shadow, + hover-container-elevation-shadow, + pressed-container-elevation-shadow, + ); + + @each $token in $elevation-tokens { + $elevation: map.get($tokens, $token); + + @if ($elevation != null) { + $tokens: map.set($tokens, $token, elevation.get-box-shadow($elevation)); + } + } - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_filled-button.scss b/src/material/core/tokens/m3/mat/_filled-button.scss index 6f45fb0b67b4..35e985bf8426 100644 --- a/src/material/core/tokens/m3/mat/_filled-button.scss +++ b/src/material/core/tokens/m3/mat/_filled-button.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; @use '../../token-definition'; +@use '../../../style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, filled-button); @@ -11,44 +11,63 @@ $prefix: (mat, filled-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) { - $tokens: (( + $tokens: ( horizontal-padding: token-definition.hardcode(24px, $exclude-hardcoded), icon-spacing: token-definition.hardcode(8px, $exclude-hardcoded), icon-offset: token-definition.hardcode(-8px, $exclude-hardcoded), state-layer-color: map.get($systems, md-sys-color, on-primary), disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, on-primary), + map.get($systems, md-sys-color, on-primary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), - hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + container-color: map.get($systems, md-sys-color, primary), + container-height: if($exclude-hardcoded, null, 40px), + container-shape: map.get($systems, md-sys-shape, corner-full), + disabled-container-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.12), + disabled-label-text-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.38), focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + label-text-color: map.get($systems, md-sys-color, on-primary), + label-text-font: map.get($systems, md-sys-typescale, label-large-font), + label-text-size: map.get($systems, md-sys-typescale, label-large-size), + label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking), + label-text-weight: map.get($systems, md-sys-typescale, label-large-weight), pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), - ), ( - // Color variants: + ); + + $variant-tokens: ( primary: (), // Default, no overrides needed. secondary: ( state-layer-color: map.get($systems, md-sys-color, on-secondary), ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, on-secondary), + map.get($systems, md-sys-color, on-secondary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), + container-color: map.get($systems, md-sys-color, secondary), + label-text-color: map.get($systems, md-sys-color, on-secondary), ), tertiary: ( state-layer-color: map.get($systems, md-sys-color, on-tertiary), ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, on-tertiary), + map.get($systems, md-sys-color, on-tertiary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), + container-color: map.get($systems, md-sys-color, tertiary), + label-text-color: map.get($systems, md-sys-color, on-tertiary), ), error: ( state-layer-color: map.get($systems, md-sys-color, on-error), ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, on-error), + map.get($systems, md-sys-color, on-error), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), + container-color: map.get($systems, md-sys-color, error), + label-text-color: map.get($systems, md-sys-color, on-error), ) - )); + ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_filled-text-field.scss b/src/material/core/tokens/m3/mat/_filled-text-field.scss new file mode 100644 index 000000000000..7d42909f0235 --- /dev/null +++ b/src/material/core/tokens/m3/mat/_filled-text-field.scss @@ -0,0 +1,68 @@ +@use 'sass:map'; +@use '../../token-definition'; +@use '../../../style/sass-utils'; + +// The prefix used to generate the fully qualified name for tokens in this file. +$prefix: (mat, filled-text-field); + +/// Generates the tokens for MDC filled-text-field +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @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) { + $tokens: ( + active-indicator-color: map.get($systems, md-sys-color, on-surface-variant), + active-indicator-height: if($exclude-hardcoded, null, 1px), + caret-color: map.get($systems, md-sys-color, primary), + container-color: map.get($systems, md-sys-color, surface-variant), + container-shape: map.get($systems, md-sys-shape, corner-extra-small), + disabled-active-indicator-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.38), + disabled-container-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.04), + disabled-input-text-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.38), + disabled-label-text-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.38), + error-active-indicator-color: map.get($systems, md-sys-color, error), + error-focus-active-indicator-color: map.get($systems, md-sys-color, error), + error-focus-label-text-color: map.get($systems, md-sys-color, error), + error-hover-active-indicator-color: map.get($systems, md-sys-color, on-error-container), + error-hover-label-text-color: map.get($systems, md-sys-color, on-error-container), + error-label-text-color: map.get($systems, md-sys-color, error), + focus-active-indicator-color: map.get($systems, md-sys-color, primary), + focus-active-indicator-height: if($exclude-hardcoded, null, 2px), + focus-label-text-color: map.get($systems, md-sys-color, primary), + hover-active-indicator-color: map.get($systems, md-sys-color, on-surface), + hover-label-text-color: map.get($systems, md-sys-color, on-surface-variant), + input-text-color: map.get($systems, md-sys-color, on-surface), + input-text-placeholder-color: map.get($systems, md-sys-color, on-surface-variant), + label-text-color: map.get($systems, md-sys-color, on-surface-variant), + label-text-font: map.get($systems, md-sys-typescale, body-large-font), + label-text-size: map.get($systems, md-sys-typescale, body-large-size), + label-text-tracking: map.get($systems, md-sys-typescale, body-large-tracking), + label-text-weight: map.get($systems, md-sys-typescale, body-large-weight), + ); + + $variant-tokens: ( + primary: (), // Default, no overrides needed + secondary: ( + caret-color: map.get($systems, md-sys-color, secondary), + focus-active-indicator-color: map.get($systems, md-sys-color, secondary), + focus-label-text-color: map.get($systems, md-sys-color, secondary), + ), + tertiary: ( + caret-color: map.get($systems, md-sys-color, tertiary), + focus-active-indicator-color: map.get($systems, md-sys-color, tertiary), + focus-label-text-color: map.get($systems, md-sys-color, tertiary), + ), + error: ( + caret-color: map.get($systems, md-sys-color, error), + focus-active-indicator-color: map.get($systems, md-sys-color, error), + focus-label-text-color: map.get($systems, md-sys-color, error), + ), + ); + + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); +} diff --git a/src/material/core/tokens/m3/mat/_form-field.scss b/src/material/core/tokens/m3/mat/_form-field.scss index 42dba93e1895..1e332fc22145 100644 --- a/src/material/core/tokens/m3/mat/_form-field.scss +++ b/src/material/core/tokens/m3/mat/_form-field.scss @@ -28,12 +28,9 @@ $prefix: (mat, form-field); hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), focus-state-layer-opacity: token-definition.hardcode(0, $exclude-hardcoded), focus-select-arrow-color: map.get($systems, md-sys-color, primary), - outlined-label-text-populated-size: map.get($systems, md-sys-typeface, body-large-size), - leading-icon-color: map.get($systems, md-sys-color, on-surface-variant), disabled-leading-icon-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), - trailing-icon-color: map.get($systems, md-sys-color, on-surface-variant), disabled-trailing-icon-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), @@ -41,7 +38,9 @@ $prefix: (mat, form-field); error-hover-trailing-icon-color: map.get($systems, md-sys-color, on-error-container), error-trailing-icon-color: map.get($systems, md-sys-color, error), ) - ), ( + ); + + $variant-tokens: ( // Color variants: primary: (), // Default, no overrides needed. secondary: ( @@ -55,5 +54,5 @@ $prefix: (mat, form-field); ) ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_full-pseudo-checkbox.scss b/src/material/core/tokens/m3/mat/_full-pseudo-checkbox.scss index 9982f6cd4b82..1f7d36c7a8d0 100644 --- a/src/material/core/tokens/m3/mat/_full-pseudo-checkbox.scss +++ b/src/material/core/tokens/m3/mat/_full-pseudo-checkbox.scss @@ -11,17 +11,18 @@ $prefix: (mat, full-pseudo-checkbox); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the full variant of mat-pseudo-checkbox @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $disabled-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, on-surface), $alpha: 0.38); - - $tokens: (( + $tokens: ( selected-icon-color: map.get($systems, md-sys-color, primary), selected-checkmark-color: map.get($systems, md-sys-color, on-primary), unselected-icon-color: map.get($systems, md-sys-color, on-surface-variant), disabled-selected-checkmark-color: map.get($systems, md-sys-color, surface), - disabled-unselected-icon-color: $disabled-color, - disabled-selected-icon-color: $disabled-color, - ), ( + disabled-unselected-icon-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.38), + disabled-selected-icon-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.38), + ); + + $variant-tokens: ( // Color variants: primary: (), // Default, no overrides needed. secondary: ( @@ -36,7 +37,7 @@ $prefix: (mat, full-pseudo-checkbox); selected-icon-color: map.get($systems, md-sys-color, error), selected-checkmark-color: map.get($systems, md-sys-color, on-error), ) - )); + ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_icon-button.scss b/src/material/core/tokens/m3/mat/_icon-button.scss index ef0477dbd4cc..0c78e1005be9 100644 --- a/src/material/core/tokens/m3/mat/_icon-button.scss +++ b/src/material/core/tokens/m3/mat/_icon-button.scss @@ -1,6 +1,6 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; @use '../../token-definition'; +@use '../../../style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, icon-button); @@ -11,23 +11,31 @@ $prefix: (mat, icon-button); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the mat-icon-button @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: (( + $tokens: ( state-layer-color: map.get($systems, md-sys-color, on-surface-variant), disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, on-surface-variant), + map.get($systems, md-sys-color, on-surface-variant), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), - ), ( + disabled-icon-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.38), + icon-size: if($exclude-hardcoded, null, 24px), + state-layer-size: if($exclude-hardcoded, null, 40px), + icon-color: map.get($systems, md-sys-color, on-surface-variant), + ); + + $variant-tokens: ( primary: ( state-layer-color: map.get($systems, md-sys-color, primary), ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, primary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), + icon-color: map.get($systems, md-sys-color, primary) ), secondary: ( state-layer-color: map.get($systems, md-sys-color, secondary), @@ -35,6 +43,7 @@ $prefix: (mat, icon-button); map.get($systems, md-sys-color, secondary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), + icon-color: map.get($systems, md-sys-color, secondary) ), tertiary: ( state-layer-color: map.get($systems, md-sys-color, tertiary), @@ -42,6 +51,7 @@ $prefix: (mat, icon-button); map.get($systems, md-sys-color, tertiary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), + icon-color: map.get($systems, md-sys-color, tertiary) ), error: ( state-layer-color: map.get($systems, md-sys-color, error), @@ -49,8 +59,9 @@ $prefix: (mat, icon-button); map.get($systems, md-sys-color, error), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), + icon-color: map.get($systems, md-sys-color, error) ) - )); + ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_icon.scss b/src/material/core/tokens/m3/mat/_icon.scss index adc647a678cb..37af048af4b9 100644 --- a/src/material/core/tokens/m3/mat/_icon.scss +++ b/src/material/core/tokens/m3/mat/_icon.scss @@ -10,9 +10,11 @@ $prefix: (mat, icon); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the mat-icon @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: (( + $tokens: ( color: token-definition.hardcode(inherit, $exclude-hardcoded), - ), ( + ); + + $variant-tokens: ( // Color variants: surface: (), // Default, no overrides needed. primary: ( @@ -27,7 +29,7 @@ $prefix: (mat, icon); error: ( color: map.get($systems, md-sys-color, error), ) - )); + ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mdc/_linear-progress.scss b/src/material/core/tokens/m3/mat/_linear-progress.scss similarity index 53% rename from src/material/core/tokens/m3/mdc/_linear-progress.scss rename to src/material/core/tokens/m3/mat/_linear-progress.scss index 66358f165e42..d52a66f5d9c2 100644 --- a/src/material/core/tokens/m3/mdc/_linear-progress.scss +++ b/src/material/core/tokens/m3/mat/_linear-progress.scss @@ -10,7 +10,14 @@ $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: values($systems, $exclude-hardcoded); + $tokens: ( + active-indicator-color: map.get($systems, md-sys-color, primary), + active-indicator-height: if($exclude-hardcoded, null, 4px), + track-color: map.get($systems, md-sys-color, surface-variant), + track-height: if($exclude-hardcoded, null, 4px), + track-shape: map.get($systems, md-sys-shape, corner-none) + ); + $variant-tokens: ( primary: (), // Default, no overrides needed secondary: ( @@ -27,21 +34,5 @@ $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) - ); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_list.scss b/src/material/core/tokens/m3/mat/_list.scss index d2617e62e982..021837bd6e0f 100644 --- a/src/material/core/tokens/m3/mat/_list.scss +++ b/src/material/core/tokens/m3/mat/_list.scss @@ -10,9 +10,68 @@ $prefix: (mat, list); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the mat-list @function get-tokens($systems, $exclude-hardcoded, $token-slots) { + // list-item-container-color + // 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 sheets container color is `md.sys.color.surface-container-low`. Instead, allow the + // list to just display the colors for its background. + + // list-item-leading-icon-size + // Match spec, which has list-item-leading-icon-size of 24px. + // Current version of tokens (0_161) has 18px. $tokens: ( active-indicator-color: map.get($systems, md-sys-color, secondary-container), active-indicator-shape: map.get($systems, md-sys-shape, corner-full), + list-item-container-color: if($exclude-hardcoded, null, transparent), + list-item-container-shape: map.get($systems, md-sys-shape, corner-none), + list-item-disabled-label-text-color: map.get($systems, md-sys-color, on-surface), + list-item-disabled-label-text-opacity: if($exclude-hardcoded, null, 0.3), + list-item-disabled-leading-icon-color: map.get($systems, md-sys-color, on-surface), + list-item-disabled-leading-icon-opacity: if($exclude-hardcoded, null, 0.38), + list-item-disabled-state-layer-color: map.get($systems, md-sys-color, on-surface), + list-item-disabled-state-layer-opacity: + map.get($systems, md-sys-state, focus-state-layer-opacity), + list-item-disabled-trailing-icon-color: map.get($systems, md-sys-color, on-surface), + list-item-disabled-trailing-icon-opacity: if($exclude-hardcoded, null, 0.38), + list-item-focus-label-text-color: map.get($systems, md-sys-color, on-surface), + list-item-focus-state-layer-color: map.get($systems, md-sys-color, on-surface), + list-item-focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + list-item-hover-label-text-color: map.get($systems, md-sys-color, on-surface), + list-item-hover-state-layer-color: map.get($systems, md-sys-color, on-surface), + list-item-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + list-item-label-text-color: map.get($systems, md-sys-color, on-surface), + list-item-label-text-font: map.get($systems, md-sys-typescale, body-large-font), + list-item-label-text-line-height: map.get($systems, md-sys-typescale, body-large-line-height), + list-item-label-text-size: map.get($systems, md-sys-typescale, body-large-size), + list-item-label-text-tracking: map.get($systems, md-sys-typescale, body-large-tracking), + list-item-label-text-weight: map.get($systems, md-sys-typescale, body-large-weight), + list-item-leading-avatar-color: map.get($systems, md-sys-color, primary-container), + list-item-leading-avatar-shape: map.get($systems, md-sys-shape, corner-full), + list-item-leading-avatar-size: if($exclude-hardcoded, null, 40px), + list-item-leading-icon-color: map.get($systems, md-sys-color, on-surface-variant), + list-item-leading-icon-size: if($exclude-hardcoded, null, 24px), + list-item-one-line-container-height: if($exclude-hardcoded, null, 56px), + list-item-selected-trailing-icon-color: map.get($systems, md-sys-color, primary), + list-item-supporting-text-color: map.get($systems, md-sys-color, on-surface-variant), + list-item-supporting-text-font: map.get($systems, md-sys-typescale, body-medium-font), + list-item-supporting-text-line-height: + map.get($systems, md-sys-typescale, body-medium-line-height), + list-item-supporting-text-size: map.get($systems, md-sys-typescale, body-medium-size), + list-item-supporting-text-tracking: map.get($systems, md-sys-typescale, body-medium-tracking), + list-item-supporting-text-weight: map.get($systems, md-sys-typescale, body-medium-weight), + list-item-three-line-container-height: if($exclude-hardcoded, null, 88px), + list-item-trailing-icon-color: map.get($systems, md-sys-color, on-surface-variant), + list-item-trailing-icon-size: if($exclude-hardcoded, null, 24px), + list-item-trailing-supporting-text-color: map.get($systems, md-sys-color, on-surface-variant), + list-item-trailing-supporting-text-font: map.get($systems, md-sys-typescale, label-small-font), + list-item-trailing-supporting-text-line-height: + map.get($systems, md-sys-typescale, label-small-line-height), + list-item-trailing-supporting-text-size: map.get($systems, md-sys-typescale, label-small-size), + list-item-trailing-supporting-text-tracking: + map.get($systems, md-sys-typescale, label-small-tracking), + list-item-trailing-supporting-text-weight: + map.get($systems, md-sys-typescale, label-small-weight), + list-item-two-line-container-height: if($exclude-hardcoded, null, 72px), ); @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); diff --git a/src/material/core/tokens/m3/mat/_menu.scss b/src/material/core/tokens/m3/mat/_menu.scss index c341e9a40465..879c27f1c9ab 100644 --- a/src/material/core/tokens/m3/mat/_menu.scss +++ b/src/material/core/tokens/m3/mat/_menu.scss @@ -38,9 +38,6 @@ $prefix: (mat, menu); container-color: map.get($systems, md-sys-color, surface-container), container-elevation-shadow: token-definition.hardcode( elevation.get-box-shadow(2), $exclude-hardcoded), - - // Unused - base-elevation-level: null, ) ); diff --git a/src/material/core/tokens/m3/mat/_minimal-pseudo-checkbox.scss b/src/material/core/tokens/m3/mat/_minimal-pseudo-checkbox.scss index 611a3bcf9d10..a9fcaf59b6f8 100644 --- a/src/material/core/tokens/m3/mat/_minimal-pseudo-checkbox.scss +++ b/src/material/core/tokens/m3/mat/_minimal-pseudo-checkbox.scss @@ -11,11 +11,13 @@ $prefix: (mat, minimal-pseudo-checkbox); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the minimal variant of mat-pseudo-checkbox @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: (( + $tokens: ( selected-checkmark-color: map.get($systems, md-sys-color, primary), disabled-selected-checkmark-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-surface), $alpha: 0.38), - ), ( + ); + + $variant-tokens: ( // Color variants: primary: (), // Default, no overrides needed. secondary: ( @@ -27,7 +29,7 @@ $prefix: (mat, minimal-pseudo-checkbox); error: ( selected-checkmark-color: map.get($systems, md-sys-color, error), ) - )); + ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_option.scss b/src/material/core/tokens/m3/mat/_option.scss index ad8aed6bb316..a2262e2c7186 100644 --- a/src/material/core/tokens/m3/mat/_option.scss +++ b/src/material/core/tokens/m3/mat/_option.scss @@ -11,30 +11,32 @@ $prefix: (mat, option); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the mat-option @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: (( - selected-state-label-text-color: map.get($systems, md-sys-color, on-secondary-container), - label-text-color: map.get($systems, md-sys-color, on-surface), - hover-state-layer-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, on-surface), - $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity) - ), - focus-state-layer-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, on-surface), - $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity) - ), - selected-state-layer-color: map.get($systems, md-sys-color, secondary-container), + $tokens: ( + selected-state-label-text-color: map.get($systems, md-sys-color, on-secondary-container), + label-text-color: map.get($systems, md-sys-color, on-surface), + hover-state-layer-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), + $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity) + ), + focus-state-layer-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), + $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity) + ), + selected-state-layer-color: map.get($systems, md-sys-color, secondary-container), + + // According to the spec the options have to be `label-large` in all typography + // dimensions, however this is inconsistent with the designs and with MDC's + // own implementation. This appears to be a bug in the spec, because MDC overrides + // the font size and weight to be `body-large` (see b/261838263). We make the same + // override here so the label looks correct. + label-text-size: map.get($systems, md-sys-typescale, body-large-size), + label-text-weight: map.get($systems, md-sys-typescale, body-large-weight), + label-text-font: map.get($systems, md-sys-typescale, label-large-font), + label-text-line-height: map.get($systems, md-sys-typescale, label-large-line-height), + label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking), + ); - // According to the spec the options have to be `label-large` in all typography - // dimensions, however this is inconsistent with the designs and with MDC's - // own implementation. This appears to be a bug in the spec, because MDC overrides - // the font size and weight to be `body-large` (see b/261838263). We make the same - // override here so the label looks correct. - label-text-size: map.get($systems, md-sys-typescale, body-large-size), - label-text-weight: map.get($systems, md-sys-typescale, body-large-weight), - label-text-font: map.get($systems, md-sys-typescale, label-large-font), - label-text-line-height: map.get($systems, md-sys-typescale, label-large-line-height), - label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking), - ), ( + $variant-tokens: ( // Color variants: primary: ( selected-state-label-text-color: map.get($systems, md-sys-color, on-primary-container), @@ -49,7 +51,7 @@ $prefix: (mat, option); selected-state-label-text-color: map.get($systems, md-sys-color, on-error-container), selected-state-layer-color: map.get($systems, md-sys-color, error-container), ) - )); + ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_outlined-button.scss b/src/material/core/tokens/m3/mat/_outlined-button.scss index ae297488682d..87bb8eda9c36 100644 --- a/src/material/core/tokens/m3/mat/_outlined-button.scss +++ b/src/material/core/tokens/m3/mat/_outlined-button.scss @@ -11,44 +11,61 @@ $prefix: (mat, outlined-button); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the mat-outlined-button @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: (( + $tokens: ( horizontal-padding: token-definition.hardcode(24px, $exclude-hardcoded), icon-spacing: token-definition.hardcode(8px, $exclude-hardcoded), icon-offset: token-definition.hardcode(-8px, $exclude-hardcoded), state-layer-color: map.get($systems, md-sys-color, primary), disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, primary), + map.get($systems, md-sys-color, primary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), - hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + container-height: if($exclude-hardcoded, null, 40px), + container-shape: map.get($systems, md-sys-shape, corner-full), + disabled-label-text-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.38), + disabled-outline-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.12), focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + label-text-color: map.get($systems, md-sys-color, primary), + label-text-font: map.get($systems, md-sys-typescale, label-large-font), + label-text-size: map.get($systems, md-sys-typescale, label-large-size), + label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking), + label-text-weight: map.get($systems, md-sys-typescale, label-large-weight), + outline-color: map.get($systems, md-sys-color, outline), + outline-width: if($exclude-hardcoded, null, 1px), pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), - ), ( - // Color variants: + ); + + $variant-tokens: ( primary: (), // Default, no overrides needed. secondary: ( state-layer-color: map.get($systems, md-sys-color, secondary), ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, secondary), + map.get($systems, md-sys-color, secondary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), + label-text-color: map.get($systems, md-sys-color, secondary), ), tertiary: ( state-layer-color: map.get($systems, md-sys-color, tertiary), ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, tertiary), + map.get($systems, md-sys-color, tertiary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), + label-text-color: map.get($systems, md-sys-color, tertiary), ), error: ( state-layer-color: map.get($systems, md-sys-color, error), ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, error), + map.get($systems, md-sys-color, error), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), + label-text-color: map.get($systems, md-sys-color, error), ) - )); + ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_outlined-card.scss b/src/material/core/tokens/m3/mat/_outlined-card.scss new file mode 100644 index 000000000000..b7d11892f08e --- /dev/null +++ b/src/material/core/tokens/m3/mat/_outlined-card.scss @@ -0,0 +1,28 @@ +@use 'sass:map'; +@use '../../../style/elevation'; +@use '../../token-definition'; + +// The prefix used to generate the fully qualified name for tokens in this file. +$prefix: (mat, outlined-card); + +/// Generates the tokens for MDC outlined-card +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @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: ( + container-color: map.get($systems, md-sys-color, surface), + container-elevation: map.get($systems, md-sys-elevation, level0), + container-shape: map.get($systems, md-sys-shape, corner-medium), + outline-color: map.get($systems, md-sys-color, outline-variant), + outline-width: if($exclude-hardcoded, null, 1px), + ); + $elevation: map.get($tokens, container-elevation); + + @if ($elevation != null) { + $tokens: map.set($tokens, container-elevation, elevation.get-box-shadow($elevation)); + } + + @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); +} diff --git a/src/material/core/tokens/m3/mat/_outlined-text-field.scss b/src/material/core/tokens/m3/mat/_outlined-text-field.scss new file mode 100644 index 000000000000..e5eeec45ce8b --- /dev/null +++ b/src/material/core/tokens/m3/mat/_outlined-text-field.scss @@ -0,0 +1,65 @@ +@use 'sass:map'; +@use '../../token-definition'; +@use '../../../style/sass-utils'; + +// The prefix used to generate the fully qualified name for tokens in this file. +$prefix: (mat, outlined-text-field); + +/// Generates the tokens for MDC outlined-text-field +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @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) { + $tokens: ( + caret-color: map.get($systems, md-sys-color, primary), + container-shape: map.get($systems, md-sys-shape, corner-extra-small), + disabled-input-text-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.38), + disabled-label-text-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.38), + disabled-outline-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.12), + error-focus-label-text-color: map.get($systems, md-sys-color, error), + error-focus-outline-color: map.get($systems, md-sys-color, error), + error-hover-label-text-color: map.get($systems, md-sys-color, on-error-container), + error-hover-outline-color: map.get($systems, md-sys-color, on-error-container), + error-label-text-color: map.get($systems, md-sys-color, error), + error-outline-color: map.get($systems, md-sys-color, error), + focus-label-text-color: map.get($systems, md-sys-color, primary), + focus-outline-color: map.get($systems, md-sys-color, primary), + focus-outline-width: if($exclude-hardcoded, null, 2px), + hover-label-text-color: map.get($systems, md-sys-color, on-surface), + hover-outline-color: map.get($systems, md-sys-color, on-surface), + input-text-color: map.get($systems, md-sys-color, on-surface), + input-text-placeholder-color: map.get($systems, md-sys-color, on-surface-variant), + label-text-color: map.get($systems, md-sys-color, on-surface-variant), + label-text-font: map.get($systems, md-sys-typescale, body-large-font), + label-text-size: map.get($systems, md-sys-typescale, body-large-size), + label-text-tracking: map.get($systems, md-sys-typescale, body-large-tracking), + label-text-weight: map.get($systems, md-sys-typescale, body-large-weight), + outline-color: map.get($systems, md-sys-color, outline), + outline-width: if($exclude-hardcoded, null, 1px), + ); + + $variant-tokens: ( + primary: (), // Default, no overrides needed + secondary: ( + caret-color: map.get($systems, md-sys-color, secondary), + focus-label-text-color: map.get($systems, md-sys-color, secondary), + focus-outline-color: map.get($systems, md-sys-color, secondary), + ), + tertiary: ( + caret-color: map.get($systems, md-sys-color, tertiary), + focus-label-text-color: map.get($systems, md-sys-color, tertiary), + focus-outline-color: map.get($systems, md-sys-color, tertiary), + ), + error: ( + caret-color: map.get($systems, md-sys-color, error), + focus-label-text-color: map.get($systems, md-sys-color, error), + focus-outline-color: map.get($systems, md-sys-color, error), + ), + ); + + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); +} diff --git a/src/material/core/tokens/m3/mat/_plain-tooltip.scss b/src/material/core/tokens/m3/mat/_plain-tooltip.scss new file mode 100644 index 000000000000..39daa0ab4068 --- /dev/null +++ b/src/material/core/tokens/m3/mat/_plain-tooltip.scss @@ -0,0 +1,25 @@ +@use '../../token-definition'; +@use 'sass:map'; + +// The prefix used to generate the fully qualified name for tokens in this file. +$prefix: (mat, plain-tooltip); + +/// Generates the tokens for MDC plain-tooltip +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @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) { + $tokens: ( + container-color: map.get($systems, md-sys-color, inverse-surface), + container-shape: map.get($systems, md-sys-shape, corner-extra-small), + supporting-text-color: map.get($systems, md-sys-color, inverse-on-surface), + supporting-text-font: map.get($systems, md-sys-typescale, body-small-font), + supporting-text-line-height: map.get($systems, md-sys-typescale, body-small-line-height), + supporting-text-size: map.get($systems, md-sys-typescale, body-small-size), + supporting-text-tracking: map.get($systems, md-sys-typescale, body-small-tracking), + supporting-text-weight: map.get($systems, md-sys-typescale, body-small-weight) + ); + + @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); +} diff --git a/src/material/core/tokens/m3/mat/_protected-button.scss b/src/material/core/tokens/m3/mat/_protected-button.scss index f2e53e0667fa..098d2c37bd1c 100644 --- a/src/material/core/tokens/m3/mat/_protected-button.scss +++ b/src/material/core/tokens/m3/mat/_protected-button.scss @@ -1,6 +1,7 @@ @use 'sass:map'; -@use '../../../style/sass-utils'; +@use '../../../style/elevation'; @use '../../token-definition'; +@use '../../../style/sass-utils'; // The prefix used to generate the fully qualified name for tokens in this file. // Note: in M3 the "protected" button is called "elevated". @@ -12,44 +13,81 @@ $prefix: (mat, protected-button); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the mat-raised-button @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: (( - horizontal-padding: token-definition.hardcode(24px, $exclude-hardcoded), - icon-spacing: token-definition.hardcode(8px, $exclude-hardcoded), - icon-offset: token-definition.hardcode(-8px, $exclude-hardcoded), - state-layer-color: map.get($systems, md-sys-color, primary), + // Note: in M3 the "protected" button is called "elevated". + $tokens: ( + container-color: map.get($systems, md-sys-color, surface), + container-elevation: map.get($systems, md-sys-elevation, level1), + container-height: if($exclude-hardcoded, null, 40px), + container-shape: map.get($systems, md-sys-shape, corner-full), + disabled-container-color: + sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.12), + disabled-container-elevation: map.get($systems, md-sys-elevation, level0), + disabled-label-text-color: + sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38), disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), - ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, primary), - $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) - ), - hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + focus-container-elevation: map.get($systems, md-sys-elevation, level1), focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + horizontal-padding: token-definition.hardcode(24px, $exclude-hardcoded), + hover-container-elevation: map.get($systems, md-sys-elevation, level2), + hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + icon-offset: token-definition.hardcode(-8px, $exclude-hardcoded), + icon-spacing: token-definition.hardcode(8px, $exclude-hardcoded), + label-text-color: map.get($systems, md-sys-color, primary), + label-text-font: map.get($systems, md-sys-typescale, label-large-font), + label-text-size: map.get($systems, md-sys-typescale, label-large-size), + label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking), + label-text-weight: map.get($systems, md-sys-typescale, label-large-weight), + pressed-container-elevation: map.get($systems, md-sys-elevation, level1), pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), - ), ( - // Color variants: + ripple-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, primary), + $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)), + state-layer-color: map.get($systems, md-sys-color, primary), + ); + + $variant-tokens: ( primary: (), // Default, no overrides needed. secondary: ( state-layer-color: map.get($systems, md-sys-color, secondary), ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, secondary), + map.get($systems, md-sys-color, secondary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), + label-text-color: map.get($systems, md-sys-color, secondary), ), tertiary: ( state-layer-color: map.get($systems, md-sys-color, tertiary), ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, tertiary), + map.get($systems, md-sys-color, tertiary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), + label-text-color: map.get($systems, md-sys-color, tertiary), ), error: ( state-layer-color: map.get($systems, md-sys-color, error), ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, error), + map.get($systems, md-sys-color, error), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), + label-text-color: map.get($systems, md-sys-color, error), ) - )); + ); + + $elevation-tokens: ( + container-elevation, + disabled-container-elevation, + focus-container-elevation, + hover-container-elevation, + pressed-container-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)); + } + } - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_radio.scss b/src/material/core/tokens/m3/mat/_radio.scss index 042c6deecf5e..1d37880292e6 100644 --- a/src/material/core/tokens/m3/mat/_radio.scss +++ b/src/material/core/tokens/m3/mat/_radio.scss @@ -12,34 +12,55 @@ $prefix: (mat, radio); /// @return {Map} A set of custom tokens for the mat-radio @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: ( - ( - ripple-color: map.get($systems, md-sys-color, on-surface), - checked-ripple-color: map.get($systems, md-sys-color, primary), - disabled-label-color: - sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38), - label-text-color: map.get($systems, md-sys-color, on-surface), - label-text-font: map.get($systems, md-sys-typescale, body-medium-font), - label-text-line-height: map.get($systems, md-sys-typescale, body-medium-line-height), - label-text-size: map.get($systems, md-sys-typescale, body-medium-size), - label-text-tracking: map.get($systems, md-sys-typescale, body-medium-tracking), - label-text-weight: map.get($systems, md-sys-typescale, body-medium-weight), + ripple-color: map.get($systems, md-sys-color, on-surface), + checked-ripple-color: map.get($systems, md-sys-color, primary), + disabled-label-color: + sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38), + label-text-color: map.get($systems, md-sys-color, on-surface), + label-text-font: map.get($systems, md-sys-typescale, body-medium-font), + label-text-line-height: map.get($systems, md-sys-typescale, body-medium-line-height), + label-text-size: map.get($systems, md-sys-typescale, body-medium-size), + label-text-tracking: map.get($systems, md-sys-typescale, body-medium-tracking), + label-text-weight: map.get($systems, md-sys-typescale, body-medium-weight), + disabled-selected-icon-color: map.get($systems, md-sys-color, on-surface), + disabled-selected-icon-opacity: if($exclude-hardcoded, null, 0.38), + disabled-unselected-icon-color: map.get($systems, md-sys-color, on-surface), + disabled-unselected-icon-opacity: if($exclude-hardcoded, null, 0.38), + selected-focus-icon-color: map.get($systems, md-sys-color, primary), + selected-hover-icon-color: map.get($systems, md-sys-color, primary), + selected-icon-color: map.get($systems, md-sys-color, primary), + selected-pressed-icon-color: map.get($systems, md-sys-color, primary), + state-layer-size: if($exclude-hardcoded, null, 40px), + unselected-focus-icon-color: map.get($systems, md-sys-color, on-surface), + unselected-hover-icon-color: map.get($systems, md-sys-color, on-surface), + unselected-icon-color: map.get($systems, md-sys-color, on-surface-variant), + unselected-pressed-icon-color: map.get($systems, md-sys-color, on-surface), + ); + + $variant-tokens: ( + primary: (), // Default, no overrides needed + secondary: ( + checked-ripple-color: map.get($systems, md-sys-color, secondary), + selected-focus-icon-color: map.get($systems, md-sys-color, secondary), + selected-hover-icon-color: map.get($systems, md-sys-color, secondary), + selected-icon-color: map.get($systems, md-sys-color, secondary), + selected-pressed-icon-color: map.get($systems, md-sys-color, secondary), + ), + tertiary: ( + checked-ripple-color: map.get($systems, md-sys-color, tertiary), + selected-focus-icon-color: map.get($systems, md-sys-color, tertiary), + selected-hover-icon-color: map.get($systems, md-sys-color, tertiary), + selected-icon-color: map.get($systems, md-sys-color, tertiary), + selected-pressed-icon-color: map.get($systems, md-sys-color, tertiary), + ), + error: ( + checked-ripple-color: map.get($systems, md-sys-color, error), + selected-focus-icon-color: map.get($systems, md-sys-color, error), + selected-hover-icon-color: map.get($systems, md-sys-color, error), + selected-icon-color: map.get($systems, md-sys-color, error), + selected-pressed-icon-color: map.get($systems, md-sys-color, error), ), - ( - // Color variants: - primary: (), - // Default, no overrides needed - secondary: - ( - checked-ripple-color: map.get($systems, md-sys-color, secondary), - ), - tertiary: ( - checked-ripple-color: map.get($systems, md-sys-color, tertiary), - ), - error: ( - checked-ripple-color: map.get($systems, md-sys-color, error), - ) - ) ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_secondary-navigation-tab.scss b/src/material/core/tokens/m3/mat/_secondary-navigation-tab.scss new file mode 100644 index 000000000000..ca7ac2a2f779 --- /dev/null +++ b/src/material/core/tokens/m3/mat/_secondary-navigation-tab.scss @@ -0,0 +1,17 @@ +@use '../../token-definition'; + +// The prefix used to generate the fully qualified name for tokens in this file. +$prefix: (mat, secondary-navigation-tab); + +/// Generates the tokens for MDC tab +/// @param {Map} $systems The MDC system tokens +/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values +/// @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) { + $tokens: ( + container-height: if($exclude-hardcoded, null, 48px), + ); + + @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); +} diff --git a/src/material/core/tokens/m3/mat/_select.scss b/src/material/core/tokens/m3/mat/_select.scss index a88bd6767f7b..1dff1e980d6c 100644 --- a/src/material/core/tokens/m3/mat/_select.scss +++ b/src/material/core/tokens/m3/mat/_select.scss @@ -28,7 +28,9 @@ $prefix: (mat, select); container-elevation-shadow: token-definition.hardcode(elevation.get-box-shadow(2), $exclude-hardcoded), ) - ), ( + ); + + $variant-tokens: ( // Color variants: primary: (), // Default, no overrides needed secondary: ( @@ -42,5 +44,5 @@ $prefix: (mat, select); ) ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_slider.scss b/src/material/core/tokens/m3/mat/_slider.scss index bc6a8577ee32..1eaf0ab81712 100644 --- a/src/material/core/tokens/m3/mat/_slider.scss +++ b/src/material/core/tokens/m3/mat/_slider.scss @@ -1,6 +1,7 @@ @use 'sass:map'; @use '../../../style/sass-utils'; @use '../../token-definition'; +@use '../../../style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, slider); @@ -11,7 +12,7 @@ $prefix: (mat, slider); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the mat-slider @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: (( + $tokens: ( ripple-color: map.get($systems, md-sys-color, primary), hover-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, primary), $alpha: 0.05), @@ -23,13 +24,51 @@ $prefix: (mat, slider); value-indicator-height: token-definition.hardcode(28px, $exclude-hardcoded), value-indicator-caret-display: token-definition.hardcode(none, $exclude-hardcoded), value-indicator-border-radius: - token-definition.hardcode(50% 50% 50% 0, $exclude-hardcoded), + token-definition.hardcode(50% 50% 50% 0, $exclude-hardcoded), value-indicator-text-transform: - token-definition.hardcode(rotate(45deg), $exclude-hardcoded), + token-definition.hardcode(rotate(45deg), $exclude-hardcoded), value-indicator-container-transform: - token-definition.hardcode(translateX(-50%) rotate(-45deg), $exclude-hardcoded) - ), ( - // Color variants + token-definition.hardcode(translateX(-50%) rotate(-45deg), $exclude-hardcoded), + active-track-color: map.get($systems, md-sys-color, primary), + active-track-height: if($exclude-hardcoded, null, 4px), + active-track-shape: map.get($systems, md-sys-shape, corner-full), + disabled-active-track-color: map.get($systems, md-sys-color, on-surface), + disabled-handle-color: map.get($systems, md-sys-color, on-surface), + disabled-inactive-track-color: map.get($systems, md-sys-color, on-surface), + focus-handle-color: map.get($systems, md-sys-color, primary), + handle-color: map.get($systems, md-sys-color, primary), + handle-elevation: map.get($systems, md-sys-elevation, level1), + handle-height: if($exclude-hardcoded, null, 20px), + handle-shape: map.get($systems, md-sys-shape, corner-full), + handle-width: if($exclude-hardcoded, null, 20px), + hover-handle-color: map.get($systems, md-sys-color, primary), + inactive-track-color: map.get($systems, md-sys-color, surface-variant), + inactive-track-height: if($exclude-hardcoded, null, 4px), + inactive-track-shape: map.get($systems, md-sys-shape, corner-full), + label-container-color: map.get($systems, md-sys-color, primary), + label-label-text-color: map.get($systems, md-sys-color, on-primary), + label-label-text-font: map.get($systems, md-sys-typescale, label-medium-font), + label-label-text-line-height: map.get($systems, md-sys-typescale, label-medium-line-height), + label-label-text-size: map.get($systems, md-sys-typescale, label-medium-size), + label-label-text-tracking: map.get($systems, md-sys-typescale, label-medium-tracking), + label-label-text-weight: map.get($systems, md-sys-typescale, label-medium-weight), + with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-primary), + with-overlap-handle-outline-width: if($exclude-hardcoded, null, 1px), + with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-primary), + with-tick-marks-active-container-opacity: if($exclude-hardcoded, null, 0.38), + with-tick-marks-container-shape: map.get($systems, md-sys-shape, corner-full), + with-tick-marks-container-size: if($exclude-hardcoded, null, 2px), + with-tick-marks-disabled-container-color: map.get($systems, md-sys-color, on-surface), + with-tick-marks-inactive-container-color: map.get($systems, md-sys-color, on-surface-variant), + with-tick-marks-inactive-container-opacity: if($exclude-hardcoded, null, 0.38) + ); + $handle-elevation: map.get($tokens, handle-elevation); + + @if ($handle-elevation != null) { + $tokens: map.set($tokens, handle-elevation, elevation.get-box-shadow($handle-elevation)); + } + + $variant-tokens: ( primary: (), // Default, no overrides needed secondary: ( ripple-color: map.get($systems, md-sys-color, secondary), @@ -37,6 +76,14 @@ $prefix: (mat, slider); map.get($systems, md-sys-color, secondary), $alpha: 0.05), focus-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, secondary), $alpha: 0.2), + active-track-color: map.get($systems, md-sys-color, secondary), + focus-handle-color: map.get($systems, md-sys-color, secondary), + handle-color: map.get($systems, md-sys-color, secondary), + hover-handle-color: map.get($systems, md-sys-color, secondary), + label-container-color: map.get($systems, md-sys-color, secondary), + label-label-text-color: map.get($systems, md-sys-color, on-secondary), + with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-secondary), + with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-secondary), ), tertiary: ( ripple-color: map.get($systems, md-sys-color, tertiary), @@ -44,6 +91,14 @@ $prefix: (mat, slider); map.get($systems, md-sys-color, tertiary), $alpha: 0.05), focus-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, tertiary), $alpha: 0.2), + active-track-color: map.get($systems, md-sys-color, tertiary), + focus-handle-color: map.get($systems, md-sys-color, tertiary), + handle-color: map.get($systems, md-sys-color, tertiary), + hover-handle-color: map.get($systems, md-sys-color, tertiary), + label-container-color: map.get($systems, md-sys-color, tertiary), + label-label-text-color: map.get($systems, md-sys-color, on-tertiary), + with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-tertiary), + with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-tertiary), ), error: ( ripple-color: map.get($systems, md-sys-color, error), @@ -51,8 +106,16 @@ $prefix: (mat, slider); map.get($systems, md-sys-color, error), $alpha: 0.05), focus-state-layer-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, error), $alpha: 0.2), + active-track-color: map.get($systems, md-sys-color, error), + focus-handle-color: map.get($systems, md-sys-color, error), + handle-color: map.get($systems, md-sys-color, error), + hover-handle-color: map.get($systems, md-sys-color, error), + label-container-color: map.get($systems, md-sys-color, error), + label-label-text-color: map.get($systems, md-sys-color, on-error), + with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-error), + with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-error), ), - )); + ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_snack-bar.scss b/src/material/core/tokens/m3/mat/_snack-bar.scss index 670078989dbe..36fcb82ea0f0 100644 --- a/src/material/core/tokens/m3/mat/_snack-bar.scss +++ b/src/material/core/tokens/m3/mat/_snack-bar.scss @@ -12,6 +12,13 @@ $prefix: (mat, snack-bar); @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: ( button-color: map.get($systems, md-sys-color, inverse-primary), + container-color: map.get($systems, md-sys-color, inverse-surface), + container-shape: map.get($systems, md-sys-shape, corner-extra-small), + supporting-text-color: map.get($systems, md-sys-color, inverse-on-surface), + supporting-text-font: map.get($systems, md-sys-typescale, body-medium-font), + supporting-text-line-height: map.get($systems, md-sys-typescale, body-medium-line-height), + supporting-text-size: map.get($systems, md-sys-typescale, body-medium-size), + supporting-text-weight: map.get($systems, md-sys-typescale, body-medium-weight), ); @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); diff --git a/src/material/core/tokens/m3/mat/_standard-button-toggle.scss b/src/material/core/tokens/m3/mat/_standard-button-toggle.scss index a8beb3703415..461e27ada73e 100644 --- a/src/material/core/tokens/m3/mat/_standard-button-toggle.scss +++ b/src/material/core/tokens/m3/mat/_standard-button-toggle.scss @@ -37,7 +37,9 @@ $prefix: (mat, standard-button-toggle); $alpha: 0.12, ), divider-color: map.get($systems, md-sys-color, outline), - ), ( + )); + + $color-variants: ( // Color variants: primary: ( selected-state-background-color: map.get($systems, md-sys-color, primary-container), @@ -52,7 +54,7 @@ $prefix: (mat, standard-button-toggle); selected-state-background-color: map.get($systems, md-sys-color, error-container), selected-state-text-color: map.get($systems, md-sys-color, on-error-container), ) - )); + ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $color-variants), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_stepper.scss b/src/material/core/tokens/m3/mat/_stepper.scss index b30723b5eb1e..1315c5191fb3 100644 --- a/src/material/core/tokens/m3/mat/_stepper.scss +++ b/src/material/core/tokens/m3/mat/_stepper.scss @@ -12,68 +12,68 @@ $prefix: (mat, stepper); /// @return {Map} A set of custom tokens for the mat-stepper @function get-tokens($systems, $exclude-hardcoded, $token-slots) { $tokens: ( - ( - container-color: map.get($systems, md-sys-color, surface), - line-color: map.get($systems, md-sys-color, outline), - header-hover-state-layer-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, inverse-surface), - $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity) - ), - header-focus-state-layer-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, inverse-surface), - $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity) - ), - header-label-text-color: map.get($systems, md-sys-color, on-surface-variant), - header-optional-label-text-color: map.get($systems, md-sys-color, on-surface-variant), - header-selected-state-label-text-color: map.get($systems, md-sys-color, on-surface-variant), - header-icon-background-color: map.get($systems, md-sys-color, on-surface-variant), - header-icon-foreground-color: map.get($systems, md-sys-color, surface), + container-color: map.get($systems, md-sys-color, surface), + line-color: map.get($systems, md-sys-color, outline), + header-hover-state-layer-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, inverse-surface), + $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity) + ), + header-focus-state-layer-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, inverse-surface), + $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity) + ), + header-label-text-color: map.get($systems, md-sys-color, on-surface-variant), + header-optional-label-text-color: map.get($systems, md-sys-color, on-surface-variant), + header-selected-state-label-text-color: map.get($systems, md-sys-color, on-surface-variant), + header-icon-background-color: map.get($systems, md-sys-color, on-surface-variant), + header-icon-foreground-color: map.get($systems, md-sys-color, surface), + header-edit-state-icon-background-color: map.get($systems, md-sys-color, primary), + header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary), + header-error-state-label-text-color: map.get($systems, md-sys-color, error), + header-error-state-icon-foreground-color: map.get($systems, md-sys-color, error), + header-error-state-icon-background-color: + token-definition.hardcode(transparent, $exclude-hardcoded), + container-text-font: map.get($systems, md-sys-typescale, body-medium-font), + header-label-text-font: map.get($systems, md-sys-typescale, title-small-font), + header-label-text-size: map.get($systems, md-sys-typescale, title-small-size), + header-label-text-weight: map.get($systems, md-sys-typescale, title-small-weight), + header-error-state-label-text-size: map.get($systems, md-sys-typescale, title-small-size), + header-focus-state-layer-shape: map.get($systems, md-sys-shape, corner-medium), + header-hover-state-layer-shape: map.get($systems, md-sys-shape, corner-medium), + header-selected-state-label-text-size: map.get($systems, md-sys-typescale, title-small-size), + header-selected-state-label-text-weight: map.get( + $systems, md-sys-typescale, title-small-weight), + header-selected-state-icon-background-color: map.get($systems, md-sys-color, primary), + header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary), + ); + + $variant-tokens: ( + // Color variants + primary: ( header-edit-state-icon-background-color: map.get($systems, md-sys-color, primary), header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary), - header-error-state-label-text-color: map.get($systems, md-sys-color, error), - header-error-state-icon-foreground-color: map.get($systems, md-sys-color, error), - header-error-state-icon-background-color: - token-definition.hardcode(transparent, $exclude-hardcoded), - container-text-font: map.get($systems, md-sys-typescale, body-medium-font), - header-label-text-font: map.get($systems, md-sys-typescale, title-small-font), - header-label-text-size: map.get($systems, md-sys-typescale, title-small-size), - header-label-text-weight: map.get($systems, md-sys-typescale, title-small-weight), - header-error-state-label-text-size: map.get($systems, md-sys-typescale, title-small-size), - header-focus-state-layer-shape: map.get($systems, md-sys-shape, corner-medium), - header-hover-state-layer-shape: map.get($systems, md-sys-shape, corner-medium), - header-selected-state-label-text-size: map.get($systems, md-sys-typescale, title-small-size), - header-selected-state-label-text-weight: map.get( - $systems, md-sys-typescale, title-small-weight), header-selected-state-icon-background-color: map.get($systems, md-sys-color, primary), header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary), - ), ( - // Color variants - primary: ( - header-edit-state-icon-background-color: map.get($systems, md-sys-color, primary), - header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary), - header-selected-state-icon-background-color: map.get($systems, md-sys-color, primary), - header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary), - ), - secondary: ( - header-edit-state-icon-background-color: map.get($systems, md-sys-color, secondary), - header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-secondary), - header-selected-state-icon-background-color: map.get($systems, md-sys-color, secondary), - header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-secondary), - ), - tertiary: ( - header-edit-state-icon-background-color: map.get($systems, md-sys-color, tertiary), - header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-tertiary), - header-selected-state-icon-background-color: map.get($systems, md-sys-color, tertiary), - header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-tertiary), - ), - error: ( - header-edit-state-icon-background-color: map.get($systems, md-sys-color, error), - header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-error), - header-selected-state-icon-background-color: map.get($systems, md-sys-color, error), - header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-error), - ) + ), + secondary: ( + header-edit-state-icon-background-color: map.get($systems, md-sys-color, secondary), + header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-secondary), + header-selected-state-icon-background-color: map.get($systems, md-sys-color, secondary), + header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-secondary), + ), + tertiary: ( + header-edit-state-icon-background-color: map.get($systems, md-sys-color, tertiary), + header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-tertiary), + header-selected-state-icon-background-color: map.get($systems, md-sys-color, tertiary), + header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-tertiary), + ), + error: ( + header-edit-state-icon-background-color: map.get($systems, md-sys-color, error), + header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-error), + header-selected-state-icon-background-color: map.get($systems, md-sys-color, error), + header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-error), ) ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_switch.scss b/src/material/core/tokens/m3/mat/_switch.scss index 56fcac2b81d4..9e96d9698433 100644 --- a/src/material/core/tokens/m3/mat/_switch.scss +++ b/src/material/core/tokens/m3/mat/_switch.scss @@ -1,5 +1,6 @@ @use 'sass:map'; @use '../../token-definition'; +@use '../../../style/elevation'; // The prefix used to generate the fully qualified name for tokens in this file. $prefix: (mat, switch); @@ -10,47 +11,155 @@ $prefix: (mat, switch); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the mat-slide-toggle @function get-tokens($systems, $exclude-hardcoded, $token-slots) { + // visible/hidden-track-opacity: + // The hidden and visible track represent whichever track is visible or + // hidden in the ui. This could be the .mdc-switch__track :before or + // :after depending on whether the switch is selected or unselected. + // + // The m2 slide-toggle uses transforms to hide & show the tracks while + // the m3 slide-toggle uses opacity. $tokens: ( - disabled-selected-handle-opacity: token-definition.hardcode(1, $exclude-hardcoded), - disabled-unselected-handle-opacity: token-definition.hardcode(0.38, $exclude-hardcoded), - unselected-handle-size: token-definition.hardcode(16px, $exclude-hardcoded), - selected-handle-size: token-definition.hardcode(24px, $exclude-hardcoded), - with-icon-handle-size: token-definition.hardcode(24px, $exclude-hardcoded), - pressed-handle-size: token-definition.hardcode(28px, $exclude-hardcoded), - selected-handle-horizontal-margin: token-definition.hardcode(0 24px, $exclude-hardcoded), - selected-with-icon-handle-horizontal-margin: - token-definition.hardcode(0 24px, $exclude-hardcoded), - selected-pressed-handle-horizontal-margin: - token-definition.hardcode(0 22px, $exclude-hardcoded), - unselected-handle-horizontal-margin: token-definition.hardcode(0 8px, $exclude-hardcoded), - unselected-with-icon-handle-horizontal-margin: - token-definition.hardcode(0 4px, $exclude-hardcoded), - unselected-pressed-handle-horizontal-margin: - token-definition.hardcode(0 2px, $exclude-hardcoded), - // The hidden and visible track represent whichever track is visible or - // hidden in the ui. This could be the .mdc-switch__track :before or - // :after depending on whether the switch is selected or unselected. - // - // The m2 slide-toggle uses transforms to hide & show the tracks while - // the m3 slide-toggle uses opacity. - visible-track-opacity: token-definition.hardcode(1, $exclude-hardcoded), + disabled-selected-handle-color: map.get($systems, md-sys-color, surface), + disabled-selected-handle-opacity: if($exclude-hardcoded, null, 1), + disabled-selected-icon-color: map.get($systems, md-sys-color, on-surface), + disabled-selected-icon-opacity: if($exclude-hardcoded, null, 0.38), + disabled-selected-track-color: map.get($systems, md-sys-color, on-surface), + disabled-track-opacity: if($exclude-hardcoded, null, 0.12), + disabled-unselected-handle-color: map.get($systems, md-sys-color, on-surface), + disabled-unselected-handle-opacity: if($exclude-hardcoded, null, 0.38), + disabled-unselected-icon-color: map.get($systems, md-sys-color, surface-variant), + disabled-unselected-icon-opacity: if($exclude-hardcoded, null, 0.38), + disabled-unselected-track-color: map.get($systems, md-sys-color, surface-variant), + disabled-unselected-track-outline-color: map.get($systems, md-sys-color, on-surface), + disabled-unselected-track-outline-width: + token-definition.hardcode(2px, $exclude-hardcoded), + handle-shape: map.get($systems, md-sys-shape, corner-full), hidden-track-opacity: token-definition.hardcode(0, $exclude-hardcoded), - visible-track-transition: token-definition.hardcode(opacity 75ms, $exclude-hardcoded), hidden-track-transition: token-definition.hardcode(opacity 75ms, $exclude-hardcoded), - track-outline-width: token-definition.hardcode(2px, $exclude-hardcoded), - track-outline-color: map.get($systems, md-sys-color, outline), - selected-track-outline-width: token-definition.hardcode(2px, $exclude-hardcoded), - selected-track-outline-color: token-definition.hardcode(transparent, $exclude-hardcoded), - disabled-unselected-track-outline-width: - token-definition.hardcode(2px, $exclude-hardcoded), - disabled-unselected-track-outline-color: map.get($systems, md-sys-color, on-surface), label-text-color: map.get($systems, md-sys-color, on-surface), label-text-font: map.get($systems, md-sys-typescale, body-medium-font), label-text-line-height: map.get($systems, md-sys-typescale, body-medium-line-height), label-text-size: map.get($systems, md-sys-typescale, body-medium-size), label-text-tracking: map.get($systems, md-sys-typescale, body-medium-tracking), label-text-weight: map.get($systems, md-sys-typescale, body-medium-weight), + pressed-handle-size: token-definition.hardcode(28px, $exclude-hardcoded), + selected-focus-handle-color: map.get($systems, md-sys-color, primary-container), + selected-focus-state-layer-color: map.get($systems, md-sys-color, primary), + selected-focus-state-layer-opacity: + map.get($systems, md-sys-state, focus-state-layer-opacity), + selected-focus-track-color: map.get($systems, md-sys-color, primary), + selected-handle-color: map.get($systems, md-sys-color, on-primary), + selected-handle-horizontal-margin: token-definition.hardcode(0 24px, $exclude-hardcoded), + selected-handle-size: token-definition.hardcode(24px, $exclude-hardcoded), + selected-hover-handle-color: map.get($systems, md-sys-color, primary-container), + selected-hover-state-layer-color: map.get($systems, md-sys-color, primary), + selected-hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + selected-hover-track-color: map.get($systems, md-sys-color, primary), + selected-icon-color: map.get($systems, md-sys-color, on-primary-container), + selected-icon-size: if($exclude-hardcoded, null, 16px), + selected-pressed-handle-color: map.get($systems, md-sys-color, primary-container), + selected-pressed-handle-horizontal-margin: + token-definition.hardcode(0 22px, $exclude-hardcoded), + selected-pressed-state-layer-color: map.get($systems, md-sys-color, primary), + selected-pressed-state-layer-opacity: + map.get($systems, md-sys-state, pressed-state-layer-opacity), + selected-pressed-track-color: map.get($systems, md-sys-color, primary), + selected-track-color: map.get($systems, md-sys-color, primary), + selected-track-outline-color: token-definition.hardcode(transparent, $exclude-hardcoded), + selected-track-outline-width: token-definition.hardcode(2px, $exclude-hardcoded), + selected-with-icon-handle-horizontal-margin: + token-definition.hardcode(0 24px, $exclude-hardcoded), + state-layer-size: if($exclude-hardcoded, null, 40px), + track-height: if($exclude-hardcoded, null, 32px), + track-outline-color: map.get($systems, md-sys-color, outline), + track-outline-width: if($exclude-hardcoded, null, 2px), + track-shape: map.get($systems, md-sys-shape, corner-full), + track-width: if($exclude-hardcoded, null, 52px), + unselected-focus-handle-color: map.get($systems, md-sys-color, on-surface-variant), + unselected-focus-state-layer-color: map.get($systems, md-sys-color, on-surface), + unselected-focus-state-layer-opacity: + map.get($systems, md-sys-state, focus-state-layer-opacity), + unselected-focus-track-color: map.get($systems, md-sys-color, surface-variant), + unselected-handle-color: map.get($systems, md-sys-color, outline), + unselected-handle-horizontal-margin: + token-definition.hardcode(0 8px, $exclude-hardcoded), + unselected-handle-size: token-definition.hardcode(16px, $exclude-hardcoded), + unselected-hover-handle-color: map.get($systems, md-sys-color, on-surface-variant), + unselected-hover-state-layer-color: map.get($systems, md-sys-color, on-surface), + unselected-hover-state-layer-opacity: + map.get($systems, md-sys-state, hover-state-layer-opacity), + unselected-hover-track-color: map.get($systems, md-sys-color, surface-variant), + unselected-icon-color: map.get($systems, md-sys-color, surface-variant), + unselected-icon-size: if($exclude-hardcoded, null, 16px), + unselected-pressed-handle-color: map.get($systems, md-sys-color, on-surface-variant), + unselected-pressed-handle-horizontal-margin: + token-definition.hardcode(0 2px, $exclude-hardcoded), + unselected-pressed-state-layer-color: map.get($systems, md-sys-color, on-surface), + unselected-pressed-state-layer-opacity: + map.get($systems, md-sys-state, pressed-state-layer-opacity), + unselected-pressed-track-color: map.get($systems, md-sys-color, surface-variant), + unselected-track-color: map.get($systems, md-sys-color, surface-variant), + unselected-with-icon-handle-horizontal-margin: + token-definition.hardcode(0 4px, $exclude-hardcoded), + visible-track-opacity: token-definition.hardcode(1, $exclude-hardcoded), + visible-track-transition: token-definition.hardcode(opacity 75ms, $exclude-hardcoded), + with-icon-handle-size: token-definition.hardcode(24px, $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)); + } + } + + $variant-tokens: ( + primary: (), // Default, no overrides needed + secondary: ( + selected-focus-handle-color: map.get($systems, md-sys-color, secondary-container), + selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary), + selected-focus-track-color: map.get($systems, md-sys-color, secondary), + selected-handle-color: map.get($systems, md-sys-color, on-secondary), + selected-hover-handle-color: map.get($systems, md-sys-color, secondary-container), + selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary), + selected-hover-track-color: map.get($systems, md-sys-color, secondary), + selected-icon-color: map.get($systems, md-sys-color, on-secondary-container), + selected-pressed-handle-color: map.get($systems, md-sys-color, secondary-container), + selected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary), + selected-pressed-track-color: map.get($systems, md-sys-color, secondary), + selected-track-color: map.get($systems, md-sys-color, secondary), + ), + tertiary: ( + selected-focus-handle-color: map.get($systems, md-sys-color, tertiary-container), + selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary), + selected-focus-track-color: map.get($systems, md-sys-color, tertiary), + selected-handle-color: map.get($systems, md-sys-color, on-tertiary), + selected-hover-handle-color: map.get($systems, md-sys-color, tertiary-container), + selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary), + selected-hover-track-color: map.get($systems, md-sys-color, tertiary), + selected-icon-color: map.get($systems, md-sys-color, on-tertiary-container), + selected-pressed-handle-color: map.get($systems, md-sys-color, tertiary-container), + selected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary), + selected-pressed-track-color: map.get($systems, md-sys-color, tertiary), + selected-track-color: map.get($systems, md-sys-color, tertiary), + ), + error: ( + selected-focus-handle-color: map.get($systems, md-sys-color, error-container), + selected-focus-state-layer-color: map.get($systems, md-sys-color, error), + selected-focus-track-color: map.get($systems, md-sys-color, error), + selected-handle-color: map.get($systems, md-sys-color, on-error), + selected-hover-handle-color: map.get($systems, md-sys-color, error-container), + selected-hover-state-layer-color: map.get($systems, md-sys-color, error), + selected-hover-track-color: map.get($systems, md-sys-color, error), + selected-icon-color: map.get($systems, md-sys-color, on-error-container), + selected-pressed-handle-color: map.get($systems, md-sys-color, error-container), + selected-pressed-state-layer-color: map.get($systems, md-sys-color, error), + selected-pressed-track-color: map.get($systems, md-sys-color, error), + selected-track-color: map.get($systems, md-sys-color, error), + ), ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_tab-header.scss b/src/material/core/tokens/m3/mat/_tab-header.scss index 5d4ee275c118..39b693065c36 100644 --- a/src/material/core/tokens/m3/mat/_tab-header.scss +++ b/src/material/core/tokens/m3/mat/_tab-header.scss @@ -16,7 +16,6 @@ $prefix: (mat, tab-header); ( divider-color: map.get($systems, md-sys-color, surface-variant), divider-height: token-definition.hardcode(1px, $exclude-hardcoded), - disabled-ripple-color: null, // TODO(mmalerba): Figure out correct value. pagination-icon-color: map.get($systems, md-sys-color, on-surface), inactive-label-text-color: map.get($systems, md-sys-color, on-surface), active-label-text-color: map.get($systems, md-sys-color, on-surface), @@ -29,7 +28,9 @@ $prefix: (mat, tab-header); active-focus-indicator-color: map.get($systems, md-sys-color, primary), active-hover-indicator-color: map.get($systems, md-sys-color, primary), ), - ), ( + ); + + $variant-tokens: ( // Color variants primary: (), // Default, no overrides needed secondary: ( @@ -46,6 +47,6 @@ $prefix: (mat, tab-header); ) ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mdc/_tab-indicator.scss b/src/material/core/tokens/m3/mat/_tab-indicator.scss similarity index 91% rename from src/material/core/tokens/m3/mdc/_tab-indicator.scss rename to src/material/core/tokens/m3/mat/_tab-indicator.scss index b5249fbd607c..6f502c031a77 100644 --- a/src/material/core/tokens/m3/mdc/_tab-indicator.scss +++ b/src/material/core/tokens/m3/mat/_tab-indicator.scss @@ -15,6 +15,7 @@ $prefix: (mat, tab-indicator); active-indicator-shape: token-definition.hardcode(0, $exclude-hardcoded), active-indicator-color: map.get($systems, md-sys-color, primary), ); + $variant-tokens: ( // Color variants primary: (), // Default, no overrides needed @@ -29,6 +30,5 @@ $prefix: (mat, tab-indicator); ) ); - @return token-definition.namespace-tokens( - $prefix, ($tokens, $variant-tokens), $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_text-button.scss b/src/material/core/tokens/m3/mat/_text-button.scss index 80fc1ae801e2..e3f4956ca961 100644 --- a/src/material/core/tokens/m3/mat/_text-button.scss +++ b/src/material/core/tokens/m3/mat/_text-button.scss @@ -11,7 +11,7 @@ $prefix: (mat, text-button); /// @param {Map} $token-slots Possible token slots /// @return {Map} A set of custom tokens for the mat-button @function get-tokens($systems, $exclude-hardcoded, $token-slots) { - $tokens: (( + $tokens: ( horizontal-padding: token-definition.hardcode(12px, $exclude-hardcoded), with-icon-horizontal-padding: token-definition.hardcode(16px, $exclude-hardcoded), icon-spacing: token-definition.hardcode(8px, $exclude-hardcoded), @@ -19,37 +19,50 @@ $prefix: (mat, text-button); state-layer-color: map.get($systems, md-sys-color, primary), disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, primary), + map.get($systems, md-sys-color, primary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) ), - hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + container-height: if($exclude-hardcoded, null, 40px), + container-shape: map.get($systems, md-sys-shape, corner-full), + disabled-label-text-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-surface), $alpha: 0.38), focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + label-text-color: map.get($systems, md-sys-color, primary), + label-text-font: map.get($systems, md-sys-typescale, label-large-font), + label-text-size: map.get($systems, md-sys-typescale, label-large-size), + label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking), + label-text-weight: map.get($systems, md-sys-typescale, label-large-weight), pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), - ), ( - // Color variants: + ); + + $variant-tokens: ( primary: (), // Default, no overrides needed. secondary: ( state-layer-color: map.get($systems, md-sys-color, secondary), ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, secondary), - $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) - ) + $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) + ), + label-text-color: map.get($systems, md-sys-color, secondary), ), tertiary: ( state-layer-color: map.get($systems, md-sys-color, tertiary), ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, tertiary), + map.get($systems, md-sys-color, tertiary), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) - ) + ), + label-text-color: map.get($systems, md-sys-color, tertiary), ), error: ( state-layer-color: map.get($systems, md-sys-color, error), ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, error), + map.get($systems, md-sys-color, error), $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) - ) + ), + label-text-color: map.get($systems, md-sys-color, error), ) - )); + ); - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mat/_tonal-button.scss b/src/material/core/tokens/m3/mat/_tonal-button.scss index 83fce272dd46..9cf60fa5fc3d 100644 --- a/src/material/core/tokens/m3/mat/_tonal-button.scss +++ b/src/material/core/tokens/m3/mat/_tonal-button.scss @@ -1,5 +1,4 @@ @use 'sass:map'; -@use 'sass:meta'; @use '../../../style/sass-utils'; @use '../../token-definition'; @@ -12,22 +11,31 @@ $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: values($systems, $exclude-hardcoded); - - $tokens: map.merge($mdc-tokens, ( - horizontal-padding: token-definition.hardcode(24px, $exclude-hardcoded), - icon-spacing: token-definition.hardcode(8px, $exclude-hardcoded), - icon-offset: token-definition.hardcode(-8px, $exclude-hardcoded), - state-layer-color: map.get($systems, md-sys-color, on-secondary-container), + $tokens: ( + container-color: map.get($systems, md-sys-color, secondary-container), + container-height: if($exclude-hardcoded, null, 40px), + container-shape: map.get($systems, md-sys-shape, corner-full), + disabled-container-color: + sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.12), + disabled-label-text-color: + sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.38), disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), - ripple-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, on-secondary-container), - $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity) - ), - hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), + horizontal-padding: token-definition.hardcode(24px, $exclude-hardcoded), + hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity), + icon-offset: token-definition.hardcode(-8px, $exclude-hardcoded), + icon-spacing: token-definition.hardcode(8px, $exclude-hardcoded), + label-text-color: map.get($systems, md-sys-color, on-secondary-container), + label-text-font: map.get($systems, md-sys-typescale, label-large-font), + label-text-size: map.get($systems, md-sys-typescale, label-large-size), + label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking), + label-text-weight: map.get($systems, md-sys-typescale, label-large-weight), pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity), - )); + ripple-color: sass-utils.safe-color-change( + map.get($systems, md-sys-color, on-secondary-container), + $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)), + state-layer-color: map.get($systems, md-sys-color, on-secondary-container), + ); $variant-tokens: ( // Color variants: @@ -35,17 +43,7 @@ $prefix: (mat, tonal-button); secondary: (), tertiary: ( container-color: map.get($systems, md-sys-color, tertiary-container), - focus-label-text-color: map.get($systems, md-sys-color, on-tertiary-container), - focus-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container), - hover-label-text-color: map.get($systems, md-sys-color, on-tertiary-container), - hover-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container), label-text-color: map.get($systems, md-sys-color, on-tertiary-container), - pressed-label-text-color: map.get($systems, md-sys-color, on-tertiary-container), - pressed-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container), - with-icon-focus-icon-color: map.get($systems, md-sys-color, on-tertiary-container), - with-icon-hover-icon-color: map.get($systems, md-sys-color, on-tertiary-container), - with-icon-icon-color: map.get($systems, md-sys-color, on-tertiary-container), - with-icon-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary-container), state-layer-color: map.get($systems, md-sys-color, on-tertiary-container), ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-tertiary-container), @@ -54,17 +52,7 @@ $prefix: (mat, tonal-button); ), error: ( container-color: map.get($systems, md-sys-color, error-container), - focus-label-text-color: map.get($systems, md-sys-color, on-error-container), - focus-state-layer-color: map.get($systems, md-sys-color, on-error-container), - hover-label-text-color: map.get($systems, md-sys-color, on-error-container), - hover-state-layer-color: map.get($systems, md-sys-color, on-error-container), label-text-color: map.get($systems, md-sys-color, on-error-container), - pressed-label-text-color: map.get($systems, md-sys-color, on-error-container), - pressed-state-layer-color: map.get($systems, md-sys-color, on-error-container), - with-icon-focus-icon-color: map.get($systems, md-sys-color, on-error-container), - with-icon-hover-icon-color: map.get($systems, md-sys-color, on-error-container), - with-icon-icon-color: map.get($systems, md-sys-color, on-error-container), - with-icon-pressed-icon-color: map.get($systems, md-sys-color, on-error-container), state-layer-color: map.get($systems, md-sys-color, on-error-container), ripple-color: sass-utils.safe-color-change( map.get($systems, md-sys-color, on-error-container), @@ -73,83 +61,5 @@ $prefix: (mat, tonal-button); ) ); - @return token-definition.namespace-tokens($prefix, ( - _fix-tokens($tokens), - token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens)) - ), $token-slots); -} - - -/// Fixes inconsistent values in the tonal button tokens so that they can produce valid styles. -/// @param {Map} $initial-tokens Map of tonal button tokens currently being generated. -/// @return {Map} The given tokens, with the invalid values replaced with valid ones. -@function _fix-tokens($initial-tokens) { - // Need to get the hardcoded values, because they include opacities that are used for the disabled - // state. - $hardcoded-tokens: values((), false); - - @return token-definition.combine-color-tokens($initial-tokens, $hardcoded-tokens, ( - ( - color: disabled-label-text-color, - opacity: disabled-label-text-opacity, - ), - ( - color: disabled-container-color, - opacity: disabled-container-opacity, - ) - )); -} - -@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) - ); + @return token-definition.namespace-tokens($prefix, ($tokens, $variant-tokens), $token-slots); } diff --git a/src/material/core/tokens/m3/mdc/_checkbox.scss b/src/material/core/tokens/m3/mdc/_checkbox.scss deleted file mode 100644 index f561bef82363..000000000000 --- a/src/material/core/tokens/m3/mdc/_checkbox.scss +++ /dev/null @@ -1,160 +0,0 @@ -@use 'sass:map'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, checkbox); - -/// Generates the tokens for MDC checkbox -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: values($systems, $exclude-hardcoded); - $variant-tokens: ( - primary: (), // Default, no overrides needed - secondary: ( - selected-container-color: map.get($systems, md-sys-color, secondary), - selected-focus-container-color: map.get($systems, md-sys-color, secondary), - selected-focus-icon-color: map.get($systems, md-sys-color, secondary), - selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary), - selected-hover-container-color: map.get($systems, md-sys-color, secondary), - selected-hover-icon-color: map.get($systems, md-sys-color, secondary), - selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary), - selected-icon-color: map.get($systems, md-sys-color, secondary), - selected-pressed-container-color: map.get($systems, md-sys-color, secondary), - selected-pressed-icon-color: map.get($systems, md-sys-color, secondary), - unselected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary), - selected-checkmark-color: map.get($systems, md-sys-color, on-secondary), - ), - tertiary: ( - selected-container-color: map.get($systems, md-sys-color, tertiary), - selected-focus-container-color: map.get($systems, md-sys-color, tertiary), - selected-focus-icon-color: map.get($systems, md-sys-color, tertiary), - selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary), - selected-hover-container-color: map.get($systems, md-sys-color, tertiary), - selected-hover-icon-color: map.get($systems, md-sys-color, tertiary), - selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary), - selected-icon-color: map.get($systems, md-sys-color, tertiary), - selected-pressed-container-color: map.get($systems, md-sys-color, tertiary), - selected-pressed-icon-color: map.get($systems, md-sys-color, tertiary), - unselected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary), - selected-checkmark-color: map.get($systems, md-sys-color, on-tertiary), - ), - error: ( - selected-container-color: map.get($systems, md-sys-color, error), - selected-focus-container-color: map.get($systems, md-sys-color, error), - selected-focus-icon-color: map.get($systems, md-sys-color, error), - selected-focus-state-layer-color: map.get($systems, md-sys-color, error), - selected-hover-container-color: map.get($systems, md-sys-color, error), - selected-hover-icon-color: map.get($systems, md-sys-color, error), - selected-hover-state-layer-color: map.get($systems, md-sys-color, error), - selected-icon-color: map.get($systems, md-sys-color, error), - selected-pressed-container-color: map.get($systems, md-sys-color, error), - selected-pressed-icon-color: map.get($systems, md-sys-color, error), - unselected-pressed-state-layer-color: map.get($systems, md-sys-color, error), - selected-checkmark-color: map.get($systems, md-sys-color, on-error), - ) - ); - - @return token-definition.namespace-tokens( - $prefix, - ( - $mdc-tokens, - $variant-tokens - ), - $token-slots - ); -} - -@function values($deps, $exclude-hardcoded-values: false) { - $values: ( - 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), - disabled-selected-icon-opacity: 0.38, - 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, 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, 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, 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, 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), - disabled-unselected-icon-opacity: 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), - selected-checkmark-color: map.get($deps, md-sys-color, on-primary), - disabled-selected-checkmark-color: map.get($deps, md-sys-color, surface), - disabled-selected-icon-color: map.get($deps, md-sys-color, on-surface), - disabled-unselected-icon-color: map.get($deps, md-sys-color, on-surface), - unselected-focus-icon-color: map.get($deps, md-sys-color, on-surface), - unselected-hover-icon-color: map.get($deps, md-sys-color, on-surface), - unselected-icon-color: map.get($deps, md-sys-color, on-surface-variant), - unselected-pressed-icon-color: map.get($deps, md-sys-color, on-surface), - ); - - $values: token-definition.combine-color-tokens( - $values, $values, ( - ( - color: disabled-selected-icon-color, - opacity: disabled-selected-icon-opacity, - ), - ( - color: disabled-unselected-icon-color, - opacity: disabled-unselected-icon-opacity, - ), - )); - - @return $values; -} diff --git a/src/material/core/tokens/m3/mdc/_chip.scss b/src/material/core/tokens/m3/mdc/_chip.scss deleted file mode 100644 index 83a2251dba87..000000000000 --- a/src/material/core/tokens/m3/mdc/_chip.scss +++ /dev/null @@ -1,92 +0,0 @@ -@use 'sass:map'; -@use '../../../style/sass-utils'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, chip); - -/// Generates the tokens for MDC chip -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @param {Map} $token-slots Possible token slots -/// @return {Map} A set of tokens for the MDC chip -@function get-tokens($systems, $exclude-hardcoded, $token-slots) { - // MDC has a chip component, but they seem to have made up the tokens rather than using ones - // generated from the token database, therefore we need a custom token function for it. - $tokens: sass-utils.merge-all( - token-definition.generate-typography-tokens($systems, label-text, label-large), - ( - container-shape-radius: token-definition.hardcode(8px, $exclude-hardcoded), - with-avatar-avatar-size: token-definition.hardcode(24px, $exclude-hardcoded), - with-avatar-avatar-shape-radius: token-definition.hardcode(24px, $exclude-hardcoded), - label-text-color: map.get($systems, md-sys-color, on-surface-variant), - disabled-label-text-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, on-surface), - $alpha: 0.38, - ), - with-icon-icon-size: token-definition.hardcode(18px, $exclude-hardcoded), - with-icon-icon-color: map.get($systems, md-sys-color, on-surface-variant), - with-icon-disabled-icon-color: map.get($systems, md-sys-color, on-surface), - with-icon-selected-icon-color: map.get($systems, md-sys-color, on-secondary-container), - with-trailing-icon-trailing-icon-color: map.get($systems, md-sys-color, on-surface-variant), - with-trailing-icon-disabled-trailing-icon-color: map.get($systems, md-sys-color, on-surface), - focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity), - focus-state-layer-color: map.get($systems, md-sys-color, on-surface-variant), - outline-width: token-definition.hardcode(1px, $exclude-hardcoded), - outline-color: map.get($systems, md-sys-color, outline), - disabled-outline-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, on-surface), - $alpha: 0.12, - ), - 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), - 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 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), - selected-label-text-color: map.get($systems, md-sys-color, on-secondary-container), - flat-disabled-selected-container-color: sass-utils.safe-color-change( - map.get($systems, md-sys-color, on-surface), - $alpha: 0.12, - ), - 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), - 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), - 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), - ), - ), ( - // Color variants: - primary: ( - with-icon-selected-icon-color: map.get($systems, md-sys-color, on-primary-container), - elevated-selected-container-color: map.get($systems, md-sys-color, primary-container), - selected-label-text-color: map.get($systems, md-sys-color, on-primary-container), - selected-hover-state-layer-color: map.get($systems, md-sys-color, on-primary-container), - selected-focus-state-layer-color: map.get($systems, md-sys-color, on-primary-container), - ), - secondary: (), // Default, no overrides needed. - tertiary: ( - with-icon-selected-icon-color: map.get($systems, md-sys-color, on-tertiary-container), - elevated-selected-container-color: map.get($systems, md-sys-color, tertiary-container), - selected-label-text-color: map.get($systems, md-sys-color, on-tertiary-container), - selected-hover-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container), - selected-focus-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container), - ), - error: ( - with-icon-selected-icon-color: map.get($systems, md-sys-color, on-error-container), - elevated-selected-container-color: map.get($systems, md-sys-color, error-container), - selected-label-text-color: map.get($systems, md-sys-color, on-error-container), - selected-hover-state-layer-color: map.get($systems, md-sys-color, on-error-container), - selected-focus-state-layer-color: map.get($systems, md-sys-color, on-error-container), - ) - ); - - @return token-definition.namespace-tokens($prefix, $tokens, $token-slots); -} diff --git a/src/material/core/tokens/m3/mdc/_dialog.scss b/src/material/core/tokens/m3/mdc/_dialog.scss deleted file mode 100644 index bb59796f0053..000000000000 --- a/src/material/core/tokens/m3/mdc/_dialog.scss +++ /dev/null @@ -1,101 +0,0 @@ -@use '../../token-definition'; -@use 'sass:map'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, dialog); - -/// Generates the tokens for MDC dialog -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: values($systems, $exclude-hardcoded); - $tokens: token-definition.rename-map-keys($tokens, ( - headline-color: subhead-color, - headline-font: subhead-font, - headline-line-height: subhead-line-height, - headline-size: subhead-size, - headline-tracking: subhead-tracking, - headline-weight: subhead-weight, - )); - - @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 deleted file mode 100644 index ce1b95db8a46..000000000000 --- a/src/material/core/tokens/m3/mdc/_elevated-card.scss +++ /dev/null @@ -1,51 +0,0 @@ -@use 'sass:map'; -@use '../../../style/elevation'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, elevated-card); - -/// Generates the tokens for MDC elevated-card -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: values($systems, $exclude-hardcoded); - $elevation: map.get($tokens, container-elevation); - - @if ($elevation != null) { - $tokens: map.set($tokens, container-elevation, elevation.get-box-shadow($elevation)); - } - - @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 deleted file mode 100644 index c2f97e9228b8..000000000000 --- a/src/material/core/tokens/m3/mdc/_extended-fab.scss +++ /dev/null @@ -1,189 +0,0 @@ -@use 'sass:map'; -@use '../../../style/elevation'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, extended-fab); - -/// Generates the tokens for MDC extended-fab -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: primary-values($systems, $exclude-hardcoded); - $elevation-tokens: ( - container-elevation, - focus-container-elevation, - hover-container-elevation, - pressed-container-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)); - } - } - - $variant-tokens: ( - // Color variants - primary: (), // Default, no overrides needed. - 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 deleted file mode 100644 index 546727a02161..000000000000 --- a/src/material/core/tokens/m3/mdc/_fab-small.scss +++ /dev/null @@ -1,126 +0,0 @@ -@use 'sass:map'; -@use '../../../style/elevation'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, fab-small); - -/// Generates the tokens for MDC fab-small -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: primary-values($systems, $exclude-hardcoded); - $elevation-tokens: ( - container-elevation, - focus-container-elevation, - hover-container-elevation, - pressed-container-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)); - } - } - - $variant-tokens: ( - // Color variants - primary: (), // Default, no overrides needed. - 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 deleted file mode 100644 index b8508a48a1b8..000000000000 --- a/src/material/core/tokens/m3/mdc/_fab.scss +++ /dev/null @@ -1,126 +0,0 @@ -@use 'sass:map'; -@use '../../../style/elevation'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, fab); - -/// Generates the tokens for MDC fab -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: primary-values($systems, $exclude-hardcoded); - $elevation-tokens: ( - container-elevation, - focus-container-elevation, - hover-container-elevation, - pressed-container-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)); - } - } - - $variant-tokens: ( - // Color variants - primary: (), // Default, no overrides needed. - 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 deleted file mode 100644 index 25bcaf693116..000000000000 --- a/src/material/core/tokens/m3/mdc/_filled-button.scss +++ /dev/null @@ -1,139 +0,0 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, filled-button); - -/// Generates the tokens for MDC filled-button -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: values($systems, $exclude-hardcoded); - $variant-tokens: ( - primary: (), // Default, no overrides needed. - secondary: ( - container-color: map.get($systems, md-sys-color, secondary), - focus-label-text-color: map.get($systems, md-sys-color, on-secondary), - focus-state-layer-color: map.get($systems, md-sys-color, on-secondary), - hover-label-text-color: map.get($systems, md-sys-color, on-secondary), - hover-state-layer-color: map.get($systems, md-sys-color, on-secondary), - label-text-color: map.get($systems, md-sys-color, on-secondary), - pressed-label-text-color: map.get($systems, md-sys-color, on-secondary), - pressed-state-layer-color: map.get($systems, md-sys-color, on-secondary), - with-icon-focus-icon-color: map.get($systems, md-sys-color, on-secondary), - with-icon-hover-icon-color: map.get($systems, md-sys-color, on-secondary), - with-icon-icon-color: map.get($systems, md-sys-color, on-secondary), - with-icon-pressed-icon-color: map.get($systems, md-sys-color, on-secondary) - ), - tertiary: ( - container-color: map.get($systems, md-sys-color, tertiary), - focus-label-text-color: map.get($systems, md-sys-color, on-tertiary), - focus-state-layer-color: map.get($systems, md-sys-color, on-tertiary), - hover-label-text-color: map.get($systems, md-sys-color, on-tertiary), - hover-state-layer-color: map.get($systems, md-sys-color, on-tertiary), - label-text-color: map.get($systems, md-sys-color, on-tertiary), - pressed-label-text-color: map.get($systems, md-sys-color, on-tertiary), - pressed-state-layer-color: map.get($systems, md-sys-color, on-tertiary), - with-icon-focus-icon-color: map.get($systems, md-sys-color, on-tertiary), - with-icon-hover-icon-color: map.get($systems, md-sys-color, on-tertiary), - with-icon-icon-color: map.get($systems, md-sys-color, on-tertiary), - with-icon-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary) - ), - error: ( - container-color: map.get($systems, md-sys-color, error), - focus-label-text-color: map.get($systems, md-sys-color, on-error), - focus-state-layer-color: map.get($systems, md-sys-color, on-error), - hover-label-text-color: map.get($systems, md-sys-color, on-error), - hover-state-layer-color: map.get($systems, md-sys-color, on-error), - label-text-color: map.get($systems, md-sys-color, on-error), - pressed-label-text-color: map.get($systems, md-sys-color, on-error), - pressed-state-layer-color: map.get($systems, md-sys-color, on-error), - with-icon-focus-icon-color: map.get($systems, md-sys-color, on-error), - with-icon-hover-icon-color: map.get($systems, md-sys-color, on-error), - with-icon-icon-color: map.get($systems, md-sys-color, on-error), - with-icon-pressed-icon-color: map.get($systems, md-sys-color, on-error) - ) - ); - - @return token-definition.namespace-tokens($prefix, ( - _fix-tokens($mdc-tokens), - token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens)) - ), $token-slots); -} - - -/// Fixes inconsistent values in the filled button tokens so that they can produce valid styles. -/// @param {Map} $initial-tokens Map of filled button tokens currently being generated. -/// @return {Map} The given tokens, with the invalid values replaced with valid ones. -@function _fix-tokens($initial-tokens) { - // Need to get the hardcoded values, because they include opacities that are used for the disabled - // state. - $hardcoded-tokens: values((), false); - - @return token-definition.combine-color-tokens($initial-tokens, $hardcoded-tokens, ( - ( - color: disabled-label-text-color, - opacity: disabled-label-text-opacity, - ), - ( - color: disabled-container-color, - opacity: disabled-container-opacity, - ) - )); -} - -@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 deleted file mode 100644 index 99c15efd3adf..000000000000 --- a/src/material/core/tokens/m3/mdc/_filled-text-field.scss +++ /dev/null @@ -1,218 +0,0 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, filled-text-field); - -/// Generates the tokens for MDC filled-text-field -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: values($systems, $exclude-hardcoded); - $variant-tokens: ( - primary: (), // Default, no overrides needed - secondary: ( - caret-color: map.get($systems, md-sys-color, secondary), - focus-active-indicator-color: map.get($systems, md-sys-color, secondary), - focus-label-text-color: map.get($systems, md-sys-color, secondary), - ), - tertiary: ( - caret-color: map.get($systems, md-sys-color, tertiary), - focus-active-indicator-color: map.get($systems, md-sys-color, tertiary), - focus-label-text-color: map.get($systems, md-sys-color, tertiary), - ), - error: ( - caret-color: map.get($systems, md-sys-color, error), - focus-active-indicator-color: map.get($systems, md-sys-color, error), - focus-label-text-color: map.get($systems, md-sys-color, error), - ), - ); - - @return token-definition.namespace-tokens($prefix, ( - _fix-tokens($mdc-tokens, $systems), - token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens), $systems) - ), $token-slots); -} - - -/// Fixes inconsistent values in the filled text field tokens so that they can produce valid -/// styles. -/// @param {Map} $initial-tokens Map of filled text field tokens currently being generated. -/// @param {Map} $systems The MDC system tokens -/// @return {Map} The given tokens, with the invalid values replaced with valid ones. -@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: values((), false); - - $tokens: token-definition.combine-color-tokens($initial-tokens, $hardcoded-tokens, ( - ( - color: disabled-active-indicator-color, - opacity: disabled-active-indicator-opacity - ), - ( - color: disabled-container-color, - opacity: disabled-container-opacity - ), - ( - color: disabled-input-text-color, - opacity: disabled-input-text-opacity - ), - ( - color: disabled-label-text-color, - opacity: disabled-label-text-opacity - ), - ( - color: disabled-leading-icon-color, - opacity: disabled-leading-icon-opacity - ), - ( - color: disabled-supporting-text-color, - opacity: disabled-supporting-text-opacity - ), - ( - color: disabled-trailing-icon-color, - opacity: disabled-trailing-icon-opacity - ) - )); - - // The system tokens have this set as `corner-extra-small-top` which assumes that the value will - // be set as a `border-radius`, however we set it as `border-top-left-radius` and - // `border-top-right-radius`. Changing it at this point will be breaking so instead we remap it. - @if (map.get($tokens, container-shape)) { - $tokens: map.set($tokens, container-shape, map.get($systems, md-sys-shape, corner-extra-small)); - } - - @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 deleted file mode 100644 index 01b871a6bff8..000000000000 --- a/src/material/core/tokens/m3/mdc/_icon-button.scss +++ /dev/null @@ -1,90 +0,0 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, icon-button); - -/// Generates the tokens for MDC icon-button -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: values($systems, $exclude-hardcoded); - $variant-tokens: ( - primary: ( - icon-color: map.get($systems, md-sys-color, primary) - ), - secondary: ( - icon-color: map.get($systems, md-sys-color, secondary) - ), - tertiary: ( - icon-color: map.get($systems, md-sys-color, tertiary) - ), - error: ( - icon-color: map.get($systems, md-sys-color, error) - ) - ); - - @return token-definition.namespace-tokens($prefix, ( - _fix-tokens($tokens), - token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens)) - ), $token-slots); -} - -/// Fixes inconsistent values in the icon button tokens so that they can produce valid styles. -/// @param {Map} $initial-tokens Map of icon button tokens currently being generated. -/// @param {Map} $all-tokens Map of all icon button tokens, including hardcoded values. -/// @return {Map} The given tokens, with the invalid values replaced with valid ones. -@function _fix-tokens($tokens) { - // Need to get the hardcoded values, because they include opacities that are used for the disabled - // state. - $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); - - @return token-definition.combine-color-tokens( - $remapped-tokens, $remapped-hardcoded-tokens, ( - ( - color: disabled-icon-color, - opacity: disabled-icon-opacity, - ), - )); -} - -@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/_list.scss b/src/material/core/tokens/m3/mdc/_list.scss deleted file mode 100644 index 588aeb7e0847..000000000000 --- a/src/material/core/tokens/m3/mdc/_list.scss +++ /dev/null @@ -1,195 +0,0 @@ -@use 'sass:map'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, list); - -/// Generates the tokens for MDC list -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: values($systems, $exclude-hardcoded); - - @return token-definition.namespace-tokens($prefix, _fix-tokens($mdc-tokens), $token-slots); -} - -/// Fixes values in the list tokens that are inconsistent with its usage. -/// @param {Map} $initial-tokens Map of list tokens currently being generated. -/// @return {Map} The given tokens, with the inconsistent values replaced with valid ones. -@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 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); - } - - // Match spec, which has list-item-leading-icon-size of 24px. - // Current version of tokens (0_161) has 18px. - @if map.get($tokens, list-item-leading-icon-size) != null { - $tokens: map.set($tokens, list-item-leading-icon-size, 24px); - } - - @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 deleted file mode 100644 index 5317b6368dd8..000000000000 --- a/src/material/core/tokens/m3/mdc/_outlined-button.scss +++ /dev/null @@ -1,134 +0,0 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, outlined-button); - -/// Generates the tokens for MDC outlined-button -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: values($systems, $exclude-hardcoded); - $variant-tokens: ( - primary: (), // Default, no overrides needed. - secondary: ( - focus-label-text-color: map.get($systems, md-sys-color, secondary), - focus-outline-color: map.get($systems, md-sys-color, secondary), - focus-state-layer-color: map.get($systems, md-sys-color, secondary), - hover-label-text-color: map.get($systems, md-sys-color, secondary), - hover-state-layer-color: map.get($systems, md-sys-color, secondary), - label-text-color: map.get($systems, md-sys-color, secondary), - pressed-label-text-color: map.get($systems, md-sys-color, secondary), - pressed-state-layer-color: map.get($systems, md-sys-color, secondary), - with-icon-focus-icon-color: map.get($systems, md-sys-color, secondary), - with-icon-hover-icon-color: map.get($systems, md-sys-color, secondary), - with-icon-icon-color: map.get($systems, md-sys-color, secondary), - with-icon-pressed-icon-color: map.get($systems, md-sys-color, secondary) - ), - tertiary: ( - focus-label-text-color: map.get($systems, md-sys-color, tertiary), - focus-outline-color: map.get($systems, md-sys-color, tertiary), - focus-state-layer-color: map.get($systems, md-sys-color, tertiary), - hover-label-text-color: map.get($systems, md-sys-color, tertiary), - hover-state-layer-color: map.get($systems, md-sys-color, tertiary), - label-text-color: map.get($systems, md-sys-color, tertiary), - pressed-label-text-color: map.get($systems, md-sys-color, tertiary), - pressed-state-layer-color: map.get($systems, md-sys-color, tertiary), - with-icon-focus-icon-color: map.get($systems, md-sys-color, tertiary), - with-icon-hover-icon-color: map.get($systems, md-sys-color, tertiary), - with-icon-icon-color: map.get($systems, md-sys-color, tertiary), - with-icon-pressed-icon-color: map.get($systems, md-sys-color, tertiary) - ), - error: ( - focus-label-text-color: map.get($systems, md-sys-color, error), - focus-outline-color: map.get($systems, md-sys-color, error), - focus-state-layer-color: map.get($systems, md-sys-color, error), - hover-label-text-color: map.get($systems, md-sys-color, error), - hover-state-layer-color: map.get($systems, md-sys-color, error), - label-text-color: map.get($systems, md-sys-color, error), - pressed-label-text-color: map.get($systems, md-sys-color, error), - pressed-state-layer-color: map.get($systems, md-sys-color, error), - with-icon-focus-icon-color: map.get($systems, md-sys-color, error), - with-icon-hover-icon-color: map.get($systems, md-sys-color, error), - with-icon-icon-color: map.get($systems, md-sys-color, error), - with-icon-pressed-icon-color: map.get($systems, md-sys-color, error) - ) - ); - - @return token-definition.namespace-tokens($prefix, ( - _fix-tokens($mdc-tokens), - token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens)) - ), $token-slots); -} - -/// Fixes inconsistent values in the outlined button tokens so that they can produce valid styles. -/// @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: values((), false); - - @return token-definition.combine-color-tokens($initial-tokens, $hardcoded-tokens, ( - ( - color: disabled-label-text-color, - opacity: disabled-label-text-opacity, - ), - ( - color: disabled-outline-color, - opacity: disabled-outline-opacity, - ) - )); -} - -@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 deleted file mode 100644 index 6d33898cf93e..000000000000 --- a/src/material/core/tokens/m3/mdc/_outlined-card.scss +++ /dev/null @@ -1,55 +0,0 @@ -@use 'sass:map'; -@use '../../../style/elevation'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, outlined-card); - -/// Generates the tokens for MDC outlined-card -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: values($systems, $exclude-hardcoded); - $elevation: map.get($tokens, container-elevation); - - @if ($elevation != null) { - $tokens: map.set($tokens, container-elevation, elevation.get-box-shadow($elevation)); - } - - @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 deleted file mode 100644 index bc9b309624db..000000000000 --- a/src/material/core/tokens/m3/mdc/_outlined-text-field.scss +++ /dev/null @@ -1,206 +0,0 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, outlined-text-field); - -/// Generates the tokens for MDC outlined-text-field -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: values($systems, $exclude-hardcoded); - $variant-tokens: ( - primary: (), // Default, no overrides needed - secondary: ( - caret-color: map.get($systems, md-sys-color, secondary), - focus-label-text-color: map.get($systems, md-sys-color, secondary), - focus-outline-color: map.get($systems, md-sys-color, secondary), - ), - tertiary: ( - caret-color: map.get($systems, md-sys-color, tertiary), - focus-label-text-color: map.get($systems, md-sys-color, tertiary), - focus-outline-color: map.get($systems, md-sys-color, tertiary), - ), - error: ( - caret-color: map.get($systems, md-sys-color, error), - focus-label-text-color: map.get($systems, md-sys-color, error), - focus-outline-color: map.get($systems, md-sys-color, error), - ), - ); - - @return token-definition.namespace-tokens($prefix, ( - _fix-tokens($mdc-tokens), - token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens)) - ), $token-slots); -} - -/// Fixes inconsistent values in the outlined text field tokens so that they can produce valid -/// styles. -/// @param {Map} $initial-tokens Map of outlined text field tokens currently being generated. -/// @param {Map} $all-tokens Map of all outlined text field tokens, including hardcoded values. -/// This is necessary in order to do opacity lookups. -/// @return {Map} The given tokens, with the invalid values replaced with valid ones. -@function _fix-tokens($initial-tokens) { - // Need to get the hardcoded values, because they include opacities that are used for the disabled - // state. - $hardcoded-tokens: values((), false); - - @return token-definition.combine-color-tokens($initial-tokens, $hardcoded-tokens, ( - ( - color: disabled-outline-color, - opacity: disabled-outline-opacity - ), - ( - color: disabled-active-indicator-color, - opacity: disabled-active-indicator-opacity - ), - ( - color: disabled-container-color, - opacity: disabled-container-opacity - ), - ( - color: disabled-input-text-color, - opacity: disabled-input-text-opacity - ), - ( - color: disabled-label-text-color, - opacity: disabled-label-text-opacity - ), - ( - color: disabled-leading-icon-color, - opacity: disabled-leading-icon-opacity - ), - ( - color: disabled-supporting-text-color, - opacity: disabled-supporting-text-opacity - ), - ( - color: disabled-trailing-icon-color, - opacity: disabled-trailing-icon-opacity - ) - )); -} - -@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 deleted file mode 100644 index f7a2584534dd..000000000000 --- a/src/material/core/tokens/m3/mdc/_plain-tooltip.scss +++ /dev/null @@ -1,42 +0,0 @@ -@use '../../token-definition'; -@use 'sass:map'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, plain-tooltip); - -/// Generates the tokens for MDC plain-tooltip -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: 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 deleted file mode 100644 index 83137db1c315..000000000000 --- a/src/material/core/tokens/m3/mdc/_protected-button.scss +++ /dev/null @@ -1,155 +0,0 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use '../../../style/elevation'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, protected-button); - -/// Generates the tokens for MDC protected-button -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @param {Map} $token-slots Possible token slots -/// @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: values($systems, $exclude-hardcoded); - $variant-tokens: ( - primary: (), // Default, no overrides needed. - secondary: ( - focus-label-text-color: map.get($systems, md-sys-color, secondary), - focus-state-layer-color: map.get($systems, md-sys-color, secondary), - hover-label-text-color: map.get($systems, md-sys-color, secondary), - hover-state-layer-color: map.get($systems, md-sys-color, secondary), - label-text-color: map.get($systems, md-sys-color, secondary), - pressed-label-text-color: map.get($systems, md-sys-color, secondary), - pressed-state-layer-color: map.get($systems, md-sys-color, secondary), - with-icon-focus-icon-color: map.get($systems, md-sys-color, secondary), - with-icon-hover-icon-color: map.get($systems, md-sys-color, secondary), - with-icon-icon-color: map.get($systems, md-sys-color, secondary), - with-icon-pressed-icon-color: map.get($systems, md-sys-color, secondary) - ), - tertiary: ( - focus-label-text-color: map.get($systems, md-sys-color, tertiary), - focus-state-layer-color: map.get($systems, md-sys-color, tertiary), - hover-label-text-color: map.get($systems, md-sys-color, tertiary), - hover-state-layer-color: map.get($systems, md-sys-color, tertiary), - label-text-color: map.get($systems, md-sys-color, tertiary), - pressed-label-text-color: map.get($systems, md-sys-color, tertiary), - pressed-state-layer-color: map.get($systems, md-sys-color, tertiary), - with-icon-focus-icon-color: map.get($systems, md-sys-color, tertiary), - with-icon-hover-icon-color: map.get($systems, md-sys-color, tertiary), - with-icon-icon-color: map.get($systems, md-sys-color, tertiary), - with-icon-pressed-icon-color: map.get($systems, md-sys-color, tertiary) - ), - error: ( - focus-label-text-color: map.get($systems, md-sys-color, error), - focus-state-layer-color: map.get($systems, md-sys-color, error), - hover-label-text-color: map.get($systems, md-sys-color, error), - hover-state-layer-color: map.get($systems, md-sys-color, error), - label-text-color: map.get($systems, md-sys-color, error), - pressed-label-text-color: map.get($systems, md-sys-color, error), - pressed-state-layer-color: map.get($systems, md-sys-color, error), - with-icon-focus-icon-color: map.get($systems, md-sys-color, error), - with-icon-hover-icon-color: map.get($systems, md-sys-color, error), - with-icon-icon-color: map.get($systems, md-sys-color, error), - with-icon-pressed-icon-color: map.get($systems, md-sys-color, error) - ) - ); - - @return token-definition.namespace-tokens($prefix, ( - _fix-tokens($tokens), - token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens)), - ), $token-slots); -} - - -/// Fixes inconsistent values in the protected button tokens so that they can produce valid styles. -/// @param {Map} $initial-tokens Map of protected button tokens currently being generated. -/// @return {Map} The given tokens, with the invalid values replaced with valid ones. -@function _fix-tokens($initial-tokens) { - // Need to get the hardcoded values, because they include - // opacities that are used for the disabled state. - $hardcoded-tokens: values((), false); - $tokens: $initial-tokens; - $elevation-tokens: ( - container-elevation, - disabled-container-elevation, - focus-container-elevation, - hover-container-elevation, - pressed-container-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)); - } - } - - @return token-definition.combine-color-tokens($tokens, $hardcoded-tokens, ( - ( - color: disabled-label-text-color, - opacity: disabled-label-text-opacity, - ), - ( - color: disabled-container-color, - opacity: disabled-container-opacity, - ) - )); -} - -@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 deleted file mode 100644 index 6552285a1de9..000000000000 --- a/src/material/core/tokens/m3/mdc/_radio.scss +++ /dev/null @@ -1,79 +0,0 @@ -@use 'sass:map'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, radio); - -/// Generates the tokens for MDC radio -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: values($systems, $exclude-hardcoded); - $variant-tokens: ( - primary: (), // Default, no overrides needed - secondary: ( - selected-focus-icon-color: map.get($systems, md-sys-color, secondary), - selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary), - selected-hover-icon-color: map.get($systems, md-sys-color, secondary), - selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary), - selected-icon-color: map.get($systems, md-sys-color, secondary), - selected-pressed-icon-color: map.get($systems, md-sys-color, secondary), - unselected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary), - ), - tertiary: ( - selected-focus-icon-color: map.get($systems, md-sys-color, tertiary), - selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary), - selected-hover-icon-color: map.get($systems, md-sys-color, tertiary), - selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary), - selected-icon-color: map.get($systems, md-sys-color, tertiary), - selected-pressed-icon-color: map.get($systems, md-sys-color, tertiary), - unselected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary), - ), - error: ( - selected-focus-icon-color: map.get($systems, md-sys-color, error), - selected-focus-state-layer-color: map.get($systems, md-sys-color, error), - selected-hover-icon-color: map.get($systems, md-sys-color, error), - selected-hover-state-layer-color: map.get($systems, md-sys-color, error), - selected-icon-color: map.get($systems, md-sys-color, error), - selected-pressed-icon-color: map.get($systems, md-sys-color, error), - unselected-pressed-state-layer-color: map.get($systems, md-sys-color, error), - ), - ); - - @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 deleted file mode 100644 index 21af0d67b14a..000000000000 --- a/src/material/core/tokens/m3/mdc/_secondary-navigation-tab.scss +++ /dev/null @@ -1,63 +0,0 @@ -@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); - -/// Generates the tokens for MDC tab -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: 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 deleted file mode 100644 index 01b353961dff..000000000000 --- a/src/material/core/tokens/m3/mdc/_slider.scss +++ /dev/null @@ -1,126 +0,0 @@ -@use 'sass:map'; -@use '../../../style/elevation'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, slider); - -/// Generates the tokens for MDC slider -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: 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)); - } - - $variant-tokens: ( - primary: (), // Default, no overrides needed - secondary: ( - active-track-color: map.get($systems, md-sys-color, secondary), - focus-handle-color: map.get($systems, md-sys-color, secondary), - handle-color: map.get($systems, md-sys-color, secondary), - hover-handle-color: map.get($systems, md-sys-color, secondary), - label-container-color: map.get($systems, md-sys-color, secondary), - label-label-text-color: map.get($systems, md-sys-color, on-secondary), - pressed-handle-color: map.get($systems, md-sys-color, secondary), - pressed-state-layer-color: map.get($systems, md-sys-color, secondary), - with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-secondary), - with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-secondary), - ), - tertiary: ( - active-track-color: map.get($systems, md-sys-color, tertiary), - focus-handle-color: map.get($systems, md-sys-color, tertiary), - handle-color: map.get($systems, md-sys-color, tertiary), - hover-handle-color: map.get($systems, md-sys-color, tertiary), - label-container-color: map.get($systems, md-sys-color, tertiary), - label-label-text-color: map.get($systems, md-sys-color, on-tertiary), - pressed-handle-color: map.get($systems, md-sys-color, tertiary), - pressed-state-layer-color: map.get($systems, md-sys-color, tertiary), - with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-tertiary), - with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-tertiary), - ), - error: ( - active-track-color: map.get($systems, md-sys-color, error), - focus-handle-color: map.get($systems, md-sys-color, error), - handle-color: map.get($systems, md-sys-color, error), - hover-handle-color: map.get($systems, md-sys-color, error), - label-container-color: map.get($systems, md-sys-color, error), - label-label-text-color: map.get($systems, md-sys-color, on-error), - pressed-handle-color: map.get($systems, md-sys-color, error), - pressed-state-layer-color: map.get($systems, md-sys-color, error), - with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-error), - with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-error), - ), - ); - - @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), - 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), - 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 deleted file mode 100644 index ba1f0db37dc6..000000000000 --- a/src/material/core/tokens/m3/mdc/_snack-bar.scss +++ /dev/null @@ -1,85 +0,0 @@ -@use '../../token-definition'; -@use 'sass:map'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, snack-bar); - -/// Generates the tokens for MDC snackbar -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: 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 deleted file mode 100644 index 2ac3f62a3729..000000000000 --- a/src/material/core/tokens/m3/mdc/_switch.scss +++ /dev/null @@ -1,157 +0,0 @@ -@use 'sass:map'; -@use '../../../style/elevation'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, switch); - -/// Generates the tokens for MDC switch -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: 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)); - } - } - - $variant-tokens: ( - primary: (), // Default, no overrides needed - secondary: ( - selected-focus-handle-color: map.get($systems, md-sys-color, secondary-container), - selected-focus-icon-color: map.get($systems, md-sys-color, on-secondary-container), - selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary), - selected-focus-track-color: map.get($systems, md-sys-color, secondary), - selected-handle-color: map.get($systems, md-sys-color, on-secondary), - selected-hover-handle-color: map.get($systems, md-sys-color, secondary-container), - selected-hover-icon-color: map.get($systems, md-sys-color, on-secondary-container), - selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary), - selected-hover-track-color: map.get($systems, md-sys-color, secondary), - selected-icon-color: map.get($systems, md-sys-color, on-secondary-container), - selected-pressed-handle-color: map.get($systems, md-sys-color, secondary-container), - selected-pressed-icon-color: map.get($systems, md-sys-color, on-secondary-container), - selected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary), - selected-pressed-track-color: map.get($systems, md-sys-color, secondary), - selected-track-color: map.get($systems, md-sys-color, secondary), - ), - tertiary: ( - selected-focus-handle-color: map.get($systems, md-sys-color, tertiary-container), - selected-focus-icon-color: map.get($systems, md-sys-color, on-tertiary-container), - selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary), - selected-focus-track-color: map.get($systems, md-sys-color, tertiary), - selected-handle-color: map.get($systems, md-sys-color, on-tertiary), - selected-hover-handle-color: map.get($systems, md-sys-color, tertiary-container), - selected-hover-icon-color: map.get($systems, md-sys-color, on-tertiary-container), - selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary), - selected-hover-track-color: map.get($systems, md-sys-color, tertiary), - selected-icon-color: map.get($systems, md-sys-color, on-tertiary-container), - selected-pressed-handle-color: map.get($systems, md-sys-color, tertiary-container), - selected-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary-container), - selected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary), - selected-pressed-track-color: map.get($systems, md-sys-color, tertiary), - selected-track-color: map.get($systems, md-sys-color, tertiary), - ), - error: ( - selected-focus-handle-color: map.get($systems, md-sys-color, error-container), - selected-focus-icon-color: map.get($systems, md-sys-color, on-error-container), - selected-focus-state-layer-color: map.get($systems, md-sys-color, error), - selected-focus-track-color: map.get($systems, md-sys-color, error), - selected-handle-color: map.get($systems, md-sys-color, on-error), - selected-hover-handle-color: map.get($systems, md-sys-color, error-container), - selected-hover-icon-color: map.get($systems, md-sys-color, on-error-container), - selected-hover-state-layer-color: map.get($systems, md-sys-color, error), - selected-hover-track-color: map.get($systems, md-sys-color, error), - selected-icon-color: map.get($systems, md-sys-color, on-error-container), - selected-pressed-handle-color: map.get($systems, md-sys-color, error-container), - selected-pressed-icon-color: map.get($systems, md-sys-color, on-error-container), - selected-pressed-state-layer-color: map.get($systems, md-sys-color, error), - selected-pressed-track-color: map.get($systems, md-sys-color, error), - selected-track-color: map.get($systems, md-sys-color, error), - ), - ); - - @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 deleted file mode 100644 index cb2f36610c51..000000000000 --- a/src/material/core/tokens/m3/mdc/_text-button.scss +++ /dev/null @@ -1,123 +0,0 @@ -@use 'sass:map'; -@use 'sass:meta'; -@use '../../token-definition'; - -// The prefix used to generate the fully qualified name for tokens in this file. -$prefix: (mat, text-button); - -/// Generates the tokens for MDC text-button -/// @param {Map} $systems The MDC system tokens -/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values -/// @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: values($systems, $exclude-hardcoded); - $variant-tokens: ( - primary: (), // Default, no overrides needed. - secondary: ( - focus-label-text-color: map.get($systems, md-sys-color, secondary), - focus-state-layer-color: map.get($systems, md-sys-color, secondary), - hover-label-text-color: map.get($systems, md-sys-color, secondary), - hover-state-layer-color: map.get($systems, md-sys-color, secondary), - label-text-color: map.get($systems, md-sys-color, secondary), - pressed-label-text-color: map.get($systems, md-sys-color, secondary), - pressed-state-layer-color: map.get($systems, md-sys-color, secondary), - with-icon-focus-icon-color: map.get($systems, md-sys-color, secondary), - with-icon-hover-icon-color: map.get($systems, md-sys-color, secondary), - with-icon-icon-color: map.get($systems, md-sys-color, secondary), - with-icon-pressed-icon-color: map.get($systems, md-sys-color, secondary) - ), - tertiary: ( - focus-label-text-color: map.get($systems, md-sys-color, tertiary), - focus-state-layer-color: map.get($systems, md-sys-color, tertiary), - hover-label-text-color: map.get($systems, md-sys-color, tertiary), - hover-state-layer-color: map.get($systems, md-sys-color, tertiary), - label-text-color: map.get($systems, md-sys-color, tertiary), - pressed-label-text-color: map.get($systems, md-sys-color, tertiary), - pressed-state-layer-color: map.get($systems, md-sys-color, tertiary), - with-icon-focus-icon-color: map.get($systems, md-sys-color, tertiary), - with-icon-hover-icon-color: map.get($systems, md-sys-color, tertiary), - with-icon-icon-color: map.get($systems, md-sys-color, tertiary), - with-icon-pressed-icon-color: map.get($systems, md-sys-color, tertiary) - ), - error: ( - focus-label-text-color: map.get($systems, md-sys-color, error), - focus-state-layer-color: map.get($systems, md-sys-color, error), - hover-label-text-color: map.get($systems, md-sys-color, error), - hover-state-layer-color: map.get($systems, md-sys-color, error), - label-text-color: map.get($systems, md-sys-color, error), - pressed-label-text-color: map.get($systems, md-sys-color, error), - pressed-state-layer-color: map.get($systems, md-sys-color, error), - with-icon-focus-icon-color: map.get($systems, md-sys-color, error), - with-icon-hover-icon-color: map.get($systems, md-sys-color, error), - with-icon-icon-color: map.get($systems, md-sys-color, error), - with-icon-pressed-icon-color: map.get($systems, md-sys-color, error) - ) - ); - - @return token-definition.namespace-tokens($prefix, ( - _fix-tokens($mdc-tokens), - token-definition.map-values($variant-tokens, meta.get-function(_fix-tokens)) - ), $token-slots); -} - - -/// Fixes inconsistent values in the text button tokens so that they can produce valid styles. -/// @param {Map} $initial-tokens Map of text button tokens currently being generated. -/// @return {Map} The given tokens, with the invalid values replaced with valid ones. -@function _fix-tokens($initial-tokens) { - // Need to get the hardcoded values, because they include opacities that are used for the disabled - // state. - $hardcoded-tokens: values((), false); - - @return token-definition.combine-color-tokens($initial-tokens, $hardcoded-tokens, ( - ( - color: disabled-label-text-color, - opacity: disabled-label-text-opacity, - ), - )); -} - -@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) - ); -}