From cdd4cabb4b85b63d9ea04482b06569b367b74d63 Mon Sep 17 00:00:00 2001
From: c727 <crusader727@gmx.de>
Date: Sat, 24 Feb 2018 00:07:09 +0100
Subject: [PATCH] Hassio, use CSS vars to avoid conflicts with themes (#918)

* Hassio, use CSS vars to avoid conflicts with themes

* More
---
 hassio/addon-view/hassio-addon-config.html  |  3 ---
 hassio/addon-view/hassio-addon-info.html    |  1 +
 hassio/addon-view/hassio-addon-logs.html    |  4 +++-
 hassio/addon-view/hassio-addon-network.html |  1 +
 hassio/addon-view/hassio-addon-view.html    | 14 +++++++++-----
 hassio/hassio-pages-with-tabs.html          |  4 ++++
 src/components/hassio-card-content.html     |  5 +++--
 7 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/hassio/addon-view/hassio-addon-config.html b/hassio/addon-view/hassio-addon-config.html
index d3d505d098..e45a81b0bc 100644
--- a/hassio/addon-view/hassio-addon-config.html
+++ b/hassio/addon-view/hassio-addon-config.html
@@ -1,7 +1,6 @@
 <link rel="import" href="../../bower_components/polymer/polymer-element.html">
 <link rel="import" href="../../bower_components/paper-card/paper-card.html">
 <link rel="import" href="../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
 
 <link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
@@ -26,8 +25,6 @@
       iron-autogrow-textarea {
         width: 100%;
         font-family: monospace;
-        background-color: var(--primary-text-color);
-        color: var(--text-primary-color);
       }
       .syntaxerror {
         color: var(--google-red-500);
diff --git a/hassio/addon-view/hassio-addon-info.html b/hassio/addon-view/hassio-addon-info.html
index 2624007b4f..002d4b08f9 100644
--- a/hassio/addon-view/hassio-addon-info.html
+++ b/hassio/addon-view/hassio-addon-info.html
@@ -7,6 +7,7 @@
 
 <link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
 <link rel='import' href='../../src/components/ha-markdown.html'>
+<link rel='import' href='../../src/resources/ha-style.html'>
 
 <dom-module id="hassio-addon-info">
   <template>
diff --git a/hassio/addon-view/hassio-addon-logs.html b/hassio/addon-view/hassio-addon-logs.html
index 2c6d008cd1..162ce92a31 100644
--- a/hassio/addon-view/hassio-addon-logs.html
+++ b/hassio/addon-view/hassio-addon-logs.html
@@ -2,9 +2,11 @@
 <link rel="import" href="../../bower_components/paper-card/paper-card.html">
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
 
+<link rel='import' href='../../src/resources/ha-style.html'>
+
 <dom-module id="hassio-addon-logs">
   <template>
-    <style include="iron-flex ha-style">
+    <style include="ha-style">
       :host,
       paper-card {
         display: block;
diff --git a/hassio/addon-view/hassio-addon-network.html b/hassio/addon-view/hassio-addon-network.html
index 15e92f8716..18724e7792 100644
--- a/hassio/addon-view/hassio-addon-network.html
+++ b/hassio/addon-view/hassio-addon-network.html
@@ -3,6 +3,7 @@
 <link rel="import" href="../../bower_components/paper-input/paper-input.html">
 
 <link rel='import' href='../../src/util/hass-mixins.html'>
+<link rel='import' href='../../src/resources/ha-style.html'>
 
 <link rel="import" href="../../src/components/buttons/ha-call-api-button.html">
 
diff --git a/hassio/addon-view/hassio-addon-view.html b/hassio/addon-view/hassio-addon-view.html
index 060e9639a7..2cc56af4c2 100644
--- a/hassio/addon-view/hassio-addon-view.html
+++ b/hassio/addon-view/hassio-addon-view.html
@@ -16,16 +16,20 @@
 <dom-module id="hassio-addon-view">
   <template>
     <style include="iron-flex ha-style">
-      hassio-addon-info,
-      hassio-addon-network,
-      hassio-addon-config {
-        margin-bottom: 24px;
-      }
+      :host {
+        color: var(--primary-text-color);
+        --paper-card-header-color: var(--primary-text-color);
+      }      
       .content {
         padding: 24px 0 32px;
         max-width: 600px;
         margin: 0 auto;
       }
+      hassio-addon-info,
+      hassio-addon-network,
+      hassio-addon-config {
+        margin-bottom: 24px;
+      }
     </style>
     <app-route
       route='[[route]]'
diff --git a/hassio/hassio-pages-with-tabs.html b/hassio/hassio-pages-with-tabs.html
index 569f2188c4..d2d7851ca9 100644
--- a/hassio/hassio-pages-with-tabs.html
+++ b/hassio/hassio-pages-with-tabs.html
@@ -17,6 +17,10 @@
 <dom-module id='hassio-pages-with-tabs'>
   <template>
     <style include='iron-flex iron-positioning ha-style'>
+      :host {
+        color: var(--primary-text-color);
+        --paper-card-header-color: var(--primary-text-color);
+      }
       paper-tabs {
         margin-left: 12px;
         --paper-tabs-selection-bar-color: #FFF;
diff --git a/src/components/hassio-card-content.html b/src/components/hassio-card-content.html
index cc811ec237..b126577091 100644
--- a/src/components/hassio-card-content.html
+++ b/src/components/hassio-card-content.html
@@ -22,9 +22,10 @@
       }
       iron-icon.hassupdate,
       iron-icon.snapshot {
-        color: var(--primary-color);
+        color: var(--paper-item-icon-color);
       }
       .title {
+        color: var(--primary-text-color);
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
@@ -56,7 +57,7 @@
 </dom-module>
 
 <script>
-class HassioCardContent extends window.hassMixins.EventsMixin(Polymer.Element) {
+class HassioCardContent extends Polymer.Element {
   static get is() { return 'hassio-card-content'; }
 
   static get properties() {