From bde17ac0bb1e9148940b13009a0000ff6f1430d3 Mon Sep 17 00:00:00 2001
From: Raymond Julin <raymond.julin@gmail.com>
Date: Thu, 23 May 2019 20:50:51 +0200
Subject: [PATCH] Change styling of active mode button and make it more
 skinnable

---
 README.md     | 18 ++++++++++--------
 src/index.js  |  4 ++--
 src/styles.js |  7 +++++++
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 6b38641..41f3793 100644
--- a/README.md
+++ b/README.md
@@ -103,14 +103,16 @@ cards:
 
 The card uses the following CSS variables:
 
-| Var name               | Default value                           | Usage                                                |
-| ---------------------- | --------------------------------------- | ---------------------------------------------------- |
-| --st-font-size-xl      | var(--paper-font-display3\_-_font-size) | Used for target temperature                          |
-| --st-font-size-l       | var(--paper-font-display2\_-_font-size) | Unused at the moment                                 |
-| --st-font-size-m       | var(--paper-font-title\_-_font-size)    | Used for target temperature unit                     |
-| --st-font-size-title   | var(--ha-card-header-font-size, 24      | Font size for card heading                           |
-| --st-font-size-sensors | var(--paper-font-subhead\_-_font-siz    | Font size for sensors                                |
-| --st-spacing           | 4px                                     | Base unit for spacing. Used in multiples many places |
+| Var name                    | Default value                           | Usage                                                |
+| --------------------------- | --------------------------------------- | ---------------------------------------------------- |
+| --st-font-size-xl           | var(--paper-font-display3\_-_font-size) | Used for target temperature                          |
+| --st-font-size-l            | var(--paper-font-display2\_-_font-size) | Unused at the moment                                 |
+| --st-font-size-m            | var(--paper-font-title\_-_font-size)    | Used for target temperature unit                     |
+| --st-font-size-title        | var(--ha-card-header-font-size, 24      | Font size for card heading                           |
+| --st-font-size-sensors      | var(--paper-font-subhead\_-_font-size)  | Font size for sensors                                |
+| --st-spacing                | 4px                                     | Base unit for spacing. Used in multiples many places |
+| --st-mode-active-background | var(--primary-color)                    | Background color for active mode button              |
+| --st-mode-active-color      | var(--text-primary-color, #fff)         | Text color for active mode button                    |
 
 ### Example tweaking with card-modder
 
diff --git a/src/index.js b/src/index.js
index 6135195..9ebcee6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -374,8 +374,8 @@ class SimpleThermostat extends LitElement {
         ${entries.map(
           ([mode, config]) => html`
             <mwc-button
-              ?disabled=${mode === currentMode}
-              ?outlined=${mode === currentMode}
+              ?unelevated=${mode === currentMode}
+              class="${mode === currentMode ? 'active' : ''}"
               ?dense=${true}
               @click=${() => this.setMode(mode)}
             >
diff --git a/src/styles.js b/src/styles.js
index 628a411..6277112 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -9,6 +9,8 @@ export default css`
     --st-font-size-title: var(--ha-card-header-font-size, 24px);
     --st-font-size-sensors: var(--paper-font-subhead_-_font-size, 16px);
     --st-spacing: 4px;
+    --st-mode-active-background: var(--primary-color);
+    --st-mode-active-color: var(--text-primary-color, #fff);
   }
 
   ha-card {
@@ -116,4 +118,9 @@ export default css`
   .mode__icon {
     padding-right: var(--st-spacing);
   }
+
+  mwc-button.active {
+    background: var(--st-mode-active-background);
+    color: var(--st-mode-active-color);
+  }
 `