Clean chips variables

home-assistant · Nov 9, 2023 · 186fcc0 · 186fcc0
1 parent 86aee36
commit 186fcc0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 20 deletions.
diff --git a/src/components/chips/ha-assist-chip.ts b/src/components/chips/ha-assist-chip.ts
@@ -6,15 +6,6 @@ import { customElement, property } from "lit/decorators";
 export class HaAssistChip extends MdAssistChip {
   @property({ type: Boolean, reflect: true }) filled = false;
 
-  @property({ type: Boolean, reflect: true }) elevaled = false;
-
-  protected override getContainerClasses() {
-    return {
-      ...super.getContainerClasses(),
-      elevated: this.elevated || this.filled,
-    };
-  }
-
   static override styles = [
     ...super.styles,
     css`
@@ -24,24 +15,31 @@ export class HaAssistChip extends MdAssistChip {
         --md-assist-chip-container-shape: 16px;
         --md-assist-chip-outline-color: var(--outline-color);
         --md-assist-chip-label-text-weight: 400;
-      }
-      /** Material 3 doesn't have a filled chip, so we have to make our own using elevated variant **/
-      :host([filled]) {
-        --md-assist-chip-elevated-container-elevation: 0;
-        --md-assist-chip-elevated-pressed-container-elevation: 0;
-        --md-assist-chip-elevated-focus-container-elevation: 0;
-        --md-assist-chip-elevated-hover-container-elevation: 0;
-        --md-assist-chip-elevated-container-color: var(
-          --ha-assist-chip-filled-container-color,
-          rgba(var(--rgb-primary-text-color), 0.15)
+        --ha-assist-chip-filled-container-color: rgba(
+          var(--rgb-primary-text-color),
+          0.15
         );
       }
+      /** Material 3 doesn't have a filled chip, so we have to make our own **/
+      .filled {
+        display: flex;
+        pointer-events: none;
+        border-radius: inherit;
+        inset: 0;
+        position: absolute;
+        background-color: var(--ha-assist-chip-filled-container-color);
+      }
+      /** Set the size of mdc icons **/
+      ::slotted([slot="icon"]) {
+        display: flex;
+        --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
+      }
     `,
   ];
 
   protected override renderOutline() {
     if (this.filled) {
-      return html`<md-elevation></md-elevation>`;
+      return html`<span class="filled"></span>`;
     }
 
     return super.renderOutline();

diff --git a/src/components/chips/ha-filter-chip.ts b/src/components/chips/ha-filter-chip.ts
@@ -13,6 +13,8 @@ export class HaFilterChip extends MdFilterChip {
       :host {
         --md-sys-color-primary: var(--primary-text-color);
         --md-sys-color-on-surface: var(--primary-text-color);
+        --md-sys-color-on-surface-variant: var(--primary-text-color);
+        --md-sys-color-on-secondary-container: var(--primary-text-color);
         --md-filter-chip-container-shape: 16px;
         --md-filter-chip-outline-color: var(--outline-color);
         --md-filter-chip-selected-container-color: rgba(

diff --git a/src/components/chips/ha-input-chip.ts b/src/components/chips/ha-input-chip.ts
@@ -10,13 +10,20 @@ export class HaInputChip extends MdInputChip {
       :host {
         --md-sys-color-primary: var(--primary-text-color);
         --md-sys-color-on-surface: var(--primary-text-color);
+        --md-sys-color-on-surface-variant: var(--primary-text-color);
+        --md-sys-color-on-secondary-container: var(--primary-text-color);
         --md-input-chip-container-shape: 16px;
         --md-input-chip-outline-color: var(--outline-color);
         --md-input-chip-selected-container-color: rgba(
           var(--rgb-primary-text-color),
           0.15
         );
       }
+      /** Set the size of mdc icons **/
+      ::slotted([slot="icon"]) {
+        display: flex;
+        --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
+      }
     `,
   ];
 }