Skip to content

Commit

Permalink
fix(material-experimental/theming): align M3 icon buttons with spec
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
crisbeto committed Jan 16, 2024
1 parent e05795d commit ba3680e
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 2 deletions.
2 changes: 1 addition & 1 deletion src/material-experimental/theming/_m3-density.scss
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ $_density-tokens: (
container-height: (40px, 36px, 32px, 28px),
),
(mdc, icon-button): (
state-layer-size: (48px, 44px, 40px, 36px, 32px, 28px),
state-layer-size: (40px, 36px, 32px, 28px, 24px, 20px),
),
(mdc, linear-progress): (),
(mdc, list): (
Expand Down
27 changes: 26 additions & 1 deletion src/material-experimental/theming/_m3-tokens.scss
Original file line number Diff line number Diff line change
Expand Up @@ -415,6 +415,26 @@
);
}

/// Fixes inconsistent values in the icon button tokens so that they can produce valid styles.
/// @param {Map} $initial-tokens Map of icon button tokens currently being generated.
/// @param {Map} $all-tokens Map of all icon button tokens, including hardcoded values.
/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
@function _fix-icon-button-tokens($tokens, $all-tokens) {
$rename-keys: (
unselected-icon-color: icon-color,
);

$remapped-tokens: _rename-map-keys($tokens, $rename-keys);
$remapped-all-tokens: _rename-map-keys($all-tokens, $rename-keys);

@return _combine-color-tokens($remapped-tokens, $remapped-all-tokens, (
(
color: disabled-icon-color,
opacity: disabled-icon-opacity,
),
));
}

/// Generates a set of namespaced tokens for all components.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $include-non-systemized Whether to include non-systemized tokens
Expand Down Expand Up @@ -509,7 +529,12 @@
),
_namespace-tokens(
(mdc, icon-button),
mdc-tokens.md-comp-icon-button-values($systems, $exclude-hardcoded),
_fix-icon-button-tokens(
mdc-tokens.md-comp-icon-button-values($systems, $exclude-hardcoded),
// Need to pass in the hardcoded values, because they
// include opacities that are used for the disabled state.
mdc-tokens.md-comp-icon-button-values($systems, false)
),
$token-slots
),
_namespace-tokens(
Expand Down

0 comments on commit ba3680e

Please sign in to comment.