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

Migrate to webawesome

Browse Source
This commit is contained in:
Wendelin 2025-07-28 14:17:48 +02:00
parent 6eb8261525
commit ebe791d21a
No known key found for this signature in database
49 changed files with 334 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
cast/src/launcher/layout/hc-cast.ts
View File

@ -86,7 +86,7 @@ class HcCast extends LitElement {
? html` ? html`
<p class="center-item"> <p class="center-item">
<ha-button @click=${this._handleLaunch}> <ha-button @click=${this._handleLaunch}>
<ha-svg-icon slot="prefix" .path=${mdiCast}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiCast}></ha-svg-icon>
Start Casting Start Casting
</ha-button> </ha-button>
</p> </p>
@ -130,7 +130,7 @@ class HcCast extends LitElement {
? html` ? html`
<ha-button appearance="plain" @click=${this._handleLaunch}> <ha-button appearance="plain" @click=${this._handleLaunch}>
<ha-svg-icon <ha-svg-icon
slot="prefix" slot="start"
.path=${mdiCastConnected} .path=${mdiCastConnected}
></ha-svg-icon> ></ha-svg-icon>
Manage Manage

54
gallery/src/pages/components/ha-button.markdown
View File

@ -39,60 +39,28 @@ title: Button
### API ### API
This component is based on the shoelace button component. This component is based on the webawesome button component.
Check the [shoelace documentation](https://shoelace.style/components/button) for more details. Check the [webawesome documentation](https://webawesome.com/docs/components/button/) for more details.
**Slots** **Slots**
- default slot: Label of the button - default slot: Label of the button
` - no default ` - no default
- `prefix`: The prefix container (usually for icons). - `start`: The prefix container (usually for icons).
` - no default ` - no default
- `suffix`: The suffix container (usually for icons). - `end`: The suffix container (usually for icons).
` - no default ` - no default
**Properties/Attributes** **Properties/Attributes**
| Name | Type | Default | Description | | Name | Type | Default | Description |
| ----------- | ------------------------------------------------ | --------- | ---------------------------------------------------- | | ----------- | ---------------------------------------------- | -------- | -------------------------------------------------- |
| appearance | "accent"/"filled"/"plain" | "accent" | Sets the button appearance. | | appearance | "accent"/"filled"/"plain" | "accent" | Sets the button appearance. |
| variants | "primary"/"danger"/"neutral"/"warning"/"success" | "primary" | Sets the button color variant. "primary" is default. | | variants | "brand"/"danger"/"neutral"/"warning"/"success" | "brand" | Sets the button color variant. "brand" is default. |
| size | "small"/"medium" | "medium" | Sets the button size. | | size | "small"/"medium" | "medium" | Sets the button size. |
| hideContent | Boolean | false | Hides the button content (for overlays) | | hideContent | Boolean | false | Hides the button content (for overlays) |
**CSS Custom Properties** **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-height` - Height of the button.
- `--ha-button-padding-inline-start` - padding for the button text on the left side. - `--ha-button-radius` - Border radius of the button. Defaults to `var(--wa-border-radius-pill)`.
- `--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.

63
gallery/src/pages/components/ha-button.ts
View File

@ -10,7 +10,7 @@ import "../../../../src/components/ha-svg-icon";
import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg"; import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
const appearances = ["accent", "filled", "plain"]; const appearances = ["accent", "filled", "plain"];
const variants = ["primary", "danger", "neutral", "warning", "success"]; const variants = ["brand", "danger", "neutral", "warning", "success"];
@customElement("demo-components-ha-button") @customElement("demo-components-ha-button")
export class DemoHaButton extends LitElement { export class DemoHaButton extends LitElement {
@ -32,7 +32,41 @@ export class DemoHaButton extends LitElement {
> >
<ha-svg-icon <ha-svg-icon
.path=${mdiHomeAssistant} .path=${mdiHomeAssistant}
slot="prefix" slot="start"
></ha-svg-icon>
${titleCase(`${variant} ${appearance}`)}
<ha-svg-icon
.path=${mdiHome}
slot="end"
></ha-svg-icon>
</ha-button>
`
)}
</div>
<div>
${appearances.map(
(appearance) => html`
<ha-button
.appearance=${appearance}
.variant=${variant}
size="small"
>
${titleCase(`${variant} ${appearance}`)}
</ha-button>
`
)}
</div>
<div>
${appearances.map(
(appearance) => html`
<ha-button
.appearance=${appearance}
.variant=${variant}
loading
>
<ha-svg-icon
.path=${mdiHomeAssistant}
slot="start"
></ha-svg-icon> ></ha-svg-icon>
${titleCase(`${variant} ${appearance}`)} ${titleCase(`${variant} ${appearance}`)}
<ha-svg-icon <ha-svg-icon
@ -43,15 +77,19 @@ export class DemoHaButton extends LitElement {
` `
)} )}
</div> </div>
`
)}
${variants.map(
(variant) => html`
<div> <div>
${appearances.map( ${appearances.map(
(appearance) => html` (appearance) => html`
<ha-button <ha-button
.appearance=${appearance}
.variant=${variant} .variant=${variant}
size="small" .appearance=${appearance}
disabled
> >
${titleCase(`${variant} ${appearance}`)} ${titleCase(`${appearance}`)}
</ha-button> </ha-button>
` `
)} )}
@ -60,25 +98,12 @@ export class DemoHaButton extends LitElement {
${appearances.map( ${appearances.map(
(appearance) => html` (appearance) => html`
<ha-button <ha-button
.appearance=${appearance}
.variant=${variant} .variant=${variant}
disabled
>
${titleCase(`${variant} ${appearance}`)}
</ha-button>
`
)}
</div>
<div>
${appearances.map(
(appearance) => html`
<ha-button
.appearance=${appearance} .appearance=${appearance}
.variant=${variant}
size="small" size="small"
disabled disabled
> >
${titleCase(`${variant} ${appearance}`)} ${titleCase(`${appearance}`)}
</ha-button> </ha-button>
` `
)} )}

4
hassio/src/dialogs/registries/dialog-hassio-registries.ts
View File

@ -95,7 +95,7 @@ class HassioRegistriesDialog extends LitElement {
appearance="filled" appearance="filled"
size="small" size="small"
> >
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
${this.supervisor.localize("dialog.registries.add_registry")} ${this.supervisor.localize("dialog.registries.add_registry")}
</ha-button> </ha-button>
</div> </div>
@ -136,7 +136,7 @@ class HassioRegistriesDialog extends LitElement {
appearance="filled" appearance="filled"
size="small" size="small"
> >
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
${this.supervisor.localize( ${this.supervisor.localize(
"dialog.registries.add_new_registry" "dialog.registries.add_new_registry"
)} )}

2
hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
View File

@ -165,7 +165,7 @@ class HassioRepositoriesDialog extends LitElement {
appearance="filled" appearance="filled"
size="small" size="small"
> >
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
${this._dialogParams!.supervisor.localize( ${this._dialogParams!.supervisor.localize(
"dialog.repositories.add" "dialog.repositories.add"
)} )}

1
package.json
View File

@ -26,6 +26,7 @@
"license": "Apache-2.0", "license": "Apache-2.0",
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@awesome.me/webawesome": "3.0.0-beta.3",
"@babel/runtime": "7.28.2", "@babel/runtime": "7.28.2",
"@braintree/sanitize-url": "7.1.1", "@braintree/sanitize-url": "7.1.1",
"@codemirror/autocomplete": "6.18.6", "@codemirror/autocomplete": "6.18.6",

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

@ -23,12 +23,8 @@ export class HaProgressButton extends LitElement {
@property() appearance: Appearance = "accent"; @property() appearance: Appearance = "accent";
@property() variant: @property() variant: "brand" | "danger" | "neutral" | "warning" | "success" =
| "primary" "brand";
| "danger"
| "neutral"
| "warning"
| "success" = "primary";
@state() private _result?: "success" | "error"; @state() private _result?: "success" | "error";
@ -53,7 +49,7 @@ export class HaProgressButton extends LitElement {
.hideContent=${this._result !== undefined} .hideContent=${this._result !== undefined}
> >
${this._hasInitialIcon ${this._hasInitialIcon
? html`<slot name="icon" slot="prefix"></slot>` ? html`<slot name="icon" slot="start"></slot>`
: nothing} : nothing}
<slot <slot
>${this._result >${this._result

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

@ -1,9 +1,8 @@
import Button from "@shoelace-style/shoelace/dist/components/button/button.component"; import Button from "@awesome.me/webawesome/dist/components/button/button";
import styles from "@shoelace-style/shoelace/dist/components/button/button.styles"; import { css, type CSSResultGroup } from "lit";
import { css } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
export type Appearance = "accent" | "filled" | "plain"; export type Appearance = "accent" | "filled" | "outlined" | "plain";
/** /**
* Home Assistant button component * Home Assistant button component
@ -12,227 +11,145 @@ export type Appearance = "accent" | "filled" | "plain";
* @extends {Button} * @extends {Button}
* *
* @summary * @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 - Label of the button
* @slot prefix - The prefix container (usually for icons). * @slot start - The prefix container (usually for icons).
* @slot suffix - The suffix container (usually for icons). * @slot end - The suffix container (usually for icons).
* *
* @csspart base - The component's base wrapper. * @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 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 `<sl-icon>` element. * @csspart caret - The button's caret icon, an `<sl-icon>` element.
* @csspart spinner - The spinner that shows when the button is in the loading state. * @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-height - The height of the button.
* @cssprop --ha-button-font-weight - buttons font weight. * @cssprop --ha-button-radius - The border radius of the button. defaults to `var(--wa-border-radius-pill)`.
* @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.
* *
* @attr {("small"|"medium")} size - Sets the button size. * @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 {("accent"|"filled"|"plain")} appearance - Sets the button appearance.
* @attr {boolean} hideContent - Hides the button content (for overlays). * @attr {boolean} hideContent - Hides the button content (for overlays).
*/ */
@customElement("ha-button") @customElement("ha-button")
export class HaButton extends 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 }) @property({ type: Boolean, attribute: "hide-content", reflect: true })
hideContent = false; hideContent = false;
static override styles = [ static get styles(): CSSResultGroup {
styles, return [
css` Button.styles,
:host { css`
--sl-input-font-family: var( .button {
--ha-button-font-family, /* set theme vars */
var(--ha-font-family-body) --wa-form-control-padding-inline: 16px;
); --wa-font-weight-action: var(--ha-font-weight-medium);
--sl-font-weight-semibold: var( --wa-border-radius-pill: 9999px;
--ha-button-font-weight, --wa-form-control-border-radius: var(
var(--ha-font-weight-medium) --ha-button-radius,
); var(--wa-border-radius-pill)
--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)
);
--sl-spacing-medium: 16px; --wa-form-control-height: var(
--sl-spacing-small: 12px; --ha-button-height,
--sl-spacing-x-small: 8px; var(--button-height, 40px)
);
}
--ha-button-theme-color: var(--ha-button-primary-color); :host([size="small"]) .button {
--ha-button-theme-light-color: var(--ha-button-primary-light-color); --wa-form-control-height: var(
--ha-button-theme-dark-color: var(--ha-button-primary-dark-color); --ha-button-height,
--ha-button-theme-darker-color: var(--ha-button-primary-darker-color); var(--button-height, 32px)
);
}
line-height: 1; :host([variant="brand"]) {
--sl-input-border-width: var(--ha-button-border-width, 0); --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"]) { :host([variant="neutral"]) {
--ha-button-theme-color: var(--ha-button-error-color); --color-fill-normal-active: var(--color-fill-neutral-normal-active);
--ha-button-theme-light-color: var(--ha-button-error-light-color); --color-fill-normal-hover: var(--color-fill-neutral-normal-hover);
--ha-button-theme-dark-color: var(--ha-button-error-dark-color); --color-fill-loud-active: var(--color-fill-neutral-loud-active);
--ha-button-theme-darker-color: var(--ha-button-error-darker-color); --color-fill-loud-hover: var(--color-fill-neutral-loud-hover);
} }
:host([variant="neutral"]) { :host([variant="success"]) {
--ha-button-theme-color: var(--ha-button-neutral-color); --color-fill-normal-active: var(--color-fill-success-normal-active);
--ha-button-theme-light-color: var(--ha-button-neutral-light-color); --color-fill-normal-hover: var(--color-fill-success-normal-hover);
--ha-button-theme-dark-color: var(--ha-button-neutral-dark-color); --color-fill-loud-active: var(--color-fill-success-loud-active);
--ha-button-theme-darker-color: var(--ha-button-neutral-darker-color); --color-fill-loud-hover: var(--color-fill-success-loud-hover);
} }
:host([variant="warning"]) { :host([variant="warning"]) {
--ha-button-theme-color: var(--ha-button-warning-color); --color-fill-normal-active: var(--color-fill-warning-normal-active);
--ha-button-theme-light-color: var(--ha-button-warning-light-color); --color-fill-normal-hover: var(--color-fill-warning-normal-hover);
--ha-button-theme-dark-color: var(--ha-button-warning-dark-color); --color-fill-loud-active: var(--color-fill-warning-loud-active);
--ha-button-theme-darker-color: var(--ha-button-warning-darker-color); --color-fill-loud-hover: var(--color-fill-warning-loud-hover);
} }
:host([variant="success"]) { :host([variant="danger"]) {
--ha-button-theme-color: var(--ha-button-success-color); --color-fill-normal-active: var(--color-fill-danger-normal-active);
--ha-button-theme-light-color: var(--ha-button-success-light-color); --color-fill-normal-hover: var(--color-fill-danger-normal-hover);
--ha-button-theme-dark-color: var(--ha-button-success-dark-color); --color-fill-loud-active: var(--color-fill-danger-loud-active);
--ha-button-theme-darker-color: var(--ha-button-success-darker-color); --color-fill-loud-hover: var(--color-fill-danger-loud-hover);
} }
.button { :host([appearance~="plain"]) .button {
height: var(--ha-button-height, var(--button-height, 40px)); color: var(--wa-color-on-normal);
align-items: center; }
border-radius: var(--ha-button-border-radius, 48px); :host([appearance~="plain"]) .button.disabled {
} background-color: var(--transparent-none);
.button.button--small { color: var(--color-on-disabled-quiet);
border-radius: var(--ha-button-border-radius, 32px); }
height: var(--ha-button-height, var(--button-height, 32px));
}
.button, :host([appearance~="outlined"]) .button.disabled {
.button--standard.button--default, background-color: var(--transparent-none);
.button--standard.button--primary, color: var(--color-on-disabled-quiet);
.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));
}
.button--standard.button--default:active:not(.button--disabled), @media (hover: hover) {
.button--standard.button--primary:active:not(.button--disabled), :host([appearance~="filled"])
.button--standard.button--neutral:active:not(.button--disabled), .button:not(.disabled):not(.loading):hover {
.button--standard.button--danger:active:not(.button--disabled), background-color: var(--color-fill-normal-hover);
.button--standard.button--warning:active:not(.button--disabled), }
.button--standard.button--success:active:not(.button--disabled), :host([appearance~="accent"])
.button:active:not(.button--disabled) { .button:not(.disabled):not(.loading):hover {
background-color: var(--ha-button-theme-darker-color); background-color: var(--color-fill-loud-hover);
color: var(--ha-button-text-color, var(--text-primary-color)); }
} }
: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~="accent"]) .button {
:host([appearance="plain"]) .button:hover:not(.button--disabled) { background-color: var(
background-color: var(--ha-button-theme-light-color); --wa-color-fill-loud,
color: var(--ha-button-theme-color); var(--wa-color-neutral-fill-loud)
} );
:host([appearance="plain"]) .button { }
background-color: transparent; :host([appearance~="accent"])
color: var(--ha-button-theme-color); .button:not(.disabled):not(.loading):active {
} background-color: var(--color-fill-loud-active);
:host([appearance="plain"]) .button:active:not(.button--disabled) { }
background-color: var(--ha-button-theme-color); :host([appearance~="accent"]) .button.disabled {
color: var(--ha-button-text-color, var(--text-primary-color)); background-color: var(--color-fill-disabled-loud-resting);
} color: var(--color-on-disabled-loud);
}
.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;
}
`,
];
} }
declare global { declare global {

2
src/components/ha-copy-textfield.ts
View File

@ -49,7 +49,7 @@ export class HaCopyTextfield extends LitElement {
: nothing} : nothing}
</div> </div>
<ha-button @click=${this._copy} appearance="filled"> <ha-button @click=${this._copy} appearance="filled">
<ha-svg-icon slot="prefix" .path=${mdiContentCopy}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
${this.label || this.hass.localize("ui.common.copy")} ${this.label || this.hass.localize("ui.common.copy")}
</ha-button> </ha-button>
</div> </div>

4
src/components/ha-file-upload.ts
View File

@ -118,13 +118,13 @@ export class HaFileUpload extends LitElement {
@dragleave=${this._handleDragEnd} @dragleave=${this._handleDragEnd}
@dragend=${this._handleDragEnd} @dragend=${this._handleDragEnd}
>${!this.value >${!this.value
? html` <ha-button ? html`<ha-button
size="small" size="small"
appearance="filled" appearance="filled"
@click=${this._openFilePicker} @click=${this._openFilePicker}
> >
<ha-svg-icon <ha-svg-icon
slot="prefix" slot="start"
.path=${this.icon || mdiFileUpload} .path=${this.icon || mdiFileUpload}
></ha-svg-icon> ></ha-svg-icon>
${this.label || localize("ui.components.file-upload.label")} ${this.label || localize("ui.components.file-upload.label")}

2
src/components/ha-form/ha-form-optional_actions.ts
View File

@ -122,7 +122,7 @@ export class HaFormOptionalActions extends LitElement implements HaFormElement {
@closed=${stopPropagation} @closed=${stopPropagation}
> >
<ha-button slot="trigger" appearance="filled" size="small"> <ha-button slot="trigger" appearance="filled" size="small">
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon> <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
${this.localize?.("ui.components.form-optional-actions.add") || ${this.localize?.("ui.components.form-optional-actions.add") ||
"Add interaction"} "Add interaction"}
</ha-button> </ha-button>

2
src/components/media-player/dialog-media-manage.ts
View File

@ -127,7 +127,7 @@ class DialogMediaManage extends LitElement {
)} )}
@click=${this._handleDelete} @click=${this._handleDelete}
> >
<ha-svg-icon .path=${mdiDelete} slot="prefix"></ha-svg-icon> <ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
</ha-button> </ha-button>
${this._deleting ${this._deleting

2
src/components/media-player/ha-media-manage-button.ts
View File

@ -39,7 +39,7 @@ class MediaManageButton extends LitElement {
} }
return html` return html`
<ha-button appearance="plain" size="small" @click=${this._manage}> <ha-button appearance="plain" size="small" @click=${this._manage}>
<ha-svg-icon .path=${mdiFolderEdit} slot="prefix"></ha-svg-icon> <ha-svg-icon .path=${mdiFolderEdit} slot="start"></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
"ui.components.media-browser.file_management.manage" "ui.components.media-browser.file_management.manage"
)} )}

2
src/components/media-player/ha-media-player-browse.ts
View File

@ -451,7 +451,7 @@ export class HaMediaPlayerBrowse extends LitElement {
.path=${this.action === "play" .path=${this.action === "play"
? mdiPlay ? mdiPlay
: mdiPlus} : mdiPlus}
slot="prefix" slot="start"
></ha-svg-icon> ></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
`ui.components.media-browser.${this.action}` `ui.components.media-browser.${this.action}`

2
src/components/media-player/ha-media-upload-button.ts
View File

@ -40,7 +40,7 @@ class MediaUploadButton extends LitElement {
@click=${this._startUpload} @click=${this._startUpload}
.loading=${this._uploading > 0} .loading=${this._uploading > 0}
> >
<ha-svg-icon .path=${mdiUpload} slot="prefix"></ha-svg-icon> <ha-svg-icon .path=${mdiUpload} slot="start"></ha-svg-icon>
${this._uploading > 0 ${this._uploading > 0
? this.hass.localize( ? this.hass.localize(
"ui.components.media-browser.file_management.uploading", "ui.components.media-browser.file_management.uploading",

2
src/dialogs/generic/dialog-box.ts
View File

@ -117,7 +117,7 @@ class DialogBox extends LitElement {
@click=${this._confirm} @click=${this._confirm}
?dialogInitialFocus=${!this._params.prompt && ?dialogInitialFocus=${!this._params.prompt &&
!this._params.destructive} !this._params.destructive}
variant=${this._params.destructive ? "danger" : "primary"} variant=${this._params.destructive ? "danger" : "brand"}
> >
${this._params.confirmText ${this._params.confirmText
? this._params.confirmText ? this._params.confirmText

4
src/dialogs/more-info/controls/more-info-media_player.ts
View File

@ -78,7 +78,7 @@ class MoreInfoMediaPlayer extends LitElement {
> >
<ha-svg-icon <ha-svg-icon
.path=${mdiPlayBoxMultiple} .path=${mdiPlayBoxMultiple}
slot="prefix" slot="start"
></ha-svg-icon> ></ha-svg-icon>
${this.hass.localize("ui.card.media_player.browse_media")} ${this.hass.localize("ui.card.media_player.browse_media")}
</ha-button> </ha-button>
@ -94,7 +94,7 @@ class MoreInfoMediaPlayer extends LitElement {
> >
<ha-svg-icon <ha-svg-icon
.path=${mdiSpeakerMultiple} .path=${mdiSpeakerMultiple}
slot="prefix" slot="start"
></ha-svg-icon> ></ha-svg-icon>
${groupMembers && groupMembers > 1 ${groupMembers && groupMembers > 1
? html`<span class="badge"> ? html`<span class="badge">

2
src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts
View File

@ -103,7 +103,7 @@ export class CloudStepIntro extends LitElement {
rel="noreferrer noopener" rel="noreferrer noopener"
appearance="plain" appearance="plain"
> >
<ha-svg-icon .path=${mdiOpenInNew} slot="prefix"></ha-svg-icon> <ha-svg-icon .path=${mdiOpenInNew} slot="start"></ha-svg-icon>
nabucasa.com nabucasa.com
</ha-button> </ha-button>
<ha-button @click=${this._signUp} <ha-button @click=${this._signUp}

5
src/panels/config/areas/ha-config-area-page.ts
View File

@ -272,10 +272,7 @@ class HaConfigAreaPage extends LitElement {
.entry=${area} .entry=${area}
@click=${this._showSettings} @click=${this._showSettings}
> >
<ha-svg-icon <ha-svg-icon .path=${mdiImagePlus} slot="start"></ha-svg-icon>
.path=${mdiImagePlus}
slot="prefix"
></ha-svg-icon>
${this.hass.localize("ui.panel.config.areas.add_picture")} ${this.hass.localize("ui.panel.config.areas.add_picture")}
</ha-button>`} </ha-button>`}
<ha-card <ha-card

4
src/panels/config/automation/action/ha-automation-action.ts
View File

@ -113,7 +113,7 @@ export default class HaAutomationAction extends LitElement {
@click=${this._addActionDialog} @click=${this._addActionDialog}
size="small" size="small"
> >
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon> <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.add" "ui.panel.config.automation.editor.actions.add"
)} )}
@ -124,7 +124,7 @@ export default class HaAutomationAction extends LitElement {
@click=${this._addActionBuildingBlockDialog} @click=${this._addActionBuildingBlockDialog}
size="small" size="small"
> >
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon> <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.actions.add_building_block" "ui.panel.config.automation.editor.actions.add_building_block"
)} )}

4
src/panels/config/automation/condition/ha-automation-condition.ts
View File

@ -162,7 +162,7 @@ export default class HaAutomationCondition extends LitElement {
@click=${this._addConditionDialog} @click=${this._addConditionDialog}
size="small" size="small"
> >
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon> <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.conditions.add" "ui.panel.config.automation.editor.conditions.add"
)} )}
@ -173,7 +173,7 @@ export default class HaAutomationCondition extends LitElement {
@click=${this._addConditionBuildingBlockDialog} @click=${this._addConditionBuildingBlockDialog}
size="small" size="small"
> >
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon> <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.conditions.add_building_block" "ui.panel.config.automation.editor.conditions.add_building_block"
)} )}

2
src/panels/config/automation/trigger/ha-automation-trigger.ts
View File

@ -117,7 +117,7 @@ export default class HaAutomationTrigger extends LitElement {
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.automation.editor.triggers.add" "ui.panel.config.automation.editor.triggers.add"
)} )}
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon> <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
</ha-button> </ha-button>
</div> </div>
</div> </div>

2
src/panels/config/backup/components/config/ha-backup-config-encryption-key.ts
View File

@ -42,7 +42,7 @@ class HaBackupConfigEncryptionKey extends LitElement {
@click=${this._download} @click=${this._download}
size="small" size="small"
> >
<ha-svg-icon .path=${mdiDownload} slot="prefix"></ha-svg-icon> <ha-svg-icon .path=${mdiDownload} slot="start"></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.backup.encryption_key.download_emergency_kit_action" "ui.panel.config.backup.encryption_key.download_emergency_kit_action"
)} )}

2
src/panels/config/backup/ha-config-backup-settings.ts
View File

@ -295,7 +295,7 @@ class HaConfigBackupSettings extends LitElement {
rel="noreferrer" rel="noreferrer"
appearance="plain" appearance="plain"
> >
<ha-svg-icon slot="prefix" .path=${mdiOpenInNew}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiOpenInNew}></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.backup.settings.locations.more_locations" "ui.panel.config.backup.settings.locations.more_locations"
)} )}

7
src/panels/config/cloud/account/dialog-cloud-tts-try.ts
View File

@ -122,10 +122,7 @@ export class DialogTryTts extends LitElement {
@click=${this._playExample} @click=${this._playExample}
.disabled=${this._loadingExample} .disabled=${this._loadingExample}
> >
<ha-svg-icon <ha-svg-icon slot="start" .path=${mdiPlayCircleOutline}></ha-svg-icon>
slot="prefix"
.path=${mdiPlayCircleOutline}
></ha-svg-icon>
${this.hass.localize("ui.panel.config.cloud.account.tts.dialog.play")} ${this.hass.localize("ui.panel.config.cloud.account.tts.dialog.play")}
</ha-button> </ha-button>
<ha-button <ha-button
@ -134,7 +131,7 @@ export class DialogTryTts extends LitElement {
.disabled=${target === "browser"} .disabled=${target === "browser"}
@click=${this._createAutomation} @click=${this._createAutomation}
> >
<ha-svg-icon slot="prefix" .path=${mdiRobot}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiRobot}></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.cloud.account.tts.dialog.create_automation" "ui.panel.config.cloud.account.tts.dialog.create_automation"
)} )}

2
src/panels/config/devices/ha-config-device-page.ts
View File

@ -781,7 +781,7 @@ export class HaConfigDevicePage extends LitElement {
<ha-svg-icon <ha-svg-icon
class=${ifDefined(firstDeviceAction!.classes)} class=${ifDefined(firstDeviceAction!.classes)}
.path=${firstDeviceAction!.icon} .path=${firstDeviceAction!.icon}
slot="prefix" slot="start"
></ha-svg-icon> ></ha-svg-icon>
` `
: nothing} : nothing}

2
src/panels/config/energy/components/ha-energy-battery-settings.ts
View File

@ -138,7 +138,7 @@ export class EnergyBatterySettings extends LitElement {
appearance="filled" appearance="filled"
size="small" size="small"
> >
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.energy.battery.add_battery_system" "ui.panel.config.energy.battery.add_battery_system"
)}</ha-button )}</ha-button

2
src/panels/config/energy/components/ha-energy-device-settings.ts
View File

@ -122,7 +122,7 @@ export class EnergyDeviceSettings extends LitElement {
appearance="filled" appearance="filled"
size="small" size="small"
> >
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon
>${this.hass.localize( >${this.hass.localize(
"ui.panel.config.energy.device_consumption.add_device" "ui.panel.config.energy.device_consumption.add_device"
)}</ha-button )}</ha-button

2
src/panels/config/energy/components/ha-energy-gas-settings.ts
View File

@ -125,7 +125,7 @@ export class EnergyGasSettings extends LitElement {
appearance="filled" appearance="filled"
size="small" size="small"
> >
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon
>${this.hass.localize( >${this.hass.localize(
"ui.panel.config.energy.gas.add_gas_source" "ui.panel.config.energy.gas.add_gas_source"
)}</ha-button )}</ha-button

6
src/panels/config/energy/components/ha-energy-grid-settings.ts
View File

@ -167,7 +167,7 @@ export class EnergyGridSettings extends LitElement {
size="small" size="small"
@click=${this._addFromSource} @click=${this._addFromSource}
> >
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon> <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.energy.grid.add_consumption" "ui.panel.config.energy.grid.add_consumption"
)}</ha-button )}</ha-button
@ -219,7 +219,7 @@ export class EnergyGridSettings extends LitElement {
appearance="filled" appearance="filled"
size="small" size="small"
> >
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon
>${this.hass.localize( >${this.hass.localize(
"ui.panel.config.energy.grid.add_return" "ui.panel.config.energy.grid.add_return"
)}</ha-button )}</ha-button
@ -274,7 +274,7 @@ export class EnergyGridSettings extends LitElement {
appearance="filled" appearance="filled"
size="small" size="small"
> >
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon> <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.energy.grid.add_co2_signal" "ui.panel.config.energy.grid.add_co2_signal"
)} )}

2
src/panels/config/energy/components/ha-energy-solar-settings.ts
View File

@ -137,7 +137,7 @@ export class EnergySolarSettings extends LitElement {
appearance="filled" appearance="filled"
size="small" size="small"
> >
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.energy.solar.add_solar_production" "ui.panel.config.energy.solar.add_solar_production"
)} )}

2
src/panels/config/energy/components/ha-energy-water-settings.ts
View File

@ -126,7 +126,7 @@ export class EnergyWaterSettings extends LitElement {
appearance="filled" appearance="filled"
size="small" size="small"
> >
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon
>${this.hass.localize( >${this.hass.localize(
"ui.panel.config.energy.water.add_water_source" "ui.panel.config.energy.water.add_water_source"
)}</ha-button )}</ha-button

2
src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts
View File

@ -185,7 +185,7 @@ export class DialogEnergySolarSettings
size="small" size="small"
@click=${this._addForecast} @click=${this._addForecast}
> >
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon> <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.energy.solar.dialog.add_forecast" "ui.panel.config.energy.solar.dialog.add_forecast"
)} )}

2
src/panels/config/integrations/ha-config-flow-card.ts
View File

@ -51,7 +51,7 @@ export class HaConfigFlowCard extends LitElement {
: ""} : ""}
<ha-button <ha-button
@click=${this._continueFlow} @click=${this._continueFlow}
variant=${attention ? "danger" : "primary"} variant=${attention ? "danger" : "brand"}
appearance="filled" appearance="filled"
> >
${this.hass.localize( ${this.hass.localize(

2
src/panels/config/integrations/ha-config-integration-page.ts
View File

@ -550,7 +550,7 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
.flowType=${flowType} .flowType=${flowType}
.disabled=${!normalEntries.length} .disabled=${!normalEntries.length}
> >
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
`component.${this.domain}.config_subentries.${flowType}.initiate_flow.user` `component.${this.domain}.config_subentries.${flowType}.initiate_flow.user`
)}</ha-button )}</ha-button

4
src/panels/config/integrations/ha-config-integrations-dashboard.ts
View File

@ -610,7 +610,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
appearance="filled" appearance="filled"
size="small" size="small"
> >
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.integrations.add_integration" "ui.panel.config.integrations.add_integration"
)} )}
@ -643,7 +643,7 @@ class HaConfigIntegrationsDashboard extends KeyboardShortcutMixin(
size="small" size="small"
> >
<ha-svg-icon <ha-svg-icon
slot="prefix" slot="start"
.path=${mdiPlus} .path=${mdiPlus}
></ha-svg-icon> ></ha-svg-icon>
${this.hass.localize( ${this.hass.localize(

38
src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
View File

@ -207,29 +207,27 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
</div> </div>
</div> </div>
<div class="card-actions"> <div class="card-actions">
<a <ha-button
appearance="plain"
href=${`/config/devices/dashboard?historyBack=1&config_entry=${this.configEntryId}`} href=${`/config/devices/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
> >
<ha-button> ${this.hass.localize("ui.panel.config.devices.caption")}
${this.hass.localize("ui.panel.config.devices.caption")} </ha-button>
</ha-button> <ha-button
</a> appearance="plain"
<a
href=${`/config/entities/dashboard?historyBack=1&config_entry=${this.configEntryId}`} href=${`/config/entities/dashboard?historyBack=1&config_entry=${this.configEntryId}`}
> >
<ha-button> ${this.hass.localize("ui.panel.config.entities.caption")}
${this.hass.localize("ui.panel.config.entities.caption")} </ha-button>
</ha-button>
</a>
${this._provisioningEntries?.length ${this._provisioningEntries?.length
? html`<a ? html`<ha-button
appearance="plain"
href=${`provisioned?config_entry=${this.configEntryId}`} href=${`provisioned?config_entry=${this.configEntryId}`}
><ha-button> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.provisioned_devices" "ui.panel.config.zwave_js.dashboard.provisioned_devices"
)} )}
</ha-button></a </ha-button>`
>`
: nothing} : nothing}
</div> </div>
</ha-card> </ha-card>
@ -410,6 +408,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
</div> </div>
<div class="card-actions"> <div class="card-actions">
<ha-button <ha-button
appearance="plain"
@click=${this._removeNodeClicked} @click=${this._removeNodeClicked}
.disabled=${this._status !== "connected" || .disabled=${this._status !== "connected" ||
(this._network?.controller.inclusion_state !== (this._network?.controller.inclusion_state !==
@ -422,6 +421,7 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
)} )}
</ha-button> </ha-button>
<ha-button <ha-button
appearance="plain"
@click=${this._rebuildNetworkRoutesClicked} @click=${this._rebuildNetworkRoutesClicked}
.disabled=${this._status === "disconnected"} .disabled=${this._status === "disconnected"}
> >
@ -490,15 +490,16 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
"ui.panel.config.zwave_js.dashboard.nvm_backup.restoring" "ui.panel.config.zwave_js.dashboard.nvm_backup.restoring"
)} )}
${this._restoreProgress}%` ${this._restoreProgress}%`
: html`<ha-button @click=${this._downloadBackup}> : html`<ha-button appearance="plain" @click=${this._downloadBackup}>
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.nvm_backup.download_backup" "ui.panel.config.zwave_js.dashboard.nvm_backup.download_backup"
)} )}
</ha-button> </ha-button>
<div class="upload-button"> <div class="upload-button">
<ha-button <ha-button
appearance="plain"
@click=${this._restoreButtonClick} @click=${this._restoreButtonClick}
class="warning" variant="danger"
> >
<span class="button-content"> <span class="button-content">
${this.hass.localize( ${this.hass.localize(
@ -515,8 +516,9 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
/> />
</div> </div>
<ha-button <ha-button
variant="danger"
@click=${this._openConfigFlow} @click=${this._openConfigFlow}
class="warning migrate-button" class="migrate-button"
> >
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.zwave_js.dashboard.nvm_backup.migrate" "ui.panel.config.zwave_js.dashboard.nvm_backup.migrate"
@ -963,8 +965,8 @@ class ZWaveJSConfigDashboard extends SubscribeMixin(LitElement) {
} }
.upload-button { .upload-button {
display: inline-block;
position: relative; position: relative;
display: flex;
} }
.upload-button ha-button { .upload-button ha-button {

2
src/panels/config/network/ha-config-url-form.ts
View File

@ -176,7 +176,7 @@ class ConfigUrlForm extends SubscribeMixin(LitElement) {
.url=${externalUrl} .url=${externalUrl}
@click=${this._copyURL} @click=${this._copyURL}
> >
<ha-svg-icon slot="prefix" .path=${mdiContentCopy}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
${this.hass.localize("ui.panel.config.common.copy_link")} ${this.hass.localize("ui.panel.config.common.copy_link")}
</ha-button> </ha-button>
</div> </div>

4
src/panels/config/network/supervisor-network.ts
View File

@ -455,7 +455,7 @@ export class HassioNetwork extends LitElement {
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.network.supervisor.add_address" "ui.panel.config.network.supervisor.add_address"
)} )}
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
</ha-button> </ha-button>
` `
: nothing} : nothing}
@ -513,7 +513,7 @@ export class HassioNetwork extends LitElement {
"ui.panel.config.network.supervisor.add_dns_server" "ui.panel.config.network.supervisor.add_dns_server"
)} )}
<ha-svg-icon <ha-svg-icon
slot="prefix" slot="start"
.path=${this._dnsMenuOpen ? mdiMenuDown : mdiPlus} .path=${this._dnsMenuOpen ? mdiMenuDown : mdiPlus}
></ha-svg-icon> ></ha-svg-icon>
</ha-button> </ha-button>

