Skip to content

Commit f61b49d

Browse files
crisbetocrisbeto
committed
refactor(material/button): clean up tokens and use tokens for ripples (#28030)
* refactor(material/button): clean up tokens and use tokens for ripples These changes rework the existing button setup for emitting different color palette tokens to match how it's being done in the rest of the project. Then it builds on top of the changes to introduce Angular-specific tokens for each of the buttons so that we can implement the ripples through them, instead of the existing variables that are used for all button types at the same time. * fixup! refactor(material/button): clean up tokens and use tokens for ripples (cherry picked from commit 56771e4)
1 parent fcaa95e commit f61b49d

22 files changed

+650
-246
lines changed

‎src/material/button/_button-base.scss‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@use '@material/touch-target' as mdc-touch-target;
22

3+
@use '../core/tokens/token-utils';
34
@use '../core/style/layout-common';
45
@use '../core/mdc-helpers/mdc-helpers';
56

@@ -39,11 +40,6 @@
3940
.mat-mdc-button-persistent-ripple::before {
4041
content: '';
4142
opacity: 0;
42-
background-color: var(--mat-mdc-button-persistent-ripple-color);
43-
}
44-
45-
.mat-ripple-element {
46-
background-color: var(--mat-mdc-button-ripple-color);
4743
}
4844

4945
// The content should appear over the state and ripple layers, otherwise they may adversely affect
@@ -62,6 +58,33 @@
6258
}
6359
}
6460

61+
@mixin mat-private-button-ripple($prefix, $slots) {
62+
@include token-utils.use-tokens($prefix, $slots) {
63+
.mat-ripple-element {
64+
@include token-utils.create-token-slot(background-color, ripple-color);
65+
}
66+
67+
.mat-mdc-button-persistent-ripple::before {
68+
@include token-utils.create-token-slot(background-color, state-layer-color);
69+
}
70+
71+
&:hover .mat-mdc-button-persistent-ripple::before {
72+
@include token-utils.create-token-slot(opacity, hover-state-layer-opacity);
73+
}
74+
75+
&.cdk-program-focused,
76+
&.cdk-keyboard-focused {
77+
.mat-mdc-button-persistent-ripple::before {
78+
@include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
79+
}
80+
}
81+
82+
&:active .mat-mdc-button-persistent-ripple::before {
83+
@include token-utils.create-token-slot(opacity, pressed-state-layer-opacity);
84+
}
85+
}
86+
}
87+
6588
// MDC's disabled buttons define a default cursor with pointer-events none. However, they select
6689
// :disabled for this, which does not affect anchor tags.
6790
// TODO(andrewseguin): Discuss with the MDC team about a mixin we can call for applying this style,
@@ -75,6 +98,15 @@
7598
}
7699
}
77100

