Fix focus styles for buttons

src/scss/_bootstrap-variables.scss

@@ -54,5 +54,6 @@ $danger: #b3393b !default;
 $light: #fff !default;
 $dark: #000 !default;
 
-$focus-ring-color: blue;
-$btn-focus-box-shadow: 0 0 0 0.25em rgba(0, 0, 255, 0.5) !important;
+$focus-ring-width:      0.25rem;
+$focus-ring-opacity:    1.0;
+$focus-ring-color:      blue;

src/scss/_detroitmi-style-guide.scss

@@ -19,3 +19,20 @@ h6,
 .h6 {
   font-weight: 900;
 }
+
+.btn {
+  --bs-btn-focus-box-shadow: 0 0 0 0.25em
+    rgba(var(--bs-btn-focus-shadow-rgb), 1.0);
+}
+
+.btn:focus-visible {
+  --bs-btn-focus-shadow-rgb: 0, 0, 255;
+}
+
+// Define focus box-shadow for buttons
+@each $color, $value in $theme-colors {
+  $focus-shadow-rgb: to-rgb($focus-ring-color);
+  .btn-#{$color} {
+    --#{$prefix}btn-focus-shadow-rgb: #{$focus-shadow-rgb};
+  }
+}

src/scss/_host.scss

@@ -49,16 +49,14 @@
 
   // Root and body
   // scss-docs-start root-body-variables
-  @if $font-size-root !=null {
+  @if $font-size-root != null {
     --#{$prefix}root-font-size: #{$font-size-root};
   }
-
   --#{$prefix}body-font-family: #{inspect($font-family-base)};
   @include rfs($font-size-base, --#{$prefix}body-font-size);
   --#{$prefix}body-font-weight: #{$font-weight-base};
   --#{$prefix}body-line-height: #{$line-height-base};
-
-  @if $body-text-align !=null {
+  @if $body-text-align != null {
     --#{$prefix}body-text-align: #{$body-text-align};
   }
 
@@ -79,14 +77,9 @@
   --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
   --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
   --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
-
-  --bs-btn-focus-box-shadow: 0 0 0 0.25rem blue;
-
-  --bs-btn-focus-shadow-rgb: rgb(0, 0, 255);
-
   // scss-docs-end root-body-variables
 
-  @if $headings-color !=null {
+  @if $headings-color != null {
     --#{$prefix}heading-color: #{$headings-color};
   }
 
@@ -97,7 +90,7 @@
   --#{$prefix}link-hover-color: #{$link-hover-color};
   --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
 
-  @if $link-hover-decoration !=null {
+  @if $link-hover-decoration != null {
     --#{$prefix}link-hover-decoration: #{$link-hover-decoration};
   }
 
@@ -176,7 +169,7 @@
       --#{$prefix}#{$color}-border-subtle: #{$value};
     }
 
-    @if $headings-color-dark !=null {
+    @if $headings-color-dark != null {
       --#{$prefix}heading-color: #{$headings-color-dark};
     }