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 {
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"]) {
--color-fill-normal-active: var(--color-fill-primary-normal-active);
--color-fill-normal-hover: var(--color-fill-primary-normal-hover);
--color-fill-loud-active: var(--color-fill-primary-loud-active);
--color-fill-loud-hover: var(--color-fill-primary-loud-hover);
--button-color-fill-normal-active: var(
--ha-color-fill-primary-normal-active
);
--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"]) {
--color-fill-normal-active: var(--color-fill-neutral-normal-active);
--color-fill-normal-hover: var(--color-fill-neutral-normal-hover);
--color-fill-loud-active: var(--color-fill-neutral-loud-active);
--color-fill-loud-hover: var(--color-fill-neutral-loud-hover);
--button-color-fill-normal-active: var(
--ha-color-fill-neutral-normal-active
);
--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"]) {
--color-fill-normal-active: var(--color-fill-success-normal-active);
--color-fill-normal-hover: var(--color-fill-success-normal-hover);
--color-fill-loud-active: var(--color-fill-success-loud-active);
--color-fill-loud-hover: var(--color-fill-success-loud-hover);
--button-color-fill-normal-active: var(
--ha-color-fill-success-normal-active
);
--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"]) {
--color-fill-normal-active: var(--color-fill-warning-normal-active);
--color-fill-normal-hover: var(--color-fill-warning-normal-hover);
--color-fill-loud-active: var(--color-fill-warning-loud-active);
--color-fill-loud-hover: var(--color-fill-warning-loud-hover);
--button-color-fill-normal-active: var(
--ha-color-fill-warning-normal-active
);
--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"]) {
--color-fill-normal-active: var(--color-fill-danger-normal-active);
--color-fill-normal-hover: var(--color-fill-danger-normal-hover);
--color-fill-loud-active: var(--color-fill-danger-loud-active);
--color-fill-loud-hover: var(--color-fill-danger-loud-hover);
--button-color-fill-normal-active: var(
--ha-color-fill-danger-normal-active
);
--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 {
color: var(--wa-color-on-normal);
}
:host([appearance~="plain"]) .button.disabled {
background-color: var(--transparent-none);
color: var(--color-on-disabled-quiet);
background-color: transparent;
color: var(--ha-color-on-disabled-quiet);
}
:host([appearance~="outlined"]) .button.disabled {
background-color: var(--transparent-none);
color: var(--color-on-disabled-quiet);
background-color: transparent;
color: var(--ha-color-on-disabled-quiet);
}
@media (hover: hover) {
:host([appearance~="filled"])
.button:not(.disabled):not(.loading):hover {
background-color: var(--color-fill-normal-hover);
background-color: var(--button-color-fill-normal-hover);
}
:host([appearance~="accent"])
.button:not(.disabled):not(.loading):hover {
background-color: var(--color-fill-loud-hover);
background-color: var(--button-color-fill-loud-hover);
}
:host([appearance~="plain"])
.button:not(.disabled):not(.loading):hover {
@ -141,11 +181,11 @@ export class HaButton extends Button {
}
:host([appearance~="filled"])
.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 {
background-color: var(--color-fill-disabled-normal-resting);
color: var(--color-on-disabled-normal);
background-color: var(--ha-color-fill-disabled-normal-resting);
color: var(--ha-color-on-disabled-normal);
}
:host([appearance~="accent"]) .button {
@ -156,11 +196,11 @@ export class HaButton extends Button {
}
:host([appearance~="accent"])
.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 {
background-color: var(--color-fill-disabled-loud-resting);
color: var(--color-on-disabled-loud);
background-color: var(--ha-color-fill-disabled-loud-resting);
color: var(--ha-color-on-disabled-loud);
}
: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`
html {
/* text */
--primary-text-color: var(--color-text-primary);
--secondary-text-color: var(--color-text-secondary);
--primary-text-color: var(--ha-color-text-primary);
--secondary-text-color: var(--ha-color-text-secondary);
--text-primary-color: #ffffff;
--text-light-primary-color: #212121;
--disabled-text-color: #bdbdbd;
/* main interface colors */
--primary-color: var(--color-primary-40);
--primary-color: var(--ha-color-primary-40);
--dark-primary-color: #0288d1;
--darker-primary-color: #016194;
--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`
html {
--white: #ffffff;
--black: #000000;
--transparent-none: rgba(255, 255, 255, 0);
/* primary */
--color-primary-05: #001721;
--color-primary-10: #002e3e;
--color-primary-20: #004156;
--color-primary-30: #006787;
--color-primary-40: #009ac7;
--color-primary-50: #18bcf2;
--color-primary-60: #37c8fd;
--color-primary-70: #7bd4fb;
--color-primary-80: #b9e6fc;
--color-primary-90: #dff3fc;
--color-primary-95: #eff9fe;
--ha-color-primary-05: #001721;
--ha-color-primary-10: #002e3e;
--ha-color-primary-20: #004156;
--ha-color-primary-30: #006787;
--ha-color-primary-40: #009ac7;
--ha-color-primary-50: #18bcf2;
--ha-color-primary-60: #37c8fd;
--ha-color-primary-70: #7bd4fb;
--ha-color-primary-80: #b9e6fc;
--ha-color-primary-90: #dff3fc;
--ha-color-primary-95: #eff9fe;
/* neutral */
--color-neutral-05: #141414;
--color-neutral-10: #202020;
--color-neutral-20: #363636;
--color-neutral-30: #4a4a4a;
--color-neutral-40: #5e5e5e;
--color-neutral-50: #7a7a7a;
--color-neutral-60: #989898;
--color-neutral-70: #b1b1b1;
--color-neutral-80: #b1b1b1;
--color-neutral-90: #e6e6e6;
--color-neutral-95: #f3f3f3;
--ha-color-neutral-05: #141414;
--ha-color-neutral-10: #202020;
--ha-color-neutral-20: #363636;
--ha-color-neutral-30: #4a4a4a;
--ha-color-neutral-40: #5e5e5e;
--ha-color-neutral-50: #7a7a7a;
--ha-color-neutral-60: #989898;
--ha-color-neutral-70: #b1b1b1;
--ha-color-neutral-80: #b1b1b1;
--ha-color-neutral-90: #e6e6e6;
--ha-color-neutral-95: #f3f3f3;
/* orange */
--color-orange-05: #280700;
--color-orange-10: #3b0f00;
--color-orange-20: #5e1c00;
--color-orange-30: #7e2900;
--color-orange-40: #9d3800;
--color-orange-50: #c94e00;
--color-orange-60: #f36d00;
--color-orange-70: #ff9342;
--color-orange-80: #ffbb89;
--color-orange-90: #ffe0c8;
--color-orange-95: #fff0e4;
--ha-color-orange-05: #280700;
--ha-color-orange-10: #3b0f00;
--ha-color-orange-20: #5e1c00;
--ha-color-orange-30: #7e2900;
--ha-color-orange-40: #9d3800;
--ha-color-orange-50: #c94e00;
--ha-color-orange-60: #f36d00;
--ha-color-orange-70: #ff9342;
--ha-color-orange-80: #ffbb89;
--ha-color-orange-90: #ffe0c8;
--ha-color-orange-95: #fff0e4;
/* red */
--color-red-05: #2a040b;
--color-red-10: #3e0913;
--color-red-20: #631323;
--color-red-30: #8a132c;
--color-red-40: #b30532;
--color-red-50: #dc3146;
--color-red-60: #f3676c;
--color-red-70: #fd8f90;
--color-red-80: #ffb8b6;
--color-red-90: #ffdedc;
--color-red-95: #fff0ef;
--ha-color-red-05: #2a040b;
--ha-color-red-10: #3e0913;
--ha-color-red-20: #631323;
--ha-color-red-30: #8a132c;
--ha-color-red-40: #b30532;
--ha-color-red-50: #dc3146;
--ha-color-red-60: #f3676c;
--ha-color-red-70: #fd8f90;
--ha-color-red-80: #ffb8b6;
--ha-color-red-90: #ffdedc;
--ha-color-red-95: #fff0ef;
/* green */
--color-green-05: #031608;
--color-green-10: #052310;
--color-green-20: #0a3a1d;
--color-green-30: #0a5027;
--color-green-40: #036730;
--color-green-50: #00883c;
--color-green-60: #00ac49;
--color-green-70: #5dc36f;
--color-green-80: #93da98;
--color-green-90: #c2f2c1;
--color-green-95: #e3f9e3;
--ha-color-green-05: #031608;
--ha-color-green-10: #052310;
--ha-color-green-20: #0a3a1d;
--ha-color-green-30: #0a5027;
--ha-color-green-40: #036730;
--ha-color-green-50: #00883c;
--ha-color-green-60: #00ac49;
--ha-color-green-70: #5dc36f;
--ha-color-green-80: #93da98;
--ha-color-green-90: #c2f2c1;
--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`
html {
--color-overlay-modal: rgba(0, 0, 0, 0.25);
--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);
--ha-color-focus: var(--ha-color-orange-60);
/* text */
--color-text-primary: var(--color-neutral-05);
--color-text-secondary: var(--color-neutral-40);
--color-text-disabled: var(--color-neutral-60);
--color-text-link: var(--color-primary-40);
--ha-color-text-primary: var(--ha-color-neutral-05);
--ha-color-text-secondary: var(--ha-color-neutral-40);
--ha-color-text-disabled: var(--ha-color-neutral-60);
--ha-color-text-link: var(--ha-color-primary-40);
/* border primary */
--color-border-quiet: var(--color-primary-80);
--color-border-normal: var(--color-primary-70);
--color-border-loud: var(--color-primary-40);
--ha-color-border-quiet: var(--ha-color-primary-80);
--ha-color-border-normal: var(--ha-color-primary-70);
--ha-color-border-loud: var(--ha-color-primary-40);
/* border neutral */
--color-border-neutral-quiet: var(--color-neutral-80);
--color-border-neutral-normal: var(--color-neutral-60);
--color-border-neutral-loud: var(--color-neutral-40);
--ha-color-border-neutral-quiet: var(--ha-color-neutral-80);
--ha-color-border-neutral-normal: var(--ha-color-neutral-60);
--ha-color-border-neutral-loud: var(--ha-color-neutral-40);
/* border danger */
--color-border-danger-quiet: var(--color-red-80);
--color-border-danger-normal: var(--color-red-70);
--color-border-danger-loud: var(--color-red-40);
--ha-color-border-danger-quiet: var(--ha-color-red-80);
--ha-color-border-danger-normal: var(--ha-color-red-70);
--ha-color-border-danger-loud: var(--ha-color-red-40);
/* border warning */
--color-border-warning-quiet: var(--color-orange-80);
--color-border-warning-normal: var(--color-orange-70);
--color-border-warning-loud: var(--color-orange-40);
--ha-color-border-warning-quiet: var(--ha-color-orange-80);
--ha-color-border-warning-normal: var(--ha-color-orange-70);
--ha-color-border-warning-loud: var(--ha-color-orange-40);
/* border success */
--color-border-success-quiet: var(--color-green-80);
--color-border-success-normal: var(--color-green-70);
--color-border-success-loud: var(--color-green-40);
--ha-color-border-success-quiet: var(--ha-color-green-80);
--ha-color-border-success-normal: var(--ha-color-green-70);
--ha-color-border-success-loud: var(--ha-color-green-40);
/* fill primary quiet */
--color-fill-primary-quiet-resting: var(--color-primary-95);
--color-fill-primary-quiet-hover: var(--color-primary-90);
--color-fill-primary-quiet-active: var(--color-primary-95);
--ha-color-fill-primary-quiet-resting: var(--ha-color-primary-95);
--ha-color-fill-primary-quiet-hover: var(--ha-color-primary-90);
--ha-color-fill-primary-quiet-active: var(--ha-color-primary-95);
/* fill primary normal */
--color-fill-primary-normal-resting: var(--color-primary-90);
--color-fill-primary-normal-hover: var(--color-primary-80);
--color-fill-primary-normal-active: var(--color-primary-90);
--ha-color-fill-primary-normal-resting: var(--ha-color-primary-90);
--ha-color-fill-primary-normal-hover: var(--ha-color-primary-80);
--ha-color-fill-primary-normal-active: var(--ha-color-primary-90);
/* fill primary loud */
--color-fill-primary-loud-resting: var(--color-primary-40);
--color-fill-primary-loud-hover: var(--color-primary-30);
--color-fill-primary-loud-active: var(--color-primary-40);
--ha-color-fill-primary-loud-resting: var(--ha-color-primary-40);
--ha-color-fill-primary-loud-hover: var(--ha-color-primary-30);
--ha-color-fill-primary-loud-active: var(--ha-color-primary-40);
/* fill neutral quiet */
--color-fill-neutral-quiet-resting: var(--color-neutral-95);
--color-fill-neutral-quiet-hover: var(--color-neutral-90);
--color-fill-neutral-quiet-active: var(--color-neutral-95);
--ha-color-fill-neutral-quiet-resting: var(--ha-color-neutral-95);
--ha-color-fill-neutral-quiet-hover: var(--ha-color-neutral-90);
--ha-color-fill-neutral-quiet-active: var(--ha-color-neutral-95);
/* fill neutral normal */
--color-fill-neutral-normal-resting: var(--color-neutral-90);
--color-fill-neutral-normal-hover: var(--color-neutral-80);
--color-fill-neutral-normal-active: var(--color-neutral-90);
--ha-color-fill-neutral-normal-resting: var(--ha-color-neutral-90);
--ha-color-fill-neutral-normal-hover: var(--ha-color-neutral-80);
--ha-color-fill-neutral-normal-active: var(--ha-color-neutral-90);
/* fill neutral loud */
--color-fill-neutral-loud-resting: var(--color-neutral-40);
--color-fill-neutral-loud-hover: var(--color-neutral-30);
--color-fill-neutral-loud-active: var(--color-neutral-40);
--ha-color-fill-neutral-loud-resting: var(--ha-color-neutral-40);
--ha-color-fill-neutral-loud-hover: var(--ha-color-neutral-30);
--ha-color-fill-neutral-loud-active: var(--ha-color-neutral-40);
/* 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 */
--color-fill-disabled-normal-resting: var(--color-neutral-95);
--ha-color-fill-disabled-normal-resting: var(--ha-color-neutral-95);
/* 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 */
--color-fill-danger-quiet-resting: var(--color-red-95);
--color-fill-danger-quiet-hover: var(--color-red-90);
--color-fill-danger-quiet-active: var(--color-red-95);
--ha-color-fill-danger-quiet-resting: var(--ha-color-red-95);
--ha-color-fill-danger-quiet-hover: var(--ha-color-red-90);
--ha-color-fill-danger-quiet-active: var(--ha-color-red-95);
/* fill danger normal */
--color-fill-danger-normal-resting: var(--color-red-90);
--color-fill-danger-normal-hover: var(--color-red-80);
--color-fill-danger-normal-active: var(--color-red-90);
--ha-color-fill-danger-normal-resting: var(--ha-color-red-90);
--ha-color-fill-danger-normal-hover: var(--ha-color-red-80);
--ha-color-fill-danger-normal-active: var(--ha-color-red-90);
/* fill danger loud */
--color-fill-danger-loud-resting: var(--color-red-50);
--color-fill-danger-loud-hover: var(--color-red-40);
--color-fill-danger-loud-active: var(--color-red-50);
--ha-color-fill-danger-loud-resting: var(--ha-color-red-50);
--ha-color-fill-danger-loud-hover: var(--ha-color-red-40);
--ha-color-fill-danger-loud-active: var(--ha-color-red-50);
/* fill warning quiet */
--color-fill-warning-quiet-resting: var(--color-orange-95);
--color-fill-warning-quiet-hover: var(--color-orange-90);
--color-fill-warning-quiet-active: var(--color-orange-95);
--ha-color-fill-warning-quiet-resting: var(--ha-color-orange-95);
--ha-color-fill-warning-quiet-hover: var(--ha-color-orange-90);
--ha-color-fill-warning-quiet-active: var(--ha-color-orange-95);
/* fill warning normal */
--color-fill-warning-normal-resting: var(--color-orange-90);
--color-fill-warning-normal-hover: var(--color-orange-80);
--color-fill-warning-normal-active: var(--color-orange-90);
--ha-color-fill-warning-normal-resting: var(--ha-color-orange-90);
--ha-color-fill-warning-normal-hover: var(--ha-color-orange-80);
--ha-color-fill-warning-normal-active: var(--ha-color-orange-90);
/* fill warning loud */
--color-fill-warning-loud-resting: var(--color-orange-70);
--color-fill-warning-loud-hover: var(--color-orange-50);
--color-fill-warning-loud-active: var(--color-orange-70);
--ha-color-fill-warning-loud-resting: var(--ha-color-orange-70);
--ha-color-fill-warning-loud-hover: var(--ha-color-orange-50);
--ha-color-fill-warning-loud-active: var(--ha-color-orange-70);
/* fill success quiet */
--color-fill-success-quiet-resting: var(--color-green-95);
--color-fill-success-quiet-hover: var(--color-green-90);
--color-fill-success-quiet-active: var(--color-green-95);
--ha-color-fill-success-quiet-resting: var(--ha-color-green-95);
--ha-color-fill-success-quiet-hover: var(--ha-color-green-90);
--ha-color-fill-success-quiet-active: var(--ha-color-green-95);
/* fill success normal */
--color-fill-success-normal-resting: var(--color-green-90);
--color-fill-success-normal-hover: var(--color-green-80);
--color-fill-success-normal-active: var(--color-green-90);
--ha-color-fill-success-normal-resting: var(--ha-color-green-90);
--ha-color-fill-success-normal-hover: var(--ha-color-green-80);
--ha-color-fill-success-normal-active: var(--ha-color-green-90);
/* fill success loud */
--color-fill-success-loud-resting: var(--color-green-50);
--color-fill-success-loud-hover: var(--color-green-40);
--color-fill-success-loud-active: var(--color-green-50);
--ha-color-fill-success-loud-resting: var(--ha-color-green-50);
--ha-color-fill-success-loud-hover: var(--ha-color-green-40);
--ha-color-fill-success-loud-active: var(--ha-color-green-50);
/* on primary */
--color-on-primary-quiet: var(--color-primary-50);
--color-on-primary-normal: var(--color-primary-40);
--color-on-primary-loud: var(--white);
--ha-color-on-primary-quiet: var(--ha-color-primary-50);
--ha-color-on-primary-normal: var(--ha-color-primary-40);
--ha-color-on-primary-loud: var(--white-color);
/* on neutral */
--color-on-neutral-quiet: var(--color-neutral-50);
--color-on-neutral-normal: var(--color-neutral-40);
--color-on-neutral-loud: var(--white);
--ha-color-on-neutral-quiet: var(--ha-color-neutral-50);
--ha-color-on-neutral-normal: var(--ha-color-neutral-40);
--ha-color-on-neutral-loud: var(--white-color);
/* on disabled */
--color-on-disabled-quiet: var(--color-neutral-80);
--color-on-disabled-normal: var(--color-neutral-70);
--color-on-disabled-loud: var(--color-neutral-95);
--ha-color-on-disabled-quiet: var(--ha-color-neutral-80);
--ha-color-on-disabled-normal: var(--ha-color-neutral-70);
--ha-color-on-disabled-loud: var(--ha-color-neutral-95);
/* on danger */
--color-on-danger-quiet: var(--color-red-50);
--color-on-danger-normal: var(--color-red-40);
--color-on-danger-loud: var(--white);
--ha-color-on-danger-quiet: var(--ha-color-red-50);
--ha-color-on-danger-normal: var(--ha-color-red-40);
--ha-color-on-danger-loud: var(--white-color);
/* on warning */
--color-on-warning-quiet: var(--color-orange-50);
--color-on-warning-normal: var(--color-orange-40);
--color-on-warning-loud: var(--white);
--ha-color-on-warning-quiet: var(--ha-color-orange-50);
--ha-color-on-warning-normal: var(--ha-color-orange-40);
--ha-color-on-warning-loud: var(--white-color);
/* on success */
--color-on-success-quiet: var(--color-green-50);
--color-on-success-normal: var(--color-green-40);
--color-on-success-loud: var(--white);
--ha-color-on-success-quiet: var(--ha-color-green-50);
--ha-color-on-success-normal: var(--ha-color-green-40);
--ha-color-on-success-loud: var(--white-color);
}
`;
export const darkSemanticColorStyles = css`
html {
/* surface */
--color-surface-lower: var(--black);
--color-surface-low: var(--color-neutral-05);
--color-surface-default: var(--color-neutral-10);
/* text */
--color-text-primary: var(--white);
--color-text-secondary: var(--color-neutral-80);
--color-text-link: var(--color-primary-60);
--ha-color-text-primary: var(--white-color);
--ha-color-text-secondary: var(--ha-color-neutral-80);
--ha-color-text-link: var(--ha-color-primary-60);
/* border primary */
--color-border-normal: var(--color-primary-50);
--ha-color-border-normal: var(--ha-color-primary-50);
/* border neutral */
--color-border-neutral-quiet: var(--color-neutral-40);
--color-border-neutral-normal: var(--color-neutral-50);
--color-border-neutral-loud: var(--color-neutral-70);
--ha-color-border-neutral-quiet: var(--ha-color-neutral-40);
--ha-color-border-neutral-normal: var(--ha-color-neutral-50);
--ha-color-border-neutral-loud: var(--ha-color-neutral-70);
/* border danger */
--color-border-danger-normal: var(--color-red-50);
--color-border-danger-loud: var(--color-red-50);
--ha-color-border-danger-normal: var(--ha-color-red-50);
--ha-color-border-danger-loud: var(--ha-color-red-50);
/* border warning */
--color-border-warning-normal: var(--color-orange-50);
--color-border-warning-loud: var(--color-orange-50);
--ha-color-border-warning-normal: var(--ha-color-orange-50);
--ha-color-border-warning-loud: var(--ha-color-orange-50);
/* fill primary quiet */
--color-fill-primary-quiet-resting: var(--color-primary-05);
--color-fill-primary-quiet-hover: var(--color-primary-10);
--color-fill-primary-quiet-active: var(--color-primary-05);
--ha-color-fill-primary-quiet-resting: var(--ha-color-primary-05);
--ha-color-fill-primary-quiet-hover: var(--ha-color-primary-10);
--ha-color-fill-primary-quiet-active: var(--ha-color-primary-05);
/* fill primary normal */
--color-fill-primary-normal-resting: var(--color-primary-10);
--color-fill-primary-normal-hover: var(--color-primary-20);
--color-fill-primary-normal-active: var(--color-primary-10);
--ha-color-fill-primary-normal-resting: var(--ha-color-primary-10);
--ha-color-fill-primary-normal-hover: var(--ha-color-primary-20);
--ha-color-fill-primary-normal-active: var(--ha-color-primary-10);
/* fill neutral quiet */
--color-fill-neutral-quiet-resting: var(--color-neutral-05);
--color-fill-neutral-quiet-hover: var(--color-neutral-10);
--color-fill-neutral-quiet-active: var(--color-neutral-00);
--ha-color-fill-neutral-quiet-resting: var(--ha-color-neutral-05);
--ha-color-fill-neutral-quiet-hover: var(--ha-color-neutral-10);
--ha-color-fill-neutral-quiet-active: var(--ha-color-neutral-00);
/* fill neutral normal */
--color-fill-neutral-normal-resting: var(--color-neutral-10);
--color-fill-neutral-normal-hover: var(--color-neutral-20);
--color-fill-neutral-normal-active: var(--color-neutral-10);
--ha-color-fill-neutral-normal-resting: var(--ha-color-neutral-10);
--ha-color-fill-neutral-normal-hover: var(--ha-color-neutral-20);
--ha-color-fill-neutral-normal-active: var(--ha-color-neutral-10);
/* 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 */
--color-fill-disabled-normal-resting: var(--color-neutral-20);
--ha-color-fill-disabled-normal-resting: var(--ha-color-neutral-20);
/* 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 */
--color-fill-danger-quiet-resting: var(--color-red-05);
--color-fill-danger-quiet-hover: var(--color-red-10);
--color-fill-danger-quiet-active: var(--color-red-05);
--ha-color-fill-danger-quiet-resting: var(--ha-color-red-05);
--ha-color-fill-danger-quiet-hover: var(--ha-color-red-10);
--ha-color-fill-danger-quiet-active: var(--ha-color-red-05);
/* fill danger normal */
--color-fill-danger-normal-resting: var(--color-red-10);
--color-fill-danger-normal-hover: var(--color-red-20);
--color-fill-danger-normal-active: var(--color-red-10);
--ha-color-fill-danger-normal-resting: var(--ha-color-red-10);
--ha-color-fill-danger-normal-hover: var(--ha-color-red-20);
--ha-color-fill-danger-normal-active: var(--ha-color-red-10);
/* fill danger loud */
--color-fill-danger-loud-resting: var(--color-red-40);
--color-fill-danger-loud-hover: var(--color-red-30);
--color-fill-danger-loud-active: var(--color-red-40);
--ha-color-fill-danger-loud-resting: var(--ha-color-red-40);
--ha-color-fill-danger-loud-hover: var(--ha-color-red-30);
--ha-color-fill-danger-loud-active: var(--ha-color-red-40);
/* fill warning quiet */
--color-fill-warning-quiet-resting: var(--color-orange-05);
--color-fill-warning-quiet-hover: var(--color-orange-10);
--color-fill-warning-quiet-active: var(--color-orange-05);
--ha-color-fill-warning-quiet-resting: var(--ha-color-orange-05);
--ha-color-fill-warning-quiet-hover: var(--ha-color-orange-10);
--ha-color-fill-warning-quiet-active: var(--ha-color-orange-05);
/* fill warning normal */
--color-fill-warning-normal-resting: var(--color-orange-10);
--color-fill-warning-normal-hover: var(--color-orange-20);
--color-fill-warning-normal-active: var(--color-orange-10);
--ha-color-fill-warning-normal-resting: var(--ha-color-orange-10);
--ha-color-fill-warning-normal-hover: var(--ha-color-orange-20);
--ha-color-fill-warning-normal-active: var(--ha-color-orange-10);
/* fill warning loud */
--color-fill-warning-loud-resting: var(--color-orange-40);
--color-fill-warning-loud-hover: var(--color-orange-30);
--color-fill-warning-loud-active: var(--color-orange-40);
--ha-color-fill-warning-loud-resting: var(--ha-color-orange-40);
--ha-color-fill-warning-loud-hover: var(--ha-color-orange-30);
--ha-color-fill-warning-loud-active: var(--ha-color-orange-40);
/* fill success quiet */
--color-fill-success-quiet-resting: var(--color-green-05);
--color-fill-success-quiet-hover: var(--color-green-10);
--color-fill-success-quiet-active: var(--color-green-05);
--ha-color-fill-success-quiet-resting: var(--ha-color-green-05);
--ha-color-fill-success-quiet-hover: var(--ha-color-green-10);
--ha-color-fill-success-quiet-active: var(--ha-color-green-05);
/* fill success normal */
--color-fill-success-normal-resting: var(--color-green-10);
--color-fill-success-normal-hover: var(--color-green-20);
--color-fill-success-normal-active: var(--color-green-10);
--ha-color-fill-success-normal-resting: var(--ha-color-green-10);
--ha-color-fill-success-normal-hover: var(--ha-color-green-20);
--ha-color-fill-success-normal-active: var(--ha-color-green-10);
/* fill success loud */
--color-fill-success-loud-resting: var(--color-green-40);
--color-fill-success-loud-hover: var(--color-green-30);
--color-fill-success-loud-active: var(--color-green-40);
--ha-color-fill-success-loud-resting: var(--ha-color-green-40);
--ha-color-fill-success-loud-hover: var(--ha-color-green-30);
--ha-color-fill-success-loud-active: var(--ha-color-green-40);
/* on primary */
--color-on-primary-quiet: var(--color-primary-70);
--color-on-primary-normal: var(--color-primary-60);
--ha-color-on-primary-quiet: var(--ha-color-primary-70);
--ha-color-on-primary-normal: var(--ha-color-primary-60);
/* on neutral */
--color-on-neutral-quiet: var(--color-neutral-70);
--color-on-neutral-normal: var(--color-neutral-60);
--color-on-neutral-loud: var(--white);
--ha-color-on-neutral-quiet: var(--ha-color-neutral-70);
--ha-color-on-neutral-normal: var(--ha-color-neutral-60);
--ha-color-on-neutral-loud: var(--white-color);
/* on disabled */
--color-on-disabled-quiet: var(--color-neutral-40);
--color-on-disabled-normal: var(--color-neutral-50);
--color-on-disabled-loud: var(--color-neutral-50);
--ha-color-on-disabled-quiet: var(--ha-color-neutral-40);
--ha-color-on-disabled-normal: var(--ha-color-neutral-50);
--ha-color-on-disabled-loud: var(--ha-color-neutral-50);
/* on danger */
--color-on-danger-quiet: var(--color-red-70);
--color-on-danger-normal: var(--color-red-60);
--color-on-danger-loud: var(--white);
--ha-color-on-danger-quiet: var(--ha-color-red-70);
--ha-color-on-danger-normal: var(--ha-color-red-60);
--ha-color-on-danger-loud: var(--white-color);
/* on warning */
--color-on-warning-quiet: var(--color-orange-70);
--color-on-warning-normal: var(--color-orange-60);
--color-on-warning-loud: var(--white);
--ha-color-on-warning-quiet: var(--ha-color-orange-70);
--ha-color-on-warning-normal: var(--ha-color-orange-60);
--ha-color-on-warning-loud: var(--white-color);
/* on success */
--color-on-success-quiet: var(--color-green-70);
--color-on-success-normal: var(--color-green-60);
--color-on-success-loud: var(--white);
--ha-color-on-success-quiet: var(--ha-color-green-70);
--ha-color-on-success-normal: var(--ha-color-green-60);
--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`
html {
--wa-color-brand-fill-loud: var(--color-fill-primary-loud-resting);
--wa-color-brand-fill-normal: var(--color-fill-primary-normal-resting);
--wa-color-brand-fill-quiet: var(--color-fill-primary-quiet-resting);
--wa-color-brand-border-loud: var(--color-border-loud);
--wa-color-brand-border-normal: var(--color-primary-50);
--wa-color-brand-border-quiet: var(--color-border-quiet);
--wa-color-brand-on-loud: var(--color-on-primary-loud);
--wa-color-brand-on-normal: var(--color-on-primary-normal);
--wa-color-brand-on-quiet: var(--color-on-primary-quiet);
--wa-color-brand-fill-loud: var(--ha-color-fill-primary-loud-resting);
--wa-color-brand-fill-normal: var(--ha-color-fill-primary-normal-resting);
--wa-color-brand-fill-quiet: var(--ha-color-fill-primary-quiet-resting);
--wa-color-brand-border-loud: var(--ha-color-border-loud);
--wa-color-brand-border-normal: var(--ha-color-primary-50);
--wa-color-brand-border-quiet: var(--ha-color-border-quiet);
--wa-color-brand-on-loud: var(--ha-color-on-primary-loud);
--wa-color-brand-on-normal: var(--ha-color-on-primary-normal);
--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-normal: var(--color-fill-neutral-normal-resting);
--wa-color-neutral-fill-quiet: var(--color-fill-neutral-quiet-resting);
--wa-color-neutral-border-loud: var(--color-border-neutral-loud);
--wa-color-neutral-border-normal: var(--color-border-neutral-normal);
--wa-color-neutral-border-quiet: var(--color-border-neutral-quiet);
--wa-color-neutral-on-loud: var(--color-on-neutral-loud);
--wa-color-neutral-on-normal: var(--color-on-neutral-normal);
--wa-color-neutral-on-quiet: var(--color-on-neutral-quiet);
--wa-color-neutral-fill-loud: var(--ha-color-fill-neutral-loud-resting);
--wa-color-neutral-fill-normal: var(--ha-color-fill-neutral-normal-resting);
--wa-color-neutral-fill-quiet: var(--ha-color-fill-neutral-quiet-resting);
--wa-color-neutral-border-loud: var(--ha-color-border-neutral-loud);
--wa-color-neutral-border-normal: var(--ha-color-border-neutral-normal);
--wa-color-neutral-border-quiet: var(--ha-color-border-neutral-quiet);
--wa-color-neutral-on-loud: var(--ha-color-on-neutral-loud);
--wa-color-neutral-on-normal: var(--ha-color-on-neutral-normal);
--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-normal: var(--color-fill-success-normal-resting);
--wa-color-success-fill-quiet: var(--color-fill-success-quiet-resting);
--wa-color-success-border-loud: var(--color-border-success-loud);
--wa-color-success-border-normal: var(--color-border-success-normal);
--wa-color-success-border-quiet: var(--color-border-success-quiet);
--wa-color-success-on-loud: var(--color-on-success-loud);
--wa-color-success-on-normal: var(--color-on-success-normal);
--wa-color-success-on-quiet: var(--color-on-success-quiet);
--wa-color-success-fill-loud: var(--ha-color-fill-success-loud-resting);
--wa-color-success-fill-normal: var(--ha-color-fill-success-normal-resting);
--wa-color-success-fill-quiet: var(--ha-color-fill-success-quiet-resting);
--wa-color-success-border-loud: var(--ha-color-border-success-loud);
--wa-color-success-border-normal: var(--ha-color-border-success-normal);
--wa-color-success-border-quiet: var(--ha-color-border-success-quiet);
--wa-color-success-on-loud: var(--ha-color-on-success-loud);
--wa-color-success-on-normal: var(--ha-color-on-success-normal);
--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-normal: var(--color-fill-warning-normal-resting);
--wa-color-warning-fill-quiet: var(--color-fill-warning-quiet-resting);
--wa-color-warning-border-loud: var(--color-border-warning-loud);
--wa-color-warning-border-normal: var(--color-border-warning-normal);
--wa-color-warning-border-quiet: var(--color-border-warning-quiet);
--wa-color-warning-on-loud: var(--color-on-warning-loud);
--wa-color-warning-on-normal: var(--color-on-warning-normal);
--wa-color-warning-on-quiet: var(--color-on-warning-quiet);
--wa-color-warning-fill-loud: var(--ha-color-fill-warning-loud-resting);
--wa-color-warning-fill-normal: var(--ha-color-fill-warning-normal-resting);
--wa-color-warning-fill-quiet: var(--ha-color-fill-warning-quiet-resting);
--wa-color-warning-border-loud: var(--ha-color-border-warning-loud);
--wa-color-warning-border-normal: var(--ha-color-border-warning-normal);
--wa-color-warning-border-quiet: var(--ha-color-border-warning-quiet);
--wa-color-warning-on-loud: var(--ha-color-on-warning-loud);
--wa-color-warning-on-normal: var(--ha-color-on-warning-normal);
--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-normal: var(--color-fill-danger-normal-resting);
--wa-color-danger-fill-quiet: var(--color-fill-danger-quiet-resting);
--wa-color-danger-border-loud: var(--color-border-danger-loud);
--wa-color-danger-border-normal: var(--color-border-danger-normal);
--wa-color-danger-border-quiet: var(--color-border-danger-quiet);
--wa-color-danger-on-loud: var(--color-on-danger-loud);
--wa-color-danger-on-normal: var(--color-on-danger-normal);
--wa-color-danger-on-quiet: var(--color-on-danger-quiet);
--wa-color-danger-fill-loud: var(--ha-color-fill-danger-loud-resting);
--wa-color-danger-fill-normal: var(--ha-color-fill-danger-normal-resting);
--wa-color-danger-fill-quiet: var(--ha-color-fill-danger-quiet-resting);
--wa-color-danger-border-loud: var(--ha-color-border-danger-loud);
--wa-color-danger-border-normal: var(--ha-color-border-danger-normal);
--wa-color-danger-border-quiet: var(--ha-color-border-danger-quiet);
--wa-color-danger-on-loud: var(--ha-color-on-danger-loud);
--wa-color-danger-on-normal: var(--ha-color-on-danger-normal);
--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);
}
`;