New focus styles

diff --git a/scss/_root.scss b/scss/_root.scss
index 4ea0235a27de9629eb252017484467683bac25be..3012b9f12687166f9f17b899ceddee330f1a1ba8 100644 (file)
--- a/scss/_root.scss
+++ b/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

diff --git a/scss/_theme.scss b/scss/_theme.scss
index 147a577c2e5aa5e98e4c87043ba3ff81f9acc344..6ac82b27d4f1ea62b06c94a702680d22e33d9c51 100644 (file)
--- a/scss/_theme.scss
+++ b/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": (

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 2cd6e1b4c1623358b3ed3cbca8f427d8eaf1d4c3..8455139d436f38e950b0d859b8d6724f9eb596c8 100644 (file)
--- a/scss/forms/_form-control.scss
+++ b/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 {

diff --git a/scss/forms/_form-select.scss b/scss/forms/_form-select.scss
index 8b50e23fc1c93bd99d7fbc4141a4e771a93ed20e..9ec6438dd4ad09721319f3f8430a7dbd4c9b9a81 100644 (file)
--- a/scss/forms/_form-select.scss
+++ b/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],

diff --git a/scss/mixins/_focus-ring.scss b/scss/mixins/_focus-ring.scss
new file mode 100644 (file)
index 0000000..7566f30
--- /dev/null
+++ b/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);
+  }
+}