From 432cf4a7edc8c3f5c859f68f2ed510596ac89467 Mon Sep 17 00:00:00 2001
From: ildar170975 <71872483+ildar170975@users.noreply.github.com>
Date: Mon, 28 Oct 2024 21:14:05 +0300
Subject: [PATCH] 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
---
 src/components/data-table/ha-data-table-labels.ts | 1 +
 src/components/ha-labels-picker.ts                | 1 +
 src/panels/config/labels/ha-config-labels.ts      | 1 +
 3 files changed, 3 insertions(+)

diff --git a/src/components/data-table/ha-data-table-labels.ts b/src/components/data-table/ha-data-table-labels.ts
index 66c137e92a..e87ac80ea2 100644
--- 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
index 4d59f33045..d05cae7215 100644
--- 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
index db2f606631..7d0e60e22d 100644
--- 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>`