Skip to content

Commit

Permalink
main - 592307261 refactor(material/button): switch text button to tok…
Browse files Browse the repository at this point in the history 
…ens for color and density (#27937)
  • Loading branch information
@crisbeto
crisbeto committed Oct 16, 2023
1 parent a314536 commit e19c8f1
Show file tree
Hide file tree
Showing 9 changed files with 163 additions and 52 deletions.
86 changes: 47 additions & 39 deletions button/_button-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,18 +14,13 @@
@use '../core/typography/typography';
@use '../core/tokens/m2/mdc/filled-button' as tokens-mdc-filled-button;
@use '../core/tokens/m2/mdc/protected-button' as tokens-mdc-protected-button;
@use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button;

@function _on-color($theme, $palette) {
$is-dark: inspection.get-theme-type($theme) == dark;
@return if(mdc-helpers.variable-safe-contrast-tone($palette, $is-dark) == 'dark', #000, #fff);
}

@mixin _button-variant($color) {
@include mdc-button-text-theme.theme((
label-text-color: $color,
));
}

@mixin _outlined-button-variant($color) {
@include mdc-button-outlined-theme.theme((
label-text-color: $color,
Expand All @@ -40,42 +35,10 @@
@include mdc-helpers.using-mdc-theme($theme) {
$is-dark: inspection.get-theme-type($theme) == dark;
$on-surface: mdc-theme-color.prop-value(on-surface);
$surface: mdc-theme-color.prop-value(surface);
$disabled-ink-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
$disabled-container-color: rgba($on-surface, 0.12);
$primary: mdc-theme-color.prop-value(primary);
$on-primary: mdc-theme-color.prop-value(on-primary);
$secondary: mdc-theme-color.prop-value(secondary);
$on-secondary: mdc-theme-color.prop-value(on-secondary);
$error: mdc-theme-color.prop-value(error);
$on-error: mdc-theme-color.prop-value(on-error);

.mat-mdc-button {
&.mat-unthemed {
@include _button-variant($on-surface);
}

&.mat-primary {
@include _button-variant($primary);
}

&.mat-accent {
@include _button-variant($secondary);
}

&.mat-warn {
@include _button-variant($error);
}

@include button-theme-private.apply-disabled-style() {
@include mdc-button-text-theme.theme((
// We need to pass both the disabled and enabled values, because the enabled
// ones apply to anchors while the disabled ones are for buttons.
disabled-label-text-color: $disabled-ink-color,
label-text-color: $disabled-ink-color
));
}
}

.mat-mdc-outlined-button {
@include mdc-button-outlined-theme.theme((
Expand Down Expand Up @@ -130,6 +93,25 @@
$on-accent: _on-color($theme, $accent);
$on-error: _on-color($theme, $error);

.mat-mdc-button {
@include mdc-button-text-theme.theme(tokens-mdc-text-button.get-color-tokens($theme));

&.mat-primary {
@include mdc-button-text-theme.theme(
tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, primary));
}

&.mat-accent {
@include mdc-button-text-theme.theme(
tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, accent));
}

&.mat-warn {
@include mdc-button-text-theme.theme(
tokens-mdc-text-button.private-get-color-palette-color-tokens($theme, warn));
}
}

.mat-mdc-unelevated-button {
$default-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $surface, $on-surface);
$primary-color-tokens: tokens-mdc-filled-button.get-color-tokens($theme, $primary, $on-primary);
Expand Down Expand Up @@ -201,6 +183,17 @@
$disabled-ink-color: rgba($on-surface, if($is-dark, 0.5, 0.38));
$disabled-container-color: rgba($on-surface, 0.12);

// TODO: these disabled styles are a bit too specific currently.
// Once the buttons are fully tokenized, we should rework how they're applied.
.mat-mdc-button {
@include button-theme-private.apply-disabled-style() {
@include mdc-button-text-theme.theme((
disabled-label-text-color: $disabled-ink-color,
label-text-color: $disabled-ink-color,
));
}
}

.mat-mdc-raised-button {
@include button-theme-private.apply-disabled-style() {
@include mdc-elevation-theme.elevation(0);
Expand Down Expand Up @@ -234,6 +227,22 @@
@mixin density($theme) {
$density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);

.mat-mdc-button {
$density-tokens: tokens-mdc-text-button.get-density-tokens($theme);
@include mdc-button-text-theme.theme($density-tokens);
@include button-theme-private.touch-target-density($density-scale);

// TODO(crisbeto): before the introduction of tokens, MDC's density mixin was adding
// `margin-top: 0` and `margin-bottom: 0` in its `density` mixin which a lot of internal
// clients came to depend upon. Preserve it to make tokens easier to land.
@if ($density-scale < 0) {
&.mat-mdc-button-base {
margin-top: 0;
margin-bottom: 0;
}
}
}

.mat-mdc-raised-button {
$density-tokens: tokens-mdc-protected-button.get-density-tokens($theme);
@include mdc-button-protected-theme.theme($density-tokens);
Expand All @@ -246,7 +255,6 @@
@include button-theme-private.touch-target-density($density-scale);
}

.mat-mdc-button,
.mat-mdc-outlined-button {
// Use `mat-mdc-button-base` to increase the specificity over the button's structural styles.
&.mat-mdc-button-base {
Expand Down
103 changes: 103 additions & 0 deletions core/tokens/m2/mdc/_text-button.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
@use 'sass:map';
@use '../../token-utils';
@use '../../../style/sass-utils';
@use '../../../theming/inspection';
@use '../../../theming/theming';

// The prefix used to generate the fully qualified name for tokens in this file.
$prefix: (mdc, text-button);

// Tokens that can't be configured through Angular Material's current theming API,
// but may be in a future version of the theming API.
//
// Tokens that are available in MDC, but not used in Angular Material should be mapped to `null`.
// `null` indicates that we are intentionally choosing not to emit a slot or value for the token in
// our CSS.
@function get-unthemable-tokens() {
@return (
container-shape: 4px,

// TODO: `container-height` is also included so it has a default value to
// prevent the buttons from collapsing if a density mixin isn't included.
container-height: 36px,

// TODO: handle these through the typography styles eventually.
label-text-font: null,
label-text-size: null,
label-text-tracking: null,
label-text-transform: null,
label-text-weight: null,

// =============================================================================================
// = TOKENS NOT USED IN ANGULAR MATERIAL =
// =============================================================================================
hover-label-text-color: null,
focus-label-text-color: null,
pressed-label-text-color: null,
focus-state-layer-color: null,
focus-state-layer-opacity: null,
hover-state-layer-color: null,
hover-state-layer-opacity: null,
pressed-state-layer-color: null,
pressed-state-layer-opacity: null,
with-icon-disabled-icon-color: null,
with-icon-focus-icon-color: null,
with-icon-hover-icon-color: null,
with-icon-icon-color: null,
with-icon-icon-size: null,
with-icon-pressed-icon-color: null,
focus-ring-color: null,
focus-ring-offset: null,
keep-touch-target: false,
);
}

// Tokens that can be configured through Angular Material's color theming API.
@function get-color-tokens($theme) {
$is-dark: inspection.get-theme-type($theme) == dark;
$on-surface: if($is-dark, #fff, #000);

@return (
label-text-color: $on-surface,
disabled-label-text-color: rgba($on-surface, if($is-dark, 0.5, 0.38)),
);
}

// Generates the mapping for the properties that change based on the button palette color.
@function private-get-color-palette-color-tokens($theme, $palette-name) {
$palette: map.get($theme, $palette-name);

@return (
label-text-color: inspection.get-theme-color($theme, $palette-name)
);
}

// Tokens that can be configured through Angular Material's typography theming API.
@function get-typography-tokens($theme) {
@return ();
}

// Tokens that can be configured through Angular Material's density theming API.
@function get-density-tokens($theme) {
$scale: theming.clamp-density(inspection.get-theme-density($theme), -3);

@return (
container-height: map.get((
0: 36px,
-1: 32px,
-2: 28px,
-3: 24px,
), $scale),
);
}

// Combines the tokens generated by the above functions into a single map with placeholder values.
// This is used to create token slots.
@function get-token-slots() {
@return sass-utils.deep-merge-all(
get-unthemable-tokens(),
get-color-tokens(token-utils.$placeholder-color-config),
get-typography-tokens(token-utils.$placeholder-typography-config),
get-density-tokens(token-utils.$placeholder-density-config)
);
}
Loading

0 comments on commit e19c8f1

Please sign in to comment.