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

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';