jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-11-08 18:39:40 +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
6 changed files with 333 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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]) {