From 4e969ccf0959c3abb34def65ede5c82ab0bdc690 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 6 Aug 2025 12:42:21 +0200 Subject: [PATCH] Update color variables (#26403) --- src/components/buttons/ha-progress-button.ts | 2 +- src/components/ha-button.ts | 104 ++++-- src/resources/theme/color/color.globals.ts | 6 +- src/resources/theme/color/core.globals.ts | 114 +++---- src/resources/theme/color/semantic.globals.ts | 323 +++++++++--------- src/resources/theme/color/wa.globals.ts | 92 ++--- 6 files changed, 333 insertions(+), 308 deletions(-) diff --git a/src/components/buttons/ha-progress-button.ts b/src/components/buttons/ha-progress-button.ts index 19d9240f74..86f7b5b11e 100644 --- a/src/components/buttons/ha-progress-button.ts +++ b/src/components/buttons/ha-progress-button.ts @@ -117,7 +117,7 @@ export class HaProgressButton extends LitElement { } ha-svg-icon { - color: var(--white); + color: var(--white-color); } `; } diff --git a/src/components/ha-button.ts b/src/components/ha-button.ts index 942d221e64..f8edd18a0d 100644 --- a/src/components/ha-button.ts +++ b/src/components/ha-button.ts @@ -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]) { diff --git a/src/resources/theme/color/color.globals.ts b/src/resources/theme/color/color.globals.ts index 93f800d0cf..dbfe8cc2da 100644 --- a/src/resources/theme/color/color.globals.ts +++ b/src/resources/theme/color/color.globals.ts @@ -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; diff --git a/src/resources/theme/color/core.globals.ts b/src/resources/theme/color/core.globals.ts index aebf96e594..4277684e91 100644 --- a/src/resources/theme/color/core.globals.ts +++ b/src/resources/theme/color/core.globals.ts @@ -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; } `; diff --git a/src/resources/theme/color/semantic.globals.ts b/src/resources/theme/color/semantic.globals.ts index 293e201236..11e3658218 100644 --- a/src/resources/theme/color/semantic.globals.ts +++ b/src/resources/theme/color/semantic.globals.ts @@ -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); } `; diff --git a/src/resources/theme/color/wa.globals.ts b/src/resources/theme/color/wa.globals.ts index 5882b47341..634ead0752 100644 --- a/src/resources/theme/color/wa.globals.ts +++ b/src/resources/theme/color/wa.globals.ts @@ -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); } `;