Shell: color field type (swatch picker) in tile settings and admin config

Renders <input type="color"> with the label beside it; the stored value is
always a #rrggbb string (3-digit hex widened, anything else falls back to
the schema default). Same styling in the gear popover and the admin form.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Waters Church
2026-09-10 16:31:46 -04:00
co-authored by Claude Fable 5.1
parent 4c5d7956ab
commit a71b14d755
4 changed files with 53 additions and 1 deletions
+11
View File
@@ -209,6 +209,17 @@ function fieldFor(key, spec, value, passwordSet, moduleId) {
field.append(span, select);
read = () => select.value;
selectEl = select;
} else if (type === 'color') {
// A swatch picker; the value is always a #rrggbb string.
field.classList.add('color-field');
const span = document.createElement('span');
span.textContent = label;
const input = document.createElement('input');
input.type = 'color';
const hex = (v, fb) => (/^#[0-9a-fA-F]{6}$/.test(String(v ?? '').trim()) ? String(v).trim().toLowerCase() : fb);
input.value = hex(value, hex(spec?.default, '#2ee59a'));
field.append(span, input);
read = () => input.value;
} else {
const span = document.createElement('span');
span.textContent = label;