Skip to content

Commit

Permalink
feat(material-experimental/theming): add M3 button tokens (#28375)
Browse files Browse the repository at this point in the history 
Sets up the tokens for the M3 buttons.
  • Loading branch information
@crisbeto
crisbeto authored Jan 9, 2024
1 parent 90b37e5 commit 244bed4
Show file tree
Hide file tree
Showing 6 changed files with 364 additions and 92 deletions.
3 changes: 3 additions & 0 deletions src/dev-app/theme-m3.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ html {
@include mat.autocomplete-theme($light-theme);
@include mat.badge-theme($light-theme);
@include mat.bottom-sheet-theme($light-theme);
@include mat.button-theme($light-theme);
@include mat.button-toggle-theme($light-theme);
@include mat.card-theme($light-theme);
@include mat.checkbox-theme($light-theme);
Expand Down Expand Up @@ -87,6 +88,7 @@ html {
@include mat.autocomplete-color($dark-theme);
@include mat.badge-color($dark-theme);
@include mat.bottom-sheet-color($dark-theme);
@include mat.button-color($dark-theme);
@include mat.button-toggle-color($dark-theme);
@include mat.card-color($dark-theme);
@include mat.checkbox-color($dark-theme);
Expand Down Expand Up @@ -132,6 +134,7 @@ html {
@include mat.autocomplete-density($scale-theme);
@include mat.badge-density($scale-theme);
@include mat.bottom-sheet-density($scale-theme);
@include mat.button-density($scale-theme);
@include mat.button-toggle-density($scale-theme);
@include mat.card-density($scale-theme);
@include mat.checkbox-density($scale-theme);
Expand Down
73 changes: 73 additions & 0 deletions src/material-experimental/theming/_custom-tokens.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,13 +339,86 @@
);
}

/// Generates custom tokens for the mat-button.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
/// @return {Map} A set of custom tokens for the mat-button
@function text-button($systems, $exclude-hardcoded) {
@return (
state-layer-color: map.get($systems, md-sys-color, primary),
disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
ripple-color: mat.private-safe-color-change(
map.get($systems, md-sys-color, primary),
$alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
),
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),
);
}

/// Generates custom tokens for the mat-flat-button.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
/// @return {Map} A set of custom tokens for the mat-flat-button
@function filled-button($systems, $exclude-hardcoded) {
@return (
state-layer-color: map.get($systems, md-sys-color, on-primary),
disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
ripple-color: mat.private-safe-color-change(
map.get($systems, md-sys-color, on-primary),
$alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
),
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),
);
}

/// Generates custom tokens for the mat-raised-button.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
/// @return {Map} A set of custom tokens for the mat-raised-button
@function elevated-button($systems, $exclude-hardcoded) {
@return (
state-layer-color: map.get($systems, md-sys-color, primary),
disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
ripple-color: mat.private-safe-color-change(
map.get($systems, md-sys-color, primary),
$alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
),
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),
);
}

/// Generates custom tokens for the mat-outlined-button.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
/// @return {Map} A set of custom tokens for the mat-outlined-button
@function outlined-button($systems, $exclude-hardcoded) {
@return (
state-layer-color: map.get($systems, md-sys-color, primary),
disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
ripple-color: mat.private-safe-color-change(
map.get($systems, md-sys-color, primary),
$alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
),
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),
);
}

