mirror of
https://github.com/tabler/tabler.git
synced 2026-10-13 21:57:00 +04:00
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:
1 parent
a9110e316f
commit
ac2c37e5ba
3 files changed
+26
No files matched your search
@@ -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.
|
||||
@@ -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.
|
||||
|
||||
|
||||
@@ -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') {
|
||||
|
||||
Reference in new issue
Block a user