From 66f7fc4ba4333a02939f6586294b92838d126334 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 16 Feb 2021 15:04:44 -0800 Subject: [PATCH 01/12] Add global variables for box-shadow focus rings --- scss/_variables.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/scss/_variables.scss b/scss/_variables.scss index 1be146bd0ac7..20e7efae10db 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -549,6 +549,14 @@ $box-shadow-inset: inset 0 1px 2px rgba(var(--#{$prefix}body-color-rg $component-active-color: $white !default; $component-active-bg: $primary !default; +// scss-docs-start focus-ring-variables +$focus-ring-width: .25rem !default; +$focus-ring-opacity: .25 !default; +$focus-ring-color: rgba($primary, $focus-ring-opacity) !default; +$focus-ring-blur: 0 !default; +$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default; +// scss-docs-end focus-ring-variables + // scss-docs-start caret-variables $caret-width: .3em !default; $caret-vertical-align: $caret-width * .85 !default; From c6df3f12aa8d97c0b18bd919b1b446e7804c9ec4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 16 Feb 2021 15:09:59 -0800 Subject: [PATCH 02/12] Update instances of -btn-focus-box-shadow to use -ring-box-shadow, unless it's for buttons or inputs --- scss/_nav.scss | 5 +++++ scss/_variables.scss | 22 +++++++++++++++------- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/scss/_nav.scss b/scss/_nav.scss index 9efc03bc8ff8..3439edd17674 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -36,6 +36,11 @@ text-decoration: if($link-hover-decoration == underline, none, null); } + &:focus { + outline: 0; + box-shadow: $nav-focus-box-shadow; + } + // Disabled state lightens text &.disabled { color: var(--#{$prefix}nav-link-disabled-color); diff --git a/scss/_variables.scss b/scss/_variables.scss index 20e7efae10db..226e96a732f8 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -769,11 +769,11 @@ $input-btn-font-family: null !default; $input-btn-font-size: $font-size-base !default; $input-btn-line-height: $line-height-base !default; -$input-btn-focus-width: .25rem !default; -$input-btn-focus-color-opacity: .25 !default; -$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity) !default; -$input-btn-focus-blur: 0 !default; -$input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color !default; +$input-btn-focus-width: $focus-ring-width !default; +$input-btn-focus-color-opacity: $focus-ring-opacity !default; +$input-btn-focus-color: $focus-ring-color !default; +$input-btn-focus-blur: $focus-ring-blur !default; +$input-btn-focus-box-shadow: $focus-ring-box-shadow !default; $input-btn-padding-y-sm: .25rem !default; $input-btn-padding-x-sm: .5rem !default; @@ -926,7 +926,7 @@ $form-check-input-border: var(--#{$prefix}border-width) solid va $form-check-input-border-radius: .25em !default; $form-check-radio-border-radius: 50% !default; $form-check-input-focus-border: $input-focus-border-color !default; -$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow !default; +$form-check-input-focus-box-shadow: $focus-ring-box-shadow !default; $form-check-input-checked-color: $component-active-color !default; $form-check-input-checked-bg-color: $component-active-bg !default; @@ -1132,6 +1132,8 @@ $nav-link-color: var(--#{$prefix}link-color) !default; $nav-link-hover-color: var(--#{$prefix}link-hover-color) !default; $nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default; $nav-link-disabled-color: var(--#{$prefix}secondary-color) !default; +$nav-link-disabled-color: $gray-600 !default; +$nav-focus-box-shadow: $focus-ring-box-shadow !default; $nav-tabs-border-color: var(--#{$prefix}border-color) !default; $nav-tabs-border-width: var(--#{$prefix}border-width) !default; @@ -1268,8 +1270,13 @@ $pagination-margin-start: calc($pagination-border-width * -1) !default $pagination-border-color: var(--#{$prefix}border-color) !default; $pagination-focus-color: var(--#{$prefix}link-hover-color) !default; +<<<<<<< HEAD $pagination-focus-bg: var(--#{$prefix}secondary-bg) !default; $pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; +======= +$pagination-focus-bg: $gray-200 !default; +$pagination-focus-box-shadow: $focus-ring-box-shadow !default; +>>>>>>> f9a0c95d0 (Update instances of -btn-focus-box-shadow to use -ring-box-shadow, unless it's for buttons or inputs) $pagination-focus-outline: 0 !default; $pagination-hover-color: var(--#{$prefix}link-hover-color) !default; @@ -1669,8 +1676,9 @@ $btn-close-height: $btn-close-width !default; $btn-close-padding-x: .25em !default; $btn-close-padding-y: $btn-close-padding-x !default; $btn-close-color: $black !default; -$btn-close-bg: url("data:image/svg+xml,") !default; $btn-close-focus-shadow: $input-btn-focus-box-shadow !default; +$btn-close-bg: url("data:image/svg+xml,") !default; +$btn-close-focus-shadow: $focus-ring-box-shadow !default; $btn-close-opacity: .5 !default; $btn-close-hover-opacity: .75 !default; $btn-close-focus-opacity: 1 !default; From 0ad43c1559a8db1440d506c826bd1be9f9968d77 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 16 Feb 2021 15:12:15 -0800 Subject: [PATCH 03/12] fix variable name --- scss/_nav.scss | 2 +- scss/_variables.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/_nav.scss b/scss/_nav.scss index 3439edd17674..ccd05f5a86c7 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -38,7 +38,7 @@ &:focus { outline: 0; - box-shadow: $nav-focus-box-shadow; + box-shadow: $nav-link-focus-box-shadow; } // Disabled state lightens text diff --git a/scss/_variables.scss b/scss/_variables.scss index 226e96a732f8..aca1174c1d04 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1133,7 +1133,7 @@ $nav-link-hover-color: var(--#{$prefix}link-hover-color) !default; $nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default; $nav-link-disabled-color: var(--#{$prefix}secondary-color) !default; $nav-link-disabled-color: $gray-600 !default; -$nav-focus-box-shadow: $focus-ring-box-shadow !default; +$nav-link-focus-box-shadow: $focus-ring-box-shadow !default; $nav-tabs-border-color: var(--#{$prefix}border-color) !default; $nav-tabs-border-width: var(--#{$prefix}border-width) !default; From 7bb06757bbd18c16659bb42dcca7b0cd48499656 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Nov 2021 14:24:22 -1000 Subject: [PATCH 04/12] Add CSS variables for global focus styling, document it --- scss/_root.scss | 11 +++++++++++ site/content/docs/5.3/content/reboot.md | 10 ++++++++++ 2 files changed, 21 insertions(+) diff --git a/scss/_root.scss b/scss/_root.scss index 45de310906e8..c3fce806abeb 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -127,6 +127,17 @@ @each $name, $value in $grid-breakpoints { --#{$prefix}breakpoint-#{$name}: #{$value}; } + + // 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 } @if $enable-dark-mode { diff --git a/site/content/docs/5.3/content/reboot.md b/site/content/docs/5.3/content/reboot.md index a695009dc180..0a8055c4b2cd 100644 --- a/site/content/docs/5.3/content/reboot.md +++ b/site/content/docs/5.3/content/reboot.md @@ -403,6 +403,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 From ec6ae54130454bac09bdbef1b2d1780079eed916 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 25 Nov 2021 14:26:24 -1000 Subject: [PATCH 05/12] Move to CSS vars section --- site/content/docs/5.3/content/reboot.md | 10 ---------- site/content/docs/5.3/customize/css-variables.md | 14 ++++++++++++++ 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/site/content/docs/5.3/content/reboot.md b/site/content/docs/5.3/content/reboot.md index 0a8055c4b2cd..a695009dc180 100644 --- a/site/content/docs/5.3/content/reboot.md +++ b/site/content/docs/5.3/content/reboot.md @@ -403,16 +403,6 @@ 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 diff --git a/site/content/docs/5.3/customize/css-variables.md b/site/content/docs/5.3/customize/css-variables.md index 05c77df577a9..6036ea92bf1c 100644 --- a/site/content/docs/5.3/customize/css-variables.md +++ b/site/content/docs/5.3/customize/css-variables.md @@ -59,6 +59,20 @@ a { } ``` +## Focus variables + +Added in v5.3.0 + +Bootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus ` styles. + +In our Sass, we set default values that can be customized pre-compiling. + +{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}} + +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="root-focus-variables" file="scss/_root.scss" >}} + ## Grid breakpoints While we include our grid breakpoints as CSS variables (except for `xs`), be aware that **CSS variables do not work in media queries**. This is by design in the CSS spec for variables, but may change in coming years with support for `env()` variables. Check out [this Stack Overflow answer](https://stackoverflow.com/a/47212942) for some helpful links. In the meantime, you can use these variables in other CSS situations, as well as in your JavaScript. From b7f60bebd8d375e280f9ffc06e82a4557a9b7d36 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 11 Nov 2022 14:06:21 -0800 Subject: [PATCH 06/12] Update scss/_nav.scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Gaël Poupard --- scss/_nav.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_nav.scss b/scss/_nav.scss index ccd05f5a86c7..5710ee9e7b17 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -37,7 +37,7 @@ } &:focus { - outline: 0; + outline-color: transparent; box-shadow: $nav-link-focus-box-shadow; } From aa9c24a4774d0a24f7181ea32f77c8b1a5200f76 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 11 Nov 2022 19:13:29 -0800 Subject: [PATCH 07/12] Helper and utils --- scss/_helpers.scss | 1 + scss/_root.scss | 17 ++++--- scss/_variables.scss | 3 +- scss/helpers/_focus-ring.scss | 16 ++++++ site/assets/scss/_component-examples.scss | 5 ++ .../docs/5.3/customize/css-variables.md | 4 +- site/content/docs/5.3/helpers/focus-ring.md | 49 +++++++++++++++++++ site/data/sidebar.yml | 1 + 8 files changed, 86 insertions(+), 10 deletions(-) create mode 100644 scss/helpers/_focus-ring.scss create mode 100644 site/content/docs/5.3/helpers/focus-ring.md diff --git a/scss/_helpers.scss b/scss/_helpers.scss index 644b693fbc91..6126781cde7e 100644 --- a/scss/_helpers.scss +++ b/scss/_helpers.scss @@ -1,6 +1,7 @@ @import "helpers/clearfix"; @import "helpers/color-bg"; @import "helpers/colored-links"; +@import "helpers/focus-ring"; @import "helpers/ratio"; @import "helpers/position"; @import "helpers/stacks"; diff --git a/scss/_root.scss b/scss/_root.scss index c3fce806abeb..b759cb94a309 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -130,14 +130,17 @@ // 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); + --#{$prefix}focus-ring-width: #{$focus-ring-width}; + --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity}; + --#{$prefix}focus-ring-color: #{$focus-ring-color}; + --#{$prefix}focus-ring-blur: #{$focus-ring-blur}; + // --#{$prefix}focus-ring-offset: 0 0 0 1px var(--#{$prefix}focus-ring-offset-color, var(--#{$prefix}body-bg)); + --#{$prefix}focus-ring-offset-width: 1px; + --#{$prefix}focus-ring-offset-color: var(--#{$prefix}body-bg); + + // By default, there is no `--bs-focus-ring-x` or `--bs-focus-ring-y`, but we provide CSS variables with fallbacks to initial `0` values + --#{$prefix}focus-ring-box-shadow: 0 0 0 var(--#{$prefix}focus-ring-offset-width) var(--#{$prefix}focus-ring-offset-color), var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color); // scss-docs-end root-focus-variables - // stylelint-enable custom-property-empty-line-before } @if $enable-dark-mode { diff --git a/scss/_variables.scss b/scss/_variables.scss index aca1174c1d04..b07c1aaef1a2 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -554,7 +554,8 @@ $focus-ring-width: .25rem !default; $focus-ring-opacity: .25 !default; $focus-ring-color: rgba($primary, $focus-ring-opacity) !default; $focus-ring-blur: 0 !default; -$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default; +$focus-ring-offset: 0 0 0 1px var(--#{$prefix}focus-ring-offset-color, var(--#{$prefix}body-bg)) !default; +$focus-ring-box-shadow: $focus-ring-offset, 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default; // scss-docs-end focus-ring-variables // scss-docs-start caret-variables diff --git a/scss/helpers/_focus-ring.scss b/scss/helpers/_focus-ring.scss new file mode 100644 index 000000000000..0a9509b1d0dc --- /dev/null +++ b/scss/helpers/_focus-ring.scss @@ -0,0 +1,16 @@ +// stylelint-disable indentation, function-disallowed-list, declaration-colon-newline-after, value-list-comma-newline-after, value-list-comma-space-after + +.focus-ring:focus { + outline: 0; + // By default, there is no `--bs-focus-ring-x` or `--bs-focus-ring-y`, but we provide CSS variables with fallbacks to initial `0` values + box-shadow: 0 0 0 var(--#{$prefix}focus-ring-offset-width) var(--#{$prefix}focus-ring-offset-color, var(--#{$prefix}body-bg)), + var(--#{$prefix}focus-ring-x, 0) + var(--#{$prefix}focus-ring-y, 0) + var(--#{$prefix}focus-ring-blur) + calc(var(--#{$prefix}focus-ring-width) + var(--#{$prefix}focus-ring-offset-width)) + var(--#{$prefix}focus-ring-color); +} + +@each $state, $value in $theme-colors { + .focus-ring-#{$state}:focus { --#{$prefix}focus-ring-color: rgba(#{to-rgb($value)}, var(--bs-focus-ring-opacity)); } +} diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index 11800a638f09..99bc460c1212 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -397,3 +397,8 @@ margin-right: 0; } } + +.focused { + outline: 0; + box-shadow: var(--#{$variable-prefix}focus-ring-offset), var(--#{$variable-prefix}focus-ring-x, 0) var(--#{$variable-prefix}focus-ring-y, 0) var(--#{$variable-prefix}focus-ring-blur) var(--#{$variable-prefix}focus-ring-width) var(--#{$variable-prefix}focus-ring-color); +} diff --git a/site/content/docs/5.3/customize/css-variables.md b/site/content/docs/5.3/customize/css-variables.md index 6036ea92bf1c..2f5325702e0b 100644 --- a/site/content/docs/5.3/customize/css-variables.md +++ b/site/content/docs/5.3/customize/css-variables.md @@ -61,11 +61,11 @@ a { ## Focus variables -Added in v5.3.0 +{{< added-in "5.3.0" >}} Bootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus ` styles. -In our Sass, we set default values that can be customized pre-compiling. +In our Sass, we set default values that can be customized before compiling. {{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}} diff --git a/site/content/docs/5.3/helpers/focus-ring.md b/site/content/docs/5.3/helpers/focus-ring.md new file mode 100644 index 000000000000..361eafd37408 --- /dev/null +++ b/site/content/docs/5.3/helpers/focus-ring.md @@ -0,0 +1,49 @@ +--- +layout: docs +title: Focus ring +description: Utility classes that allows you to add and modify custom focus ring styles to elements and components. +group: helpers +toc: true +--- + +The `.focus-ring` helper removes the default `outline` on `:focus`, replacing it with a `box-shadow` that can be more broadly customized. The new shadow is made up of a series of CSS variables, inherited from the `:root` level, that can be modified for any element or component. + +## Example + +Click into the example below and press Tab to see the focus ring in action. + +{{< example >}} + + Custom focus ring + +{{< /example >}} + +## Customize + +Modify the styling of a focus ring with our CSS variables, Sass variables, utilities, or custom styles. + +### CSS variables + +Modify the `--bs-focus-ring-*` CSS variables as needed to change the default appearance. + +{{< example >}} + + Green focus ring + +{{< /example >}} + +### Sass + +Customize the Sass variables to modify all usage of the focus ring styles across your Bootstrap-powered project. + +{{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}} + +### Utilities + +In addition to `.focus-ring`, we have several `.focus-ring-*` utilities to modify the helper class defaults. Modify the color with any of our theme colors. + +{{< example >}} + + Danger focus ring + +{{< /example >}} diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 4199fa535e0a..3c6d5032676c 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -123,6 +123,7 @@ - title: Display - title: Flex - title: Float + - title: Focus ring - title: Interactions - title: Object fit - title: Opacity From c89b4aab24e19a7d47f6cb3b4e874aee81e14945 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 12 Dec 2022 23:46:14 +0100 Subject: [PATCH 08/12] Fix bundlewatch --- .bundlewatch.config.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 49880e124253..94396f15c7fc 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -18,19 +18,19 @@ }, { "path": "./dist/css/bootstrap-utilities.css", - "maxSize": "10.5 kB" + "maxSize": "10.75 kB" }, { "path": "./dist/css/bootstrap-utilities.min.css", - "maxSize": "9.75 kB" + "maxSize": "10.0 kB" }, { "path": "./dist/css/bootstrap.css", - "maxSize": "31.25 kB" + "maxSize": "31.5 kB" }, { "path": "./dist/css/bootstrap.min.css", - "maxSize": "29.25 kB" + "maxSize": "29.5 kB" }, { "path": "./dist/js/bootstrap.bundle.js", From cb65c7a95ba812e909ba0e29f2d2631cca528045 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 12 Dec 2022 23:51:34 +0100 Subject: [PATCH 09/12] Change 'Focus ring' in sidebar so that the page can be visible --- site/data/sidebar.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index 3c6d5032676c..b1d567e9906e 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -104,6 +104,7 @@ - title: Clearfix - title: Color & background - title: Colored links + - title: Focus ring - title: Position - title: Ratio - title: Stacks @@ -123,7 +124,6 @@ - title: Display - title: Flex - title: Float - - title: Focus ring - title: Interactions - title: Object fit - title: Opacity From aa28a6a6615047b64f4ae8b4546d80e25a3fc224 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Mon, 12 Dec 2022 23:58:12 +0100 Subject: [PATCH 10/12] Minor typo fix --- site/content/docs/5.3/customize/css-variables.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.3/customize/css-variables.md b/site/content/docs/5.3/customize/css-variables.md index 2f5325702e0b..8899d4c7d3d2 100644 --- a/site/content/docs/5.3/customize/css-variables.md +++ b/site/content/docs/5.3/customize/css-variables.md @@ -63,7 +63,7 @@ a { {{< added-in "5.3.0" >}} -Bootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus ` styles. +Bootstrap provides custom `:focus` styles using a combination of Sass and CSS variables that can be optionally added to specific components and elements. We do not yet globally override all `:focus` styles. In our Sass, we set default values that can be customized before compiling. From 726e3095a7632ff7b7b763da00935d6cb35676c1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Dec 2022 16:08:48 -0800 Subject: [PATCH 11/12] fix merge --- scss/_variables.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index b07c1aaef1a2..461ac60ef4dd 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1271,13 +1271,8 @@ $pagination-margin-start: calc($pagination-border-width * -1) !default $pagination-border-color: var(--#{$prefix}border-color) !default; $pagination-focus-color: var(--#{$prefix}link-hover-color) !default; -<<<<<<< HEAD $pagination-focus-bg: var(--#{$prefix}secondary-bg) !default; -$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default; -======= -$pagination-focus-bg: $gray-200 !default; $pagination-focus-box-shadow: $focus-ring-box-shadow !default; ->>>>>>> f9a0c95d0 (Update instances of -btn-focus-box-shadow to use -ring-box-shadow, unless it's for buttons or inputs) $pagination-focus-outline: 0 !default; $pagination-hover-color: var(--#{$prefix}link-hover-color) !default; From f1d1111ff7d0934cf038c84bbb63f9cee5ce07db Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 28 Dec 2022 20:33:16 -0800 Subject: [PATCH 12/12] Revamp some more, improve docs --- scss/_nav.scss | 2 +- scss/_root.scss | 9 ++------- scss/_utilities.scss | 8 ++++++++ scss/_variables.scss | 5 ++--- scss/helpers/_focus-ring.scss | 15 ++------------- site/content/docs/5.3/helpers/focus-ring.md | 21 ++++++++++++++++----- 6 files changed, 31 insertions(+), 29 deletions(-) diff --git a/scss/_nav.scss b/scss/_nav.scss index 5710ee9e7b17..ccd05f5a86c7 100644 --- a/scss/_nav.scss +++ b/scss/_nav.scss @@ -37,7 +37,7 @@ } &:focus { - outline-color: transparent; + outline: 0; box-shadow: $nav-link-focus-box-shadow; } diff --git a/scss/_root.scss b/scss/_root.scss index b759cb94a309..323a5217bfe6 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -133,13 +133,8 @@ --#{$prefix}focus-ring-width: #{$focus-ring-width}; --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity}; --#{$prefix}focus-ring-color: #{$focus-ring-color}; - --#{$prefix}focus-ring-blur: #{$focus-ring-blur}; - // --#{$prefix}focus-ring-offset: 0 0 0 1px var(--#{$prefix}focus-ring-offset-color, var(--#{$prefix}body-bg)); - --#{$prefix}focus-ring-offset-width: 1px; - --#{$prefix}focus-ring-offset-color: var(--#{$prefix}body-bg); - - // By default, there is no `--bs-focus-ring-x` or `--bs-focus-ring-y`, but we provide CSS variables with fallbacks to initial `0` values - --#{$prefix}focus-ring-box-shadow: 0 0 0 var(--#{$prefix}focus-ring-offset-width) var(--#{$prefix}focus-ring-offset-color), var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color); + // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values + --#{$prefix}focus-ring-box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color); // scss-docs-end root-focus-variables } diff --git a/scss/_utilities.scss b/scss/_utilities.scss index 4c2c39dd7610..5134688e90bf 100644 --- a/scss/_utilities.scss +++ b/scss/_utilities.scss @@ -84,6 +84,14 @@ $utilities: map-merge( ) ), // scss-docs-end utils-shadow + // scss-docs-start utils-focus-ring + "focus-ring": ( + css-var: true, + css-variable-name: focus-ring-color, + class: focus-ring, + values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring") + ), + // scss-docs-end utils-focus-ring // scss-docs-start utils-position "position": ( property: position, diff --git a/scss/_variables.scss b/scss/_variables.scss index 461ac60ef4dd..2e6d5b75e45f 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -554,8 +554,7 @@ $focus-ring-width: .25rem !default; $focus-ring-opacity: .25 !default; $focus-ring-color: rgba($primary, $focus-ring-opacity) !default; $focus-ring-blur: 0 !default; -$focus-ring-offset: 0 0 0 1px var(--#{$prefix}focus-ring-offset-color, var(--#{$prefix}body-bg)) !default; -$focus-ring-box-shadow: $focus-ring-offset, 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default; +$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default; // scss-docs-end focus-ring-variables // scss-docs-start caret-variables @@ -1134,7 +1133,7 @@ $nav-link-hover-color: var(--#{$prefix}link-hover-color) !default; $nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default; $nav-link-disabled-color: var(--#{$prefix}secondary-color) !default; $nav-link-disabled-color: $gray-600 !default; -$nav-link-focus-box-shadow: $focus-ring-box-shadow !default; +$nav-link-focus-box-shadow: $focus-ring-box-shadow !default; $nav-tabs-border-color: var(--#{$prefix}border-color) !default; $nav-tabs-border-width: var(--#{$prefix}border-width) !default; diff --git a/scss/helpers/_focus-ring.scss b/scss/helpers/_focus-ring.scss index 0a9509b1d0dc..26508a8d6d67 100644 --- a/scss/helpers/_focus-ring.scss +++ b/scss/helpers/_focus-ring.scss @@ -1,16 +1,5 @@ -// stylelint-disable indentation, function-disallowed-list, declaration-colon-newline-after, value-list-comma-newline-after, value-list-comma-space-after - .focus-ring:focus { outline: 0; - // By default, there is no `--bs-focus-ring-x` or `--bs-focus-ring-y`, but we provide CSS variables with fallbacks to initial `0` values - box-shadow: 0 0 0 var(--#{$prefix}focus-ring-offset-width) var(--#{$prefix}focus-ring-offset-color, var(--#{$prefix}body-bg)), - var(--#{$prefix}focus-ring-x, 0) - var(--#{$prefix}focus-ring-y, 0) - var(--#{$prefix}focus-ring-blur) - calc(var(--#{$prefix}focus-ring-width) + var(--#{$prefix}focus-ring-offset-width)) - var(--#{$prefix}focus-ring-color); -} - -@each $state, $value in $theme-colors { - .focus-ring-#{$state}:focus { --#{$prefix}focus-ring-color: rgba(#{to-rgb($value)}, var(--bs-focus-ring-opacity)); } + // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values + box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color); } diff --git a/site/content/docs/5.3/helpers/focus-ring.md b/site/content/docs/5.3/helpers/focus-ring.md index 361eafd37408..5819bf1c6f36 100644 --- a/site/content/docs/5.3/helpers/focus-ring.md +++ b/site/content/docs/5.3/helpers/focus-ring.md @@ -4,6 +4,7 @@ title: Focus ring description: Utility classes that allows you to add and modify custom focus ring styles to elements and components. group: helpers toc: true +added: "5.3" --- The `.focus-ring` helper removes the default `outline` on `:focus`, replacing it with a `box-shadow` that can be more broadly customized. The new shadow is made up of a series of CSS variables, inherited from the `:root` level, that can be modified for any element or component. @@ -32,18 +33,28 @@ Modify the `--bs-focus-ring-*` CSS variables as needed to change the default app {{< /example >}} +`.focus-ring` sets styles via global CSS variables that can be overridden on any parent element, as shown above. These variables are generated from their Sass variable counterparts. + +{{< scss-docs name="root-focus-variables" file="scss/_root.scss" >}} + ### Sass -Customize the Sass variables to modify all usage of the focus ring styles across your Bootstrap-powered project. +Customize the focus ring Sass variables to modify all usage of the focus ring styles across your Bootstrap-powered project. {{< scss-docs name="focus-ring-variables" file="scss/_variables.scss" >}} ### Utilities -In addition to `.focus-ring`, we have several `.focus-ring-*` utilities to modify the helper class defaults. Modify the color with any of our theme colors. +In addition to `.focus-ring`, we have several `.focus-ring-*` utilities to modify the helper class defaults. Modify the color with any of our [theme colors]({{< docsref "/customize/color#theme-colors" >}}). Note that the light and dark variants may not be visible on all background colors given current color mode support. {{< example >}} - - Danger focus ring - +{{< focus-ring.inline >}} +{{- range (index $.Site.Data "theme-colors") }} +

{{ title .name }} focus

+{{- end -}} +{{< /focus-ring.inline >}} {{< /example >}} + +Focus ring utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}}) + +{{< scss-docs name="utils-focus-ring" file="scss/_utilities.scss" >}}