diff --git a/.changeset/fix-button-focus-ring.md b/.changeset/fix-button-focus-ring.md new file mode 100644 index 000000000..f0f87434e --- /dev/null +++ b/.changeset/fix-button-focus-ring.md @@ -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. diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index e924d5c7e..89f6691e8 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -1118,14 +1118,13 @@ $btn-border-width: $input-btn-border-width !default; $btn-font-weight: var(--font-weight-medium) !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-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default; $btn-link-color: var(--link-color) !default; $btn-link-hover-color: var(--link-hover-color) !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-sm: var(--border-radius-sm) !default; diff --git a/core/scss/bootstrap/_buttons.scss b/core/scss/bootstrap/_buttons.scss index 41f7fc35d..be554ca32 100644 --- a/core/scss/bootstrap/_buttons.scss +++ b/core/scss/bootstrap/_buttons.scss @@ -20,7 +20,10 @@ --btn-hover-border-color: transparent; --btn-box-shadow: #{$btn-box-shadow}; --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 display: inline-block; @@ -172,7 +175,6 @@ --btn-disabled-color: #{$btn-link-disabled-color}; --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-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb}; text-decoration: $link-decoration; @if $enable-gradients {