Skip to content

Commit 4a3288e

Browse files
andrewseguinAndrew Seguin
andrewseguin
and
Andrew Seguin
authored
refactor: add colors to m2 system tokens (#31252)
# Conflicts: # src/material/checkbox/_m2-checkbox.scss Co-authored-by: Andrew Seguin <[email protected]>
1 parent ecc53d6 commit 4a3288e

32 files changed

+239
-206
lines changed

‎src/material/badge/_badge-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,13 @@
3838

3939
.mat-badge-accent {
4040
@include token-utils.create-token-values-mixed(
41-
m2-badge.private-get-color-palette-color-tokens($theme, accent)
41+
m2-badge.private-get-color-palette-color-tokens($theme, secondary)
4242
);
4343
}
4444

4545
.mat-badge-warn {
4646
@include token-utils.create-token-values-mixed(
47-
m2-badge.private-get-color-palette-color-tokens($theme, warn)
47+
m2-badge.private-get-color-palette-color-tokens($theme, error)
4848
);
4949
}
5050
}

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,13 @@ $_large-size: $_default-size + 6px;
5252
}
5353

5454
// Generates the tokens used to theme the badge based on a palette.
55-
@function private-get-color-palette-color-tokens($theme, $palette-name: primary) {
55+
@function private-get-color-palette-color-tokens($theme, $color-variant) {
56+
$system: m2-utils.get-system($theme);
57+
$system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
58+
5659
@return (
57-
badge-background-color: inspection.get-theme-color($theme, $palette-name),
58-
badge-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
60+
badge-background-color: map.get($system, primary),
61+
badge-text-color: map.get($system, on-primary),
5962
);
6063
}
6164

‎src/material/button/_button-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,11 +54,11 @@
5454
}
5555

5656
&.mat-accent {
57-
@include _m2-button-variant($theme, accent);
57+
@include _m2-button-variant($theme, secondary);
5858
}
5959

6060
&.mat-warn {
61-
@include _m2-button-variant($theme, warn);
61+
@include _m2-button-variant($theme, error);
6262
}
6363
}
6464
}

‎src/material/button/_fab-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,11 @@
4848
}
4949

5050
&.mat-accent {
51-
@include _fab-variant($theme, accent);
51+
@include _fab-variant($theme, secondary);
5252
}
5353

5454
&.mat-warn {
55-
@include _fab-variant($theme, warn);
55+
@include _fab-variant($theme, error);
5656
}
5757
}
5858
}

‎src/material/button/_icon-button-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,11 @@
4646
}
4747

4848
&.mat-accent {
49-
@include _m2-icon-button-variant($theme, accent);
49+
@include _m2-icon-button-variant($theme, secondary);
5050
}
5151

5252
&.mat-warn {
53-
@include _m2-icon-button-variant($theme, warn);
53+
@include _m2-icon-button-variant($theme, error);
5454
}
5555
}
5656
}

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

Lines changed: 21 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use 'sass:meta';
21
@use 'sass:map';
32
@use '../core/tokens/m2-utils';
43
@use '../core/tokens/m3-utils';
@@ -106,49 +105,34 @@
106105
}
107106

