Style tweaks (#4766)

* Style tweaks * Update ha-style.ts * Move derived styles
home-assistant · Feb 8, 2020 · 7d91515 · 7d91515
1 parent e0565c3
commit 7d91515
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 13 deletions.
diff --git a/src/panels/developer-tools/mqtt/developer-tools-mqtt.ts b/src/panels/developer-tools/mqtt/developer-tools-mqtt.ts
@@ -120,10 +120,6 @@ class HaPanelDevMqtt extends LitElement {
           direction: ltr;
         }
 
-        mwc-button {
-          background-color: white;
-        }
-
         mqtt-subscribe-card {
           display: block;
           margin: 16px auto;

diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
@@ -44,12 +44,7 @@ documentContainer.innerHTML = `<custom-style>
       --primary-background-color: #fafafa;
       --secondary-background-color: #e5e5e5; /* behind the cards on state */
 
-      /* sidebar menu */
-      --sidebar-icon-color: rgba(0, 0, 0, 0.5);
-
       /* for label-badge */
-      --label-badge-background-color: white;
-      --label-badge-text-color: rgb(76, 76, 76);
       --label-badge-red: #DF4C1E;
       --label-badge-blue: #039be5;
       --label-badge-green: #0DA035;

diff --git a/src/resources/styles.ts b/src/resources/styles.ts
@@ -8,17 +8,20 @@ export const derivedStyles = {
   "sidebar-background-color": "var(--paper-listbox-background-color);",
   "sidebar-selected-text-color": "var(--primary-color)",
   "sidebar-selected-icon-color": "var(--primary-color)",
+  "sidebar-icon-color": "rgba(var(--rgb-primary-text-color), 0.6)",
   "switch-checked-color": "var(--primary-color)",
   "switch-checked-button-color":
-    "var(--switch-checked-color, var(--paper-grey-50))",
+    "var(--switch-checked-color, var(--primary-background-color))",
   "switch-checked-track-color": "var(--switch-checked-color, #000000)",
   "switch-unchecked-button-color":
-    "var(--switch-unchecked-color, var(--paper-grey-50))",
+    "var(--switch-unchecked-color, var(--primary-background-color))",
   "switch-unchecked-track-color": "var(--switch-unchecked-color, #000000)",
   "slider-color": "var(--primary-color)",
   "slider-secondary-color": "var(--light-primary-color)",
   "slider-bar-color": "var(--disabled-text-color)",
   "label-badge-grey": "var(--paper-grey-500)",
+  "label-badge-background-color": "var(--card-background-color)",
+  "label-badge-text-color": "rgba(var(--rgb-primary-text-color), 0.8)",
   "paper-card-background-color": "var(--card-background-color)",
   "paper-listbox-background-color": "var(--card-background-color)",
   "paper-item-icon-color": "var(--state-icon-color)",
@@ -35,13 +38,15 @@ export const derivedStyles = {
   "mdc-theme-primary": "var(--primary-color)",
   "mdc-theme-secondary": "var(--accent-color)",
   "mdc-theme-background": "var(--primary-background-color)",
-  "mdc-theme-surface":
-    "var(--paper-card-background-color, var(--card-background-color))",
+  "mdc-theme-surface": "var(--card-background-color)",
   "mdc-theme-on-primary": "var(--text-primary-color)",
   "mdc-theme-on-secondary": "var(--text-primary-color)",
   "mdc-theme-on-surface": "var(--primary-text-color)",
   "app-header-text-color": "var(--text-primary-color)",
   "app-header-background-color": "var(--primary-color)",
+  "material-body-text-color": "var(--primary-text-color)",
+  "material-background-color": "var(--card-background-color)",
+  "material-secondary-background-color": "var(--secondary-background-color)",
 };
 
 export const haStyle = css`