Skip to content

Commit cc14f4f

Browse files
author
Andrew Seguin
committed
refactor: add colors to m2 system tokens
1 parent 1f8b130 commit cc14f4f

32 files changed

+241
-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: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
@use 'sass:map';
22
@use 'sass:math';
33
@use '../core/theming/inspection';
4+
@use '../core/tokens/m2-utils';
5+
@use '../core/tokens/m3-utils';
46

57
$_default-size: 22px;
68
$_small-size: $_default-size - 6px;
@@ -48,10 +50,13 @@ $_large-size: $_default-size + 6px;
4850
}
4951

5052
// Generates the tokens used to theme the badge based on a palette.
51-
@function private-get-color-palette-color-tokens($theme, $palette-name: primary) {
53+
@function private-get-color-palette-color-tokens($theme, $color-variant) {
54+
$system: m2-utils.get-system($theme);
55+
$system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
56+
5257
@return (
53-
badge-background-color: inspection.get-theme-color($theme, $palette-name),
54-
badge-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
58+
badge-background-color: map.get($system, primary),
59+
badge-text-color: map.get($system, on-primary),
5560
);
5661
}
5762

‎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,34 +21,30 @@
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);
3230
$border-color: inspection.get-theme-color($theme, foreground, base, 0.54);
33-
$selected-checkmark-color:
34-
inspection.get-theme-color($theme, $palette-name, default-contrast);
3531

3632
$tokens: (
3733
checkbox-disabled-label-color: $disabled,
3834
checkbox-label-text-color: map.get($system, on-surface),
3935
checkbox-disabled-selected-icon-color: $disabled,
4036
checkbox-disabled-unselected-icon-color: $disabled,
41-
checkbox-selected-checkmark-color: $selected-checkmark-color,
42-
checkbox-selected-focus-icon-color: $palette-selected,
43-
checkbox-selected-hover-icon-color: $palette-selected,
44-
checkbox-selected-icon-color: $palette-selected,
45-
checkbox-selected-pressed-icon-color: $palette-selected,
37+
checkbox-selected-checkmark-color: map.get($system, on-secondary),
38+
checkbox-selected-focus-icon-color: map.get($system, secondary),
39+
checkbox-selected-hover-icon-color: map.get($system, secondary),
40+
checkbox-selected-icon-color: map.get($system, secondary),
41+
checkbox-selected-pressed-icon-color: map.get($system, secondary),
4642
checkbox-unselected-focus-icon-color: map.get($system, on-surface),
4743
checkbox-unselected-hover-icon-color: map.get($system, on-surface),
4844
checkbox-unselected-icon-color: $border-color,
49-
checkbox-selected-focus-state-layer-color: $palette-default,
50-
checkbox-selected-hover-state-layer-color: $palette-default,
51-
checkbox-selected-pressed-state-layer-color: $palette-default,
45+
checkbox-selected-focus-state-layer-color: map.get($system, secondary),
46+
checkbox-selected-hover-state-layer-color: map.get($system, secondary),
47+
checkbox-selected-pressed-state-layer-color: map.get($system, secondary),
5248
checkbox-unselected-focus-state-layer-color: map.get($system, on-surface),
5349
checkbox-unselected-hover-state-layer-color: map.get($system, on-surface),
5450
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,

0 commit comments

Comments
 (0)