fix: restore input/dropdown backgrounds broken by HA 2026.4

[michikrug]

Transparency Note: The analysis and fix was done with AI (Copilot using Claude Sonnet 4.6)

Problem

Home Assistant 2026.4 migrated several UI components (ha-combo-box, ha-dropdown, etc.) to Web Awesome (WA) components. These new components rely on CSS variables that were not previously defined in custom themes:

• --ha-color-form-background — used by ha-combo-box-item for item backgrounds; defaults to --ha-color-neutral-95 (~#f3f3f3, white)
• --wa-color-surface-raised — used by ha-dropdown for the dropdown surface; defaults to var(--mdc-theme-surface, #fff) (white)
• --wa-form-control-background-color — chains from --wa-color-surface-raised

In themes that use modes: light: / dark:, HA applies its own darkSemanticColorStyles base layer which overrides these variables to dark neutrals.
In flat (non-modes) themes like Graphite and Graphite E-ink Dark, no such override is applied, so all three variables fall back to white — rendering input boxes and dropdowns as white-on-dark-card, completely unreadable.

Fix

Map the new HA/WA variables to the existing token system in both templates so the correct dark/light values are used in every variant:

# HA 2026.3+ Web Awesome / semantic color variables
ha-color-form-background: var(--token-color-background-input-base)
ha-color-form-background-hover: var(--token-color-background-input-base)
ha-color-form-background-disabled: var(--token-color-background-input-disabled)
wa-color-surface-raised: var(--token-color-background-card)
# Dropdown/menu item hover fills (light defaults are near-white; override for dark themes)
ha-color-fill-neutral-quiet-resting: var(--token-color-background-card)
ha-color-fill-neutral-quiet-hover: var(--token-color-background-input-base)
ha-color-fill-neutral-quiet-active: var(--token-color-background-card)
ha-color-fill-neutral-normal-resting: var(--token-color-background-secondary)
ha-color-fill-neutral-normal-hover: var(--token-color-background-card)
ha-color-fill-neutral-normal-active: var(--token-color-background-secondary)

Additionally, three pre-existing variable bugs that were masked in auto mode but visible in flat themes are corrected:

• input-background-token-color-disabled: invalid rgba(var(...), 0.5) syntax replaced with color-mix(in srgb, ... 50%, transparent)
• input-idle-line-color: referenced undefined --background-color; changed to --primary-background-color
• mdc-select-idle-line-color: near-black value on dark cards changed to --divider-color for visibility

Affected themes

All five generated theme files are updated: Graphite, Graphite Light, Graphite Auto, Graphite E-ink Dark, Graphite E-ink Light.

[michikrug]

Hover effect is still white. Will also work on a fix...

[EDIT]
Done

[TilmanGriesel]

@michikrug Thank you for the contribution! Will validate and merge soon

[daviddanko]

@TilmanGriesel any ETA on the release please?

[TilmanGriesel]

@daviddanko Released today 🚀

[dabalroman]

Great work @michikrug!