From 282b5fc56c3a57c1c3f40b4071da54341c3c8ff1 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Fri, 5 Jan 2024 07:08:09 +0100
Subject: [PATCH] refactor(material/button): emit button tokens at the root

Reworks the button theme to emit the non-palette tokens at the root.
---
 src/material/button/_button-theme.scss      | 54 +++++++++------------
 src/material/button/_icon-button-theme.scss | 20 ++++----
 2 files changed, 35 insertions(+), 39 deletions(-)

diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss
index 7943e00fe3e6..be0e0cc49c12 100644
--- a/src/material/button/_button-theme.scss
+++ b/src/material/button/_button-theme.scss
@@ -85,9 +85,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);
     }
@@ -102,8 +107,6 @@
   }
 
   .mat-mdc-unelevated-button {
-    @include _filled-button-variant($theme, null);
-
     &.mat-primary {
       @include _filled-button-variant($theme, primary);
     }
@@ -118,8 +121,6 @@
   }
 
   .mat-mdc-raised-button {
-    @include _protected-button-variant($theme, null);
-
     &.mat-primary {
       @include _protected-button-variant($theme, primary);
     }
@@ -147,8 +148,6 @@
   }
 
   .mat-mdc-outlined-button {
-    @include _outlined-button-variant($theme, null);
-
     &.mat-primary {
       @include _outlined-button-variant($theme, primary);
     }
@@ -164,12 +163,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);
@@ -179,28 +178,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);
   }
 }
diff --git a/src/material/button/_icon-button-theme.scss b/src/material/button/_icon-button-theme.scss
index 67833f41b768..93139949c3d6 100644
--- a/src/material/button/_icon-button-theme.scss
+++ b/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);
+        }
       }
     }
   }