Skip to content

Commit 0d47628

Browse files
andrewseguinAndrew Seguin
andrewseguin
and
Andrew Seguin
authored
fix(material/button): use system colors for state layers and text (#31278)
Co-authored-by: Andrew Seguin <[email protected]>
1 parent 99115ce commit 0d47628

File tree

3 files changed

+58
-46
lines changed

3 files changed

+58
-46
lines changed

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

Lines changed: 37 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -52,55 +52,56 @@
5252
button-filled-container-color: map.get($system, surface),
5353
button-filled-disabled-container-color: $disabled-container,
5454
button-filled-disabled-label-text-color: $disabled,
55-
button-filled-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
55+
button-filled-disabled-state-layer-color: map.get($system, on-surface-variant),
5656
button-filled-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
5757
button-filled-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
58-
button-filled-label-text-color: inspection.get-theme-color($theme, foreground, base),
58+
button-filled-label-text-color: map.get($system, on-surface),
5959
button-filled-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
60-
button-filled-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
61-
button-filled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
60+
button-filled-ripple-color: m3-utils.color-with-opacity(
61+
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
62+
button-filled-state-layer-color: map.get($system, on-surface),
6263
button-outlined-disabled-label-text-color: $disabled,
6364
button-outlined-disabled-outline-color: $outline,
64-
button-outlined-disabled-state-layer-color:
65-
inspection.get-theme-color($theme, foreground, base),
65+
button-outlined-disabled-state-layer-color: map.get($system, on-surface-variant),
6666
button-outlined-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
6767
button-outlined-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
68-
button-outlined-label-text-color: inspection.get-theme-color($theme, foreground, base),
68+
button-outlined-label-text-color: map.get($system, on-surface),
6969
button-outlined-outline-color: $outline,
70-
button-outlined-pressed-state-layer-opacity:
71-
map.get($system, pressed-state-layer-opacity),
72-
button-outlined-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
73-
button-outlined-state-layer-color: inspection.get-theme-color($theme, foreground, base),
70+
button-outlined-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
71+
button-outlined-ripple-color: m3-utils.color-with-opacity(
72+
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
73+
button-outlined-state-layer-color: map.get($system, on-surface),
7474
button-protected-container-color: map.get($system, surface),
7575
button-protected-disabled-container-color: $disabled-container,
7676
button-protected-disabled-label-text-color: $disabled,
77-
button-protected-disabled-state-layer-color:
78-
inspection.get-theme-color($theme, foreground, base),
77+
button-protected-disabled-state-layer-color: map.get($system, on-surface-variant),
7978
button-protected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
8079
button-protected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
81-
button-protected-label-text-color: inspection.get-theme-color($theme, foreground, base),
82-
button-protected-pressed-state-layer-opacity:
83-
map.get($system, pressed-state-layer-opacity),
84-
button-protected-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
85-
button-protected-state-layer-color: inspection.get-theme-color($theme, foreground, base),
80+
button-protected-label-text-color: map.get($system, on-surface),
81+
button-protected-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
82+
button-protected-ripple-color: m3-utils.color-with-opacity(
83+
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
84+
button-protected-state-layer-color: map.get($system, on-surface),
8685
button-text-disabled-label-text-color: $disabled,
87-
button-text-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
86+
button-text-disabled-state-layer-color: map.get($system, on-surface-variant),
8887
button-text-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
8988
button-text-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
90-
button-text-label-text-color: inspection.get-theme-color($theme, foreground, base),
89+
button-text-label-text-color: map.get($system, on-surface),
9190
button-text-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
92-
button-text-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
93-
button-text-state-layer-color: inspection.get-theme-color($theme, foreground, base),
91+
button-text-ripple-color: m3-utils.color-with-opacity(
92+
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
93+
button-text-state-layer-color: map.get($system, on-surface),
9494
button-tonal-container-color: map.get($system, surface),
9595
button-tonal-disabled-container-color: $disabled-container,
9696
button-tonal-disabled-label-text-color: $disabled,
97-
button-tonal-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
97+
button-tonal-disabled-state-layer-color: map.get($system, on-surface-variant),
9898
button-tonal-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
9999
button-tonal-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
100-
button-tonal-label-text-color: inspection.get-theme-color($theme, foreground, base),
100+
button-tonal-label-text-color: map.get($system, on-surface),
101101
button-tonal-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
102-
button-tonal-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
103-
button-tonal-state-layer-color: inspection.get-theme-color($theme, foreground, base),
102+
button-tonal-ripple-color: m3-utils.color-with-opacity(
103+
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
104+
button-tonal-state-layer-color: map.get($system, on-surface),
104105
);
105106
}
106107

@@ -116,22 +117,27 @@
116117
@return (
117118
button-filled-container-color: map.get($system, primary),
118119
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-ripple-color: m3-utils.color-with-opacity(
121+
map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
120122
button-filled-state-layer-color: map.get($system, on-primary),
121123
button-outlined-label-text-color: map.get($system, primary),
122124
button-outlined-outline-color: map.get(get-color-tokens($theme), button-outlined-outline-color),
123-
button-outlined-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
125+
button-outlined-ripple-color: m3-utils.color-with-opacity(
126+
map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
124127
button-outlined-state-layer-color: map.get($system, primary),
125128
button-protected-container-color: map.get($system, primary),
126129
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%),
130+
button-protected-ripple-color: m3-utils.color-with-opacity(
131+
map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
128132
button-protected-state-layer-color: map.get($system, on-primary),
129133
button-text-label-text-color: map.get($system, primary),
130-
button-text-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
134+
button-text-ripple-color: m3-utils.color-with-opacity(
135+
map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
131136
button-text-state-layer-color: map.get($system, primary),
132137
button-tonal-container-color: map.get($system, primary),
133138
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%),
139+
button-tonal-ripple-color: m3-utils.color-with-opacity(
140+
map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
135141
button-tonal-state-layer-color: map.get($system, on-primary),
136142
);
137143
}

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

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,23 +39,25 @@
3939
fab-container-color: map.get($system, surface),
4040
fab-disabled-state-container-color: $disabled-container,
4141
fab-disabled-state-foreground-color: $disabled,
42-
fab-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
42+
fab-disabled-state-layer-color: map.get($system, on-surface-variant),
4343
fab-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
44-
fab-foreground-color: inspection.get-theme-color($theme, foreground, base),
44+
fab-foreground-color: map.get($system, on-surface),
4545
fab-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
4646
fab-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
47-
fab-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
47+
fab-ripple-color: m3-utils.color-with-opacity(
48+
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
4849
fab-small-container-color: map.get($system, surface),
4950
fab-small-disabled-state-container-color: $disabled-container,
5051
fab-small-disabled-state-foreground-color: $disabled,
51-
fab-small-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
52+
fab-small-disabled-state-layer-color: map.get($system, on-surface-variant),
5253
fab-small-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
53-
fab-small-foreground-color: inspection.get-theme-color($theme, foreground, base),
54+
fab-small-foreground-color: map.get($system, on-surface),
5455
fab-small-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
5556
fab-small-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
56-
fab-small-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
57-
fab-small-state-layer-color: inspection.get-theme-color($theme, foreground, base),
58-
fab-state-layer-color: inspection.get-theme-color($theme, foreground, base),
57+
fab-small-ripple-color: m3-utils.color-with-opacity(
58+
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
59+
fab-small-state-layer-color: map.get($system, on-surface),
60+
fab-state-layer-color: map.get($system, on-surface),
5961
);
6062
}
6163

@@ -67,10 +69,12 @@
6769
@return (
6870
fab-container-color: map.get($system, primary),
6971
fab-foreground-color: map.get($system, on-primary),
70-
fab-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
72+
fab-ripple-color: m3-utils.color-with-opacity(
73+
map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
7174
fab-small-container-color: map.get($system, primary),
7275
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%),
76+
fab-small-ripple-color: m3-utils.color-with-opacity(
77+
map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
7478
fab-small-state-layer-color: map.get($system, on-primary),
7579
fab-state-layer-color: map.get($system, on-primary),
7680
);

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,15 @@
1919
$is-dark: inspection.get-theme-type($theme) == dark;
2020

2121
@return (
22-
icon-button-disabled-icon-color: if($is-dark, rgba(#fff, 0.5), rgba(#000, 0.38)),
23-
icon-button-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
22+
icon-button-disabled-icon-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
23+
icon-button-disabled-state-layer-color: map.get($system, on-surface-variant),
2424
icon-button-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
2525
icon-button-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
2626
icon-button-icon-color: inherit,
2727
icon-button-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
28-
icon-button-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
29-
icon-button-state-layer-color: inspection.get-theme-color($theme, foreground, base),
28+
icon-button-ripple-color: m3-utils.color-with-opacity(
29+
map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
30+
icon-button-state-layer-color: map.get($system, on-surface),
3031
);
3132
}
3233

@@ -38,7 +39,8 @@
3839
@return (
3940
icon-button-icon-color: map.get($system, primary),
4041
icon-button-state-layer-color: map.get($system, primary),
41-
icon-button-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
42+
icon-button-ripple-color: m3-utils.color-with-opacity(
43+
map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
4244
);
4345
}
4446

0 commit comments

Comments
 (0)