jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 16:26:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use correct vars for gauge colors (#9727)

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
hassio/src/addon-view/info/hassio-addon-info.ts
View File

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

16
hassio/src/components/hassio-ansi-to-html.ts
View File

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

6
hassio/src/components/hassio-card-content.ts
View File

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

2
src/components/entity/ha-state-label-badge.ts
View File

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

19
src/components/ha-gauge.ts
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 { customElement, property, state } from "lit/decorators";
import { ifDefined } from "lit/directives/if-defined"; import { ifDefined } from "lit/directives/if-defined";
import { styleMap } from "lit/directives/style-map"; import { styleMap } from "lit/directives/style-map";
@ -75,9 +75,22 @@ export class Gauge extends LitElement {
this.levels this.levels
? this.levels ? this.levels
.sort((a, b) => a.level - b.level) .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); const angle = getAngle(level.level, this.min, this.max);
return svg`<path return svg`${firstPath}<path
stroke="${level.stroke}" stroke="${level.stroke}"
class="level" class="level"
d="M d="M

6
src/components/ha-slider.js
View File

@ -19,14 +19,14 @@ class HaSlider extends PaperSliderClass {
} }
.pin > .slider-knob > .slider-knob-inner { .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; line-height: normal;
cursor: pointer; cursor: pointer;
} }
.disabled.ring > .slider-knob > .slider-knob-inner { .disabled.ring > .slider-knob > .slider-knob-inner {
background-color: 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(--paper-grey-400)); border: 2px solid var(--paper-slider-disabled-knob-color, var(--disabled-text-color));
} }
.pin > .slider-knob > .slider-knob-inner::before { .pin > .slider-knob > .slider-knob-inner::before {

7
src/dialogs/more-info/controls/more-info-climate.ts
View File

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

7
src/dialogs/more-info/controls/more-info-humidifier.ts
View File

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

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

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

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

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

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

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

14
src/panels/lovelace/cards/hui-gauge-card.ts
View File

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

14
src/panels/lovelace/cards/hui-humidifier-card.ts
View File

@ -330,8 +330,8 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
} }
round-slider { 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); --round-slider-bar-color: var(--primary-color);
padding-bottom: 10%; padding-bottom: 10%;
} }
@ -377,16 +377,6 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
font-size: var(--name-font-size); 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 { text {
fill: var(--primary-text-color); fill: var(--primary-text-color);
} }

2
src/panels/lovelace/cards/hui-light-card.ts
View File

@ -297,7 +297,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
} }
round-slider { 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); --round-slider-bar-color: var(--primary-color);
padding-bottom: 10%; padding-bottom: 10%;
} }

2
src/panels/lovelace/cards/hui-thermostat-card.ts
View File

@ -513,7 +513,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
} }
round-slider { 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); --round-slider-bar-color: var(--mode-color);
padding-bottom: 10%; padding-bottom: 10%;
} }

31
src/resources/ha-style.ts
View File

@ -38,11 +38,11 @@ documentContainer.innerHTML = `<custom-style>
--scrollbar-thumb-color: rgb(194, 194, 194); --scrollbar-thumb-color: rgb(194, 194, 194);
--error-color: #db4437; --error-color: #db4437;
--warning-color: #FF9800; --warning-color: #ffa600;
--success-color: #0f9d58; --success-color: #43a047;
--info-color: #4285f4; --info-color: #039be5;
/* background and sidebar */ /* backgrounds */
--card-background-color: #ffffff; --card-background-color: #ffffff;
--primary-background-color: #fafafa; --primary-background-color: #fafafa;
--secondary-background-color: #e5e5e5; /* behind the cards on state */ --secondary-background-color: #e5e5e5; /* behind the cards on state */
@ -55,8 +55,9 @@ documentContainer.innerHTML = `<custom-style>
--label-badge-blue: #039be5; --label-badge-blue: #039be5;
--label-badge-green: #0DA035; --label-badge-green: #0DA035;
--label-badge-yellow: #f4b400; --label-badge-yellow: #f4b400;
--label-badge-grey: #9e9e9e;
/* states and badges */ /* states */
--state-icon-color: #44739e; --state-icon-color: #44739e;
/* an active state is anything that would require attention */ /* an active state is anything that would require attention */
--state-icon-active-color: #FDD835; --state-icon-active-color: #FDD835;
@ -88,23 +89,6 @@ documentContainer.innerHTML = `<custom-style>
--energy-solar-color: #ff9800; --energy-solar-color: #ff9800;
--energy-non-fossil-color: #0f9d58; --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 */ /* opacity for dark text on a light background */
--dark-divider-opacity: 0.12; --dark-divider-opacity: 0.12;
--dark-disabled-opacity: 0.38; /* or hint text or icon */ --dark-disabled-opacity: 0.38; /* or hint text or icon */
@ -117,9 +101,6 @@ documentContainer.innerHTML = `<custom-style>
--light-secondary-opacity: 0.7; --light-secondary-opacity: 0.7;
--light-primary-opacity: 1.0; --light-primary-opacity: 1.0;
/* set our slider style */
--ha-slider-pin-font-size: 15px;
/* rgb */ /* rgb */
--rgb-primary-color: 3, 169, 244; --rgb-primary-color: 3, 169, 244;
--rgb-accent-color: 255, 152, 0; --rgb-accent-color: 255, 152, 0;

5
src/resources/styles.ts
View File

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