refactor(material/button): switch text button to tokens for color and density (#27937)

Switches the color and density styles for the text button to tokens.

Author: crisbeto

src/material/button/_button-theme.scss

@@ -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,
@@ -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((
@@ -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);
@@ -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);
@@ -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);
@@ -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 {

src/material/button/button.scss

@@ -14,35 +14,34 @@
 @use '../core/focus-indicators/private' as focus-indicators-private;
 @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;
 
 @include mdc-helpers.disable-mdc-fallback-declarations {
   @include mdc-button.static-styles-without-ripple($query: mdc-helpers.$mdc-base-styles-query);
 
-  // Keys to exclude from the MDC theme config, allowing us to drop styles we don't need.
-  $override-keys: button-base.mat-private-button-remove-ripple((
-    label-text-font: null,
-    label-text-size: null,
-    label-text-tracking: null,
-    label-text-transform: null,
-    label-text-weight: null,
-    with-icon-icon-size: null,
-    label-text-color: inherit,
-  ));
-
-  // Note that we don't include a feature query, because this mixins declare
-  // all the "slots" for CSS variables that will be defined in the theme.
-  .mat-mdc-button {
-    @include mdc-button-text-theme.theme-styles(
-      map.merge(mdc-button-text-theme.$light-theme, $override-keys));
-  }
-
   .mat-mdc-outlined-button {
+    // Keys to exclude from the MDC theme config, allowing us to drop styles we don't need.
+    $override-keys: button-base.mat-private-button-remove-ripple((
+      label-text-font: null,
+      label-text-size: null,
+      label-text-tracking: null,
+      label-text-transform: null,
+      label-text-weight: null,
+      with-icon-icon-size: null,
+      label-text-color: inherit,
+    ));
+
     @include mdc-button-outlined-theme.theme-styles(
       map.merge(mdc-button-outlined-theme.$light-theme, $override-keys));
   }
 }
 
 @include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
+  .mat-mdc-button {
+    @include mdc-button-text-theme.theme-styles(tokens-mdc-text-button.get-token-slots());
+    @include mdc-button-text-theme.theme(tokens-mdc-text-button.get-unthemable-tokens());
+  }
+
   // Note that we don't include a feature query, because this mixins declare
   // all the "slots" for CSS variables that will be defined in the theme.
   .mat-mdc-unelevated-button {

src/material/core/tokens/m2/mdc/_text-button.scss

@@ -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)
+  );
+}

src/material/core/tokens/tests/test-validate-tokens.scss

@@ -3,6 +3,7 @@
 
 @use '@material/button/button-protected-theme' as mdc-button-protected-theme;
 @use '@material/button/button-filled-theme' as mdc-button-filled-theme;
+@use '@material/button/button-text-theme' as mdc-button-text-theme;
 @use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
 @use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
 @use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
@@ -27,6 +28,7 @@
 
 @use '../m2/mdc/protected-button' as tokens-mdc-protected-button;
 @use '../m2/mdc/filled-button' as tokens-mdc-filled-button;
+@use '../m2/mdc/text-button' as tokens-mdc-text-button;
 @use '../m2/mdc/circular-progress' as tokens-mdc-circular-progress;
 @use '../m2/mdc/linear-progress' as tokens-mdc-linear-progress;
 @use '../m2/mdc/elevated-card' as tokens-mdc-elevated-card;
@@ -170,3 +172,8 @@
   $slots: tokens-mdc-protected-button.get-token-slots(),
   $reference: mdc-button-protected-theme.$light-theme
 );
+@include validate-slots(
+  $component: 'm2.mdc.text-button',
+  $slots: tokens-mdc-text-button.get-token-slots(),
+  $reference: mdc-button-text-theme.$light-theme
+);