Add custom styling for dark mode buttons to fix contrast

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