Skip to content

Commit 028255c

Browse files
crisbetocrisbeto
committed
refactor(material-experimental/mdc-button): switch to new theming API
Switches the MDC-based buttons to the new token-based theming API.
1 parent 52155ac commit 028255c

File tree

11 files changed

+308
-185
lines changed

11 files changed

+308
-185
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
&[disabled] {
6060
cursor: default;
6161
pointer-events: none;
62+
@content;
6263
}
6364
}
6465

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

Lines changed: 2 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,16 @@
1-
@use '@material/theme/theme-color' as mdc-theme-color;
2-
@use '@material/theme/theme' as mdc-theme;
31
@use '../../material/core/ripple/ripple-theme';
42

5-
// Selector for the element that has a background color and opacity applied to its ::before and
6-
// ::after for state interactions (hover, active, focus). Their API calls this their
7-
// "ripple target", but we do not use it as our ripple, just state color.
8-
$button-state-target: '.mdc-button__ripple';
9-
$fab-state-target: '.mdc-fab__ripple';
10-
113
// The MDC button's ripple ink color is based on the theme color, not on the foreground base
124
// which is what the ripple mixin uses. This creates a new theme that sets the color to the
135
// foreground base to appropriately color the ink.
14-
@mixin ripple-ink-color($mdc-color) {
6+
@mixin ripple-ink-color($color) {
157
@include ripple-theme.color((
168
foreground: (
17-
base: mdc-theme-color.prop-value($mdc-color)
9+
base: $color
1810
),
1911
));
2012
}
2113

22-
// Applies the disabled theme color to the text color.
23-
@mixin apply-disabled-color() {
24-
@include mdc-theme.prop(color,
25-
mdc-theme-color.ink-color-for-fill_(disabled, mdc-theme-color.$background));
26-
}
27-
2814
// Wraps the content style in a selector for the disabled state.
2915
// MDC adds theme color by using :not(:disabled), so just using [disabled] once will not
3016
// override this, neither will it apply to anchor tags. This needs to override the
@@ -37,14 +23,6 @@ $fab-state-target: '.mdc-fab__ripple';
3723
}
3824
}
3925

