Skip to content

Commit c363690

Browse files
andrewseguinandrewseguin
committed
refactor: use system terminology in foreground/background palettes
1 parent 78f15b1 commit c363690

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+235
-235
lines changed

‎guides/material-2.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -605,8 +605,8 @@ $theme: mat.m2-define-dark-theme(...);
605605
$primary-default: mat.get-theme-color($theme, primary, default);
606606
$accent-a100: mat.get-theme-color($theme, accent, A100);
607607
$warn-500-contrast: mat.get-theme-color($theme, warn, 500-contrast);
608-
$foreground-text: mat.get-theme-color($theme, foreground, text);
609-
$background-card: mat.get-theme-color($theme, background, card);
608+
$foreground-text: mat.get-theme-color($theme, foreground, on-surface);
609+
$background-card: mat.get-theme-color(inspection.get-theme-color($theme, background, surface));
610610
$type: mat.get-theme-type($theme);
611611
$custom-background: if($type == dark, #030, #dfd);
612612
```

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@use '@angular/material' as mat;
22

33
@mixin color($theme) {
4-
$non-resizable-hover-divider: mat.get-theme-color($theme, foreground, divider);
4+
$non-resizable-hover-divider: mat.get-theme-color($theme, foreground, base, 0.12);
55
$resizable-hover-divider: mat.get-theme-color($theme, primary, 600);
66
$resizable-active-divider: mat.get-theme-color($theme, primary, 600);
77

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
.mat-edit-pane {
7979
@include mat.private-theme-elevation(2, $theme);
8080
background: $background-color;
81-
color: mat.get-theme-color($theme, foreground, text);
81+
color: mat.get-theme-color($theme, foreground, on-surface);
8282
display: block;
8383
padding: 16px 24px;
8484

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ $prefix: (mat, autocomplete);
1818
// Tokens that can be configured through Angular Material's color theming API.
1919
@function get-color-tokens($theme) {
2020
@return (
21-
background-color: inspection.get-theme-color($theme, background, card)
21+
background-color: inspection.get-theme-color($theme, background, surface)
2222
);
2323
}
2424

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,10 @@ $prefix: (mat, badge);
4646

4747
// Tokens that can be configured through Angular Material's color theming API.
4848
@function get-color-tokens($theme) {
49+
$is-dark: inspection.get-theme-type($theme) == dark;
4950
$primary-color-tokens: private-get-color-palette-color-tokens($theme, primary);
50-
$app-background: inspection.get-theme-color($theme, background, background);
51-
$disabled-background: inspection.get-theme-color($theme, foreground, disabled-button);
51+
$app-background: inspection.get-theme-color($theme, background, h303030-grey-50);
52+
$disabled-background: inspection.get-theme-color($theme, foreground, base-30-26);
5253

5354
// The disabled color usually has some kind of opacity, but because the badge is overlayed
5455
// on top of something else, it won't look good if it's opaque. If it is a color *type*,
@@ -63,7 +64,7 @@ $prefix: (mat, badge);
6364

6465
@return map.merge($primary-color-tokens, (
6566
disabled-state-background-color: $disabled-background,
66-
disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-text),
67+
disabled-state-text-color: inspection.get-theme-color($theme, foreground, base-50-38),
6768
));
6869
}
6970

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ $prefix: (mat, bottom-sheet);
1717
// Tokens that can be configured through Angular Material's color theming API.
1818
@function get-color-tokens($theme) {
1919
@return (
20-
container-text-color: inspection.get-theme-color($theme, foreground, text),
21-
container-background-color: inspection.get-theme-color($theme, background, dialog),
20+
container-text-color: inspection.get-theme-color($theme, foreground, on-surface),
21+
container-background-color: inspection.get-theme-color($theme, background, surface),
2222
);
2323
}
2424

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

+18-19
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ $prefix: (mat, button-toggle);
2323

2424
// Tokens that can be configured through Angular Material's color theming API.
2525
@function get-color-tokens($theme) {
26-
$theme-divider-color: inspection.get-theme-color($theme, foreground, divider);
26+
$theme-divider-color: inspection.get-theme-color($theme, foreground, base-12);
2727

2828
// By default the theme usually has an rgba color for the dividers, which can
2929
// stack up with the background of a button toggle. This can cause the border
@@ -32,35 +32,34 @@ $prefix: (mat, button-toggle);
3232
$divider-color: if(
3333
meta.type-of($theme-divider-color) == color,
3434
theming.private-rgba-to-hex(
35-
$theme-divider-color, inspection.get-theme-color($theme, background, card)),
35+
$theme-divider-color, inspection.get-theme-color($theme, background, surface)),
3636
$theme-divider-color);
3737

3838
@return (
39-
background-color: inspection.get-theme-color($theme, background, card),
39+
background-color: inspection.get-theme-color($theme, background, surface),
4040
disabled-selected-state-background-color:
41-
inspection.get-theme-color($theme, background, selected-disabled-button),
42-
disabled-selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
43-
disabled-state-background-color: inspection.get-theme-color($theme, background, card),
44-
disabled-state-text-color: inspection.get-theme-color($theme, foreground, disabled-button),
41+
inspection.get-theme-color($theme, background, grey-800-400),
42+
disabled-selected-state-text-color: inspection.get-theme-color($theme, foreground, on-surface),
43+
disabled-state-background-color: inspection.get-theme-color($theme, background, surface),
44+
disabled-state-text-color: inspection.get-theme-color($theme, foreground, base-30-26),
4545
divider-color: $divider-color,
4646
legacy-disabled-selected-state-background-color:
47-
inspection.get-theme-color($theme, background, selected-disabled-button),
47+
inspection.get-theme-color($theme, background, grey-800-400),
4848
legacy-disabled-state-background-color:
49-
inspection.get-theme-color($theme, background, disabled-button-toggle),
49+
inspection.get-theme-color($theme, background, black-grey200),
5050
legacy-disabled-state-text-color:
51-
inspection.get-theme-color($theme, foreground, disabled-button),
51+
inspection.get-theme-color($theme, foreground, base-30-26),
5252
legacy-selected-state-background-color:
53-
inspection.get-theme-color($theme, background, selected-button),
53+
inspection.get-theme-color($theme, background, grey-900-300),
5454
legacy-selected-state-text-color:
55-
inspection.get-theme-color($theme, foreground, secondary-text),
56-
legacy-state-layer-color: inspection.get-theme-color($theme, background, focused-button),
57-
legacy-text-color: inspection.get-theme-color($theme, foreground, hint-text),
55+
inspection.get-theme-color($theme, foreground, base-70-54),
56+
legacy-state-layer-color: inspection.get-theme-color($theme, background, white-black-12),
57+
legacy-text-color: inspection.get-theme-color($theme, foreground, base-50-38),
5858
selected-state-background-color:
59-
inspection.get-theme-color($theme, background, selected-button),
60-
selected-state-text-color: inspection.get-theme-color($theme, foreground, text),
61-
state-layer-color: sass-utils.safe-color-change(
62-
inspection.get-theme-color($theme, background, focused-button), $alpha: 1),
63-
text-color: inspection.get-theme-color($theme, foreground, text),
59+
inspection.get-theme-color($theme, background, grey-900-300),
60+
selected-state-text-color: inspection.get-theme-color($theme, foreground, on-surface),
61+
state-layer-color: inspection.get-theme-color($theme, background, white-black),
62+
text-color: inspection.get-theme-color($theme, foreground, on-surface),
6463
);
6564
}
6665

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

+24-24
Original file line numberDiff line numberDiff line change
@@ -52,65 +52,65 @@ $prefix: (mat, button);
5252
// internally. For now we fall back to the old hardcoded behavior only for internal apps.
5353
$outline: if(m2-utils.$private-is-internal-build,
5454
rgba(if($is-dark, #fff, #000), 0.12),
55-
inspection.get-theme-color($theme, foreground, divider)
55+
inspection.get-theme-color($theme, foreground, base-12)
5656
);
5757

5858
@return (
59-
filled-container-color: inspection.get-theme-color($theme, background, card),
59+
filled-container-color: inspection.get-theme-color($theme, background, surface),
6060
filled-disabled-container-color:
61-
inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
61+
inspection.get-theme-color($theme, foreground, base-12),
6262
filled-disabled-label-text-color:
63-
inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
63+
inspection.get-theme-color($theme, foreground, base-50-38),
6464
filled-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
6565
filled-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
6666
filled-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
67-
filled-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
67+
filled-label-text-color: inspection.get-theme-color($theme, foreground, base),
6868
filled-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
69-
filled-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
69+
filled-ripple-color: inspection.get-theme-color($theme, foreground, base-10),
7070
filled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
7171
outlined-disabled-label-text-color:
72-
inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
72+
inspection.get-theme-color($theme, foreground, base-50-38),
7373
outlined-disabled-outline-color: $outline,
7474
outlined-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
7575
outlined-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
7676
outlined-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
77-
outlined-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
77+
outlined-label-text-color: inspection.get-theme-color($theme, foreground, base),
7878
outlined-outline-color: $outline,
7979
outlined-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
80-
outlined-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
80+
outlined-ripple-color: inspection.get-theme-color($theme, foreground, base-10),
8181
outlined-state-layer-color: inspection.get-theme-color($theme, foreground, base),
82-
protected-container-color: inspection.get-theme-color($theme, background, card),
82+
protected-container-color: inspection.get-theme-color($theme, background, surface),
8383
protected-disabled-container-color:
84-
inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
84+
inspection.get-theme-color($theme, foreground, base-12),
8585
protected-disabled-label-text-color:
86-
inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
86+
inspection.get-theme-color($theme, foreground, base-50-38),
8787
protected-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
8888
protected-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
8989
protected-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
90-
protected-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
90+
protected-label-text-color: inspection.get-theme-color($theme, foreground, base),
9191
protected-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
92-
protected-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
92+
protected-ripple-color: inspection.get-theme-color($theme, foreground, base-10),
9393
protected-state-layer-color: inspection.get-theme-color($theme, foreground, base),
9494
text-disabled-label-text-color:
95-
inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
95+
inspection.get-theme-color($theme, foreground, base-50-38),
9696
text-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
9797
text-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
9898
text-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
99-
text-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
99+
text-label-text-color: inspection.get-theme-color($theme, foreground, base),
100100
text-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
101-
text-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
101+
text-ripple-color: inspection.get-theme-color($theme, foreground, base-10),
102102
text-state-layer-color: inspection.get-theme-color($theme, foreground, base),
103-
tonal-container-color: inspection.get-theme-color($theme, background, card),
103+
tonal-container-color: inspection.get-theme-color($theme, background, surface),
104104
tonal-disabled-container-color:
105-
inspection.get-theme-color($theme, foreground, disabled-button, 0.12),
105+
inspection.get-theme-color($theme, foreground, base-12),
106106
tonal-disabled-label-text-color:
107-
inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
107+
inspection.get-theme-color($theme, foreground, base-50-38),
108108
tonal-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
109109
tonal-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
110110
tonal-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
111-
tonal-label-text-color: inspection.get-theme-color($theme, foreground, text, 1),
111+
tonal-label-text-color: inspection.get-theme-color($theme, foreground, base-87),
112112
tonal-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
113-
tonal-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
113+
tonal-ripple-color: inspection.get-theme-color($theme, foreground, base-10),
114114
tonal-state-layer-color: inspection.get-theme-color($theme, foreground, base),
115115
);
116116
}
@@ -153,7 +153,7 @@ $prefix: (mat, button);
153153
if(
154154
meta.type-of(inspection.get-theme-color($theme, $palette-name)) == color,
155155
rgba(inspection.get-theme-color($theme, $palette-name), $ripple-opacity),
156-
inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
156+
inspection.get-theme-color($theme, foreground, base-10)),
157157
outlined-state-layer-color: inspection.get-theme-color($theme, $palette-name),
158158
protected-container-color: $container-color,
159159
protected-label-text-color: $label-text-color,
@@ -163,7 +163,7 @@ $prefix: (mat, button);
163163
text-ripple-color:
164164
if(meta.type-of(inspection.get-theme-color($theme, $palette-name)) == color,
165165
rgba(inspection.get-theme-color($theme, $palette-name), $ripple-opacity),
166-
inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
166+
inspection.get-theme-color($theme, foreground, base-10)),
167167
text-state-layer-color: inspection.get-theme-color($theme, $palette-name),
168168
tonal-container-color: inspection.get-theme-color($theme, $palette-name, default),
169169
tonal-label-text-color: inspection.get-theme-color($theme, $palette-name, default-contrast, 1),

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

+8-8
Original file line numberDiff line numberDiff line change
@@ -36,28 +36,28 @@ $prefix: (mat, fab);
3636
$is-dark: inspection.get-theme-type($theme) == dark;
3737

3838
@return (
39-
container-color: inspection.get-theme-color($theme, background, card),
39+
container-color: inspection.get-theme-color($theme, background, surface),
4040
disabled-state-container-color:
41-
inspection.get-theme-color($theme, background, disabled-button, 0.12),
41+
inspection.get-theme-color($theme, background, white-black-12),
4242
disabled-state-foreground-color:
43-
inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
43+
inspection.get-theme-color($theme, foreground, base-50-38),
4444
disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
4545
focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
4646
foreground-color: inspection.get-theme-color($theme, foreground, base),
4747
hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
4848
pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
49-
ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
50-
small-container-color: inspection.get-theme-color($theme, background, card),
49+
ripple-color: inspection.get-theme-color($theme, foreground, base-10),
50+
small-container-color: inspection.get-theme-color($theme, background, surface),
5151
small-disabled-state-container-color:
52-
inspection.get-theme-color($theme, background, disabled-button, 0.12),
52+
inspection.get-theme-color($theme, background, white-black-12),
5353
small-disabled-state-foreground-color:
54-
inspection.get-theme-color($theme, foreground, disabled-button, if($is-dark, 0.5, 0.38)),
54+
inspection.get-theme-color($theme, foreground, base-50-38),
5555
small-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
5656
small-focus-state-layer-opacity: if($is-dark, 0.24, 0.12),
5757
small-foreground-color: inspection.get-theme-color($theme, foreground, base),
5858
small-hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
5959
small-pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
60-
small-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
60+
small-ripple-color: inspection.get-theme-color($theme, foreground, base-10),
6161
small-state-layer-color: inspection.get-theme-color($theme, foreground, base),
6262
state-layer-color: inspection.get-theme-color($theme, foreground, base),
6363
);

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ $prefix: (mat, icon-button);
2727
hover-state-layer-opacity: if($is-dark, 0.08, 0.04),
2828
icon-color: inherit,
2929
pressed-state-layer-opacity: if($is-dark, 0.24, 0.12),
30-
ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
30+
ripple-color: inspection.get-theme-color($theme, foreground, base-10),
3131
state-layer-color: inspection.get-theme-color($theme, foreground, base),
3232
);
3333
}
@@ -43,7 +43,7 @@ $prefix: (mat, icon-button);
4343
ripple-color: if(
4444
meta.type-of($color) == color,
4545
rgba($color, $ripple-opacity),
46-
inspection.get-theme-color($theme, foreground, base, $ripple-opacity)),
46+
inspection.get-theme-color($theme, foreground, base-10)),
4747
);
4848
}
4949

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,13 @@ $prefix: (mat, card);
2020
// Tokens that can be configured through Angular Material's color theming API.
2121
@function get-color-tokens($theme) {
2222
@return (
23-
elevated-container-color: inspection.get-theme-color($theme, background, card),
23+
elevated-container-color: inspection.get-theme-color($theme, background, surface),
2424
elevated-container-elevation: elevation.get-box-shadow(1),
25-
outlined-container-color: inspection.get-theme-color($theme, background, card),
25+
outlined-container-color: inspection.get-theme-color($theme, background, surface),
2626
outlined-container-elevation: elevation.get-box-shadow(0),
27-
outlined-outline-color: rgba(inspection.get-theme-color($theme, foreground, base), 0.12),
28-
subtitle-text-color: inspection.get-theme-color($theme, foreground, secondary-text),
29-
filled-container-color: inspection.get-theme-color($theme, background, card),
27+
outlined-outline-color: inspection.get-theme-color($theme, foreground, base-12),
28+
subtitle-text-color: inspection.get-theme-color($theme, foreground, base-70-54),
29+
filled-container-color: inspection.get-theme-color($theme, background, surface),
3030
filled-container-elevation: elevation.get-box-shadow(0)
3131
);
3232
}

0 commit comments

Comments
 (0)