Skip to content

Commit 8d1860e

Browse files
andrewseguinAndrew Seguin
andrewseguin
and
Andrew Seguin
authored
refactor: move m2 system values (#31318)
* refactor: move m2 system values # Conflicts: # src/material/slider/_m2-slider.scss * refactor: add empty map defaults --------- Co-authored-by: Andrew Seguin <andrewseguin@google.com>
1 parent 029e39c commit 8d1860e

File tree

23 files changed

+143
-164
lines changed

23 files changed

+143
-164
lines changed

‎src/material-experimental/column-resize/_column-resize-theme.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use '@angular/material' as mat;
2+
@use 'sass:map';
23

34
@mixin color($theme) {
45
$resizable-hover-divider: mat.get-theme-color($theme, primary, 600);
@@ -64,15 +65,15 @@
6465

6566
.mat-header-cell:not(.mat-resizable)::after,
6667
.mat-mdc-header-cell:not(.mat-resizable)::after {
67-
background: mat.get-theme-color($theme, system, outline);
68+
background: map.get($theme, _mat-system, outline);
6869
}
6970

7071
.mat-resizable-handle {
7172
background: $resizable-hover-divider;
7273
}
7374

7475
.cdk-resizable-resize-disabled > .mat-resizable-handle {
75-
background: mat.get-theme-color($theme, system, outline);
76+
background: map.get($theme, _mat-system, outline);
7677
}
7778
}
7879

‎src/material-experimental/popover-edit/_popover-edit-theme.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
@use '@angular/cdk';
22
@use '@angular/material' as mat;
3+
@use 'sass:map';
34

45
@function _hover-content-background($direction, $background-color) {
56
@return linear-gradient($direction, rgba($background-color, 0), $background-color 8px);
67
}
78

89
@mixin color($theme) {
9-
$background-color: mat.get-theme-color($theme, system, surface);
10+
$background-color: map.get($theme, _mat-system, surface);
1011

1112
// TODO: these structural styles don't belong in the `color` part of a theme.
1213
// We should figure out a better place for them.

‎src/material/autocomplete/_m2-autocomplete.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
@use '../core/theming/inspection';
21
@use '../core/style/elevation';
2+
@use '../core/tokens/m2-utils';
3+
@use 'sass:map';
34

45
// Tokens that can't be configured through Angular Material's current theming API,
56
// but may be in a future version of the theming API.
@@ -12,8 +13,10 @@
1213

1314
// Tokens that can be configured through Angular Material's color theming API.
1415
@function get-color-tokens($theme) {
16+
$system: m2-utils.get-system($theme);
17+
1518
@return (
16-
autocomplete-background-color: inspection.get-theme-color($theme, system, surface)
19+
autocomplete-background-color: map.get($system, surface)
1720
);
1821
}
1922

‎src/material/bottom-sheet/_m2-bottom-sheet.scss

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
@use '../core/theming/inspection';
2+
@use '../core/tokens/m2-utils';
3+
@use 'sass:map';
24

35
// Tokens that can't be configured through Angular Material's current theming API,
46
// but may be in a future version of the theming API.
@@ -11,9 +13,11 @@
1113

1214
// Tokens that can be configured through Angular Material's color theming API.
1315
@function get-color-tokens($theme) {
16+
$system: m2-utils.get-system($theme);
17+
1418
@return (
15-
bottom-sheet-container-text-color: inspection.get-theme-color($theme, system, on-surface),
16-
bottom-sheet-container-background-color: inspection.get-theme-color($theme, system, surface),
19+
bottom-sheet-container-text-color: map.get($system, on-surface),
20+
bottom-sheet-container-background-color: map.get($system, surface),
1721
);
1822
}
1923

‎src/material/button/_m2-button.scss

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@
4444
@function get-color-tokens($theme) {
4545
$system: m2-utils.get-system($theme);
4646
$is-dark: inspection.get-theme-type($theme) == dark;
47-
$outline: inspection.get-theme-color($theme, system, outline);
4847
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
4948
$disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
5049

@@ -61,12 +60,12 @@
6160
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
6261
button-filled-state-layer-color: map.get($system, on-surface),
6362
button-outlined-disabled-label-text-color: $disabled,
64-
button-outlined-disabled-outline-color: $outline,
63+
button-outlined-disabled-outline-color: map.get($system, outline),
6564
button-outlined-disabled-state-layer-color: map.get($system, on-surface-variant),
6665
button-outlined-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
6766
button-outlined-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
6867
button-outlined-label-text-color: map.get($system, on-surface),
69-
button-outlined-outline-color: $outline,
68+
button-outlined-outline-color: map.get($system, outline),
7069
button-outlined-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
7170
button-outlined-ripple-color: m3-utils.color-with-opacity(
7271
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),

‎src/material/card/_m2-card.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
card-elevated-container-elevation: elevation.get-box-shadow(1),
2424
card-outlined-container-color: map.get($system, surface),
2525
card-outlined-container-elevation: elevation.get-box-shadow(0),
26-
card-outlined-outline-color: inspection.get-theme-color($theme, system, outline),
26+
card-outlined-outline-color: map.get($system, outline),
2727
card-subtitle-text-color: map.get($system, on-surface-variant),
2828
card-filled-container-color: map.get($system, surface),
2929
card-filled-container-elevation: elevation.get-box-shadow(0)

‎src/material/core/m2/_theming.scss

Lines changed: 72 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -113,18 +113,34 @@
113113
@return $theme;
114114
}
115115

116-
// Creates a light-themed color configuration from the specified
117-
// primary, accent and warn palettes.
118-
@function _mat-create-light-color-config($primary, $accent, $warn: null) {
119-
$warn: if($warn != null, $warn, define-palette(palette.$red-palette));
120-
@return (
121-
primary: $primary,
122-
accent: $accent,
123-
warn: $warn,
124-
is-dark: false,
125-
foreground: palette.$light-theme-foreground-palette,
126-
background: palette.$light-theme-background-palette,
127-
system: (
116+
@function _define-system($primary, $accent, $warn, $is-dark) {
117+
$system: (
118+
primary: map.get($primary, default),
119+
on-primary: map.get($primary, default-contrast),
120+
secondary: map.get($accent, default),
121+
on-secondary: map.get($accent, default-contrast),
122+
error: map.get($warn, default),
123+
on-error: map.get($warn, default-contrast),
124+
shadow: black,
125+
hover-state-layer-opacity: 0.04,
126+
focus-state-layer-opacity: 0.12,
127+
pressed-state-layer-opacity: 0.12,
128+
);
129+
130+
@if $is-dark {
131+
@return map.merge($system, (
132+
surface: map.get(palette.$grey-palette, 800),
133+
surface-variant: #4a4a4a,
134+
on-surface: white,
135+
on-surface-variant: rgba(white, 0.7),
136+
background: #303030,
137+
inverse-surface: white,
138+
inverse-on-surface: rgba(black, 0.87),
139+
outline: rgba(white, 0.12),
140+
outline-variant: rgba(white, 0.38),
141+
));
142+
} @else {
143+
@return map.merge($system, (
128144
surface: white,
129145
surface-variant: #f6f6f6,
130146
on-surface: rgba(black, 0.87),
@@ -134,62 +150,34 @@
134150
inverse-on-surface: white,
135151
outline: rgba(black, 0.12),
136152
outline-variant: rgba(black, 0.38),
137-
hover-state-layer-opacity: 0.04,
138-
focus-state-layer-opacity: 0.12,
139-
pressed-state-layer-opacity: 0.12,
140-
shadow: black,
141-
primary: map.get($primary, default),
142-
on-primary: map.get($primary, default-contrast),
143-
secondary: map.get($accent, default),
144-
on-secondary: map.get($accent, default-contrast),
145-
error: map.get($warn, default),
146-
on-error: map.get($warn, default-contrast),
147-
),
148-
);
153+
));
154+
}
149155
}
150156

151-
// Creates a dark-themed color configuration from the specified
157+
// Creates a color configuration from the specified
152158
// primary, accent and warn palettes.
153-
@function _mat-create-dark-color-config($primary, $accent, $warn: null) {
159+
@function _mat-create-color-config($primary, $accent, $warn: null, $is-dark) {
154160
$warn: if($warn != null, $warn, define-palette(palette.$red-palette));
161+
$foreground:
162+
if($is-dark, palette.$dark-theme-foreground-palette, palette.$light-theme-foreground-palette);
163+
$background:
164+
if($is-dark, palette.$dark-theme-background-palette, palette.$light-theme-background-palette);
165+
155166
@return (
156167
primary: $primary,
157168
accent: $accent,
158169
warn: $warn,
159-
is-dark: true,
160-
foreground: palette.$dark-theme-foreground-palette,
161-
background: palette.$dark-theme-background-palette,
162-
system: (
163-
surface: map.get(palette.$grey-palette, 800),
164-
surface-variant: #4a4a4a,
165-
on-surface: white,
166-
on-surface-variant: rgba(white, 0.7),
167-
background: #303030,
168-
inverse-surface: white,
169-
inverse-on-surface: rgba(black, 0.87),
170-
outline: rgba(white, 0.12),
171-
outline-variant: rgba(white, 0.38),
172-
hover-state-layer-opacity: 0.04,
173-
focus-state-layer-opacity: 0.12,
174-
pressed-state-layer-opacity: 0.12,
175-
shadow: black,
176-
primary: map.get($primary, default),
177-
on-primary: map.get($primary, default-contrast),
178-
secondary: map.get($accent, default),
179-
on-secondary: map.get($accent, default-contrast),
180-
error: map.get($warn, default),
181-
on-error: map.get($warn, default-contrast),
182-
),
170+
is-dark: $is-dark,
171+
foreground: $foreground,
172+
background: $background,
183173
);
184174
}
185175

186-
// TODO: Remove legacy API and rename `$primary` below to `$config`. Currently it cannot be renamed
187-
// as it would break existing apps that set the parameter by name.
188-
189-
/// Creates a container object for a light theme to be given to individual component theme mixins.
176+
/// Creates a container object for a theme to be given to individual component theme mixins.
190177
/// @param {Map} $primary The theme configuration object.
191178
/// @returns {Map} A complete Angular Material theme map.
192-
@function define-light-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette)) {
179+
@function _define-theme(
180+
$primary, $accent: null, $warn: define-palette(palette.$red-palette), $is-dark) {
193181
// This function creates a container object for the individual component theme mixins. Consumers
194182
// can construct such an object by calling this function, or by building the object manually.
195183
// There are two possible ways to invoke this function in order to create such an object:
@@ -206,13 +194,15 @@
206194
@if $accent != null {
207195
@warn theming.$private-legacy-theme-warning;
208196
$theme: _mat-validate-theme(
209-
(
210-
_is-legacy-theme: true,
211-
color: _mat-create-light-color-config($primary, $accent, $warn),
212-
)
197+
(
198+
_is-legacy-theme: true,
199+
color: _mat-create-color-config($primary, $accent, $warn, $is-dark),
200+
)
213201
);
214202

215-
@return _internalize-theme(theming.private-create-backwards-compatibility-theme($theme));
203+
$theme: _internalize-theme(theming.private-create-backwards-compatibility-theme($theme));
204+
$theme: map.set($theme, _mat-system, _define-system($primary, $accent, $warn, $is-dark));
205+
@return $theme;
216206
}
217207
// If the map pattern is used (1), we just pass-through the configurations for individual
218208
// parts of the theming system, but update the `color` configuration if set. As explained
@@ -224,15 +214,30 @@
224214
$accent: map.get($color-settings, accent);
225215
$warn: map.get($color-settings, warn);
226216
$result: map.merge(
227-
$result,
228-
(
229-
color: _mat-create-light-color-config($primary, $accent, $warn),
230-
)
217+
$result,
218+
(
219+
color: _mat-create-color-config($primary, $accent, $warn, $is-dark),
220+
)
231221
);
232222
}
233-
@return _internalize-theme(
234-
theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result))
223+
$theme: _internalize-theme(
224+
theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result))
235225
);
226+
$primary: map.get($result, primary) or map.get($result, color, primary) or ();
227+
$accent: map.get($result, accent) or map.get($result, color, accent) or ();
228+
$warn: map.get($result, warn) or map.get($result, color, warn) or ();
229+
$theme: map.set($theme, _mat-system, _define-system($primary, $accent, $warn, $is-dark));
230+
@return $theme;
231+
}
232+
233+
// TODO: Remove legacy API and rename `$primary` below to `$config`. Currently it cannot be renamed
234+
// as it would break existing apps that set the parameter by name.
235+
236+
/// Creates a container object for a light theme to be given to individual component theme mixins.
237+
/// @param {Map} $primary The theme configuration object.
238+
/// @returns {Map} A complete Angular Material theme map.
239+
@function define-light-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette)) {
240+
@return _define-theme($primary, $accent, $warn, false);
236241
}
237242

