New focus styles

scss/_root.scss

@@ -133,9 +133,10 @@
 
   // Focus styles
   // scss-docs-start root-focus-variables
-  --#{$prefix}focus-ring-width: #{$focus-ring-width};
-  --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
-  --#{$prefix}focus-ring-color: #{$focus-ring-color};
+  --#{$prefix}focus-ring-width: 3px;
+  --#{$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
 
   // scss-docs-start root-form-validation-variables

scss/_theme.scss

@@ -36,7 +36,7 @@ $new-theme-colors: (
     "bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)),
     // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}blue-200), var(--#{$prefix}blue-300)), var(--#{$prefix}blue-700)),
     "border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)),
-    "focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, transparent),
+    "focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, var(--#{$prefix}bg-0)),
     "contrast": var(--#{$prefix}white)
   ),
   "accent": (

scss/forms/_form-control.scss

@@ -3,8 +3,9 @@
 @use "../vendor/rfs" as *;
 @use "../mixins/border-radius" as *;
 @use "../mixins/box-shadow" as *;
-@use "../mixins/transition" as *;
+@use "../mixins/focus-ring" as *;
 @use "../mixins/gradients" as *;
+@use "../mixins/transition" as *;
 
 //
 // General form controls (plus a few specific high-level interventions)
@@ -14,6 +15,7 @@
   .form-control {
     display: block;
     width: 100%;
+    height: 2.85rem;
     padding: $input-padding-y $input-padding-x;
     font-family: $input-font-family;
     @include font-size($input-font-size);
@@ -43,14 +45,8 @@
     &:focus {
       color: $input-focus-color;
       background-color: $input-focus-bg;
-      border-color: $input-focus-border-color;
-      outline: 0;
-      @if $enable-shadows {
-        @include box-shadow($input-box-shadow, $input-focus-box-shadow);
-      } @else {
-        // Avoid using mixin so we can pass custom focus shadow properly
-        box-shadow: $input-focus-box-shadow;
-      }
+      // border-color: $input-focus-border-color;
+      @include focus-ring($offset: true);
     }
 
     &::-webkit-date-and-time-value {

scss/forms/_form-select.scss

@@ -3,8 +3,9 @@
 @use "../vendor/rfs" as *;
 @use "../mixins/border-radius" as *;
 @use "../mixins/box-shadow" as *;
-@use "../mixins/transition" as *;
 @use "../mixins/color-mode" as *;
+@use "../mixins/focus-ring" as *;
+@use "../mixins/transition" as *;
 
 // Select
 //
@@ -36,13 +37,7 @@
 
     &:focus {
       border-color: $form-select-focus-border-color;
-      outline: 0;
-      @if $enable-shadows {
-        @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
-      } @else {
-        // Avoid using mixin so we can pass custom focus shadow properly
-        box-shadow: $form-select-focus-box-shadow;
-      }
+      @include focus-ring($offset: true);
     }
 
     &[multiple],

scss/mixins/_focus-ring.scss

@@ -0,0 +1,12 @@
+@use "../config" as *;
+
+@mixin focus-ring($offset: false, $color: null) {
+  @if $color != null {
+    outline: var(--#{$prefix}focus-ring-width) solid #{$color};
+  } @else {
+    outline: var(--#{$prefix}focus-ring);
+  }
+  @if $offset {
+    outline-offset: var(--#{$prefix}focus-ring-offset);
+  }
+}