refactor(material/button): emit button tokens at the root

Reworks the button theme to emit the non-palette tokens at the root.

Author: crisbeto

src/material/button/_button-theme.scss

@@ -99,9 +99,14 @@
 }
 
 @mixin color($theme) {
-  .mat-mdc-button {
+  @include sass-utils.current-selector-or-root() {
     @include _text-button-variant($theme, null);
+    @include _filled-button-variant($theme, null);
+    @include _protected-button-variant($theme, null);
+    @include _outlined-button-variant($theme, null);
+  }
 
+  .mat-mdc-button {
     &.mat-primary {
       @include _text-button-variant($theme, primary);
     }
@@ -116,8 +121,6 @@
   }
 
   .mat-mdc-unelevated-button {
-    @include _filled-button-variant($theme, null);
-
     &.mat-primary {
       @include _filled-button-variant($theme, primary);
     }
@@ -132,8 +135,6 @@
   }
 
   .mat-mdc-raised-button {
-    @include _protected-button-variant($theme, null);
-
     &.mat-primary {
       @include _protected-button-variant($theme, primary);
     }
@@ -161,8 +162,6 @@
   }
 
   .mat-mdc-outlined-button {
-    @include _outlined-button-variant($theme, null);
-
     &.mat-primary {
       @include _outlined-button-variant($theme, primary);
     }
@@ -178,12 +177,12 @@
 }
 
 @mixin typography($theme) {
-  @include sass-utils.current-selector-or-root() {
-    $text-typography-tokens: tokens-mdc-text-button.get-typography-tokens($theme);
-    $filled-typography-tokens: tokens-mdc-filled-button.get-typography-tokens($theme);
-    $outlined-typography-tokens: tokens-mdc-outlined-button.get-typography-tokens($theme);
-    $protected-typography-tokens: tokens-mdc-protected-button.get-typography-tokens($theme);
+  $text-typography-tokens: tokens-mdc-text-button.get-typography-tokens($theme);
+  $filled-typography-tokens: tokens-mdc-filled-button.get-typography-tokens($theme);
+  $outlined-typography-tokens: tokens-mdc-outlined-button.get-typography-tokens($theme);
+  $protected-typography-tokens: tokens-mdc-protected-button.get-typography-tokens($theme);
 
+  @include sass-utils.current-selector-or-root() {
     @include mdc-button-text-theme.theme($text-typography-tokens);
     @include mdc-button-filled-theme.theme($filled-typography-tokens);
     @include mdc-button-outlined-theme.theme($outlined-typography-tokens);
@@ -193,28 +192,23 @@
 
 @mixin density($theme) {
   $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);
+  $text-density-tokens: tokens-mdc-text-button.get-density-tokens($theme);
+  $filled-density-tokens: tokens-mdc-filled-button.get-density-tokens($theme);
+  $outlined-density-tokens: tokens-mdc-outlined-button.get-density-tokens($theme);
+  $protected-density-tokens: tokens-mdc-protected-button.get-density-tokens($theme);
 
-  .mat-mdc-button {
-    $density-tokens: tokens-mdc-text-button.get-density-tokens($theme);
-    @include mdc-button-text-theme.theme($density-tokens);
-    @include button-base.mat-private-button-touch-target-density($density-scale);
-  }
-
-  .mat-mdc-raised-button {
-    $density-tokens: tokens-mdc-protected-button.get-density-tokens($theme);
-    @include mdc-button-protected-theme.theme($density-tokens);
-    @include button-base.mat-private-button-touch-target-density($density-scale);
-  }
-
-  .mat-mdc-unelevated-button {
-    $density-tokens: tokens-mdc-filled-button.get-density-tokens($theme);
-    @include mdc-button-filled-theme.theme($density-tokens);
-    @include button-base.mat-private-button-touch-target-density($density-scale);
+  @include sass-utils.current-selector-or-root() {
+    @include mdc-button-text-theme.theme($text-density-tokens);
+    @include mdc-button-filled-theme.theme($filled-density-tokens);
+    @include mdc-button-outlined-theme.theme($outlined-density-tokens);
+    @include mdc-button-protected-theme.theme($protected-density-tokens);
   }
 
+  .mat-mdc-button,
+  .mat-mdc-raised-button,
+  .mat-mdc-unelevated-button,
   .mat-mdc-outlined-button {
-    $density-tokens: tokens-mdc-outlined-button.get-density-tokens($theme);
-    @include mdc-button-outlined-theme.theme($density-tokens);
+    // TODO: tokenize the touch target visibility.
     @include button-base.mat-private-button-touch-target-density($density-scale);
   }
 }

src/material/button/_icon-button-theme.scss

@@ -43,19 +43,21 @@
     @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
   @else {
-    .mat-mdc-icon-button {
+    @include sass-utils.current-selector-or-root() {
       @include _icon-button-variant($theme, null);
 
-      &.mat-primary {
-        @include _icon-button-variant($theme, primary);
-      }
+      .mat-mdc-icon-button {
+        &.mat-primary {
+          @include _icon-button-variant($theme, primary);
+        }
 
-      &.mat-accent {
-        @include _icon-button-variant($theme, accent);
-      }
+        &.mat-accent {
+          @include _icon-button-variant($theme, accent);
+        }
 
-      &.mat-warn {
-        @include _icon-button-variant($theme, warn);
+        &.mat-warn {
+          @include _icon-button-variant($theme, warn);
+        }
       }
     }
   }

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

@@ -17,10 +17,6 @@ $prefix: (mdc, text-button);
   @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,
-
     // =============================================================================================
     // = TOKENS NOT USED IN ANGULAR MATERIAL                                                       =
     // =============================================================================================

src/material/toolbar/toolbar.scss

@@ -1,6 +1,8 @@
 @use '@angular/cdk';
 @use '../core/tokens/token-utils';
 @use '../core/tokens/m2/mat/toolbar' as tokens-mat-toolbar;
+@use '../core/tokens/m2/mdc/text-button' as tokens-mdc-text-button;
+@use '../core/tokens/m2/mdc/outlined-button' as tokens-mdc-outlined-button;
 @use '../core/style/variables';
 
 $row-padding: 16px !default;
@@ -49,8 +51,24 @@ $height-mobile-portrait: 56px !default;
   }
 
   .mat-mdc-button-base.mat-mdc-button-base.mat-unthemed {
-    --mdc-text-button-label-text-color: inherit;
-    --mdc-outlined-button-label-text-color: inherit;
+    $color-token: null;
+
+    @include token-utils.use-tokens(
+      tokens-mat-toolbar.$prefix, tokens-mat-toolbar.get-token-slots()) {
+      $color-token: var(#{token-utils.get-token-variable(container-text-color)});
+    }
+
+    @include token-utils.use-tokens(
+      tokens-mdc-text-button.$prefix, tokens-mdc-text-button.get-token-slots()) {
+      $token: token-utils.get-token-variable(label-text-color);
+      #{$token}: #{$color-token};
+    }
+
+    @include token-utils.use-tokens(
+      tokens-mdc-outlined-button.$prefix, tokens-mdc-outlined-button.get-token-slots()) {
+      $token: token-utils.get-token-variable(label-text-color);
+      #{$token}: #{$color-token};
+    }
   }
 }