238243
// TODO: Remove legacy API and rename below `$primary` to `$config`. Currently it cannot be renamed
@@ -242,48 +247,7 @@
242247
/// @param {Map} $primary The theme configuration object.
243248
/// @returns {Map} A complete Angular Material theme map.
244249
@function define-dark-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette)) {
245-
// This function creates a container object for the individual component theme mixins. Consumers
246-
// can construct such an object by calling this function, or by building the object manually.
247-
// There are two possible ways to invoke this function in order to create such an object:
248-
//
249-
// (1) Passing in a map that holds optional configurations for individual parts of the
250-
// theming system. For `color` configurations, the function only expects the palettes
251-
// for `primary` and `accent` (and optionally `warn`). The function will expand the
252-
// shorthand into an actual configuration that can be consumed in `-color` mixins.
253-
// (2) Legacy pattern: Passing in the palettes as parameters. This is not as flexible
254-
// as passing in a configuration map because only the `color` system can be configured.
255-
//
256-
// If the legacy pattern is used, we generate a container object only with a dark-themed
257-
// configuration for the `color` theming part.
258-
@if $accent != null {
259-
@warn theming.$private-legacy-theme-warning;
260-
$theme: _mat-validate-theme(
261-
(
262-
_is-legacy-theme: true,
263-
color: _mat-create-dark-color-config($primary, $accent, $warn),
264-
)
265-
);
266-
@return _internalize-theme(theming.private-create-backwards-compatibility-theme($theme));
267-
}
268-
// If the map pattern is used (1), we just pass-through the configurations for individual
269-
// parts of the theming system, but update the `color` configuration if set. As explained
270-
// above, the color shorthand will be expanded to an actual dark-themed color configuration.
271-
$result: $primary;
272-
@if map.get($primary, color) {
273-
$color-settings: map.get($primary, color);
274-
$primary: map.get($color-settings, primary);
275-
$accent: map.get($color-settings, accent);
276-
$warn: map.get($color-settings, warn);
277-
$result: map.merge(
278-
$result,
279-
(
280-
color: _mat-create-dark-color-config($primary, $accent, $warn),
281-
)
282-
);
283-
}
284-
@return _internalize-theme(
285-
theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result))
286-
);
250+
@return _define-theme($primary, $accent, $warn, true);
287251
}
288252

