Skip to content

Commit 244bed4

Browse files
crisbetocrisbeto
authored
feat(material-experimental/theming): add M3 button tokens (#28375)
Sets up the tokens for the M3 buttons.
1 parent 90b37e5 commit 244bed4

File tree

6 files changed

+364
-92
lines changed

6 files changed

+364
-92
lines changed

‎src/dev-app/theme-m3.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ html {
4141
@include mat.autocomplete-theme($light-theme);
4242
@include mat.badge-theme($light-theme);
4343
@include mat.bottom-sheet-theme($light-theme);
44+
@include mat.button-theme($light-theme);
4445
@include mat.button-toggle-theme($light-theme);
4546
@include mat.card-theme($light-theme);
4647
@include mat.checkbox-theme($light-theme);
@@ -87,6 +88,7 @@ html {
8788
@include mat.autocomplete-color($dark-theme);
8889
@include mat.badge-color($dark-theme);
8990
@include mat.bottom-sheet-color($dark-theme);
91+
@include mat.button-color($dark-theme);
9092
@include mat.button-toggle-color($dark-theme);
9193
@include mat.card-color($dark-theme);
9294
@include mat.checkbox-color($dark-theme);
@@ -132,6 +134,7 @@ html {
132134
@include mat.autocomplete-density($scale-theme);
133135
@include mat.badge-density($scale-theme);
134136
@include mat.bottom-sheet-density($scale-theme);
137+
@include mat.button-density($scale-theme);
135138
@include mat.button-toggle-density($scale-theme);
136139
@include mat.card-density($scale-theme);
137140
@include mat.checkbox-density($scale-theme);

‎src/material-experimental/theming/_custom-tokens.scss

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -339,13 +339,86 @@
339339
);
340340
}
341341

342+
/// Generates custom tokens for the mat-button.
343+
/// @param {Map} $systems The MDC system tokens
344+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
345+
/// @return {Map} A set of custom tokens for the mat-button
346+
@function text-button($systems, $exclude-hardcoded) {
347+
@return (
348+
state-layer-color: map.get($systems, md-sys-color, primary),
349+
disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
350+
ripple-color: mat.private-safe-color-change(
351+
map.get($systems, md-sys-color, primary),
352+
$alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
353+
),
354+
hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
355+
focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
356+
pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
357+
);
358+
}
359+
360+
/// Generates custom tokens for the mat-flat-button.
361+
/// @param {Map} $systems The MDC system tokens
362+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
363+
/// @return {Map} A set of custom tokens for the mat-flat-button
364+
@function filled-button($systems, $exclude-hardcoded) {
365+
@return (
366+
state-layer-color: map.get($systems, md-sys-color, on-primary),
367+
disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
368+
ripple-color: mat.private-safe-color-change(
369+
map.get($systems, md-sys-color, on-primary),
370+
$alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
371+
),
372+
hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
373+
focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
374+
pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
375+
);
376+
}
377+
378+
/// Generates custom tokens for the mat-raised-button.
379+
/// @param {Map} $systems The MDC system tokens
380+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
381+
/// @return {Map} A set of custom tokens for the mat-raised-button
382+
@function elevated-button($systems, $exclude-hardcoded) {
383+
@return (
384+
state-layer-color: map.get($systems, md-sys-color, primary),
385+
disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
386+
ripple-color: mat.private-safe-color-change(
387+
map.get($systems, md-sys-color, primary),
388+
$alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
389+
),
390+
hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
391+
focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
392+
pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
393+
);
394+
}
395+
396+
/// Generates custom tokens for the mat-outlined-button.
397+
/// @param {Map} $systems The MDC system tokens
398+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
399+
/// @return {Map} A set of custom tokens for the mat-outlined-button
400+
@function outlined-button($systems, $exclude-hardcoded) {
401+
@return (
402+
state-layer-color: map.get($systems, md-sys-color, primary),
403+
disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
404+
ripple-color: mat.private-safe-color-change(
405+
map.get($systems, md-sys-color, primary),
406+
$alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
407+
),
408+
hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
409+
focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
410+
pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
411+
);
412+
}
413+
342414
/// Generates custom tokens for the mat-icon-button.
343415
/// @param {Map} $systems The MDC system tokens
344416
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
345417
/// @return {Map} A set of custom tokens for the mat-icon-button
346418
@function icon-button($systems, $exclude-hardcoded) {
347419
@return (
348420
state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
421+
disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
349422
ripple-color: mat.private-safe-color-change(
350423
map.get($systems, md-sys-color, on-surface-variant),
351424
$alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)

‎src/material-experimental/theming/_m3-density.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,18 @@ $_density-tokens: (
2828
(mdc, extended-fab): (),
2929
(mdc, fab): (),
3030
(mdc, filled-text-field): (),
31+
(mdc, text-button): (
32+
container-height: (40px, 36px, 32px, 28px),
33+
),
34+
(mdc, protected-button): (
35+
container-height: (40px, 36px, 32px, 28px),
36+
),
37+
(mdc, filled-button): (
38+
container-height: (40px, 36px, 32px, 28px),
39+
),
40+
(mdc, outlined-button): (
41+
container-height: (40px, 36px, 32px, 28px),
42+
),
3143
(mdc, icon-button): (
3244
state-layer-size: (48px, 44px, 40px, 36px, 32px, 28px),
3345
),

‎src/material-experimental/theming/_m3-tokens.scss

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -256,6 +256,71 @@
256256
@return $tokens;
257257
}
258258

259+
260+
/// Fixes inconsistent values in the text button tokens so that they can produce valid styles.
261+
/// @param {Map} $initial-tokens Map of text button tokens currently being generated.
262+
/// @param {Map} $all-tokens Map of all text button tokens, including hardcoded values.
263+
/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
264+
@function _fix-text-button-tokens($initial-tokens, $all-tokens) {
265+
@return _combine-color-tokens($initial-tokens, $all-tokens, (
266+
(
267+
color: 'disabled-label-text-color',
268+
opacity: 'disabled-label-text-opacity',
269+
),
270+
));
271+
}
272+
273+
/// Fixes inconsistent values in the filled button tokens so that they can produce valid styles.
274+
/// @param {Map} $initial-tokens Map of filled button tokens currently being generated.
275+
/// @param {Map} $all-tokens Map of all filled button tokens, including hardcoded values.
276+
/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
277+
@function _fix-filled-button-tokens($initial-tokens, $all-tokens) {
278+
@return _combine-color-tokens($initial-tokens, $all-tokens, (
279+
(
280+
color: 'disabled-label-text-color',
281+
opacity: 'disabled-label-text-opacity',
282+
),
283+
(
284+
color: 'disabled-container-color',
285+
opacity: 'disabled-container-opacity',
286+
)
287+
));
288+
}
289+
290+
/// Fixes inconsistent values in the protected button tokens so that they can produce valid styles.
291+
/// @param {Map} $initial-tokens Map of protected button tokens currently being generated.
292+
/// @param {Map} $all-tokens Map of all protected button tokens, including hardcoded values.
293+
/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
294+
@function _fix-protected-button-tokens($initial-tokens, $all-tokens) {
295+
@return _combine-color-tokens($initial-tokens, $all-tokens, (
296+
(
297+
color: 'disabled-label-text-color',
298+
opacity: 'disabled-label-text-opacity',
299+
),
300+
(
301+
color: 'disabled-container-color',
302+
opacity: 'disabled-container-opacity',
303+
)
304+
));
305+
}
306+
307+
/// Fixes inconsistent values in the outlined button tokens so that they can produce valid styles.
308+
/// @param {Map} $initial-tokens Map of outlined button tokens currently being generated.
309+
/// @param {Map} $all-tokens Map of all outlined button tokens, including hardcoded values.
310+
/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
311+
@function _fix-outlined-button-tokens($initial-tokens, $all-tokens) {
312+
@return _combine-color-tokens($initial-tokens, $all-tokens, (
313+
(
314+
color: 'disabled-label-text-color',
315+
opacity: 'disabled-label-text-opacity',
316+
),
317+
(
318+
color: 'disabled-outline-color',
319+
opacity: 'disabled-outline-opacity',
320+
)
321+
));
322+
}
323+
259324
/// Fixes inconsistent values in the outlined text field tokens so that they can produce valid
260325
/// styles.
261326
/// @param {Map} $initial-tokens Map of outlined text field tokens currently being generated.
@@ -386,6 +451,47 @@
386451
mdc-tokens.md-comp-icon-button-values($systems, $exclude-hardcoded),
387452
$token-slots
388453
),
454+
_namespace-tokens(
455+
(mdc, text-button),
456+
_fix-text-button-tokens(
457+
mdc-tokens.md-comp-text-button-values($systems, $exclude-hardcoded),
458+
// Need to pass in the hardcoded values, because they
459+
// include opacities that are used for the disabled state.
460+
mdc-tokens.md-comp-text-button-values($systems, false),
461+
),
462+
$token-slots
463+
),
464+
_namespace-tokens(
465+
// Note: in M3 the "protected" button is called "elevated".
466+
(mdc, protected-button),
467+
_fix-protected-button-tokens(
468+
mdc-tokens.md-comp-elevated-button-values($systems, $exclude-hardcoded),
469+
// Need to pass in the hardcoded values, because they
470+
// include opacities that are used for the disabled state.
471+
mdc-tokens.md-comp-elevated-button-values($systems, false),
472+
),
473+
$token-slots
474+
),
475+
_namespace-tokens(
476+
(mdc, filled-button),
477+
_fix-filled-button-tokens(
478+
mdc-tokens.md-comp-filled-button-values($systems, $exclude-hardcoded),
479+
// Need to pass in the hardcoded values, because they
480+
// include opacities that are used for the disabled state.
481+
mdc-tokens.md-comp-filled-button-values($systems, false),
482+
),
483+
$token-slots
484+
),
485+
_namespace-tokens(
486+
(mdc, outlined-button),
487+
_fix-outlined-button-tokens(
488+
mdc-tokens.md-comp-outlined-button-values($systems, $exclude-hardcoded),
489+
// Need to pass in the hardcoded values, because they
490+
// include opacities that are used for the disabled state.
491+
mdc-tokens.md-comp-outlined-button-values($systems, false),
492+
),
493+
$token-slots
494+
),
389495
_namespace-tokens(
390496
(mdc, linear-progress),
391497
mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded),
@@ -504,6 +610,27 @@
504610
custom-tokens.icon($systems, $exclude-hardcoded),
505611
$token-slots
506612
),
613+
_namespace-tokens(
614+
(mat, text-button),
615+
custom-tokens.text-button($systems, $exclude-hardcoded),
616+
$token-slots
617+
),
618+
_namespace-tokens(
619+
(mat, filled-button),
620+
custom-tokens.filled-button($systems, $exclude-hardcoded),
621+
$token-slots
622+
),
623+
_namespace-tokens(
624+
// Note: in M3 the "protected" button is called "elevated".
625+
(mat, protected-button),
626+
custom-tokens.elevated-button($systems, $exclude-hardcoded),
627+
$token-slots
628+
),
629+
_namespace-tokens(
630+
(mat, outlined-button),
631+
custom-tokens.outlined-button($systems, $exclude-hardcoded),
632+
$token-slots
633+
),
507634
_namespace-tokens(
508635
(mat, icon-button),
509636
custom-tokens.icon-button($systems, $exclude-hardcoded),

0 commit comments

Comments
 (0)