jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use CSS colors for tile components (#14770)

Browse Source 
* Do not use rgb colors for tile components

* Fixes gallery

* Change tile color

* Do not use rgb colors in tile button
This commit is contained in:
Paul Bottein 2022-12-15 11:27:45 +01:00 committed by GitHub
parent 5b17c59a56
commit b18160d987
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 113 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
gallery/src/pages/components/ha-bar-slider.ts
View File

@ -142,7 +142,8 @@ export class DemoHaBarSlider extends LitElement {
}
.custom {
--slider-bar-color: #ffcf4c;
--slider-bar-background: #ffcf4c64;
--slider-bar-background: #ffcf4c;
--slider-bar-background-opacity: 0.2;
--slider-bar-thickness: 100px;
--slider-bar-border-radius: 24px;
}

4
gallery/src/pages/components/ha-bar-switch.ts
View File

@ -115,8 +115,8 @@ export class DemoHaBarSwitch extends LitElement {
font-weight: 600;
}
.custom {
--switch-bar-color-on: var(--rgb-green-color);
--switch-bar-color-off: var(--rgb-red-color);
--switch-bar-on-color: rgb(var(--rgb-green-color));
--switch-bar-off-color: rgb(var(--rgb-red-color));
--switch-bar-thickness: 100px;
--switch-bar-border-radius: 24px;
--switch-bar-padding: 6px;

13
src/common/color/compute-color.ts
View File

@ -1,5 +1,3 @@
import { hex2rgb } from "./convert-color";
export const THEME_COLORS = new Set([
"primary",
"accent",
@ -27,16 +25,9 @@ export const THEME_COLORS = new Set([
"white",
]);
export function computeRgbColor(color: string): string {
export function computeCssColor(color: string): string {
if (THEME_COLORS.has(color)) {
return `var(--rgb-${color}-color)`;
}
if (color.startsWith("#")) {
try {
return hex2rgb(color).join(", ");
} catch (err) {
return "";
}
return `rgb(var(--rgb-${color}-color))`;
}
return color;
}

4
src/components/ha-bar-slider.ts
View File

@ -272,7 +272,8 @@ export class HaBarSlider extends LitElement {
:host {
display: block;
--slider-bar-color: rgb(var(--rgb-primary-color));
--slider-bar-background: rgba(var(--rgb-disabled-color), 0.2);
--slider-bar-background: rgb(var(--rgb-disabled-color));
--slider-bar-background-opacity: 0.2;
--slider-bar-thickness: 40px;
--slider-bar-border-radius: 10px;
height: var(--slider-bar-thickness);
@ -301,6 +302,7 @@ export class HaBarSlider extends LitElement {
height: 100%;
width: 100%;
background: var(--slider-bar-background);
opacity: var(--slider-bar-background-opacity);
}
.slider .slider-track-bar {
--border-radius: var(--slider-bar-border-radius);

27
src/components/ha-bar-switch.ts
View File

@ -74,6 +74,7 @@ export class HaBarSwitch extends LitElement {
protected render(): TemplateResult {
return html`
<div class="switch">
<div class="background"></div>
<div class="button" aria-hidden="true">
${this.checked
? this.pathOn
@ -91,8 +92,9 @@ export class HaBarSwitch extends LitElement {
return css`
:host {
display: block;
--switch-bar-color-on: var(--rgb-primary-color);
--switch-bar-color-off: var(--rgb-disabled-color);
--switch-bar-on-color: rgb(var(--rgb-primary-color));
--switch-bar-off-color: rgb(var(--rgb-disabled-color));
--switch-bar-background-opacity: 0.2;
--switch-bar-thickness: 40px;
--switch-bar-border-radius: 12px;
--switch-bar-padding: 4px;
@ -109,11 +111,20 @@ export class HaBarSwitch extends LitElement {
height: 100%;
width: 100%;
border-radius: var(--switch-bar-border-radius);
background-color: rgba(var(--switch-bar-color-off), 0.3);
overflow: hidden;
padding: var(--switch-bar-padding);
transition: background-color 180ms ease-in-out;
display: flex;
}
.switch .background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: var(--switch-bar-off-color);
transition: background-color 180ms ease-in-out;
opacity: var(--switch-bar-background-opacity);
}
.switch .button {
width: 50%;
height: 100%;
@ -123,18 +134,18 @@ export class HaBarSwitch extends LitElement {
);
transition: transform 180ms ease-in-out,
background-color 180ms ease-in-out;
background-color: rgb(var(--switch-bar-color-off));
background-color: var(--switch-bar-off-color);
color: white;
display: flex;
align-items: center;
justify-content: center;
}
:host([checked]) .switch {
background-color: rgba(var(--switch-bar-color-on), 0.3);
:host([checked]) .switch .background {
background-color: var(--switch-bar-on-color);
}
:host([checked]) .switch .button {
transform: translateX(100%);
background-color: rgb(var(--switch-bar-color-on));
background-color: var(--switch-bar-on-color);
}
:host([reversed]) .switch {
flex-direction: row-reverse;

37
src/components/tile/ha-tile-button.ts
View File

@ -41,7 +41,9 @@ export class HaTileButton extends LitElement {
@touchcancel=${this.handleRippleDeactivate}
>
<slot></slot>
${this._shouldRenderRipple ? html`<mwc-ripple></mwc-ripple>` : ""}
${this._shouldRenderRipple && !this.disabled
? html`<mwc-ripple></mwc-ripple>`
: ""}
</button>
`;
}
@ -79,9 +81,10 @@ export class HaTileButton extends LitElement {
static get styles(): CSSResultGroup {
return css`
:host {
--icon-color: rgb(var(--color, var(--rgb-primary-text-color)));
--bg-color: rgba(var(--color, var(--rgb-disabled-color)), 0.2);
--mdc-ripple-color: rgba(var(--color, var(--rgb-disabled-color)));
--tile-button-icon-color: var(--primary-text-color);
--tile-button-background-color: rgb(var(--rgb-disabled-color));
--tile-button-background-opacity: 0.2;
--mdc-ripple-color: var(--tile-button-background-color);
width: 40px;
height: 40px;
-webkit-tap-highlight-color: transparent;
@ -97,25 +100,37 @@ export class HaTileButton extends LitElement {
height: 100%;
border-radius: 10px;
border: none;
background-color: var(--bg-color);
transition: background-color 280ms ease-in-out, transform 180ms ease-out;
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 0;
outline: none;
overflow: hidden;
background: none;
}
.button::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: var(--tile-button-background-color);
transition: background-color 180ms ease-in-out,
opacity 180ms ease-in-out;
opacity: var(--tile-button-background-opacity);
}
.button ::slotted(*) {
--mdc-icon-size: 20px;
color: var(--icon-color);
transition: color 180ms ease-in-out;
color: var(--tile-button-icon-color);
pointer-events: none;
}
.button:disabled {
cursor: not-allowed;
background-color: rgba(var(--rgb-disabled-color), 0.2);
}
.button:disabled ::slotted(*) {
color: rgb(var(--rgb-disabled-color));
--tile-button-background-color: rgb(var(--rgb-disabled-color));
--tile-button-icon-color: var(--disabled-text-color);
--tile-button-background-opacity: 0.2;
}
`;
}

20
src/components/tile/ha-tile-icon.ts
View File

@ -22,10 +22,20 @@ export class HaTileIcon extends LitElement {
static get styles(): CSSResultGroup {
return css`
:host {
--icon-color: rgb(var(--color));
--shape-color: rgba(var(--color), 0.2);
--tile-icon-color: rgb(var(--rgb-disabled-color));
--mdc-icon-size: 24px;
}
.shape::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: var(--tile-icon-color);
transition: background-color 180ms ease-in-out;
opacity: 0.2;
}
.shape {
position: relative;
width: 40px;
@ -34,13 +44,13 @@ export class HaTileIcon extends LitElement {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--shape-color);
transition: background-color 180ms ease-in-out, color 180ms ease-in-out;
transition: color 180ms ease-in-out;
overflow: hidden;
}
.shape ha-icon,
.shape ha-svg-icon {
display: flex;
color: var(--icon-color);
color: var(--tile-icon-color);
transition: color 180ms ease-in-out;
}
`;

10
src/components/tile/ha-tile-slider.ts
View File

@ -48,12 +48,16 @@ export class HaTileSlider extends LitElement {
return css`
ha-bar-slider {
--slider-bar-color: var(
--tile-slider-bar-color,
--tile-slider-color,
rgb(var(--rgb-primary-color))
);
--slider-bar-background: var(
--tile-slider-bar-background,
rgba(var(--rgb-disabled-color), 0.2)
--tile-slider-background,
rgb(var(--rgb-disabled-color))
);
--slider-bar-background-opacity: var(
--tile-slider-background-opacity,
0.2
);
--slider-bar-thickness: 40px;
--slider-bar-border-radius: 10px;

48
src/panels/lovelace/cards/hui-tile-card.ts
View File

@ -4,7 +4,7 @@ import { HassEntity } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import { computeRgbColor } from "../../../common/color/compute-color";
import { computeCssColor } from "../../../common/color/compute-color";
import { hsv2rgb, rgb2hsv } from "../../../common/color/convert-color";
import { DOMAINS_TOGGLE } from "../../../common/const";
import { computeDomain } from "../../../common/entity/compute_domain";
@ -131,7 +131,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
private _computeStateColor = memoize((entity: HassEntity, color?: string) => {
// Use custom color if active
if (color) {
return stateActive(entity) ? computeRgbColor(color) : undefined;
return stateActive(entity) ? computeCssColor(color) : undefined;
}
// Use default color for person/device_tracker because color is on the badge
@ -139,7 +139,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
computeDomain(entity.entity_id) === "person" ||
computeDomain(entity.entity_id) === "device_tracker"
) {
return "var(--rgb-state-default-color)";
return "rgb(var(--rgb-state-default-color))";
}
// Use light color if the light support rgb
@ -158,11 +158,13 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
hsvColor[1] = 0.4;
}
}
return hsv2rgb(hsvColor).join(",");
return `rgb(${hsv2rgb(hsvColor).join(",")})`;
}
// Fallback to state color
return stateColorCss(entity) ?? "var(--rgb-state-default-color)";
const stateColor =
stateColorCss(entity) ?? "var(--rgb-state-default-color)";
return `rgb(${stateColor})`;
});
private _computeStateDisplay(stateObj: HassEntity): TemplateResult | string {
@ -226,11 +228,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
if (!stateObj) {
return html`
<ha-card
style=${styleMap({
"--tile-color": `var(--rgb-disabled-color)`,
})}
>
<ha-card class="disabled">
<div class="tile">
<div class="icon-container">
<ha-tile-icon class="icon" .iconPath=${mdiHelp}></ha-tile-icon>
@ -243,6 +241,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
></ha-tile-badge>
</div>
<ha-tile-info
class="info"
.primary=${entityId}
secondary=${this.hass.localize("ui.card.tile.not_found")}
></ha-tile-info>
@ -311,6 +310,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
: null}
</div>
<ha-tile-info
class="info"
.primary=${name}
.secondary=${stateDisplay}
role="button"
@ -364,13 +364,16 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
static get styles(): CSSResultGroup {
return css`
:host {
--tile-color: var(--rgb-state-inactive-color);
--tile-color: rgb(var(--rgb-state-inactive-color));
--tile-tap-padding: 6px;
-webkit-tap-highlight-color: transparent;
}
ha-card {
height: 100%;
}
ha-card.disabled {
--tile-color: rgb(var(--rgb-disabled-color));
}
[role="button"] {
cursor: pointer;
}
@ -394,8 +397,7 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
transition: transform 180ms ease-in-out;
}
.icon-container .icon {
--icon-color: rgb(var(--tile-color));
--shape-color: rgba(var(--tile-color), 0.2);
--tile-icon-color: var(--tile-color);
}
.icon-container .badge {
position: absolute;
@ -406,16 +408,28 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
.icon-container[role="button"]:active {
transform: scale(1.2);
}
ha-tile-info {
.info {
position: relative;
padding: var(--tile-tap-padding);
flex: 1;
min-width: 0;
min-height: 40px;
border-radius: calc(var(--ha-card-border-radius, 10px) - 2px);
transition: background-color 180ms ease-in-out;
}
ha-tile-info:focus-visible {
background-color: rgba(var(--tile-color), 0.1);
.info::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-radius: calc(var(--ha-card-border-radius, 10px) - 2px);
background-color: transparent;
opacity: 0.1;
transition: background-color ease-in-out 180ms;
}
.info:focus-visible::before {
background-color: var(--tile-color);
}
`;
}

6
src/panels/lovelace/components/hui-color-picker.ts
View File

@ -3,7 +3,7 @@ import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import {
computeRgbColor,
computeCssColor,
THEME_COLORS,
} from "../../../common/color/compute-color";
import { fireEvent } from "../../../common/dom/fire_event";
@ -76,7 +76,7 @@ export class HuiColorPicker extends LitElement {
<span
class="circle-color"
style=${styleMap({
"--circle-color": computeRgbColor(color),
"--circle-color": computeCssColor(color),
})}
></span>
`;
@ -86,7 +86,7 @@ export class HuiColorPicker extends LitElement {
return css`
.circle-color {
display: block;
background-color: rgb(var(--circle-color));
background-color: var(--circle-color);
border-radius: 10px;
width: 20px;
height: 20px;

5
src/panels/lovelace/tile-features/hui-light-brightness-tile-feature.ts
View File

@ -73,8 +73,9 @@ class HuiLightBrightnessTileFeature
static get styles() {
return css`
ha-tile-slider {
--tile-slider-bar-color: rgb(var(--tile-color));
--tile-slider-bar-background: rgba(var(--tile-color), 0.2);
--tile-slider-color: var(--tile-color);
--tile-slider-background: var(--tile-color);
--tile-slider-background-opacity: 0.2;
}
.container {
padding: 0 12px 12px 12px;