diff --git a/demos/common.scss b/demos/common.scss index 30fae5b42da..07ec7e24ef5 100644 --- a/demos/common.scss +++ b/demos/common.scss @@ -24,6 +24,9 @@ $mdc-theme-primary: $material-color-grey-900 !default; $mdc-theme-secondary: $material-color-light-green-a700 !default; +// Import button mixins to apply overrides for dark theme +// TODO(kfranqueiro): Pending further design discussion around how to manage dark theme +@import "../packages/mdc-button/mixins"; // All demo pages have a top toolbar, and most of them use theme variables. // Import these *after* setting theme colors to override defaults in mdc-theme. @import "../packages/mdc-theme/mdc-theme"; @@ -46,6 +49,27 @@ fieldset { } } +$dark-button-color: $material-color-light-green-a200; +.mdc-button { + @include mdc-theme-dark { + @include mdc-button-ink-color($dark-button-color); + @include mdc-button-ripple((base-color: $dark-button-color, opacity: $mdc-unfilled-button-ripple-opacity)); + } +} + +.mdc-button--raised, +.mdc-button--unelevated { + @include mdc-theme-dark(".mdc-button", true) { + @include mdc-button-filled-accessible($dark-button-color); + } +} + +.mdc-button--stroked { + @include mdc-theme-dark(".mdc-button", true) { + @include mdc-button-stroke-color($dark-button-color); + } +} + .catalog-title { font-family: "Roboto Mono", monospace; } diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss index 34edcbd0725..b63f99e9d19 100644 --- a/packages/mdc-button/mdc-button.scss +++ b/packages/mdc-button/mdc-button.scss @@ -23,23 +23,16 @@ @include mdc-button-base_; @include mdc-button-corner-radius(2px); @include mdc-button-container-fill-color(transparent); - @include mdc-button-ink-color(text-primary-on-light); - @include mdc-button-ripple((theme-style: text-primary-on-light, opacity: $mdc-unfilled-button-ripple-opacity)); - - @include mdc-theme-dark(".mdc-button") { - @include mdc-button-ink-color(text-primary-on-dark); - @include mdc-button-ripple((theme-style: text-primary-on-dark, opacity: $mdc-unfilled-button-ripple-opacity)); - } + @include mdc-button-ink-color(primary); + @include mdc-button-ripple((theme-style: primary, opacity: $mdc-unfilled-button-ripple-opacity)); } .mdc-button--raised, .mdc-button--unelevated { @include mdc-button--filled_; - @include mdc-button-filled-accessible(black); - - @include mdc-theme-dark(".mdc-button") { - @include mdc-button-filled-accessible(white); - } + @include mdc-button-container-fill-color(primary); + @include mdc-button-ink-color(text-primary-on-primary); + @include mdc-button-ripple((theme-style: text-primary-on-primary, opacity: $mdc-filled-button-ripple-opacity)); } .mdc-button--raised { @@ -49,11 +42,7 @@ .mdc-button--stroked { @include mdc-button--stroked_; @include mdc-button-stroke-width(2px); - @include mdc-button-stroke-color(text-primary-on-light); - - @include mdc-theme-dark(".mdc-button") { - @include mdc-button-stroke-color(text-primary-on-dark); - } + @include mdc-button-stroke-color(primary); } .mdc-button--compact {