diff --git a/src/material/core/theming/_definition.scss b/src/material/core/theming/_definition.scss index 595b8fc69137..952aee73433a 100644 --- a/src/material/core/theming/_definition.scss +++ b/src/material/core/theming/_definition.scss @@ -76,7 +76,27 @@ $theme-version: 1; // density $density-scale: map.get($density-config, scale) or 0; + $system-maps: ( + m3-tokens.get-sys-color($type, $palettes, $color-system-variables-prefix), + m3.md-sys-elevation-values(), + m3.md-sys-motion-values(), + m3.md-sys-shape-values(), + m3.md-sys-state-values(), + ( + // Form field native select option text color + neutral10: map.get($palettes, neutral, 10), + // Sidenav scrim (container background shadow when opened), + neutral-variant20: map.get($palettes, neutral-variant, 20), + ), + m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix), + ); + $system: (); + @each $sys-map in $system-maps { + $system: map.merge($system, $sys-map); + } + @return ( + _mat-system: $system, $internals: ( base-tokens: m3-tokens.generate-base-tokens(), color-system-variables-prefix: $color-system-variables-prefix, @@ -84,19 +104,6 @@ $theme-version: 1; m3-tokens.generate-color-tokens($type, $palettes, $color-system-variables-prefix), density-scale: $density-scale, font-definition: $typography, - md-sys-color: m3-tokens.get-sys-color($type, $palettes, $color-system-variables-prefix), - md-sys-elevation: m3.md-sys-elevation-values(), - md-sys-motion: m3.md-sys-motion-values(), - md-sys-shape: m3.md-sys-shape-values(), - md-sys-state: m3.md-sys-state-values(), - md-ref-palette: ( - // Form field native select option text color - neutral10: map.get($palettes, neutral, 10), - // Sidenav scrim (container background shadow when opened), - neutral-variant20: map.get($palettes, neutral-variant, 20), - ), - md-sys-typescale: - m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix), palettes: $palettes, theme-type: $type, theme-version: $theme-version, diff --git a/src/material/core/theming/tests/theming-definition-api.spec.ts b/src/material/core/theming/tests/theming-definition-api.spec.ts index f1050cbdf461..fe96363cc029 100644 --- a/src/material/core/theming/tests/theming-definition-api.spec.ts +++ b/src/material/core/theming/tests/theming-definition-api.spec.ts @@ -74,13 +74,6 @@ describe('theming definition api', () => { 'color-tokens', 'density-scale', 'font-definition', - 'md-sys-color', - 'md-sys-elevation', - 'md-sys-motion', - 'md-sys-shape', - 'md-sys-state', - 'md-ref-palette', - 'md-sys-typescale', 'palettes', 'theme-type', 'theme-version', diff --git a/src/material/core/tokens/_m3-utils.scss b/src/material/core/tokens/_m3-utils.scss index 0d096e151c7f..9a18d3011781 100644 --- a/src/material/core/tokens/_m3-utils.scss +++ b/src/material/core/tokens/_m3-utils.scss @@ -13,20 +13,7 @@ // Gets the theme's system values as a flat map. @function get-system($theme) { - $system: (); - $system: map.merge($system, - map.get($theme, _mat-theming-internals-do-not-access, md-sys-color)); - $system: map.merge($system, - map.get($theme, _mat-theming-internals-do-not-access, md-sys-elevation)); - $system: map.merge($system, - map.get($theme, _mat-theming-internals-do-not-access, md-sys-shape)); - $system: map.merge($system, - map.get($theme, _mat-theming-internals-do-not-access, md-sys-state)); - $system: map.merge($system, - map.get($theme, _mat-theming-internals-do-not-access, md-sys-typescale)); - $system: map.merge($system, - map.get($theme, _mat-theming-internals-do-not-access, md-ref-palette)); - @return $system; + @return map.get($theme, _mat-system); } // Returns the color with an opacity value using color-mix. If the color is a variable name, it diff --git a/src/material/core/tokens/m3/_md-sys-color.scss b/src/material/core/tokens/m3/_md-sys-color.scss index b37fe69dbb4e..9eb5802a6231 100644 --- a/src/material/core/tokens/m3/_md-sys-color.scss +++ b/src/material/core/tokens/m3/_md-sys-color.scss @@ -8,7 +8,7 @@ // Indicates whether alternative tokens should be used $_alternate-tokens: false; -@function md-sys-color-values-dark($palettes) { +@function md-sys-color-values-dark($palettes: ()) { $values: ( background: map.get($palettes, neutral, 6), error: map.get($palettes, error, 80), @@ -80,7 +80,7 @@ $_alternate-tokens: false; @return $values; } -@function md-sys-color-values-light($palettes) { +@function md-sys-color-values-light($palettes: ()) { $values: ( background: map.get($palettes, neutral, 98), error: map.get($palettes, error, 40), diff --git a/src/material/core/tokens/m3/_md-sys-typescale.scss b/src/material/core/tokens/m3/_md-sys-typescale.scss index 377a33ed66e0..1d70b8505f82 100644 --- a/src/material/core/tokens/m3/_md-sys-typescale.scss +++ b/src/material/core/tokens/m3/_md-sys-typescale.scss @@ -8,7 +8,7 @@ // Indicates whether alternative tokens should be used $_alternate-tokens: false; -@function md-sys-typescale-values($typography) { +@function md-sys-typescale-values($typography: ()) { $plain: map.get($typography, plain); $brand: map.get($typography, brand); $bold: map.get($typography, bold); diff --git a/src/material/core/tokens/m3/_theme.scss b/src/material/core/tokens/m3/_theme.scss index dd8dc87b32db..b037b7cf97f0 100644 --- a/src/material/core/tokens/m3/_theme.scss +++ b/src/material/core/tokens/m3/_theme.scss @@ -1,4 +1,3 @@ -@use '../../theming/palettes'; @use './md-sys-color'; @use './md-sys-elevation'; @use './md-sys-shape'; @@ -17,31 +16,20 @@ @return $new-map; } -/// Map key used to store internals of theme config. -$internals: _mat-theming-internals-do-not-access; - -$placeholder-palettes: md-sys-color.md-sys-color-values-light(palettes.$blue-palette); -$placeholder-palettes: map.set($placeholder-palettes, primary, palettes.$blue-palette); -$app-vars: ( - 'md-sys-color': _create-system-app-vars-map( - md-sys-color.md-sys-color-values-light($placeholder-palettes)), - 'md-sys-typescale': _create-system-app-vars-map(md-sys-typescale.md-sys-typescale-values(( - brand: (Roboto), - plain: (Roboto), - bold: 700, - medium: 500, - regular: 400 - ))), - 'md-sys-elevation': _create-system-app-vars-map(md-sys-elevation.md-sys-elevation-values()), - 'md-sys-state': _create-system-app-vars-map(md-sys-state.md-sys-state-values()), - 'md-sys-shape': _create-system-app-vars-map(md-sys-shape.md-sys-shape-values()), - // Add a subset of palette-specific colors used by components instead of system values - 'md-ref-palette': _create-system-app-vars-map( - ( - neutral10: '', // Form field native select option text color - neutral-variant20: '', // Sidenav scrim (container background shadow when opened), - ) +$_sys-maps: ( + md-sys-color.md-sys-color-values-light(), + md-sys-typescale.md-sys-typescale-values(), + md-sys-elevation.md-sys-elevation-values(), + md-sys-state.md-sys-state-values(), + md-sys-shape.md-sys-shape-values(), + ( + neutral10: '', // Form field native select option text color + neutral-variant20: '', // Sidenav scrim (container background shadow when opened), ), ); -$sys-theme: ($internals: $app-vars); +$_system: (); +@each $sys-map in $_sys-maps { + $_system: map.merge($_system, _create-system-app-vars-map($sys-map)); +} +$sys-theme: (_mat-system: $_system);