diff --git a/src/dev-app/button/button-demo.html b/src/dev-app/button/button-demo.html
index e88d06475acf..d1561624fe5a 100644
--- a/src/dev-app/button/button-demo.html
+++ b/src/dev-app/button/button-demo.html
@@ -11,9 +11,9 @@
- SEARCH
+ SEARCH
SEARCH
- SEARCH
+ SEARCH
SEARCH
check
check
@@ -21,6 +21,7 @@
+
@@ -29,6 +30,7 @@
+
@@ -37,6 +39,7 @@
+
@@ -45,6 +48,7 @@
+
@@ -53,6 +57,7 @@
+
@@ -61,6 +66,7 @@
+
@@ -69,6 +75,7 @@
+
diff --git a/src/dev-app/mdc-button/mdc-button-demo.html b/src/dev-app/mdc-button/mdc-button-demo.html
index 22c91117b0f8..e34b52836b8b 100644
--- a/src/dev-app/mdc-button/mdc-button-demo.html
+++ b/src/dev-app/mdc-button/mdc-button-demo.html
@@ -27,9 +27,9 @@
- SEARCH
+ SEARCH
SEARCH
- SEARCH
+ SEARCH
SEARCH
check
@@ -53,6 +53,7 @@
+
@@ -61,6 +62,7 @@
+
@@ -69,6 +71,7 @@
+
@@ -77,6 +80,7 @@
+
@@ -85,6 +89,9 @@
+
@@ -101,6 +108,9 @@
+
@@ -117,6 +127,9 @@
+
diff --git a/src/material-experimental/mdc-button/README.md b/src/material-experimental/mdc-button/README.md
index d6db819ba1a5..f248eb3acb99 100644
--- a/src/material-experimental/mdc-button/README.md
+++ b/src/material-experimental/mdc-button/README.md
@@ -1,11 +1,5 @@
-### Open Issues
-
-- Anchor button does not support disabled - see MDC issue #1339
-
### TODO
-- Determine coloring for non-primary buttons (MDC does not support this)
- Write README - looks like lot of overlap with checkbox README. Create common readme for setup
-- Move tests over (both unit and e2e)
- JSDoc comments on all classes, consts
- Consider supporting button[mat-outlined-button]
- Add to universal app
diff --git a/src/material-experimental/mdc-button/_mdc-button.scss b/src/material-experimental/mdc-button/_mdc-button.scss
index 783c613f962f..074634a55189 100644
--- a/src/material-experimental/mdc-button/_mdc-button.scss
+++ b/src/material-experimental/mdc-button/_mdc-button.scss
@@ -41,20 +41,40 @@
}
.mat-mdc-button, .mat-mdc-outlined-button {
- @include mdc-states-base-color(primary, $query: $mat-theme-styles-query);
+ &.mat-unthemed {
+ @include mdc-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+ }
+
+ &.mat-primary {
+ @include mdc-button-ink-color(primary, $query: $mat-theme-styles-query);
+ @include mdc-states-base-color(primary, $query: $mat-theme-styles-query);
+ }
&.mat-accent {
@include mdc-button-ink-color(secondary, $query: $mat-theme-styles-query);
+ @include mdc-states-base-color(secondary, $query: $mat-theme-styles-query);
}
&.mat-warn {
@include mdc-button-ink-color(error, $query: $mat-theme-styles-query);
+ @include mdc-states-base-color(error, $query: $mat-theme-styles-query);
}
}
.mat-mdc-raised-button,
.mat-mdc-unelevated-button {
- @include mdc-states-base-color(on-primary, $query: $mat-theme-styles-query);
+ &.mat-unthemed {
+ @include mdc-button-container-fill-color(
+ $mdc-theme-surface, $query: $mat-theme-styles-query);
+ @include mdc-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+ @include mdc-states-base-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+ }
+
+ &.mat-primary {
+ @include mdc-button-container-fill-color(primary, $query: $mat-theme-styles-query);
+ @include mdc-button-ink-color(on-primary, $query: $mat-theme-styles-query);
+ @include mdc-states-base-color(on-primary, $query: $mat-theme-styles-query);
+ }
&.mat-accent {
@include mdc-button-container-fill-color(secondary, $query: $mat-theme-styles-query);
@@ -74,6 +94,14 @@
}
.mat-mdc-outlined-button {
+ &.mat-unthemed {
+ @include mdc-button-outline-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+ }
+
+ &.mat-primary {
+ @include mdc-button-outline-color(primary, $query: $mat-theme-styles-query);
+ }
+
&.mat-accent {
@include mdc-button-outline-color(secondary, $query: $mat-theme-styles-query);
}
@@ -113,15 +141,26 @@
@mixin mat-fab-theme-mdc($theme) {
@include mat-using-mdc-theme($theme) {
.mat-mdc-fab, .mat-mdc-mini-fab {
- @include mdc-states-base-color(secondary, $query: $mat-theme-styles-query);
@include mdc-states($query: $mat-theme-styles-query);
+ &.mat-unthemed {
+ @include mdc-states-base-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+ @include mdc-fab-container-color($mdc-theme-surface, $query: $mat-theme-styles-query);
+ @include mdc-fab-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+ }
+
&.mat-primary {
@include mdc-states-base-color(on-primary, $query: $mat-theme-styles-query);
@include mdc-fab-container-color(primary, $query: $mat-theme-styles-query);
@include mdc-fab-ink-color(on-primary, $query: $mat-theme-styles-query);
}
+ &.mat-accent {
+ @include mdc-states-base-color(on-secondary, $query: $mat-theme-styles-query);
+ @include mdc-fab-container-color(secondary, $query: $mat-theme-styles-query);
+ @include mdc-fab-ink-color(on-secondary, $query: $mat-theme-styles-query);
+ }
+
&.mat-warn {
@include mdc-states-base-color(on-error, $query: $mat-theme-styles-query);
@include mdc-fab-container-color(error, $query: $mat-theme-styles-query);
@@ -149,8 +188,16 @@
@include mat-using-mdc-theme($theme) {
.mat-mdc-icon-button {
@include mdc-states($query: $mat-theme-styles-query);
- @include mdc-states-base-color(primary, $query: $mat-theme-styles-query);
- @include mdc-icon-button-ink-color(primary, $query: $mat-theme-styles-query);
+
+ &.mat-unthemed {
+ @include mdc-states-base-color($mdc-theme-surface, $query: $mat-theme-styles-query);
+ @include mdc-icon-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query);
+ }
+
+ &.mat-primary {
+ @include mdc-states-base-color(primary, $query: $mat-theme-styles-query);
+ @include mdc-icon-button-ink-color(primary, $query: $mat-theme-styles-query);
+ }
&.mat-accent {
@include mdc-states-base-color(secondary, $query: $mat-theme-styles-query);
diff --git a/src/material-experimental/mdc-button/button-base.ts b/src/material-experimental/mdc-button/button-base.ts
index cc87d9fe7aa0..ca66261f3544 100644
--- a/src/material-experimental/mdc-button/button-base.ts
+++ b/src/material-experimental/mdc-button/button-base.ts
@@ -30,6 +30,10 @@ export const MAT_BUTTON_INPUTS = ['disabled', 'disableRipple', 'color'];
export const MAT_BUTTON_HOST = {
'[attr.disabled]': 'disabled || null',
'[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
+ // MDC automatically applies the primary theme color to the button, but we want to support
+ // an unthemed version. If color is undefined, apply a CSS class that makes it easy to
+ // select and style this "theme".
+ '[class.mat-unthemed]': '!color',
};
/** List of classes to add to buttons instances based on host attribute selector. */
@@ -131,6 +135,10 @@ export const MAT_ANCHOR_HOST = {
'[attr.tabindex]': 'disabled ? -1 : (tabIndex || 0)',
'[attr.aria-disabled]': 'disabled.toString()',
'(click)': '_haltDisabledEvents($event)',
+ // MDC automatically applies the primary theme color to the button, but we want to support
+ // an unthemed version. If color is undefined, apply a CSS class that makes it easy to
+ // select and style this "theme".
+ '[class.mat-unthemed]': '!color',
};
/**