From ebe791d21ad5ccda1f4a2721b0a17b6686e04016 Mon Sep 17 00:00:00 2001 From: Wendelin Date: Mon, 28 Jul 2025 14:17:48 +0200 Subject: [PATCH] Migrate to webawesome --- cast/src/launcher/layout/hc-cast.ts | 4 +- .../src/pages/components/ha-button.markdown | 54 +-- gallery/src/pages/components/ha-button.ts | 63 ++-- .../registries/dialog-hassio-registries.ts | 4 +- .../dialog-hassio-repositories.ts | 2 +- package.json | 1 + src/components/buttons/ha-progress-button.ts | 10 +- src/components/ha-button.ts | 307 +++++++----------- src/components/ha-copy-textfield.ts | 2 +- src/components/ha-file-upload.ts | 4 +- .../ha-form/ha-form-optional_actions.ts | 2 +- .../media-player/dialog-media-manage.ts | 2 +- .../media-player/ha-media-manage-button.ts | 2 +- .../media-player/ha-media-player-browse.ts | 2 +- .../media-player/ha-media-upload-button.ts | 2 +- src/dialogs/generic/dialog-box.ts | 2 +- .../controls/more-info-media_player.ts | 4 +- .../cloud/cloud-step-intro.ts | 2 +- .../config/areas/ha-config-area-page.ts | 5 +- .../automation/action/ha-automation-action.ts | 4 +- .../condition/ha-automation-condition.ts | 4 +- .../trigger/ha-automation-trigger.ts | 2 +- .../config/ha-backup-config-encryption-key.ts | 2 +- .../backup/ha-config-backup-settings.ts | 2 +- .../cloud/account/dialog-cloud-tts-try.ts | 7 +- .../config/devices/ha-config-device-page.ts | 2 +- .../components/ha-energy-battery-settings.ts | 2 +- .../components/ha-energy-device-settings.ts | 2 +- .../components/ha-energy-gas-settings.ts | 2 +- .../components/ha-energy-grid-settings.ts | 6 +- .../components/ha-energy-solar-settings.ts | 2 +- .../components/ha-energy-water-settings.ts | 2 +- .../dialogs/dialog-energy-solar-settings.ts | 2 +- .../integrations/ha-config-flow-card.ts | 2 +- .../ha-config-integration-page.ts | 2 +- .../ha-config-integrations-dashboard.ts | 4 +- .../zwave_js/zwave_js-config-dashboard.ts | 38 ++- .../config/network/ha-config-url-form.ts | 2 +- .../config/network/supervisor-network.ts | 4 +- src/panels/config/person/ha-config-person.ts | 2 +- src/panels/config/script/ha-script-fields.ts | 2 +- .../config/voice-assistants/assist-pref.ts | 2 +- .../lovelace/cards/hui-alarm-panel-card.ts | 2 +- src/resources/theme/color/color.globals.ts | 26 -- src/resources/theme/color/core.globals.ts | 2 +- src/resources/theme/color/index.ts | 3 + src/resources/theme/color/semantic.globals.ts | 2 +- src/resources/theme/color/wa.globals.ts | 55 ++++ yarn.lock | 36 +- 49 files changed, 334 insertions(+), 365 deletions(-) create mode 100644 src/resources/theme/color/wa.globals.ts diff --git a/cast/src/launcher/layout/hc-cast.ts b/cast/src/launcher/layout/hc-cast.ts index 9fc2ab2273..35e214f0b1 100644 --- a/cast/src/launcher/layout/hc-cast.ts +++ b/cast/src/launcher/layout/hc-cast.ts @@ -86,7 +86,7 @@ class HcCast extends LitElement { ? html`

- + Start Casting

@@ -130,7 +130,7 @@ class HcCast extends LitElement { ? html` Manage diff --git a/gallery/src/pages/components/ha-button.markdown b/gallery/src/pages/components/ha-button.markdown index f52dde1fb7..0195b996db 100644 --- a/gallery/src/pages/components/ha-button.markdown +++ b/gallery/src/pages/components/ha-button.markdown @@ -39,60 +39,28 @@ title: Button ### API -This component is based on the shoelace button component. -Check the [shoelace documentation](https://shoelace.style/components/button) for more details. +This component is based on the webawesome button component. +Check the [webawesome documentation](https://webawesome.com/docs/components/button/) for more details. **Slots** - default slot: Label of the button ` - no default -- `prefix`: The prefix container (usually for icons). +- `start`: The prefix container (usually for icons). ` - no default -- `suffix`: The suffix container (usually for icons). +- `end`: The suffix container (usually for icons). ` - no default **Properties/Attributes** -| Name | Type | Default | Description | -| ----------- | ------------------------------------------------ | --------- | ---------------------------------------------------- | -| appearance | "accent"/"filled"/"plain" | "accent" | Sets the button appearance. | -| variants | "primary"/"danger"/"neutral"/"warning"/"success" | "primary" | Sets the button color variant. "primary" is default. | -| size | "small"/"medium" | "medium" | Sets the button size. | -| hideContent | Boolean | false | Hides the button content (for overlays) | +| Name | Type | Default | Description | +| ----------- | ---------------------------------------------- | -------- | -------------------------------------------------- | +| appearance | "accent"/"filled"/"plain" | "accent" | Sets the button appearance. | +| variants | "brand"/"danger"/"neutral"/"warning"/"success" | "brand" | Sets the button color variant. "brand" is default. | +| size | "small"/"medium" | "medium" | Sets the button size. | +| hideContent | Boolean | false | Hides the button content (for overlays) | **CSS Custom Properties** -- `--ha-button-font-family` - Font family for the button text. -- `--ha-button-font-weight` - buttons font weight. -- `--ha-button-font-size` - Font weight for the button text. - `--ha-button-height` - Height of the button. -- `--ha-button-padding-inline-start` - padding for the button text on the left side. -- `--ha-button-padding-inline-end` - padding for the button text on the right side. -- `--ha-button-border-radius` - Border radius for the button. -- `--ha-button-border-width` - Border width for the button. -- `--ha-button-theme-color` - Main color for the button. -- `--ha-button-theme-dark-color` - Dark variant of the main color. -- `--ha-button-theme-darker-color` - Dark variant of the main color. -- `--ha-button-theme-light-color` - Light variant of the main color. -- `--ha-button-text-color` - Text color for the button. -- `--ha-button-focus-ring-color` - Focus ring color for the button. -- `--ha-button-primary-color` - Main color for the primary variant. -- `--ha-button-primary-light-color` - Light color for the primary variant. -- `--ha-button-primary-dark-color` - Dark color for the primary variant. -- `--ha-button-primary-darker-color` - Darker color for the primary variant. -- `--ha-button-error-color` - Main color for the error variant. -- `--ha-button-error-light-color` - Light color for the error variant. -- `--ha-button-error-dark-color` - Dark color for the error variant. -- `--ha-button-error-darker-color` - Darker color for the error variant. -- `--ha-button-neutral-color` - Main color for the neutral variant. -- `--ha-button-neutral-light-color` - Light color for the neutral variant. -- `--ha-button-neutral-dark-color` - Dark color for the neutral variant. -- `--ha-button-neutral-darker-color` - Darker color for the neutral variant. -- `--ha-button-warning-color` - Main color for the warning variant. -- `--ha-button-warning-light-color` - Light color for the warning variant. -- `--ha-button-warning-dark-color` - Dark color for the warning variant. -- `--ha-button-warning-darker-color` - Darker color for the warning variant. -- `--ha-button-success-color` - Main color for the success variant. -- `--ha-button-success-light-color` - Light color for the success variant. -- `--ha-button-success-dark-color` - Dark color for the success variant. -- `--ha-button-success-darker-color` - Darker color for the success variant. +- `--ha-button-radius` - Border radius of the button. Defaults to `var(--wa-border-radius-pill)`. diff --git a/gallery/src/pages/components/ha-button.ts b/gallery/src/pages/components/ha-button.ts index c7eb1be6ce..55674c4603 100644 --- a/gallery/src/pages/components/ha-button.ts +++ b/gallery/src/pages/components/ha-button.ts @@ -10,7 +10,7 @@ import "../../../../src/components/ha-svg-icon"; import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg"; const appearances = ["accent", "filled", "plain"]; -const variants = ["primary", "danger", "neutral", "warning", "success"]; +const variants = ["brand", "danger", "neutral", "warning", "success"]; @customElement("demo-components-ha-button") export class DemoHaButton extends LitElement { @@ -32,7 +32,41 @@ export class DemoHaButton extends LitElement { > + ${titleCase(`${variant} ${appearance}`)} + + + ` + )} + +
+ ${appearances.map( + (appearance) => html` + + ${titleCase(`${variant} ${appearance}`)} + + ` + )} +
+
+ ${appearances.map( + (appearance) => html` + + ${titleCase(`${variant} ${appearance}`)} + ` + )} + ${variants.map( + (variant) => html`
${appearances.map( (appearance) => html` - ${titleCase(`${variant} ${appearance}`)} + ${titleCase(`${appearance}`)} ` )} @@ -60,25 +98,12 @@ export class DemoHaButton extends LitElement { ${appearances.map( (appearance) => html` - ${titleCase(`${variant} ${appearance}`)} - - ` - )} -
-
- ${appearances.map( - (appearance) => html` - - ${titleCase(`${variant} ${appearance}`)} + ${titleCase(`${appearance}`)} ` )} diff --git a/hassio/src/dialogs/registries/dialog-hassio-registries.ts b/hassio/src/dialogs/registries/dialog-hassio-registries.ts index 49cbe98f65..6bf7b23360 100644 --- a/hassio/src/dialogs/registries/dialog-hassio-registries.ts +++ b/hassio/src/dialogs/registries/dialog-hassio-registries.ts @@ -95,7 +95,7 @@ class HassioRegistriesDialog extends LitElement { appearance="filled" size="small" > - + ${this.supervisor.localize("dialog.registries.add_registry")}
@@ -136,7 +136,7 @@ class HassioRegistriesDialog extends LitElement { appearance="filled" size="small" > - + ${this.supervisor.localize( "dialog.registries.add_new_registry" )} diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts index 9d2fb3c11a..10d691e178 100644 --- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts +++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts @@ -165,7 +165,7 @@ class HassioRepositoriesDialog extends LitElement { appearance="filled" size="small" > - + ${this._dialogParams!.supervisor.localize( "dialog.repositories.add" )} diff --git a/package.json b/package.json index 77a3a9e0ec..a9421706cc 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "license": "Apache-2.0", "type": "module", "dependencies": { + "@awesome.me/webawesome": "3.0.0-beta.3", "@babel/runtime": "7.28.2", "@braintree/sanitize-url": "7.1.1", "@codemirror/autocomplete": "6.18.6", diff --git a/src/components/buttons/ha-progress-button.ts b/src/components/buttons/ha-progress-button.ts index 46228f4acf..be778521f7 100644 --- a/src/components/buttons/ha-progress-button.ts +++ b/src/components/buttons/ha-progress-button.ts @@ -23,12 +23,8 @@ export class HaProgressButton extends LitElement { @property() appearance: Appearance = "accent"; - @property() variant: - | "primary" - | "danger" - | "neutral" - | "warning" - | "success" = "primary"; + @property() variant: "brand" | "danger" | "neutral" | "warning" | "success" = + "brand"; @state() private _result?: "success" | "error"; @@ -53,7 +49,7 @@ export class HaProgressButton extends LitElement { .hideContent=${this._result !== undefined} > ${this._hasInitialIcon - ? html`` + ? html`` : nothing} ${this._result diff --git a/src/components/ha-button.ts b/src/components/ha-button.ts index ae18063886..af92b2717a 100644 --- a/src/components/ha-button.ts +++ b/src/components/ha-button.ts @@ -1,9 +1,8 @@ -import Button from "@shoelace-style/shoelace/dist/components/button/button.component"; -import styles from "@shoelace-style/shoelace/dist/components/button/button.styles"; -import { css } from "lit"; +import Button from "@awesome.me/webawesome/dist/components/button/button"; +import { css, type CSSResultGroup } from "lit"; import { customElement, property } from "lit/decorators"; -export type Appearance = "accent" | "filled" | "plain"; +export type Appearance = "accent" | "filled" | "outlined" | "plain"; /** * Home Assistant button component @@ -12,227 +11,145 @@ export type Appearance = "accent" | "filled" | "plain"; * @extends {Button} * * @summary - * A stylable button component supporting Home Assistant theming, variants, and appearances. + * A stylable button component supporting Home Assistant theming, variants, and appearances based on webawesome button. * * @slot - Label of the button - * @slot prefix - The prefix container (usually for icons). - * @slot suffix - The suffix container (usually for icons). + * @slot start - The prefix container (usually for icons). + * @slot end - The suffix container (usually for icons). * * @csspart base - The component's base wrapper. - * @csspart prefix - The container that wraps the prefix. + * @csspart start - The container that wraps the prefix. * @csspart label - The button's label. - * @csspart suffix - The container that wraps the suffix. + * @csspart end - The container that wraps the suffix. * @csspart caret - The button's caret icon, an `` element. * @csspart spinner - The spinner that shows when the button is in the loading state. * - * @cssprop --ha-button-font-family - Font family for the button text. - * @cssprop --ha-button-font-weight - buttons font weight. - * @cssprop --ha-button-font-size - Font weight for the button text. - * @cssprop --ha-button-height - Height of the button. - * @cssprop --ha-button-padding-inline-start - padding for the button text on the left side. - * @cssprop --ha-button-padding-inline-end - padding for the button text on the right side. - * @cssprop --ha-button-border-radius - Border radius for the button. - * @cssprop --ha-button-border-width - Border width for the button. - * @cssprop --ha-button-theme-color - Main color for the button. - * @cssprop --ha-button-theme-dark-color - Dark variant of the main color. - * @cssprop --ha-button-theme-darker-color - Dark variant of the main color. - * @cssprop --ha-button-theme-light-color - Light variant of the main color. - * @cssprop --ha-button-text-color - Text color for the button. - * @cssprop --ha-button-focus-ring-color - Focus ring color for the button. - * @cssprop --ha-button-primary-color - Main color for the primary variant. - * @cssprop --ha-button-primary-light-color - Light color for the primary variant. - * @cssprop --ha-button-primary-dark-color - Dark color for the primary variant. - * @cssprop --ha-button-primary-darker-color - Darker color for the primary variant. - * @cssprop --ha-button-error-color - Main color for the error variant. - * @cssprop --ha-button-error-light-color - Light color for the error variant. - * @cssprop --ha-button-error-dark-color - Dark color for the error variant. - * @cssprop --ha-button-error-darker-color - Darker color for the error variant. - * @cssprop --ha-button-neutral-color - Main color for the neutral variant. - * @cssprop --ha-button-neutral-light-color - Light color for the neutral variant. - * @cssprop --ha-button-neutral-dark-color - Dark color for the neutral variant. - * @cssprop --ha-button-neutral-darker-color - Darker color for the neutral variant. - * @cssprop --ha-button-warning-color - Main color for the warning variant. - * @cssprop --ha-button-warning-light-color - Light color for the warning variant. - * @cssprop --ha-button-warning-dark-color - Dark color for the warning variant. - * @cssprop --ha-button-warning-darker-color - Darker color for the warning variant. - * @cssprop --ha-button-success-color - Main color for the success variant. - * @cssprop --ha-button-success-light-color - Light color for the success variant. - * @cssprop --ha-button-success-dark-color - Dark color for the success variant. - * @cssprop --ha-button-success-darker-color - Darker color for the success variant. + * @cssprop --ha-button-height - The height of the button. + * @cssprop --ha-button-radius - The border radius of the button. defaults to `var(--wa-border-radius-pill)`. * * @attr {("small"|"medium")} size - Sets the button size. - * @attr {("primary"|"danger"|"neutral"|"warning"|"success")} variant - Sets the button color variant. "primary" is default. + * @attr {("brand"|"neutral"|"danger"|"warning"|"success")} variant - Sets the button color variant. "primary" is default. * @attr {("accent"|"filled"|"plain")} appearance - Sets the button appearance. * @attr {boolean} hideContent - Hides the button content (for overlays). */ @customElement("ha-button") export class HaButton extends Button { - @property({ reflect: true }) appearance?: Appearance; + variant: "brand" | "neutral" | "success" | "warning" | "danger" = "brand"; @property({ type: Boolean, attribute: "hide-content", reflect: true }) hideContent = false; - static override styles = [ - styles, - css` - :host { - --sl-input-font-family: var( - --ha-button-font-family, - var(--ha-font-family-body) - ); - --sl-font-weight-semibold: var( - --ha-button-font-weight, - var(--ha-font-weight-medium) - ); - --sl-transition-x-fast: 0.4s; - --sl-focus-ring: solid 4px var(--ha-button-focus-ring-color, #625b71); - --sl-focus-ring-offset: 1px; - --sl-button-font-size-small: var( - --ha-button-font-size, - var(--ha-font-size-m) - ); - --sl-button-font-size-medium: var( - --ha-button-font-size, - var(--ha-font-size-m) - ); + static get styles(): CSSResultGroup { + return [ + Button.styles, + css` + .button { + /* set theme vars */ + --wa-form-control-padding-inline: 16px; + --wa-font-weight-action: var(--ha-font-weight-medium); + --wa-border-radius-pill: 9999px; + --wa-form-control-border-radius: var( + --ha-button-radius, + var(--wa-border-radius-pill) + ); - --sl-spacing-medium: 16px; - --sl-spacing-small: 12px; - --sl-spacing-x-small: 8px; + --wa-form-control-height: var( + --ha-button-height, + var(--button-height, 40px) + ); + } - --ha-button-theme-color: var(--ha-button-primary-color); - --ha-button-theme-light-color: var(--ha-button-primary-light-color); - --ha-button-theme-dark-color: var(--ha-button-primary-dark-color); - --ha-button-theme-darker-color: var(--ha-button-primary-darker-color); + :host([size="small"]) .button { + --wa-form-control-height: var( + --ha-button-height, + var(--button-height, 32px) + ); + } - line-height: 1; - --sl-input-border-width: var(--ha-button-border-width, 0); - } + :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); + } - :host([variant="danger"]) { - --ha-button-theme-color: var(--ha-button-error-color); - --ha-button-theme-light-color: var(--ha-button-error-light-color); - --ha-button-theme-dark-color: var(--ha-button-error-dark-color); - --ha-button-theme-darker-color: var(--ha-button-error-darker-color); - } + :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); + } - :host([variant="neutral"]) { - --ha-button-theme-color: var(--ha-button-neutral-color); - --ha-button-theme-light-color: var(--ha-button-neutral-light-color); - --ha-button-theme-dark-color: var(--ha-button-neutral-dark-color); - --ha-button-theme-darker-color: var(--ha-button-neutral-darker-color); - } + :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); + } - :host([variant="warning"]) { - --ha-button-theme-color: var(--ha-button-warning-color); - --ha-button-theme-light-color: var(--ha-button-warning-light-color); - --ha-button-theme-dark-color: var(--ha-button-warning-dark-color); - --ha-button-theme-darker-color: var(--ha-button-warning-darker-color); - } + :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); + } - :host([variant="success"]) { - --ha-button-theme-color: var(--ha-button-success-color); - --ha-button-theme-light-color: var(--ha-button-success-light-color); - --ha-button-theme-dark-color: var(--ha-button-success-dark-color); - --ha-button-theme-darker-color: var(--ha-button-success-darker-color); - } + :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 { - height: var(--ha-button-height, var(--button-height, 40px)); - align-items: center; - border-radius: var(--ha-button-border-radius, 48px); - } - .button.button--small { - border-radius: var(--ha-button-border-radius, 32px); - height: var(--ha-button-height, var(--button-height, 32px)); - } + :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); + } - .button, - .button--standard.button--default, - .button--standard.button--primary, - .button--standard.button--neutral, - .button--standard.button--danger, - .button--standard.button--warning, - .button--standard.button--success, - :host([appearance="filled"]) .button:hover:not(.button--disabled) { - background-color: var(--ha-button-theme-color); - color: var(--ha-button-text-color, var(--text-primary-color)); - } - .button:hover:not(.button--disabled), - .button--standard.button--default:hover:not(.button--disabled), - .button--standard.button--primary:hover:not(.button--disabled), - .button--standard.button--neutral:hover:not(.button--disabled), - .button--standard.button--warning:hover:not(.button--disabled), - .button--standard.button--success:hover:not(.button--disabled), - .button--standard.button--danger:hover:not(.button--disabled), - :host([appearance="filled"]) .button:active:not(.button--disabled) { - background-color: var(--ha-button-theme-dark-color); - color: var(--ha-button-text-color, var(--text-primary-color)); - } + :host([appearance~="outlined"]) .button.disabled { + background-color: var(--transparent-none); + color: var(--color-on-disabled-quiet); + } - .button--standard.button--default:active:not(.button--disabled), - .button--standard.button--primary:active:not(.button--disabled), - .button--standard.button--neutral:active:not(.button--disabled), - .button--standard.button--danger:active:not(.button--disabled), - .button--standard.button--warning:active:not(.button--disabled), - .button--standard.button--success:active:not(.button--disabled), - .button:active:not(.button--disabled) { - background-color: var(--ha-button-theme-darker-color); - color: var(--ha-button-text-color, var(--text-primary-color)); - } + @media (hover: hover) { + :host([appearance~="filled"]) + .button:not(.disabled):not(.loading):hover { + background-color: var(--color-fill-normal-hover); + } + :host([appearance~="accent"]) + .button:not(.disabled):not(.loading):hover { + background-color: var(--color-fill-loud-hover); + } + } + :host([appearance~="filled"]) + .button:not(.disabled):not(.loading):active { + background-color: var(--color-fill-normal-active); + } + :host([appearance~="filled"]) .button.disabled { + background-color: var(--color-fill-disabled-normal-resting); + color: var(--color-on-disabled-normal); + } - :host([appearance="filled"]) .button, - :host([appearance="plain"]) .button:hover:not(.button--disabled) { - background-color: var(--ha-button-theme-light-color); - color: var(--ha-button-theme-color); - } - :host([appearance="plain"]) .button { - background-color: transparent; - color: var(--ha-button-theme-color); - } - :host([appearance="plain"]) .button:active:not(.button--disabled) { - background-color: var(--ha-button-theme-color); - color: var(--ha-button-text-color, var(--text-primary-color)); - } - - .button.button--medium .button__label { - padding-inline-start: var(--ha-button-padding-inline-start, 16px); - padding-inline-end: var(--ha-button-padding-inline-start, 16px); - } - - .button.button--small .button__label { - padding-inline-start: var(--ha-button-padding-inline-start, 12px); - padding-inline-end: var(--ha-button-padding-inline-start, 12px); - } - - /* spacing */ - .button--has-prefix.button--medium .button__label { - padding-inline-start: var(--ha-button-padding-inline-start, 8px); - } - .button--has-prefix.button--small .button__label { - padding-inline-start: var(--ha-button-padding-inline-start, 4px); - } - .button--has-suffix.button--medium .button__label, - .button--caret.button--medium .button__label { - padding-inline-end: var(--ha-button-padding-inline-end, 8px); - } - .button--has-suffix.button--small .button__label, - .button--caret.button--small .button__label { - padding-inline-end: var(--ha-button-padding-inline-end, 4px); - } - - /* - * hide content for overlays - */ - - :host([hide-content]) .button .button__prefix, - :host([hide-content]) .button .button__label, - :host([hide-content]) .button .button__suffix, - :host([hide-content]) .button .button__caret { - visibility: hidden; - } - `, - ]; + :host([appearance~="accent"]) .button { + background-color: var( + --wa-color-fill-loud, + var(--wa-color-neutral-fill-loud) + ); + } + :host([appearance~="accent"]) + .button:not(.disabled):not(.loading):active { + background-color: var(--color-fill-loud-active); + } + :host([appearance~="accent"]) .button.disabled { + background-color: var(--color-fill-disabled-loud-resting); + color: var(--color-on-disabled-loud); + } + `, + ]; + } } declare global { diff --git a/src/components/ha-copy-textfield.ts b/src/components/ha-copy-textfield.ts index 0f67b18a4d..f2cb6bfa88 100644 --- a/src/components/ha-copy-textfield.ts +++ b/src/components/ha-copy-textfield.ts @@ -49,7 +49,7 @@ export class HaCopyTextfield extends LitElement { : nothing}
- + ${this.label || this.hass.localize("ui.common.copy")} diff --git a/src/components/ha-file-upload.ts b/src/components/ha-file-upload.ts index 06cbe2654c..02ca8c6edf 100644 --- a/src/components/ha-file-upload.ts +++ b/src/components/ha-file-upload.ts @@ -118,13 +118,13 @@ export class HaFileUpload extends LitElement { @dragleave=${this._handleDragEnd} @dragend=${this._handleDragEnd} >${!this.value - ? html` ${this.label || localize("ui.components.file-upload.label")} diff --git a/src/components/ha-form/ha-form-optional_actions.ts b/src/components/ha-form/ha-form-optional_actions.ts index 35f1c02664..c17a6a5e65 100644 --- a/src/components/ha-form/ha-form-optional_actions.ts +++ b/src/components/ha-form/ha-form-optional_actions.ts @@ -122,7 +122,7 @@ export class HaFormOptionalActions extends LitElement implements HaFormElement { @closed=${stopPropagation} > - + ${this.localize?.("ui.components.form-optional-actions.add") || "Add interaction"} diff --git a/src/components/media-player/dialog-media-manage.ts b/src/components/media-player/dialog-media-manage.ts index 8fb1658de4..da2bacc886 100644 --- a/src/components/media-player/dialog-media-manage.ts +++ b/src/components/media-player/dialog-media-manage.ts @@ -127,7 +127,7 @@ class DialogMediaManage extends LitElement { )} @click=${this._handleDelete} > - + ${this._deleting diff --git a/src/components/media-player/ha-media-manage-button.ts b/src/components/media-player/ha-media-manage-button.ts index 580a004573..8a8e8d7a52 100644 --- a/src/components/media-player/ha-media-manage-button.ts +++ b/src/components/media-player/ha-media-manage-button.ts @@ -39,7 +39,7 @@ class MediaManageButton extends LitElement { } return html` - + ${this.hass.localize( "ui.components.media-browser.file_management.manage" )} diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts index f93f11861a..25f68bed8e 100644 --- a/src/components/media-player/ha-media-player-browse.ts +++ b/src/components/media-player/ha-media-player-browse.ts @@ -451,7 +451,7 @@ export class HaMediaPlayerBrowse extends LitElement { .path=${this.action === "play" ? mdiPlay : mdiPlus} - slot="prefix" + slot="start" > ${this.hass.localize( `ui.components.media-browser.${this.action}` diff --git a/src/components/media-player/ha-media-upload-button.ts b/src/components/media-player/ha-media-upload-button.ts index c0b839f16d..4e77857bc6 100644 --- a/src/components/media-player/ha-media-upload-button.ts +++ b/src/components/media-player/ha-media-upload-button.ts @@ -40,7 +40,7 @@ class MediaUploadButton extends LitElement { @click=${this._startUpload} .loading=${this._uploading > 0} > - + ${this._uploading > 0 ? this.hass.localize( "ui.components.media-browser.file_management.uploading", diff --git a/src/dialogs/generic/dialog-box.ts b/src/dialogs/generic/dialog-box.ts index 2cfcdaedf5..f030ec90ee 100644 --- a/src/dialogs/generic/dialog-box.ts +++ b/src/dialogs/generic/dialog-box.ts @@ -117,7 +117,7 @@ class DialogBox extends LitElement { @click=${this._confirm} ?dialogInitialFocus=${!this._params.prompt && !this._params.destructive} - variant=${this._params.destructive ? "danger" : "primary"} + variant=${this._params.destructive ? "danger" : "brand"} > ${this._params.confirmText ? this._params.confirmText diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts index 94b4485682..54241a7630 100644 --- a/src/dialogs/more-info/controls/more-info-media_player.ts +++ b/src/dialogs/more-info/controls/more-info-media_player.ts @@ -78,7 +78,7 @@ class MoreInfoMediaPlayer extends LitElement { > ${this.hass.localize("ui.card.media_player.browse_media")} @@ -94,7 +94,7 @@ class MoreInfoMediaPlayer extends LitElement { > ${groupMembers && groupMembers > 1 ? html` diff --git a/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts b/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts index 8b6cff6412..e7bf0703b4 100644 --- a/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts +++ b/src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts @@ -103,7 +103,7 @@ export class CloudStepIntro extends LitElement { rel="noreferrer noopener" appearance="plain" > - + nabucasa.com - + ${this.hass.localize("ui.panel.config.areas.add_picture")} `} - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.add" )} @@ -124,7 +124,7 @@ export default class HaAutomationAction extends LitElement { @click=${this._addActionBuildingBlockDialog} size="small" > - + ${this.hass.localize( "ui.panel.config.automation.editor.actions.add_building_block" )} diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts index 1486246bb8..537e0aa6a3 100644 --- a/src/panels/config/automation/condition/ha-automation-condition.ts +++ b/src/panels/config/automation/condition/ha-automation-condition.ts @@ -162,7 +162,7 @@ export default class HaAutomationCondition extends LitElement { @click=${this._addConditionDialog} size="small" > - + ${this.hass.localize( "ui.panel.config.automation.editor.conditions.add" )} @@ -173,7 +173,7 @@ export default class HaAutomationCondition extends LitElement { @click=${this._addConditionBuildingBlockDialog} size="small" > - + ${this.hass.localize( "ui.panel.config.automation.editor.conditions.add_building_block" )} diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts index e684a7d1c5..524ed01bb8 100644 --- a/src/panels/config/automation/trigger/ha-automation-trigger.ts +++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts @@ -117,7 +117,7 @@ export default class HaAutomationTrigger extends LitElement { ${this.hass.localize( "ui.panel.config.automation.editor.triggers.add" )} - + diff --git a/src/panels/config/backup/components/config/ha-backup-config-encryption-key.ts b/src/panels/config/backup/components/config/ha-backup-config-encryption-key.ts index e08017e20e..2bb8b2174e 100644 --- a/src/panels/config/backup/components/config/ha-backup-config-encryption-key.ts +++ b/src/panels/config/backup/components/config/ha-backup-config-encryption-key.ts @@ -42,7 +42,7 @@ class HaBackupConfigEncryptionKey extends LitElement { @click=${this._download} size="small" > - + ${this.hass.localize( "ui.panel.config.backup.encryption_key.download_emergency_kit_action" )} diff --git a/src/panels/config/backup/ha-config-backup-settings.ts b/src/panels/config/backup/ha-config-backup-settings.ts index 80a117f08b..733df1146d 100644 --- a/src/panels/config/backup/ha-config-backup-settings.ts +++ b/src/panels/config/backup/ha-config-backup-settings.ts @@ -295,7 +295,7 @@ class HaConfigBackupSettings extends LitElement { rel="noreferrer" appearance="plain" > - + ${this.hass.localize( "ui.panel.config.backup.settings.locations.more_locations" )} diff --git a/src/panels/config/cloud/account/dialog-cloud-tts-try.ts b/src/panels/config/cloud/account/dialog-cloud-tts-try.ts index a16e0cd761..1d0ecbdb0e 100644 --- a/src/panels/config/cloud/account/dialog-cloud-tts-try.ts +++ b/src/panels/config/cloud/account/dialog-cloud-tts-try.ts @@ -122,10 +122,7 @@ export class DialogTryTts extends LitElement { @click=${this._playExample} .disabled=${this._loadingExample} > - + ${this.hass.localize("ui.panel.config.cloud.account.tts.dialog.play")} - + ${this.hass.localize( "ui.panel.config.cloud.account.tts.dialog.create_automation" )} diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts index 469f409974..42e0cf44e3 100644 --- a/src/panels/config/devices/ha-config-device-page.ts +++ b/src/panels/config/devices/ha-config-device-page.ts @@ -781,7 +781,7 @@ export class HaConfigDevicePage extends LitElement { ` : nothing} diff --git a/src/panels/config/energy/components/ha-energy-battery-settings.ts b/src/panels/config/energy/components/ha-energy-battery-settings.ts index dc2f5e5d95..92dd4582e5 100644 --- a/src/panels/config/energy/components/ha-energy-battery-settings.ts +++ b/src/panels/config/energy/components/ha-energy-battery-settings.ts @@ -138,7 +138,7 @@ export class EnergyBatterySettings extends LitElement { appearance="filled" size="small" > - + ${this.hass.localize( "ui.panel.config.energy.battery.add_battery_system" )} - ${this.hass.localize( "ui.panel.config.energy.device_consumption.add_device" )} - ${this.hass.localize( "ui.panel.config.energy.gas.add_gas_source" )} - + ${this.hass.localize( "ui.panel.config.energy.grid.add_consumption" )} - ${this.hass.localize( "ui.panel.config.energy.grid.add_return" )} - + ${this.hass.localize( "ui.panel.config.energy.grid.add_co2_signal" )} diff --git a/src/panels/config/energy/components/ha-energy-solar-settings.ts b/src/panels/config/energy/components/ha-energy-solar-settings.ts index 41c5bb9978..0977857fc5 100644 --- a/src/panels/config/energy/components/ha-energy-solar-settings.ts +++ b/src/panels/config/energy/components/ha-energy-solar-settings.ts @@ -137,7 +137,7 @@ export class EnergySolarSettings extends LitElement { appearance="filled" size="small" > - + ${this.hass.localize( "ui.panel.config.energy.solar.add_solar_production" )} diff --git a/src/panels/config/energy/components/ha-energy-water-settings.ts b/src/panels/config/energy/components/ha-energy-water-settings.ts index 8671d9c28c..8cbbe018f8 100644 --- a/src/panels/config/energy/components/ha-energy-water-settings.ts +++ b/src/panels/config/energy/components/ha-energy-water-settings.ts @@ -126,7 +126,7 @@ export class EnergyWaterSettings extends LitElement { appearance="filled" size="small" > - ${this.hass.localize( "ui.panel.config.energy.water.add_water_source" )} - + ${this.hass.localize( "ui.panel.config.energy.solar.dialog.add_forecast" )} diff --git a/src/panels/config/integrations/ha-config-flow-card.ts b/src/panels/config/integrations/ha-config-flow-card.ts index 9f70e8deb9..e717f81bd2 100644 --- a/src/panels/config/integrations/ha-config-flow-card.ts +++ b/src/panels/config/integrations/ha-config-flow-card.ts @@ -51,7 +51,7 @@ export class HaConfigFlowCard extends LitElement { : ""} ${this.hass.localize( diff --git a/src/panels/config/integrations/ha-config-integration-page.ts b/src/panels/config/integrations/ha-config-integration-page.ts index 325ed1e002..4677f90084 100644 --- a/src/panels/config/integrations/ha-config-integration-page.ts +++ b/src/panels/config/integrations/ha-config-integration-page.ts @@ -550,7 +550,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) { .flowType=${flowType} .disabled=${!normalEntries.length} > - + ${this.hass.localize( `component.${this.domain}.config_subentries.${flowType}.initiate_flow.user` )} - + ${this.hass.localize( "ui.panel.config.integrations.add_integration" )} @@ -643,7 +643,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin( size="small" > ${this.hass.localize( diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts index 085defbdfa..b5eae151b0 100644 --- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts +++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts @@ -207,29 +207,27 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
- - - ${this.hass.localize("ui.panel.config.devices.caption")} - - - + - - ${this.hass.localize("ui.panel.config.entities.caption")} - - + ${this.hass.localize("ui.panel.config.entities.caption")} + ${this._provisioningEntries?.length - ? html` + > ${this.hass.localize( "ui.panel.config.zwave_js.dashboard.provisioned_devices" )} - ` + ` : nothing}
@@ -410,6 +408,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
@@ -490,15 +490,16 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { "ui.panel.config.zwave_js.dashboard.nvm_backup.restoring" )} ${this._restoreProgress}%` - : html` + : html` ${this.hass.localize( "ui.panel.config.zwave_js.dashboard.nvm_backup.download_backup" )}
${this.hass.localize( @@ -515,8 +516,9 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { />
${this.hass.localize( "ui.panel.config.zwave_js.dashboard.nvm_backup.migrate" @@ -963,8 +965,8 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) { } .upload-button { - display: inline-block; position: relative; + display: flex; } .upload-button ha-button { diff --git a/src/panels/config/network/ha-config-url-form.ts b/src/panels/config/network/ha-config-url-form.ts index cbfef7ea74..b7ba8a3467 100644 --- a/src/panels/config/network/ha-config-url-form.ts +++ b/src/panels/config/network/ha-config-url-form.ts @@ -176,7 +176,7 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) { .url=${externalUrl} @click=${this._copyURL} > - + ${this.hass.localize("ui.panel.config.common.copy_link")}
diff --git a/src/panels/config/network/supervisor-network.ts b/src/panels/config/network/supervisor-network.ts index 467a9987e9..dcc2f89e1f 100644 --- a/src/panels/config/network/supervisor-network.ts +++ b/src/panels/config/network/supervisor-network.ts @@ -455,7 +455,7 @@ export class HassioNetwork extends LitElement { ${this.hass.localize( "ui.panel.config.network.supervisor.add_address" )} - + ` : nothing} @@ -513,7 +513,7 @@ export class HassioNetwork extends LitElement { "ui.panel.config.network.supervisor.add_dns_server" )} diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts index 6755985be2..f669c7c8ef 100644 --- a/src/panels/config/person/ha-config-person.ts +++ b/src/panels/config/person/ha-config-person.ts @@ -122,7 +122,7 @@ export class HaConfigPerson extends LitElement { appearance="filled" size="small" > - + ${hass.localize( "ui.panel.config.person.create_person" )} - + ${this.hass.localize("ui.panel.config.script.editor.field.add_field")} `; diff --git a/src/panels/config/voice-assistants/assist-pref.ts b/src/panels/config/voice-assistants/assist-pref.ts index 039a2aee40..4ce49e05b6 100644 --- a/src/panels/config/voice-assistants/assist-pref.ts +++ b/src/panels/config/voice-assistants/assist-pref.ts @@ -215,7 +215,7 @@ export class AssistPref extends LitElement { ${this.hass.localize( "ui.panel.config.voice_assistants.assistants.pipeline.add_assistant" )} - + diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts index 144b6dfe62..5f89e76c35 100644 --- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts +++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts @@ -265,7 +265,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { @click=${this._handleActionClick} appearance="filled" size="small" - variant=${stateAction === "disarm" ? "danger" : "primary"} + variant=${stateAction === "disarm" ? "danger" : "brand"} > ${this._actionDisplay(stateAction)} diff --git a/src/resources/theme/color/color.globals.ts b/src/resources/theme/color/color.globals.ts index ed9c461694..4745b922a0 100644 --- a/src/resources/theme/color/color.globals.ts +++ b/src/resources/theme/color/color.globals.ts @@ -296,32 +296,6 @@ export const colorStyles = css` ); --chip-background-color: rgba(var(--rgb-primary-text-color), 0.15); - /* ha-button */ - --ha-button-primary-color: var(--primary-color); - --ha-button-primary-light-color: var(--light-primary-color); - --ha-button-primary-dark-color: var(--dark-primary-color); - --ha-button-primary-darker-color: var(--darker-primary-color); - - --ha-button-error-color: #b30532; - --ha-button-error-light-color: #ffdedc; - --ha-button-error-dark-color: #6e021f; - --ha-button-error-darker-color: #530016; - - --ha-button-warning-color: var(--warning-color); - --ha-button-warning-light-color: #fae3b9c1; - --ha-button-warning-dark-color: #ce8600; - --ha-button-warning-darker-color: #a36a00; - - --ha-button-success-color: var(--success-color); - --ha-button-success-light-color: #add1ae; - --ha-button-success-dark-color: #317534; - --ha-button-success-darker-color: #225524; - - --ha-button-neutral-color: #545868; - --ha-button-neutral-light-color: #d2d5e0; - --ha-button-neutral-dark-color: #3c3f4b; - --ha-button-neutral-darker-color: #262830; - /* Vaadin */ --material-body-text-color: var(--primary-text-color); --material-background-color: var(--card-background-color); diff --git a/src/resources/theme/color/core.globals.ts b/src/resources/theme/color/core.globals.ts index 18669ae49d..953c566aa2 100644 --- a/src/resources/theme/color/core.globals.ts +++ b/src/resources/theme/color/core.globals.ts @@ -17,7 +17,7 @@ export const coreColorStyles = css` --color-primary-60: #37c8fd; --color-primary-70: #7bd4fb; --color-primary-80: #b9e6fc; - --color-primary-90: #b9e6fc; + --color-primary-90: #dff3fc; --color-primary-95: #eff9fe; /* neutral */ diff --git a/src/resources/theme/color/index.ts b/src/resources/theme/color/index.ts index c67135235b..45328cae9b 100644 --- a/src/resources/theme/color/index.ts +++ b/src/resources/theme/color/index.ts @@ -8,6 +8,7 @@ import { darkSemanticColorStyles, semanticColorStyles, } from "./semantic.globals"; +import { waColorStyles } from "./wa.globals"; export const darkColorVariables = { ...extractVars(darkColorStyles), @@ -17,10 +18,12 @@ export const darkColorVariables = { export const colorDerivedVariables = { ...extractDerivedVars(colorStyles), ...extractDerivedVars(semanticColorStyles), + ...extractDerivedVars(waColorStyles), }; export const colorStylesCollection = [ coreColorStyles.toString(), semanticColorStyles.toString(), colorStyles.toString(), + waColorStyles.toString(), ]; diff --git a/src/resources/theme/color/semantic.globals.ts b/src/resources/theme/color/semantic.globals.ts index 4209d73055..03754cd773 100644 --- a/src/resources/theme/color/semantic.globals.ts +++ b/src/resources/theme/color/semantic.globals.ts @@ -318,7 +318,7 @@ export const darkSemanticColorStyles = css` /* on primary */ --color-on-primary-quiet: var(--color-primary-70); - --color-on-primary-normal: var(--color-primary-80); + --color-on-primary-normal: var(--color-primary-60); /* on neutral */ --color-on-neutral-quiet: var(--color-neutral-70); diff --git a/src/resources/theme/color/wa.globals.ts b/src/resources/theme/color/wa.globals.ts new file mode 100644 index 0000000000..43da990ad5 --- /dev/null +++ b/src/resources/theme/color/wa.globals.ts @@ -0,0 +1,55 @@ +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-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-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-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-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); + } +`; diff --git a/yarn.lock b/yarn.lock index f0fb432738..3536846d3a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -41,6 +41,23 @@ __metadata: languageName: node linkType: hard +"@awesome.me/webawesome@npm:3.0.0-beta.3": + version: 3.0.0-beta.3 + resolution: "@awesome.me/webawesome@npm:3.0.0-beta.3" + dependencies: + "@ctrl/tinycolor": "npm:^4.1.0" + "@floating-ui/dom": "npm:^1.6.13" + "@shoelace-style/animations": "npm:^1.2.0" + "@shoelace-style/localize": "npm:^3.2.1" + composed-offset-position: "npm:^0.0.6" + lit: "npm:^3.2.1" + nanoid: "npm:^5.1.5" + qr-creator: "npm:^1.0.0" + style-observer: "npm:^0.0.7" + checksum: 10/d01adab1e415f015c255e99e5ab7962eac3299bfafe3d6feb7dca0e44452b5e64f05d5c8b212ac1c513c8a0e2a9bdbe8dd68ec8b9ec1c216acf6a689dcc6cfc1 + languageName: node + linkType: hard + "@babel/code-frame@npm:7.26.2": version: 7.26.2 resolution: "@babel/code-frame@npm:7.26.2" @@ -1651,7 +1668,7 @@ __metadata: languageName: node linkType: hard -"@floating-ui/dom@npm:^1.6.12": +"@floating-ui/dom@npm:^1.6.12, @floating-ui/dom@npm:^1.6.13": version: 1.7.2 resolution: "@floating-ui/dom@npm:1.7.2" dependencies: @@ -9323,6 +9340,7 @@ __metadata: version: 0.0.0-use.local resolution: "home-assistant-frontend@workspace:." dependencies: + "@awesome.me/webawesome": "npm:3.0.0-beta.3" "@babel/core": "npm:7.28.0" "@babel/helper-define-polyfill-provider": "npm:0.6.5" "@babel/plugin-transform-runtime": "npm:7.28.0" @@ -11516,6 +11534,15 @@ __metadata: languageName: node linkType: hard +"nanoid@npm:^5.1.5": + version: 5.1.5 + resolution: "nanoid@npm:5.1.5" + bin: + nanoid: bin/nanoid.js + checksum: 10/6de2d006b51c983be385ef7ee285f7f2a57bd96f8c0ca881c4111461644bd81fafc2544f8e07cb834ca0f3e0f3f676c1fe78052183f008b0809efe6e273119f5 + languageName: node + linkType: hard + "natural-compare@npm:^1.4.0": version: 1.4.0 resolution: "natural-compare@npm:1.4.0" @@ -13979,6 +14006,13 @@ __metadata: languageName: node linkType: hard +"style-observer@npm:^0.0.7": + version: 0.0.7 + resolution: "style-observer@npm:0.0.7" + checksum: 10/bb57f98bae4463c1e1b57234f8ffe72ec0de27fb08b032c1919910129c210aacd1ddd615432b9453d491e10d3b719cf6c2a68a97165ca55d6fc9b86c0fca37fb + languageName: node + linkType: hard + "superstruct@npm:2.0.2": version: 2.0.2 resolution: "superstruct@npm:2.0.2"