Skip to content

Commit 8a78965

Browse files
author
Andrew Seguin
committed
refactor: add colors to m2 system tokens
1 parent d681762 commit 8a78965

32 files changed

+256
-205
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
@@ -3,6 +3,8 @@
33
@use 'sass:math';
44
@use 'sass:color';
55
@use '../core/theming/inspection';
6+
@use '../core/tokens/m2-utils';
7+
@use '../core/tokens/m3-utils';
68

79
$_default-size: 22px;
810
$_small-size: $_default-size - 6px;
@@ -63,10 +65,13 @@ $_large-size: $_default-size + 6px;
6365
}
6466

6567
// Generates the tokens used to theme the badge based on a palette.
66-
@function private-get-color-palette-color-tokens($theme, $palette-name: primary) {
68+
@function private-get-color-palette-color-tokens($theme, $color-variant) {
69+
$system: m2-utils.get-system($theme);
70+
$system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
71+
6772
@return (
68-
badge-background-color: inspection.get-theme-color($theme, $palette-name),
69-
badge-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast),
73+
badge-background-color: map.get($system, primary),
74+
badge-text-color: map.get($system, on-primary),
7075
);
7176
}
7277

‎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: 22 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
@use 'sass:meta';
21
@use 'sass:map';
32
@use '../core/tokens/m2-utils';
3+
@use '../core/tokens/m3-utils';
44
@use '../core/theming/theming';
55
@use '../core/theming/inspection';
66
@use '../core/style/elevation';
@@ -110,49 +110,34 @@
110110
}
111111

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

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

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

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use 'sass:map';
22
@use '../core/tokens/m2-utils';
3+
@use '../core/tokens/m3-utils';
34
@use '../core/theming/theming';
45
@use '../core/theming/inspection';
56
@use '../core/style/elevation';
@@ -61,21 +62,19 @@
6162
}
6263

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

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

‎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: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use 'sass:map';
22
@use '../core/tokens/m2-utils';
3+
@use '../core/tokens/m3-utils';
34
@use '../core/theming/theming';
45
@use '../core/theming/inspection';
56
@use '../core/m2/theming' as m2-theming;
@@ -22,36 +23,32 @@
2223
}
2324

2425
// Tokens that can be configured through Angular Material's color theming API.
25-
@function get-color-tokens($theme, $palette-name: accent, $exclude: ()) {
26+
@function get-color-tokens($theme, $color-variant, $exclude: ()) {
2627
$system: m2-utils.get-system($theme);
27-
28+
$system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
2829
$is-dark: inspection.get-theme-type($theme) == dark;
2930
$foreground-base: inspection.get-theme-color($theme, foreground, base);
30-
$palette-default: inspection.get-theme-color($theme, $palette-name, default);
3131
$disabled-color: inspection.get-theme-color($theme, foreground, base, 0.38);
32-
$palette-selected: inspection.get-theme-color($theme, $palette-name);
3332
$border-color: inspection.get-theme-color($theme, foreground, base, 0.54);
3433
$active-border-color:
3534
m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900));
36-
$selected-checkmark-color:
37-
inspection.get-theme-color($theme, $palette-name, default-contrast);
3835

3936
$tokens: (
4037
checkbox-disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
4138
checkbox-label-text-color: map.get($system, on-surface),
4239
checkbox-disabled-selected-icon-color: $disabled-color,
4340
checkbox-disabled-unselected-icon-color: $disabled-color,
44-
checkbox-selected-checkmark-color: $selected-checkmark-color,
45-
checkbox-selected-focus-icon-color: $palette-selected,
46-
checkbox-selected-hover-icon-color: $palette-selected,
47-
checkbox-selected-icon-color: $palette-selected,
48-
checkbox-selected-pressed-icon-color: $palette-selected,
41+
checkbox-selected-checkmark-color: map.get($system, on-secondary),
42+
checkbox-selected-focus-icon-color: map.get($system, secondary),
43+
checkbox-selected-hover-icon-color: map.get($system, secondary),
44+
checkbox-selected-icon-color: map.get($system, secondary),
45+
checkbox-selected-pressed-icon-color: map.get($system, secondary),
4946
checkbox-unselected-focus-icon-color: $active-border-color,
5047
checkbox-unselected-hover-icon-color: $active-border-color,
5148
checkbox-unselected-icon-color: $border-color,
52-
checkbox-selected-focus-state-layer-color: $palette-default,
53-
checkbox-selected-hover-state-layer-color: $palette-default,
54-
checkbox-selected-pressed-state-layer-color: $palette-default,
49+
checkbox-selected-focus-state-layer-color: map.get($system, secondary),
50+
checkbox-selected-hover-state-layer-color: map.get($system, secondary),
51+
checkbox-selected-pressed-state-layer-color: map.get($system, secondary),
5552
checkbox-unselected-focus-state-layer-color: $foreground-base,
5653
checkbox-unselected-hover-state-layer-color: $foreground-base,
5754
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)