289253
/// Gets the color configuration from the given theme or configuration.

‎src/material/core/option/_m2-optgroup.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
@use '../theming/inspection';
2+
@use '../tokens/m2-utils';
3+
@use 'sass:map';
24

35
// Tokens that can't be configured through Angular Material's current theming API,
46
// but may be in a future version of the theming API.
@@ -8,8 +10,9 @@
810

911
// Tokens that can be configured through Angular Material's color theming API.
1012
@function get-color-tokens($theme) {
13+
$system: m2-utils.get-system($theme);
1114
@return (
12-
optgroup-label-text-color: inspection.get-theme-color($theme, system, on-surface),
15+
optgroup-label-text-color: map.get($system, on-surface),
1316
);
1417
}
1518

‎src/material/core/option/_m2-option.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
@return (
1919
option-selected-state-label-text-color: map.get($system, primary),
20-
option-label-text-color: inspection.get-theme-color($theme, system, on-surface),
20+
option-label-text-color: map.get($system, on-surface),
2121
option-hover-state-layer-color: m3-utils.color-with-opacity(
2222
map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
2323
option-focus-state-layer-color: m3-utils.color-with-opacity(

‎src/material/core/selection/pseudo-checkbox/_m2-pseudo-checkbox.scss

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,14 @@
1313
@function get-color-tokens($theme, $color-variant) {
1414
$is-dark: inspection.get-theme-type($theme) == dark;
1515
$disabled-color: if($is-dark, #686868, #b0b0b0);
16-
$checkmark-color: inspection.get-theme-color($theme, system, background);
1716
$system: m2-utils.get-system($theme);
1817
$system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
1918

2019
@return (
2120
pseudo-checkbox-full-selected-icon-color: map.get($system, secondary),
22-
pseudo-checkbox-full-selected-checkmark-color: $checkmark-color,
21+
pseudo-checkbox-full-selected-checkmark-color: map.get($system, background),
2322
pseudo-checkbox-full-unselected-icon-color: map.get($system, on-surface-variant),
24-
pseudo-checkbox-full-disabled-selected-checkmark-color: $checkmark-color,
23+
pseudo-checkbox-full-disabled-selected-checkmark-color: map.get($system, background),
2524
pseudo-checkbox-full-disabled-unselected-icon-color: $disabled-color,
2625
pseudo-checkbox-full-disabled-selected-icon-color: $disabled-color,
2726
pseudo-checkbox-minimal-selected-checkmark-color: map.get($system, secondary),

0 commit comments

Comments
 (0)