feat(calendar): change coors to be in terms of the theme

Author: jelbourn

src/components/calendar/calendar-theme.scss

@@ -1,28 +1,36 @@
 // Theme styles for mdCalendar.
 
+.md-calendar {
+  color: '{{foreground-2}}';
+
+  tr:last-child td {
+    border-bottom-color: '{{background-200}}';
+  }
+}
+
 .md-calendar-day-header {
-  background-color: #eeeeee; // grey-200
-  color: #616161; // need spec; currently grey-700
+  background-color: '{{background-200}}'; // grey-200
+  color: '{{foreground-2}}'; // grey-700
 }
 
 .md-calendar-date.md-calendar-date-today {
-  color: #2196f3; // blue-500
+  color: '{{primary-500}}'; // blue-500
 }
 
 .md-calendar-date:focus {
   .md-calendar-date-selection-indicator {
-    background-color: #e0e0e0; // grey-300
+    background-color: '{{background-300}}'; // grey-300
   }
 }
 
 .md-calendar-date-selection-indicator:hover {
-  background-color: #e0e0e0; // grey-300
+  background-color: '{{background-300}}'; // grey-300
 }
 
 // Selected style goes after hover and focus so that it takes priority.
 .md-calendar-date.md-calendar-selected-date {
   .md-calendar-date-selection-indicator {
-    background-color: #2196f3; // blue-500
-    color: white; // ?
+    background-color: '{{primary-500}}'; // blue-500
+    color: '{{primary-contrast}}'; // SHOULD BE WHITE (ish)
   }
 }

src/components/calendar/calendar.js

@@ -17,14 +17,13 @@
   // TODO(jelbourn): read-only state.
   // TODO(jelbourn): Date "isComplete" logic
   // TODO(jelbourn): Apple + up / down == PgDown and PgUp
-  // TODO(jelbourn): Documentation
-  // TODO(jelbourn): Demo that uses moment.js
   // TODO(jelbourn): Fix NVDA stealing key presses (IE) ???
 
-  // FUTURE VERSION
-  // TODO(jelbourn): Animated month transition on ng-model change.
-  // TODO(jelbourn): Scroll snapping
-  // TODO(jelbourn): Month headers stick to top when scrolling
+  // POST RELEASE
+  // TODO(jelbourn): Animated month transition on ng-model change (virtual-repeat)
+  // TODO(jelbourn): Scroll snapping (virtual repeat)
+  // TODO(jelbourn): Remove superfluous row from short months (virtual-repeat)
+  // TODO(jelbourn): Month headers stick to top when scrolling.
   // TODO(jelbourn): Previous month opacity is lowered when partially scrolled out of view.
   // TODO(jelbourn): Support md-calendar standalone on a page (as a tabstop w/ aria-live
   //     announcement and key handling).

src/components/calendar/calendar.scss

@@ -122,11 +122,11 @@ md-calendar {
 // Primary table containing all date cells. Each month is a tbody in this table.
 .md-calendar {
   @include md-calendar-table();
-  color: rgba(black, 0.7); // secondary
 
   // Divider between months.
   tr:last-child td {
-    border-bottom: 1px solid #e9e9e9;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
   }
 
   // The divider between months doesn't actualyl change the height of the tbody in which the
@@ -136,4 +136,3 @@ md-calendar {
     border-top: 1px solid transparent;
   }
 }
-

src/components/calendar/datePicker.js

@@ -2,15 +2,17 @@
   'use strict';
 
   // PRE RELEASE
+  // TODO(jelbourn): Documentation
+  // TODO(jelbourn): Demo that uses moment.js
   // TODO(jelbourn): aria attributes tying together date input and floating calendar.
-  // TODO(jelbourn): something for mobile (probably calendar panel should take up entire screen)
   // TODO(jelbourn): make sure this plays well with validation and ngMessages.
   // TODO(jelbourn): forward more attributes to the internal input (required, autofocus, etc.)
   // TODO(jelbourn): floating panel open animation (see animation for menu in spec).
-  // TODO(jelbourn): error state
   // TODO(jelbourn): auto-grow input to accomodate longer dates
 
-  // FUTURE VERSION
+  // POST RELEASE
+  // TODO(jelbourn): error state
+  // TODO(jelbourn): something better for mobile (calendar panel takes up entire screen?)
   // TODO(jelbourn): input behavior (masking? auto-complete?)
   // TODO(jelbourn): UTC mode
   // TODO(jelbourn): RTL