Road to polymer 2 pt 2 (#310)

* Remove default-primary-color var

* Swap out paper-menu for paper-listbox

bower.json

@@ -35,7 +35,6 @@
     "paper-item": "PolymerElements/paper-item#^2.0.0",
     "paper-listbox": "PolymerElements/paper-listbox#^2.0.0",
     "paper-material": "PolymerElements/paper-material#^2.0.0",
-    "paper-menu": "PolymerElements/paper-menu#^1.3.0",
     "paper-menu-button": "PolymerElements/paper-menu-button#^2.0.0",
     "paper-progress": "PolymerElements/paper-progress#^2.0.1",
     "paper-radio-button": "PolymerElements/paper-radio-button#^2.0.0",

panels/config/group/ha-form-group.html

@@ -4,7 +4,6 @@
 <link rel="import" href="../../../bower_components/paper-menu-button/paper-menu-button.html">
 <link rel="import" href="../../../bower_components/paper-radio-group/paper-radio-group.html">
 <link rel="import" href="../../../bower_components/paper-radio-button/paper-radio-button.html">
-<link rel="import" href="../../../bower_components/paper-menu/paper-menu.html">
 <link rel="import" href="../../../bower_components/polymer-sortablejs/polymer-sortablejs.html">
 
 <link rel="import" href="../../../src/components/entity/state-info.html">

panels/history/ha-panel-history.html

@@ -2,7 +2,7 @@
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../bower_components/paper-input/paper-input.html">
 <link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
+<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
 <link rel="import" href="../../bower_components/paper-item/paper-item.html">
 <link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
@@ -34,6 +34,10 @@
       paper-dropdown-menu {
         max-width: 100px;
       }
+
+      paper-item {
+        cursor: pointer;
+      }
     </style>
 
     <ha-state-history-data
@@ -66,14 +70,14 @@
             label='Period'
             disabled='[[isLoadingData]]'
           >
-            <paper-menu
+            <paper-listbox
               slot="dropdown-content"
               selected="{{_periodIndex}}"
             >
               <paper-item>1 day</paper-item>
               <paper-item>3 days</paper-item>
               <paper-item>1 week</paper-item>
-            </paper-menu>
+            </paper-listbox>
           </paper-dropdown-menu>
         </div>
         <state-history-charts history-data="[[stateHistoryOutput]]"

preact-src/script/script_action.js

@@ -92,10 +92,10 @@ export default class Action extends Component {
               icon="mdi:dots-vertical"
               slot="dropdown-trigger"
             />
-            <paper-menu slot="dropdown-content">
+            <paper-listbox slot="dropdown-content">
               <paper-item disabled>Duplicate</paper-item>
               <paper-item onTap={this.onDelete}>Delete</paper-item>
-            </paper-menu>
+            </paper-listbox>
           </paper-menu-button>
         </div>
         <div class='card-content'>{content}</div>

preact-src/trigger/trigger_row.js

@@ -90,10 +90,10 @@ export default class TriggerRow extends Component {
               icon="mdi:dots-vertical"
               slot="dropdown-trigger"
             />
-            <paper-menu slot="dropdown-content">
+            <paper-listbox slot="dropdown-content">
               <paper-item disabled>Duplicate</paper-item>
               <paper-item onTap={this.onDelete}>Delete</paper-item>
-            </paper-menu>
+            </paper-listbox>
           </paper-menu-button>
         </div>
         <div class='card-content'>{content}</div>

src/components/entity/ha-entity-toggle.html

@@ -13,7 +13,7 @@
         transition: color .5s;
       }
       paper-icon-button[state-active] {
-        color: var(--default-primary-color);
+        color: var(--primary-color);
       }
       paper-toggle-button {
         cursor: pointer;

src/components/ha-label-badge.html

@@ -19,7 +19,7 @@
       line-height: var(--ha-label-badge-size, 2.5em);
       font-size: var(--ha-label-badge-font-size, 1.5em);
       border-radius: 50%;
-      border: 0.1em solid var(--ha-label-badge-color, --default-primary-color);
+      border: 0.1em solid var(--ha-label-badge-color, --primary-color);
       color: rgb(76, 76, 76);
 
       white-space: nowrap;
@@ -47,7 +47,7 @@
     .label-badge .label span {
       max-width: 80%;
       display: inline-block;
-      background-color: var(--ha-label-badge-color, --default-primary-color);
+      background-color: var(--ha-label-badge-color, --primary-color);
       color: white;
       border-radius: 1em;
       padding: 4px 8px;

src/components/ha-sidebar.html

@@ -1,7 +1,7 @@
 <link rel='import' href='../../bower_components/polymer/polymer.html'>
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
-<link rel='import' href='../../bower_components/paper-menu/paper-menu.html'>
+<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
 <link rel='import' href='../../bower_components/paper-item/paper-item.html'>
 <link rel='import' href='../../bower_components/paper-item/paper-icon-item.html'>
 <link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
@@ -34,7 +34,7 @@
         background-color: var(--primary-background-color);
       }
 
-      paper-menu {
+      paper-listbox {
         padding-bottom: 0;
       }
 
@@ -49,14 +49,14 @@
         };
 
         --paper-item-selected: {
-          color: var(--default-primary-color);
+          color: var(--primary-color);
           background-color: var(--paper-grey-200);
           opacity: 1;
         };
       }
       paper-icon-item.iron-selected {
         --paper-item-icon: {
-          color: var(--default-primary-color);
+          color: var(--primary-color);
           opacity: 1;
         };
       }
@@ -99,7 +99,7 @@
       <paper-icon-button icon='mdi:chevron-left' hidden$='[[narrow]]' on-tap='toggleMenu'></paper-icon-button>
     </app-toolbar>
 
-    <paper-menu attr-for-selected='data-panel' selected='[[hass.currentPanel]]' on-iron-select='menuSelect'>
+    <paper-listbox attr-for-selected='data-panel' selected='[[hass.currentPanel]]' on-iron-select='menuSelect'>
       <paper-icon-item on-tap='menuClicked' data-panel='states'>
         <iron-icon slot="item-icon" icon='mdi:apps'></iron-icon>
         <span class='item-text'>States</span>
@@ -116,7 +116,7 @@
         <iron-icon slot="item-icon" icon='mdi:exit-to-app'></iron-icon>
         <span class='item-text'>Log Out</span>
       </paper-icon-item>
-    </paper-menu>
+    </paper-listbox>
 
     <div>
       <template is='dom-if' if='[[pushSupported]]'>

src/more-infos/more-info-automation.html

@@ -10,7 +10,7 @@
   <template>
     <style>
       paper-button {
-        color: var(--default-primary-color);
+        color: var(--primary-color);
         font-weight: 500;
         top: 3px;
         height: 37px;

src/more-infos/more-info-climate.html

@@ -3,7 +3,7 @@
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
 <link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
-<link rel='import' href='../../bower_components/paper-menu/paper-menu.html'>
+<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
 <link rel='import' href='../../bower_components/paper-item/paper-item.html'>
 <link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
 <link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
@@ -51,6 +51,10 @@
         width: 100%;
       }
 
+      paper-item {
+        cursor: pointer;
+      }
+
       paper-slider {
         width: 100%;
       }
@@ -119,35 +123,35 @@
       <div class='container-operation_list'>
         <div class='controls'>
           <paper-dropdown-menu label-float label='Operation'>
-            <paper-menu slot="dropdown-content" selected="{{operationIndex}}">
+            <paper-listbox slot="dropdown-content" selected="{{operationIndex}}">
               <template is='dom-repeat'
                         items='[[stateObj.attributes.operation_list]]'>
                 <paper-item class="capitalize">[[item]]</paper-item>
               </template>
-            </paper-menu>
+            </paper-listbox>
           </paper-dropdown-menu>
         </div>
       </div>
 
       <div class='container-fan_list'>
         <paper-dropdown-menu label-float label='Fan Mode'>
-          <paper-menu slot="dropdown-content" selected="{{fanIndex}}">
+          <paper-listbox slot="dropdown-content" selected="{{fanIndex}}">
             <template is='dom-repeat'
                       items='[[stateObj.attributes.fan_list]]'>
               <paper-item>[[item]]</paper-item>
             </template>
-          </paper-menu>
+          </paper-listbox>
         </paper-dropdown-menu>
       </div>
 
       <div class='container-swing_list'>
         <paper-dropdown-menu label-float label='Swing Mode'>
-          <paper-menu slot="dropdown-content" selected="{{swingIndex}}">
+          <paper-listbox slot="dropdown-content" selected="{{swingIndex}}">
             <template is='dom-repeat'
                       items='[[stateObj.attributes.swing_list]]'>
               <paper-item>[[item]]</paper-item>
             </template>
-          </paper-menu>
+          </paper-listbox>
         </paper-dropdown-menu>
       </div>
 

src/more-infos/more-info-fan.html

@@ -2,7 +2,7 @@
 
 <link rel='import' href='../../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
 <link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
-<link rel='import' href='../../bower_components/paper-menu/paper-menu.html'>
+<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
 <link rel='import' href='../../bower_components/paper-item/paper-item.html'>
 <link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
 <link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
@@ -22,18 +22,22 @@
       .has-oscillating .container-oscillating {
         display: block;
       }
+
+      paper-item {
+        cursor: pointer;
+      }
     </style>
 
     <div class$='[[computeClassNames(stateObj)]]'>
 
       <div class="container-speed_list">
         <paper-dropdown-menu label-float label='Speed'>
-          <paper-menu slot="dropdown-content" selected='{{speedIndex}}'>
+          <paper-listbox slot="dropdown-content" selected='{{speedIndex}}'>
             <template is='dom-repeat'
                       items='[[stateObj.attributes.speed_list]]'>
               <paper-item>[[item]]</paper-item>
             </template>
-          </paper-menu>
+          </paper-listbox>
         </paper-dropdown-menu>
       </div>
 

src/more-infos/more-info-light.html

@@ -2,7 +2,7 @@
 
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
+<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
 <link rel="import" href="../../bower_components/paper-item/paper-item.html">
 
 <link rel='import' href='../components/ha-labeled-slider.html'>
@@ -46,18 +46,22 @@
       .has-rgb_color ha-color-picker {
         max-height: 200px;
       }
+
+      paper-item {
+        cursor: pointer;
+      }
     </style>
 
     <div class$='[[computeClassNames(stateObj)]]'>
 
       <div class='effect_list'>
         <paper-dropdown-menu label-float label='Effect'>
-          <paper-menu slot="dropdown-content" selected="{{effectIndex}}">
+          <paper-listbox slot="dropdown-content" selected="{{effectIndex}}">
             <template is='dom-repeat'
                       items='[[stateObj.attributes.effect_list]]'>
               <paper-item>[[item]]</paper-item>
             </template>
-          </paper-menu>
+          </paper-listbox>
         </paper-dropdown-menu>
       </div>
 

src/more-infos/more-info-media_player.html

@@ -7,7 +7,7 @@
 <link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
 <link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
 <link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
-<link rel='import' href='../../bower_components/paper-menu/paper-menu.html'>
+<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
 <link rel='import' href='../../bower_components/paper-item/paper-item.html'>
 
 <dom-module id='more-info-media_player'>
@@ -46,6 +46,10 @@
       [hidden] {
         display: none !important;
       }
+
+      paper-item {
+        cursor: pointer;
+      }
     </style>
 
     <div class$='[[computeClassNames(stateObj)]]'>
@@ -93,11 +97,11 @@
            hidden$='[[computeHideSelectSource(isOff, supportsSelectSource)]]'>
         <iron-icon class="source-input" icon="mdi:login-variant"></iron-icon>
         <paper-dropdown-menu class="flex source-input" label-float label='Source'>
-          <paper-menu slot="dropdown-content" selected="{{sourceIndex}}">
+          <paper-listbox slot="dropdown-content" selected="{{sourceIndex}}">
             <template is='dom-repeat' items='[[stateObj.attributes.source_list]]'>
               <paper-item>[[item]]</paper-item>
             </template>
-          </paper-menu>
+          </paper-listbox>
         </paper-dropdown-menu>
       </div>
       <!-- TTS -->

src/resources/ha-style.html

@@ -9,7 +9,6 @@
     --paper-grey-200: #eeeeee;
 
     --dark-primary-color: #0288D1;
-    --default-primary-color: #03A9F4;
     --primary-color: #03A9F4;
     --light-primary-color: #B3E5FC;
     --text-primary-color: #ffffff;
@@ -32,7 +31,7 @@
     --paper-slider-container-color: var(--divider-color);
 
     --paper-card-background-color: #FFF;
-    --paper-menu-background-color: #FFF;
+    --paper-listbox-background-color: #FFF;
 
     /* Taken from paper-styles/color.html */
     /* for paper-spinner */
@@ -88,7 +87,7 @@
       .card-actions > paper-button:not([disabled]),
       .card-actions > ha-call-api-button:not([disabled]),
       .card-actions > ha-call-service-button:not([disabled]) {
-        color: var(--default-primary-color);
+        color: var(--primary-color);
         font-weight: 500;
       }
 

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

@@ -11,7 +11,7 @@
     <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
     <style>
       paper-button {
-        color: var(--default-primary-color);
+        color: var(--primary-color);
         font-weight: 500;
         top: 3px;
         height: 37px;

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

@@ -1,6 +1,6 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
-<link rel='import' href='../../bower_components/paper-menu/paper-menu.html'>
+<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
 <link rel='import' href='../../bower_components/paper-item/paper-item.html'>
 
 <link rel="import" href="../components/entity/state-badge.html">
@@ -21,6 +21,10 @@
         display: block;
         margin-left: 53px;
       }
+
+      paper-item {
+        cursor: pointer;
+      }
     </style>
 
     <state-badge state-obj='[[stateObj]]'></state-badge>
@@ -28,11 +32,11 @@
       on-tap='stopPropagation'
       selected-item-label='{{selectedOption}}'
       label='[[computeStateName(stateObj)]]'>
-      <paper-menu slot="dropdown-content" selected="[[computeSelected(stateObj)]]">
+      <paper-listbox slot="dropdown-content" selected="[[computeSelected(stateObj)]]">
         <template is='dom-repeat' items='[[stateObj.attributes.options]]'>
           <paper-item>[[item]]</paper-item>
         </template>
-      </paper-menu>
+      </paper-listbox>
     </paper-dropdown-menu>
   </template>
 </dom-module>

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

@@ -11,7 +11,7 @@
     <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
     <style>
       paper-button {
-        color: var(--default-primary-color);
+        color: var(--primary-color);
         font-weight: 500;
         top: 3px;
         height: 37px;

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

@@ -12,7 +12,7 @@
     <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
     <style>
       paper-button {
-        color: var(--default-primary-color);
+        color: var(--primary-color);
         font-weight: 500;
         top: 3px;
         height: 37px;