Set input and button background color to white for toolbar (#20369)

home-assistant · Apr 3, 2024 · 578d3c4 · 578d3c4
1 parent bfdc9a3
commit 578d3c4
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/src/components/chips/ha-assist-chip.ts b/src/components/chips/ha-assist-chip.ts
@@ -45,8 +45,8 @@ export class HaAssistChip extends MdAssistChip {
         margin-inline-start: var(--_icon-label-space);
       }
       ::before {
-        background: var(--ha-assist-chip-container-color);
-        opacity: var(--ha-assist-chip-container-opacity);
+        background: var(--ha-assist-chip-container-color, transparent);
+        opacity: var(--ha-assist-chip-container-opacity, 1);
       }
       :where(.active)::before {
         background: var(--ha-assist-chip-active-container-color);

diff --git a/src/components/ha-outlined-text-field.ts b/src/components/ha-outlined-text-field.ts
@@ -27,6 +27,10 @@ export class HaOutlinedTextField extends MdOutlinedTextField {
         --md-outlined-field-focus-outline-width: 1px;
         --mdc-icon-size: var(--md-input-chip-icon-size, 18px);
       }
+      md-outlined-field {
+        background: var(--ha-outlined-text-field-container-color, transparent);
+        opacity: var(--ha-outlined-text-field-container-opacity, 1);
+      }
       .input {
         font-family: Roboto, sans-serif;
       }

diff --git a/src/components/search-input-outlined.ts b/src/components/search-input-outlined.ts
@@ -97,6 +97,7 @@ class SearchInputOutlined extends LitElement {
       ha-outlined-text-field {
         display: block;
         width: 100%;
+        --ha-outlined-text-field-container-color: var(--card-background-color);
       }
       ha-svg-icon,
       ha-icon-button {

diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -743,7 +743,7 @@ export class HaTabsSubpageDataTable extends LitElement {
         padding: 8px 12px;
         box-sizing: border-box;
         font-size: 14px;
-        --ha-assist-chip-container-color: var(--primary-background-color);
+        --ha-assist-chip-container-color: var(--card-background-color);
       }
 
       .selection-controls {
@@ -770,6 +770,7 @@ export class HaTabsSubpageDataTable extends LitElement {
 
       ha-assist-chip {
         --ha-assist-chip-container-shape: 10px;
+        --ha-assist-chip-container-color: var(--card-background-color);
       }
 
       .select-mode-chip {