Fix missing focus ring on all buttons and button groups (#2920)

This commit is contained in:
Paweł Kuna authored and GitHub committed 2026-09-01 22:28:08 +02:00
1 parent ee4c88fc80
commit febfa9f4af
3 files changed
+10 -4

No files matched your search

+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Fixed the missing focus ring on buttons and `btn-check` button groups by using the shared focus ring token.
+1 -2
View File
@@ -1118,14 +1118,13 @@ $btn-border-width: $input-btn-border-width !default;
$btn-font-weight: var(--font-weight-medium) !default; $btn-font-weight: var(--font-weight-medium) !default;
$btn-box-shadow: var(--shadow-input) !default; $btn-box-shadow: var(--shadow-input) !default;
$btn-focus-width: $input-btn-focus-width !default; $btn-focus-box-shadow: $focus-ring-box-shadow !default;
$btn-disabled-opacity: 0.4 !default; $btn-disabled-opacity: 0.4 !default;
$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default; $btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default;
$btn-link-color: var(--link-color) !default; $btn-link-color: var(--link-color) !default;
$btn-link-hover-color: var(--link-hover-color) !default; $btn-link-hover-color: var(--link-hover-color) !default;
$btn-link-disabled-color: $gray-600 !default; $btn-link-disabled-color: $gray-600 !default;
$btn-link-focus-shadow-rgb: to-rgb(color.mix(color-contrast($link-color), $link-color, 15%)) !default;
$btn-border-radius: var(--border-radius) !default; $btn-border-radius: var(--border-radius) !default;
$btn-border-radius-sm: var(--border-radius-sm) !default; $btn-border-radius-sm: var(--border-radius-sm) !default;
+4 -2
View File
@@ -20,7 +20,10 @@
--btn-hover-border-color: transparent; --btn-hover-border-color: transparent;
--btn-box-shadow: #{$btn-box-shadow}; --btn-box-shadow: #{$btn-box-shadow};
--btn-disabled-opacity: #{$btn-disabled-opacity}; --btn-disabled-opacity: #{$btn-disabled-opacity};
--btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--btn-focus-shadow-rgb), 0.5); // Zero-size shadow, not `none`: the active state is combined with the focus
// ring in one `box-shadow` list, where `none` would negate every other shadow
--btn-active-shadow: 0 0 0 #000;
--btn-focus-box-shadow: #{$btn-focus-box-shadow};
// scss-docs-end btn-css-vars // scss-docs-end btn-css-vars
display: inline-block; display: inline-block;
@@ -172,7 +175,6 @@
--btn-disabled-color: #{$btn-link-disabled-color}; --btn-disabled-color: #{$btn-link-disabled-color};
--btn-disabled-border-color: transparent; --btn-disabled-border-color: transparent;
--btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows --btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
--btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
text-decoration: $link-decoration; text-decoration: $link-decoration;
@if $enable-gradients { @if $enable-gradients {