From 7d91515bf5f109cf31574c73431aa20787216f0b Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Sat, 8 Feb 2020 23:49:29 +0100 Subject: [PATCH] Style tweaks (#4766) * Style tweaks * Update ha-style.ts * Move derived styles --- .../developer-tools/mqtt/developer-tools-mqtt.ts | 4 ---- src/resources/ha-style.ts | 5 ----- src/resources/styles.ts | 13 +++++++++---- 3 files changed, 9 insertions(+), 13 deletions(-) diff --git a/src/panels/developer-tools/mqtt/developer-tools-mqtt.ts b/src/panels/developer-tools/mqtt/developer-tools-mqtt.ts index aaef686ffc..e527f4d0dc 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 943bc9a70c..778277bf41 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(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 index 34c2e7980d..5a5c0cb837 100644 --- 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`