Skip to content

Commit 7ee07db

Browse files
wagnermacielwagnermaciel
authored
refactor(material/button): switch typography to tokens (#27999)
* refactor(material/button): switch typography to tokens * fixup! refactor(material/button): switch typography to tokens
1 parent 8ac3ca1 commit 7ee07db

File tree

6 files changed

+43
-38
lines changed

6 files changed

+43
-38
lines changed

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use '@material/button/button' as mdc-button;
21
@use '@material/button/button-text-theme' as mdc-button-text-theme;
32
@use '@material/button/button-filled-theme' as mdc-button-filled-theme;
43
@use '@material/button/button-protected-theme' as mdc-button-protected-theme;
@@ -19,7 +18,7 @@
1918
@use '../core/tokens/m2/mat/protected-button' as tokens-mat-protected-button;
2019
@use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button;
2120
@use '../core/tokens/m2/mat/text-button' as tokens-mat-text-button;
22-
21+
@use '../core/style/sass-utils';
2322

2423
@mixin _text-button-variant($theme, $palette) {
2524
$mdc-tokens: if($palette,
@@ -165,15 +164,16 @@
165164
}
166165

167166
@mixin typography($theme) {
168-
@include mdc-helpers.using-mdc-typography($theme) {
169-
@include mdc-button.without-ripple($query: mdc-helpers.$mdc-typography-styles-query);
170-
}
171-
172-
.mat-mdc-button,
173-
.mat-mdc-raised-button,
174-
.mat-mdc-outlined-button,
175-
.mat-mdc-unelevated-button {
176-
line-height: inherit;
167+
@include sass-utils.current-selector-or-root() {
168+
$text-typography-tokens: tokens-mdc-text-button.get-typography-tokens($theme);
169+
$filled-typography-tokens: tokens-mdc-filled-button.get-typography-tokens($theme);
170+
$outlined-typography-tokens: tokens-mdc-outlined-button.get-typography-tokens($theme);
171+
$protected-typography-tokens: tokens-mdc-protected-button.get-typography-tokens($theme);
172+
173+
@include mdc-button-text-theme.theme($text-typography-tokens);
174+
@include mdc-button-filled-theme.theme($filled-typography-tokens);
175+
@include mdc-button-outlined-theme.theme($outlined-typography-tokens);
176+
@include mdc-button-protected-theme.theme($protected-typography-tokens);
177177
}
178178
}
179179

‎src/material/button/button.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,10 @@
107107
}
108108
}
109109

110+
.mat-mdc-button-base {
111+
text-decoration: none;
112+
}
113+
110114
.mat-mdc-button,
111115
.mat-mdc-unelevated-button,
112116
.mat-mdc-raised-button,

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,6 @@ $prefix: (mdc, filled-button);
3535
container-shadow-color: null,
3636
focus-label-text-color: null,
3737
hover-label-text-color: null,
38-
label-text-font: null,
39-
label-text-size: null,
40-
label-text-tracking: null,
41-
label-text-transform: null,
42-
label-text-weight: null,
4338
pressed-label-text-color: null,
4439
with-icon-disabled-icon-color: null,
4540
with-icon-focus-icon-color: null,
@@ -81,7 +76,13 @@ $prefix: (mdc, filled-button);
8176

8277
// Tokens that can be configured through Angular Material's typography theming API.
8378
@function get-typography-tokens($theme) {
84-
@return ();
79+
@return (
80+
label-text-font: inspection.get-theme-typography($theme, button, font-family),
81+
label-text-size: inspection.get-theme-typography($theme, button, font-size),
82+
label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
83+
label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
84+
label-text-transform: none,
85+
);
8586
}
8687

8788
// Tokens that can be configured through Angular Material's density theming API.

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,6 @@ $prefix: (mdc, outlined-button);
4949
with-icon-focus-icon-color: null,
5050
with-icon-pressed-icon-color: null,
5151
with-icon-disabled-icon-color: null,
52-
53-
label-text-size: null,
54-
label-text-font: null,
55-
label-text-weight: null,
56-
label-text-tracking: null,
57-
label-text-transform: null
5852
);
5953
}
6054

@@ -87,7 +81,13 @@ $prefix: (mdc, outlined-button);
8781

8882
// Tokens that can be configured through Angular Material's typography theming API.
8983
@function get-typography-tokens($theme) {
90-
@return ();
84+
@return (
85+
label-text-font: inspection.get-theme-typography($theme, button, font-family),
86+
label-text-size: inspection.get-theme-typography($theme, button, font-size),
87+
label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
88+
label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
89+
label-text-transform: none,
90+
);
9191
}
9292

9393
// Tokens that can be configured through Angular Material's density theming API.

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,6 @@ $prefix: (mdc, protected-button);
3333
disabled-container-elevation: null,
3434
focus-container-elevation: null,
3535
pressed-container-elevation: null,
36-
label-text-font: null,
37-
label-text-size: null,
38-
label-text-tracking: null,
39-
label-text-transform: null,
40-
label-text-weight: null,
4136
with-icon-icon-size: null,
4237
focus-label-text-color: null,
4338
hover-label-text-color: null,
@@ -80,7 +75,13 @@ $prefix: (mdc, protected-button);
8075

8176
// Tokens that can be configured through Angular Material's typography theming API.
8277
@function get-typography-tokens($theme) {
83-
@return ();
78+
@return (
79+
label-text-font: inspection.get-theme-typography($theme, button, font-family),
80+
label-text-size: inspection.get-theme-typography($theme, button, font-size),
81+
label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
82+
label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
83+
label-text-transform: none,
84+
);
8485
}
8586

8687
// Tokens that can be configured through Angular Material's density theming API.

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,6 @@ $prefix: (mdc, text-button);
2121
// prevent the buttons from collapsing if a density mixin isn't included.
2222
container-height: 36px,
2323

24-
// TODO: handle these through the typography styles eventually.
25-
label-text-font: null,
26-
label-text-size: null,
27-
label-text-tracking: null,
28-
label-text-transform: null,
29-
label-text-weight: null,
30-
3124
// =============================================================================================
3225
// = TOKENS NOT USED IN ANGULAR MATERIAL =
3326
// =============================================================================================
@@ -74,7 +67,13 @@ $prefix: (mdc, text-button);
7467

7568
// Tokens that can be configured through Angular Material's typography theming API.
7669
@function get-typography-tokens($theme) {
77-
@return ();
70+
@return (
71+
label-text-font: inspection.get-theme-typography($theme, button, font-family),
72+
label-text-size: inspection.get-theme-typography($theme, button, font-size),
73+
label-text-tracking: inspection.get-theme-typography($theme, button, letter-spacing),
74+
label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
75+
label-text-transform: none,
76+
);
7877
}
7978

8079
// Tokens that can be configured through Angular Material's density theming API.

0 commit comments

Comments
 (0)