Fix focus visibility in theme settings

scripts/compile_styles.sh

@@ -99,7 +99,7 @@ compile_components() {
 
 replace_rem_w_em () {
     echo "Replacing REMs with EMs..."
-    sed -i -r "s|([0-9])rem|\1em|g" "$1" 
+    sed -i.bak -E "s|([0-9])rem|\1em|g" "$1" && rm "$1.bak"
     if [ $? -ne 0 ]; then
         echo "Failed to replace REMs with EMs in $1... Aborting."
         exit 1
@@ -118,4 +118,4 @@ format_bootstrap () {
 # Call the functions
 compile_components
 compile_bootstrap
-exit $?
+exit $?

src/scss/_bootstrap-variables.scss

@@ -63,3 +63,7 @@ $warning: $cod-accent-yellow !default;
 $danger: #b3393b !default;
 $light: #fff !default;
 $dark: #000 !default;
+
+$focus-ring-width: 0.25rem;
+$focus-ring-opacity: 1;
+$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);
+}
+
+.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};
+  }
+}