diff --git a/src/material/core/theming/_definition.scss b/src/material/core/theming/_definition.scss index 5b75b9faf8f2..847ac0e8a64c 100644 --- a/src/material/core/theming/_definition.scss +++ b/src/material/core/theming/_definition.scss @@ -53,21 +53,22 @@ $theme-version: 1; $system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix; sass-utils.$use-system-color-variables: map.get($config, use-system-variables) or false; + $palettes: ( + primary: map.remove($primary, neutral, neutral-variant, secondary), + secondary: map.get($primary, secondary), + tertiary: map.remove($tertiary, neutral, neutral-variant, secondary, error), + neutral: map.get($primary, neutral), + neutral-variant: map.get($primary, neutral-variant), + error: map.get($primary, error), + ); + @return ( $internals: ( theme-version: $theme-version, theme-type: $type, - palettes: ( - primary: map.remove($primary, neutral, neutral-variant, secondary), - secondary: map.get($primary, secondary), - tertiary: map.remove($tertiary, neutral, neutral-variant, secondary), - neutral: map.get($primary, neutral), - neutral-variant: map.get($primary, neutral-variant), - error: map.get($primary, error), - ), + palettes: $palettes, color-system-variables-prefix: $system-variables-prefix, - color-tokens: m3-tokens.generate-color-tokens( - $type, $primary, $tertiary, map.get($primary, error), $system-variables-prefix) + color-tokens: m3-tokens.generate-color-tokens($type, $palettes, $system-variables-prefix) ) ); } @@ -89,19 +90,20 @@ $theme-version: 1; $system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix; sass-utils.$use-system-typography-variables: map.get($config, use-system-variables) or false; + $typography: ( + plain: $plain, + brand: $brand, + bold: $bold, + medium: $medium, + regular: $regular, + ); + @return ( $internals: ( theme-version: $theme-version, - font-definition: ( - plain: $plain, - brand: $brand, - bold: $bold, - medium: $medium, - regular: $regular, - ), + font-definition: $typography, typography-system-variables-prefix: $system-variables-prefix, - typography-tokens: m3-tokens.generate-typography-tokens( - $brand, $plain, $bold, $medium, $regular, $system-variables-prefix) + typography-tokens: m3-tokens.generate-typography-tokens($typography, $system-variables-prefix) ) ); } diff --git a/src/material/core/tokens/_m3-system.scss b/src/material/core/tokens/_m3-system.scss index 2346f4e42588..19c9e47a0a16 100644 --- a/src/material/core/tokens/_m3-system.scss +++ b/src/material/core/tokens/_m3-system.scss @@ -19,6 +19,7 @@ @use '../style/sass-utils'; @use '../theming/config-validation'; @use '../theming/definition'; +@use '../theming/palettes'; @use './m3'; @use './m3-tokens'; @use 'sass:list'; @@ -130,8 +131,14 @@ /// change the primary color to red, use `mat.theme-overrides((primary: red));` @mixin theme-overrides($overrides, $prefix: definition.$system-fallback-prefix) { $sys-names: map-merge-all( - m3.md-sys-color-values-light(), - m3.md-sys-typescale-values(), + m3.md-sys-color-values-light(palettes.$blue-palette), + m3.md-sys-typescale-values(( + brand: (Roboto), + plain: (Roboto), + bold: 700, + medium: 500, + regular: 400 + )), m3.md-sys-elevation-values(), m3.md-sys-shape-values(), m3.md-sys-state-values()); @@ -147,35 +154,20 @@ @mixin system-level-colors($theme, $overrides: (), $prefix: null) { $palettes: map.get($theme, _mat-theming-internals-do-not-access, palettes); - $base-palettes: ( - neutral: map.get($palettes, neutral), - neutral-variant: map.get($palettes, neutral-variant), - secondary: map.get($palettes, secondary), - error: map.get($palettes, error), - ); - $type: map.get($theme, _mat-theming-internals-do-not-access, theme-type); - $primary: map.merge(map.get($palettes, primary), $base-palettes); - $tertiary: map.merge(map.get($palettes, tertiary), $base-palettes); - $error: map.get($palettes, error); @if (not $prefix) { $prefix: map.get($theme, _mat-theming-internals-do-not-access, color-system-variables-prefix) or definition.$system-level-prefix; } - $ref: ( - md-ref-palette: m3-tokens.generate-ref-palette-tokens($primary, $tertiary, $error) - ); - $sys-colors: _generate-sys-colors($ref, $type); + $sys-colors: _generate-sys-colors($palettes, $type); // Manually insert a subset of palette values that are used directly by components // instead of system variables. - $sys-colors: map.set($sys-colors, - 'neutral-variant20', map.get($ref, md-ref-palette, neutral-variant20)); - $sys-colors: map.set($sys-colors, - 'neutral10', map.get($ref, md-ref-palette, neutral10)); + $sys-colors: map.set($sys-colors, neutral-variant20, map.get($palettes, neutral-variant, 20)); + $sys-colors: map.set($sys-colors, neutral10, map.get($palettes, neutral, 10)); & { @each $name, $value in $sys-colors { @@ -184,13 +176,13 @@ } } -@function _generate-sys-colors($ref, $type) { - $light-sys-colors: m3.md-sys-color-values-light($ref); +@function _generate-sys-colors($palettes, $type) { + $light-sys-colors: m3.md-sys-color-values-light($palettes); @if ($type == light) { @return $light-sys-colors; } - $dark-sys-colors: m3.md-sys-color-values-dark($ref); + $dark-sys-colors: m3.md-sys-color-values-dark($palettes); @if ($type == dark) { @return $dark-sys-colors; } @@ -210,14 +202,6 @@ @mixin system-level-typography($theme, $overrides: (), $prefix: null) { $font-definition: map.get($theme, _mat-theming-internals-do-not-access, font-definition); - $brand: map.get($font-definition, brand); - $plain: map.get($font-definition, plain); - $bold: map.get($font-definition, bold); - $medium: map.get($font-definition, medium); - $regular: map.get($font-definition, regular); - $ref: (md-ref-typeface: - m3-tokens.generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular) - ); @if (not $prefix) { $prefix: map.get($theme, _mat-theming-internals-do-not-access, @@ -225,7 +209,7 @@ } & { - @each $name, $value in m3.md-sys-typescale-values($ref) { + @each $name, $value in m3.md-sys-typescale-values($font-definition) { --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value}; } } @@ -275,11 +259,19 @@ // system fallback variables referencing Material's system keys. // Includes density token fallbacks where density is 0. @function create-system-fallbacks() { + $palettes: m3.md-sys-color-values-light(palettes.$blue-palette); + $palettes: map.set($palettes, primary, palettes.$blue-palette); $app-vars: ( 'md-sys-color': - _create-system-app-vars-map(m3.md-sys-color-values-light()), + _create-system-app-vars-map(m3.md-sys-color-values-light($palettes)), 'md-sys-typescale': - _create-system-app-vars-map(m3.md-sys-typescale-values()), + _create-system-app-vars-map(m3.md-sys-typescale-values(( + brand: (Roboto), + plain: (Roboto), + bold: 700, + medium: 500, + regular: 400 + ))), 'md-sys-elevation': _create-system-app-vars-map(m3.md-sys-elevation-values()), 'md-sys-state': diff --git a/src/material/core/tokens/_m3-tokens.scss b/src/material/core/tokens/_m3-tokens.scss index 8ad6d8e81bf8..aaf13937685d 100644 --- a/src/material/core/tokens/_m3-tokens.scss +++ b/src/material/core/tokens/_m3-tokens.scss @@ -41,61 +41,10 @@ @use '../ripple/m3-ripple'; @use '../selection/pseudo-checkbox/m3-pseudo-checkbox'; @use '../style/sass-utils'; -@use './format-tokens'; @use './m2-tokens'; @use './m3'; @use 'sass:map'; -/// Generates tokens for the given palette with the given prefix. -/// @param {Map} $palette The palette to generate tokens for -/// @param {String} $prefix The key prefix used to name the tokens -/// @return {Map} A set of tokens for the given palette -@function _generate-palette-tokens($palette, $prefix) { - $palette: map.remove($palette, neutral, neutral-variant); - $result: (); - @each $hue, $value in $palette { - $result: map.set($result, '#{$prefix}#{$hue}', $value); - } - @return $result; -} - -/// Creates a set of `md-ref-palette` tokens from the given palettes. (See -/// ./m3/definitions/_md-ref-palette.scss) -/// @param {Map} $primary The primary palette -/// @param {Map} $secondary The secondary palette -/// @param {Map} $tertiary The tertiary palette -/// @param {Map} $error The error palette -/// @return {Map} A set of `md-ref-palette` tokens -@function generate-ref-palette-tokens($primary, $tertiary, $error) { - @return sass-utils.merge-all( - (black: #000, white: #fff), - _generate-palette-tokens($primary, primary), - _generate-palette-tokens(map.get($primary, secondary), secondary), - _generate-palette-tokens($tertiary, tertiary), - _generate-palette-tokens(map.get($primary, neutral), neutral), - _generate-palette-tokens(map.get($primary, neutral-variant), neutral-variant), - _generate-palette-tokens($error, error), - ); -} - -/// Creates a set of `md-ref-typeface` tokens from the given palettes. (See -/// ./m3/definitions/_md-ref-typeface.scss) -/// @param {List|String} $brand The font-family to use for brand text -/// @param {List|String} $plain The font-family to use for plain text -/// @param {String} $bold The font-weight to use for bold text -/// @param {String} $medium The font-weight to use for medium text -/// @param {String} $regular The font-weight to use for regular text -/// @return {Map} A set of `md-ref-typeface` tokens -@function generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular) { - @return ( - brand: $brand, - plain: $plain, - weight-bold: $bold, - weight-medium: $medium, - weight-regular: $regular, - ); -} - $_cached-token-slots: null; /// Determines the token slots for all components. @@ -138,9 +87,6 @@ $_cached-token-slots: null; ), $systems); $exclude-hardcoded: not $include-non-systemized; - // DO NOT REMOVE - // This function is used internally. - $systems: format-tokens.private-format-tokens($systems); $token-slots: _get-token-slots(); // TODO(mmalerba): Fill in remaining tokens. @@ -164,170 +110,34 @@ $_cached-token-slots: null; @return $result; } -@function _get-sys-color($type, $ref, $prefix) { - $mdc-sys-color: if($type == dark, - m3.md-sys-color-values-dark($ref), - m3.md-sys-color-values-light($ref)); +@function _get-sys-color($type, $palettes, $prefix) { + $sys-color: if($type == dark, + m3.md-sys-color-values-dark($palettes), + m3.md-sys-color-values-light($palettes)); @if (sass-utils.$use-system-color-variables) { - $keys: ( - 'background', - 'error', - 'error-container', - 'inverse-on-surface', - 'inverse-primary', - 'inverse-surface', - 'on-background', - 'on-error', - 'on-error-container', - 'on-primary', - 'on-primary-container', - 'on-primary-fixed', - 'on-primary-fixed-variant', - 'on-secondary', - 'on-secondary-container', - 'on-secondary-fixed', - 'on-secondary-fixed-variant', - 'on-surface', - 'on-surface-variant', - 'on-tertiary', - 'on-tertiary-container', - 'on-tertiary-fixed', - 'on-tertiary-fixed-variant', - 'outline', - 'outline-variant', - 'primary', - 'primary-container', - 'primary-fixed', - 'primary-fixed-dim', - 'scrim', - 'secondary', - 'secondary-container', - 'secondary-fixed', - 'secondary-fixed-dim', - 'surface', - 'surface-bright', - 'surface-container', - 'surface-container-high', - 'surface-container-highest', - 'surface-container-low', - 'surface-container-lowest', - 'surface-dim', - 'surface-tint', - 'surface-variant', - 'tertiary', - 'tertiary-container', - 'tertiary-fixed', - 'tertiary-fixed-dim' - ); - @return map.merge(create-map($keys, $prefix), ( - shadow: map.get($mdc-sys-color, shadow) - )); + $var-values: (); + @each $key in map.keys($sys-color) { + $var-values: map.set($var-values, $key, var(--#{$prefix}-#{$key})); + } + $var-values: map.set($var-values, shadow, map.get($sys-color, shadow)); + @return $var-values; } - @return $mdc-sys-color; + @return $sys-color; } -@function _get-sys-typeface($ref, $prefix) { +@function _get-sys-typeface($typography, $prefix) { + $sys-typography: m3.md-sys-typescale-values($typography); @if (sass-utils.$use-system-typography-variables) { - $keys: ( - 'body-large', - 'body-large-font', - 'body-large-line-height', - 'body-large-size', - 'body-large-tracking', - 'body-large-weight', - 'body-medium', - 'body-medium-font', - 'body-medium-line-height', - 'body-medium-size', - 'body-medium-tracking', - 'body-medium-weight', - 'body-small', - 'body-small-font', - 'body-small-line-height', - 'body-small-size', - 'body-small-tracking', - 'body-small-weight', - 'display-large', - 'display-large-font', - 'display-large-line-height', - 'display-large-size', - 'display-large-tracking', - 'display-large-weight', - 'display-medium', - 'display-medium-font', - 'display-medium-line-height', - 'display-medium-size', - 'display-medium-tracking', - 'display-medium-weight', - 'display-small', - 'display-small-font', - 'display-small-line-height', - 'display-small-size', - 'display-small-tracking', - 'display-small-weight', - 'headline-large', - 'headline-large-font', - 'headline-large-line-height', - 'headline-large-size', - 'headline-large-tracking', - 'headline-large-weight', - 'headline-medium', - 'headline-medium-font', - 'headline-medium-line-height', - 'headline-medium-size', - 'headline-medium-tracking', - 'headline-medium-weight', - 'headline-small', - 'headline-small-font', - 'headline-small-line-height', - 'headline-small-size', - 'headline-small-tracking', - 'headline-small-weight', - 'label-large', - 'label-large-font', - 'label-large-line-height', - 'label-large-size', - 'label-large-tracking', - 'label-large-weight', - 'label-large-weight-prominent', - 'label-medium', - 'label-medium-font', - 'label-medium-line-height', - 'label-medium-size', - 'label-medium-tracking', - 'label-medium-weight', - 'label-medium-weight-prominent', - 'label-small', - 'label-small-font', - 'label-small-line-height', - 'label-small-size', - 'label-small-tracking', - 'label-small-weight', - 'title-large', - 'title-large-font', - 'title-large-line-height', - 'title-large-size', - 'title-large-tracking', - 'title-large-weight', - 'title-medium', - 'title-medium-font', - 'title-medium-line-height', - 'title-medium-size', - 'title-medium-tracking', - 'title-medium-weight', - 'title-small', - 'title-small-font', - 'title-small-line-height', - 'title-small-size', - 'title-small-tracking', - 'title-small-weight' - ); - - @return create-map($keys, $prefix); + $var-values: (); + @each $key in map.keys($sys-typography) { + $var-values: map.set($var-values, $key, var(--#{$prefix}-#{$key})); + } + @return $var-values; } - @return m3.md-sys-typescale-values($ref); + + @return $sys-typography; } /// Generates a set of namespaced color tokens for all components. @@ -337,15 +147,15 @@ $_cached-token-slots: null; /// @param {Map} $error The error palette /// @param {String} $system-variables-prefix The prefix of system tokens /// @return {Map} A map of namespaced color tokens -@function generate-color-tokens($type, $primary, $tertiary, $error, $system-variables-prefix) { - $ref: ( - md-ref-palette: generate-ref-palette-tokens($primary, $tertiary, $error) - ); +@function generate-color-tokens($type, $palettes, $system-variables-prefix) { + $sys-color: _get-sys-color($type, $palettes, $system-variables-prefix); - $sys-color: _get-sys-color($type, $ref, $system-variables-prefix); - - @return generate-tokens(map.merge($ref, ( + @return generate-tokens(( md-sys-color: $sys-color, + md-ref-palette: ( + neutral-10: map.get($palettes, neutral, 10), + neutral-variant20: map.get($palettes, neutral-variant, 20), + ), // Because the elevation values are always combined with color values to create the box shadow, // elevation needs to be part of the color dimension. md-sys-elevation: m3.md-sys-elevation-values(), @@ -354,7 +164,7 @@ $_cached-token-slots: null; // TODO(mmalerba): If at some point we remove the need for these combined values, we can move // state to the base dimension. md-sys-state: m3.md-sys-state-values(), - ))); + )); } /// Generates a set of namespaced color tokens for all components. @@ -365,12 +175,8 @@ $_cached-token-slots: null; /// @param {String|Number} $regular The regular font-weight /// @param {String} $system-variables-prefix The prefix of system tokens /// @return {Map} A map of namespaced typography tokens -@function generate-typography-tokens($brand, $plain, $bold, $medium, $regular, -$system-variables-prefix) { - $ref: ( - md-ref-typeface: generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular) - ); - $sys-typeface: _get-sys-typeface($ref, $system-variables-prefix); +@function generate-typography-tokens($typography, $system-variables-prefix) { + $sys-typeface: _get-sys-typeface($typography, $system-variables-prefix); @return generate-tokens(( md-sys-typescale: $sys-typeface )); diff --git a/src/material/core/tokens/m3/BUILD.bazel b/src/material/core/tokens/m3/BUILD.bazel index d9013d84d46c..858615f25ce1 100644 --- a/src/material/core/tokens/m3/BUILD.bazel +++ b/src/material/core/tokens/m3/BUILD.bazel @@ -6,8 +6,6 @@ sass_library( name = "m3", srcs = [ "_index.scss", - "_md-ref-palette.scss", - "_md-ref-typeface.scss", "_md-sys-color.scss", "_md-sys-elevation.scss", "_md-sys-motion.scss", diff --git a/src/material/core/tokens/m3/_index.scss b/src/material/core/tokens/m3/_index.scss index 1a4ff56056f6..7cc298e39920 100644 --- a/src/material/core/tokens/m3/_index.scss +++ b/src/material/core/tokens/m3/_index.scss @@ -1,8 +1,6 @@ -@forward './md-ref-palette' as md-ref-palette-*; -@forward './md-ref-typeface' as md-ref-typeface-*; -@forward './md-sys-color' as md-sys-color-*; -@forward './md-sys-elevation' as md-sys-elevation-*; -@forward './md-sys-motion' as md-sys-motion-*; -@forward './md-sys-shape' as md-sys-shape-*; -@forward './md-sys-state' as md-sys-state-*; -@forward './md-sys-typescale' as md-sys-typescale-*; +@forward './md-sys-color'; +@forward './md-sys-elevation'; +@forward './md-sys-motion'; +@forward './md-sys-shape'; +@forward './md-sys-state'; +@forward './md-sys-typescale'; diff --git a/src/material/core/tokens/m3/_md-ref-palette.scss b/src/material/core/tokens/m3/_md-ref-palette.scss deleted file mode 100644 index 60364cb43c97..000000000000 --- a/src/material/core/tokens/m3/_md-ref-palette.scss +++ /dev/null @@ -1,100 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@function values($exclude-hardcoded-values: false) { - @return ( - 'black': if($exclude-hardcoded-values, null, #000), - 'error0': if($exclude-hardcoded-values, null, #000), - 'error10': if($exclude-hardcoded-values, null, #410e0b), - 'error100': if($exclude-hardcoded-values, null, #fff), - 'error20': if($exclude-hardcoded-values, null, #601410), - 'error30': if($exclude-hardcoded-values, null, #8c1d18), - 'error40': if($exclude-hardcoded-values, null, #b3261e), - 'error50': if($exclude-hardcoded-values, null, #dc362e), - 'error60': if($exclude-hardcoded-values, null, #e46962), - 'error70': if($exclude-hardcoded-values, null, #ec928e), - 'error80': if($exclude-hardcoded-values, null, #f2b8b5), - 'error90': if($exclude-hardcoded-values, null, #f9dedc), - 'error95': if($exclude-hardcoded-values, null, #fceeee), - 'error99': if($exclude-hardcoded-values, null, #fffbf9), - 'neutral-variant0': if($exclude-hardcoded-values, null, #000), - 'neutral-variant10': if($exclude-hardcoded-values, null, #1d1a22), - 'neutral-variant100': if($exclude-hardcoded-values, null, #fff), - 'neutral-variant20': if($exclude-hardcoded-values, null, #322f37), - 'neutral-variant30': if($exclude-hardcoded-values, null, #49454f), - 'neutral-variant40': if($exclude-hardcoded-values, null, #605d66), - 'neutral-variant50': if($exclude-hardcoded-values, null, #79747e), - 'neutral-variant60': if($exclude-hardcoded-values, null, #938f99), - 'neutral-variant70': if($exclude-hardcoded-values, null, #aea9b4), - 'neutral-variant80': if($exclude-hardcoded-values, null, #cac4d0), - 'neutral-variant90': if($exclude-hardcoded-values, null, #e7e0ec), - 'neutral-variant95': if($exclude-hardcoded-values, null, #f5eefa), - 'neutral-variant99': if($exclude-hardcoded-values, null, #fffbfe), - 'neutral0': if($exclude-hardcoded-values, null, #000), - 'neutral10': if($exclude-hardcoded-values, null, #1c1b1f), - 'neutral100': if($exclude-hardcoded-values, null, #fff), - 'neutral12': if($exclude-hardcoded-values, null, #201f23), - 'neutral17': if($exclude-hardcoded-values, null, #2b292d), - 'neutral20': if($exclude-hardcoded-values, null, #313033), - 'neutral22': if($exclude-hardcoded-values, null, #313033), - 'neutral24': if($exclude-hardcoded-values, null, #313033), - 'neutral30': if($exclude-hardcoded-values, null, #484649), - 'neutral4': if($exclude-hardcoded-values, null, #0e0e11), - 'neutral40': if($exclude-hardcoded-values, null, #605d62), - 'neutral50': if($exclude-hardcoded-values, null, #787579), - 'neutral6': if($exclude-hardcoded-values, null, #141317), - 'neutral60': if($exclude-hardcoded-values, null, #939094), - 'neutral70': if($exclude-hardcoded-values, null, #aeaaae), - 'neutral80': if($exclude-hardcoded-values, null, #c9c5ca), - 'neutral87': if($exclude-hardcoded-values, null, #ddd8dd), - 'neutral90': if($exclude-hardcoded-values, null, #e6e1e5), - 'neutral92': if($exclude-hardcoded-values, null, #ece7ec), - 'neutral94': if($exclude-hardcoded-values, null, #f1ecf1), - 'neutral95': if($exclude-hardcoded-values, null, #f4eff4), - 'neutral96': if($exclude-hardcoded-values, null, #f7f2f7), - 'neutral98': if($exclude-hardcoded-values, null, #fdf8fd), - 'neutral99': if($exclude-hardcoded-values, null, #fffbfe), - 'primary0': if($exclude-hardcoded-values, null, #000), - 'primary10': if($exclude-hardcoded-values, null, #21005d), - 'primary100': if($exclude-hardcoded-values, null, #fff), - 'primary20': if($exclude-hardcoded-values, null, #381e72), - 'primary30': if($exclude-hardcoded-values, null, #4f378b), - 'primary40': if($exclude-hardcoded-values, null, #6750a4), - 'primary50': if($exclude-hardcoded-values, null, #7f67be), - 'primary60': if($exclude-hardcoded-values, null, #9a82db), - 'primary70': if($exclude-hardcoded-values, null, #b69df8), - 'primary80': if($exclude-hardcoded-values, null, #d0bcff), - 'primary90': if($exclude-hardcoded-values, null, #eaddff), - 'primary95': if($exclude-hardcoded-values, null, #f6edff), - 'primary99': if($exclude-hardcoded-values, null, #fffbfe), - 'secondary0': if($exclude-hardcoded-values, null, #000), - 'secondary10': if($exclude-hardcoded-values, null, #1d192b), - 'secondary100': if($exclude-hardcoded-values, null, #fff), - 'secondary20': if($exclude-hardcoded-values, null, #332d41), - 'secondary30': if($exclude-hardcoded-values, null, #4a4458), - 'secondary40': if($exclude-hardcoded-values, null, #625b71), - 'secondary50': if($exclude-hardcoded-values, null, #7a7289), - 'secondary60': if($exclude-hardcoded-values, null, #958da5), - 'secondary70': if($exclude-hardcoded-values, null, #b0a7c0), - 'secondary80': if($exclude-hardcoded-values, null, #ccc2dc), - 'secondary90': if($exclude-hardcoded-values, null, #e8def8), - 'secondary95': if($exclude-hardcoded-values, null, #f6edff), - 'secondary99': if($exclude-hardcoded-values, null, #fffbfe), - 'tertiary0': if($exclude-hardcoded-values, null, #000), - 'tertiary10': if($exclude-hardcoded-values, null, #31111d), - 'tertiary100': if($exclude-hardcoded-values, null, #fff), - 'tertiary20': if($exclude-hardcoded-values, null, #492532), - 'tertiary30': if($exclude-hardcoded-values, null, #633b48), - 'tertiary40': if($exclude-hardcoded-values, null, #7d5260), - 'tertiary50': if($exclude-hardcoded-values, null, #986977), - 'tertiary60': if($exclude-hardcoded-values, null, #b58392), - 'tertiary70': if($exclude-hardcoded-values, null, #d29dac), - 'tertiary80': if($exclude-hardcoded-values, null, #efb8c8), - 'tertiary90': if($exclude-hardcoded-values, null, #ffd8e4), - 'tertiary95': if($exclude-hardcoded-values, null, #ffecf1), - 'tertiary99': if($exclude-hardcoded-values, null, #fffbfa), - 'white': if($exclude-hardcoded-values, null, #fff) - ); -} diff --git a/src/material/core/tokens/m3/_md-ref-typeface.scss b/src/material/core/tokens/m3/_md-ref-typeface.scss deleted file mode 100644 index c26dcbc46d95..000000000000 --- a/src/material/core/tokens/m3/_md-ref-typeface.scss +++ /dev/null @@ -1,14 +0,0 @@ -// -// Design system display name: Material 3 -// Design system version: v0.161 -// - -@function values($exclude-hardcoded-values: false) { - @return ( - 'brand': if($exclude-hardcoded-values, null, (Roboto)), - 'plain': if($exclude-hardcoded-values, null, (Roboto)), - 'weight-bold': if($exclude-hardcoded-values, null, 700), - 'weight-medium': if($exclude-hardcoded-values, null, 500), - 'weight-regular': if($exclude-hardcoded-values, null, 400) - ); -} diff --git a/src/material/core/tokens/m3/_md-sys-color.scss b/src/material/core/tokens/m3/_md-sys-color.scss index cb69dc47af24..b37fe69dbb4e 100644 --- a/src/material/core/tokens/m3/_md-sys-color.scss +++ b/src/material/core/tokens/m3/_md-sys-color.scss @@ -5,162 +5,150 @@ @use 'sass:map'; -@use './md-ref-palette'; - // Indicates whether alternative tokens should be used $_alternate-tokens: false; -$_default-dark: ( - 'md-ref-palette': md-ref-palette.values(), -); - -@function values-dark($deps: $_default-dark) { +@function md-sys-color-values-dark($palettes) { $values: ( - 'background': map.get($deps, 'md-ref-palette', 'neutral6'), - 'error': map.get($deps, 'md-ref-palette', 'error80'), - 'error-container': map.get($deps, 'md-ref-palette', 'error30'), - 'inverse-on-surface': map.get($deps, 'md-ref-palette', 'neutral20'), - 'inverse-primary': map.get($deps, 'md-ref-palette', 'primary40'), - 'inverse-surface': map.get($deps, 'md-ref-palette', 'neutral90'), - 'on-background': map.get($deps, 'md-ref-palette', 'neutral90'), - 'on-error': map.get($deps, 'md-ref-palette', 'error20'), - 'on-error-container': map.get($deps, 'md-ref-palette', 'error90'), - 'on-primary': map.get($deps, 'md-ref-palette', 'primary20'), - 'on-primary-container': map.get($deps, 'md-ref-palette', 'primary90'), - 'on-primary-fixed': map.get($deps, 'md-ref-palette', 'primary10'), - 'on-primary-fixed-variant': map.get($deps, 'md-ref-palette', 'primary30'), - 'on-secondary': map.get($deps, 'md-ref-palette', 'secondary20'), - 'on-secondary-container': map.get($deps, 'md-ref-palette', 'secondary90'), - 'on-secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary10'), - 'on-secondary-fixed-variant': - map.get($deps, 'md-ref-palette', 'secondary30'), - 'on-surface': map.get($deps, 'md-ref-palette', 'neutral90'), - 'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant90'), - 'on-tertiary': map.get($deps, 'md-ref-palette', 'tertiary20'), - 'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary90'), - 'on-tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary10'), - 'on-tertiary-fixed-variant': map.get($deps, 'md-ref-palette', 'tertiary30'), - 'outline': map.get($deps, 'md-ref-palette', 'neutral-variant60'), - 'outline-variant': map.get($deps, 'md-ref-palette', 'neutral-variant30'), - 'primary': map.get($deps, 'md-ref-palette', 'primary80'), - 'primary-container': map.get($deps, 'md-ref-palette', 'primary30'), - 'primary-fixed': map.get($deps, 'md-ref-palette', 'primary90'), - 'primary-fixed-dim': map.get($deps, 'md-ref-palette', 'primary80'), - 'scrim': map.get($deps, 'md-ref-palette', 'neutral0'), - 'secondary': map.get($deps, 'md-ref-palette', 'secondary80'), - 'secondary-container': map.get($deps, 'md-ref-palette', 'secondary30'), - 'secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary90'), - 'secondary-fixed-dim': map.get($deps, 'md-ref-palette', 'secondary80'), - 'shadow': map.get($deps, 'md-ref-palette', 'neutral0'), - 'surface': map.get($deps, 'md-ref-palette', 'neutral6'), - 'surface-bright': map.get($deps, 'md-ref-palette', 'neutral24'), - 'surface-container': map.get($deps, 'md-ref-palette', 'neutral12'), - 'surface-container-high': map.get($deps, 'md-ref-palette', 'neutral17'), - 'surface-container-highest': map.get($deps, 'md-ref-palette', 'neutral22'), - 'surface-container-low': map.get($deps, 'md-ref-palette', 'neutral10'), - 'surface-container-lowest': map.get($deps, 'md-ref-palette', 'neutral4'), - 'surface-dim': map.get($deps, 'md-ref-palette', 'neutral6'), - 'surface-tint': map.get($deps, 'md-ref-palette', 'primary80'), - 'surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant30'), - 'tertiary': map.get($deps, 'md-ref-palette', 'tertiary80'), - 'tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary30'), - 'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'), - 'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80') + background: map.get($palettes, neutral, 6), + error: map.get($palettes, error, 80), + error-container: map.get($palettes, error, 30), + inverse-on-surface: map.get($palettes, neutral, 20), + inverse-primary: map.get($palettes, primary, 40), + inverse-surface: map.get($palettes, neutral, 90), + on-background: map.get($palettes, neutral, 90), + on-error: map.get($palettes, error, 20), + on-error-container: map.get($palettes, error, 90), + on-primary: map.get($palettes, primary, 20), + on-primary-container: map.get($palettes, primary, 90), + on-primary-fixed: map.get($palettes, primary, 10), + on-primary-fixed-variant: map.get($palettes, primary, 30), + on-secondary: map.get($palettes, secondary, 20), + on-secondary-container: map.get($palettes, secondary, 90), + on-secondary-fixed: map.get($palettes, secondary, 10), + on-secondary-fixed-variant: map.get($palettes, secondary, 30), + on-surface: map.get($palettes, neutral, 90), + on-surface-variant: map.get($palettes, neutral-variant, 90), + on-tertiary: map.get($palettes, tertiary, 20), + on-tertiary-container: map.get($palettes, tertiary, 90), + on-tertiary-fixed: map.get($palettes, tertiary, 10), + on-tertiary-fixed-variant: map.get($palettes, tertiary, 30), + outline: map.get($palettes, neutral-variant, 60), + outline-variant: map.get($palettes, neutral-variant, 30), + primary: map.get($palettes, primary, 80), + primary-container: map.get($palettes, primary, 30), + primary-fixed: map.get($palettes, primary, 90), + primary-fixed-dim: map.get($palettes, primary, 80), + scrim: map.get($palettes, neutral, 0), + secondary: map.get($palettes, secondary, 80), + secondary-container: map.get($palettes, secondary, 30), + secondary-fixed: map.get($palettes, secondary, 90), + secondary-fixed-dim: map.get($palettes, secondary, 80), + shadow: map.get($palettes, neutral, 0), + surface: map.get($palettes, neutral, 6), + surface-bright: map.get($palettes, neutral, 24), + surface-container: map.get($palettes, neutral, 12), + surface-container-high: map.get($palettes, neutral, 17), + surface-container-highest: map.get($palettes, neutral, 22), + surface-container-low: map.get($palettes, neutral, 10), + surface-container-lowest: map.get($palettes, neutral, 4), + surface-dim: map.get($palettes, neutral, 6), + surface-tint: map.get($palettes, primary, 80), + surface-variant: map.get($palettes, neutral-variant, 30), + tertiary: map.get($palettes, tertiary, 80), + tertiary-container: map.get($palettes, tertiary, 30), + tertiary-fixed: map.get($palettes, tertiary, 90), + tertiary-fixed-dim: map.get($palettes, tertiary, 80) ); @if ($_alternate-tokens) { $values: map.merge($values, ( - 'background': map.get($deps, 'md-ref-palette', 'neutral10'), - 'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant80'), - 'surface': map.get($deps, 'md-ref-palette', 'neutral10'), - 'surface-bright': #37393b, - 'surface-container': #1e1f20, - 'surface-container-high': #282a2c, - 'surface-container-highest': #333537, - 'surface-container-low': #1b1b1b, - 'surface-container-lowest': #0e0e0e, - 'surface-dim': #131313, - 'surface-tint': #d1e1ff, + background: map.get($palettes, neutral, 10), + on-surface-variant: map.get($palettes, neutral-variant, 80), + surface: map.get($palettes, neutral, 10), + surface-bright: #37393b, + surface-container: #1e1f20, + surface-container-high: #282a2c, + surface-container-highest: #333537, + surface-container-low: #1b1b1b, + surface-container-lowest: #0e0e0e, + surface-dim: #131313, + surface-tint: #d1e1ff, )); } @return $values; } -$_default-light: ( - 'md-ref-palette': md-ref-palette.values(), -); - -@function values-light($deps: $_default-light) { +@function md-sys-color-values-light($palettes) { $values: ( - 'background': map.get($deps, 'md-ref-palette', 'neutral98'), - 'error': map.get($deps, 'md-ref-palette', 'error40'), - 'error-container': map.get($deps, 'md-ref-palette', 'error90'), - 'inverse-on-surface': map.get($deps, 'md-ref-palette', 'neutral95'), - 'inverse-primary': map.get($deps, 'md-ref-palette', 'primary80'), - 'inverse-surface': map.get($deps, 'md-ref-palette', 'neutral20'), - 'on-background': map.get($deps, 'md-ref-palette', 'neutral10'), - 'on-error': map.get($deps, 'md-ref-palette', 'error100'), - 'on-error-container': map.get($deps, 'md-ref-palette', 'error30'), - 'on-primary': map.get($deps, 'md-ref-palette', 'primary100'), - 'on-primary-container': map.get($deps, 'md-ref-palette', 'primary30'), - 'on-primary-fixed': map.get($deps, 'md-ref-palette', 'primary10'), - 'on-primary-fixed-variant': map.get($deps, 'md-ref-palette', 'primary30'), - 'on-secondary': map.get($deps, 'md-ref-palette', 'secondary100'), - 'on-secondary-container': map.get($deps, 'md-ref-palette', 'secondary30'), - 'on-secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary10'), - 'on-secondary-fixed-variant': - map.get($deps, 'md-ref-palette', 'secondary30'), - 'on-surface': map.get($deps, 'md-ref-palette', 'neutral10'), - 'on-surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant30'), - 'on-tertiary': map.get($deps, 'md-ref-palette', 'tertiary100'), - 'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary30'), - 'on-tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary10'), - 'on-tertiary-fixed-variant': map.get($deps, 'md-ref-palette', 'tertiary30'), - 'outline': map.get($deps, 'md-ref-palette', 'neutral-variant50'), - 'outline-variant': map.get($deps, 'md-ref-palette', 'neutral-variant80'), - 'primary': map.get($deps, 'md-ref-palette', 'primary40'), - 'primary-container': map.get($deps, 'md-ref-palette', 'primary90'), - 'primary-fixed': map.get($deps, 'md-ref-palette', 'primary90'), - 'primary-fixed-dim': map.get($deps, 'md-ref-palette', 'primary80'), - 'scrim': map.get($deps, 'md-ref-palette', 'neutral0'), - 'secondary': map.get($deps, 'md-ref-palette', 'secondary40'), - 'secondary-container': map.get($deps, 'md-ref-palette', 'secondary90'), - 'secondary-fixed': map.get($deps, 'md-ref-palette', 'secondary90'), - 'secondary-fixed-dim': map.get($deps, 'md-ref-palette', 'secondary80'), - 'shadow': map.get($deps, 'md-ref-palette', 'neutral0'), - 'surface': map.get($deps, 'md-ref-palette', 'neutral98'), - 'surface-bright': map.get($deps, 'md-ref-palette', 'neutral98'), - 'surface-container': map.get($deps, 'md-ref-palette', 'neutral94'), - 'surface-container-high': map.get($deps, 'md-ref-palette', 'neutral92'), - 'surface-container-highest': map.get($deps, 'md-ref-palette', 'neutral90'), - 'surface-container-low': map.get($deps, 'md-ref-palette', 'neutral96'), - 'surface-container-lowest': map.get($deps, 'md-ref-palette', 'neutral100'), - 'surface-dim': map.get($deps, 'md-ref-palette', 'neutral87'), - 'surface-tint': map.get($deps, 'md-ref-palette', 'primary40'), - 'surface-variant': map.get($deps, 'md-ref-palette', 'neutral-variant90'), - 'tertiary': map.get($deps, 'md-ref-palette', 'tertiary40'), - 'tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary90'), - 'tertiary-fixed': map.get($deps, 'md-ref-palette', 'tertiary90'), - 'tertiary-fixed-dim': map.get($deps, 'md-ref-palette', 'tertiary80') + background: map.get($palettes, neutral, 98), + error: map.get($palettes, error, 40), + error-container: map.get($palettes, error, 90), + inverse-on-surface: map.get($palettes, neutral, 95), + inverse-primary: map.get($palettes, primary, 80), + inverse-surface: map.get($palettes, neutral, 20), + on-background: map.get($palettes, neutral, 10), + on-error: map.get($palettes, error, 100), + on-error-container: map.get($palettes, error, 30), + on-primary: map.get($palettes, primary, 100), + on-primary-container: map.get($palettes, primary, 30), + on-primary-fixed: map.get($palettes, primary, 10), + on-primary-fixed-variant: map.get($palettes, primary, 30), + on-secondary: map.get($palettes, secondary, 100), + on-secondary-container: map.get($palettes, secondary, 30), + on-secondary-fixed: map.get($palettes, secondary, 10), + on-secondary-fixed-variant: map.get($palettes, secondary, 30), + on-surface: map.get($palettes, neutral, 10), + on-surface-variant: map.get($palettes, neutral-variant, 30), + on-tertiary: map.get($palettes, tertiary, 100), + on-tertiary-container: map.get($palettes, tertiary, 30), + on-tertiary-fixed: map.get($palettes, tertiary, 10), + on-tertiary-fixed-variant: map.get($palettes, tertiary, 30), + outline: map.get($palettes, neutral-variant, 50), + outline-variant: map.get($palettes, neutral-variant, 80), + primary: map.get($palettes, primary, 40), + primary-container: map.get($palettes, primary, 90), + primary-fixed: map.get($palettes, primary, 90), + primary-fixed-dim: map.get($palettes, primary, 80), + scrim: map.get($palettes, neutral, 0), + secondary: map.get($palettes, secondary, 40), + secondary-container: map.get($palettes, secondary, 90), + secondary-fixed: map.get($palettes, secondary, 90), + secondary-fixed-dim: map.get($palettes, secondary, 80), + shadow: map.get($palettes, neutral, 0), + surface: map.get($palettes, neutral, 98), + surface-bright: map.get($palettes, neutral, 98), + surface-container: map.get($palettes, neutral, 94), + surface-container-high: map.get($palettes, neutral, 92), + surface-container-highest: map.get($palettes, neutral, 90), + surface-container-low: map.get($palettes, neutral, 96), + surface-container-lowest: map.get($palettes, neutral, 100), + surface-dim: map.get($palettes, neutral, 87), + surface-tint: map.get($palettes, primary, 40), + surface-variant: map.get($palettes, neutral-variant, 90), + tertiary: map.get($palettes, tertiary, 40), + tertiary-container: map.get($palettes, tertiary, 90), + tertiary-fixed: map.get($palettes, tertiary, 90), + tertiary-fixed-dim: map.get($palettes, tertiary, 80) ); @if ($_alternate-tokens) { $values: map.merge($values, ( - 'background': map.get($deps, 'md-ref-palette', 'neutral100'), - 'on-error-container': map.get($deps, 'md-ref-palette', 'error10'), - 'on-primary-container': map.get($deps, 'md-ref-palette', 'primary10'), - 'on-secondary-container': map.get($deps, 'md-ref-palette', 'secondary10'), - 'on-tertiary-container': map.get($deps, 'md-ref-palette', 'tertiary10'), - 'surface': map.get($deps, 'md-ref-palette', 'neutral100'), - 'surface-bright': map.get($deps, 'md-ref-palette', 'neutral100'), - 'surface-container': #f0f4f9, - 'surface-container-high': #e9eef6, - 'surface-container-highest': #dde3ea, - 'surface-container-low': #f8fafd, - 'surface-container-lowest': map.get($deps, 'md-ref-palette', 'primary100'), - 'surface-dim': #d3dbe5, - 'surface-tint': #6991d6, + background: map.get($palettes, neutral, 100), + on-error-container: map.get($palettes, error, 10), + on-primary-container: map.get($palettes, primary, 10), + on-secondary-container: map.get($palettes, secondary, 10), + on-tertiary-container: map.get($palettes, tertiary, 10), + surface: map.get($palettes, neutral, 100), + surface-bright: map.get($palettes, neutral, 100), + surface-container: #f0f4f9, + surface-container-high: #e9eef6, + surface-container-highest: #dde3ea, + surface-container-low: #f8fafd, + surface-container-lowest: map.get($palettes, primary, 100), + surface-dim: #d3dbe5, + surface-tint: #6991d6, )); } diff --git a/src/material/core/tokens/m3/_md-sys-elevation.scss b/src/material/core/tokens/m3/_md-sys-elevation.scss index 8263f7ef84b3..6aad8c6baad9 100644 --- a/src/material/core/tokens/m3/_md-sys-elevation.scss +++ b/src/material/core/tokens/m3/_md-sys-elevation.scss @@ -3,13 +3,13 @@ // Design system version: v0.161 // -@function values($exclude-hardcoded-values: false) { +@function md-sys-elevation-values() { @return ( - 'level0': if($exclude-hardcoded-values, null, 0), - 'level1': if($exclude-hardcoded-values, null, 1), - 'level2': if($exclude-hardcoded-values, null, 3), - 'level3': if($exclude-hardcoded-values, null, 6), - 'level4': if($exclude-hardcoded-values, null, 8), - 'level5': if($exclude-hardcoded-values, null, 12) + level0: 0, + level1: 1, + level2: 3, + level3: 6, + level4: 8, + level5: 12 ); } diff --git a/src/material/core/tokens/m3/_md-sys-motion.scss b/src/material/core/tokens/m3/_md-sys-motion.scss index f2f9ca84d410..645f99b158d9 100644 --- a/src/material/core/tokens/m3/_md-sys-motion.scss +++ b/src/material/core/tokens/m3/_md-sys-motion.scss @@ -3,44 +3,33 @@ // Design system version: v0.161 // -@function values($exclude-hardcoded-values: false) { +@function md-sys-motion-values() { @return ( - 'duration-extra-long1': if($exclude-hardcoded-values, null, 700ms), - 'duration-extra-long2': if($exclude-hardcoded-values, null, 800ms), - 'duration-extra-long3': if($exclude-hardcoded-values, null, 900ms), - 'duration-extra-long4': if($exclude-hardcoded-values, null, 1000ms), - 'duration-long1': if($exclude-hardcoded-values, null, 450ms), - 'duration-long2': if($exclude-hardcoded-values, null, 500ms), - 'duration-long3': if($exclude-hardcoded-values, null, 550ms), - 'duration-long4': if($exclude-hardcoded-values, null, 600ms), - 'duration-medium1': if($exclude-hardcoded-values, null, 250ms), - 'duration-medium2': if($exclude-hardcoded-values, null, 300ms), - 'duration-medium3': if($exclude-hardcoded-values, null, 350ms), - 'duration-medium4': if($exclude-hardcoded-values, null, 400ms), - 'duration-short1': if($exclude-hardcoded-values, null, 50ms), - 'duration-short2': if($exclude-hardcoded-values, null, 100ms), - 'duration-short3': if($exclude-hardcoded-values, null, 150ms), - 'duration-short4': if($exclude-hardcoded-values, null, 200ms), - 'easing-emphasized': - if($exclude-hardcoded-values, null, cubic-bezier(0.2, 0, 0, 1)), - 'easing-emphasized-accelerate': - if($exclude-hardcoded-values, null, cubic-bezier(0.3, 0, 0.8, 0.15)), - 'easing-emphasized-decelerate': - if($exclude-hardcoded-values, null, cubic-bezier(0.05, 0.7, 0.1, 1)), - 'easing-legacy': - if($exclude-hardcoded-values, null, cubic-bezier(0.4, 0, 0.2, 1)), - 'easing-legacy-accelerate': - if($exclude-hardcoded-values, null, cubic-bezier(0.4, 0, 1, 1)), - 'easing-legacy-decelerate': - if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 0.2, 1)), - 'easing-linear': - if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 1, 1)), - 'easing-standard': - if($exclude-hardcoded-values, null, cubic-bezier(0.2, 0, 0, 1)), - 'easing-standard-accelerate': - if($exclude-hardcoded-values, null, cubic-bezier(0.3, 0, 1, 1)), - 'easing-standard-decelerate': - if($exclude-hardcoded-values, null, cubic-bezier(0, 0, 0, 1)), - 'path': /** TODO: type "motion_path" is not supported. */ null + duration-extra-long1: 700ms, + duration-extra-long2: 800ms, + duration-extra-long3: 900ms, + duration-extra-long4: 1000ms, + duration-long1: 450ms, + duration-long2: 500ms, + duration-long3: 550ms, + duration-long4: 600ms, + duration-medium1: 250ms, + duration-medium2: 300ms, + duration-medium3: 350ms, + duration-medium4: 400ms, + duration-short1: 50ms, + duration-short2: 100ms, + duration-short3: 150ms, + duration-short4: 200ms, + easing-emphasized: cubic-bezier(0.2, 0, 0, 1), + easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15), + easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1), + easing-legacy: cubic-bezier(0.4, 0, 0.2, 1), + easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1), + easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1), + easing-linear: cubic-bezier(0, 0, 1, 1), + easing-standard: cubic-bezier(0.2, 0, 0, 1), + easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1), + easing-standard-decelerate: cubic-bezier(0, 0, 0, 1) ); } diff --git a/src/material/core/tokens/m3/_md-sys-shape.scss b/src/material/core/tokens/m3/_md-sys-shape.scss index a61298966965..73c3f30c131e 100644 --- a/src/material/core/tokens/m3/_md-sys-shape.scss +++ b/src/material/core/tokens/m3/_md-sys-shape.scss @@ -3,22 +3,19 @@ // Design system version: v0.161 // -@function values($exclude-hardcoded-values: false) { +@function md-sys-shape-values() { @return ( - 'corner-extra-large': if($exclude-hardcoded-values, null, 28px), - 'corner-extra-large-top': - if($exclude-hardcoded-values, null, (28px 28px 0 0)), - 'corner-extra-small': if($exclude-hardcoded-values, null, 4px), - 'corner-extra-small-top': - if($exclude-hardcoded-values, null, (4px 4px 0 0)), - 'corner-full': if($exclude-hardcoded-values, null, 9999px), - 'corner-large': if($exclude-hardcoded-values, null, 16px), - 'corner-large-end': if($exclude-hardcoded-values, null, (0 16px 16px 0)), - 'corner-large-start': - if($exclude-hardcoded-values, null, (16px 0 0 16px)), - 'corner-large-top': if($exclude-hardcoded-values, null, (16px 16px 0 0)), - 'corner-medium': if($exclude-hardcoded-values, null, 12px), - 'corner-none': if($exclude-hardcoded-values, null, 0), - 'corner-small': if($exclude-hardcoded-values, null, 8px) + corner-extra-large: 28px, + corner-extra-large-top: (28px 28px 0 0), + corner-extra-small: 4px, + corner-extra-small-top: (4px 4px 0 0), + corner-full: 9999px, + corner-large: 16px, + corner-large-end: (0 16px 16px 0), + corner-large-start: (16px 0 0 16px), + corner-large-top: (16px 16px 0 0), + corner-medium: 12px, + corner-none: 0, + corner-small: 8px ); } diff --git a/src/material/core/tokens/m3/_md-sys-state.scss b/src/material/core/tokens/m3/_md-sys-state.scss index 463224a95cf7..ddc9ebfb7aa2 100644 --- a/src/material/core/tokens/m3/_md-sys-state.scss +++ b/src/material/core/tokens/m3/_md-sys-state.scss @@ -3,11 +3,11 @@ // Design system version: v0.161 // -@function values($exclude-hardcoded-values: false) { +@function md-sys-state-values($exclude-hardcoded-values: false) { @return ( - 'dragged-state-layer-opacity': if($exclude-hardcoded-values, null, 0.16), - 'focus-state-layer-opacity': if($exclude-hardcoded-values, null, 0.12), - 'hover-state-layer-opacity': if($exclude-hardcoded-values, null, 0.08), - 'pressed-state-layer-opacity': if($exclude-hardcoded-values, null, 0.12) + dragged-state-layer-opacity: 0.16, + focus-state-layer-opacity: 0.12, + hover-state-layer-opacity: 0.08, + pressed-state-layer-opacity: 0.12 ); } diff --git a/src/material/core/tokens/m3/_md-sys-typescale.scss b/src/material/core/tokens/m3/_md-sys-typescale.scss index 3196faeb04c4..377a33ed66e0 100644 --- a/src/material/core/tokens/m3/_md-sys-typescale.scss +++ b/src/material/core/tokens/m3/_md-sys-typescale.scss @@ -5,321 +5,122 @@ @use 'sass:map'; -@use './md-ref-typeface'; - // Indicates whether alternative tokens should be used $_alternate-tokens: false; -$_default: ( - 'md-ref-typeface': md-ref-typeface.values(), -); +@function md-sys-typescale-values($typography) { + $plain: map.get($typography, plain); + $brand: map.get($typography, brand); + $bold: map.get($typography, bold); + $medium: map.get($typography, medium); + $regular: map.get($typography, regular); -@function values($deps: $_default, $exclude-hardcoded-values: false) { $values: ( - // Warning: risk of reduced fidelity from using this composite typography token. - // Tokens md.sys.typescale.body-large.tracking cannot be represented in the "font" - // property shorthand. Consider using the discrete properties instead. - 'body-large': - if( - $exclude-hardcoded-values, - null, - map.get($deps, 'md-ref-typeface', 'weight-regular') - if($exclude-hardcoded-values, null, 1rem) #{'/'} if( - $exclude-hardcoded-values, - null, - 1.5rem - ) map.get($deps, 'md-ref-typeface', 'plain') - ), - 'body-large-font': map.get($deps, 'md-ref-typeface', 'plain'), - 'body-large-line-height': if($exclude-hardcoded-values, null, 1.5rem), - 'body-large-size': if($exclude-hardcoded-values, null, 1rem), - 'body-large-tracking': if($exclude-hardcoded-values, null, 0.031rem), - 'body-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), - - // Warning: risk of reduced fidelity from using this composite typography token. - // Tokens md.sys.typescale.body-medium.tracking cannot be represented in the "font" - // property shorthand. Consider using the discrete properties instead. - 'body-medium': - if( - $exclude-hardcoded-values, - null, - map.get($deps, 'md-ref-typeface', 'weight-regular') - if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if( - $exclude-hardcoded-values, - null, - 1.25rem - ) map.get($deps, 'md-ref-typeface', 'plain') - ), - 'body-medium-font': map.get($deps, 'md-ref-typeface', 'plain'), - 'body-medium-line-height': if($exclude-hardcoded-values, null, 1.25rem), - 'body-medium-size': if($exclude-hardcoded-values, null, 0.875rem), - 'body-medium-tracking': if($exclude-hardcoded-values, null, 0.016rem), - 'body-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), - // Warning: risk of reduced fidelity from using this composite typography token. - // Tokens md.sys.typescale.body-small.tracking cannot be represented in the "font" - // property shorthand. Consider using the discrete properties instead. - 'body-small': - if( - $exclude-hardcoded-values, - null, - map.get($deps, 'md-ref-typeface', 'weight-regular') - if($exclude-hardcoded-values, null, 0.75rem) #{'/'} if( - $exclude-hardcoded-values, - null, - 1rem - ) map.get($deps, 'md-ref-typeface', 'plain') - ), - 'body-small-font': map.get($deps, 'md-ref-typeface', 'plain'), - 'body-small-line-height': if($exclude-hardcoded-values, null, 1rem), - 'body-small-size': if($exclude-hardcoded-values, null, 0.75rem), - 'body-small-tracking': if($exclude-hardcoded-values, null, 0.025rem), - 'body-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), - // Warning: risk of reduced fidelity from using this composite typography token. - // Tokens md.sys.typescale.display-large.tracking cannot be represented in the "font" - // property shorthand. Consider using the discrete properties instead. - 'display-large': - if( - $exclude-hardcoded-values, - null, - map.get($deps, 'md-ref-typeface', 'weight-regular') - if($exclude-hardcoded-values, null, 3.562rem) #{'/'} if( - $exclude-hardcoded-values, - null, - 4rem - ) map.get($deps, 'md-ref-typeface', 'brand') - ), - 'display-large-font': map.get($deps, 'md-ref-typeface', 'brand'), - 'display-large-line-height': if($exclude-hardcoded-values, null, 4rem), - 'display-large-size': if($exclude-hardcoded-values, null, 3.562rem), - 'display-large-tracking': if($exclude-hardcoded-values, null, -0.016rem), - 'display-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), - // Warning: risk of reduced fidelity from using this composite typography token. - // Tokens md.sys.typescale.display-medium.tracking cannot be represented in the "font" - // property shorthand. Consider using the discrete properties instead. - 'display-medium': - if( - $exclude-hardcoded-values, - null, - map.get($deps, 'md-ref-typeface', 'weight-regular') - if($exclude-hardcoded-values, null, 2.812rem) #{'/'} if( - $exclude-hardcoded-values, - null, - 3.25rem - ) map.get($deps, 'md-ref-typeface', 'brand') - ), - 'display-medium-font': map.get($deps, 'md-ref-typeface', 'brand'), - 'display-medium-line-height': if($exclude-hardcoded-values, null, 3.25rem), - 'display-medium-size': if($exclude-hardcoded-values, null, 2.812rem), - 'display-medium-tracking': if($exclude-hardcoded-values, null, 0), - 'display-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), - // Warning: risk of reduced fidelity from using this composite typography token. - // Tokens md.sys.typescale.display-small.tracking cannot be represented in the "font" - // property shorthand. Consider using the discrete properties instead. - 'display-small': - if( - $exclude-hardcoded-values, - null, - map.get($deps, 'md-ref-typeface', 'weight-regular') - if($exclude-hardcoded-values, null, 2.25rem) #{'/'} if( - $exclude-hardcoded-values, - null, - 2.75rem - ) map.get($deps, 'md-ref-typeface', 'brand') - ), - 'display-small-font': map.get($deps, 'md-ref-typeface', 'brand'), - 'display-small-line-height': if($exclude-hardcoded-values, null, 2.75rem), - 'display-small-size': if($exclude-hardcoded-values, null, 2.25rem), - 'display-small-tracking': if($exclude-hardcoded-values, null, 0), - 'display-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), - // Warning: risk of reduced fidelity from using this composite typography token. - // Tokens md.sys.typescale.headline-large.tracking cannot be represented in the "font" - // property shorthand. Consider using the discrete properties instead. - 'headline-large': - if( - $exclude-hardcoded-values, - null, - map.get($deps, 'md-ref-typeface', 'weight-regular') - if($exclude-hardcoded-values, null, 2rem) #{'/'} if( - $exclude-hardcoded-values, - null, - 2.5rem - ) map.get($deps, 'md-ref-typeface', 'brand') - ), - 'headline-large-font': map.get($deps, 'md-ref-typeface', 'brand'), - 'headline-large-line-height': if($exclude-hardcoded-values, null, 2.5rem), - 'headline-large-size': if($exclude-hardcoded-values, null, 2rem), - 'headline-large-tracking': if($exclude-hardcoded-values, null, 0), - 'headline-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), - // Warning: risk of reduced fidelity from using this composite typography token. - // Tokens md.sys.typescale.headline-medium.tracking cannot be represented in the "font" - // property shorthand. Consider using the discrete properties instead. - 'headline-medium': - if( - $exclude-hardcoded-values, - null, - map.get($deps, 'md-ref-typeface', 'weight-regular') - if($exclude-hardcoded-values, null, 1.75rem) #{'/'} if( - $exclude-hardcoded-values, - null, - 2.25rem - ) map.get($deps, 'md-ref-typeface', 'brand') - ), - 'headline-medium-font': map.get($deps, 'md-ref-typeface', 'brand'), - 'headline-medium-line-height': if($exclude-hardcoded-values, null, 2.25rem), - 'headline-medium-size': if($exclude-hardcoded-values, null, 1.75rem), - 'headline-medium-tracking': if($exclude-hardcoded-values, null, 0), - 'headline-medium-weight': - map.get($deps, 'md-ref-typeface', 'weight-regular'), - // Warning: risk of reduced fidelity from using this composite typography token. - // Tokens md.sys.typescale.headline-small.tracking cannot be represented in the "font" - // property shorthand. Consider using the discrete properties instead. - 'headline-small': - if( - $exclude-hardcoded-values, - null, - map.get($deps, 'md-ref-typeface', 'weight-regular') - if($exclude-hardcoded-values, null, 1.5rem) #{'/'} if( - $exclude-hardcoded-values, - null, - 2rem - ) map.get($deps, 'md-ref-typeface', 'brand') - ), - 'headline-small-font': map.get($deps, 'md-ref-typeface', 'brand'), - 'headline-small-line-height': if($exclude-hardcoded-values, null, 2rem), - 'headline-small-size': if($exclude-hardcoded-values, null, 1.5rem), - 'headline-small-tracking': if($exclude-hardcoded-values, null, 0), - 'headline-small-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), - // Warning: risk of reduced fidelity from using this composite typography token. - // Tokens md.sys.typescale.label-large.tracking cannot be represented in the "font" - // property shorthand. Consider using the discrete properties instead. - 'label-large': - if( - $exclude-hardcoded-values, - null, - map.get($deps, 'md-ref-typeface', 'weight-medium') - if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if( - $exclude-hardcoded-values, - null, - 1.25rem - ) map.get($deps, 'md-ref-typeface', 'plain') - ), - 'label-large-font': map.get($deps, 'md-ref-typeface', 'plain'), - 'label-large-line-height': if($exclude-hardcoded-values, null, 1.25rem), - 'label-large-size': if($exclude-hardcoded-values, null, 0.875rem), - 'label-large-tracking': if($exclude-hardcoded-values, null, 0.006rem), - 'label-large-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'), - 'label-large-weight-prominent': - map.get($deps, 'md-ref-typeface', 'weight-bold'), - // Warning: risk of reduced fidelity from using this composite typography token. - // Tokens md.sys.typescale.label-medium.tracking cannot be represented in the "font" - // property shorthand. Consider using the discrete properties instead. - 'label-medium': - if( - $exclude-hardcoded-values, - null, - map.get($deps, 'md-ref-typeface', 'weight-medium') - if($exclude-hardcoded-values, null, 0.75rem) #{'/'} if( - $exclude-hardcoded-values, - null, - 1rem - ) map.get($deps, 'md-ref-typeface', 'plain') - ), - 'label-medium-font': map.get($deps, 'md-ref-typeface', 'plain'), - 'label-medium-line-height': if($exclude-hardcoded-values, null, 1rem), - 'label-medium-size': if($exclude-hardcoded-values, null, 0.75rem), - 'label-medium-tracking': if($exclude-hardcoded-values, null, 0.031rem), - 'label-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'), - 'label-medium-weight-prominent': - map.get($deps, 'md-ref-typeface', 'weight-bold'), - // Warning: risk of reduced fidelity from using this composite typography token. - // Tokens md.sys.typescale.label-small.tracking cannot be represented in the "font" - // property shorthand. Consider using the discrete properties instead. - 'label-small': - if( - $exclude-hardcoded-values, - null, - map.get($deps, 'md-ref-typeface', 'weight-medium') - if($exclude-hardcoded-values, null, 0.688rem) #{'/'} if( - $exclude-hardcoded-values, - null, - 1rem - ) map.get($deps, 'md-ref-typeface', 'plain') - ), - 'label-small-font': map.get($deps, 'md-ref-typeface', 'plain'), - 'label-small-line-height': if($exclude-hardcoded-values, null, 1rem), - 'label-small-size': if($exclude-hardcoded-values, null, 0.688rem), - 'label-small-tracking': if($exclude-hardcoded-values, null, 0.031rem), - 'label-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'), - // Warning: risk of reduced fidelity from using this composite typography token. - // Tokens md.sys.typescale.title-large.tracking cannot be represented in the "font" - // property shorthand. Consider using the discrete properties instead. - 'title-large': - if( - $exclude-hardcoded-values, - null, - map.get($deps, 'md-ref-typeface', 'weight-regular') - if($exclude-hardcoded-values, null, 1.375rem) #{'/'} if( - $exclude-hardcoded-values, - null, - 1.75rem - ) map.get($deps, 'md-ref-typeface', 'brand') - ), - 'title-large-font': map.get($deps, 'md-ref-typeface', 'brand'), - 'title-large-line-height': if($exclude-hardcoded-values, null, 1.75rem), - 'title-large-size': if($exclude-hardcoded-values, null, 1.375rem), - 'title-large-tracking': if($exclude-hardcoded-values, null, 0), - 'title-large-weight': map.get($deps, 'md-ref-typeface', 'weight-regular'), - // Warning: risk of reduced fidelity from using this composite typography token. - // Tokens md.sys.typescale.title-medium.tracking cannot be represented in the "font" - // property shorthand. Consider using the discrete properties instead. - 'title-medium': - if( - $exclude-hardcoded-values, - null, - map.get($deps, 'md-ref-typeface', 'weight-medium') - if($exclude-hardcoded-values, null, 1rem) #{'/'} if( - $exclude-hardcoded-values, - null, - 1.5rem - ) map.get($deps, 'md-ref-typeface', 'plain') - ), - 'title-medium-font': map.get($deps, 'md-ref-typeface', 'plain'), - 'title-medium-line-height': if($exclude-hardcoded-values, null, 1.5rem), - 'title-medium-size': if($exclude-hardcoded-values, null, 1rem), - 'title-medium-tracking': if($exclude-hardcoded-values, null, 0.009rem), - 'title-medium-weight': map.get($deps, 'md-ref-typeface', 'weight-medium'), - // Warning: risk of reduced fidelity from using this composite typography token. - // Tokens md.sys.typescale.title-small.tracking cannot be represented in the "font" - // property shorthand. Consider using the discrete properties instead. - 'title-small': - if( - $exclude-hardcoded-values, - null, - map.get($deps, 'md-ref-typeface', 'weight-medium') - if($exclude-hardcoded-values, null, 0.875rem) #{'/'} if( - $exclude-hardcoded-values, - null, - 1.25rem - ) map.get($deps, 'md-ref-typeface', 'plain') - ), - 'title-small-font': map.get($deps, 'md-ref-typeface', 'plain'), - 'title-small-line-height': if($exclude-hardcoded-values, null, 1.25rem), - 'title-small-size': if($exclude-hardcoded-values, null, 0.875rem), - 'title-small-tracking': if($exclude-hardcoded-values, null, 0.006rem), - 'title-small-weight': map.get($deps, 'md-ref-typeface', 'weight-medium') + body-large: $regular 1rem #{'/'} 1.5rem $plain, + body-large-font: $plain, + body-large-line-height: 1.5rem, + body-large-size: 1rem, + body-large-tracking: 0.031rem, + body-large-weight: $regular, + body-medium: $regular 0.875rem #{'/'} 1.25rem $plain, + body-medium-font: $plain, + body-medium-line-height: 1.25rem, + body-medium-size: 0.875rem, + body-medium-tracking: 0.016rem, + body-medium-weight: $regular, + body-small: $regular 0.75rem #{'/'} 1rem $plain, + body-small-font: $plain, + body-small-line-height: 1rem, + body-small-size: 0.75rem, + body-small-tracking: 0.025rem, + body-small-weight: $regular, + display-large: $regular 3.562rem #{'/'} 4rem $brand, + display-large-font: $brand, + display-large-line-height: 4rem, + display-large-size: 3.562rem, + display-large-tracking: -0.016rem, + display-large-weight: $regular, + display-medium: $regular 2.812rem #{'/'} 3.25rem $brand, + display-medium-font: $brand, + display-medium-line-height: 3.25rem, + display-medium-size: 2.812rem, + display-medium-tracking: 0, + display-medium-weight: $regular, + display-small: $regular 2.25rem #{'/'} 2.75rem $brand, + display-small-font: $brand, + display-small-line-height: 2.75rem, + display-small-size: 2.25rem, + display-small-tracking: 0, + display-small-weight: $regular, + headline-large: $regular 2rem #{'/'} 2.5rem $brand, + headline-large-font: $brand, + headline-large-line-height: 2.5rem, + headline-large-size: 2rem, + headline-large-tracking: 0, + headline-large-weight: $regular, + headline-medium: $regular 1.75rem #{'/'} 2.25rem $brand, + headline-medium-font: $brand, + headline-medium-line-height: 2.25rem, + headline-medium-size: 1.75rem, + headline-medium-tracking: 0, + headline-medium-weight: $regular, + headline-small: $regular 1.5rem #{'/'} 2rem $brand, + headline-small-font: $brand, + headline-small-line-height: 2rem, + headline-small-size: 1.5rem, + headline-small-tracking: 0, + headline-small-weight: $regular, + label-large: $medium 0.875rem #{'/'} 1.25rem $plain, + label-large-font: $plain, + label-large-line-height: 1.25rem, + label-large-size: 0.875rem, + label-large-tracking: 0.006rem, + label-large-weight: $medium, + label-large-weight-prominent: $bold, + label-medium: $medium 0.75rem #{'/'} 1rem $plain, + label-medium-font: $plain, + label-medium-line-height: 1rem, + label-medium-size: 0.75rem, + label-medium-tracking: 0.031rem, + label-medium-weight: $medium, + label-medium-weight-prominent: $bold, + label-small: $medium 0.688rem #{'/'} 1rem $plain, + label-small-font: $plain, + label-small-line-height: 1rem, + label-small-size: 0.688rem, + label-small-tracking: 0.031rem, + label-small-weight: $medium, + title-large: $regular 1.375rem #{'/'} 1.75rem $brand, + title-large-font: $brand, + title-large-line-height: 1.75rem, + title-large-size: 1.375rem, + title-large-tracking: 0, + title-large-weight: $regular, + title-medium: $medium 1rem #{'/'} 1.5rem $plain, + title-medium-font: $plain, + title-medium-line-height: 1.5rem, + title-medium-size: 1rem, + title-medium-tracking: 0.009rem, + title-medium-weight: $medium, + title-small: $medium 0.875rem #{'/'} 1.25rem $plain, + title-small-font: $plain, + title-small-line-height: 1.25rem, + title-small-size: 0.875rem, + title-small-tracking: 0.006rem, + title-small-weight: $medium ); @if ($_alternate-tokens) { $values: map.merge($values, ( - 'body-large-tracking': if($exclude-hardcoded-values, null, 0), - 'body-medium-tracking': if($exclude-hardcoded-values, null, 0), - 'body-small-tracking': if($exclude-hardcoded-values, null, 0.006rem), - 'display-large-tracking': if($exclude-hardcoded-values, null, 0), - 'label-large-tracking': if($exclude-hardcoded-values, null, 0), - 'label-medium-tracking': if($exclude-hardcoded-values, null, 0.006rem), - 'label-small-tracking': if($exclude-hardcoded-values, null, 0.006rem), - 'title-medium-tracking': if($exclude-hardcoded-values, null, 0), - 'title-small-tracking': if($exclude-hardcoded-values, null, 0), + body-large-tracking: 0, + body-medium-tracking: 0, + body-small-tracking: 0.006rem, + display-large-tracking: 0, + label-large-tracking: 0, + label-medium-tracking: 0.006rem, + label-small-tracking: 0.006rem, + title-medium-tracking: 0, + title-small-tracking: 0, )); } diff --git a/tools/extract-tokens/extract-tokens.ts b/tools/extract-tokens/extract-tokens.ts index 8ada0a9fd7bb..dcd0715048b5 100644 --- a/tools/extract-tokens/extract-tokens.ts +++ b/tools/extract-tokens/extract-tokens.ts @@ -232,9 +232,9 @@ function getTokenExtractionCode( @error 'File must define a ${defineOverrides} function for docs extraction purposes'; } - $__all-color: ${m3Tokens}.generate-color-tokens(light, ${palettes}.$azure-palette, - ${palettes}.$azure-palette, ${palettes}.$azure-palette, 'mat-sys'); - $__all-typography: ${m3Tokens}.generate-typography-tokens(font, 100, 100, 100, 100, 'mat-sys'); + $__all-color: ${m3Tokens}.generate-color-tokens(light, ${palettes}.$azure-palette, 'mat-sys'); + $__all-typography: ${m3Tokens}.generate-typography-tokens(( + plain: (font), brand: (font), bold: 100, medium: 100, regular: 100), 'mat-sys'); $__all-density: ${m3System}.get-density-tokens(0); $__all-base: ${m3Tokens}.generate-base-tokens(); $__results: ();