Use correct vars for gauge colors (#9727)

This commit is contained in:
Bram Kragten 2021-08-12 15:59:42 +02:00 committed by GitHub
parent e11532ae92
commit d8929074b5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 57 additions and 87 deletions

View File

@ -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;

View File

@ -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);

View File

@ -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;

View File

@ -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);
}
`;
}

View File

@ -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

View File

@ -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 {

View File

@ -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;
}

View File

@ -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;
}

View File

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

View File

@ -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")

View File

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

View File

@ -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;
}

View File

@ -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);
}

View File

@ -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%;
}

View File

@ -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%;
}

View File

@ -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;

View File

@ -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)",