Adhere to material design spec

src/cards/ha-domain-card.html

@@ -5,24 +5,18 @@
 
 <dom-module id='ha-domain-card'>
   <style>
-    .domain-title {
-      font-size: 24px;
-      padding: 24px 16px 16px;
-      border-bottom: 2px solid #E8E8E8;
-      text-transform: capitalize;
-    }
     .states {
-      padding: 8px 0;
+      padding-bottom: 16px;
     }
     .state {
       padding: 8px 16px;
     }
     state-card-content {
-      cursor: pointer;      
+      cursor: pointer;
     }
   </style>
   <template>
-    <ha-card title='[[computeDomainTitle(domain)]]'>
+    <ha-card header='[[computeDomainTitle(domain)]]'>
       <div class='states'>
         <template is='dom-repeat' items="[[states]]">
           <div class='state'>

src/components/entity/state-badge.html

@@ -8,14 +8,14 @@
   :host {
     position: relative;
     display: inline-block;
-    width: 45px;
-    background-color: #4fc3f7;
-    color: white;
+    width: 40px;
+    /*background-color: #4fc3f7;*/
+    color: #44739E;
     border-radius: 50%;
   }
 
   div {
-    height: 45px;
+    height: 40px;
     text-align: center;
   }
 
@@ -32,7 +32,7 @@
   domain-icon[data-domain=light][data-state=on],
   domain-icon[data-domain=switch][data-state=on],
   domain-icon[data-domain=sun][data-state=above_horizon] {
-    color: #fff176;
+    color: #DCC91F;
   }
   </style>
 

src/components/ha-card.html

@@ -17,7 +17,6 @@
     .header {
       font-size: 24px;
       padding: 24px 16px 16px;
-      border-bottom: 2px solid #E8E8E8;
       text-transform: capitalize;
     }
   </style>

src/components/ha-zone-cards.html

@@ -13,7 +13,7 @@
     .badges {
       margin-top: 16px;
       margin-left: 8px;
-      font-size: 80%;
+      font-size: 85%;
       text-align: center;
     }
 

src/components/ha-zone-cards.js

@@ -1,8 +1,8 @@
 import Polymer from '../polymer';
 import { util } from '../util/home-assistant-js-instance';
 
-require('../cards/ha-domain-card');
 require('../cards/ha-badges-card');
+require('../cards/ha-domain-card');
 
 const PRIORITY = {
   a: -1,

src/components/state-info.html

@@ -6,7 +6,7 @@
 <dom-module id="state-info">
   <style>
   :host {
-    line-height: normal;
+    line-height: 1.5;
     min-width: 150px;
     white-space: nowrap;
   }
@@ -16,21 +16,19 @@
   }
 
   .info {
-    margin-left: 60px;
+    margin-left: 56px;
   }
 
   .name {
     text-transform: capitalize;
-    font-weight: 300;
-    font-size: 1.3rem;
+    font-weight: 400;
     text-overflow: ellipsis;
     overflow-x: hidden;
   }
 
   .time-ago {
-    color: darkgrey;
+    color: var(--secondary-text-color);
     margin-top: -2px;
-    font-size: 1rem;
     text-overflow: ellipsis;
     overflow-x: hidden;
   }

src/dialogs/more-info-dialog.html

@@ -11,8 +11,13 @@
 
 <dom-module id="more-info-dialog">
   <style>
+    paper-dialog {
+      font-size: 14px;
+    }
+
     state-card-content {
       margin-bottom: 24px;
+      font-size: 14px;
     }
 
     @media all and (max-width: 450px) {

src/resources/home-assistant-style.html

@@ -18,6 +18,8 @@
     --paper-toggle-button-checked-bar-color: #039be5;
 
     --paper-toolbar-background: #03A9F4;
+
+    font-size: 14px;
   }
 
   @-webkit-keyframes ha-spin {

src/state-summary/state-card-display.html

@@ -7,9 +7,9 @@
   .state {
     margin-left: 16px;
     text-transform: capitalize;
-    font-weight: 300;
-    font-size: 1.3rem;
+    font-weight: 400;
     text-align: right;
+    line-height: 1.5;
   }
   </style>
 

src/state-summary/state-card-media_player.html

@@ -5,7 +5,7 @@
 <dom-module id="state-card-media_player">
   <style>
   :host {
-    line-height: normal;
+    line-height: 1.5;
   }
 
   .state {
@@ -19,14 +19,11 @@
       overflow-x: hidden;
       text-overflow: ellipsis;
       text-transform: capitalize;
-      font-weight: 300;
-      font-size: 1.3rem;
+      font-weight: 400;
   }
 
   .secondary-text {
-      color: darkgrey;
-      margin-top: -2px;
-      font-size: 1rem;
+      color: var(--secondary-text-color);
   }
   </style>
   <template>

src/state-summary/state-card-thermostat.html

@@ -5,7 +5,7 @@
 <dom-module id="state-card-thermostat">
   <style>
   :host {
-    line-height: normal;
+    line-height: 1.5;
   }
 
   .state {
@@ -15,14 +15,11 @@
 
   .target {
       text-transform: capitalize;
-      font-weight: 300;
-      font-size: 1.3rem;
+      font-weight: 400;
   }
 
   .current {
-      color: darkgrey;
-      margin-top: -2px;
-      font-size: 1rem;
+      color: var(--secondary-text-color);
   }
   </style>
   <template>