202 lines
7.4 KiB
JavaScript
202 lines
7.4 KiB
JavaScript
// Assist textfield readability — v5.
|
|
//
|
|
// The new ha-input wraps Web Awesome (wa-input). Web Awesome is a separate
|
|
// component system that renders LIGHT by default unless told to be dark via:
|
|
// 1) adding the "wa-dark" class on the root / document element, or
|
|
// 2) setting its own --wa-* CSS color tokens at :root.
|
|
//
|
|
// HA's dark theme flag doesn't propagate to it, so we do both: force wa-dark
|
|
// class on the html element AND override the wa color tokens to match the
|
|
// active HA theme. Plus inline-style belt-and-suspenders on the actual input.
|
|
(function () {
|
|
if (window.__assistFixLoaded) return;
|
|
window.__assistFixLoaded = true;
|
|
|
|
function v(name, fallback) {
|
|
const x = getComputedStyle(document.documentElement)
|
|
.getPropertyValue(name).trim();
|
|
return x || fallback;
|
|
}
|
|
|
|
function applyGlobalTokens() {
|
|
const fg = v('--primary-text-color', '#e7e9f4');
|
|
const bg = v('--card-background-color', 'rgba(22, 24, 40, 0.92)');
|
|
const bgElev = v('--secondary-background-color', 'rgba(30, 32, 50, 0.95)');
|
|
const muted = v('--secondary-text-color', '#9a9cb8');
|
|
const border = v('--divider-color', 'rgba(255,255,255,0.20)');
|
|
const accent = v('--primary-color', '#a78bfa');
|
|
|
|
// 1. Force Web Awesome dark mode class on the html element
|
|
document.documentElement.classList.add('wa-dark');
|
|
|
|
// 2. Inject/refresh a <style> with wa-* color tokens mapped to HA theme
|
|
let el = document.getElementById('assist-fix-wa-tokens');
|
|
if (!el) {
|
|
el = document.createElement('style');
|
|
el.id = 'assist-fix-wa-tokens';
|
|
document.head.appendChild(el);
|
|
}
|
|
el.textContent = `
|
|
:root, html.wa-dark, .wa-dark {
|
|
/* Web Awesome text tokens */
|
|
--wa-color-text: ${fg};
|
|
--wa-color-text-link: ${accent};
|
|
--wa-color-text-quiet: ${muted};
|
|
--wa-color-text-normal: ${fg};
|
|
--wa-color-on-quiet: ${fg};
|
|
--wa-color-on-normal: ${fg};
|
|
/* Surfaces */
|
|
--wa-color-surface-default: ${bg};
|
|
--wa-color-surface-raised: ${bgElev};
|
|
--wa-color-surface-lowered: ${bg};
|
|
--wa-color-surface-border: ${border};
|
|
/* Fills (inputs, buttons) */
|
|
--wa-color-fill-quiet: ${bg};
|
|
--wa-color-fill-normal: ${bg};
|
|
--wa-color-fill-loud: ${accent};
|
|
/* Borders */
|
|
--wa-color-border-quiet: ${border};
|
|
--wa-color-border-normal: ${border};
|
|
--wa-color-border-loud: ${accent};
|
|
/* Brand (accent) */
|
|
--wa-color-brand-on-quiet: ${fg};
|
|
--wa-color-brand-on-normal: ${fg};
|
|
--wa-color-brand-fill-quiet: ${bg};
|
|
--wa-color-brand-fill-normal: ${accent};
|
|
--wa-color-brand-fill-loud: ${accent};
|
|
--wa-color-brand-border-quiet: ${border};
|
|
--wa-color-brand-border-normal: ${accent};
|
|
/* Neutral scale some components read */
|
|
--wa-color-neutral-fill-quiet: ${bg};
|
|
--wa-color-neutral-fill-normal: ${bg};
|
|
--wa-color-neutral-on-quiet: ${fg};
|
|
--wa-color-neutral-on-normal: ${fg};
|
|
--wa-color-neutral-border-quiet: ${border};
|
|
--wa-color-neutral-border-normal: ${border};
|
|
|
|
/* Shoelace-inspired fallbacks (some versions) */
|
|
--sl-color-neutral-0: ${bg};
|
|
--sl-color-neutral-50: ${bgElev};
|
|
--sl-color-neutral-100: ${bg};
|
|
--sl-color-neutral-200: ${border};
|
|
--sl-color-neutral-500: ${muted};
|
|
--sl-color-neutral-700: ${fg};
|
|
--sl-color-neutral-900: ${fg};
|
|
--sl-color-neutral-1000: ${fg};
|
|
--sl-input-background-color: ${bg};
|
|
--sl-input-color: ${fg};
|
|
--sl-input-border-color: ${border};
|
|
--sl-input-label-color: ${muted};
|
|
}
|
|
`;
|
|
}
|
|
|
|
function patchHaInput(haInput) {
|
|
if (!haInput || haInput.__assistFixed) return;
|
|
const sr = haInput.shadowRoot;
|
|
if (!sr) return;
|
|
haInput.__assistFixed = true;
|
|
const fg = v('--primary-text-color', '#e7e9f4');
|
|
const bg = v('--card-background-color', 'rgba(22, 24, 40, 0.92)');
|
|
const muted = v('--secondary-text-color', '#9a9cb8');
|
|
const border = v('--divider-color', 'rgba(255,255,255,0.20)');
|
|
|
|
// CSS via exported parts of wa-input
|
|
const outer = document.createElement('style');
|
|
outer.textContent = `
|
|
:host, wa-input { color: ${fg} !important; }
|
|
wa-input::part(base) {
|
|
background-color: ${bg} !important;
|
|
border-color: ${border} !important;
|
|
color: ${fg} !important;
|
|
}
|
|
wa-input::part(input) {
|
|
color: ${fg} !important;
|
|
caret-color: ${fg} !important;
|
|
background-color: transparent !important;
|
|
}
|
|
wa-input::part(label),
|
|
wa-input::part(form-control-label) {
|
|
color: ${muted} !important;
|
|
}
|
|
wa-input::part(hint) { color: ${muted} !important; }
|
|
`;
|
|
sr.appendChild(outer);
|
|
|
|
// Inline styles on the wa-input's internals (deepest possible)
|
|
const wa = sr.querySelector('wa-input');
|
|
if (wa && wa.shadowRoot) {
|
|
const innerStyle = document.createElement('style');
|
|
innerStyle.textContent = `
|
|
:host { color: ${fg} !important; }
|
|
.text-field, div[part="base"] {
|
|
background-color: ${bg} !important;
|
|
border-color: ${border} !important;
|
|
}
|
|
input, input.control {
|
|
color: ${fg} !important;
|
|
caret-color: ${fg} !important;
|
|
background-color: transparent !important;
|
|
}
|
|
input::placeholder { color: ${muted} !important; opacity: 0.7; }
|
|
label, .label { color: ${muted} !important; }
|
|
`;
|
|
wa.shadowRoot.appendChild(innerStyle);
|
|
|
|
const input = wa.shadowRoot.querySelector('input');
|
|
if (input) {
|
|
input.style.setProperty('color', fg, 'important');
|
|
input.style.setProperty('caret-color', fg, 'important');
|
|
input.style.setProperty('background-color', 'transparent', 'important');
|
|
}
|
|
const base = wa.shadowRoot.querySelector('[part="base"]');
|
|
if (base) {
|
|
base.style.setProperty('background-color', bg, 'important');
|
|
base.style.setProperty('border-color', border, 'important');
|
|
base.style.setProperty('color', fg, 'important');
|
|
}
|
|
const label = wa.shadowRoot.querySelector('.label, [part~="label"]');
|
|
if (label) label.style.setProperty('color', muted, 'important');
|
|
}
|
|
}
|
|
|
|
function walk(root, depth = 0) {
|
|
if (!root || depth > 12) return 0;
|
|
let n = 0;
|
|
try {
|
|
root.querySelectorAll('ha-input').forEach(el => { patchHaInput(el); n++; });
|
|
root.querySelectorAll('*').forEach(el => {
|
|
if (el.shadowRoot) n += walk(el.shadowRoot, depth + 1);
|
|
});
|
|
} catch (e) {}
|
|
return n;
|
|
}
|
|
|
|
applyGlobalTokens();
|
|
let n = walk(document);
|
|
console.log('[assist-fix] v5 initial ha-input styled:', n);
|
|
|
|
new MutationObserver(() => { applyGlobalTokens(); walk(document); })
|
|
.observe(document.body || document.documentElement,
|
|
{ childList: true, subtree: true });
|
|
|
|
window.addEventListener('show-dialog', () => {
|
|
setTimeout(() => {
|
|
const nn = walk(document);
|
|
console.log('[assist-fix] v5 after show-dialog ha-input styled:', nn);
|
|
}, 150);
|
|
});
|
|
|
|
// Re-run tokens whenever theme might change
|
|
window.addEventListener('theme-changed', applyGlobalTokens);
|
|
|
|
let passes = 0;
|
|
const iv = setInterval(() => {
|
|
const nn = walk(document);
|
|
if (nn > n) { console.log('[assist-fix] v5 now styled:', nn); n = nn; }
|
|
if (++passes > 240) clearInterval(iv);
|
|
}, 500);
|
|
|
|
console.log('[assist-fix] v5 loaded — wa-dark + wa-* tokens + inline');
|
|
})();
|