diff --git a/src/components/ha-outlined-button.ts b/src/components/ha-outlined-button.ts new file mode 100644 index 0000000000..87076e5496 --- /dev/null +++ b/src/components/ha-outlined-button.ts @@ -0,0 +1,26 @@ +import { css } from "lit"; +import { customElement } from "lit/decorators"; +import { OutlinedButton } from "@material/web/button/lib/outlined-button"; +import { styles as outlinedStyles } from "@material/web/button/lib/outlined-styles.css"; +import { styles as sharedStyles } from "@material/web/button/lib/shared-styles.css"; + +@customElement("ha-outlined-button") +export class HaOutlinedButton extends OutlinedButton { + static override styles = [ + sharedStyles, + outlinedStyles, + css` + :host { + --ha-icon-display: block; + --md-sys-color-primary: var(--primary-text-color); + --md-sys-color-outline: var(--divider-color); + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + "ha-outlined-button": HaOutlinedButton; + } +} diff --git a/src/components/ha-outlined-icon-button.ts b/src/components/ha-outlined-icon-button.ts new file mode 100644 index 0000000000..c4d758e4b5 --- /dev/null +++ b/src/components/ha-outlined-icon-button.ts @@ -0,0 +1,39 @@ +import { css } from "lit"; +import { customElement } from "lit/decorators"; + +import { IconButton } from "@material/web/iconbutton/lib/icon-button"; +import { styles as outlinedStyles } from "@material/web/iconbutton/lib/outlined-styles.css"; +import { styles as sharedStyles } from "@material/web/iconbutton/lib/shared-styles.css"; + +@customElement("ha-outlined-icon-button") +export class HaOutlinedIconButton extends IconButton { + protected override getRenderClasses() { + return { + ...super.getRenderClasses(), + outlined: true, + }; + } + + static override styles = [ + sharedStyles, + outlinedStyles, + css` + :host { + --ha-icon-display: block; + --md-sys-color-on-surface: var(--secondary-text-color); + --md-sys-color-on-surface-variant: var(--secondary-text-color); + --md-sys-color-on-surface-rgb: var(--rgb-secondary-text-color); + } + button { + /* Fix md-outlined-icon-button padding for iOS */ + padding: 0; + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + "ha-outlined-icon-button": HaOutlinedIconButton; + } +} diff --git a/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts b/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts index abb08b7e0e..7fadaa5776 100644 --- a/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts +++ b/src/dialogs/more-info/controls/more-info-alarm_control_panel.ts @@ -1,10 +1,10 @@ -import "@material/web/button/outlined-button"; import { mdiShieldOff } from "@mdi/js"; import { css, CSSResultGroup, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { styleMap } from "lit/directives/style-map"; import { domainIcon } from "../../../common/entity/domain_icon"; import { stateColorCss } from "../../../common/entity/state_color"; +import "../../../components/ha-outlined-button"; import { AlarmControlPanelEntity } from "../../../data/alarm_control_panel"; import type { HomeAssistant } from "../../../types"; import "../components/alarm_control_panel/ha-more-info-alarm_control_panel-modes"; @@ -67,12 +67,12 @@ class MoreInfoAlarmControlPanel extends LitElement { .path=${domainIcon("alarm_control_panel", this.stateObj)} > - + ${this.hass.localize( "ui.dialogs.more_info_control.alarm_control_panel.disarm_action" )} - + ` : html` @@ -94,11 +94,6 @@ class MoreInfoAlarmControlPanel extends LitElement { :host { --icon-color: var(--primary-color); } - md-outlined-button { - --ha-icon-display: block; - --md-sys-color-primary: var(--primary-text-color); - --md-sys-color-outline: var(--divider-color); - } @keyframes pulse { 0% { opacity: 1; @@ -139,7 +134,7 @@ class MoreInfoAlarmControlPanel extends LitElement { transition: background-color 180ms ease-in-out; opacity: 0.2; } - .status md-outlined-button { + .status ha-outlined-button { margin-top: 32px; } `, diff --git a/src/dialogs/more-info/controls/more-info-fan.ts b/src/dialogs/more-info/controls/more-info-fan.ts index bbbc1f5d36..15c3a1af42 100644 --- a/src/dialogs/more-info/controls/more-info-fan.ts +++ b/src/dialogs/more-info/controls/more-info-fan.ts @@ -1,5 +1,3 @@ -import "@material/web/button/outlined-button"; -import "@material/web/iconbutton/outlined-icon-button"; import { mdiCreation, mdiFan, @@ -8,14 +6,7 @@ import { mdiRotateLeft, mdiRotateRight, } from "@mdi/js"; -import { - css, - CSSResultGroup, - html, - LitElement, - nothing, - PropertyValues, -} from "lit"; +import { CSSResultGroup, html, LitElement, nothing, PropertyValues } from "lit"; import { customElement, property, state } from "lit/decorators"; import { stopPropagation } from "../../../common/dom/stop_propagation"; import { @@ -26,10 +17,12 @@ import { computeStateDisplay } from "../../../common/entity/compute_state_displa import { stateActive } from "../../../common/entity/state_active"; import { supportsFeature } from "../../../common/entity/supports-feature"; import "../../../components/ha-attributes"; +import "../../../components/ha-outlined-button"; +import "../../../components/ha-outlined-icon-button"; import { UNAVAILABLE } from "../../../data/entity"; import { - computeFanSpeedStateDisplay, computeFanSpeedCount, + computeFanSpeedStateDisplay, FanEntity, FanEntityFeature, FAN_SPEED_COUNT_MAX_FOR_BUTTONS, @@ -201,17 +194,17 @@ class MoreInfoFan extends LitElement { ? html`
${supportSpeedPercentage ? html` - - + ` : nothing} ${supportsDirection ? html` - - - + - + ` : nothing} ${supportsOscillate ? html` - - + ` : nothing}
` @@ -279,7 +272,7 @@ class MoreInfoFan extends LitElement { fixed .disabled=${this.stateObj.state === UNAVAILABLE} > - @@ -294,7 +287,7 @@ class MoreInfoFan extends LitElement { slot="icon" path=${mdiCreation} > - + ${this.stateObj.attributes.preset_modes?.map( (mode) => html` @@ -328,16 +321,7 @@ class MoreInfoFan extends LitElement { } static get styles(): CSSResultGroup { - return [ - moreInfoControlStyle, - css` - md-outlined-button { - --ha-icon-display: block; - --md-sys-color-primary: var(--primary-text-color); - --md-sys-color-outline: var(--divider-color); - } - `, - ]; + return moreInfoControlStyle; } } diff --git a/src/dialogs/more-info/controls/more-info-light.ts b/src/dialogs/more-info/controls/more-info-light.ts index c9c9d90944..b1d013bb80 100644 --- a/src/dialogs/more-info/controls/more-info-light.ts +++ b/src/dialogs/more-info/controls/more-info-light.ts @@ -1,6 +1,4 @@ import "@material/mwc-list/mwc-list-item"; -import "@material/web/button/outlined-button"; -import "@material/web/iconbutton/outlined-icon-button"; import { mdiCreation, mdiFileWordBox, @@ -24,6 +22,8 @@ import { supportsFeature } from "../../../common/entity/supports-feature"; import { blankBeforePercent } from "../../../common/translations/blank_before_percent"; import "../../../components/ha-attributes"; import "../../../components/ha-button-menu"; +import "../../../components/ha-outlined-button"; +import "../../../components/ha-outlined-icon-button"; import "../../../components/ha-select"; import { UNAVAILABLE } from "../../../data/entity"; import { forwardHaptic } from "../../../data/haptics"; @@ -129,7 +129,7 @@ class MoreInfoLight extends LitElement {
${supportsBrightness ? html` - - + ` : nothing} ${supportsColorTemp || supportsColor ? html` - - + ` : nothing} ${supportsWhite ? html` - - + ` : nothing}
@@ -189,7 +189,7 @@ class MoreInfoLight extends LitElement { fixed .disabled=${this.stateObj.state === UNAVAILABLE} > - @@ -201,7 +201,7 @@ class MoreInfoLight extends LitElement { this.hass.entities, "effect" )} - + ${this.stateObj.attributes.effect_list.map( (effect: string) => html`