fix(button): raised buttons in dark theme (#3070)

* Fixes the wrong background and foreground color for raised buttons in a dark theme.
angular · Feb 13, 2017 · 87ab712 · 87ab712
1 parent 6fe1d9a
commit 87ab712
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/lib/button/_button-theme.scss b/src/lib/button/_button-theme.scss
@@ -71,9 +71,12 @@
   }
 
   .mat-raised-button, .mat-fab, .mat-mini-fab {
+    // Default properties when not using any [color] value.
+    color: mat-color($foreground, text);
+    background-color: mat-color($background, raised-button);
+
     @include _mat-button-theme-color($theme, 'color', default-contrast);
     @include _mat-button-theme-color($theme, 'background-color');
-    background-color: mat-color($background, background);
   }
 
   .mat-fab, .mat-mini-fab {

diff --git a/src/lib/core/theming/_palette.scss b/src/lib/core/theming/_palette.scss
@@ -649,7 +649,8 @@ $mat-light-theme-background: (
   hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
   card:       white,
   dialog:     white,
-  disabled-button:   rgba(black, 0.12)
+  disabled-button: rgba(black, 0.12),
+  raised-button: white,
 );
 
 // Background palette for dark themes.
@@ -660,7 +661,8 @@ $mat-dark-theme-background: (
   hover:      rgba(white, 0.04), // TODO(kara): check style with Material Design UX
   card:       map_get($mat-grey, 800),
   dialog:     map_get($mat-grey, 800),
-  disabled-button: rgba(white, 0.12)
+  disabled-button: rgba(white, 0.12),
+  raised-button: map-get($mat-grey, 800),
 );
 
 // Foreground palette for light themes.