Skip to content

Commit d0716cd

Browse files
andrewseguinandrewseguin
authored
refactor: move m3 system values to _mat-system like m2 (#31337)
* refactor: move m3 system values to _mat-system like m2 * refactor: fix test * refactor: fix var name
1 parent 115abee commit d0716cd

File tree

6 files changed

+38
-63
lines changed

6 files changed

+38
-63
lines changed

‎src/material/core/theming/_definition.scss

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -76,27 +76,34 @@ $theme-version: 1;
7676
// density
7777
$density-scale: map.get($density-config, scale) or 0;
7878

79+
$system-maps: (
80+
m3-tokens.get-sys-color($type, $palettes, $color-system-variables-prefix),
81+
m3.md-sys-elevation-values(),
82+
m3.md-sys-motion-values(),
83+
m3.md-sys-shape-values(),
84+
m3.md-sys-state-values(),
85+
(
86+
// Form field native select option text color
87+
neutral10: map.get($palettes, neutral, 10),
88+
// Sidenav scrim (container background shadow when opened),
89+
neutral-variant20: map.get($palettes, neutral-variant, 20),
90+
),
91+
m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix),
92+
);
93+
$system: ();
94+
@each $sys-map in $system-maps {
95+
$system: map.merge($system, $sys-map);
96+
}
97+
7998
@return (
99+
_mat-system: $system,
80100
$internals: (
81101
base-tokens: m3-tokens.generate-base-tokens(),
82102
color-system-variables-prefix: $color-system-variables-prefix,
83103
color-tokens:
84104
m3-tokens.generate-color-tokens($type, $palettes, $color-system-variables-prefix),
85105
density-scale: $density-scale,
86106
font-definition: $typography,
87-
md-sys-color: m3-tokens.get-sys-color($type, $palettes, $color-system-variables-prefix),
88-
md-sys-elevation: m3.md-sys-elevation-values(),
89-
md-sys-motion: m3.md-sys-motion-values(),
90-
md-sys-shape: m3.md-sys-shape-values(),
91-
md-sys-state: m3.md-sys-state-values(),
92-
md-ref-palette: (
93-
// Form field native select option text color
94-
neutral10: map.get($palettes, neutral, 10),
95-
// Sidenav scrim (container background shadow when opened),
96-
neutral-variant20: map.get($palettes, neutral-variant, 20),
97-
),
98-
md-sys-typescale:
99-
m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix),
100107
palettes: $palettes,
101108
theme-type: $type,
102109
theme-version: $theme-version,

‎src/material/core/theming/tests/theming-definition-api.spec.ts

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -74,13 +74,6 @@ describe('theming definition api', () => {
7474
'color-tokens',
7575
'density-scale',
7676
'font-definition',
77-
'md-sys-color',
78-
'md-sys-elevation',
79-
'md-sys-motion',
80-
'md-sys-shape',
81-
'md-sys-state',
82-
'md-ref-palette',
83-
'md-sys-typescale',
8477
'palettes',
8578
'theme-type',
8679
'theme-version',

‎src/material/core/tokens/_m3-utils.scss

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,7 @@
1313

1414
// Gets the theme's system values as a flat map.
1515
@function get-system($theme) {
16-
$system: ();
17-
$system: map.merge($system,
18-
map.get($theme, _mat-theming-internals-do-not-access, md-sys-color));
19-
$system: map.merge($system,
20-
map.get($theme, _mat-theming-internals-do-not-access, md-sys-elevation));
21-
$system: map.merge($system,
22-
map.get($theme, _mat-theming-internals-do-not-access, md-sys-shape));
23-
$system: map.merge($system,
24-
map.get($theme, _mat-theming-internals-do-not-access, md-sys-state));
25-
$system: map.merge($system,
26-
map.get($theme, _mat-theming-internals-do-not-access, md-sys-typescale));
27-
$system: map.merge($system,
28-
map.get($theme, _mat-theming-internals-do-not-access, md-ref-palette));
29-
@return $system;
16+
@return map.get($theme, _mat-system);
3017
}
3118

3219
// Returns the color with an opacity value using color-mix. If the color is a variable name, it

‎src/material/core/tokens/m3/_md-sys-color.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
// Indicates whether alternative tokens should be used
99
$_alternate-tokens: false;
1010

11-
@function md-sys-color-values-dark($palettes) {
11+
@function md-sys-color-values-dark($palettes: ()) {
1212
$values: (
1313
background: map.get($palettes, neutral, 6),
1414
error: map.get($palettes, error, 80),
@@ -80,7 +80,7 @@ $_alternate-tokens: false;
8080
@return $values;
8181
}
8282

83-
@function md-sys-color-values-light($palettes) {
83+
@function md-sys-color-values-light($palettes: ()) {
8484
$values: (
8585
background: map.get($palettes, neutral, 98),
8686
error: map.get($palettes, error, 40),

‎src/material/core/tokens/m3/_md-sys-typescale.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
// Indicates whether alternative tokens should be used
99
$_alternate-tokens: false;
1010

11-
@function md-sys-typescale-values($typography) {
11+
@function md-sys-typescale-values($typography: ()) {
1212
$plain: map.get($typography, plain);
1313
$brand: map.get($typography, brand);
1414
$bold: map.get($typography, bold);

‎src/material/core/tokens/m3/_theme.scss

Lines changed: 14 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use '../../theming/palettes';
21
@use './md-sys-color';
32
@use './md-sys-elevation';
43
@use './md-sys-shape';
@@ -17,31 +16,20 @@
1716
@return $new-map;
1817
}
1918

20-
/// Map key used to store internals of theme config.
21-
$internals: _mat-theming-internals-do-not-access;
22-
23-
$placeholder-palettes: md-sys-color.md-sys-color-values-light(palettes.$blue-palette);
24-
$placeholder-palettes: map.set($placeholder-palettes, primary, palettes.$blue-palette);
25-
$app-vars: (
26-
'md-sys-color': _create-system-app-vars-map(
27-
md-sys-color.md-sys-color-values-light($placeholder-palettes)),
28-
'md-sys-typescale': _create-system-app-vars-map(md-sys-typescale.md-sys-typescale-values((
29-
brand: (Roboto),
30-
plain: (Roboto),
31-
bold: 700,
32-
medium: 500,
33-
regular: 400
34-
))),
35-
'md-sys-elevation': _create-system-app-vars-map(md-sys-elevation.md-sys-elevation-values()),
36-
'md-sys-state': _create-system-app-vars-map(md-sys-state.md-sys-state-values()),
37-
'md-sys-shape': _create-system-app-vars-map(md-sys-shape.md-sys-shape-values()),
38-
// Add a subset of palette-specific colors used by components instead of system values
39-
'md-ref-palette': _create-system-app-vars-map(
40-
(
41-
neutral10: '', // Form field native select option text color
42-
neutral-variant20: '', // Sidenav scrim (container background shadow when opened),
43-
)
19+
$_sys-maps: (
20+
md-sys-color.md-sys-color-values-light(),
21+
md-sys-typescale.md-sys-typescale-values(),
22+
md-sys-elevation.md-sys-elevation-values(),
23+
md-sys-state.md-sys-state-values(),
24+
md-sys-shape.md-sys-shape-values(),
25+
(
26+
neutral10: '', // Form field native select option text color
27+
neutral-variant20: '', // Sidenav scrim (container background shadow when opened),
4428
),
4529
);
4630

47-
$sys-theme: ($internals: $app-vars);
31+
$_system: ();
32+
@each $sys-map in $_sys-maps {
33+
$_system: map.merge($_system, _create-system-app-vars-map($sys-map));
34+
}
35+
$sys-theme: (_mat-system: $_system);

0 commit comments

Comments
 (0)