/// Generates custom tokens for the mat-icon-button.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
/// @return {Map} A set of custom tokens for the mat-icon-button
@function icon-button($systems, $exclude-hardcoded) {
@return (
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: mat.private-safe-color-change(
map.get($systems, md-sys-color, on-surface-variant),
$alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
Expand Down
12 changes: 12 additions & 0 deletions src/material-experimental/theming/_m3-density.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,18 @@ $_density-tokens: (
(mdc, extended-fab): (),
(mdc, fab): (),
(mdc, filled-text-field): (),
(mdc, text-button): (
container-height: (40px, 36px, 32px, 28px),
),
(mdc, protected-button): (
container-height: (40px, 36px, 32px, 28px),
),
(mdc, filled-button): (
container-height: (40px, 36px, 32px, 28px),
),
(mdc, outlined-button): (
container-height: (40px, 36px, 32px, 28px),
),
(mdc, icon-button): (
state-layer-size: (48px, 44px, 40px, 36px, 32px, 28px),
),
Expand Down
127 changes: 127 additions & 0 deletions src/material-experimental/theming/_m3-tokens.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,71 @@
@return $tokens;
}


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

/// Fixes inconsistent values in the filled button tokens so that they can produce valid styles.
/// @param {Map} $initial-tokens Map of filled button tokens currently being generated.
/// @param {Map} $all-tokens Map of all filled button tokens, including hardcoded values.
/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
@function _fix-filled-button-tokens($initial-tokens, $all-tokens) {
@return _combine-color-tokens($initial-tokens, $all-tokens, (
(
color: 'disabled-label-text-color',
opacity: 'disabled-label-text-opacity',
),
(
color: 'disabled-container-color',
opacity: 'disabled-container-opacity',
)
));
}

/// Fixes inconsistent values in the protected button tokens so that they can produce valid styles.
/// @param {Map} $initial-tokens Map of protected button tokens currently being generated.
/// @param {Map} $all-tokens Map of all protected button tokens, including hardcoded values.
/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
@function _fix-protected-button-tokens($initial-tokens, $all-tokens) {
@return _combine-color-tokens($initial-tokens, $all-tokens, (
(
color: 'disabled-label-text-color',
opacity: 'disabled-label-text-opacity',
),
(
color: 'disabled-container-color',
opacity: 'disabled-container-opacity',
)
));
}

/// Fixes inconsistent values in the outlined button tokens so that they can produce valid styles.
/// @param {Map} $initial-tokens Map of outlined button tokens currently being generated.
/// @param {Map} $all-tokens Map of all outlined button tokens, including hardcoded values.
/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
@function _fix-outlined-button-tokens($initial-tokens, $all-tokens) {
@return _combine-color-tokens($initial-tokens, $all-tokens, (
(
color: 'disabled-label-text-color',
opacity: 'disabled-label-text-opacity',
),
(
color: 'disabled-outline-color',
opacity: 'disabled-outline-opacity',
)
));
}

/// Fixes inconsistent values in the outlined text field tokens so that they can produce valid
/// styles.
/// @param {Map} $initial-tokens Map of outlined text field tokens currently being generated.
Expand Down Expand Up @@ -386,6 +451,47 @@
mdc-tokens.md-comp-icon-button-values($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mdc, text-button),
_fix-text-button-tokens(
mdc-tokens.md-comp-text-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-text-button-values($systems, false),
),
$token-slots
),
_namespace-tokens(
// Note: in M3 the "protected" button is called "elevated".
(mdc, protected-button),
_fix-protected-button-tokens(
mdc-tokens.md-comp-elevated-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-elevated-button-values($systems, false),
),
$token-slots
),
_namespace-tokens(
(mdc, filled-button),
_fix-filled-button-tokens(
mdc-tokens.md-comp-filled-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-filled-button-values($systems, false),
),
$token-slots
),
_namespace-tokens(
(mdc, outlined-button),
_fix-outlined-button-tokens(
mdc-tokens.md-comp-outlined-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-outlined-button-values($systems, false),
),
$token-slots
),
_namespace-tokens(
(mdc, linear-progress),
mdc-tokens.md-comp-linear-progress-indicator-values($systems, $exclude-hardcoded),
Expand Down Expand Up @@ -504,6 +610,27 @@
custom-tokens.icon($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, text-button),
custom-tokens.text-button($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, filled-button),
custom-tokens.filled-button($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
// Note: in M3 the "protected" button is called "elevated".
(mat, protected-button),
custom-tokens.elevated-button($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, outlined-button),
custom-tokens.outlined-button($systems, $exclude-hardcoded),
$token-slots
),
_namespace-tokens(
(mat, icon-button),
custom-tokens.icon-button($systems, $exclude-hardcoded),
Expand Down
Loading

0 comments on commit 244bed4

Please sign in to comment.