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

This reverts commit f8a293d1b9.
2026-10-14 22:26:30 +04:00 · 2026-09-09 11:32:04 +02:00
1 parent 2c10780fdd
commit 504c8473ae
@@ -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.
@@ -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.

@@ -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
@@ -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 {
@@ -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;
    }
  }

@@ -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);
  }
 }

@@ -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 {
@@ -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') {
@@ -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,
@@ -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 & {
@@ -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 ~ & {
@@ -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;
 }

 /**
@@ -17,7 +17,7 @@ input.clr-color {
  border-color: var(--border-color);

  &:focus {
-    @include focus-ring($show-border: true);
+    @include focus-ring(true);
  }
 }

@@ -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;
  }
 }