feat(theme): add disabled color in theme and color selector (#411)

* feat(theme): add disabled color * feat(theme): use mushroom base element on every card
piitaya · Apr 28, 2022 · 8ae9114 · 8ae9114
1 parent 3c4cd3a
commit 8ae9114
Show file tree

Hide file tree

Showing 36 changed files with 304 additions and 278 deletions.
diff --git a/src/cards/alarm-control-panel-card/alarm-control-panel-card-editor.ts b/src/cards/alarm-control-panel-card/alarm-control-panel-card-editor.ts
@@ -1,9 +1,10 @@
-import { fireEvent, HomeAssistant, LocalizeFunc, LovelaceCardEditor } from "custom-card-helpers";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { fireEvent, LocalizeFunc, LovelaceCardEditor } from "custom-card-helpers";
+import { CSSResultGroup, html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
 import setupCustomlocalize from "../../localize";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { configElementStyle } from "../../utils/editor-styles";
 import { Action } from "../../utils/form/custom/ha-selector-mushroom-action";
 import { GENERIC_FIELDS } from "../../utils/form/fields";
@@ -53,9 +54,7 @@ const computeSchema = memoizeOne((localize: LocalizeFunc, icon?: string): HaForm
 ]);
 
 @customElement(ALARM_CONTROl_PANEL_CARD_EDITOR_NAME)
-export class SwitchCardEditor extends LitElement implements LovelaceCardEditor {
-    @property({ attribute: false }) public hass?: HomeAssistant;
-
+export class SwitchCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
     @state() private _config?: AlarmControlPanelCardConfig;
 
     connectedCallback() {
@@ -112,6 +111,6 @@ export class SwitchCardEditor extends LitElement implements LovelaceCardEditor {
     }
 
     static get styles(): CSSResultGroup {
-        return [configElementStyle];
+        return [super.styles, configElementStyle];
     }
 }
diff --git a/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts b/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts
@@ -7,18 +7,20 @@ import {
     LovelaceCard,
     LovelaceCardEditor,
 } from "custom-card-helpers";
-import { css, CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, query, state } from "lit/decorators.js";
+import { css, CSSResultGroup, html, PropertyValues, TemplateResult } from "lit";
+import { customElement, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { computeStateDisplay } from "../../ha/common/entity/compute-state-display";
+import { isAvailable } from "../../ha/data/entity";
 import "../../shared/badge-icon";
+import "../../shared/button";
+import "../../shared/button-group";
 import "../../shared/card";
 import "../../shared/shape-icon";
 import "../../shared/state-info";
 import "../../shared/state-item";
-import "../../shared/button";
-import "../../shared/button-group";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { cardStyle } from "../../utils/card-styles";
 import { registerCustomCard } from "../../utils/custom-cards";
 import { actionHandler } from "../../utils/directives/action-handler-directive";
@@ -39,7 +41,6 @@ import {
     isDisarmed,
     shouldPulse,
 } from "./utils";
-import { isAvailable } from "../../ha/data/entity";
 
 registerCustomCard({
     type: ALARM_CONTROl_PANEL_CARD_NAME,
@@ -62,7 +63,7 @@ const BUTTONS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "clear"];
  */
 
 @customElement(ALARM_CONTROl_PANEL_CARD_NAME)
-export class AlarmControlPanelCard extends LitElement implements LovelaceCard {
+export class AlarmControlPanelCard extends MushroomBaseElement implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./alarm-control-panel-card-editor");
         return document.createElement(ALARM_CONTROl_PANEL_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -80,8 +81,6 @@ export class AlarmControlPanelCard extends LitElement implements LovelaceCard {
         };
     }
 
-    @property({ attribute: false }) public hass!: HomeAssistant;
-
     @state() private _config?: AlarmControlPanelCardConfig;
 
     @query("#alarmCode") private _input?: HaTextField;
@@ -285,8 +284,8 @@ export class AlarmControlPanelCard extends LitElement implements LovelaceCard {
     }
 
     static get styles(): CSSResultGroup {
-        // Default colors are RGB values of HASS --label-badge-*
         return [
+            super.styles,
             cardStyle,
             css`
                 ha-card {

diff --git a/src/cards/chips-card/chips-card-chips-editor.ts b/src/cards/chips-card/chips-card-chips-editor.ts
@@ -9,6 +9,7 @@ import { CHIP_LIST, LovelaceChipConfig } from "../../utils/lovelace/chip/types";
 import { EditorTarget } from "../../utils/lovelace/editor/types";
 import { sortableStyles } from "../../utils/sortable-styles";
 import "../../shared/form/mushroom-select";
+import { MushroomBaseElement } from "../../utils/base-element";
 
 let Sortable;
 
@@ -21,9 +22,7 @@ declare global {
 }
 
 @customElement("mushroom-chips-card-chips-editor")
-export class ChipsCardEditorChips extends LitElement {
-    @property({ attribute: false }) protected hass?: HomeAssistant;
-
+export class ChipsCardEditorChips extends MushroomBaseElement {
     @property({ attribute: false }) protected chips?: LovelaceChipConfig[];
 
     @property() protected label?: string;
@@ -268,6 +267,7 @@ export class ChipsCardEditorChips extends LitElement {
 
     static get styles(): CSSResultGroup {
         return [
+            super.styles,
             sortableStyles,
             css`
                 .chip {

diff --git a/src/cards/chips-card/chips-card-editor.ts b/src/cards/chips-card/chips-card-editor.ts
@@ -1,6 +1,6 @@
-import { fireEvent, HASSDomEvent, HomeAssistant, LovelaceCardEditor } from "custom-card-helpers";
-import { html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { fireEvent, HASSDomEvent, LovelaceCardEditor } from "custom-card-helpers";
+import { html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import {
     any,
     array,
@@ -17,6 +17,7 @@ import {
 import setupCustomlocalize from "../../localize";
 import "../../shared/editor/alignment-picker";
 import { actionConfigStruct } from "../../utils/action-struct";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { baseLovelaceCardConfig } from "../../utils/editor-styles";
 import { loadHaComponents } from "../../utils/loader";
 import { LovelaceChipConfig } from "../../utils/lovelace/chip/types";
@@ -143,9 +144,7 @@ const cardConfigStruct = assign(
 );
 
 @customElement(CHIPS_CARD_EDITOR_NAME)
-export class ChipsCardEditor extends LitElement implements LovelaceCardEditor {
-    @property({ attribute: false }) public hass?: HomeAssistant;
-
+export class ChipsCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
     @state() private _config?: ChipsCardConfig;
 
     @state() private _subElementEditorConfig?: SubElementEditorConfig;

diff --git a/src/cards/chips-card/chips-card.ts b/src/cards/chips-card/chips-card.ts
@@ -5,16 +5,17 @@ import {
     LovelaceCardConfig,
     LovelaceCardEditor,
 } from "custom-card-helpers";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { css, CSSResultGroup, html, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators.js";
-import { registerCustomCard } from "../../utils/custom-cards";
-import { CHIPS_CARD_EDITOR_NAME, CHIPS_CARD_NAME } from "./const";
 import "../../shared/chip";
-import { EntityChip } from "./chips";
-import "./chips";
-import { LovelaceChip, LovelaceChipConfig } from "../../utils/lovelace/chip/types";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { cardStyle } from "../../utils/card-styles";
+import { registerCustomCard } from "../../utils/custom-cards";
 import { createChipElement } from "../../utils/lovelace/chip/chip-element";
+import { LovelaceChipConfig } from "../../utils/lovelace/chip/types";
+import "./chips";
+import { EntityChip } from "./chips";
+import { CHIPS_CARD_EDITOR_NAME, CHIPS_CARD_NAME } from "./const";
 
 export interface ChipsCardConfig extends LovelaceCardConfig {
     chips: LovelaceChipConfig[];
@@ -28,7 +29,7 @@ registerCustomCard({
 });
 
 @customElement(CHIPS_CARD_NAME)
-export class ChipsCard extends LitElement implements LovelaceCard {
+export class ChipsCard extends MushroomBaseElement implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./chips-card-editor");
         return document.createElement(CHIPS_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -44,15 +45,6 @@ export class ChipsCard extends LitElement implements LovelaceCard {
 
     @state() private _config?: ChipsCardConfig;
 
-    private _hass?: HomeAssistant;
-
-    set hass(hass: HomeAssistant) {
-        this._hass = hass;
-        this.shadowRoot?.querySelectorAll("div > *").forEach((element: unknown) => {
-            (element as LovelaceChip).hass = hass;
-        });
-    }
-
     getCardSize(): number | Promise<number> {
         return 1;
     }
@@ -62,7 +54,7 @@ export class ChipsCard extends LitElement implements LovelaceCard {
     }
 
     protected render(): TemplateResult {
-        if (!this._config || !this._hass) {
+        if (!this._config || !this.hass) {
             return html``;
         }
 
@@ -71,7 +63,7 @@ export class ChipsCard extends LitElement implements LovelaceCard {
             alignment = `align-${this._config.alignment}`;
         }
 
-        const rtl = computeRTL(this._hass);
+        const rtl = computeRTL(this.hass);
 
         return html`
             <div class="chip-container ${alignment}" ?rtl=${rtl}>
@@ -85,14 +77,15 @@ export class ChipsCard extends LitElement implements LovelaceCard {
         if (!element) {
             return html``;
         }
-        if (this._hass) {
-            element.hass = this._hass;
+        if (this.hass) {
+            element.hass = this.hass;
         }
         return html`${element}`;
     }
 
     static get styles(): CSSResultGroup {
         return [
+            super.styles,
             cardStyle,
             css`
                 .chip-container {

diff --git a/src/cards/cover-card/cover-card-editor.ts b/src/cards/cover-card/cover-card-editor.ts
@@ -1,9 +1,10 @@
-import { fireEvent, HomeAssistant, LovelaceCardEditor } from "custom-card-helpers";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { fireEvent, LovelaceCardEditor } from "custom-card-helpers";
+import { CSSResultGroup, html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
 import setupCustomlocalize from "../../localize";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { configElementStyle } from "../../utils/editor-styles";
 import { GENERIC_FIELDS } from "../../utils/form/fields";
 import { HaFormSchema } from "../../utils/form/ha-form";
@@ -44,9 +45,7 @@ const computeSchema = memoizeOne((icon?: string): HaFormSchema[] => [
 ]);
 
 @customElement(COVER_CARD_EDITOR_NAME)
-export class CoverCardEditor extends LitElement implements LovelaceCardEditor {
-    @property({ attribute: false }) public hass?: HomeAssistant;
-
+export class CoverCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
     @state() private _config?: CoverCardConfig;
 
     connectedCallback() {
@@ -97,6 +96,6 @@ export class CoverCardEditor extends LitElement implements LovelaceCardEditor {
     }
 
     static get styles(): CSSResultGroup {
-        return [configElementStyle];
+        return [super.styles, configElementStyle];
     }
 }
diff --git a/src/cards/cover-card/cover-card.ts b/src/cards/cover-card/cover-card.ts
@@ -8,8 +8,8 @@ import {
     LovelaceCardEditor,
 } from "custom-card-helpers";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { css, CSSResultGroup, html, PropertyValues, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import { computeStateDisplay } from "../../ha/common/entity/compute-state-display";
 import { CoverEntity } from "../../ha/data/cover";
 import { isActive, isAvailable } from "../../ha/data/entity";
@@ -19,6 +19,7 @@ import "../../shared/card";
 import "../../shared/shape-icon";
 import "../../shared/state-info";
 import "../../shared/state-item";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { cardStyle } from "../../utils/card-styles";
 import { registerCustomCard } from "../../utils/custom-cards";
 import { actionHandler } from "../../utils/directives/action-handler-directive";
@@ -44,7 +45,7 @@ registerCustomCard({
 });
 
 @customElement(COVER_CARD_NAME)
-export class CoverCard extends LitElement implements LovelaceCard {
+export class CoverCard extends MushroomBaseElement implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./cover-card-editor");
         return document.createElement(COVER_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -59,8 +60,6 @@ export class CoverCard extends LitElement implements LovelaceCard {
         };
     }
 
-    @property({ attribute: false }) public hass!: HomeAssistant;
-
     @state() private _config?: CoverCardConfig;
 
     @state() private _activeControl?: CoverCardControl;
@@ -242,6 +241,7 @@ export class CoverCard extends LitElement implements LovelaceCard {
 
     static get styles(): CSSResultGroup {
         return [
+            super.styles,
             cardStyle,
             css`
                 mushroom-state-item {

diff --git a/src/cards/entity-card/entity-card-editor.ts b/src/cards/entity-card/entity-card-editor.ts
@@ -1,9 +1,10 @@
-import { fireEvent, HomeAssistant, LovelaceCardEditor } from "custom-card-helpers";
-import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { fireEvent, LovelaceCardEditor } from "custom-card-helpers";
+import { CSSResultGroup, html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import memoizeOne from "memoize-one";
 import { assert } from "superstruct";
 import setupCustomlocalize from "../../localize";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { configElementStyle } from "../../utils/editor-styles";
 import { GENERIC_FIELDS } from "../../utils/form/fields";
 import { HaFormSchema } from "../../utils/form/ha-form";
@@ -46,9 +47,7 @@ const computeSchema = memoizeOne((icon?: string): HaFormSchema[] => [
 ]);
 
 @customElement(ENTITY_CARD_EDITOR_NAME)
-export class EntityCardEditor extends LitElement implements LovelaceCardEditor {
-    @property({ attribute: false }) public hass?: HomeAssistant;
-
+export class EntityCardEditor extends MushroomBaseElement implements LovelaceCardEditor {
     @state() private _config?: EntityCardConfig;
 
     connectedCallback() {
@@ -96,6 +95,6 @@ export class EntityCardEditor extends LitElement implements LovelaceCardEditor {
     }
 
     static get styles(): CSSResultGroup {
-        return configElementStyle;
+        return [super.styles, configElementStyle];
     }
 }
diff --git a/src/cards/entity-card/entity-card.ts b/src/cards/entity-card/entity-card.ts
@@ -7,8 +7,8 @@ import {
     LovelaceCard,
     LovelaceCardEditor,
 } from "custom-card-helpers";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { css, CSSResultGroup, html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { computeStateDisplay } from "../../ha/common/entity/compute-state-display";
 import { isActive, isAvailable } from "../../ha/data/entity";
@@ -18,6 +18,7 @@ import "../../shared/shape-avatar";
 import "../../shared/shape-icon";
 import "../../shared/state-info";
 import "../../shared/state-item";
+import { MushroomBaseElement } from "../../utils/base-element";
 import { cardStyle } from "../../utils/card-styles";
 import { computeRgbColor } from "../../utils/colors";
 import { registerCustomCard } from "../../utils/custom-cards";
@@ -35,7 +36,7 @@ registerCustomCard({
 });
 
 @customElement(ENTITY_CARD_NAME)
-export class EntityCard extends LitElement implements LovelaceCard {
+export class EntityCard extends MushroomBaseElement implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./entity-card-editor");
         return document.createElement(ENTITY_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -49,8 +50,6 @@ export class EntityCard extends LitElement implements LovelaceCard {
         };
     }
 
-    @property({ attribute: false }) public hass!: HomeAssistant;
-
     @state() private _config?: EntityCardConfig;
 
     getCardSize(): number | Promise<number> {
@@ -173,6 +172,7 @@ export class EntityCard extends LitElement implements LovelaceCard {
 
     static get styles(): CSSResultGroup {
         return [
+            super.styles,
             cardStyle,
             css`
                 mushroom-state-item {