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,

0 commit comments

Comments
 (0)