108107
// Generates the mapping for the properties that change based on the button palette color.
109-
@function private-get-color-palette-color-tokens($theme, $palette-name) {
110-
$color: inspection.get-theme-color($theme, $palette-name);
111-
$state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
112-
$ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);
113-
$contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
114-
$container-color: inspection.get-theme-color($theme, $palette-name, default);
115-
$label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
116-
$ripple-opacity: 0.1;
108+
@function private-get-color-palette-color-tokens($theme, $color-variant) {
109+
$system: m2-utils.get-system($theme);
110+
$system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
117111

118112
// outlined-outline-color:
119113
// TODO: we shouldn't have to set this since it's the same as the non-palette version, however
120114
// there are a bunch of tests internally that depend on it. We should remove this and clean
121115
// up the screenshots separately.
122116
@return (
123-
button-filled-container-color: $container-color,
124-
button-filled-label-text-color: $label-text-color,
125-
button-filled-ripple-color: $ripple-color,
126-
button-filled-state-layer-color: $state-layer-color,
127-
button-outlined-label-text-color: inspection.get-theme-color($theme, $palette-name, default),
117+
button-filled-container-color: map.get($system, primary),
118+
button-filled-label-text-color: map.get($system, on-primary),
119+
button-filled-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
120+
button-filled-state-layer-color: map.get($system, on-primary),
121+
button-outlined-label-text-color: map.get($system, primary),
128122
button-outlined-outline-color: map.get(get-color-tokens($theme), button-outlined-outline-color),
129-
button-outlined-ripple-color:
130-
if(
131-
meta.type-of(inspection.get-theme-color($theme, $palette-name)) == color,
132-
rgba(inspection.get-theme-color($theme, $palette-name), $ripple-opacity),
133-
inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
134-
button-outlined-state-layer-color: inspection.get-theme-color($theme, $palette-name),
135-
button-protected-container-color: $container-color,
136-
button-protected-label-text-color: $label-text-color,
137-
button-protected-ripple-color: $ripple-color,
138-
button-protected-state-layer-color: $state-layer-color,
139-
button-text-label-text-color: inspection.get-theme-color($theme, $palette-name),
140-
button-text-ripple-color:
141-
if(meta.type-of(inspection.get-theme-color($theme, $palette-name)) == color,
142-
rgba(inspection.get-theme-color($theme, $palette-name), $ripple-opacity),
143-
inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
144-
button-text-state-layer-color: inspection.get-theme-color($theme, $palette-name),
145-
button-tonal-container-color: inspection.get-theme-color($theme, $palette-name, default),
146-
button-tonal-label-text-color:
147-
inspection.get-theme-color($theme, $palette-name, default-contrast),
148-
button-tonal-ripple-color:
149-
inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1),
150-
button-tonal-state-layer-color:
151-
inspection.get-theme-color($theme, $palette-name, default-contrast),
123+
button-outlined-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
124+
button-outlined-state-layer-color: map.get($system, primary),
125+
button-protected-container-color: map.get($system, primary),
126+
button-protected-label-text-color: map.get($system, on-primary),
127+
button-protected-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
128+
button-protected-state-layer-color: map.get($system, on-primary),
129+
button-text-label-text-color: map.get($system, primary),
130+
button-text-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
131+
button-text-state-layer-color: map.get($system, primary),
132+
button-tonal-container-color: map.get($system, primary),
133+
button-tonal-label-text-color: map.get($system, on-primary),
134+
button-tonal-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
135+
button-tonal-state-layer-color: map.get($system, on-primary),
152136
);
153137
}
154138

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

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -60,21 +60,19 @@
6060
}
6161

6262
// Generates the mapping for the properties that change based on the FAB palette color.
63-
@function private-get-color-palette-color-tokens($theme, $palette-name) {
64-
$contrast-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
65-
$foreground-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
66-
$state-layer-color: inspection.get-theme-color($theme, $palette-name, default-contrast);
67-
$ripple-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 0.1);
63+
@function private-get-color-palette-color-tokens($theme, $color-variant) {
64+
$system: m2-utils.get-system($theme);
65+
$system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
6866

6967
@return (
70-
fab-container-color: inspection.get-theme-color($theme, $palette-name, default),
71-
fab-foreground-color: $foreground-color,
72-
fab-ripple-color: $ripple-color,
73-
fab-small-container-color: inspection.get-theme-color($theme, $palette-name, default),
74-
fab-small-foreground-color: $foreground-color,
75-
fab-small-ripple-color: $ripple-color,
76-
fab-small-state-layer-color: $state-layer-color,
77-
fab-state-layer-color: $state-layer-color,
68+
fab-container-color: map.get($system, primary),
69+
fab-foreground-color: map.get($system, on-primary),
70+
fab-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
71+
fab-small-container-color: map.get($system, primary),
72+
fab-small-foreground-color: map.get($system, on-primary),
73+
fab-small-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
74+
fab-small-state-layer-color: map.get($system, on-primary),
75+
fab-state-layer-color: map.get($system, on-primary),
7876
);
7977
}
8078

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

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
@use 'sass:meta';
21
@use 'sass:map';
32
@use '../core/theming/theming';
43
@use '../core/theming/inspection';
54
@use '../core/tokens/m2-utils';
5+
@use '../core/tokens/m3-utils';
66

77
// Tokens that can't be configured through Angular Material's current theming API,
88
// but may be in a future version of the theming API.
@@ -31,17 +31,14 @@
3131
}
3232

