itlxrd/psysonic
1
0
Fork 0
mirror of https://github.com/kilyabin/psysonic.git synced 2026-07-22 14:35:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/themes/focus.css
+23
View File
@@ -15,3 +15,26 @@
outline-offset: var(--focus-ring-offset);
}
/* Text inputs draw their OWN focus ring (border + box-shadow), so the global
outline above stacks a second ring outside it — the "double border". Drop it
for them. Specificity is deliberate: `input…:focus-visible` is (0,1,1), which
beats the global :focus-visible (0,1,0) but LOSES to the colour-blind-safe
themes' `[data-theme] *:focus-visible` (0,2,0) — so those themes keep their
stronger AAA ring on every field (incl. inputs) by design. The `:where()`
type-exclusion stays weightless so non-text controls (range/checkbox/…) keep
the outline everywhere. */
input:not(:where([type='button'], [type='submit'], [type='reset'], [type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='image'])):focus-visible,
textarea:focus-visible {
outline: none;
}
/* Under forced-colors the OS drops the box-shadow ring, so restore an outline
as the focus indicator for those same text inputs. */
@media (forced-colors: active) {
input:not(:where([type='button'], [type='submit'], [type='reset'], [type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file'], [type='image'])):focus-visible,
textarea:focus-visible {
outline: var(--focus-ring-width) solid var(--focus-ring-color);
outline-offset: var(--focus-ring-offset);
}
}