fix ha-input styles (#30225)

gallery/src/pages/components/ha-form.ts

@@ -480,6 +480,12 @@ const SCHEMAS: {
       },
       { type: "string", name: "path", default: "/" },
       { type: "boolean", name: "ssl", default: false },
+      {
+        type: "string",
+        name: "comments",
+        default: "disabled field",
+        disabled: true,
+      },
     ],
   },
 ];

src/components/ha-picker-field.ts

@@ -120,14 +120,12 @@ export class HaPickerField extends PickerMixin(LitElement) {
     return [
       css`
         ha-combo-box-item[disabled] {
-          background-color: var(
-            --mdc-text-field-disabled-fill-color,
-            whitesmoke
-          );
+          background-color: var(--ha-color-form-background-disabled);
+          cursor: not-allowed;
         }
         ha-combo-box-item {
           position: relative;
-          background-color: var(--mdc-text-field-fill-color, whitesmoke);
+          background-color: var(--ha-color-form-background);
           border-radius: var(--ha-border-radius-sm);
           border-end-end-radius: 0;
           border-end-start-radius: 0;

src/components/ha-textarea.ts

@@ -20,6 +20,9 @@ export class HaTextArea extends TextAreaBase {
     textfieldStyles,
     textareaStyles,
     css`
+      :host {
+        --mdc-text-field-fill-color: var(--ha-color-form-background);
+      }
       :host([autogrow]) .mdc-text-field {
         position: relative;
         min-height: 74px;

src/components/input/ha-input.ts

@@ -296,6 +296,7 @@ export class HaInput extends LitElement {
           invalid: this.invalid || this._invalid,
           "label-raised": this.value || (this.label && this.placeholder),
           "no-label": !this.label,
+          "hint-hidden": !this.hint && !hasHintSlot && !this.required,
         })}
         @input=${this._handleInput}
         @change=${this._handleChange}
@@ -331,7 +332,9 @@ export class HaInput extends LitElement {
         </slot>
         <div
           slot="hint"
-          class=${this.invalid || this._invalid ? "error" : ""}
+          class=${classMap({
+            error: this.invalid || this._invalid,
+          })}
           role=${ifDefined(this.invalid || this._invalid ? "alert" : undefined)}
           aria-live="polite"
         >
@@ -413,14 +416,13 @@ export class HaInput extends LitElement {
     :host {
       display: flex;
       align-items: flex-start;
-      padding-top: var(--ha-input-padding-top, var(--ha-space-2));
+      padding-top: var(--ha-input-padding-top);
       padding-bottom: var(--ha-input-padding-bottom, var(--ha-space-2));
       text-align: var(--ha-input-text-align, start);
     }
     wa-input {
       flex: 1;
       min-width: 0;
-      height: 76px;
       --wa-transition-fast: var(--wa-transition-normal);
       position: relative;
     }
@@ -434,6 +436,7 @@ export class HaInput extends LitElement {
       color: var(--secondary-text-color);
       line-height: var(--ha-line-height-condensed);
       z-index: 1;
+      pointer-events: none;
       padding-inline-start: calc(
         var(--start-slot-width, 0px) + var(--ha-space-4)
       );
@@ -459,7 +462,7 @@ export class HaInput extends LitElement {
 
     wa-input::part(base) {
       height: 56px;
-      background-color: var(--ha-color-fill-neutral-quiet-resting);
+      background-color: var(--ha-color-form-background);
       border-top-left-radius: var(--ha-border-radius-sm);
       border-top-right-radius: var(--ha-border-radius-sm);
       border-bottom-left-radius: var(--ha-border-radius-square);
@@ -512,11 +515,11 @@ export class HaInput extends LitElement {
     }
 
     wa-input::part(base):hover {
-      background-color: var(--ha-color-fill-neutral-quiet-hover);
+      background-color: var(--ha-color-form-background-hover);
     }
 
     wa-input:disabled::part(base) {
-      background-color: var(--ha-color-fill-disabled-quiet-resting);
+      background-color: var(--ha-color-form-background-disabled);
     }
 
     wa-input::part(hint) {
@@ -529,6 +532,10 @@ export class HaInput extends LitElement {
       color: var(--ha-color-text-secondary);
     }
 
+    wa-input.hint-hidden::part(hint) {
+      height: 0;
+    }
+
     .error {
       color: var(--ha-color-on-danger-quiet);
     }

src/resources/theme/color/semantic.globals.ts

@@ -157,6 +157,11 @@ export const semanticColorStyles = css`
     --ha-color-surface-default: var(--ha-color-neutral-95);
     --ha-color-on-surface-default: var(--ha-color-neutral-05);
 
+    /* forms */
+    --ha-color-form-background: var(--ha-color-neutral-95);
+    --ha-color-form-background-hover: var(--ha-color-neutral-90);
+    --ha-color-form-background-disabled: var(--ha-color-neutral-80);
+
     /* Scrollable fade */
     --ha-color-shadow-scrollable-fade: rgba(0, 0, 0, 0.08);
   }
@@ -291,5 +296,10 @@ export const darkSemanticColorStyles = css`
     /* Surfaces */
     --ha-color-surface-default: var(--ha-color-neutral-10);
     --ha-color-on-surface-default: var(--ha-color-neutral-95);
+
+    /* forms */
+    --ha-color-form-background: var(--ha-color-neutral-20);
+    --ha-color-form-background-hover: var(--ha-color-neutral-30);
+    --ha-color-form-background-disabled: var(--ha-color-neutral-20);
   }
 `;