Standardize focus styles using focus-ring mixin (#41950)

* Standardize focus styles using focus-ring mixin

Replace box-shadow focus styles with consistent focus-ring() mixin across components:
- Accordion, nav, pagination now use @include focus-ring(true)
- Forms (checkboxes, radios, switches, range, controls) use focus-ring mixin
- Update focus-ring-offset default from -1px to 1px
- Remove deprecated *-focus-box-shadow variables

* Fix some focus styles

* Remove unused CSS

* Remove more box-shadow on buttons

diff --git a/scss/_accordion.scss b/scss/_accordion.scss
index b6f02d5b7e1000c0c6ca235e6fe4833798a3ff2f..6857a746acaf2d9a76d8fd628bb3d6d6ee6fe893 100644 (file)
--- a/scss/_accordion.scss
+++ b/scss/_accordion.scss
@@ -3,8 +3,9 @@
 @use "functions" as *;
 @use "mixins/border-radius" as *;
 @use "mixins/transition" as *;
-@use "mixins/box-shadow" as *;
+@use "mixins/focus-ring" as *;
 @use "mixins/color-mode" as *;
+@use "buttons/button-variables" as *; // mdo-do: remove?
 
 // scss-docs-start accordion-variables
 $accordion-padding-y:                     1rem !default;
@@ -27,8 +28,6 @@ $accordion-transition:                    $btn-transition, border-radius .15s ea
 $accordion-button-active-bg:              var(--#{$prefix}bg-2) !default;
 $accordion-button-active-color:           var(--#{$prefix}fg) !default;
 
-$accordion-button-focus-box-shadow:       $btn-focus-box-shadow !default;
-
 $accordion-icon-width:                    1.25rem !default;
 $accordion-icon-transition:               transform .2s ease-in-out !default;
 $accordion-icon-transform:                rotate(-180deg) !default;
@@ -53,7 +52,6 @@ $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w
     --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
     --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
     --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
-    --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
     --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
     --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
     --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
@@ -103,10 +101,9 @@ $accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w
       z-index: 2;
     }
 
-    &:focus {
+    &:focus-visible {
       z-index: 3;
-      outline: 0;
-      box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+      @include focus-ring(true);
     }
   }
 

diff --git a/scss/_nav.scss b/scss/_nav.scss
index 27f2d7294446656a4bbf498bda95c32d3a797ecd..8bc7b8b664d3dd4f248db8c9c2d1b454258859bc 100644 (file)
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -1,8 +1,8 @@
 @use "config" as *;
 @use "variables" as *;
 @use "mixins/border-radius" as *;
-@use "mixins/gradients" as *;
 @use "mixins/focus-ring" as *;
+@use "mixins/gradients" as *;
 @use "mixins/transition" as *;
 
 // scss-docs-start nav-variables

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 2851124f0252f8edca90df1f6ba83606178521a7..65af348697223433dbeb8d7373260f791a1c9f72 100644 (file)
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -2,13 +2,13 @@
 @use "config" as *;
 @use "colors" as *;
 @use "variables" as *;
+@use "layout/breakpoints" as *;
 @use "mixins/border-radius" as *;
 @use "mixins/box-shadow" as *;
+@use "mixins/color-mode" as *;
+@use "mixins/focus-ring" as *;
 @use "mixins/gradients" as *;
 @use "mixins/transition" as *;
-@use "mixins/color-mode" as *;
-@use "mixins/deprecate" as *;
-@use "layout/breakpoints" as *;
 
 // scss-docs-start navbar-variables
 $navbar-padding-y:                  $spacer * .5 !default;
@@ -29,8 +29,7 @@ $navbar-brand-margin-end:           1rem !default;
 $navbar-toggler-padding-y:          .25rem !default;
 $navbar-toggler-padding-x:          .75rem !default;
 $navbar-toggler-font-size:          $font-size-lg !default;
-$navbar-toggler-border-radius:      $btn-border-radius !default;
-$navbar-toggler-focus-width:        $btn-focus-width !default;
+$navbar-toggler-border-radius:      var(--#{$prefix}border-radius) !default;
 $navbar-toggler-transition:         box-shadow .15s ease-in-out !default;
 
 $navbar-light-color:                var(--#{$prefix}fg-2) !default;
@@ -78,7 +77,6 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
     --#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
     --#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
     --#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
-    --#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
     --#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
     // scss-docs-end navbar-css-vars
 
@@ -217,10 +215,9 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
       text-decoration: none;
     }
 
-    &:focus {
+    &:focus-visible {
       text-decoration: none;
-      outline: 0;
-      box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
+      @include focus-ring(true);
     }
   }
 
@@ -318,10 +315,6 @@ $navbar-dark-brand-hover-color:     $navbar-dark-active-color !default;
   //
   // Styles for switching between navbars with light or dark background.
 
-  .navbar-light {
-    @include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
-  }
-
   .navbar-dark,
   .navbar[data-bs-theme="dark"] {
     // scss-docs-start navbar-dark-css-vars

diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index afe0e9bb900abaecdfa3c8850f7c20b6b56c7e38..4036e8c9ad089939dba8324c18978ef4b41ae920 100644 (file)
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -2,8 +2,9 @@
 @use "variables" as *;
 @use "mixins/lists" as *;
 @use "mixins/border-radius" as *;
-@use "mixins/transition" as *;
+@use "mixins/focus-ring" as *;
 @use "mixins/gradients" as *;
+@use "mixins/transition" as *;
 
 // scss-docs-start pagination-variables
 $pagination-padding-y:              .375rem !default;
@@ -24,8 +25,6 @@ $pagination-border-color:           var(--#{$prefix}border-color) !default;
 
 $pagination-focus-color:            var(--#{$prefix}link-hover-color) !default;
 $pagination-focus-bg:               var(--#{$prefix}secondary-bg) !default;
-$pagination-focus-box-shadow:       $focus-ring-box-shadow !default;
-$pagination-focus-outline:          0 !default;
 
 $pagination-hover-color:            var(--#{$prefix}link-hover-color) !default;
 $pagination-hover-bg:               var(--#{$prefix}tertiary-bg) !default;
@@ -71,7 +70,6 @@ $pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg) !default;
     --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
     --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
     --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
-    --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
     --#{$prefix}pagination-active-color: #{$pagination-active-color};
     --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
     --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
@@ -102,12 +100,11 @@ $pagination-border-radius-lg:       var(--#{$prefix}border-radius-lg) !default;
       border-color: var(--#{$prefix}pagination-hover-border-color);
     }
 
-    &:focus {
+    &:focus-visible {
       z-index: 3;
       color: var(--#{$prefix}pagination-focus-color);
       background-color: var(--#{$prefix}pagination-focus-bg);
-      outline: $pagination-focus-outline;
-      box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
+      @include focus-ring(true);
     }
 
     &.active,

diff --git a/scss/_root.scss b/scss/_root.scss
index 8bca15e9cb016b213448b0effd5cd9ec9f94adcc..34123c781b05218c05fc5b4ea5f071919f5f932b 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -133,7 +133,7 @@
   // Focus styles
   // scss-docs-start root-focus-variables
   --#{$prefix}focus-ring-width: 3px;
-  --#{$prefix}focus-ring-offset: -1px;
+  --#{$prefix}focus-ring-offset: 1px;
   --#{$prefix}focus-ring-color: var(--#{$prefix}primary-focus-ring);
   --#{$prefix}focus-ring: var(--#{$prefix}focus-ring-width) solid var(--#{$prefix}focus-ring-color);
   // scss-docs-end root-focus-variables

diff --git a/scss/_variables.scss b/scss/_variables.scss
index cffadfe33c7bddeb4352c1a657f69d941aeb2954..0014fe35f6bf9feefb3ec987349ea5482b286fa8 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -354,12 +354,6 @@ $input-btn-font-family:       null !default;
 $input-btn-font-size:         $font-size-base !default;
 $input-btn-line-height:       $line-height-base !default;
 
-$input-btn-focus-width:         .25em !default;
-$input-btn-focus-color-opacity: $focus-ring-opacity !default;
-$input-btn-focus-color:         $focus-ring-color !default;
-$input-btn-focus-blur:          $focus-ring-blur !default;
-$input-btn-focus-box-shadow:    $focus-ring-box-shadow !default;
-
 $input-btn-padding-y-sm:      .25rem !default;
 $input-btn-padding-x-sm:      .5rem !default;
 $input-btn-font-size-sm:      $font-size-sm !default;
@@ -372,51 +366,6 @@ $input-btn-border-width:      var(--#{$prefix}border-width) !default;
 // scss-docs-end input-btn-variables
 
 
-// Buttons
-//
-// For each of Bootstrap's buttons, define text, background, and border color.
-
-// scss-docs-start btn-variables
-$btn-color:                   var(--#{$prefix}color-body) !default;
-$btn-padding-y:               $input-btn-padding-y !default;
-$btn-padding-x:               $input-btn-padding-x !default;
-$btn-font-family:             $input-btn-font-family !default;
-$btn-font-size:               $input-btn-font-size !default;
-$btn-line-height:             $input-btn-line-height !default;
-$btn-white-space:             null !default; // Set to `nowrap` to prevent text wrapping
-
-$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
-$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
-$btn-font-size-sm:            $input-btn-font-size-sm !default;
-
-$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
-$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
-$btn-font-size-lg:            $input-btn-font-size-lg !default;
-
-$btn-border-width:            $input-btn-border-width !default;
-
-$btn-font-weight:             $font-weight-normal !default;
-$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
-$btn-focus-width:             $input-btn-focus-width !default;
-$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
-$btn-disabled-opacity:        .65 !default;
-$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
-
-$btn-link-color:              var(--#{$prefix}link-color) !default;
-$btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;
-$btn-link-disabled-color:     var(--#{$prefix}gray-600) !default;
-// $btn-link-color-contrast:     color-contrast($link-color) !default;
-// $btn-link-focus-shadow-rgb:   to-rgb(color.mix($btn-link-color-contrast, $link-color, 15%)) !default;
-
-// Allows for customizing button radius independently from global border radius
-$btn-border-radius:           var(--#{$prefix}border-radius) !default;
-$btn-border-radius-sm:        var(--#{$prefix}border-radius-sm) !default;
-$btn-border-radius-lg:        var(--#{$prefix}border-radius-lg) !default;
-
-$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
-// scss-docs-end btn-variables
-
-
 // Z-index master list
 //
 // Warning: Avoid customizing these values. They're used for a bird's eye view

diff --git a/scss/buttons/_button-group.scss b/scss/buttons/_button-group.scss
index b1b0f22a4411324dc26753caa4f8410df6fc4f47..f384053b14cedd8504dce0ee2b8ba8a6795fba9a 100644 (file)
--- a/scss/buttons/_button-group.scss
+++ b/scss/buttons/_button-group.scss
@@ -97,19 +97,6 @@
     padding-inline: $btn-padding-x-lg * .75;
   }
 
-
-  // The clickable button for toggling the menu
-  // Set the same inset shadow as the :active state
-  .btn-group.show .dropdown-toggle {
-    @include box-shadow($btn-active-box-shadow);
-
-    // Show no shadow for `.btn-link` since it has no other button styles.
-    &.btn-link {
-      @include box-shadow(none);
-    }
-  }
-
-
   //
   // Vertical button groups
   //

diff --git a/scss/buttons/_button-variables.scss b/scss/buttons/_button-variables.scss
index b72521e4e5dbce4367726f0c92cb1d9a64ba03ea..005390870608d8b063c35a26c2a5e1f75905862a 100644 (file)
--- a/scss/buttons/_button-variables.scss
+++ b/scss/buttons/_button-variables.scss
@@ -38,9 +38,7 @@ $btn-line-height-lg:          1.25rem !default;
 $btn-border-width:            $input-btn-border-width !default;
 
 $btn-font-weight:             $font-weight-normal !default;
-$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
 $btn-disabled-opacity:        .65 !default;
-$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
 
 $btn-link-color:              var(--#{$prefix}link-color) !default;
 $btn-link-hover-color:        var(--#{$prefix}link-hover-color) !default;

diff --git a/scss/buttons/_button.scss b/scss/buttons/_button.scss
index 7107dde3b13e124cd652819a13a5c602407d48e4..a014f8a4c72b8f76ae1741d0b6e0f33f5f9c41f6 100644 (file)
--- a/scss/buttons/_button.scss
+++ b/scss/buttons/_button.scss
@@ -305,8 +305,6 @@ $btn-variant-selectors: () !default;
     --#{$prefix}btn-active-border-color: transparent;
     --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
     --#{$prefix}btn-disabled-border-color: transparent;
-    --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
-    // --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
 
     text-decoration: var(--#{$prefix}link-decoration);
 

diff --git a/scss/forms/_check.scss b/scss/forms/_check.scss
index d6fc0a83c1ca1b8bf5d74869fabe8fe0182bcf57..b20df8ba9108f6e2dceda8b1ccf97849fb0de92a 100644 (file)
--- a/scss/forms/_check.scss
+++ b/scss/forms/_check.scss
@@ -3,7 +3,6 @@
 @use "../variables" as *;
 @use "../functions" as *;
 @use "../mixins/border-radius" as *;
-@use "../mixins/box-shadow" as *;
 @use "../mixins/color-mode" as *;
 @use "../mixins/focus-ring" as *;
 @use "../mixins/transition" as *;
@@ -68,6 +67,10 @@ $check-disabled-opacity: .65 !default;
       border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}check-checked-border-color));
     }
 
+    :where(input:focus-visible) {
+      @include focus-ring(true);
+    }
+
     &:has(input:checked) .checked,
     &:has(input:indeterminate) .indeterminate {
       display: block;
@@ -83,7 +86,6 @@ $check-disabled-opacity: .65 !default;
         cursor: default;
       }
     }
-
     &:has(input:disabled:checked) {
       opacity: var(--#{$prefix}check-disabled-opacity);
     }

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index dfd4749dd17c0d032cd7f29cfede5ec899ed33a7..d0e40d62d66f08ec450631aba8cdfb878d30ab2f 100644 (file)
--- a/scss/forms/_form-control.scss
+++ b/scss/forms/_form-control.scss
@@ -9,6 +9,7 @@
 @use "../mixins/gradients" as *;
 @use "../mixins/transition" as *;
 @use "form-variables" as *;
+@use "../buttons/button-variables" as *; // mdo-do: remove?
 
 @layer forms {
   .form-control {
@@ -56,6 +57,7 @@
       background-color: $input-focus-bg;
       border-color: $input-focus-border-color;
       @include focus-ring(true);
+      --#{$prefix}focus-ring-offset: -1px;
     }
 
     &::-webkit-date-and-time-value {

diff --git a/scss/forms/_form-range.scss b/scss/forms/_form-range.scss
index 2ae70a2bc0b49ab417acf371eee8e1966f246278..16dfae13fdaa3001cb4f2b2e1f73187220114d91 100644 (file)
--- a/scss/forms/_form-range.scss
+++ b/scss/forms/_form-range.scss
@@ -3,6 +3,7 @@
 @use "../variables" as *;
 @use "../mixins/border-radius" as *;
 @use "../mixins/box-shadow" as *;
+@use "../mixins/focus-ring" as *;
 @use "../mixins/transition" as *;
 @use "../mixins/gradients" as *;
 @use "form-variables" as *;
@@ -21,8 +22,6 @@ $form-range-thumb-bg:                      $component-active-bg !default;
 $form-range-thumb-border:                  0 !default;
 $form-range-thumb-border-radius:           1rem !default;
 $form-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
-$form-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
-$form-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in Edge
 $form-range-thumb-active-bg:               tint-color($component-active-bg, 70%) !default;
 $form-range-thumb-disabled-bg:             var(--#{$prefix}secondary-color) !default;
 $form-range-thumb-transition:              background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
@@ -31,7 +30,7 @@ $form-range-thumb-transition:              background-color .15s ease-in-out, bo
 @layer forms {
   .form-range {
     width: 100%;
-    height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
+    height: calc(#{$form-range-thumb-height} + (var(--#{$prefix}focus-ring-width) * 2));
     padding: 0; // Need to reset padding
     appearance: none;
     background-color: transparent;
@@ -39,10 +38,16 @@ $form-range-thumb-transition:              background-color .15s ease-in-out, bo
     &:focus {
       outline: 0;
 
+
       // Pseudo-elements must be split across multiple rulesets to have an effect.
-      // No box-shadow() mixin for focus accessibility.
-      &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
-      &::-moz-range-thumb     { box-shadow: $form-range-thumb-focus-box-shadow; }
+      &::-webkit-slider-thumb {
+        @include focus-ring(true);
+        --#{$prefix}focus-ring-offset: 1px;
+      }
+      &::-moz-range-thumb     {
+        @include focus-ring(true);
+        --#{$prefix}focus-ring-offset: 1px;
+      }
     }
 
     &::-moz-focus-outer {

diff --git a/scss/forms/_form-variables.scss b/scss/forms/_form-variables.scss
index d00987f1b8b28ac306494a132314418b4ebf03c6..f9dc02e82ad3ec9d6fd9bdaae7bc9622f5afaa63 100644 (file)
--- a/scss/forms/_form-variables.scss
+++ b/scss/forms/_form-variables.scss
@@ -93,8 +93,6 @@ $input-border-radius-lg:                var(--#{$prefix}border-radius-lg) !defau
 $input-focus-bg:                        $input-bg !default;
 $input-focus-border-color:              var(--#{$prefix}primary-border) !default;
 $input-focus-color:                     $input-color !default;
-$input-focus-width:                     $input-btn-focus-width !default;
-$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
 
 $input-placeholder-color:               var(--#{$prefix}secondary-color) !default;
 $input-plaintext-color:                 var(--#{$prefix}color-body) !default;
@@ -150,7 +148,7 @@ $form-validation-states: (
     "icon": $form-feedback-icon-valid,
     "tooltip-color": #fff,
     "tooltip-bg-color": var(--#{$prefix}success),
-    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
+    // "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity),
     "border-color": var(--#{$prefix}form-valid-border-color),
   ),
   "invalid": (
@@ -158,7 +156,7 @@ $form-validation-states: (
     "icon": $form-feedback-icon-invalid,
     "tooltip-color": #fff,
     "tooltip-bg-color": var(--#{$prefix}danger),
-    "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
+    // "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity),
     "border-color": var(--#{$prefix}form-invalid-border-color),
   )
 ) !default;

diff --git a/scss/forms/_radio.scss b/scss/forms/_radio.scss
index c13cafd13288a0c278976bd967d8eca8e3ea4720..bac10eb92ab6f95c85b1886dbfe46c4b68e6c63a 100644 (file)
--- a/scss/forms/_radio.scss
+++ b/scss/forms/_radio.scss
@@ -3,7 +3,6 @@
 @use "../variables" as *;
 @use "../functions" as *;
 @use "../mixins/border-radius" as *;
-@use "../mixins/box-shadow" as *;
 @use "../mixins/color-mode" as *;
 @use "../mixins/focus-ring" as *;
 @use "../mixins/transition" as *;
@@ -72,5 +71,10 @@ $radio-disabled-opacity: .65 !default;
         cursor: default;
       }
     }
+
+    &:focus-visible {
+      @include focus-ring(true);
+    }
+
   }
 }

diff --git a/scss/forms/_switch.scss b/scss/forms/_switch.scss
index da4d91c75e3af2a39c21e993d83e4e72ef985043..57285c90809f7e340139de49890ce5d8333234d2 100644 (file)
--- a/scss/forms/_switch.scss
+++ b/scss/forms/_switch.scss
@@ -47,8 +47,6 @@
       flex-shrink: 0;
       width: calc(var(--#{$prefix}switch-height) - calc(var(--#{$prefix}switch-padding) * 2) - var(--#{$prefix}switch-border-width) * 2);
       height: calc(var(--#{$prefix}switch-height) - calc(var(--#{$prefix}switch-padding) * 2) - var(--#{$prefix}switch-border-width) * 2);
-      // width: calc(var(--#{$prefix}switch-height) - calc(var(--#{$prefix}switch-padding) * 2));
-      // height: calc(var(--#{$prefix}switch-height) - calc(var(--#{$prefix}switch-padding) * 2));
       content: "";
       background-color: var(--#{$prefix}switch-indicator-bg);
       // stylelint-disable-next-line property-disallowed-list
@@ -61,12 +59,17 @@
       inset: 0;
       appearance: none;
       background-color: transparent;
+      outline: 0;
+    }
+
+    &:focus-within {
+      @include focus-ring(true);
     }
 
     &:has(input:checked) {
       padding-inline-start: calc(var(--#{$prefix}switch-height) / 2 + var(--#{$prefix}switch-padding));
-      background-color: var(--#{$prefix}switch-checked-bg);
-      border-color: var(--#{$prefix}switch-checked-border-color);
+      background-color: var(--#{$prefix}theme-bg, var(--#{$prefix}switch-checked-bg));
+      border-color: var(--#{$prefix}theme-bg, var(--#{$prefix}switch-checked-border-color));
     }
 
     &:has(input:disabled) {

diff --git a/scss/forms/_validation.scss b/scss/forms/_validation.scss
index a6b97564ce9d848a4a03397de305d91e335e92ca..c6834a78fa1a96f9a1440c450d2ca66fa56edbc4 100644 (file)
--- a/scss/forms/_validation.scss
+++ b/scss/forms/_validation.scss
@@ -36,7 +36,7 @@
   $icon,
   $tooltip-color: color-contrast($color),
   $tooltip-bg-color: rgba($color, $form-feedback-tooltip-opacity),
-  $focus-box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($color, $input-btn-focus-color-opacity),
+  $focus-box-shadow: null, // mdo-do: fix
   $border-color: $color
 ) {
   .#{$state}-feedback {

diff --git a/site/src/scss/_buttons.scss b/site/src/scss/_buttons.scss
deleted file mode 100644 (file)
index 042c233..0000000
--- a/site/src/scss/_buttons.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-@use "sass:color";
-@use "../../../scss/config" as *;
-@use "../../../scss/colors" as *;
-@use "variables" as *;
-
-@layer custom {
-  // scss-docs-start btn-css-vars-example
-  .btn-bd-primary {
-    --bs-btn-font-weight: 600;
-    --bs-btn-color: var(--bs-white);
-    --bs-btn-bg: var(--bd-violet-bg);
-    --bs-btn-border-color: var(--bd-violet-bg);
-    --bs-btn-hover-color: var(--bs-white);
-    --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
-    --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
-    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
-    --bs-btn-active-color: var(--bs-btn-hover-color);
-    --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
-    --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
-  }
-  // scss-docs-end btn-css-vars-example
-
-  .btn-bd-accent {
-    --bs-btn-font-weight: 600;
-    --bs-btn-color: var(--bd-accent);
-    --bs-btn-border-color: var(--bd-accent);
-    --bs-btn-hover-color: var(--bd-dark);
-    --bs-btn-hover-bg: var(--bd-accent);
-    --bs-btn-hover-border-color: var(--bd-accent);
-    --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
-    --bs-btn-active-color: var(--bs-btn-hover-color);
-    --bs-btn-active-bg: var(--bs-btn-hover-bg);
-    --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
-  }
-
-  .btn-bd-light {
-    --btn-custom-color: #{color.mix($bd-violet, $white, 75%)};
-
-    --bs-btn-color: var(--bs-gray-600);
-    --bs-btn-border-color: var(--bs-border-color);
-    --bs-btn-hover-color: var(--btn-custom-color);
-    --bs-btn-hover-border-color: var(--btn-custom-color);
-    --bs-btn-active-color: var(--btn-custom-color);
-    --bs-btn-active-bg: var(--bs-white);
-    --bs-btn-active-border-color: var(--btn-custom-color);
-    --bs-btn-focus-border-color: var(--btn-custom-color);
-    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
-  }
-
-  .bd-btn-lg {
-    --bs-btn-border-radius: .5rem;
-
-    padding: .8125rem 2rem;
-  }
-}

diff --git a/site/src/scss/docs.scss b/site/src/scss/docs.scss
index f38c493dbe9e79fd73ee4956272adb459e65eddb..11f10280bc06a5da58509b7fc465c5355b8bad8d 100644 (file)
--- a/site/src/scss/docs.scss
+++ b/site/src/scss/docs.scss
@@ -47,7 +47,6 @@
 @use "toc";
 @use "footer";
 @use "component-examples";
-@use "buttons";
 @use "callouts";
 @use "details";
 @use "brand";