fix(themes): unify input & dropdown focus borders across themes (#1052)

* chore(themes): drop the dead installs field from RegistryTheme

The store no longer reads install counts (the themes registry stopped
emitting them), so this optional field on RegistryTheme was unused.

* fix(themes): give dropdown border/shadow tokens a cascade default

--border-dropdown and --shadow-dropdown were set by only two themes and had
no base fallback, so dropdown/popover borders rendered without a themed value
in every other theme. Default them in the semantic cascade next to the other
menu tokens; themes that set them explicitly still override.

* fix(themes): unify input focus rings, drop the double border

Text inputs draw their own border + box-shadow focus ring, but the global
:focus-visible outline stacked a second ring outside it — a double border on
every field. Suppress the outline for text inputs centrally; the specificity
(0,1,1) beats the global ring but loses to the colour-blind-safe themes'
[data-theme] *:focus-visible (0,2,0), so those keep their stronger AAA ring on
every field by design — the header search now carries that ring on its cluster
there too. Align the few input classes that had a weaker or missing ring to the
shared border + 3px accent-dim standard.

* docs(changelog): add #1052 input/dropdown focus border fixes
This commit is contained in:
Psychotoxical
2026-06-09 22:23:41 +02:00
committed by GitHub
parent 155ef88cc0
commit 98bdf310d6
11 changed files with 72 additions and 7 deletions
@@ -46,12 +46,18 @@
flex: 1;
min-width: 0;
background: var(--input-bg);
border: 1px solid var(--accent);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 12px;
padding: 3px 7px;
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.context-submenu-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-dim);
}
.context-submenu-input::placeholder {
@@ -817,9 +817,11 @@
font-size: 14px;
box-sizing: border-box;
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.orbit-start-modal__input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-dim);
}
.orbit-start-modal__reshuffle {
@@ -469,6 +469,6 @@
.playback-delay-custom__input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
box-shadow: 0 0 0 3px var(--accent-dim);
}
+2 -1
View File
@@ -20,11 +20,12 @@
padding: 6px 12px;
width: 220px;
outline: none;
transition: border-color 0.15s;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.playlist-filter-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-dim);
}
.playlist-filter-input::placeholder {
+2 -2
View File
@@ -165,8 +165,8 @@
.folder-col-filter-input:focus {
outline: none;
border-color: color-mix(in srgb, var(--accent) 70%, var(--border-subtle));
box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-dim);
}
.folder-col.folder-col--compact .folder-col-filter {