diff --git a/scss/_root.scss b/scss/_root.scss
index 2927c343f..f7aa5eab2 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -50,5 +50,15 @@
}
--#{$variable-prefix}body-bg: #{$body-bg};
// scss-docs-end root-body-variables
+
+ // Focus styles
+ // scss-docs-start root-focus-variables
+ --#{$variable-prefix}focus-ring-width: #{$focus-ring-width};
+ --#{$variable-prefix}focus-ring-opacity: #{$focus-ring-opacity};
+ --#{$variable-prefix}focus-ring-color: #{$focus-ring-color};
+ --#{$variable-prefix}focus-ring-blur: #{$focus-ring-blur};
+ // By default, there is no `--bs-focus-ring-offset-x` or `--bs-focus-ring-offset-y`, but we provide CSS variables with fallbacks to initial `0` values
+ --#{$variable-prefix}focus-ring-box-shadow: var(--#{$variable-prefix}focus-ring-offset-x, 0) var(--#{$variable-prefix}focus-ring-offset-y, 0) var(--#{$variable-prefix}focus-ring-blur) var(--#{$variable-prefix}focus-ring-width) var(--#{$variable-prefix}focus-ring-color);
+ // scss-docs-end root-focus-variables
// stylelint-enable custom-property-empty-line-before
}
diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.1/content/reboot.md
index 1f69fe9c6..290d0df46 100644
--- a/site/content/docs/5.1/content/reboot.md
+++ b/site/content/docs/5.1/content/reboot.md
@@ -393,6 +393,16 @@ Reboot includes an enhancement for `role="button"` to change the default cursor
Non-button element button
{{< /example >}}
+## Focus state
+
+Added in v5.3.0
+
+Bootstrap globally updates the styling for `:focus` styles using a combination of Sass and CSS variables. In our Sass, we set default values that can be customized pre-compiling. Those variables are then reassigned to `:root` level CSS variables that can be customized in real-time, including with options for `x` and `y` offsets (which default to their fallback value of `0`).
+
+{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}}
+
## Misc elements
### Address