2
src/panels/config/person/ha-config-person.ts
View File

@ -122,7 +122,7 @@ export class HaConfigPerson extends LitElement {
appearance="filled" appearance="filled"
size="small" size="small"
> >
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
${hass.localize( ${hass.localize(
"ui.panel.config.person.create_person" "ui.panel.config.person.create_person"
)}</ha-button )}</ha-button

2
src/panels/config/script/ha-script-fields.ts
View File

@ -51,7 +51,7 @@ export default class HaScriptFields extends LitElement {
@click=${this._addField} @click=${this._addField}
.disabled=${this.disabled} .disabled=${this.disabled}
> >
<ha-svg-icon .path=${mdiPlus} slot="prefix"></ha-svg-icon> <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
${this.hass.localize("ui.panel.config.script.editor.field.add_field")} ${this.hass.localize("ui.panel.config.script.editor.field.add_field")}
</ha-button> </ha-button>
`; `;

2
src/panels/config/voice-assistants/assist-pref.ts
View File

@ -215,7 +215,7 @@ export class AssistPref extends LitElement {
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.voice_assistants.assistants.pipeline.add_assistant" "ui.panel.config.voice_assistants.assistants.pipeline.add_assistant"
)} )}
<ha-svg-icon slot="prefix" .path=${mdiPlus}></ha-svg-icon> <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon>
</ha-button> </ha-button>
<ha-settings-row> <ha-settings-row>
<span slot="heading"> <span slot="heading">

