diff --git a/src/material/_index.scss b/src/material/_index.scss index 7b7680990015..886aa472fb1f 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -88,7 +88,7 @@ @forward './button/button-theme' as button-* show button-theme, button-color, button-typography, button-density; @forward './button/fab-theme' as fab-* show fab-color, fab-typography, - fab-density, fab-theme; + fab-density, fab-theme, fab-base; @forward './button/icon-button-theme' as icon-button-* show icon-button-color, icon-button-typography, icon-button-density, icon-button-theme; @forward './button-toggle/button-toggle-theme' as button-toggle-* show button-toggle-theme, diff --git a/src/material/button/_fab-theme.scss b/src/material/button/_fab-theme.scss index 9b359f0f7f36..2865653cf25a 100644 --- a/src/material/button/_fab-theme.scss +++ b/src/material/button/_fab-theme.scss @@ -5,11 +5,22 @@ @use './button-theme-private'; @use '../core/mdc-helpers/mdc-helpers'; +@use '../core/style/sass-utils'; @use '../core/theming/theming'; @use '../core/tokens/m2/mdc/fab' as tokens-mdc-fab; @use '../core/tokens/m2/mdc/extended-fab' as tokens-mdc-extended-fab; @use '../core/typography/typography'; +@mixin base($config-or-theme) { + // Add default values for tokens not related to color, typography, or density. + @include sass-utils.current-selector-or-root() { + @include mdc-fab-theme.theme(tokens-mdc-fab.get-unthemable-tokens()); + @include mdc-extended-fab-theme.theme( + tokens-mdc-extended-fab.get-unthemable-tokens() + ); + } +} + @mixin _fab-variant($config, $foreground, $background) { $color-config: map.merge( $config, @@ -105,6 +116,7 @@ $density: theming.get-density-config($theme); $typography: theming.get-typography-config($theme); + @include base($theme); @if $color != null { @include color($color); } diff --git a/src/material/button/fab.scss b/src/material/button/fab.scss index 2e279323991f..581cb7bcb32e 100644 --- a/src/material/button/fab.scss +++ b/src/material/button/fab.scss @@ -22,17 +22,11 @@ .mat-mdc-fab, .mat-mdc-mini-fab { // Add the official slots for the MDC fab. @include mdc-fab-theme.theme-styles($mdc-fab-token-slots); - - // Add default values for tokens that aren't outputted by the theming API. - @include mdc-fab-theme.theme(m2-mdc-fab.get-unthemable-tokens()); } .mat-mdc-extended-fab { // Add the official slots for the MDC fab. @include mdc-extended-fab-theme.theme-styles($mdc-extended-fab-token-slots); - - // Add default values for tokens that aren't outputted by the theming API. - @include mdc-extended-fab-theme.theme(m2-mdc-extended-fab.get-unthemable-tokens()); } }