40-
// Applies the disabled theme background color for raised buttons. Value is taken from
41-
// mixin `mdc-button--filled`.
42-
// TODO(andrewseguin): Discuss with the MDC team about providing a variable for the 0.12 value
43-
// or otherwise have a mixin we can call to apply this style for both button and anchors.
44-
@mixin apply-disabled-background() {
45-
@include mdc-theme.prop(background-color, rgba(mdc-theme-color.prop-value(on-surface), 0.12));
46-
}
47-
4826
// Hides the touch target on lower densities.
4927
@mixin touch-target-density($scale) {
5028
@if ($scale == -2 or $scale == 'minimum') {

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

Lines changed: 145 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,212 @@
1+
@use 'sass:map';
12
@use '@material/button/button' as mdc-button;
23
@use '@material/button/button-theme' as mdc-button-theme;
3-
@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
4+
@use '@material/button/button-text-theme' as mdc-button-text-theme;
5+
@use '@material/button/button-filled-theme' as mdc-button-filled-theme;
6+
@use '@material/button/button-protected-theme' as mdc-button-protected-theme;
7+
@use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
48
@use '@material/theme/theme-color' as mdc-theme-color;
5-
@use '@material/theme/theme' as mdc-theme;
6-
@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
7-
@use '../../material/core/ripple/ripple-theme';
89
@use '../../material/core/typography/typography';
910
@use '../mdc-helpers/mdc-helpers';
1011
@use '../../material/core/theming/theming';
1112
@use './button-theme-private';
1213

14+
@mixin _button-variant($color) {
15+
@include mdc-button-text-theme.theme((
16+
focus-state-layer-color: $color,
17+
hover-state-layer-color: $color,
18+
label-text-color: $color,
19+
pressed-state-layer-color: $color,
20+
));
21+
}
22+
23+
@mixin _unelevated-button-variant($foreground, $background) {
24+
@include mdc-button-filled-theme.theme((
25+
container-color: $background,
26+
focus-state-layer-color: $foreground,
27+
hover-state-layer-color: $foreground,
28+
label-text-color: $foreground,
29+
pressed-state-layer-color: $foreground,
30+
));
31+
}
32+
33+
@mixin _raised-button-variant($foreground, $background) {
34+
@include mdc-button-protected-theme.theme((
35+
container-color: $background,
36+
focus-state-layer-color: $foreground,
37+
hover-state-layer-color: $foreground,
38+
label-text-color: $foreground,
39+
pressed-state-layer-color: $foreground,
40+
));
41+
}
42+
43+
@mixin _outlined-button-variant($color) {
44+
@include mdc-button-outlined-theme.theme((
45+
focus-state-layer-color: $color,
46+
hover-state-layer-color: $color,
47+
label-text-color: $color,
48+
outline-color: $color,
49+
pressed-state-layer-color: $color,
50+
));
51+
}
52+
1353
@mixin color($config-or-theme) {
1454
$config: theming.get-color-config($config-or-theme);
1555
@include mdc-helpers.mat-using-mdc-theme($config) {
16-
// Add state interactions for hover, focus, press, active. Colors are changed based on
17-
// the mixin mdc-states-base-color
18-
.mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button {
19-
@include mdc-ripple-theme.states(
20-
$query: mdc-helpers.$mat-theme-styles-query,
21-
$ripple-target: button-theme-private.$button-state-target);
22-
}
23-
24-
.mat-mdc-button, .mat-mdc-outlined-button {
56+
$on-surface: mdc-theme-color.prop-value(on-surface);
57+
$surface: mdc-theme-color.prop-value(surface);
58+
$disabled-ink-color: rgba($on-surface, if(map.get($config, is-dark), 0.5, 0.38));
59+
$disabled-container-color: rgba($on-surface, 0.12);
60+
$primary: mdc-theme-color.prop-value(primary);
61+
$on-primary: mdc-theme-color.prop-value(on-primary);
62+
$secondary: mdc-theme-color.prop-value(secondary);
63+
$on-secondary: mdc-theme-color.prop-value(on-secondary);
64+
$error: mdc-theme-color.prop-value(error);
65+
$on-error: mdc-theme-color.prop-value(on-error);
66+
67+
.mat-mdc-button {
2568
&.mat-unthemed {
26-
@include mdc-button-theme.ink-color(mdc-theme-color.$on-surface,
27-
$query: mdc-helpers.$mat-theme-styles-query);
69+
@include _button-variant($on-surface);
2870
}
2971

3072
&.mat-primary {
31-
@include mdc-button-theme.ink-color(primary, $query: mdc-helpers.$mat-theme-styles-query);
32-
@include mdc-ripple-theme.states-base-color(primary,
33-
$query: mdc-helpers.$mat-theme-styles-query,
34-
$ripple-target: button-theme-private.$button-state-target);
35-
@include button-theme-private.ripple-ink-color(primary);
73+
@include _button-variant($primary);
3674
}
3775

3876
&.mat-accent {
39-
@include mdc-button-theme.ink-color(secondary, $query: mdc-helpers.$mat-theme-styles-query);
40-
@include mdc-ripple-theme.states-base-color(secondary,
41-
$query: mdc-helpers.$mat-theme-styles-query,
42-
$ripple-target: button-theme-private.$button-state-target);
43-
@include button-theme-private.ripple-ink-color(secondary);
77+
@include _button-variant($secondary);
4478
}
4579

4680
&.mat-warn {
47-
@include mdc-button-theme.ink-color(error, $query: mdc-helpers.$mat-theme-styles-query);
48-
@include mdc-ripple-theme.states-base-color(error,
49-
$query: mdc-helpers.$mat-theme-styles-query,
50-
$ripple-target: button-theme-private.$button-state-target);
51-
@include button-theme-private.ripple-ink-color(error);
81+
@include _button-variant($error);
82+
}
83+
84+
@include button-theme-private.apply-disabled-style() {
85+
@include mdc-button-text-theme.theme((
86+
// We need to pass both the disabled and enabled values, because the enabled
87+
// ones apply to anchors while the disabled ones are for buttons.
88+
disabled-label-text-color: $disabled-ink-color,
89+
label-text-color: $disabled-ink-color
90+
));
5291
}
5392
}
5493

55-
.mat-mdc-raised-button,
5694
.mat-mdc-unelevated-button {
5795
&.mat-unthemed {
58-
@include mdc-button-theme.container-fill-color(mdc-theme-color.$surface,
59-
$query: mdc-helpers.$mat-theme-styles-query);
60-
@include mdc-button-theme.ink-color(mdc-theme-color.$on-surface,
61-
$query: mdc-helpers.$mat-theme-styles-query);
62-
@include mdc-ripple-theme.states-base-color(mdc-theme-color.$on-surface,
63-
$query: mdc-helpers.$mat-theme-styles-query,
64-
$ripple-target: button-theme-private.$button-state-target);
96+
@include _unelevated-button-variant($on-surface, $surface);
6597
}
6698

6799
&.mat-primary {
68-
@include mdc-button-theme.container-fill-color(primary,
69-
$query: mdc-helpers.$mat-theme-styles-query);
70-
@include mdc-button-theme.ink-color(on-primary,
71-
$query: mdc-helpers.$mat-theme-styles-query);
72-
@include mdc-ripple-theme.states-base-color(on-primary,
73-
$query: mdc-helpers.$mat-theme-styles-query,
74-
$ripple-target: button-theme-private.$button-state-target);
75-
@include button-theme-private.ripple-ink-color(on-primary);
100+
@include _unelevated-button-variant($on-primary, $primary);
76101
}
77102

78103
&.mat-accent {
79-
@include mdc-button-theme.container-fill-color(secondary,
80-
$query: mdc-helpers.$mat-theme-styles-query);
81-
@include mdc-button-theme.ink-color(on-secondary,
82-
$query: mdc-helpers.$mat-theme-styles-query);
83-
@include mdc-ripple-theme.states-base-color(on-secondary,
84-
$query: mdc-helpers.$mat-theme-styles-query,
85-
$ripple-target: button-theme-private.$button-state-target);
86-
@include button-theme-private.ripple-ink-color(on-secondary);
104+
@include _unelevated-button-variant($on-secondary, $secondary);
87105
}
88106

89107
&.mat-warn {
90-
@include mdc-button-theme.container-fill-color(error,
91-
$query: mdc-helpers.$mat-theme-styles-query);
92-
@include mdc-button-theme.ink-color(on-error, $query: mdc-helpers.$mat-theme-styles-query);
93-
@include mdc-ripple-theme.states-base-color(on-error,
94-
$query: mdc-helpers.$mat-theme-styles-query,
95-
$ripple-target: button-theme-private.$button-state-target);
96-
@include button-theme-private.ripple-ink-color(on-error);
108+
@include _unelevated-button-variant($on-error, $error);
97109
}
98110

99111
@include button-theme-private.apply-disabled-style() {
100-
@include button-theme-private.apply-disabled-background();
112+
@include mdc-button-filled-theme.theme((
113+
// We need to pass both the disabled and enabled values, because the enabled
114+
// ones apply to anchors while the disabled ones are for buttons.
115+
disabled-container-color: $disabled-container-color,
116+
disabled-label-text-color: $disabled-ink-color,
117+
container-color: $disabled-container-color,
118+
label-text-color: $disabled-ink-color,
119+
));
101120
}
102121
}
103122

104-
.mat-mdc-outlined-button {
123+
.mat-mdc-raised-button {
105124
&.mat-unthemed {
106-
@include mdc-button-theme.outline-color(mdc-theme-color.$on-surface,
107-
$query: mdc-helpers.$mat-theme-styles-query);
125+
@include _raised-button-variant($on-surface, $surface);
108126
}
109127

110128
&.mat-primary {
111-
@include mdc-button-theme.outline-color(primary,
112-
$query: mdc-helpers.$mat-theme-styles-query);
129+
@include _raised-button-variant($on-primary, $primary);
113130
}
114131

115132
&.mat-accent {
116-
@include mdc-button-theme.outline-color(secondary,
117-
$query: mdc-helpers.$mat-theme-styles-query);
133+
@include _raised-button-variant($on-secondary, $secondary);
118134
}
119135

120136
&.mat-warn {
121-
@include mdc-button-theme.outline-color(error,
122-
$query: mdc-helpers.$mat-theme-styles-query);
137+
@include _raised-button-variant($on-error, $error);
123138
}
124139

125140
@include button-theme-private.apply-disabled-style() {
126-
@include mdc-theme.prop(border-color,
127-
mdc-theme-color.ink-color-for-fill_(disabled, mdc-theme-color.$background));
141+
@include mdc-button-protected-theme.theme((
142+
// We need to pass both the disabled and enabled values, because the enabled
143+
// ones apply to anchors while the disabled ones are for buttons.
144+
disabled-container-color: $disabled-container-color,
145+
disabled-label-text-color: $disabled-ink-color,
146+
container-color: $disabled-container-color,
147+
label-text-color: $disabled-ink-color,
148+
container-elevation: 0,
149+
));
128150
}
129151
}
130152

131-
.mat-mdc-raised-button {
153+
.mat-mdc-outlined-button {
154+
&.mat-unthemed {
155+
@include _outlined-button-variant($on-surface);
156+
}
157+
158+
&.mat-primary {
159+
@include _outlined-button-variant($primary);
160+
}
161+
162+
&.mat-accent {
163+
@include _outlined-button-variant($secondary);
164+
}
165+
166+
&.mat-warn {
167+
@include _outlined-button-variant($error);
168+
}
169+
132170
@include button-theme-private.apply-disabled-style() {
133-
@include mdc-elevation-theme.elevation(0, $query: mdc-helpers.$mat-theme-styles-query);
171+
@include mdc-button-outlined-theme.theme((
172+
// We need to pass both the disabled and enabled values, because the enabled
173+
// ones apply to anchors while the disabled ones are for buttons.
174+
label-text-color: $disabled-ink-color,
175+
outline-color: $disabled-ink-color,
176+
disabled-label-text-color: $disabled-ink-color,
177+
disabled-outline-color: $disabled-ink-color,
178+
));
134179
}
135180
}
136181

137-
.mat-mdc-button, .mat-mdc-raised-button, .mat-mdc-unelevated-button, .mat-mdc-outlined-button {
138-
@include button-theme-private.apply-disabled-style() {
139-
@include button-theme-private.apply-disabled-color();
182+
// Ripple colors
183+
.mat-mdc-button, .mat-mdc-outlined-button {
184+
&.mat-primary {
185+
@include button-theme-private.ripple-ink-color($primary);
186+
}
187+
188+
&.mat-accent {
189+
@include button-theme-private.ripple-ink-color($secondary);
190+
}
191+
192+
&.mat-warn {
193+
@include button-theme-private.ripple-ink-color($error);
140194
}
141195
}
142196

143-
@include mdc-button.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
197+
.mat-mdc-raised-button, .mat-mdc-unelevated-button {
198+
&.mat-primary {
199+
@include button-theme-private.ripple-ink-color($on-primary);
200+
}
201+
202+
&.mat-accent {
203+
@include button-theme-private.ripple-ink-color($on-secondary);
204+
}
205+
206+
&.mat-warn {
207+
@include button-theme-private.ripple-ink-color($on-error);
208+
}
209+
}
144210
}
145211
}
146212

0 commit comments

Comments
 (0)