3333
// Generates the mapping for the properties that change based on the button palette color.
34-
@function private-get-color-palette-color-tokens($theme, $palette-name) {
35-
$color: inspection.get-theme-color($theme, $palette-name);
36-
$ripple-opacity: 0.1;
34+
@function private-get-color-palette-color-tokens($theme, $color-variant) {
35+
$system: m2-utils.get-system($theme);
36+
$system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
3737

3838
@return (
39-
icon-button-icon-color: inspection.get-theme-color($theme, $palette-name),
40-
icon-button-state-layer-color: $color,
41-
icon-button-ripple-color: if(
42-
meta.type-of($color) == color,
43-
rgba($color, $ripple-opacity),
44-
inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
39+
icon-button-icon-color: map.get($system, primary),
40+
icon-button-state-layer-color: map.get($system, primary),
41+
icon-button-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
4542
);
4643
}
4744

‎src/material/checkbox/_checkbox-theme.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
map.get(m3-checkbox.get-tokens($theme, $color-variant), color));
3030
} @else {
3131
@include sass-utils.current-selector-or-root() {
32-
@include token-utils.create-token-values-mixed(m2-checkbox.get-color-tokens($theme));
32+
@include token-utils.create-token-values-mixed(
33+
m2-checkbox.get-color-tokens($theme, secondary));
3334
}
3435

3536
.mat-mdc-checkbox {
@@ -42,7 +43,7 @@
4243

4344
&.mat-warn {
4445
@include token-utils.create-token-values-mixed(
45-
m2-checkbox.get-color-tokens($theme, warn,
46+
m2-checkbox.get-color-tokens($theme, error,
4647
$exclude: (checkbox-disabled-label-color, checkbox-label-text-color))
4748
);
4849
}

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

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -21,33 +21,29 @@
2121
}
2222

2323
// Tokens that can be configured through Angular Material's color theming API.
24-
@function get-color-tokens($theme, $palette-name: accent, $exclude: ()) {
24+
@function get-color-tokens($theme, $color-variant, $exclude: ()) {
2525
$system: m2-utils.get-system($theme);
26-
26+
$system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
2727
$is-dark: inspection.get-theme-type($theme) == dark;
2828
$foreground-base: inspection.get-theme-color($theme, foreground, base);
29-
$palette-default: inspection.get-theme-color($theme, $palette-name, default);
3029
$disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
31-
$palette-selected: inspection.get-theme-color($theme, $palette-name);
32-
$selected-checkmark-color:
33-
inspection.get-theme-color($theme, $palette-name, default-contrast);
3430

3531
$tokens: (
3632
checkbox-disabled-label-color: $disabled,
3733
checkbox-label-text-color: map.get($system, on-surface),
3834
checkbox-disabled-selected-icon-color: $disabled,
3935
checkbox-disabled-unselected-icon-color: $disabled,
40-
checkbox-selected-checkmark-color: $selected-checkmark-color,
41-
checkbox-selected-focus-icon-color: $palette-selected,
42-
checkbox-selected-hover-icon-color: $palette-selected,
43-
checkbox-selected-icon-color: $palette-selected,
44-
checkbox-selected-pressed-icon-color: $palette-selected,
36+
checkbox-selected-checkmark-color: map.get($system, on-secondary),
37+
checkbox-selected-focus-icon-color: map.get($system, secondary),
38+
checkbox-selected-hover-icon-color: map.get($system, secondary),
39+
checkbox-selected-icon-color: map.get($system, secondary),
40+
checkbox-selected-pressed-icon-color: map.get($system, secondary),
4541
checkbox-unselected-focus-icon-color: map.get($system, on-surface),
4642
checkbox-unselected-hover-icon-color: map.get($system, on-surface),
4743
checkbox-unselected-icon-color: map.get($system, on-surface-variant),
48-
checkbox-selected-focus-state-layer-color: $palette-default,
49-
checkbox-selected-hover-state-layer-color: $palette-default,
50-
checkbox-selected-pressed-state-layer-color: $palette-default,
44+
checkbox-selected-focus-state-layer-color: map.get($system, secondary),
45+
checkbox-selected-hover-state-layer-color: map.get($system, secondary),
46+
checkbox-selected-pressed-state-layer-color: map.get($system, secondary),
5147
checkbox-unselected-focus-state-layer-color: map.get($system, on-surface),
5248
checkbox-unselected-hover-state-layer-color: map.get($system, on-surface),
5349
checkbox-unselected-pressed-state-layer-color: $foreground-base,

‎src/material/chips/_chips-theme.scss

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,18 @@
3434
&.mat-mdc-chip-selected,
3535
&.mat-mdc-chip-highlighted {
3636
&.mat-primary {
37-
@include token-utils.create-token-values-mixed(m2-chip.get-color-tokens($theme, primary));
37+
@include token-utils.create-token-values-mixed(
38+
m2-chip.get-color-tokens($theme, primary));
3839
}
3940

4041
&.mat-accent {
41-
@include token-utils.create-token-values-mixed(m2-chip.get-color-tokens($theme, accent));
42+
@include token-utils.create-token-values-mixed(
43+
m2-chip.get-color-tokens($theme, secondary));
4244
}
4345

4446
&.mat-warn {
45-
@include token-utils.create-token-values-mixed(m2-chip.get-color-tokens($theme, warn));
47+
@include token-utils.create-token-values-mixed(
48+
m2-chip.get-color-tokens($theme, error));
4649
}
4750
}
4851
}

‎src/material/chips/_m2-chip.scss

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@use '../core/m2/palette' as m2-palette;
66
@use '../core/theming/theming';
77
@use '../core/tokens/m2-utils';
8+
@use '../core/tokens/m3-utils';
89

910
// Tokens that can't be configured through Angular Material's current theming API,
1011
// but may be in a future version of the theming API.
@@ -37,14 +38,13 @@
3738
}
3839

3940
// Tokens that can be configured through Angular Material's color theming API.
40-
@function get-color-tokens($theme, $palette-name: null) {
41+
@function get-color-tokens($theme, $color-variant: null) {
4142
$system: m2-utils.get-system($theme);
4243
$foreground: null;
4344
$background: null;
4445
$state-layer-color: inspection.get-theme-color($theme, foreground, base);
45-
$surface: map.get($system, surface);
4646

47-
@if $palette-name == null {
47+
@if $color-variant == null {
4848
$is-dark: inspection.get-theme-type($theme) == dark;
4949
$grey-50: map.get(m2-palette.$grey-palette, 50);
5050
$grey-900: map.get(m2-palette.$grey-palette, 900);
@@ -58,8 +58,10 @@
5858
);
5959
}
6060
@else {
61-
$background: inspection.get-theme-color($theme, $palette-name);
62-
$foreground: inspection.get-theme-color($theme, $palette-name, default-contrast);
61+
$system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
62+
63+
$background: map.get($system, primary);
64+
$foreground: map.get($system, on-primary);
6365
}
6466
@return (
6567
chip-disabled-label-text-color: $foreground,

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

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,10 +116,11 @@
116116
// Creates a light-themed color configuration from the specified
117117
// primary, accent and warn palettes.
118118
@function _mat-create-light-color-config($primary, $accent, $warn: null) {
119+
$warn: if($warn != null, $warn, define-palette(palette.$red-palette));
119120
@return (
120121
primary: $primary,
121122
accent: $accent,
122-
warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
123+
warn: $warn,
123124
is-dark: false,
124125
foreground: palette.$light-theme-foreground-palette,
125126
background: palette.$light-theme-background-palette,
@@ -134,17 +135,24 @@
134135
hover-state-layer-opacity: 0.04,
135136
focus-state-layer-opacity: 0.12,
136137
pressed-state-layer-opacity: 0.12,
138+
primary: map.get($primary, default),
139+
on-primary: map.get($primary, default-contrast),
140+
secondary: map.get($accent, default),
141+
on-secondary: map.get($accent, default-contrast),
142+
error: map.get($warn, default),
143+
on-error: map.get($warn, default-contrast),
137144
),
138145
);
139146
}
140147

141148
// Creates a dark-themed color configuration from the specified
142149
// primary, accent and warn palettes.
143150
@function _mat-create-dark-color-config($primary, $accent, $warn: null) {
151+
$warn: if($warn != null, $warn, define-palette(palette.$red-palette));
144152
@return (
145153
primary: $primary,
146154
accent: $accent,
147-
warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
155+
warn: $warn,
148156
is-dark: true,
149157
foreground: palette.$dark-theme-foreground-palette,
150158
background: palette.$dark-theme-background-palette,
@@ -159,6 +167,12 @@
159167
hover-state-layer-opacity: 0.04,
160168
focus-state-layer-opacity: 0.12,
161169
pressed-state-layer-opacity: 0.12,
170+
primary: map.get($primary, default),
171+
on-primary: map.get($primary, default-contrast),
172+
secondary: map.get($accent, default),
173+
on-secondary: map.get($accent, default-contrast),
174+
error: map.get($warn, default),
175+
on-error: map.get($warn, default-contrast),
162176
),
163177
);
164178
}

0 commit comments

Comments
 (0)