101+
// Hides the touch target on lower densities.
102+
@mixin mat-private-button-touch-target-density($scale) {
103+
@include mdc-helpers.if-touch-targets-unsupported($scale) {
104+
.mat-mdc-button-touch-target {
105+
display: none;
106+
}
107+
}
108+
}
109+
78110
@mixin mat-private-button-touch-target($is-square) {
79111
// Element used to ensure that the button has a touch target that meets the required minimum.
80112
// Note that we use this, instead of MDC's built-in `mdc-button--touch` class, because the MDC

‎src/material/button/_button-theme-private.scss‎

Lines changed: 0 additions & 55 deletions
This file was deleted.

‎src/material/button/_button-theme.scss‎

Lines changed: 84 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -5,118 +5,132 @@
55
@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
66
@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
77

8-
@use './button-theme-private';
8+
@use './button-base';
99
@use '../core/mdc-helpers/mdc-helpers';
1010
@use '../core/theming/theming';
1111
@use '../core/theming/inspection';
12+
@use '../core/tokens/token-utils';
1213
@use '../core/typography/typography';
1314
@use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button;
15+
@use '../core/tokens/m2/mat/filled-button' as tokens-mat-filled-button;
1416
@use '../core/tokens/m2/mdc/outlined-button' as tokens-mdc-outlined-button;
17+
@use '../core/tokens/m2/mat/outlined-button' as tokens-mat-outlined-button;
1518
@use '../core/tokens/m2/mdc/protected-button' as tokens-mdc-protected-button;
19+
@use '../core/tokens/m2/mat/protected-button' as tokens-mat-protected-button;
1620
@use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button;
21+
@use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button;
1722

18-
@function _on-color($theme, $palette) {
19-
$is-dark: inspection.get-theme-type($theme) == dark;
20-
@return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
23+
24+
@mixin _text-button-variant($theme, $palette) {
25+
$mdc-tokens: if($palette,
26+
tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, $palette),
27+
tokens-mdc-text-button.get-color-tokens($theme)
28+
);
29+
30+
$mat-tokens: if($palette,
31+
tokens-mat-text-button.private-get-color-palette-color-tokens($theme, $palette),
32+
tokens-mat-text-button.get-color-tokens($theme)
33+
);
34+
35+
@include mdc-button-text-theme.theme($mdc-tokens);
36+
@include token-utils.create-token-values(tokens-mat-text-button.$prefix, $mat-tokens);
2137
}
2238

23-
@mixin base($theme) {
24-
// TODO(mmalerba): Move button base tokens here
39+
@mixin _filled-button-variant($theme, $palette) {
40+
$mdc-tokens: if($palette,
41+
tokens-mdc-filled-button.private-get-color-palette-color-tokens($theme, $palette),
42+
tokens-mdc-filled-button.get-color-tokens($theme)
43+
);
44+
45+
$mat-tokens: if($palette,
46+
tokens-mat-filled-button.private-get-color-palette-color-tokens($theme, $palette),
47+
tokens-mat-filled-button.get-color-tokens($theme)
48+
);
49+
50+
@include mdc-button-filled-theme.theme($mdc-tokens);
51+
@include token-utils.create-token-values(tokens-mat-filled-button.$prefix, $mat-tokens);
2552
}
2653

27-
@mixin color($theme) {
28-
$surface: inspection.get-theme-color($theme, background, card);
29-
$primary: inspection.get-theme-color($theme, primary);
30-
$accent: inspection.get-theme-color($theme, accent);
31-
$error: inspection.get-theme-color($theme, warn);
54+
@mixin _protected-button-variant($theme, $palette) {
55+
$mdc-tokens: if($palette,
56+
tokens-mdc-protected-button.private-get-color-palette-color-tokens($theme, $palette),
57+
tokens-mdc-protected-button.get-color-tokens($theme)
58+
);
3259

33-
$on-surface: _on-color($theme, $surface);
34-
$on-primary: _on-color($theme, $primary);
35-
$on-accent: _on-color($theme, $accent);
36-
$on-error: _on-color($theme, $error);
60+
$mat-tokens: if($palette,
61+
tokens-mat-protected-button.private-get-color-palette-color-tokens($theme, $palette),
62+
tokens-mat-protected-button.get-color-tokens($theme)
63+
);
3764

38-
// TODO: remove these when tokenizing the ripples.
39-
@include mdc-helpers.using-mdc-theme($theme) {
40-
// Ripple colors
41-
.mat-mdc-button, .mat-mdc-outlined-button {
42-
@include button-theme-private.ripple-theme-styles($theme, false);
43-
}
65+
@include mdc-button-protected-theme.theme($mdc-tokens);
66+
@include token-utils.create-token-values(tokens-mat-protected-button.$prefix, $mat-tokens);
67+
}
4468

45-
.mat-mdc-raised-button, .mat-mdc-unelevated-button {
46-
@include button-theme-private.ripple-theme-styles($theme, true);
47-
}
48-
}
69+
@mixin _outlined-button-variant($theme, $palette) {
70+
$mdc-tokens: if($palette,
71+
tokens-mdc-outlined-button.private-get-color-palette-color-tokens($theme, $palette),
72+
tokens-mdc-outlined-button.get-color-tokens($theme)
73+
);
4974

75+
$mat-tokens: if($palette,
76+
tokens-mat-outlined-button.private-get-color-palette-color-tokens($theme, $palette),
77+
tokens-mat-outlined-button.get-color-tokens($theme)
78+
);
79+
80+
@include mdc-button-outlined-theme.theme($mdc-tokens);
81+
@include token-utils.create-token-values(tokens-mat-outlined-button.$prefix, $mat-tokens);
82+
}
83+
84+
@mixin base($theme) {
85+
// TODO(mmalerba): Move button base tokens here
86+
}
87+
88+
@mixin color($theme) {
5089
.mat-mdc-button {
51-
@include mdc-button-text-theme.theme(tokens-mdc-text-button.get-color-tokens($theme));
90+
@include _text-button-variant($theme, null);
5291

5392
&.mat-primary {
54-
@include mdc-button-text-theme.theme(
55-
tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, primary));
93+
@include _text-button-variant($theme, primary);
5694
}
5795

5896
&.mat-accent {
59-
@include mdc-button-text-theme.theme(
60-
tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, accent));
97+
@include _text-button-variant($theme, accent);
6198
}
6299

63100
&.mat-warn {
64-
@include mdc-button-text-theme.theme(
65-
tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, warn));
101+
@include _text-button-variant($theme, warn);
66102
}
67103
}
68104

69105
.mat-mdc-unelevated-button {
70-
$default-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $surface, $on-surface);
71-
$primary-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $primary, $on-primary);
72-
$accent-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $accent, $on-accent);
73-
$warn-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $error, $on-error);
74-
75-
&.mat-unthemed {
76-
@include mdc-button-filled-theme.theme($default-color-tokens);
77-
}
106+
@include _filled-button-variant($theme, null);
78107

