From 6e1922e9077acfaca3b01e02083979c86961fe64 Mon Sep 17 00:00:00 2001
From: Amy Sorto <8575252+amysorto@users.noreply.github.com>
Date: Tue, 19 Sep 2023 13:45:59 +0000
Subject: [PATCH] fix(material/button): Emit fab tokens under mixin root
 selector

---
 src/material/button/_fab-theme.scss | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/material/button/_fab-theme.scss b/src/material/button/_fab-theme.scss
index f96189d2cee3..8583d1822f37 100644
--- a/src/material/button/_fab-theme.scss
+++ b/src/material/button/_fab-theme.scss
@@ -51,32 +51,36 @@
   $disabled: rgba($on-surface, 0.12);
   $on-disabled: rgba($on-surface, if($is-dark, 0.5, 0.38));
 
-  .mat-mdc-fab,
-  .mat-mdc-mini-fab {
+  @include sass-utils.current-selector-or-root() {
     // TODO(wagnermaciel): The ripple-theme-styles mixin depends heavily on
     // being wrapped by using-mdc-theme. This workaround needs to be
     // revisited w/ a more holistic solution.
-    @include mdc-helpers.using-mdc-theme($theme) {
-      @include button-theme-private.ripple-theme-styles($theme, true);
+    .mat-mdc-fab,
+    .mat-mdc-mini-fab {
+      @include mdc-helpers.using-mdc-theme($theme) {
+        @include button-theme-private.ripple-theme-styles($theme, true);
+      }
     }
 
-    @include button-theme-private.apply-disabled-style() {
-      @include _fab-variant($on-disabled, $disabled);
+    :disabled, a[disabled='true'] {
+      @include button-theme-private.apply-disabled-style() {
+        @include _fab-variant($on-disabled, $disabled);
+      }
     }
 
-    &.mat-unthemed {
+    .mat-unthemed {
       @include _fab-variant($on-surface, $surface);
     }
 
-    &.mat-primary {
+    .mat-primary {
       @include _fab-variant($on-primary, $primary);
     }
 
-    &.mat-accent {
+    .mat-accent {
       @include _fab-variant($on-accent, $accent);
     }
 
-    &.mat-warn {
+    .mat-warn {
       @include _fab-variant($on-warn, $warn);
     }
   }
@@ -88,7 +92,7 @@
   }
 
   $typography-tokens: tokens-mdc-extended-fab.get-typography-tokens($theme);
-  .mat-mdc-extended-fab {
+  @include sass-utils.current-selector-or-root() {
     @include mdc-extended-fab-theme.theme($typography-tokens);
   }
 }