Skip to content

fix(material/button): support palettes for icon button in M3 #29433

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 16, 2024
Merged

fix(material/button): support palettes for icon button in M3 #29433

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 18 additions & 9 deletions src/material/button/_icon-button-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,13 @@
@include token-utils.create-token-values(tokens-mat-icon-button.$prefix, $mat-tokens);
}

@mixin color($theme) {
/// Outputs color theme styles for the mat-icon-button.
/// @param {Map} $theme The theme to generate color styles for.
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
/// $color-variant: The color variant to use for the button: primary, secondary, tertiary, or error.
@mixin color($theme, $options...) {
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
@include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
}
@else {
@include sass-utils.current-selector-or-root() {
Expand Down Expand Up @@ -122,10 +126,14 @@
);
}

@mixin theme($theme) {
/// Outputs all (base, color, typography, and density) theme styles for the mat-icon-button.
/// @param {Map} $theme The theme to generate styles for.
/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
/// $color-variant: The color variant to use for the button: primary, secondary, tertiary, or error.
@mixin theme($theme, $options...) {
@include theming.private-check-duplicate-theme-styles($theme, 'mat-icon-button') {
@if inspection.get-theme-version($theme) == 1 {
@include _theme-from-tokens(inspection.get-theme-tokens($theme));
@include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
}
@else {
@include base($theme);
Expand All @@ -142,13 +150,14 @@
}
}

@mixin _theme-from-tokens($tokens) {
@mixin _theme-from-tokens($tokens, $options...) {
@include validation.selector-defined(
'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector');
@if ($tokens != ()) {
@include token-utils.create-token-values(
tokens-mdc-icon-button.$prefix, map.get($tokens, tokens-mdc-icon-button.$prefix));
@include token-utils.create-token-values(
tokens-mat-icon-button.$prefix, map.get($tokens, tokens-mat-icon-button.$prefix));
$mdc-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-icon-button.$prefix, $options...);
$mat-tokens: token-utils.get-tokens-for($tokens, tokens-mat-icon-button.$prefix, $options...);

@include token-utils.create-token-values(tokens-mdc-icon-button.$prefix, $mdc-tokens);
@include token-utils.create-token-values(tokens-mat-icon-button.$prefix, $mat-tokens);
}
}
2 changes: 2 additions & 0 deletions src/material/core/theming/_color-api-backwards-compatibility.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@use '../../badge/badge-theme';
@use '../../button/button-theme';
@use '../../button/fab-theme';
@use '../../button/icon-button-theme';
@use '../../checkbox/checkbox-theme';
@use '../../chips/chips-theme';
@use '../../datepicker/datepicker-theme';
Expand Down Expand Up @@ -80,6 +81,7 @@ $_overrides-only: true;

&.mat-mdc-button-base {
@include button-theme.color($theme, $primary-options...);
@include icon-button-theme.color($theme, $primary-options...);
}

&.mat-mdc-standard-chip {
Expand Down
33 changes: 31 additions & 2 deletions src/material/core/tokens/m3/mat/_icon-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ $prefix: (mat, icon-button);
/// @param {Map} $token-slots Possible token slots
/// @return {Map} A set of custom tokens for the mat-icon-button
@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
$tokens: (
$tokens: ((
state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
ripple-color: sass-utils.safe-color-change(
Expand All @@ -21,7 +21,36 @@ $prefix: (mat, icon-button);
hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
);
), (
primary: (
state-layer-color: map.get($systems, md-sys-color, primary),
ripple-color: sass-utils.safe-color-change(
map.get($systems, md-sys-color, primary),
$alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
),
),
secondary: (
state-layer-color: map.get($systems, md-sys-color, secondary),
ripple-color: sass-utils.safe-color-change(
map.get($systems, md-sys-color, secondary),
$alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
),
),
tertiary: (
state-layer-color: map.get($systems, md-sys-color, tertiary),
ripple-color: sass-utils.safe-color-change(
map.get($systems, md-sys-color, tertiary),
$alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
),
),
error: (
state-layer-color: map.get($systems, md-sys-color, error),
ripple-color: sass-utils.safe-color-change(
map.get($systems, md-sys-color, error),
$alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
),
)
));

@return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
}
23 changes: 21 additions & 2 deletions src/material/core/tokens/m3/mdc/_icon-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
@use 'sass:map';
@use 'sass:meta';
@use '../../token-utils';

// The prefix used to generate the fully qualified name for tokens in this file.
Expand All @@ -9,9 +11,26 @@ $prefix: (mdc, icon-button);
/// @param {Map} $token-slots Possible token slots
/// @return {Map} A set of tokens for the MDC icon-button
@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
$mdc-tokens: token-utils.get-mdc-tokens('icon-button', $systems, $exclude-hardcoded);
$tokens: token-utils.get-mdc-tokens('icon-button', $systems, $exclude-hardcoded);
$variant-tokens: (
primary: (
icon-color: map.get($systems, md-sys-color, primary)
),
secondary: (
icon-color: map.get($systems, md-sys-color, secondary)
),
tertiary: (
icon-color: map.get($systems, md-sys-color, tertiary)
),
error: (
icon-color: map.get($systems, md-sys-color, error)
)
);

@return token-utils.namespace-tokens($prefix, _fix-tokens($mdc-tokens), $token-slots);
@return token-utils.namespace-tokens($prefix, (
_fix-tokens($tokens),
token-utils.map-values($variant-tokens, meta.get-function(_fix-tokens))
), $token-slots);
}

/// Fixes inconsistent values in the icon button tokens so that they can produce valid styles.
Expand Down