refactor(material-experimental/mdc-button): reorganize styles and expose all themes (#22449)

When I was setting up the new theming API for MDC, I assumed that the button theme would include the icon button and fab themes as well, but that's not the case.
These changes reorganize the button theming styles into separate files so that we can easily expose the missing mixins under the correct prefix.

(cherry picked from commit ba06cd8)

Author: crisbeto

src/material-experimental/_index.scss

@@ -27,6 +27,10 @@
   mdc-autocomplete-typography, mdc-autocomplete-density, mdc-autocomplete-theme;
 @forward './mdc-button/button-theme' as mdc-button-* show mdc-button-color, mdc-button-typography,
   mdc-button-density, mdc-button-theme;
+@forward './mdc-button/fab-theme' as mdc-fab-* show mdc-fab-color, mdc-fab-typography,
+  mdc-fab-density, mdc-fab-theme;
+@forward './mdc-button/icon-button-theme' as mdc-icon-button-* show mdc-icon-button-color,
+  mdc-icon-button-typography, mdc-icon-button-density, mdc-icon-button-theme;
 @forward './mdc-card/card-theme' as mdc-card-* show mdc-card-color, mdc-card-typography,
   mdc-card-density, mdc-card-theme;
 @forward './mdc-checkbox/checkbox-theme' as mdc-checkbox-* show mdc-checkbox-color,

src/material-experimental/mdc-button/_button-theme-private.scss

@@ -0,0 +1,47 @@
+@use '@material/theme/theme-color' as mdc-theme-color;
+@use '@material/theme/theme' as mdc-theme;
+@use '../../material/core/ripple/ripple-theme';
+
+// Selector for the element that has a background color and opacity applied to its ::before and
+// ::after for state interactions (hover, active, focus). Their API calls this their
+// "ripple target", but we do not use it as our ripple, just state color.
+$button-state-target: '.mdc-button__ripple';
+$fab-state-target: '.mdc-fab__ripple';
+
+// The MDC button's ripple ink color is based on the theme color, not on the foreground base
+// which is what the ripple mixin uses. This creates a new theme that sets the color to the
+// foreground base to appropriately color the ink.
+@mixin ripple-ink-color($mdc-color) {
+  @include ripple-theme.theme((
+    foreground: (
+      base: mdc-theme-color.prop-value($mdc-color)
+    ),
+  ));
+}
+
+// Applies the disabled theme color to the text color.
+@mixin apply-disabled-color() {
+  @include mdc-theme.prop(color,
+      mdc-theme-color.ink-color-for-fill_(disabled, mdc-theme-color.$background));
+}
+
+// Wraps the content style in a selector for the disabled state.
+// MDC adds theme color by using :not(:disabled), so just using [disabled] once will not
+// override this, neither will it apply to anchor tags. This needs to override the
+// previously set theme color, so it must be ordered after the theme styles.
+// TODO(andrewseguin): Discuss with the MDC team to see if we can avoid the :not(:disabled) by
+// manually styling disabled buttons with a [disabled] selector.
+@mixin apply-disabled-style() {
+  &[disabled][disabled] {
+    @content;
+  }
+}
+
+// Applies the disabled theme background color for raised buttons. Value is taken from
+// mixin `mdc-button--filled`.
+// TODO(andrewseguin): Discuss with the MDC team about providing a variable for the 0.12 value
+// or otherwise have a mixin we can call to apply this style for both button and anchors.
+@mixin apply-disabled-background() {
+  @include mdc-theme.prop(background-color, rgba(mdc-theme-color.prop-value(on-surface), 0.12));
+}
+

src/material-experimental/mdc-button/_button-theme.import.scss

@@ -1,19 +1,16 @@
 @forward '../mdc-helpers/mdc-helpers.import';
 @forward '../../material/core/ripple/ripple.import';
 @forward '../mdc-helpers/mdc-helpers';
-@forward 'button-theme' hide color, density, fab-color, fab-density, fab-theme, fab-typography,
-icon-button-color, icon-button-density, icon-button-theme, icon-button-typography, theme,
-typography;
+@forward 'button-theme' hide color, density, theme, typography;
 @forward 'button-theme' as mat-mdc-* hide $mat-mdc-mat-button-state-target, mat-mdc-color,
 mat-mdc-density, mat-mdc-mat-button-apply-disabled-style, mat-mdc-mat-button-disabled-background,
 mat-mdc-mat-button-disabled-color, mat-mdc-mat-button-ripple-ink-color, mat-mdc-theme,
 mat-mdc-typography;
 @forward 'button-theme' as mat-mdc-button-* hide $mat-mdc-button-mat-button-state-target,
-mat-mdc-button-fab-color, mat-mdc-button-fab-density, mat-mdc-button-fab-theme,
-mat-mdc-button-fab-typography, mat-mdc-button-icon-button-color, mat-mdc-button-icon-button-density,
-mat-mdc-button-icon-button-theme, mat-mdc-button-icon-button-typography,
 mat-mdc-button-mat-button-apply-disabled-style, mat-mdc-button-mat-button-disabled-background,
 mat-mdc-button-mat-button-disabled-color, mat-mdc-button-mat-button-ripple-ink-color;
+@forward 'fab-theme' as mat-mdc-fab-*;
+@forward 'icon-button-theme' as mat-mdc-icon-button-*;
 
 @import '../../material/core/ripple/ripple';
 @import '../mdc-helpers/mdc-helpers';