79108
&.mat-primary {
80-
@include mdc-button-filled-theme.theme($primary-color-tokens);
109+
@include _filled-button-variant($theme, primary);
81110
}
82111

83112
&.mat-accent {
84-
@include mdc-button-filled-theme.theme($accent-color-tokens);
113+
@include _filled-button-variant($theme, accent);
85114
}
86115

87116
&.mat-warn {
88-
@include mdc-button-filled-theme.theme($warn-color-tokens);
117+
@include _filled-button-variant($theme, warn);
89118
}
90119
}
91120

92121
.mat-mdc-raised-button {
93-
$default-color-tokens: tokens-mdc-protected-button.get-color-tokens(
94-
$theme,
95-
$surface,
96-
$on-surface
97-
);
98-
$primary-color-tokens: tokens-mdc-protected-button.get-color-tokens(
99-
$theme,
100-
$primary,
101-
$on-primary
102-
);
103-
$accent-color-tokens: tokens-mdc-protected-button.get-color-tokens($theme, $accent, $on-accent);
104-
$warn-color-tokens: tokens-mdc-protected-button.get-color-tokens($theme, $error, $on-error);
105-
106-
&.mat-unthemed {
107-
@include mdc-button-protected-theme.theme($default-color-tokens);
108-
}
122+
@include _protected-button-variant($theme, null);
109123

110124
&.mat-primary {
111-
@include mdc-button-protected-theme.theme($primary-color-tokens);
125+
@include _protected-button-variant($theme, primary);
112126
}
113127

114128
&.mat-accent {
115-
@include mdc-button-protected-theme.theme($accent-color-tokens);
129+
@include _protected-button-variant($theme, accent);
116130
}
117131

118132
&.mat-warn {
119-
@include mdc-button-protected-theme.theme($warn-color-tokens);
133+
@include _protected-button-variant($theme, warn);
120134
}
121135

122136
// TODO(wagnermaciel): Remove this workaround when b/301126527 is resolved
@@ -134,33 +148,18 @@
134148
}
135149

136150
.mat-mdc-outlined-button {
137-
$default-color-tokens: tokens-mdc-outlined-button.get-color-tokens(
138-
$theme,
139-
$on-surface,
140-
$on-surface
141-
);
142-
$primary-color-tokens: tokens-mdc-outlined-button.get-color-tokens(
143-
$theme,
144-
$primary,
145-
$on-primary
146-
);
147-
$accent-color-tokens: tokens-mdc-outlined-button.get-color-tokens($theme, $accent, $on-accent);
148-
$warn-color-tokens: tokens-mdc-outlined-button.get-color-tokens($theme, $error, $on-error);
149-
150-
&.mat-unthemed {
151-
@include mdc-button-outlined-theme.theme($default-color-tokens);
152-
}
151+
@include _outlined-button-variant($theme, null);
153152

154153
&.mat-primary {
155-
@include mdc-button-outlined-theme.theme($primary-color-tokens);
154+
@include _outlined-button-variant($theme, primary);
156155
}
157156

158157
&.mat-accent {
159-
@include mdc-button-outlined-theme.theme($accent-color-tokens);
158+
@include _outlined-button-variant($theme, accent);
160159
}
161160

162161
&.mat-warn {
163-
@include mdc-button-outlined-theme.theme($warn-color-tokens);
162+
@include _outlined-button-variant($theme, warn);
164163
}
165164
}
166165
}
@@ -177,25 +176,25 @@
177176
.mat-mdc-button {
178177
$density-tokens: tokens-mdc-text-button.get-density-tokens($theme);
179178
@include mdc-button-text-theme.theme($density-tokens);
180-
@include button-theme-private.touch-target-density($density-scale);
179+
@include button-base.mat-private-button-touch-target-density($density-scale);
181180
}
182181

183182
.mat-mdc-raised-button {
184183
$density-tokens: tokens-mdc-protected-button.get-density-tokens($theme);
185184
@include mdc-button-protected-theme.theme($density-tokens);
186-
@include button-theme-private.touch-target-density($density-scale);
185+
@include button-base.mat-private-button-touch-target-density($density-scale);
187186
}
188187

189188
.mat-mdc-unelevated-button {
190189
$density-tokens: tokens-mdc-filled-button.get-density-tokens($theme);
191190
@include mdc-button-filled-theme.theme($density-tokens);
192-
@include button-theme-private.touch-target-density($density-scale);
191+
@include button-base.mat-private-button-touch-target-density($density-scale);
193192
}
194193

195194
.mat-mdc-outlined-button {
196195
$density-tokens: tokens-mdc-outlined-button.get-density-tokens($theme);
197196
@include mdc-button-outlined-theme.theme($density-tokens);
198-
@include button-theme-private.touch-target-density($density-scale);
197+
@include button-base.mat-private-button-touch-target-density($density-scale);
199198
}
200199
}
201200

0 commit comments

Comments
 (0)