mirror of
https://github.com/home-assistant/frontend.git
synced 2026-04-20 17:43:36 +00:00
Compare commits
3 Commits
add-daily-
...
fix-stale-
| Author | SHA1 | Date | |
|---|---|---|---|
|
c4080a882d | ||
|
|
9785089ea7 | ||
|
|
d220725e5b |
3
.github/workflows/stale.yml
vendored
3
.github/workflows/stale.yml
vendored
@@ -6,6 +6,7 @@ on:
|
||||
- cron: "0 * * * *"
|
||||
|
||||
permissions:
|
||||
actions: write
|
||||
issues: write
|
||||
pull-requests: write
|
||||
|
||||
@@ -17,6 +18,8 @@ jobs:
|
||||
uses: actions/stale@b5d41d4e1d5dceea10e7104786b73624c18a190f # v10.2.0
|
||||
with:
|
||||
repo-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
sort-by: updated
|
||||
ascending: true
|
||||
days-before-stale: 90
|
||||
days-before-close: 7
|
||||
operations-per-run: 25
|
||||
|
||||
@@ -3,37 +3,73 @@ title: Switch / Toggle
|
||||
---
|
||||
|
||||
<style>
|
||||
ha-switch {
|
||||
display: block;
|
||||
.wrapper {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
# Switch `<ha-switch>`
|
||||
|
||||
A toggle switch can represent two states: on and off.
|
||||
A toggle switch representing two states: on and off.
|
||||
|
||||
## Examples
|
||||
## Implementation
|
||||
|
||||
Switch in on state
|
||||
### Example usage
|
||||
|
||||
<div class="wrapper">
|
||||
<ha-switch checked></ha-switch>
|
||||
<ha-switch></ha-switch>
|
||||
<ha-switch disabled></ha-switch>
|
||||
<ha-switch disabled checked></ha-switch>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<ha-switch checked></ha-switch>
|
||||
|
||||
Switch in off state
|
||||
<ha-switch></ha-switch>
|
||||
|
||||
Disabled switch
|
||||
<ha-switch disabled></ha-switch>
|
||||
|
||||
## CSS variables
|
||||
<ha-switch disabled checked></ha-switch>
|
||||
```
|
||||
|
||||
For the switch / toggle there are always two variables, one for the on / checked state and one for the off / unchecked state.
|
||||
### API
|
||||
|
||||
The track element (background rounded rectangle that the round circular handle travels on) is set to being half transparent, so the final color will also be impacted by the color behind the track.
|
||||
This component is based on the webawesome switch component.
|
||||
Check the [webawesome documentation](https://webawesome.com/docs/components/switch/) for more details.
|
||||
|
||||
`switch-checked-color` / `switch-unchecked-color`
|
||||
Set both the color of the round handle and the track behind it. If you want to control them separately, use the variables below instead.
|
||||
**Properties/Attributes**
|
||||
|
||||
`switch-checked-button-color` / `switch-unchecked-button-color`
|
||||
Color of the round handle
|
||||
| Name | Type | Default | Description |
|
||||
| -------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
|
||||
| checked | Boolean | false | The checked state of the switch. |
|
||||
| disabled | Boolean | false | Disables the switch and prevents user interaction. |
|
||||
| required | Boolean | false | Makes the switch a required field. |
|
||||
| haptic | Boolean | false | Enables haptic vibration on toggle. Only use when the new state is applied immediately (not when save is required). |
|
||||
|
||||
`switch-checked-track-color` / `switch-unchecked-track-color`
|
||||
Color of the track behind the round handle
|
||||
**CSS Custom Properties**
|
||||
|
||||
- `--ha-switch-size` - The size of the switch track height. Defaults to `24px`.
|
||||
- `--ha-switch-thumb-size` - The size of the thumb. Defaults to `18px`.
|
||||
- `--ha-switch-width` - The width of the switch track. Defaults to `48px`.
|
||||
- `--ha-switch-thumb-box-shadow` - The box shadow of the thumb. Defaults to `var(--ha-box-shadow-s)`.
|
||||
- `--ha-switch-background-color` - Background color of the unchecked track.
|
||||
- `--ha-switch-thumb-background-color` - Background color of the unchecked thumb.
|
||||
- `--ha-switch-background-color-hover` - Background color of the unchecked track on hover.
|
||||
- `--ha-switch-thumb-background-color-hover` - Background color of the unchecked thumb on hover.
|
||||
- `--ha-switch-border-color` - Border color of the unchecked track.
|
||||
- `--ha-switch-thumb-border-color` - Border color of the unchecked thumb.
|
||||
- `--ha-switch-thumb-border-color-hover` - Border color of the unchecked thumb on hover.
|
||||
- `--ha-switch-checked-background-color` - Background color of the checked track.
|
||||
- `--ha-switch-checked-thumb-background-color` - Background color of the checked thumb.
|
||||
- `--ha-switch-checked-background-color-hover` - Background color of the checked track on hover.
|
||||
- `--ha-switch-checked-thumb-background-color-hover` - Background color of the checked thumb on hover.
|
||||
- `--ha-switch-checked-border-color` - Border color of the checked track.
|
||||
- `--ha-switch-checked-thumb-border-color` - Border color of the checked thumb.
|
||||
- `--ha-switch-checked-border-color-hover` - Border color of the checked track on hover.
|
||||
- `--ha-switch-checked-thumb-border-color-hover` - Border color of the checked thumb on hover.
|
||||
- `--ha-switch-disabled-opacity` - Opacity of the switch when disabled. Defaults to `0.2`.
|
||||
- `--ha-switch-required-marker` - The marker shown after the label for required fields. Defaults to `"*"`.
|
||||
- `--ha-switch-required-marker-offset` - Offset of the required marker. Defaults to `0.1rem`.
|
||||
|
||||
@@ -1 +1,95 @@
|
||||
import type { TemplateResult } from "lit";
|
||||
import { css, html, LitElement } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
|
||||
import "../../../../src/components/ha-card";
|
||||
import "../../../../src/components/ha-switch";
|
||||
import type { HomeAssistant } from "../../../../src/types";
|
||||
|
||||
@customElement("demo-components-ha-switch")
|
||||
export class DemoHaSwitch extends LitElement {
|
||||
@property({ attribute: false }) hass!: HomeAssistant;
|
||||
|
||||
protected render(): TemplateResult {
|
||||
return html`
|
||||
${["light", "dark"].map(
|
||||
(mode) => html`
|
||||
<div class=${mode}>
|
||||
<ha-card header="ha-switch ${mode}">
|
||||
<div class="card-content">
|
||||
<div class="row">
|
||||
<span>Unchecked</span>
|
||||
<ha-switch></ha-switch>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>Checked</span>
|
||||
<ha-switch checked></ha-switch>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>Disabled</span>
|
||||
<ha-switch disabled></ha-switch>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>Disabled checked</span>
|
||||
<ha-switch disabled checked></ha-switch>
|
||||
</div>
|
||||
</div>
|
||||
</ha-card>
|
||||
</div>
|
||||
`
|
||||
)}
|
||||
`;
|
||||
}
|
||||
|
||||
firstUpdated(changedProps) {
|
||||
super.firstUpdated(changedProps);
|
||||
applyThemesOnElement(
|
||||
this.shadowRoot!.querySelector(".dark"),
|
||||
{
|
||||
default_theme: "default",
|
||||
default_dark_theme: "default",
|
||||
themes: {},
|
||||
darkMode: true,
|
||||
theme: "default",
|
||||
},
|
||||
undefined,
|
||||
undefined,
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
:host {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.dark,
|
||||
.light {
|
||||
display: block;
|
||||
background-color: var(--primary-background-color);
|
||||
padding: 0 50px;
|
||||
margin: 16px;
|
||||
border-radius: var(--ha-border-radius-md);
|
||||
}
|
||||
ha-card {
|
||||
margin: 24px auto;
|
||||
}
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ha-space-4);
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--ha-space-4);
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"demo-components-ha-switch": DemoHaSwitch;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,7 +66,6 @@
|
||||
"@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch",
|
||||
"@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
|
||||
"@material/mwc-radio": "0.27.0",
|
||||
"@material/mwc-switch": "0.27.0",
|
||||
"@material/mwc-top-app-bar": "0.27.0",
|
||||
"@material/mwc-top-app-bar-fixed": "0.27.0",
|
||||
"@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
|
||||
|
||||
@@ -1,49 +1,220 @@
|
||||
import { SwitchBase } from "@material/mwc-switch/deprecated/mwc-switch-base";
|
||||
import { styles } from "@material/mwc-switch/deprecated/mwc-switch.css";
|
||||
import { css } from "lit";
|
||||
import Switch from "@home-assistant/webawesome/dist/components/switch/switch";
|
||||
import { css, type CSSResultGroup, type PropertyValues } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { forwardHaptic } from "../data/haptics";
|
||||
|
||||
/**
|
||||
* Home Assistant switch component
|
||||
*
|
||||
* @element ha-switch
|
||||
* @extends {Switch}
|
||||
*
|
||||
* @summary
|
||||
* A toggle switch component supporting Home Assistant theming, based on the webawesome switch.
|
||||
* Represents two states: on and off.
|
||||
*
|
||||
* @cssprop --ha-switch-size - The size of the switch track height. Defaults to `24px`.
|
||||
* @cssprop --ha-switch-thumb-size - The size of the thumb. Defaults to `18px`.
|
||||
* @cssprop --ha-switch-width - The width of the switch track. Defaults to `48px`.
|
||||
* @cssprop --ha-switch-background-color - Background color of the unchecked track.
|
||||
* @cssprop --ha-switch-thumb-background-color - Background color of the unchecked thumb.
|
||||
* @cssprop --ha-switch-background-color-hover - Background color of the unchecked track on hover.
|
||||
* @cssprop --ha-switch-thumb-background-color-hover - Background color of the unchecked thumb on hover.
|
||||
* @cssprop --ha-switch-checked-background-color - Background color of the checked track.
|
||||
* @cssprop --ha-switch-checked-thumb-background-color - Background color of the checked thumb.
|
||||
* @cssprop --ha-switch-checked-background-color-hover - Background color of the checked track on hover.
|
||||
* @cssprop --ha-switch-checked-thumb-background-color-hover - Background color of the checked thumb on hover.
|
||||
* @cssprop --ha-switch-border-color - Border color of the unchecked track.
|
||||
* @cssprop --ha-switch-thumb-border-color - Border color of the unchecked thumb.
|
||||
* @cssprop --ha-switch-thumb-border-color-hover - Border color of the unchecked thumb on hover.
|
||||
* @cssprop --ha-switch-checked-border-color - Border color of the checked track.
|
||||
* @cssprop --ha-switch-checked-thumb-border-color - Border color of the checked thumb.
|
||||
* @cssprop --ha-switch-checked-border-color-hover - Border color of the checked track on hover.
|
||||
* @cssprop --ha-switch-checked-thumb-border-color-hover - Border color of the checked thumb on hover.
|
||||
* @cssprop --ha-switch-thumb-box-shadow - The box shadow of the thumb. Defaults to `var(--ha-box-shadow-s)`.
|
||||
* @cssprop --ha-switch-disabled-opacity - Opacity of the switch when disabled. Defaults to `0.2`.
|
||||
* @cssprop --ha-switch-required-marker - The marker shown after the label for required fields. Defaults to `"*"`.
|
||||
* @cssprop --ha-switch-required-marker-offset - Offset of the required marker. Defaults to `0.1rem`.
|
||||
*
|
||||
* @attr {boolean} checked - The checked state of the switch.
|
||||
* @attr {boolean} disabled - Disables the switch and prevents user interaction.
|
||||
* @attr {boolean} required - Makes the switch a required field.
|
||||
* @attr {boolean} haptic - Enables haptic vibration on toggle. Only use when the new state is applied immediately (not when a save action is required).
|
||||
*/
|
||||
@customElement("ha-switch")
|
||||
export class HaSwitch extends SwitchBase {
|
||||
// Generate a haptic vibration.
|
||||
// Only set to true if the new value of the switch is applied right away when toggling.
|
||||
// Do not add haptic when a user is required to press save.
|
||||
export class HaSwitch extends Switch {
|
||||
/**
|
||||
* Enables haptic vibration on toggle.
|
||||
* Only set to true if the new value of the switch is applied right away when toggling.
|
||||
* Do not add haptic when a user is required to press save.
|
||||
*/
|
||||
@property({ type: Boolean }) public haptic = false;
|
||||
|
||||
protected firstUpdated() {
|
||||
super.firstUpdated();
|
||||
this.addEventListener("change", () => {
|
||||
public updated(changedProperties: PropertyValues<typeof this>) {
|
||||
super.updated(changedProperties);
|
||||
if (changedProperties.has("haptic")) {
|
||||
if (this.haptic) {
|
||||
forwardHaptic(this, "light");
|
||||
this.addEventListener("change", this._forwardHaptic);
|
||||
} else {
|
||||
this.removeEventListener("change", this._forwardHaptic);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
static override styles = [
|
||||
styles,
|
||||
css`
|
||||
:host {
|
||||
--mdc-theme-secondary: var(--switch-checked-color);
|
||||
}
|
||||
.mdc-switch.mdc-switch--checked .mdc-switch__thumb {
|
||||
background-color: var(--switch-checked-button-color);
|
||||
border-color: var(--switch-checked-button-color);
|
||||
}
|
||||
.mdc-switch.mdc-switch--checked .mdc-switch__track {
|
||||
background-color: var(--switch-checked-track-color);
|
||||
border-color: var(--switch-checked-track-color);
|
||||
}
|
||||
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
|
||||
background-color: var(--switch-unchecked-button-color);
|
||||
border-color: var(--switch-unchecked-button-color);
|
||||
}
|
||||
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
|
||||
background-color: var(--switch-unchecked-track-color);
|
||||
border-color: var(--switch-unchecked-track-color);
|
||||
}
|
||||
`,
|
||||
];
|
||||
public disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this.removeEventListener("change", this._forwardHaptic);
|
||||
}
|
||||
|
||||
private _forwardHaptic = () => {
|
||||
forwardHaptic(this, "light");
|
||||
};
|
||||
|
||||
static get styles(): CSSResultGroup {
|
||||
return [
|
||||
Switch.styles,
|
||||
css`
|
||||
:host {
|
||||
--wa-form-control-toggle-size: var(--ha-switch-size, 24px);
|
||||
--wa-form-control-required-content: var(
|
||||
--ha-switch-required-marker,
|
||||
var(--ha-input-required-marker, "*")
|
||||
);
|
||||
--wa-form-control-required-content-offset: var(
|
||||
--ha-switch-required-marker-offset,
|
||||
0.1rem
|
||||
);
|
||||
--thumb-size: var(--ha-switch-thumb-size, 18px);
|
||||
--width: var(--ha-switch-width, 48px);
|
||||
}
|
||||
|
||||
label {
|
||||
height: max(var(--thumb-size), var(--wa-form-control-toggle-size));
|
||||
}
|
||||
|
||||
.switch {
|
||||
background-color: var(
|
||||
--ha-switch-background-color,
|
||||
var(--ha-color-fill-disabled-quiet-resting)
|
||||
);
|
||||
border-color: var(
|
||||
--ha-switch-border-color,
|
||||
var(--ha-color-border-neutral-normal)
|
||||
);
|
||||
}
|
||||
label:not(.disabled):hover .switch,
|
||||
label:not(.disabled) .input:focus-visible ~ .switch {
|
||||
background-color: var(
|
||||
--ha-switch-background-color-hover,
|
||||
var(
|
||||
--ha-switch-background-color,
|
||||
var(--ha-color-fill-disabled-quiet-hover)
|
||||
)
|
||||
);
|
||||
}
|
||||
.checked .switch {
|
||||
background-color: var(
|
||||
--ha-switch-checked-background-color,
|
||||
var(--ha-color-fill-primary-normal-resting)
|
||||
);
|
||||
border-color: var(
|
||||
--ha-switch-checked-border-color,
|
||||
var(--ha-color-border-primary-loud)
|
||||
);
|
||||
}
|
||||
label:not(.disabled).checked:hover .switch,
|
||||
label:not(.disabled).checked .input:focus-visible ~ .switch {
|
||||
background-color: var(
|
||||
--ha-switch-checked-background-color-hover,
|
||||
var(
|
||||
--ha-switch-checked-background-color,
|
||||
var(--ha-color-fill-primary-normal-hover)
|
||||
)
|
||||
);
|
||||
border-color: var(
|
||||
--ha-switch-checked-border-color-hover,
|
||||
var(
|
||||
--ha-switch-checked-border-color,
|
||||
var(--ha-color-border-primary-loud)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
.switch .thumb {
|
||||
background-color: var(
|
||||
--ha-switch-thumb-background-color,
|
||||
var(--ha-color-on-neutral-normal)
|
||||
);
|
||||
border-color: var(
|
||||
--ha-switch-thumb-border-color,
|
||||
var(--ha-color-on-neutral-normal)
|
||||
);
|
||||
border-style: var(--wa-form-control-border-style);
|
||||
border-width: var(--wa-form-control-border-width);
|
||||
box-shadow: var(--ha-switch-thumb-box-shadow, var(--ha-box-shadow-s));
|
||||
}
|
||||
label:not(.disabled):hover .switch .thumb,
|
||||
label:not(.disabled) .input:focus-visible ~ .switch .thumb {
|
||||
background-color: var(
|
||||
--ha-switch-thumb-background-color-hover,
|
||||
var(
|
||||
--ha-switch-thumb-background-color,
|
||||
var(--ha-color-on-neutral-normal)
|
||||
)
|
||||
);
|
||||
border-color: var(
|
||||
--ha-switch-thumb-border-color-hover,
|
||||
var(
|
||||
--ha-switch-thumb-border-color,
|
||||
var(--ha-color-on-neutral-normal)
|
||||
)
|
||||
);
|
||||
}
|
||||
.checked .switch .thumb {
|
||||
background-color: var(
|
||||
--ha-switch-checked-thumb-background-color,
|
||||
var(--ha-color-on-primary-normal)
|
||||
);
|
||||
border-color: var(
|
||||
--ha-switch-checked-thumb-border-color,
|
||||
var(--ha-color-on-primary-normal)
|
||||
);
|
||||
}
|
||||
label:not(.disabled).checked:hover .switch .thumb,
|
||||
label:not(.disabled).checked .input:focus-visible ~ .switch .thumb {
|
||||
background-color: var(
|
||||
--ha-switch-checked-thumb-background-color-hover,
|
||||
var(
|
||||
--ha-switch-checked-thumb-background-color,
|
||||
var(--ha-color-on-primary-normal)
|
||||
)
|
||||
);
|
||||
border-color: var(
|
||||
--ha-switch-checked-thumb-border-color-hover,
|
||||
var(
|
||||
--ha-switch-checked-thumb-border-color,
|
||||
var(--ha-color-on-primary-normal)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
label.disabled {
|
||||
opacity: var(--ha-switch-disabled-opacity, 0.3);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
label:not(.disabled) .input:focus-visible ~ .switch .thumb {
|
||||
outline: none;
|
||||
outline-offset: none;
|
||||
}
|
||||
label:not(.disabled) .input:focus-visible ~ .switch {
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
`,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
|
||||
@@ -34,6 +34,7 @@ class EntityIdPickerRow extends LitElement {
|
||||
>
|
||||
<ha-switch
|
||||
slot="end"
|
||||
haptic
|
||||
.checked=${!!this.coreUserData &&
|
||||
!!this.coreUserData.showEntityIdPicker}
|
||||
.disabled=${this.coreUserData === undefined}
|
||||
|
||||
@@ -267,11 +267,6 @@ export const colorStyles = css`
|
||||
--sidebar-selected-text-color: var(--primary-color);
|
||||
--sidebar-selected-icon-color: var(--primary-color);
|
||||
--sidebar-icon-color: rgba(var(--rgb-primary-text-color), 0.6);
|
||||
--switch-checked-color: var(--primary-color);
|
||||
--switch-checked-button-color: var(--switch-checked-color, var(--primary-background-color));
|
||||
--switch-checked-track-color: var(--switch-checked-color, #000000);
|
||||
--switch-unchecked-button-color: var(--switch-unchecked-color, var(--primary-background-color));
|
||||
--switch-unchecked-track-color: var(--switch-unchecked-color, #000000);
|
||||
--slider-color: var(--primary-color);
|
||||
--slider-secondary-color: var(--light-primary-color);
|
||||
--slider-track-color: var(--scrollbar-thumb-color);
|
||||
@@ -353,8 +348,6 @@ export const darkColorStyles = css`
|
||||
--primary-text-color: #e1e1e1;
|
||||
--secondary-text-color: #9b9b9b;
|
||||
--disabled-text-color: #6f6f6f;
|
||||
--switch-unchecked-button-color: #999999;
|
||||
--switch-unchecked-track-color: #9b9b9b;
|
||||
--divider-color: rgba(225, 225, 225, 0.12);
|
||||
--outline-color: rgba(225, 225, 225, 0.12);
|
||||
--outline-hover-color: rgba(225, 225, 225, 0.24);
|
||||
|
||||
@@ -71,12 +71,15 @@ export const semanticColorStyles = css`
|
||||
|
||||
/* fill disabled quiet */
|
||||
--ha-color-fill-disabled-quiet-resting: var(--ha-color-neutral-95);
|
||||
--ha-color-fill-disabled-quiet-hover: var(--ha-color-neutral-90);
|
||||
|
||||
/* fill disabled normal */
|
||||
--ha-color-fill-disabled-normal-resting: var(--ha-color-neutral-95);
|
||||
--ha-color-fill-disabled-normal-hover: var(--ha-color-neutral-90);
|
||||
|
||||
/* fill disabled loud */
|
||||
--ha-color-fill-disabled-loud-resting: var(--ha-color-neutral-80);
|
||||
--ha-color-fill-disabled-loud-hover: var(--ha-color-neutral-70);
|
||||
|
||||
/* fill danger quiet */
|
||||
--ha-color-fill-danger-quiet-resting: var(--ha-color-red-95);
|
||||
@@ -212,12 +215,15 @@ export const darkSemanticColorStyles = css`
|
||||
|
||||
/* fill disabled quiet */
|
||||
--ha-color-fill-disabled-quiet-resting: var(--ha-color-neutral-10);
|
||||
--ha-color-fill-disabled-quiet-hover: var(--ha-color-neutral-20);
|
||||
|
||||
/* fill disabled normal */
|
||||
--ha-color-fill-disabled-normal-resting: var(--ha-color-neutral-20);
|
||||
--ha-color-fill-disabled-normal-hover: var(--ha-color-neutral-30);
|
||||
|
||||
/* fill disabled loud */
|
||||
--ha-color-fill-disabled-loud-resting: var(--ha-color-neutral-30);
|
||||
--ha-color-fill-disabled-loud-hover: var(--ha-color-neutral-40);
|
||||
|
||||
/* fill danger quiet */
|
||||
--ha-color-fill-danger-quiet-resting: var(--ha-color-red-05);
|
||||
|
||||
35
yarn.lock
35
yarn.lock
@@ -2765,19 +2765,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@material/mwc-switch@npm:0.27.0":
|
||||
version: 0.27.0
|
||||
resolution: "@material/mwc-switch@npm:0.27.0"
|
||||
dependencies:
|
||||
"@material/mwc-base": "npm:^0.27.0"
|
||||
"@material/mwc-ripple": "npm:^0.27.0"
|
||||
"@material/switch": "npm:=14.0.0-canary.53b3cad2f.0"
|
||||
lit: "npm:^2.0.0"
|
||||
tslib: "npm:^2.0.1"
|
||||
checksum: 10/620d55add1ee7064e21f4ab649b2d017ec235106a0dcd5f3f29c26a0ea2ec3f8b3c01489081609574f8475a8daa38a4b24fe6129b0fcc82d69e6d58e5483b7c2
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@material/mwc-top-app-bar-fixed@npm:0.27.0":
|
||||
version: 0.27.0
|
||||
resolution: "@material/mwc-top-app-bar-fixed@npm:0.27.0"
|
||||
@@ -2908,27 +2895,6 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@material/switch@npm:=14.0.0-canary.53b3cad2f.0":
|
||||
version: 14.0.0-canary.53b3cad2f.0
|
||||
resolution: "@material/switch@npm:14.0.0-canary.53b3cad2f.0"
|
||||
dependencies:
|
||||
"@material/animation": "npm:14.0.0-canary.53b3cad2f.0"
|
||||
"@material/base": "npm:14.0.0-canary.53b3cad2f.0"
|
||||
"@material/density": "npm:14.0.0-canary.53b3cad2f.0"
|
||||
"@material/dom": "npm:14.0.0-canary.53b3cad2f.0"
|
||||
"@material/elevation": "npm:14.0.0-canary.53b3cad2f.0"
|
||||
"@material/feature-targeting": "npm:14.0.0-canary.53b3cad2f.0"
|
||||
"@material/focus-ring": "npm:14.0.0-canary.53b3cad2f.0"
|
||||
"@material/ripple": "npm:14.0.0-canary.53b3cad2f.0"
|
||||
"@material/rtl": "npm:14.0.0-canary.53b3cad2f.0"
|
||||
"@material/shape": "npm:14.0.0-canary.53b3cad2f.0"
|
||||
"@material/theme": "npm:14.0.0-canary.53b3cad2f.0"
|
||||
"@material/tokens": "npm:14.0.0-canary.53b3cad2f.0"
|
||||
tslib: "npm:^2.1.0"
|
||||
checksum: 10/445415165ac20c6c80854bf5c8688ea9c2bc88844602b1ebe1f4a9325c9802a295b90c15b860e2af831657b163bd45f64ea5eb6e99e90de8198b100d6c9e52bc
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@material/theme@npm:14.0.0-canary.53b3cad2f.0":
|
||||
version: 14.0.0-canary.53b3cad2f.0
|
||||
resolution: "@material/theme@npm:14.0.0-canary.53b3cad2f.0"
|
||||
@@ -8974,7 +8940,6 @@ __metadata:
|
||||
"@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch"
|
||||
"@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
|
||||
"@material/mwc-radio": "npm:0.27.0"
|
||||
"@material/mwc-switch": "npm:0.27.0"
|
||||
"@material/mwc-top-app-bar": "npm:0.27.0"
|
||||
"@material/mwc-top-app-bar-fixed": "npm:0.27.0"
|
||||
"@material/top-app-bar": "npm:=14.0.0-canary.53b3cad2f.0"
|
||||
|
||||
Reference in New Issue
Block a user