2
src/panels/lovelace/cards/hui-alarm-panel-card.ts
View File

@ -265,7 +265,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
@click=${this._handleActionClick} @click=${this._handleActionClick}
appearance="filled" appearance="filled"
size="small" size="small"
variant=${stateAction === "disarm" ? "danger" : "primary"} variant=${stateAction === "disarm" ? "danger" : "brand"}
> >
${this._actionDisplay(stateAction)} ${this._actionDisplay(stateAction)}
</ha-button> </ha-button>

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

@ -296,32 +296,6 @@ export const colorStyles = css`
); );
--chip-background-color: rgba(var(--rgb-primary-text-color), 0.15); --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 */ /* Vaadin */
--material-body-text-color: var(--primary-text-color); --material-body-text-color: var(--primary-text-color);
--material-background-color: var(--card-background-color); --material-background-color: var(--card-background-color);

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

@ -17,7 +17,7 @@ export const coreColorStyles = css`
--color-primary-60: #37c8fd; --color-primary-60: #37c8fd;
--color-primary-70: #7bd4fb; --color-primary-70: #7bd4fb;
--color-primary-80: #b9e6fc; --color-primary-80: #b9e6fc;
--color-primary-90: #b9e6fc; --color-primary-90: #dff3fc;
--color-primary-95: #eff9fe; --color-primary-95: #eff9fe;
/* neutral */ /* neutral */

