Add outline to a labels (#22392)

* Update ha-data-table-labels.ts * Update ha-labels-picker.ts * Update ha-config-labels.ts * Update ha-labels-picker.ts
home-assistant · Oct 28, 2024 · 432cf4a · 432cf4a
1 parent df06496
commit 432cf4a
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 0 deletions.
diff --git a/src/components/data-table/ha-data-table-labels.ts b/src/components/data-table/ha-data-table-labels.ts
@@ -108,6 +108,7 @@ class HaDataTableLabels extends LitElement {
       ha-label {
         --ha-label-background-color: var(--color, var(--grey-color));
         --ha-label-background-opacity: 0.5;
+        outline: 1px solid var(--outline-color);
       }
       ha-button-menu {
         border-radius: 10px;

diff --git a/src/components/ha-labels-picker.ts b/src/components/ha-labels-picker.ts
@@ -216,6 +216,7 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
     ha-input-chip {
       --md-input-chip-selected-container-color: var(--color, var(--grey-color));
       --ha-input-chip-selected-container-opacity: 0.5;
+      --md-input-chip-selected-outline-width: 1px;
     }
   `;
 }

diff --git a/src/panels/config/labels/ha-config-labels.ts b/src/panels/config/labels/ha-config-labels.ts
@@ -103,6 +103,7 @@ export class HaConfigLabels extends LitElement {
                 style="
           background-color: ${computeCssColor(label.color)};
           border-radius: 10px;
+          outline: 1px solid var(--outline-color);
           width: 20px;
           height: 20px;"
               ></div>`