diff --git a/.changeset/focus-ring-mixin.md b/.changeset/focus-ring-mixin.md deleted file mode 100644 index 86cc610ec..000000000 --- a/.changeset/focus-ring-mixin.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@tabler/core": patch ---- - -Updated `focus-ring()` to be the single focus-indicator mixin; the `$*-focus-box-shadow` variables stay as aliases. diff --git a/BOOTSTRAP-V6-MIGRATION.md b/BOOTSTRAP-V6-MIGRATION.md index 32534fe3e..3e6d81dff 100644 --- a/BOOTSTRAP-V6-MIGRATION.md +++ b/BOOTSTRAP-V6-MIGRATION.md @@ -253,12 +253,6 @@ 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. diff --git a/core/scss/bootstrap/_nav.scss b/core/scss/bootstrap/_nav.scss index b0ab8f98c..43b576a5d 100644 --- a/core/scss/bootstrap/_nav.scss +++ b/core/scss/bootstrap/_nav.scss @@ -41,7 +41,8 @@ } &:focus-visible { - @include focus-ring($shadow: $nav-link-focus-box-shadow); + outline: 0; + box-shadow: $nav-link-focus-box-shadow; } // Disabled state lightens text diff --git a/core/scss/bootstrap/forms/_form-check.scss b/core/scss/bootstrap/forms/_form-check.scss index 62f774189..04e6e12a4 100644 --- a/core/scss/bootstrap/forms/_form-check.scss +++ b/core/scss/bootstrap/forms/_form-check.scss @@ -61,7 +61,8 @@ &:focus { border-color: $form-check-input-focus-border; - @include focus-ring($shadow: $form-check-input-focus-box-shadow); + outline: 0; + box-shadow: $form-check-input-focus-box-shadow; } &:checked { diff --git a/core/scss/bootstrap/forms/_form-range.scss b/core/scss/bootstrap/forms/_form-range.scss index cae7ae3e1..63f7e0091 100644 --- a/core/scss/bootstrap/forms/_form-range.scss +++ b/core/scss/bootstrap/forms/_form-range.scss @@ -19,10 +19,10 @@ // Pseudo-elements must be split across multiple rulesets to have an effect. // No box-shadow() mixin for focus accessibility. &::-webkit-slider-thumb { - @include focus-ring($shadow: $form-range-thumb-focus-box-shadow, $outline: null); + box-shadow: $form-range-thumb-focus-box-shadow; } &::-moz-range-thumb { - @include focus-ring($shadow: $form-range-thumb-focus-box-shadow, $outline: null); + box-shadow: $form-range-thumb-focus-box-shadow; } } diff --git a/core/scss/mixins/_mixins.scss b/core/scss/mixins/_mixins.scss index 01a52ed33..16fcf7337 100644 --- a/core/scss/mixins/_mixins.scss +++ b/core/scss/mixins/_mixins.scss @@ -77,15 +77,14 @@ gap: var(--list-gap); } -@mixin focus-ring($shadow: $focus-ring-box-shadow, $show-border: false, $outline: 0) { - @if $outline != null { - outline: $outline; - } +@mixin focus-ring($show-border: false) { + outline: 0; + box-shadow: + 0 0 0 2px var(--primary), + 0 0 $focus-ring-blur $focus-ring-width color-transparent(var(--primary), 0.25); - box-shadow: $shadow; - - @if $show-border { - border-color: $focus-ring-color; + @if ($show-border) { + border-color: color-transparent(var(--primary), 0.25); } } diff --git a/core/scss/mixins/bootstrap/_forms.scss b/core/scss/mixins/bootstrap/_forms.scss index 74e4d61b4..7955b143e 100644 --- a/core/scss/mixins/bootstrap/_forms.scss +++ b/core/scss/mixins/bootstrap/_forms.scss @@ -4,7 +4,6 @@ @use '../../settings' as *; @use '../../variables' as *; @use '../functions' as *; -@use '../mixins' as *; @use 'breakpoints' as *; // This mixin uses an `if()` technique to be compatible with Dart Sass // See https://github.com/sass/sass/issues/1873#issuecomment-152293725 for more details @@ -71,7 +70,7 @@ @if $enable-shadows { @include box-shadow($input-box-shadow, $focus-box-shadow); } @else { - @include focus-ring($shadow: $focus-box-shadow, $outline: null); + box-shadow: $focus-box-shadow; } } } @@ -106,7 +105,7 @@ @if $enable-shadows { @include box-shadow($form-select-box-shadow, $focus-box-shadow); } @else { - @include focus-ring($shadow: $focus-box-shadow, $outline: null); + box-shadow: $focus-box-shadow; } } } @@ -129,7 +128,7 @@ } &:focus { - @include focus-ring($shadow: $focus-box-shadow, $outline: null); + box-shadow: $focus-box-shadow; } ~ .form-check-label { diff --git a/core/scss/tests/_mixins.test.scss b/core/scss/tests/_mixins.test.scss index bdc66816b..7770b9c8c 100644 --- a/core/scss/tests/_mixins.test.scss +++ b/core/scss/tests/_mixins.test.scss @@ -140,21 +140,6 @@ } } } - - @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') { diff --git a/core/scss/ui/_forms.scss b/core/scss/ui/_forms.scss index aa593bff1..60e52bed9 100644 --- a/core/scss/ui/_forms.scss +++ b/core/scss/ui/_forms.scss @@ -207,7 +207,7 @@ Input group .input-group-flat { &:focus-within { - @include focus-ring($shadow: $input-focus-box-shadow, $outline: null); + box-shadow: $input-focus-box-shadow; @include border-radius($input-border-radius); .form-control, diff --git a/core/scss/ui/forms/_form-colorinput.scss b/core/scss/ui/forms/_form-colorinput.scss index b75c36107..e8f94dcea 100644 --- a/core/scss/ui/forms/_form-colorinput.scss +++ b/core/scss/ui/forms/_form-colorinput.scss @@ -46,7 +46,7 @@ Color Input .form-colorinput-input:focus ~ & { border-color: var(--primary); - @include focus-ring($shadow: $input-btn-focus-box-shadow, $outline: null); + box-shadow: $input-btn-focus-box-shadow; } @at-root .form-colorinput-light & { diff --git a/core/scss/ui/forms/_form-imagecheck.scss b/core/scss/ui/forms/_form-imagecheck.scss index fa0403811..ece924180 100644 --- a/core/scss/ui/forms/_form-imagecheck.scss +++ b/core/scss/ui/forms/_form-imagecheck.scss @@ -28,7 +28,7 @@ Image check .form-imagecheck-input:focus ~ & { border-color: var(--primary); - @include focus-ring($shadow: $input-btn-focus-box-shadow, $outline: null); + box-shadow: $input-btn-focus-box-shadow; } .form-imagecheck-input:checked ~ & { diff --git a/core/scss/ui/forms/_form-selectgroup.scss b/core/scss/ui/forms/_form-selectgroup.scss index f47ed2f4c..a789db0d9 100644 --- a/core/scss/ui/forms/_form-selectgroup.scss +++ b/core/scss/ui/forms/_form-selectgroup.scss @@ -111,7 +111,7 @@ Select group z-index: 2; color: var(--primary); border-color: var(--primary); - @include focus-ring($shadow: $input-btn-focus-box-shadow, $outline: null); + box-shadow: $input-btn-focus-box-shadow; } /** diff --git a/core/scss/vendor/_coloris.scss b/core/scss/vendor/_coloris.scss index 6ad16dce9..396dbb9c3 100644 --- a/core/scss/vendor/_coloris.scss +++ b/core/scss/vendor/_coloris.scss @@ -17,7 +17,7 @@ input.clr-color { border-color: var(--border-color); &:focus { - @include focus-ring($show-border: true); + @include focus-ring(true); } } diff --git a/core/scss/vendor/_nouislider.scss b/core/scss/vendor/_nouislider.scss index b68d36686..cc2531598 100644 --- a/core/scss/vendor/_nouislider.scss +++ b/core/scss/vendor/_nouislider.scss @@ -43,7 +43,7 @@ &.noUi-active, &:focus { - @include focus-ring($shadow: $form-range-thumb-focus-box-shadow, $outline: null); + box-shadow: $form-range-thumb-focus-box-shadow; } }