Skip to content

Commit 10ab7dd

Browse files
crisbetocrisbeto
committed
refactor(material/button): emit button tokens at the root
Reworks the button theme to emit the non-palette tokens at the root.
1 parent 2a96cd5 commit 10ab7dd

File tree

4 files changed

+55
-45
lines changed

4 files changed

+55
-45
lines changed

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

Lines changed: 24 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -99,9 +99,14 @@
9999
}
100100

101101
@mixin color($theme) {
102-
.mat-mdc-button {
102+
@include sass-utils.current-selector-or-root() {
103103
@include _text-button-variant($theme, null);
104+
@include _filled-button-variant($theme, null);
105+
@include _protected-button-variant($theme, null);
106+
@include _outlined-button-variant($theme, null);
107+
}
104108

109+
.mat-mdc-button {
105110
&.mat-primary {
106111
@include _text-button-variant($theme, primary);
107112
}
@@ -116,8 +121,6 @@
116121
}
117122

118123
.mat-mdc-unelevated-button {
119-
@include _filled-button-variant($theme, null);
120-
121124
&.mat-primary {
122125
@include _filled-button-variant($theme, primary);
123126
}
@@ -132,8 +135,6 @@
132135
}
133136

134137
.mat-mdc-raised-button {
135-
@include _protected-button-variant($theme, null);
136-
137138
&.mat-primary {
138139
@include _protected-button-variant($theme, primary);
139140
}
@@ -161,8 +162,6 @@
161162
}
162163

163164
.mat-mdc-outlined-button {
164-
@include _outlined-button-variant($theme, null);
165-
166165
&.mat-primary {
167166
@include _outlined-button-variant($theme, primary);
168167
}
@@ -178,12 +177,12 @@
178177
}
179178

180179
@mixin typography($theme) {
181-
@include sass-utils.current-selector-or-root() {
182-
$text-typography-tokens: tokens-mdc-text-button.get-typography-tokens($theme);
183-
$filled-typography-tokens: tokens-mdc-filled-button.get-typography-tokens($theme);
184-
$outlined-typography-tokens: tokens-mdc-outlined-button.get-typography-tokens($theme);
185-
$protected-typography-tokens: tokens-mdc-protected-button.get-typography-tokens($theme);
180+
$text-typography-tokens: tokens-mdc-text-button.get-typography-tokens($theme);
181+
$filled-typography-tokens: tokens-mdc-filled-button.get-typography-tokens($theme);
182+
$outlined-typography-tokens: tokens-mdc-outlined-button.get-typography-tokens($theme);
183+
$protected-typography-tokens: tokens-mdc-protected-button.get-typography-tokens($theme);
186184

185+
@include sass-utils.current-selector-or-root() {
187186
@include mdc-button-text-theme.theme($text-typography-tokens);
188187
@include mdc-button-filled-theme.theme($filled-typography-tokens);
189188
@include mdc-button-outlined-theme.theme($outlined-typography-tokens);
@@ -193,28 +192,23 @@
193192

194193
@mixin density($theme) {
195194
$density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
195+
$text-density-tokens: tokens-mdc-text-button.get-density-tokens($theme);
196+
$filled-density-tokens: tokens-mdc-filled-button.get-density-tokens($theme);
197+
$outlined-density-tokens: tokens-mdc-outlined-button.get-density-tokens($theme);
198+
$protected-density-tokens: tokens-mdc-protected-button.get-density-tokens($theme);
196199

197-
.mat-mdc-button {
198-
$density-tokens: tokens-mdc-text-button.get-density-tokens($theme);
199-
@include mdc-button-text-theme.theme($density-tokens);
200-
@include button-base.mat-private-button-touch-target-density($density-scale);
201-
}
202-
203-
.mat-mdc-raised-button {
204-
$density-tokens: tokens-mdc-protected-button.get-density-tokens($theme);
205-
@include mdc-button-protected-theme.theme($density-tokens);
206-
@include button-base.mat-private-button-touch-target-density($density-scale);
207-
}
208-
209-
.mat-mdc-unelevated-button {
210-
$density-tokens: tokens-mdc-filled-button.get-density-tokens($theme);
211-
@include mdc-button-filled-theme.theme($density-tokens);
212-
@include button-base.mat-private-button-touch-target-density($density-scale);
200+
@include sass-utils.current-selector-or-root() {
201+
@include mdc-button-text-theme.theme($text-density-tokens);
202+
@include mdc-button-filled-theme.theme($filled-density-tokens);
203+
@include mdc-button-outlined-theme.theme($outlined-density-tokens);
204+
@include mdc-button-protected-theme.theme($protected-density-tokens);
213205
}
214206

207+
.mat-mdc-button,
208+
.mat-mdc-raised-button,
209+
.mat-mdc-unelevated-button,
215210
.mat-mdc-outlined-button {
216-
$density-tokens: tokens-mdc-outlined-button.get-density-tokens($theme);
217-
@include mdc-button-outlined-theme.theme($density-tokens);
211+
// TODO: tokenize the touch target visibility.
218212
@include button-base.mat-private-button-touch-target-density($density-scale);
219213
}
220214
}

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

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -43,19 +43,21 @@
4343
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
4444
}
4545
@else {
46-
.mat-mdc-icon-button {
46+
@include sass-utils.current-selector-or-root() {
4747
@include _icon-button-variant($theme, null);
4848

49-
&.mat-primary {
50-
@include _icon-button-variant($theme, primary);
51-
}
49+
.mat-mdc-icon-button {
50+
&.mat-primary {
51+
@include _icon-button-variant($theme, primary);
52+
}
5253

53-
&.mat-accent {
54-
@include _icon-button-variant($theme, accent);
55-
}
54+
&.mat-accent {
55+
@include _icon-button-variant($theme, accent);
56+
}
5657

57-
&.mat-warn {
58-
@include _icon-button-variant($theme, warn);
58+
&.mat-warn {
59+
@include _icon-button-variant($theme, warn);
60+
}
5961
}
6062
}
6163
}

‎src/material/core/tokens/m2/mdc/_text-button.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,6 @@ $prefix: (mdc, text-button);
1717
@return (
1818
container-shape: 4px,
1919

20-
// TODO: `container-height` is also included so it has a default value to
21-
// prevent the buttons from collapsing if a density mixin isn't included.
22-
container-height: 36px,
23-
2420
// =============================================================================================
2521
// = TOKENS NOT USED IN ANGULAR MATERIAL =
2622
// =============================================================================================

‎src/material/toolbar/toolbar.scss‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
@use '@angular/cdk';
22
@use '../core/tokens/token-utils';
33
@use '../core/tokens/m2/mat/toolbar' as tokens-mat-toolbar;
4+
@use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button;
5+
@use '../core/tokens/m2/mdc/outlined-button' as tokens-mdc-outlined-button;
46
@use '../core/style/variables';
57

68
$row-padding: 16px !default;
@@ -49,8 +51,24 @@ $height-mobile-portrait: 56px !default;
4951
}
5052

5153
.mat-mdc-button-base.mat-mdc-button-base.mat-unthemed {
52-
--mdc-text-button-label-text-color: inherit;
53-
--mdc-outlined-button-label-text-color: inherit;
54+
$color-token: null;
55+
56+
@include token-utils.use-tokens(
57+
tokens-mat-toolbar.$prefix, tokens-mat-toolbar.get-token-slots()) {
58+
$color-token: var(#{token-utils.get-token-variable(container-text-color)});
59+
}
60+
61+
@include token-utils.use-tokens(
62+
tokens-mdc-text-button.$prefix, tokens-mdc-text-button.get-token-slots()) {
63+
$token: token-utils.get-token-variable(label-text-color);
64+
#{$token}: #{$color-token};
65+
}
66+
67+
@include token-utils.use-tokens(
68+
tokens-mdc-outlined-button.$prefix, tokens-mdc-outlined-button.get-token-slots()) {
69+
$token: token-utils.get-token-variable(label-text-color);
70+
#{$token}: #{$color-token};
71+
}
5472
}
5573
}
5674

0 commit comments

Comments
 (0)