From b4d6724e1b8fe33b348d03c9ed9245a52fe20ef7 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 5 Feb 2020 17:12:57 +0100 Subject: [PATCH 1/3] Style tweaks --- .../developer-tools/mqtt/developer-tools-mqtt.ts | 4 ---- src/resources/ha-style.ts | 4 ++-- src/resources/styles.ts | 11 +++++++---- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/panels/developer-tools/mqtt/developer-tools-mqtt.ts b/src/panels/developer-tools/mqtt/developer-tools-mqtt.ts index aaef686ffca3..e527f4d0dc69 100644 --- 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 index 943bc9a70c05..6d2fb9a28d8f 100644 --- a/src/resources/ha-style.ts +++ b/src/resources/ha-style.ts @@ -45,11 +45,11 @@ documentContainer.innerHTML = ` --secondary-background-color: #e5e5e5; /* behind the cards on state */ /* sidebar menu */ - --sidebar-icon-color: rgba(0, 0, 0, 0.5); + --sidebar-icon-color: rgba(var(--rgb-primary-text-color), 0.6); /* for label-badge */ --label-badge-background-color: white; - --label-badge-text-color: rgb(76, 76, 76); + --label-badge-text-color: rgba(var(--rgb-primary-text-color), 0.6); --label-badge-red: #DF4C1E; --label-badge-blue: #039be5; --label-badge-green: #0DA035; diff --git a/src/resources/styles.ts b/src/resources/styles.ts index 34c2e7980d32..e8530605ade6 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -10,15 +10,16 @@ export const derivedStyles = { "sidebar-selected-icon-color": "var(--primary-color)", "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)", "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 +36,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` From 0690d0def709a6a309b2cb33fabb93117ec8649f Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 5 Feb 2020 18:12:53 +0100 Subject: [PATCH 2/3] Update ha-style.ts --- src/resources/ha-style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts index 6d2fb9a28d8f..d74d98aef747 100644 --- a/src/resources/ha-style.ts +++ b/src/resources/ha-style.ts @@ -49,7 +49,7 @@ documentContainer.innerHTML = ` /* for label-badge */ --label-badge-background-color: white; - --label-badge-text-color: rgba(var(--rgb-primary-text-color), 0.6); + --label-badge-text-color: rgba(var(--rgb-primary-text-color), 0.8); --label-badge-red: #DF4C1E; --label-badge-blue: #039be5; --label-badge-green: #0DA035; From 1035d50313763f004ca737bf53087e75efa43189 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Fri, 7 Feb 2020 18:52:19 +0100 Subject: [PATCH 3/3] Move derived styles --- src/resources/ha-style.ts | 5 ----- src/resources/styles.ts | 2 ++ 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts index d74d98aef747..778277bf4102 100644 --- a/src/resources/ha-style.ts +++ b/src/resources/ha-style.ts @@ -44,12 +44,7 @@ documentContainer.innerHTML = ` --primary-background-color: #fafafa; --secondary-background-color: #e5e5e5; /* behind the cards on state */ - /* sidebar menu */ - --sidebar-icon-color: rgba(var(--rgb-primary-text-color), 0.6); - /* for label-badge */ - --label-badge-background-color: white; - --label-badge-text-color: rgba(var(--rgb-primary-text-color), 0.8); --label-badge-red: #DF4C1E; --label-badge-blue: #039be5; --label-badge-green: #0DA035; diff --git a/src/resources/styles.ts b/src/resources/styles.ts index e8530605ade6..5a5c0cb837d7 100644 --- a/src/resources/styles.ts +++ b/src/resources/styles.ts @@ -8,6 +8,7 @@ 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(--primary-background-color))", @@ -20,6 +21,7 @@ export const derivedStyles = { "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)",