fix(datepicker): make dark theme picker not terrible. Fixes #4614

Author: jelbourn

src/components/datepicker/calendar-theme.scss

@@ -1,7 +1,7 @@
 /** Theme styles for mdCalendar. */
 
 .md-calendar.md-THEME_NAME-theme {
-  color: '{{foreground-2}}';
+  color: '{{foreground-1}}';
 
   tr:last-child td {
     border-bottom-color: '{{background-200}}';
@@ -10,12 +10,15 @@
 .md-THEME_NAME-theme {
 
   .md-calendar-day-header {
-    background: '{{background-200}}'; // grey-200
-    color: '{{foreground-2}}'; // grey-700
+    background: '{{background-hue-1}}';
+    color: '{{foreground-1}}';
   }
 
   .md-calendar-date.md-calendar-date-today {
-    color: '{{primary-500}}'; // blue-500
+
+    .md-calendar-date-selection-indicator {
+      border: 1px solid '{{primary-500}}'; // blue-500
+    }
 
     &.md-calendar-date-disabled {
       color: '{{primary-500-0.6}}';
@@ -26,12 +29,12 @@
   // (the root md-calendar holds browser focus).
   .md-calendar-date.md-focus {
     .md-calendar-date-selection-indicator {
-      background: '{{background-300}}'; // grey-300
+      background: '{{background-hue-1}}';
     }
   }
 
   .md-calendar-date-selection-indicator:hover {
-    background: '{{background-300}}'; // grey-300
+    background: '{{background-hue-1}}';
   }
 
   // Selected style goes after hover and focus so that it takes priority.
@@ -40,11 +43,12 @@
     .md-calendar-date-selection-indicator {
       background: '{{primary-500}}'; // blue-500
       color: '{{primary-500-contrast}}'; // white
+      border-color: transparent;
     }
   }
 
   .md-calendar-date-disabled,
   .md-calendar-month-label-disabled {
-    color: '{{background-400}}'; // grey-400
+    color: '{{foreground-3}}';
   }
 }

src/components/datepicker/calendar.scss

@@ -6,7 +6,7 @@ $md-calendar-side-padding: 16px !default;
 $md-calendar-weeks-to-show: 7 !default;
 
 $md-calendar-month-label-padding: 8px !default;
-$md-calendar-month-label-font-size: 13px !default;
+$md-calendar-month-label-font-size: 14px !default;
 
 $md-calendar-scroll-cue-shadow-radius: 6px;
 
@@ -122,6 +122,7 @@ md-calendar {
 .md-calendar-month-label {
   height: $md-calendar-cell-size;
   font-size: $md-calendar-month-label-font-size;
+  font-weight: 500; // Roboto Medium
   padding: 0 0 0 $md-calendar-side-padding + $md-calendar-month-label-padding;
 }
 

src/components/datepicker/datePicker-theme.scss

@@ -1,11 +1,16 @@
 /** Theme styles for mdDatepicker. */
 
 md-datepicker.md-THEME_NAME-theme {
-  background: white;
+  background: '{{background-color}}';
 }
 
 .md-THEME_NAME-theme {
 
+  .md-datepicker-input {
+    color: '{{background-contrast}}';
+    background: '{{background-color}}';
+  }
+
   .md-datepicker-input-container {
     border-bottom-color: '{{background-300}}';
 
@@ -23,6 +28,10 @@ md-datepicker.md-THEME_NAME-theme {
   }
 
   .md-datepicker-triangle-button {
+    .md-datepicker-expand-triangle {
+      border-top-color: '{{foreground-3}}';
+    }
+
     &:hover .md-datepicker-expand-triangle {
       border-top-color: '{{foreground-2}}';
     }
@@ -35,7 +44,8 @@ md-datepicker.md-THEME_NAME-theme {
     }
   }
 
-  .md-datepicker-calendar {
-    background: white;
+  .md-datepicker-calendar,
+  .md-datepicker-input-mask-opaque {
+    background: '{{background-color}}';
   }
 }

src/components/datepicker/datePicker.scss

@@ -77,7 +77,6 @@ md-datepicker {
   position: absolute;
   right: 0;
   left: 120px;
-  background: white;
 
   height: 100%;
 }
@@ -115,7 +114,7 @@ $md-date-arrow-size: 5px;
   height: 0;
   border-left: $md-date-arrow-size solid transparent;
   border-right: $md-date-arrow-size solid transparent;
-  border-top: $md-date-arrow-size solid rgba(black, 0.20);
+  border-top: $md-date-arrow-size solid;
 }
 
 // Button containing the down "disclosure" triangle/arrow.

src/core/services/theming/theming.js

@@ -100,8 +100,8 @@ var LIGHT_DEFAULT_HUES = {
 var DARK_DEFAULT_HUES = {
   'background': {
     'default': '800',
-    'hue-1': '300',
-    'hue-2': '600',
+    'hue-1': '600',
+    'hue-2': '300',
     'hue-3': '900'
   }
 };