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

Update color variables (#26403)

Browse Source
This commit is contained in:
Bram Kragten 2025-08-06 12:42:21 +02:00 committed by GitHub
parent cdfd6431c3
commit 4e969ccf09
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 333 additions and 308 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/buttons/ha-progress-button.ts
View File

@ -117,7 +117,7 @@ export class HaProgressButton extends LitElement {
} }
ha-svg-icon { ha-svg-icon {
color: var(--white); color: var(--white-color);
} }
`; `;
} }

104
src/components/ha-button.ts
View File

@ -78,61 +78,101 @@ export class HaButton extends Button {
} }
:host([variant="brand"]) { :host([variant="brand"]) {
--color-fill-normal-active: var(--color-fill-primary-normal-active); --button-color-fill-normal-active: var(
--color-fill-normal-hover: var(--color-fill-primary-normal-hover); --ha-color-fill-primary-normal-active
--color-fill-loud-active: var(--color-fill-primary-loud-active); );
--color-fill-loud-hover: var(--color-fill-primary-loud-hover); --button-color-fill-normal-hover: var(
--ha-color-fill-primary-normal-hover
);
--button-color-fill-loud-active: var(
--ha-color-fill-primary-loud-active
);
--button-color-fill-loud-hover: var(
--ha-color-fill-primary-loud-hover
);
} }
:host([variant="neutral"]) { :host([variant="neutral"]) {
--color-fill-normal-active: var(--color-fill-neutral-normal-active); --button-color-fill-normal-active: var(
--color-fill-normal-hover: var(--color-fill-neutral-normal-hover); --ha-color-fill-neutral-normal-active
--color-fill-loud-active: var(--color-fill-neutral-loud-active); );
--color-fill-loud-hover: var(--color-fill-neutral-loud-hover); --button-color-fill-normal-hover: var(
--ha-color-fill-neutral-normal-hover
);
--button-color-fill-loud-active: var(
--ha-color-fill-neutral-loud-active
);
--button-color-fill-loud-hover: var(
--ha-color-fill-neutral-loud-hover
);
} }
:host([variant="success"]) { :host([variant="success"]) {
--color-fill-normal-active: var(--color-fill-success-normal-active); --button-color-fill-normal-active: var(
--color-fill-normal-hover: var(--color-fill-success-normal-hover); --ha-color-fill-success-normal-active
--color-fill-loud-active: var(--color-fill-success-loud-active); );
--color-fill-loud-hover: var(--color-fill-success-loud-hover); --button-color-fill-normal-hover: var(
--ha-color-fill-success-normal-hover
);
--button-color-fill-loud-active: var(
--ha-color-fill-success-loud-active
);
--button-color-fill-loud-hover: var(
--ha-color-fill-success-loud-hover
);
} }
:host([variant="warning"]) { :host([variant="warning"]) {
--color-fill-normal-active: var(--color-fill-warning-normal-active); --button-color-fill-normal-active: var(
--color-fill-normal-hover: var(--color-fill-warning-normal-hover); --ha-color-fill-warning-normal-active
--color-fill-loud-active: var(--color-fill-warning-loud-active); );
--color-fill-loud-hover: var(--color-fill-warning-loud-hover); --button-color-fill-normal-hover: var(
--ha-color-fill-warning-normal-hover
);
--button-color-fill-loud-active: var(
--ha-color-fill-warning-loud-active
);
--button-color-fill-loud-hover: var(
--ha-color-fill-warning-loud-hover
);
} }
:host([variant="danger"]) { :host([variant="danger"]) {
--color-fill-normal-active: var(--color-fill-danger-normal-active); --button-color-fill-normal-active: var(
--color-fill-normal-hover: var(--color-fill-danger-normal-hover); --ha-color-fill-danger-normal-active
--color-fill-loud-active: var(--color-fill-danger-loud-active); );
--color-fill-loud-hover: var(--color-fill-danger-loud-hover); --button-color-fill-normal-hover: var(
--ha-color-fill-danger-normal-hover
);
--button-color-fill-loud-active: var(
--ha-color-fill-danger-loud-active
);
--button-color-fill-loud-hover: var(
--ha-color-fill-danger-loud-hover
);
} }
:host([appearance~="plain"]) .button { :host([appearance~="plain"]) .button {
color: var(--wa-color-on-normal); color: var(--wa-color-on-normal);
} }
:host([appearance~="plain"]) .button.disabled { :host([appearance~="plain"]) .button.disabled {
background-color: var(--transparent-none); background-color: transparent;
color: var(--color-on-disabled-quiet); color: var(--ha-color-on-disabled-quiet);
} }
:host([appearance~="outlined"]) .button.disabled { :host([appearance~="outlined"]) .button.disabled {
background-color: var(--transparent-none); background-color: transparent;
color: var(--color-on-disabled-quiet); color: var(--ha-color-on-disabled-quiet);
} }
@media (hover: hover) { @media (hover: hover) {
:host([appearance~="filled"]) :host([appearance~="filled"])
.button:not(.disabled):not(.loading):hover { .button:not(.disabled):not(.loading):hover {
background-color: var(--color-fill-normal-hover); background-color: var(--button-color-fill-normal-hover);
} }
:host([appearance~="accent"]) :host([appearance~="accent"])
.button:not(.disabled):not(.loading):hover { .button:not(.disabled):not(.loading):hover {
background-color: var(--color-fill-loud-hover); background-color: var(--button-color-fill-loud-hover);
} }
:host([appearance~="plain"]) :host([appearance~="plain"])
.button:not(.disabled):not(.loading):hover { .button:not(.disabled):not(.loading):hover {
@ -141,11 +181,11 @@ export class HaButton extends Button {
} }
:host([appearance~="filled"]) :host([appearance~="filled"])
.button:not(.disabled):not(.loading):active { .button:not(.disabled):not(.loading):active {
background-color: var(--color-fill-normal-active); background-color: var(--button-color-fill-normal-active);
} }
:host([appearance~="filled"]) .button.disabled { :host([appearance~="filled"]) .button.disabled {
background-color: var(--color-fill-disabled-normal-resting); background-color: var(--ha-color-fill-disabled-normal-resting);
color: var(--color-on-disabled-normal); color: var(--ha-color-on-disabled-normal);
} }
:host([appearance~="accent"]) .button { :host([appearance~="accent"]) .button {
@ -156,11 +196,11 @@ export class HaButton extends Button {
} }
:host([appearance~="accent"]) :host([appearance~="accent"])
.button:not(.disabled):not(.loading):active { .button:not(.disabled):not(.loading):active {
background-color: var(--color-fill-loud-active); background-color: var(--button-color-fill-loud-active);
} }
:host([appearance~="accent"]) .button.disabled { :host([appearance~="accent"]) .button.disabled {
background-color: var(--color-fill-disabled-loud-resting); background-color: var(--ha-color-fill-disabled-loud-resting);
color: var(--color-on-disabled-loud); color: var(--ha-color-on-disabled-loud);
} }
:host([loading]) { :host([loading]) {

6
src/resources/theme/color/color.globals.ts
View File

@ -5,14 +5,14 @@ import { coreColorVariables } from "./core.globals";
export const colorStyles = css` export const colorStyles = css`
html { html {
/* text */ /* text */
--primary-text-color: var(--color-text-primary); --primary-text-color: var(--ha-color-text-primary);
--secondary-text-color: var(--color-text-secondary); --secondary-text-color: var(--ha-color-text-secondary);
--text-primary-color: #ffffff; --text-primary-color: #ffffff;
--text-light-primary-color: #212121; --text-light-primary-color: #212121;
--disabled-text-color: #bdbdbd; --disabled-text-color: #bdbdbd;
/* main interface colors */ /* main interface colors */
--primary-color: var(--color-primary-40); --primary-color: var(--ha-color-primary-40);
--dark-primary-color: #0288d1; --dark-primary-color: #0288d1;
--darker-primary-color: #016194; --darker-primary-color: #016194;
--light-primary-color: #b3e5fc; --light-primary-color: #b3e5fc;

114
src/resources/theme/color/core.globals.ts
View File

@ -10,74 +10,70 @@ import { extractVars } from "../../../common/style/derived-css-vars";
*/ */
export const coreColorStyles = css` export const coreColorStyles = css`
html { html {
--white: #ffffff;
--black: #000000;
--transparent-none: rgba(255, 255, 255, 0);
/* primary */ /* primary */
--color-primary-05: #001721; --ha-color-primary-05: #001721;
--color-primary-10: #002e3e; --ha-color-primary-10: #002e3e;
--color-primary-20: #004156; --ha-color-primary-20: #004156;
--color-primary-30: #006787; --ha-color-primary-30: #006787;
--color-primary-40: #009ac7; --ha-color-primary-40: #009ac7;
--color-primary-50: #18bcf2; --ha-color-primary-50: #18bcf2;
--color-primary-60: #37c8fd; --ha-color-primary-60: #37c8fd;
--color-primary-70: #7bd4fb; --ha-color-primary-70: #7bd4fb;
--color-primary-80: #b9e6fc; --ha-color-primary-80: #b9e6fc;
--color-primary-90: #dff3fc; --ha-color-primary-90: #dff3fc;
--color-primary-95: #eff9fe; --ha-color-primary-95: #eff9fe;
/* neutral */ /* neutral */
--color-neutral-05: #141414; --ha-color-neutral-05: #141414;
--color-neutral-10: #202020; --ha-color-neutral-10: #202020;
--color-neutral-20: #363636; --ha-color-neutral-20: #363636;
--color-neutral-30: #4a4a4a; --ha-color-neutral-30: #4a4a4a;
--color-neutral-40: #5e5e5e; --ha-color-neutral-40: #5e5e5e;
--color-neutral-50: #7a7a7a; --ha-color-neutral-50: #7a7a7a;
--color-neutral-60: #989898; --ha-color-neutral-60: #989898;
--color-neutral-70: #b1b1b1; --ha-color-neutral-70: #b1b1b1;
--color-neutral-80: #b1b1b1; --ha-color-neutral-80: #b1b1b1;
--color-neutral-90: #e6e6e6; --ha-color-neutral-90: #e6e6e6;
--color-neutral-95: #f3f3f3; --ha-color-neutral-95: #f3f3f3;
/* orange */ /* orange */
--color-orange-05: #280700; --ha-color-orange-05: #280700;
--color-orange-10: #3b0f00; --ha-color-orange-10: #3b0f00;
--color-orange-20: #5e1c00; --ha-color-orange-20: #5e1c00;
--color-orange-30: #7e2900; --ha-color-orange-30: #7e2900;
--color-orange-40: #9d3800; --ha-color-orange-40: #9d3800;
--color-orange-50: #c94e00; --ha-color-orange-50: #c94e00;
--color-orange-60: #f36d00; --ha-color-orange-60: #f36d00;
--color-orange-70: #ff9342; --ha-color-orange-70: #ff9342;
--color-orange-80: #ffbb89; --ha-color-orange-80: #ffbb89;
--color-orange-90: #ffe0c8; --ha-color-orange-90: #ffe0c8;
--color-orange-95: #fff0e4; --ha-color-orange-95: #fff0e4;
/* red */ /* red */
--color-red-05: #2a040b; --ha-color-red-05: #2a040b;
--color-red-10: #3e0913; --ha-color-red-10: #3e0913;
--color-red-20: #631323; --ha-color-red-20: #631323;
--color-red-30: #8a132c; --ha-color-red-30: #8a132c;
--color-red-40: #b30532; --ha-color-red-40: #b30532;
--color-red-50: #dc3146; --ha-color-red-50: #dc3146;
--color-red-60: #f3676c; --ha-color-red-60: #f3676c;
--color-red-70: #fd8f90; --ha-color-red-70: #fd8f90;
--color-red-80: #ffb8b6; --ha-color-red-80: #ffb8b6;
--color-red-90: #ffdedc; --ha-color-red-90: #ffdedc;
--color-red-95: #fff0ef; --ha-color-red-95: #fff0ef;
/* green */ /* green */
--color-green-05: #031608; --ha-color-green-05: #031608;
--color-green-10: #052310; --ha-color-green-10: #052310;
--color-green-20: #0a3a1d; --ha-color-green-20: #0a3a1d;
--color-green-30: #0a5027; --ha-color-green-30: #0a5027;
--color-green-40: #036730; --ha-color-green-40: #036730;
--color-green-50: #00883c; --ha-color-green-50: #00883c;
--color-green-60: #00ac49; --ha-color-green-60: #00ac49;
--color-green-70: #5dc36f; --ha-color-green-70: #5dc36f;
--color-green-80: #93da98; --ha-color-green-80: #93da98;
--color-green-90: #c2f2c1; --ha-color-green-90: #c2f2c1;
--color-green-95: #e3f9e3; --ha-color-green-95: #e3f9e3;
} }
`; `;

323
src/resources/theme/color/semantic.globals.ts
View File

@ -7,289 +7,278 @@ import { css } from "lit";
*/ */
export const semanticColorStyles = css` export const semanticColorStyles = css`
html { html {
--color-overlay-modal: rgba(0, 0, 0, 0.25); --ha-color-focus: var(--ha-color-orange-60);
--color-focus: var(--color-orange-60);
/* surface */
--color-surface-lower: var(--color-neutral-90);
--color-surface-low: var(--color-neutral-95);
--color-surface-default: var(--white);
/* text */ /* text */
--color-text-primary: var(--color-neutral-05); --ha-color-text-primary: var(--ha-color-neutral-05);
--color-text-secondary: var(--color-neutral-40); --ha-color-text-secondary: var(--ha-color-neutral-40);
--color-text-disabled: var(--color-neutral-60); --ha-color-text-disabled: var(--ha-color-neutral-60);
--color-text-link: var(--color-primary-40); --ha-color-text-link: var(--ha-color-primary-40);
/* border primary */ /* border primary */
--color-border-quiet: var(--color-primary-80); --ha-color-border-quiet: var(--ha-color-primary-80);
--color-border-normal: var(--color-primary-70); --ha-color-border-normal: var(--ha-color-primary-70);
--color-border-loud: var(--color-primary-40); --ha-color-border-loud: var(--ha-color-primary-40);
/* border neutral */ /* border neutral */
--color-border-neutral-quiet: var(--color-neutral-80); --ha-color-border-neutral-quiet: var(--ha-color-neutral-80);
--color-border-neutral-normal: var(--color-neutral-60); --ha-color-border-neutral-normal: var(--ha-color-neutral-60);
--color-border-neutral-loud: var(--color-neutral-40); --ha-color-border-neutral-loud: var(--ha-color-neutral-40);
/* border danger */ /* border danger */
--color-border-danger-quiet: var(--color-red-80); --ha-color-border-danger-quiet: var(--ha-color-red-80);
--color-border-danger-normal: var(--color-red-70); --ha-color-border-danger-normal: var(--ha-color-red-70);
--color-border-danger-loud: var(--color-red-40); --ha-color-border-danger-loud: var(--ha-color-red-40);
/* border warning */ /* border warning */
--color-border-warning-quiet: var(--color-orange-80); --ha-color-border-warning-quiet: var(--ha-color-orange-80);
--color-border-warning-normal: var(--color-orange-70); --ha-color-border-warning-normal: var(--ha-color-orange-70);
--color-border-warning-loud: var(--color-orange-40); --ha-color-border-warning-loud: var(--ha-color-orange-40);
/* border success */ /* border success */
--color-border-success-quiet: var(--color-green-80); --ha-color-border-success-quiet: var(--ha-color-green-80);
--color-border-success-normal: var(--color-green-70); --ha-color-border-success-normal: var(--ha-color-green-70);
--color-border-success-loud: var(--color-green-40); --ha-color-border-success-loud: var(--ha-color-green-40);
/* fill primary quiet */ /* fill primary quiet */
--color-fill-primary-quiet-resting: var(--color-primary-95); --ha-color-fill-primary-quiet-resting: var(--ha-color-primary-95);
--color-fill-primary-quiet-hover: var(--color-primary-90); --ha-color-fill-primary-quiet-hover: var(--ha-color-primary-90);
--color-fill-primary-quiet-active: var(--color-primary-95); --ha-color-fill-primary-quiet-active: var(--ha-color-primary-95);
/* fill primary normal */ /* fill primary normal */
--color-fill-primary-normal-resting: var(--color-primary-90); --ha-color-fill-primary-normal-resting: var(--ha-color-primary-90);
--color-fill-primary-normal-hover: var(--color-primary-80); --ha-color-fill-primary-normal-hover: var(--ha-color-primary-80);
--color-fill-primary-normal-active: var(--color-primary-90); --ha-color-fill-primary-normal-active: var(--ha-color-primary-90);
/* fill primary loud */ /* fill primary loud */
--color-fill-primary-loud-resting: var(--color-primary-40); --ha-color-fill-primary-loud-resting: var(--ha-color-primary-40);
--color-fill-primary-loud-hover: var(--color-primary-30); --ha-color-fill-primary-loud-hover: var(--ha-color-primary-30);
--color-fill-primary-loud-active: var(--color-primary-40); --ha-color-fill-primary-loud-active: var(--ha-color-primary-40);
/* fill neutral quiet */ /* fill neutral quiet */
--color-fill-neutral-quiet-resting: var(--color-neutral-95); --ha-color-fill-neutral-quiet-resting: var(--ha-color-neutral-95);
--color-fill-neutral-quiet-hover: var(--color-neutral-90); --ha-color-fill-neutral-quiet-hover: var(--ha-color-neutral-90);
--color-fill-neutral-quiet-active: var(--color-neutral-95); --ha-color-fill-neutral-quiet-active: var(--ha-color-neutral-95);
/* fill neutral normal */ /* fill neutral normal */
--color-fill-neutral-normal-resting: var(--color-neutral-90); --ha-color-fill-neutral-normal-resting: var(--ha-color-neutral-90);
--color-fill-neutral-normal-hover: var(--color-neutral-80); --ha-color-fill-neutral-normal-hover: var(--ha-color-neutral-80);
--color-fill-neutral-normal-active: var(--color-neutral-90); --ha-color-fill-neutral-normal-active: var(--ha-color-neutral-90);
/* fill neutral loud */ /* fill neutral loud */
--color-fill-neutral-loud-resting: var(--color-neutral-40); --ha-color-fill-neutral-loud-resting: var(--ha-color-neutral-40);
--color-fill-neutral-loud-hover: var(--color-neutral-30); --ha-color-fill-neutral-loud-hover: var(--ha-color-neutral-30);
--color-fill-neutral-loud-active: var(--color-neutral-40); --ha-color-fill-neutral-loud-active: var(--ha-color-neutral-40);
/* fill disabled quiet */ /* fill disabled quiet */
--color-fill-disabled-quiet-resting: var(--color-neutral-95); --ha-color-fill-disabled-quiet-resting: var(--ha-color-neutral-95);
/* fill disabled normal */ /* fill disabled normal */
--color-fill-disabled-normal-resting: var(--color-neutral-95); --ha-color-fill-disabled-normal-resting: var(--ha-color-neutral-95);
/* fill disabled loud */ /* fill disabled loud */
--color-fill-disabled-loud-resting: var(--color-neutral-80); --ha-color-fill-disabled-loud-resting: var(--ha-color-neutral-80);
/* fill danger quiet */ /* fill danger quiet */
--color-fill-danger-quiet-resting: var(--color-red-95); --ha-color-fill-danger-quiet-resting: var(--ha-color-red-95);
--color-fill-danger-quiet-hover: var(--color-red-90); --ha-color-fill-danger-quiet-hover: var(--ha-color-red-90);
--color-fill-danger-quiet-active: var(--color-red-95); --ha-color-fill-danger-quiet-active: var(--ha-color-red-95);
/* fill danger normal */ /* fill danger normal */
--color-fill-danger-normal-resting: var(--color-red-90); --ha-color-fill-danger-normal-resting: var(--ha-color-red-90);
--color-fill-danger-normal-hover: var(--color-red-80); --ha-color-fill-danger-normal-hover: var(--ha-color-red-80);
--color-fill-danger-normal-active: var(--color-red-90); --ha-color-fill-danger-normal-active: var(--ha-color-red-90);
/* fill danger loud */ /* fill danger loud */
--color-fill-danger-loud-resting: var(--color-red-50); --ha-color-fill-danger-loud-resting: var(--ha-color-red-50);
--color-fill-danger-loud-hover: var(--color-red-40); --ha-color-fill-danger-loud-hover: var(--ha-color-red-40);
--color-fill-danger-loud-active: var(--color-red-50); --ha-color-fill-danger-loud-active: var(--ha-color-red-50);
/* fill warning quiet */ /* fill warning quiet */
--color-fill-warning-quiet-resting: var(--color-orange-95); --ha-color-fill-warning-quiet-resting: var(--ha-color-orange-95);
--color-fill-warning-quiet-hover: var(--color-orange-90); --ha-color-fill-warning-quiet-hover: var(--ha-color-orange-90);
--color-fill-warning-quiet-active: var(--color-orange-95); --ha-color-fill-warning-quiet-active: var(--ha-color-orange-95);
/* fill warning normal */ /* fill warning normal */
--color-fill-warning-normal-resting: var(--color-orange-90); --ha-color-fill-warning-normal-resting: var(--ha-color-orange-90);
--color-fill-warning-normal-hover: var(--color-orange-80); --ha-color-fill-warning-normal-hover: var(--ha-color-orange-80);
--color-fill-warning-normal-active: var(--color-orange-90); --ha-color-fill-warning-normal-active: var(--ha-color-orange-90);
/* fill warning loud */ /* fill warning loud */
--color-fill-warning-loud-resting: var(--color-orange-70); --ha-color-fill-warning-loud-resting: var(--ha-color-orange-70);
--color-fill-warning-loud-hover: var(--color-orange-50); --ha-color-fill-warning-loud-hover: var(--ha-color-orange-50);
--color-fill-warning-loud-active: var(--color-orange-70); --ha-color-fill-warning-loud-active: var(--ha-color-orange-70);
/* fill success quiet */ /* fill success quiet */
--color-fill-success-quiet-resting: var(--color-green-95); --ha-color-fill-success-quiet-resting: var(--ha-color-green-95);
--color-fill-success-quiet-hover: var(--color-green-90); --ha-color-fill-success-quiet-hover: var(--ha-color-green-90);
--color-fill-success-quiet-active: var(--color-green-95); --ha-color-fill-success-quiet-active: var(--ha-color-green-95);
/* fill success normal */ /* fill success normal */
--color-fill-success-normal-resting: var(--color-green-90); --ha-color-fill-success-normal-resting: var(--ha-color-green-90);
--color-fill-success-normal-hover: var(--color-green-80); --ha-color-fill-success-normal-hover: var(--ha-color-green-80);
--color-fill-success-normal-active: var(--color-green-90); --ha-color-fill-success-normal-active: var(--ha-color-green-90);
/* fill success loud */ /* fill success loud */
--color-fill-success-loud-resting: var(--color-green-50); --ha-color-fill-success-loud-resting: var(--ha-color-green-50);
--color-fill-success-loud-hover: var(--color-green-40); --ha-color-fill-success-loud-hover: var(--ha-color-green-40);
--color-fill-success-loud-active: var(--color-green-50); --ha-color-fill-success-loud-active: var(--ha-color-green-50);
/* on primary */ /* on primary */
--color-on-primary-quiet: var(--color-primary-50); --ha-color-on-primary-quiet: var(--ha-color-primary-50);
--color-on-primary-normal: var(--color-primary-40); --ha-color-on-primary-normal: var(--ha-color-primary-40);
--color-on-primary-loud: var(--white); --ha-color-on-primary-loud: var(--white-color);
/* on neutral */ /* on neutral */
--color-on-neutral-quiet: var(--color-neutral-50); --ha-color-on-neutral-quiet: var(--ha-color-neutral-50);
--color-on-neutral-normal: var(--color-neutral-40); --ha-color-on-neutral-normal: var(--ha-color-neutral-40);
--color-on-neutral-loud: var(--white); --ha-color-on-neutral-loud: var(--white-color);
/* on disabled */ /* on disabled */
--color-on-disabled-quiet: var(--color-neutral-80); --ha-color-on-disabled-quiet: var(--ha-color-neutral-80);
--color-on-disabled-normal: var(--color-neutral-70); --ha-color-on-disabled-normal: var(--ha-color-neutral-70);
--color-on-disabled-loud: var(--color-neutral-95); --ha-color-on-disabled-loud: var(--ha-color-neutral-95);
/* on danger */ /* on danger */
--color-on-danger-quiet: var(--color-red-50); --ha-color-on-danger-quiet: var(--ha-color-red-50);
--color-on-danger-normal: var(--color-red-40); --ha-color-on-danger-normal: var(--ha-color-red-40);
--color-on-danger-loud: var(--white); --ha-color-on-danger-loud: var(--white-color);
/* on warning */ /* on warning */
--color-on-warning-quiet: var(--color-orange-50); --ha-color-on-warning-quiet: var(--ha-color-orange-50);
--color-on-warning-normal: var(--color-orange-40); --ha-color-on-warning-normal: var(--ha-color-orange-40);
--color-on-warning-loud: var(--white); --ha-color-on-warning-loud: var(--white-color);
/* on success */ /* on success */
--color-on-success-quiet: var(--color-green-50); --ha-color-on-success-quiet: var(--ha-color-green-50);
--color-on-success-normal: var(--color-green-40); --ha-color-on-success-normal: var(--ha-color-green-40);
--color-on-success-loud: var(--white); --ha-color-on-success-loud: var(--white-color);
} }
`; `;
export const darkSemanticColorStyles = css` export const darkSemanticColorStyles = css`
html { html {
/* surface */
--color-surface-lower: var(--black);
--color-surface-low: var(--color-neutral-05);
--color-surface-default: var(--color-neutral-10);
/* text */ /* text */
--color-text-primary: var(--white); --ha-color-text-primary: var(--white-color);
--color-text-secondary: var(--color-neutral-80); --ha-color-text-secondary: var(--ha-color-neutral-80);
--color-text-link: var(--color-primary-60); --ha-color-text-link: var(--ha-color-primary-60);
/* border primary */ /* border primary */
--color-border-normal: var(--color-primary-50); --ha-color-border-normal: var(--ha-color-primary-50);
/* border neutral */ /* border neutral */
--color-border-neutral-quiet: var(--color-neutral-40); --ha-color-border-neutral-quiet: var(--ha-color-neutral-40);
--color-border-neutral-normal: var(--color-neutral-50); --ha-color-border-neutral-normal: var(--ha-color-neutral-50);
--color-border-neutral-loud: var(--color-neutral-70); --ha-color-border-neutral-loud: var(--ha-color-neutral-70);
/* border danger */ /* border danger */
--color-border-danger-normal: var(--color-red-50); --ha-color-border-danger-normal: var(--ha-color-red-50);
--color-border-danger-loud: var(--color-red-50); --ha-color-border-danger-loud: var(--ha-color-red-50);
/* border warning */ /* border warning */
--color-border-warning-normal: var(--color-orange-50); --ha-color-border-warning-normal: var(--ha-color-orange-50);
--color-border-warning-loud: var(--color-orange-50); --ha-color-border-warning-loud: var(--ha-color-orange-50);
/* fill primary quiet */ /* fill primary quiet */
--color-fill-primary-quiet-resting: var(--color-primary-05); --ha-color-fill-primary-quiet-resting: var(--ha-color-primary-05);
--color-fill-primary-quiet-hover: var(--color-primary-10); --ha-color-fill-primary-quiet-hover: var(--ha-color-primary-10);
--color-fill-primary-quiet-active: var(--color-primary-05); --ha-color-fill-primary-quiet-active: var(--ha-color-primary-05);
/* fill primary normal */ /* fill primary normal */
--color-fill-primary-normal-resting: var(--color-primary-10); --ha-color-fill-primary-normal-resting: var(--ha-color-primary-10);
--color-fill-primary-normal-hover: var(--color-primary-20); --ha-color-fill-primary-normal-hover: var(--ha-color-primary-20);
--color-fill-primary-normal-active: var(--color-primary-10); --ha-color-fill-primary-normal-active: var(--ha-color-primary-10);
/* fill neutral quiet */ /* fill neutral quiet */
--color-fill-neutral-quiet-resting: var(--color-neutral-05); --ha-color-fill-neutral-quiet-resting: var(--ha-color-neutral-05);
--color-fill-neutral-quiet-hover: var(--color-neutral-10); --ha-color-fill-neutral-quiet-hover: var(--ha-color-neutral-10);
--color-fill-neutral-quiet-active: var(--color-neutral-00); --ha-color-fill-neutral-quiet-active: var(--ha-color-neutral-00);
/* fill neutral normal */ /* fill neutral normal */
--color-fill-neutral-normal-resting: var(--color-neutral-10); --ha-color-fill-neutral-normal-resting: var(--ha-color-neutral-10);
--color-fill-neutral-normal-hover: var(--color-neutral-20); --ha-color-fill-neutral-normal-hover: var(--ha-color-neutral-20);
--color-fill-neutral-normal-active: var(--color-neutral-10); --ha-color-fill-neutral-normal-active: var(--ha-color-neutral-10);
/* fill disabled quiet */ /* fill disabled quiet */
--color-fill-disabled-quiet-resting: var(--color-neutral-10); --ha-color-fill-disabled-quiet-resting: var(--ha-color-neutral-10);
/* fill disabled normal */ /* fill disabled normal */
--color-fill-disabled-normal-resting: var(--color-neutral-20); --ha-color-fill-disabled-normal-resting: var(--ha-color-neutral-20);
/* fill disabled loud */ /* fill disabled loud */
--color-fill-disabled-loud-resting: var(--color-neutral-30); --ha-color-fill-disabled-loud-resting: var(--ha-color-neutral-30);
/* fill danger quiet */ /* fill danger quiet */
--color-fill-danger-quiet-resting: var(--color-red-05); --ha-color-fill-danger-quiet-resting: var(--ha-color-red-05);
--color-fill-danger-quiet-hover: var(--color-red-10); --ha-color-fill-danger-quiet-hover: var(--ha-color-red-10);
--color-fill-danger-quiet-active: var(--color-red-05); --ha-color-fill-danger-quiet-active: var(--ha-color-red-05);
/* fill danger normal */ /* fill danger normal */
--color-fill-danger-normal-resting: var(--color-red-10); --ha-color-fill-danger-normal-resting: var(--ha-color-red-10);
--color-fill-danger-normal-hover: var(--color-red-20); --ha-color-fill-danger-normal-hover: var(--ha-color-red-20);
--color-fill-danger-normal-active: var(--color-red-10); --ha-color-fill-danger-normal-active: var(--ha-color-red-10);
/* fill danger loud */ /* fill danger loud */
--color-fill-danger-loud-resting: var(--color-red-40); --ha-color-fill-danger-loud-resting: var(--ha-color-red-40);
--color-fill-danger-loud-hover: var(--color-red-30); --ha-color-fill-danger-loud-hover: var(--ha-color-red-30);
--color-fill-danger-loud-active: var(--color-red-40); --ha-color-fill-danger-loud-active: var(--ha-color-red-40);
/* fill warning quiet */ /* fill warning quiet */
--color-fill-warning-quiet-resting: var(--color-orange-05); --ha-color-fill-warning-quiet-resting: var(--ha-color-orange-05);
--color-fill-warning-quiet-hover: var(--color-orange-10); --ha-color-fill-warning-quiet-hover: var(--ha-color-orange-10);
--color-fill-warning-quiet-active: var(--color-orange-05); --ha-color-fill-warning-quiet-active: var(--ha-color-orange-05);
/* fill warning normal */ /* fill warning normal */
--color-fill-warning-normal-resting: var(--color-orange-10); --ha-color-fill-warning-normal-resting: var(--ha-color-orange-10);
--color-fill-warning-normal-hover: var(--color-orange-20); --ha-color-fill-warning-normal-hover: var(--ha-color-orange-20);
--color-fill-warning-normal-active: var(--color-orange-10); --ha-color-fill-warning-normal-active: var(--ha-color-orange-10);
/* fill warning loud */ /* fill warning loud */
--color-fill-warning-loud-resting: var(--color-orange-40); --ha-color-fill-warning-loud-resting: var(--ha-color-orange-40);
--color-fill-warning-loud-hover: var(--color-orange-30); --ha-color-fill-warning-loud-hover: var(--ha-color-orange-30);
--color-fill-warning-loud-active: var(--color-orange-40); --ha-color-fill-warning-loud-active: var(--ha-color-orange-40);
/* fill success quiet */ /* fill success quiet */
--color-fill-success-quiet-resting: var(--color-green-05); --ha-color-fill-success-quiet-resting: var(--ha-color-green-05);
--color-fill-success-quiet-hover: var(--color-green-10); --ha-color-fill-success-quiet-hover: var(--ha-color-green-10);
--color-fill-success-quiet-active: var(--color-green-05); --ha-color-fill-success-quiet-active: var(--ha-color-green-05);
/* fill success normal */ /* fill success normal */
--color-fill-success-normal-resting: var(--color-green-10); --ha-color-fill-success-normal-resting: var(--ha-color-green-10);
--color-fill-success-normal-hover: var(--color-green-20); --ha-color-fill-success-normal-hover: var(--ha-color-green-20);
--color-fill-success-normal-active: var(--color-green-10); --ha-color-fill-success-normal-active: var(--ha-color-green-10);
/* fill success loud */ /* fill success loud */
--color-fill-success-loud-resting: var(--color-green-40); --ha-color-fill-success-loud-resting: var(--ha-color-green-40);
--color-fill-success-loud-hover: var(--color-green-30); --ha-color-fill-success-loud-hover: var(--ha-color-green-30);
--color-fill-success-loud-active: var(--color-green-40); --ha-color-fill-success-loud-active: var(--ha-color-green-40);
/* on primary */ /* on primary */
--color-on-primary-quiet: var(--color-primary-70); --ha-color-on-primary-quiet: var(--ha-color-primary-70);
--color-on-primary-normal: var(--color-primary-60); --ha-color-on-primary-normal: var(--ha-color-primary-60);
/* on neutral */ /* on neutral */
--color-on-neutral-quiet: var(--color-neutral-70); --ha-color-on-neutral-quiet: var(--ha-color-neutral-70);
--color-on-neutral-normal: var(--color-neutral-60); --ha-color-on-neutral-normal: var(--ha-color-neutral-60);
--color-on-neutral-loud: var(--white); --ha-color-on-neutral-loud: var(--white-color);
/* on disabled */ /* on disabled */
--color-on-disabled-quiet: var(--color-neutral-40); --ha-color-on-disabled-quiet: var(--ha-color-neutral-40);
--color-on-disabled-normal: var(--color-neutral-50); --ha-color-on-disabled-normal: var(--ha-color-neutral-50);
--color-on-disabled-loud: var(--color-neutral-50); --ha-color-on-disabled-loud: var(--ha-color-neutral-50);
/* on danger */ /* on danger */
--color-on-danger-quiet: var(--color-red-70); --ha-color-on-danger-quiet: var(--ha-color-red-70);
--color-on-danger-normal: var(--color-red-60); --ha-color-on-danger-normal: var(--ha-color-red-60);
--color-on-danger-loud: var(--white); --ha-color-on-danger-loud: var(--white-color);
/* on warning */ /* on warning */
--color-on-warning-quiet: var(--color-orange-70); --ha-color-on-warning-quiet: var(--ha-color-orange-70);
--color-on-warning-normal: var(--color-orange-60); --ha-color-on-warning-normal: var(--ha-color-orange-60);
--color-on-warning-loud: var(--white); --ha-color-on-warning-loud: var(--white-color);
/* on success */ /* on success */
--color-on-success-quiet: var(--color-green-70); --ha-color-on-success-quiet: var(--ha-color-green-70);
--color-on-success-normal: var(--color-green-60); --ha-color-on-success-normal: var(--ha-color-green-60);
--color-on-success-loud: var(--white); --ha-color-on-success-loud: var(--white-color);
} }
`; `;

92
src/resources/theme/color/wa.globals.ts
View File

@ -2,56 +2,56 @@ import { css } from "lit";
export const waColorStyles = css` export const waColorStyles = css`
html { html {
--wa-color-brand-fill-loud: var(--color-fill-primary-loud-resting); --wa-color-brand-fill-loud: var(--ha-color-fill-primary-loud-resting);
--wa-color-brand-fill-normal: var(--color-fill-primary-normal-resting); --wa-color-brand-fill-normal: var(--ha-color-fill-primary-normal-resting);
--wa-color-brand-fill-quiet: var(--color-fill-primary-quiet-resting); --wa-color-brand-fill-quiet: var(--ha-color-fill-primary-quiet-resting);
--wa-color-brand-border-loud: var(--color-border-loud); --wa-color-brand-border-loud: var(--ha-color-border-loud);
--wa-color-brand-border-normal: var(--color-primary-50); --wa-color-brand-border-normal: var(--ha-color-primary-50);
--wa-color-brand-border-quiet: var(--color-border-quiet); --wa-color-brand-border-quiet: var(--ha-color-border-quiet);
--wa-color-brand-on-loud: var(--color-on-primary-loud); --wa-color-brand-on-loud: var(--ha-color-on-primary-loud);
--wa-color-brand-on-normal: var(--color-on-primary-normal); --wa-color-brand-on-normal: var(--ha-color-on-primary-normal);
--wa-color-brand-on-quiet: var(--color-on-primary-quiet); --wa-color-brand-on-quiet: var(--ha-color-on-primary-quiet);
--wa-color-neutral-fill-loud: var(--color-fill-neutral-loud-resting); --wa-color-neutral-fill-loud: var(--ha-color-fill-neutral-loud-resting);
--wa-color-neutral-fill-normal: var(--color-fill-neutral-normal-resting); --wa-color-neutral-fill-normal: var(--ha-color-fill-neutral-normal-resting);
--wa-color-neutral-fill-quiet: var(--color-fill-neutral-quiet-resting); --wa-color-neutral-fill-quiet: var(--ha-color-fill-neutral-quiet-resting);
--wa-color-neutral-border-loud: var(--color-border-neutral-loud); --wa-color-neutral-border-loud: var(--ha-color-border-neutral-loud);
--wa-color-neutral-border-normal: var(--color-border-neutral-normal); --wa-color-neutral-border-normal: var(--ha-color-border-neutral-normal);
--wa-color-neutral-border-quiet: var(--color-border-neutral-quiet); --wa-color-neutral-border-quiet: var(--ha-color-border-neutral-quiet);
--wa-color-neutral-on-loud: var(--color-on-neutral-loud); --wa-color-neutral-on-loud: var(--ha-color-on-neutral-loud);
--wa-color-neutral-on-normal: var(--color-on-neutral-normal); --wa-color-neutral-on-normal: var(--ha-color-on-neutral-normal);
--wa-color-neutral-on-quiet: var(--color-on-neutral-quiet); --wa-color-neutral-on-quiet: var(--ha-color-on-neutral-quiet);
--wa-color-success-fill-loud: var(--color-fill-success-loud-resting); --wa-color-success-fill-loud: var(--ha-color-fill-success-loud-resting);
--wa-color-success-fill-normal: var(--color-fill-success-normal-resting); --wa-color-success-fill-normal: var(--ha-color-fill-success-normal-resting);
--wa-color-success-fill-quiet: var(--color-fill-success-quiet-resting); --wa-color-success-fill-quiet: var(--ha-color-fill-success-quiet-resting);
--wa-color-success-border-loud: var(--color-border-success-loud); --wa-color-success-border-loud: var(--ha-color-border-success-loud);
--wa-color-success-border-normal: var(--color-border-success-normal); --wa-color-success-border-normal: var(--ha-color-border-success-normal);
--wa-color-success-border-quiet: var(--color-border-success-quiet); --wa-color-success-border-quiet: var(--ha-color-border-success-quiet);
--wa-color-success-on-loud: var(--color-on-success-loud); --wa-color-success-on-loud: var(--ha-color-on-success-loud);
--wa-color-success-on-normal: var(--color-on-success-normal); --wa-color-success-on-normal: var(--ha-color-on-success-normal);
--wa-color-success-on-quiet: var(--color-on-success-quiet); --wa-color-success-on-quiet: var(--ha-color-on-success-quiet);
--wa-color-warning-fill-loud: var(--color-fill-warning-loud-resting); --wa-color-warning-fill-loud: var(--ha-color-fill-warning-loud-resting);
--wa-color-warning-fill-normal: var(--color-fill-warning-normal-resting); --wa-color-warning-fill-normal: var(--ha-color-fill-warning-normal-resting);
--wa-color-warning-fill-quiet: var(--color-fill-warning-quiet-resting); --wa-color-warning-fill-quiet: var(--ha-color-fill-warning-quiet-resting);
--wa-color-warning-border-loud: var(--color-border-warning-loud); --wa-color-warning-border-loud: var(--ha-color-border-warning-loud);
--wa-color-warning-border-normal: var(--color-border-warning-normal); --wa-color-warning-border-normal: var(--ha-color-border-warning-normal);
--wa-color-warning-border-quiet: var(--color-border-warning-quiet); --wa-color-warning-border-quiet: var(--ha-color-border-warning-quiet);
--wa-color-warning-on-loud: var(--color-on-warning-loud); --wa-color-warning-on-loud: var(--ha-color-on-warning-loud);
--wa-color-warning-on-normal: var(--color-on-warning-normal); --wa-color-warning-on-normal: var(--ha-color-on-warning-normal);
--wa-color-warning-on-quiet: var(--color-on-warning-quiet); --wa-color-warning-on-quiet: var(--ha-color-on-warning-quiet);
--wa-color-danger-fill-loud: var(--color-fill-danger-loud-resting); --wa-color-danger-fill-loud: var(--ha-color-fill-danger-loud-resting);
--wa-color-danger-fill-normal: var(--color-fill-danger-normal-resting); --wa-color-danger-fill-normal: var(--ha-color-fill-danger-normal-resting);
--wa-color-danger-fill-quiet: var(--color-fill-danger-quiet-resting); --wa-color-danger-fill-quiet: var(--ha-color-fill-danger-quiet-resting);
--wa-color-danger-border-loud: var(--color-border-danger-loud); --wa-color-danger-border-loud: var(--ha-color-border-danger-loud);
--wa-color-danger-border-normal: var(--color-border-danger-normal); --wa-color-danger-border-normal: var(--ha-color-border-danger-normal);
--wa-color-danger-border-quiet: var(--color-border-danger-quiet); --wa-color-danger-border-quiet: var(--ha-color-border-danger-quiet);
--wa-color-danger-on-loud: var(--color-on-danger-loud); --wa-color-danger-on-loud: var(--ha-color-on-danger-loud);
--wa-color-danger-on-normal: var(--color-on-danger-normal); --wa-color-danger-on-normal: var(--ha-color-on-danger-normal);
--wa-color-danger-on-quiet: var(--color-on-danger-quiet); --wa-color-danger-on-quiet: var(--ha-color-on-danger-quiet);
--wa-focus-ring-color: var(--color-neutral-60); --wa-focus-ring-color: var(--ha-color-neutral-60);
} }
`; `;