Use correct vars for gauge colors (#9727)

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -1159,10 +1159,10 @@ class HassioAddonInfo extends LitElement {
           display: flex;
         }
         ha-svg-icon.running {
-          color: var(--paper-green-400);
+          color: var(--success-color);
         }
         ha-svg-icon.stopped {
-          color: var(--google-red-300);
+          color: var(--error-color);
         }
         ha-call-api-button {
           font-weight: 500;

hassio/src/components/hassio-ansi-to-html.ts

@@ -41,16 +41,16 @@ class HassioAnsiToHtml extends LitElement {
         text-decoration: underline line-through;
       }
       .fg-red {
-        color: rgb(222, 56, 43);
+        color: var(--error-color);
       }
       .fg-green {
-        color: rgb(57, 181, 74);
+        color: var(--success-color);
       }
       .fg-yellow {
-        color: rgb(255, 199, 6);
+        color: var(--warning-color);
       }
       .fg-blue {
-        color: rgb(0, 111, 184);
+        color: var(--info-color);
       }
       .fg-magenta {
         color: rgb(118, 38, 113);
@@ -65,16 +65,16 @@ class HassioAnsiToHtml extends LitElement {
         background-color: rgb(0, 0, 0);
       }
       .bg-red {
-        background-color: rgb(222, 56, 43);
+        background-color: var(--error-color);
       }
       .bg-green {
-        background-color: rgb(57, 181, 74);
+        background-color: var(--success-color);
       }
       .bg-yellow {
-        background-color: rgb(255, 199, 6);
+        background-color: var(--warning-color);
       }
       .bg-blue {
-        background-color: rgb(0, 111, 184);
+        background-color: var(--info-color);
       }
       .bg-magenta {
         background-color: rgb(118, 38, 113);

hassio/src/components/hassio-card-content.ts

@@ -80,11 +80,11 @@ class HassioCardContent extends LitElement {
         color: var(--secondary-text-color);
       }
       ha-svg-icon.update {
-        color: var(--paper-orange-400);
+        color: var(--warning-color);
       }
       ha-svg-icon.running,
       ha-svg-icon.installed {
-        color: var(--paper-green-400);
+        color: var(--success-color);
       }
       ha-svg-icon.hassupdate,
       ha-svg-icon.backup {
@@ -122,7 +122,7 @@ class HassioCardContent extends LitElement {
       }
       .dot {
         position: absolute;
-        background-color: var(--paper-orange-400);
+        background-color: var(--warning-color);
         width: 12px;
         height: 12px;
         top: 8px;

src/components/entity/ha-state-label-badge.ts

@@ -257,7 +257,7 @@ export class HaStateLabelBadge extends LitElement {
       }
 
       .warning {
-        --ha-label-badge-color: var(--label-badge-yellow, #fce588);
+        --ha-label-badge-color: var(--label-badge-yellow, #f4b400);
       }
     `;
   }

src/components/ha-gauge.ts

@@ -1,4 +1,4 @@
-import { css, LitElement, PropertyValues, svg } from "lit";
+import { css, LitElement, PropertyValues, svg, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
@@ -75,9 +75,22 @@ export class Gauge extends LitElement {
           this.levels
             ? this.levels
                 .sort((a, b) => a.level - b.level)
-                .map((level) => {
+                .map((level, idx) => {
+                  let firstPath: TemplateResult | undefined;
+                  if (idx === 0 && level.level !== this.min) {
+                    const angle = getAngle(this.min, this.min, this.max);
+                    firstPath = svg`<path
+                        stroke="var(--info-color)"
+                        class="level"
+                        d="M
+                          ${50 - 40 * Math.cos((angle * Math.PI) / 180)}
+                          ${50 - 40 * Math.sin((angle * Math.PI) / 180)}
+                         A 40 40 0 0 1 90 50
+                        "
+                      ></path>`;
+                  }
                   const angle = getAngle(level.level, this.min, this.max);
-                  return svg`<path
+                  return svg`${firstPath}<path
                       stroke="${level.stroke}"
                       class="level"
                       d="M

src/components/ha-slider.js

@@ -19,14 +19,14 @@ class HaSlider extends PaperSliderClass {
             }
 
             .pin > .slider-knob > .slider-knob-inner {
-              font-size:  var(--ha-slider-pin-font-size, 10px);
+              font-size:  var(--ha-slider-pin-font-size, 15px);
               line-height: normal;
               cursor: pointer;
             }
 
             .disabled.ring > .slider-knob > .slider-knob-inner {
-              background-color: var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
-              border: 2px solid var(--paper-slider-disabled-knob-color, var(--paper-grey-400));
+              background-color: var(--paper-slider-disabled-knob-color, var(--disabled-text-color));
+              border: 2px solid var(--paper-slider-disabled-knob-color, var(--disabled-text-color));
             }
 
             .pin > .slider-knob > .slider-knob-inner::before {

src/dialogs/more-info/controls/more-info-climate.ts

@@ -149,14 +149,12 @@ class MoreInfoClimate extends LitElement {
                     ${stateObj.attributes.humidity} %
                   </div>
                   <ha-slider
-                    class="humidity"
                     step="1"
                     pin
                     ignore-bar-touch
                     dir=${rtlDirection}
                     .min=${stateObj.attributes.min_humidity}
                     .max=${stateObj.attributes.max_humidity}
-                    .secondaryProgress=${stateObj.attributes.max_humidity}
                     .value=${stateObj.attributes.humidity}
                     @change=${this._targetHumiditySliderChanged}
                   >
@@ -479,11 +477,6 @@ class MoreInfoClimate extends LitElement {
         margin-left: 4%;
       }
 
-      .humidity {
-        --paper-slider-active-color: var(--paper-blue-400);
-        --paper-slider-secondary-color: var(--paper-blue-400);
-      }
-
       .single-row {
         padding: 8px 0;
       }

src/dialogs/more-info/controls/more-info-humidifier.ts

@@ -53,14 +53,12 @@ class MoreInfoHumidifier extends LitElement {
           <div class="single-row">
             <div class="target-humidity">${stateObj.attributes.humidity} %</div>
             <ha-slider
-              class="humidity"
               step="1"
               pin
               ignore-bar-touch
               dir=${rtlDirection}
               .min=${stateObj.attributes.min_humidity}
               .max=${stateObj.attributes.max_humidity}
-              .secondaryProgress=${stateObj.attributes.max_humidity}
               .value=${stateObj.attributes.humidity}
               @change=${this._targetHumiditySliderChanged}
             >
@@ -201,11 +199,6 @@ class MoreInfoHumidifier extends LitElement {
         direction: ltr;
       }
 
-      .humidity {
-        --paper-slider-active-color: var(--paper-blue-400);
-        --paper-slider-secondary-color: var(--paper-blue-400);
-      }
-
       .single-row {
         padding: 8px 0;
       }

src/panels/lovelace/cards/energy/hui-energy-carbon-consumed-gauge-card.ts

@@ -176,7 +176,6 @@ class HuiEnergyCarbonGaugeCard
       }
 
       ha-gauge {
-        --gauge-color: var(--label-badge-blue);
         width: 100%;
         max-width: 250px;
       }

src/panels/lovelace/cards/energy/hui-energy-grid-neutrality-gauge-card.ts

@@ -18,11 +18,12 @@ import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../../../types";
 import type { LovelaceCard } from "../../types";
 import type { EnergyGridGaugeCardConfig } from "../types";
+import { severityMap } from "../hui-gauge-card";
 
 const LEVELS: LevelDefinition[] = [
-  { level: -1, stroke: "var(--label-badge-red)" },
-  { level: -0.2, stroke: "var(--label-badge-yellow)" },
-  { level: 0, stroke: "var(--label-badge-green)" },
+  { level: -1, stroke: severityMap.red },
+  { level: -0.2, stroke: severityMap.yellow },
+  { level: 0, stroke: severityMap.green },
 ];
 
 @customElement("hui-energy-grid-neutrality-gauge-card")

src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts

@@ -140,7 +140,6 @@ class HuiEnergySolarGaugeCard
       }
 
       ha-gauge {
-        --gauge-color: var(--label-badge-blue);
         width: 100%;
         max-width: 250px;
       }

src/panels/lovelace/cards/hui-gauge-card.ts

@@ -24,10 +24,10 @@ import type { LovelaceCard, LovelaceCardEditor } from "../types";
 import type { GaugeCardConfig } from "./types";
 
 export const severityMap = {
-  red: "var(--label-badge-red)",
-  green: "var(--label-badge-green)",
-  yellow: "var(--label-badge-yellow)",
-  normal: "var(--label-badge-blue)",
+  red: "var(--error-color)",
+  green: "var(--success-color)",
+  yellow: "var(--warning-color)",
+  normal: "var(--info-color)",
 };
 
 @customElement("hui-gauge-card")
@@ -170,7 +170,10 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     }
   }
 
-  private _computeSeverity(numberValue: number): string {
+  private _computeSeverity(numberValue: number): string | undefined {
+    if (this._config!.needle) {
+      return undefined;
+    }
     const sections = this._config!.severity;
 
     if (!sections) {
@@ -240,7 +243,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
       }
 
       ha-gauge {
-        --gauge-color: var(--label-badge-blue);
         width: 100%;
         max-width: 250px;
       }

src/panels/lovelace/cards/hui-humidifier-card.ts

@@ -330,8 +330,8 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
       }
 
       round-slider {
-        --round-slider-path-color: var(--disabled-text-color);
-        --round-slider-bar-color: var(--mode-color);
+        --round-slider-path-color: var(--slider-track-color);
+        --round-slider-bar-color: var(--primary-color);
         padding-bottom: 10%;
       }
 
@@ -377,16 +377,6 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
         font-size: var(--name-font-size);
       }
 
-      #modes > * {
-        color: var(--disabled-text-color);
-        cursor: pointer;
-        display: inline-block;
-      }
-
-      #modes .selected-icon {
-        color: var(--mode-color);
-      }
-
       text {
         fill: var(--primary-text-color);
       }

src/panels/lovelace/cards/hui-light-card.ts

@@ -297,7 +297,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
       }
 
       round-slider {
-        --round-slider-path-color: var(--disabled-text-color);
+        --round-slider-path-color: var(--slider-track-color);
         --round-slider-bar-color: var(--primary-color);
         padding-bottom: 10%;
       }

src/panels/lovelace/cards/hui-thermostat-card.ts

@@ -513,7 +513,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
       }
 
       round-slider {
-        --round-slider-path-color: var(--disabled-text-color);
+        --round-slider-path-color: var(--slider-track-color);
         --round-slider-bar-color: var(--mode-color);
         padding-bottom: 10%;
       }

src/resources/ha-style.ts

@@ -38,11 +38,11 @@ documentContainer.innerHTML = `<custom-style>
       --scrollbar-thumb-color: rgb(194, 194, 194);
 
       --error-color: #db4437;
-      --warning-color: #FF9800;
-      --success-color: #0f9d58;
-      --info-color: #4285f4;
+      --warning-color: #ffa600;
+      --success-color: #43a047;
+      --info-color: #039be5;
 
-      /* background and sidebar */
+      /* backgrounds */
       --card-background-color: #ffffff;
       --primary-background-color: #fafafa;
       --secondary-background-color: #e5e5e5; /* behind the cards on state */
@@ -55,8 +55,9 @@ documentContainer.innerHTML = `<custom-style>
       --label-badge-blue: #039be5;
       --label-badge-green: #0DA035;
       --label-badge-yellow: #f4b400;
+      --label-badge-grey: #9e9e9e;
 
-      /* states and badges */
+      /* states */
       --state-icon-color: #44739e;
       /* an active state is anything that would require attention */ 
       --state-icon-active-color: #FDD835;
@@ -88,23 +89,6 @@ documentContainer.innerHTML = `<custom-style>
       --energy-solar-color: #ff9800;
       --energy-non-fossil-color: #0f9d58;
 
-      --rgb-energy-solar-color: 255, 152, 0;
-
-      /*
-        Paper-styles color.html dependency is stripped on build.
-        When a default paper-style color is used, it needs to be copied
-        from paper-styles/color.html to here.
-      */
-
-      --paper-grey-50: #fafafa; /* default for: --mwc-switch-unchecked-button-color */
-      --paper-grey-200: #eeeeee;  /* for ha-date-picker-style */
-      --paper-grey-500: #9e9e9e;  /* --label-badge-grey */
-
-      /* for paper-slider */
-      --paper-green-400: #66bb6a;
-      --paper-blue-400: #42a5f5;
-      --paper-orange-400: #ffa726;
-
       /* opacity for dark text on a light background */
       --dark-divider-opacity: 0.12;
       --dark-disabled-opacity: 0.38; /* or hint text or icon */
@@ -117,9 +101,6 @@ documentContainer.innerHTML = `<custom-style>
       --light-secondary-opacity: 0.7;
       --light-primary-opacity: 1.0;
 
-      /* set our slider style */
-      --ha-slider-pin-font-size: 15px;
-
       /* rgb */
       --rgb-primary-color: 3, 169, 244;
       --rgb-accent-color: 255, 152, 0;

src/resources/styles.ts

@@ -52,8 +52,7 @@ export const derivedStyles = {
   "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)",
+  "slider-track-color": "var(--scrollbar-thumb-color)",
   "label-badge-background-color": "var(--card-background-color)",
   "label-badge-text-color": "rgba(var(--rgb-primary-text-color), 0.8)",
   "paper-listbox-background-color": "var(--card-background-color)",
@@ -67,7 +66,7 @@ export const derivedStyles = {
   "paper-slider-pin-start-color": "var(--slider-color)",
   "paper-slider-active-color": "var(--slider-color)",
   "paper-slider-secondary-color": "var(--slider-secondary-color)",
-  "paper-slider-container-color": "var(--slider-bar-color)",
+  "paper-slider-container-color": "var(--slider-track-color)",
   "data-table-background-color": "var(--card-background-color)",
   "markdown-code-background-color": "var(--primary-background-color)",
   "mdc-theme-primary": "var(--primary-color)",