style(theme): all components looks good on dark theme

Components didn't looked like the spec on dark theme, Made all dialogs/menus stay white on dark theme. Changed card color to be as spec. Changed background color to be `50` (on light theme) as spec defines. fixes #5744. Closes #5868.
angular · Mar 3, 2016 · e3b0cd8 · e3b0cd8
1 parent 7efb351
commit e3b0cd8
Show file tree

Hide file tree

Showing 15 changed files with 84 additions and 59 deletions.
diff --git a/src/components/autocomplete/autocomplete-theme.scss b/src/components/autocomplete/autocomplete-theme.scss
@@ -1,5 +1,5 @@
 md-autocomplete.md-THEME_NAME-theme {
-  background: '{{background-50}}';
+  background: '{{background-A100}}';
   &[disabled] {
     background: '{{background-100}}';
   }
@@ -15,7 +15,7 @@ md-autocomplete.md-THEME_NAME-theme {
   }
 }
 .md-autocomplete-suggestions-container.md-THEME_NAME-theme {
-  background: '{{background-50}}';
+  background: '{{background-A100}}';
   li {
     color: '{{background-900}}';
     .highlight {

diff --git a/src/components/button/button-theme.scss b/src/components/button/button-theme.scss
@@ -141,7 +141,7 @@ a.md-button.md-THEME_NAME-theme,
   &.md-fab[disabled],
   &.md-accent[disabled],
   &.md-warn[disabled] {
-    color: '{{foreground-3}}' !important;
+    color: '{{foreground-3}}';
     cursor: default;
 
     md-icon {

diff --git a/src/components/card/card-theme.scss b/src/components/card/card-theme.scss
@@ -1,7 +1,7 @@
 $card-border-radius: 2px !default;
 
 md-card.md-THEME_NAME-theme {
-  background-color: '{{background-color}}';
+  background-color: '{{background-hue-1}}';
   border-radius: $card-border-radius;
 
   .md-card-image {

diff --git a/src/components/datepicker/calendar-theme.scss b/src/components/datepicker/calendar-theme.scss
@@ -1,17 +1,17 @@
 /** Theme styles for mdCalendar. */
 
 .md-calendar.md-THEME_NAME-theme {
-  color: '{{foreground-1}}';
+  background: '{{background-A100}}';
+  color: '{{background-1000-0.87}}';
 
   tr:last-child td {
     border-bottom-color: '{{background-200}}';
   }
 }
 .md-THEME_NAME-theme {
-
   .md-calendar-day-header {
-    background: '{{background-hue-1}}';
-    color: '{{foreground-1}}';
+    background: '{{background-300}}';
+    color: '{{background-1000-0.87}}';
   }
 
   .md-calendar-date.md-calendar-date-today {
@@ -34,7 +34,7 @@
   }
 
   .md-calendar-date-selection-indicator:hover {
-    background: '{{background-hue-1}}';
+    background: '{{background-300}}';
   }
 
   // Selected style goes after hover and focus so that it takes priority.

diff --git a/src/components/datepicker/datePicker-theme.scss b/src/components/datepicker/datePicker-theme.scss
@@ -8,7 +8,7 @@ md-datepicker.md-THEME_NAME-theme {
 
   .md-datepicker-input {
     @include input-placeholder-color('{{foreground-3}}');
-    color: '{{background-contrast}}';
+    color: '{{foreground-1}}';
     background: '{{background-color}}';
   }
 
@@ -25,7 +25,7 @@ md-datepicker.md-THEME_NAME-theme {
   }
 
   .md-datepicker-calendar-pane {
-    border-color: '{{background-300}}';
+    border-color: '{{background-hue-1}}';
   }
 
   .md-datepicker-triangle-button {
@@ -45,7 +45,10 @@ md-datepicker.md-THEME_NAME-theme {
     }
   }
 
-  .md-datepicker-calendar,
+  .md-datepicker-calendar {
+    background: '{{background-A100}}';
+  }
+
   .md-datepicker-input-mask-opaque {
     background: '{{background-color}}';
   }

diff --git a/src/components/dialog/dialog-theme.scss b/src/components/dialog/dialog-theme.scss
@@ -2,12 +2,11 @@ $dialog-border-radius: 4px !default;
 
 md-dialog.md-THEME_NAME-theme {
   border-radius: $dialog-border-radius;
-  background-color: '{{background-color}}';
+  background-color: '{{background-hue-1}}';
 
   &.md-content-overflow {
     .md-actions, md-dialog-actions {
       border-top-color: '{{foreground-4}}';
     }
   }
 }
-
diff --git a/src/components/menu/menu-theme.scss b/src/components/menu/menu-theme.scss
@@ -1,7 +1,24 @@
 md-menu-content.md-THEME_NAME-theme {
-  background-color: '{{background-color}}';
+  background-color: '{{background-A100}}';
+
+  md-menu-item {
+    color: '{{background-1000-0.87}}';
+
+    md-icon {
+      color: '{{background-1000-0.54}}';
+    }
+
+    .md-button[disabled] {
+      color: '{{background-1000-0.25}}';
+
+      md-icon {
+        color: '{{background-1000-0.25}}';
+      }
+    }
+
+  }
 
   md-menu-divider {
-    background-color: '{{foreground-4}}';
+    background-color: '{{background-1000-0.11}}';
   }
 }
diff --git a/src/components/menuBar/demoBasicUsage/index.html b/src/components/menuBar/demoBasicUsage/index.html
@@ -176,12 +176,12 @@ <h2 class="md-toolbar-tools">Untitled document</h2>
     </div>
   </md-toolbar>
 
-  <div class="page-container">
-    <div class="page">
+  <md-content class="page-container">
+    <md-card class="page">
       <h1>Untitled document</h1>
       <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
       <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
       <p>Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
-    </div>
-  </div>
+    </md-card>
+  </md-content>
 </div>
diff --git a/src/components/menuBar/demoBasicUsage/style.css b/src/components/menuBar/demoBasicUsage/style.css
@@ -5,7 +5,6 @@
 
 .page {
   margin: 0 auto;
-  background-color: white;
   padding: 24px;
   max-width: 680px;
   box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, 0.25);

diff --git a/src/components/menuBar/menu-bar-theme.scss b/src/components/menuBar/menu-bar-theme.scss
@@ -23,7 +23,7 @@ md-menu-bar.md-THEME_NAME-theme {
 
 md-menu-content.md-THEME_NAME-theme {
   .md-menu > .md-button:after {
-    color: '{{foreground-2}}';
+    color: '{{background-1000-0.54}}';
   }
 
   .md-menu._md-open > .md-button {
@@ -32,13 +32,13 @@ md-menu-content.md-THEME_NAME-theme {
 }
 
 md-toolbar.md-THEME_NAME-theme.md-menu-toolbar {
-  background-color: '{{background-color}}';
-  color: '{{foreground-1}}';
+  background-color: '{{background-A100}}';
+  color: '{{background-1000}}';
   md-toolbar-filler {
     background-color: '{{primary-color}}';
-    color: '{{primary-contrast}}';
+    color: '{{background-A100-0.87}}';
     md-icon {
-      color: '{{primary-contrast}}';
+      color: '{{background-A100-0.87}}';
     }
   }
 

diff --git a/src/components/select/demoBasicUsage/index.html b/src/components/select/demoBasicUsage/index.html
@@ -16,7 +16,7 @@ <h1 class="md-title">Enter an address</h1>
       <md-input-container>
         <label>State</label>
         <md-select ng-model="ctrl.userState">
-          <md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}">
+          <md-option ng-repeat="state in ctrl.states" value="{{state.abbrev}}" ng-disabled="$index === 1">
             {{state.abbrev}}
           </md-option>
         </md-select>

diff --git a/src/components/select/select-theme.scss b/src/components/select/select-theme.scss
@@ -42,30 +42,36 @@ md-select.md-THEME_NAME-theme {
 }
 
 md-select-menu.md-THEME_NAME-theme {
-  md-option[disabled] {
-    color: '{{foreground-3}}';
-  }
+  md-content {
+    background: '{{background-A100}}';
 
-  md-optgroup {
-    color: '{{foreground-2}}';
-    md-option {
-      color: '{{foreground-1}}';
-    }
-  }
-  md-option[selected] {
-    color: '{{primary-500}}';
-    &:focus {
-      color: '{{primary-600}}';
+    md-optgroup {
+      color: '{{background-600-0.87}}';
     }
-    &.md-accent {
-      color: '{{accent-500}}';
-      &:focus {
-        color: '{{accent-600}}';
+
+    md-option {
+      color: '{{background-900-0.87}}';
+
+      &[disabled] {
+        color: '{{background-400-0.87}}';
+      }
+
+      &:focus:not([disabled]) {
+        background: '{{background-200}}';
+      }
+
+      &[selected] {
+        color: '{{primary-500}}';
+        &:focus {
+          color: '{{primary-600}}';
+        }
+        &.md-accent {
+          color: '{{accent-500}}';
+          &:focus {
+            color: '{{accent-600}}';
+          }
+        }
       }
     }
   }
-  md-option:focus:not([disabled]):not([selected]) {
-    background: '{{background-200}}';
-  }
-
 }
diff --git a/src/components/sidenav/sidenav-theme.scss b/src/components/sidenav/sidenav-theme.scss
@@ -1,3 +1,5 @@
 md-sidenav.md-THEME_NAME-theme {
-  background-color: '{{background-color}}';
+  &, md-content {
+    background-color: '{{background-hue-1}}';    
+  }
 }
diff --git a/src/core/services/theming/theme.palette.js b/src/core/services/theming/theme.palette.js
@@ -333,7 +333,7 @@ angular.module('material.core.theming.palette', [])
     '1000': '#000000',
     'A100': '#ffffff',
     'A200': '#eeeeee',
-    'A400': '#bdbdbd',
+    'A400': '#303030',
     'A700': '#616161',
     'contrastDefaultColor': 'dark',
     'contrastLightColors': '600 700 800 900'

diff --git a/src/core/services/theming/theming.js b/src/core/services/theming/theming.js
@@ -97,19 +97,19 @@ var LIGHT_DEFAULT_HUES = {
     'hue-3': 'A700'
   },
   'background': {
-    'default': 'A100',
-    'hue-1': '300',
-    'hue-2': '800',
-    'hue-3': '900'
+    'default': '50',
+    'hue-1': 'A100',
+    'hue-2': '100',
+    'hue-3': '300'
   }
 };
 
 var DARK_DEFAULT_HUES = {
   'background': {
-    'default': '800',
-    'hue-1': '600',
-    'hue-2': '300',
-    'hue-3': '900'
+    'default': 'A400',
+    'hue-1': '800',
+    'hue-2': '900',
+    'hue-3': '1000'
   }
 };
 THEME_COLOR_TYPES.forEach(function(colorType) {
@@ -675,4 +675,3 @@ function rgba(rgbArray, opacity) {
     'rgba(' + rgbArray.join(',') + ',' + opacity + ')' :
     'rgb(' + rgbArray.join(',') + ')';
 }
-