Skip to content

Commit ba3680e

Browse files
committed
fix(material-experimental/theming): align M3 icon buttons with spec
Fixes the following issues with the M3 icon buttons: * They didn't have the right size. In M3 icon buttons are a bit smaller. * The disabled color opacity wasn't being applied. * The button didn't have the right color.
1 parent e05795d commit ba3680e

File tree

2 files changed

+27
-2
lines changed

2 files changed

+27
-2
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ $_density-tokens: (
4141
container-height: (40px, 36px, 32px, 28px),
4242
),
4343
(mdc, icon-button): (
44-
state-layer-size: (48px, 44px, 40px, 36px, 32px, 28px),
44+
state-layer-size: (40px, 36px, 32px, 28px, 24px, 20px),
4545
),
4646
(mdc, linear-progress): (),
4747
(mdc, list): (

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -415,6 +415,26 @@
415415
);
416416
}
417417

418+
/// Fixes inconsistent values in the icon button tokens so that they can produce valid styles.
419+
/// @param {Map} $initial-tokens Map of icon button tokens currently being generated.
420+
/// @param {Map} $all-tokens Map of all icon button tokens, including hardcoded values.
421+
/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
422+
@function _fix-icon-button-tokens($tokens, $all-tokens) {
423+
$rename-keys: (
424+
unselected-icon-color: icon-color,
425+
);
426+
427+
$remapped-tokens: _rename-map-keys($tokens, $rename-keys);
428+
$remapped-all-tokens: _rename-map-keys($all-tokens, $rename-keys);
429+
430+
@return _combine-color-tokens($remapped-tokens, $remapped-all-tokens, (
431+
(
432+
color: disabled-icon-color,
433+
opacity: disabled-icon-opacity,
434+
),
435+
));
436+
}
437+
418438
/// Generates a set of namespaced tokens for all components.
419439
/// @param {Map} $systems The MDC system tokens
420440
/// @param {Boolean} $include-non-systemized Whether to include non-systemized tokens
@@ -509,7 +529,12 @@
509529
),
510530
_namespace-tokens(
511531
(mdc, icon-button),
512-
mdc-tokens.md-comp-icon-button-values($systems, $exclude-hardcoded),
532+
_fix-icon-button-tokens(
533+
mdc-tokens.md-comp-icon-button-values($systems, $exclude-hardcoded),
534+
// Need to pass in the hardcoded values, because they
535+
// include opacities that are used for the disabled state.
536+
mdc-tokens.md-comp-icon-button-values($systems, false)
537+
),
513538
$token-slots
514539
),
515540
_namespace-tokens(

0 commit comments

Comments
 (0)