Consolidate focus states into the focus-ring() mixin (#2972)

Step 1 of #2972, output-neutral. `focus-ring()` is now the one
implementation — `outline` + `box-shadow: $focus-ring-box-shadow`, with
`$shadow` (validation colour, range extra layer) and `$outline` (skip the
reset on sibling / `:focus-within` selectors) parameters. Every direct
`box-shadow: $*-focus-box-shadow` consumer calls it; the 14
`$*-focus-box-shadow` variables stay as `!default` aliases.

Compiled CSS byte-identical to `v2-dev`; html-diff, test:scss and lint green.
This commit is contained in:
Bartek committed 2026-10-02 12:05:04 +02:00
1 parent a9110e316f
commit ac2c37e5ba
3 files changed
+26

No files matched your search

+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Updated `focus-ring()` to be the single focus-indicator mixin; the `$*-focus-box-shadow` variables stay as aliases.
+6
View File
@@ -253,6 +253,12 @@ of `color-scheme`, the token-dump verification harness) but not its code.
- Decide on `$spacers`: adopting the v6 0–9 scale silently changes every `.p-3` / `.m-4` in every
Tabler template. Recommendation: keep the v5 scale, add finer steps at new keys.
- Replace all `$*-focus-box-shadow` with one `focus-ring()` mixin over `--focus-ring*` tokens.
Step 1 done (#2972): `focus-ring()` reads `$focus-ring-box-shadow` and every focus consumer calls
it; the `$*-focus-box-shadow` variables stay as `!default` aliases; CSS byte-identical. Tabler
keeps the two-layer `box-shadow` look, not v6's `outline`, and the `forced-colors` fallback in
`layout/_accessibility.scss` stays. `.form-select` is still a single-layer exception. Step 2
(emit `--focus-ring-box-shadow` on `:root`, fix the `.focus-ring` helper, decide the
`.form-select` ring) is a follow-up.
- Consider the layered shadow scale (`.shadow-xs`…`.shadow-xl`) and `.border-keyline`.
- Skip the `.fs-*` renaming — it inverts the scale direction and breaks every page.
+15
View File
@@ -149,6 +149,21 @@
}
}
}
@include it('passes $shadow through and skips the outline reset with $outline: null') {
@include assert() {
@include output() {
.t {
@include focus-ring($shadow: 0 0 0 1px red, $outline: null);
}
}
@include expect() {
.t {
box-shadow: 0 0 0 1px red;
}
}
}
}
}
@include describe('media-print mixin') {