3
src/resources/theme/color/index.ts
View File

@ -8,6 +8,7 @@ import {
darkSemanticColorStyles, darkSemanticColorStyles,
semanticColorStyles, semanticColorStyles,
} from "./semantic.globals"; } from "./semantic.globals";
import { waColorStyles } from "./wa.globals";
export const darkColorVariables = { export const darkColorVariables = {
...extractVars(darkColorStyles), ...extractVars(darkColorStyles),
@ -17,10 +18,12 @@ export const darkColorVariables = {
export const colorDerivedVariables = { export const colorDerivedVariables = {
...extractDerivedVars(colorStyles), ...extractDerivedVars(colorStyles),
...extractDerivedVars(semanticColorStyles), ...extractDerivedVars(semanticColorStyles),
...extractDerivedVars(waColorStyles),
}; };
export const colorStylesCollection = [ export const colorStylesCollection = [
coreColorStyles.toString(), coreColorStyles.toString(),
semanticColorStyles.toString(), semanticColorStyles.toString(),
colorStyles.toString(), colorStyles.toString(),
waColorStyles.toString(),
]; ];

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

@ -318,7 +318,7 @@ export const darkSemanticColorStyles = css`
/* on primary */ /* on primary */
--color-on-primary-quiet: var(--color-primary-70); --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 */ /* on neutral */
--color-on-neutral-quiet: var(--color-neutral-70); --color-on-neutral-quiet: var(--color-neutral-70);

55
src/resources/theme/color/wa.globals.ts Normal file
View File

@ -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);
}
`;

36
yarn.lock
View File

@ -41,6 +41,23 @@ __metadata:
languageName: node languageName: node
linkType: hard 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": "@babel/code-frame@npm:7.26.2":
version: 7.26.2 version: 7.26.2
resolution: "@babel/code-frame@npm:7.26.2" resolution: "@babel/code-frame@npm:7.26.2"
@ -1651,7 +1668,7 @@ __metadata:
languageName: node languageName: node
linkType: hard 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 version: 1.7.2
resolution: "@floating-ui/dom@npm:1.7.2" resolution: "@floating-ui/dom@npm:1.7.2"
dependencies: dependencies:
@ -9323,6 +9340,7 @@ __metadata:
version: 0.0.0-use.local version: 0.0.0-use.local
resolution: "home-assistant-frontend@workspace:." resolution: "home-assistant-frontend@workspace:."
dependencies: dependencies:
"@awesome.me/webawesome": "npm:3.0.0-beta.3"
"@babel/core": "npm:7.28.0" "@babel/core": "npm:7.28.0"
"@babel/helper-define-polyfill-provider": "npm:0.6.5" "@babel/helper-define-polyfill-provider": "npm:0.6.5"
"@babel/plugin-transform-runtime": "npm:7.28.0" "@babel/plugin-transform-runtime": "npm:7.28.0"
@ -11516,6 +11534,15 @@ __metadata:
languageName: node languageName: node
linkType: hard 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": "natural-compare@npm:^1.4.0":
version: 1.4.0 version: 1.4.0
resolution: "natural-compare@npm:1.4.0" resolution: "natural-compare@npm:1.4.0"
@ -13979,6 +14006,13 @@ __metadata:
languageName: node languageName: node
linkType: hard 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": "superstruct@npm:2.0.2":
version: 2.0.2 version: 2.0.2
resolution: "superstruct@npm:2.0.2" resolution: "superstruct@npm:2.0.2"