diff --git a/src/components/ha-button.ts b/src/components/ha-button.ts index aea27db23c..517e201b3a 100644 --- a/src/components/ha-button.ts +++ b/src/components/ha-button.ts @@ -26,7 +26,7 @@ export type Appearance = "accent" | "filled" | "plain"; * @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-font-weight-medium - Medium font weight for button text. + * @cssprop --ha-button-font-weight - buttons font weight. * @cssprop --ha-button-border-width - Border width for the button. * @cssprop --ha-button-theme-color - Main color for the button. * @cssprop --ha-button-theme-darker-color - Darker variant of the main color. @@ -35,6 +35,8 @@ export type Appearance = "accent" | "filled" | "plain"; * @cssprop --ha-button-border-radius - Border radius for the button. * @cssprop --ha-button-text-color - Text color for the button. * @cssprop --ha-button-font-size - Font weight for the button text. + * @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. * * @attr {("small"|"medium")} size - Sets the button size. * @attr {("primary"|"danger"|"neutral"|"warning"|"success")} variant - Sets the button color variant. "primary" is default. @@ -95,7 +97,7 @@ export class HaButton extends Button { --ha-button-theme-color: #545868; --ha-button-theme-darker-color: #373a44; --ha-button-theme-active-color: #1c1d22; - --ha-button-theme-lighter-color: #e4e5e9; + --ha-button-theme-lighter-color: #767986; } :host([variant="warning"]) { @@ -180,20 +182,30 @@ export class HaButton extends Button { color: var(--white-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: 8px; + padding-inline-start: var(--ha-button-padding-inline-start, 8px); } .button--has-prefix.button--small .button__label { - padding-inline-start: 4px; + 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: 8px; + 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: 4px; + padding-inline-end: var(--ha-button-padding-inline-end, 4px); } /* diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts index 4ef0f1dfc4..17f3e5538f 100644 --- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts +++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts @@ -10,14 +10,14 @@ import { customElement, property, state } from "lit/decorators"; import { storage } from "../../common/decorators/storage"; import { fireEvent } from "../../common/dom/fire_event"; import { stopPropagation } from "../../common/dom/stop_propagation"; +import "../../components/ha-alert"; +import "../../components/ha-assist-chat"; import "../../components/ha-button"; import "../../components/ha-button-menu"; import "../../components/ha-dialog"; import "../../components/ha-dialog-header"; import "../../components/ha-icon-button"; import "../../components/ha-list-item"; -import "../../components/ha-alert"; -import "../../components/ha-assist-chat"; import "../../components/ha-spinner"; import type { AssistPipeline } from "../../data/assist_pipeline"; import { @@ -110,10 +110,15 @@ export class HaVoiceCommandDialog extends LitElement { activatable fixed > - + ${this._pipeline?.name} @@ -269,19 +274,18 @@ export class HaVoiceCommandDialog extends LitElement { margin-inline-start: -8px; } ha-button-menu ha-button { - --mdc-theme-primary: var(--secondary-text-color); - --mdc-typography-button-text-transform: none; - --mdc-typography-button-font-size: unset; - --mdc-typography-button-font-weight: var(--ha-font-weight-normal); - --mdc-typography-button-letter-spacing: var( - --mdc-typography-headline6-letter-spacing, - 0.0125em - ); - --mdc-typography-button-line-height: var( - --mdc-typography-headline6-line-height, - var(--ha-line-height-expanded) - ); - --button-height: auto; + --ha-button-theme-color: transparent; + --ha-button-text-color: var(--primary-text-color); + --ha-button-padding-inline-start: 8px; + --ha-button-font-weight: var(--ha-font-weight-normal); + --ha-button-border-radius: 4px; + --ha-button-theme-lighter-color: rgba(0, 0, 0, 0.1); + --ha-button-height: 24px; + } + @media (prefers-color-scheme: dark) { + ha-button-menu ha-button { + --ha-button-theme-lighter-color: rgba(255, 255, 255, 0.1); + } } ha-button-menu ha-button ha-svg-icon { height: 28px;