diff --git a/gallery/src/demos/demo-ha-chip.ts b/gallery/src/demos/demo-ha-chip.ts index e2b51c1226..d7a8eecffd 100644 --- a/gallery/src/demos/demo-ha-chip.ts +++ b/gallery/src/demos/demo-ha-chip.ts @@ -119,7 +119,7 @@ export class DemoHaChip extends LitElement {
({ ...chip, outline: true }))} + .items=${chips.map((chip) => ({ ...chip, outlined: true }))} >
diff --git a/src/components/ha-chip-set.ts b/src/components/ha-chip-set.ts index c7f78a5120..b74609fd55 100644 --- a/src/components/ha-chip-set.ts +++ b/src/components/ha-chip-set.ts @@ -23,7 +23,7 @@ export interface HaChipSetItem { label?: string; leadingIcon?: string; trailingIcon?: string; - outline?: boolean; + outlined?: boolean; } @customElement("ha-chip-set") @@ -43,7 +43,7 @@ export class HaChipSet extends LitElement { .label=${item.label} .leadingIcon=${item.leadingIcon} .trailingIcon=${item.trailingIcon} - ?outline=${item.outline} + ?outlined=${item.outlined} > ` diff --git a/src/components/ha-chip.ts b/src/components/ha-chip.ts index e0e183e17e..dfdec923ca 100644 --- a/src/components/ha-chip.ts +++ b/src/components/ha-chip.ts @@ -69,8 +69,9 @@ export class HaChip extends LitElement { } .mdc-chip.outlined { + margin: 0 -2px !important; border: 2px solid var(--ha-chip-background-color, var(--primary-color)); - background: var( + background-color: var( --ha-chip-outlined-background-color, var(--card-background-color) ); @@ -79,7 +80,6 @@ export class HaChip extends LitElement { .mdc-chip:not(.outlined) .mdc-chip__icon.mdc-chip__icon--leading { margin-left: -12px !important; - margin-right: -2px !important; } .mdc-chip.outlined ha-svg-icon,