@tabler/core 1.5.1 → 1.6.0

package/scss/bootstrap/_buttons.scss

@@ -17,6 +17,8 @@
   --btn-border-width: #{$btn-border-width};
   --btn-border-color: transparent;
   --btn-border-radius: #{$btn-border-radius};
+  --btn-hover-color: var(--btn-color);
+  --btn-active-color: var(--btn-color);
   --btn-hover-border-color: transparent;
   --btn-box-shadow: #{$btn-box-shadow};
   --btn-disabled-opacity: #{$btn-disabled-opacity};
@@ -29,7 +31,6 @@
   // Zero-size shadow, not `none`: the active state is combined with the focus
   // ring in one `box-shadow` list, where `none` would negate every other shadow
   --btn-active-shadow: 0 0 0 #000;
-  --btn-focus-box-shadow: #{$btn-focus-box-shadow};
   // scss-docs-end btn-css-vars
 
   display: inline-block;
@@ -50,6 +51,8 @@
   @include gradient-bg(var(--btn-bg));
   @include box-shadow(var(--btn-box-shadow));
   @include transition($btn-transition);
+  // Start the focus ring's `outline-color` transition from transparent, not `currentcolor`.
+  outline-color: transparent;
 
   &:hover {
     color: var(--btn-hover-color);
@@ -69,24 +72,12 @@
     color: var(--btn-hover-color);
     @include gradient-bg(var(--btn-hover-bg));
     border-color: var(--btn-hover-border-color);
-    outline: 0;
-    // Avoid using mixin so we can pass custom focus shadow properly
-    @if $enable-shadows {
-      box-shadow: var(--btn-box-shadow), var(--btn-focus-box-shadow);
-    } @else {
-      box-shadow: var(--btn-focus-box-shadow);
-    }
+    @include focus-ring(true);
   }
 
   .btn-check:focus-visible + & {
     border-color: var(--btn-hover-border-color);
-    outline: 0;
-    // Avoid using mixin so we can pass custom focus shadow properly
-    @if $enable-shadows {
-      box-shadow: var(--btn-box-shadow), var(--btn-focus-box-shadow);
-    } @else {
-      box-shadow: var(--btn-focus-box-shadow);
-    }
+    @include focus-ring(true);
   }
 
   .btn-check:checked + &,
@@ -100,24 +91,6 @@
     background-image: if(sass($enable-gradients): none; else: null);
     border-color: var(--btn-active-border-color);
     @include box-shadow(var(--btn-active-shadow));
-
-    &:focus-visible {
-      // Avoid using mixin so we can pass custom focus shadow properly
-      @if $enable-shadows {
-        box-shadow: var(--btn-active-shadow), var(--btn-focus-box-shadow);
-      } @else {
-        box-shadow: var(--btn-focus-box-shadow);
-      }
-    }
-  }
-
-  .btn-check:checked:focus-visible + & {
-    // Avoid using mixin so we can pass custom focus shadow properly
-    @if $enable-shadows {
-      box-shadow: var(--btn-active-shadow), var(--btn-focus-box-shadow);
-    } @else {
-      box-shadow: var(--btn-focus-box-shadow);
-    }
   }
 
   &:disabled,

package/scss/bootstrap/_carousel.scss

@@ -117,11 +117,11 @@
 }
 .carousel-control-prev {
   inset-inline-start: 0;
-  background-image: if(sass($enable-gradients): linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001)); else: null);
+  background-image: if(sass($enable-gradients): linear-gradient(90deg, color-transparent(var(--black), 0.25), color-transparent(var(--black), 0.001)); else: null);
 }
 .carousel-control-next {
   inset-inline-end: 0;
-  background-image: if(sass($enable-gradients): linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001)); else: null);
+  background-image: if(sass($enable-gradients): linear-gradient(270deg, color-transparent(var(--black), 0.25), color-transparent(var(--black), 0.001)); else: null);
 }
 
 // Icons for within
@@ -130,16 +130,15 @@
   display: inline-block;
   width: $carousel-control-icon-width;
   height: $carousel-control-icon-width;
-  background-repeat: no-repeat;
-  background-position: 50%;
-  background-size: 100% 100%;
+  background-color: currentColor;
+  @include mask-icon($size: 100% 100%, $position: 50%);
 }
 
 .carousel-control-prev-icon {
-  background-image: escape-svg($carousel-control-prev-icon-bg) #{'/*rtl:' + escape-svg($carousel-control-next-icon-bg) + '*/'};
+  mask-image: escape-svg($carousel-control-prev-icon-bg) #{'/*rtl:' + escape-svg($carousel-control-next-icon-bg) + '*/'};
 }
 .carousel-control-next-icon {
-  background-image: escape-svg($carousel-control-next-icon-bg) #{'/*rtl:' + escape-svg($carousel-control-prev-icon-bg) + '*/'};
+  mask-image: escape-svg($carousel-control-next-icon-bg) #{'/*rtl:' + escape-svg($carousel-control-prev-icon-bg) + '*/'};
 }
 
 // Optional indicator pips/controls

package/scss/bootstrap/_list-group.scss

@@ -1,3 +1,4 @@
+@use 'sass:list';
 @use 'sass:map';
 
 // Base class
@@ -190,22 +191,35 @@
 // and the subtle/emphasis maps only cover the latter, so upstream's version
 // left `.list-group-item-azure` and twelve more reading tokens nobody defines.
 // The tint also matches the `bg-{color}-lt` utilities used elsewhere.
+// Each color class only points the --list-group-variant* tokens at its palette
+// colors; one shared rule turns them into the list group tokens, so the token
+// list is written once instead of once per color.
+$list-group-variant-selectors: ();
+
 @each $state in map.keys($theme-colors) {
+  $list-group-variant-selectors: list.append($list-group-variant-selectors, '.list-group-item-#{$state}', $separator: comma);
+
   .list-group-item-#{$state} {
-    --list-group-color: var(--#{$state});
-    --list-group-bg: var(--#{$state}-lt);
-    --list-group-border-color: #{color-transparent(var(--#{$state}), $list-group-variant-border-alpha)};
-    --list-group-action-color: var(--#{$state});
-    --list-group-action-hover-color: var(--#{$state});
-    --list-group-action-hover-bg: #{color-transparent(var(--#{$state}), $list-group-variant-hover-alpha)};
-    --list-group-action-active-color: var(--#{$state}-fg);
-    --list-group-action-active-bg: var(--#{$state});
-    // The selected row keeps the tint: `.list-group-item.active` paints its own
-    // neutral highlight, so a solid fill here would only show through as text
-    // on a background it was never matched against.
-    --list-group-active-color: var(--#{$state});
-    --list-group-active-bg: var(--#{$state}-lt);
-    --list-group-active-border-color: #{color-transparent(var(--#{$state}), $list-group-variant-border-alpha)};
+    --list-group-variant: var(--#{$state});
+    --list-group-variant-lt: var(--#{$state}-lt);
+    --list-group-variant-fg: var(--#{$state}-fg);
   }
 }
+
+#{$list-group-variant-selectors} {
+  --list-group-color: var(--list-group-variant);
+  --list-group-bg: var(--list-group-variant-lt);
+  --list-group-border-color: #{color-transparent(var(--list-group-variant), $list-group-variant-border-alpha)};
+  --list-group-action-color: var(--list-group-variant);
+  --list-group-action-hover-color: var(--list-group-variant);
+  --list-group-action-hover-bg: #{color-transparent(var(--list-group-variant), $list-group-variant-hover-alpha)};
+  --list-group-action-active-color: var(--list-group-variant-fg);
+  --list-group-action-active-bg: var(--list-group-variant);
+  // The selected row keeps the tint: `.list-group-item.active` paints its own
+  // neutral highlight, so a solid fill here would only show through as text
+  // on a background it was never matched against.
+  --list-group-active-color: var(--list-group-variant);
+  --list-group-active-bg: var(--list-group-variant-lt);
+  --list-group-active-border-color: #{color-transparent(var(--list-group-variant), $list-group-variant-border-alpha)};
+}
 // scss-docs-end list-group-modifiers

package/scss/bootstrap/_nav.scss

@@ -33,6 +33,7 @@
   background: none;
   border: 0;
   @include transition($nav-link-transition);
+  outline-color: transparent;
 
   &:hover,
   &:focus {
@@ -41,8 +42,7 @@
   }
 
   &:focus-visible {
-    outline: 0;
-    box-shadow: $nav-link-focus-box-shadow;
+    @include focus-ring(true);
   }
 
   // Disabled state lightens text

package/scss/bootstrap/_navbar.scss

@@ -24,7 +24,8 @@
   --navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
   --navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
   --navbar-toggler-font-size: #{$navbar-toggler-font-size};
-  --navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
+  --navbar-toggler-icon-bg: #{escape-svg($navbar-toggler-icon-bg)};
+  --navbar-toggler-icon-color: #{$navbar-light-icon-color};
   --navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
   --navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
   --navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
@@ -175,10 +176,8 @@
   width: 1.5em;
   height: 1.5em;
   vertical-align: middle;
-  background-image: var(--navbar-toggler-icon-bg);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100%;
+  background-color: var(--navbar-toggler-icon-color);
+  @include mask-icon(var(--navbar-toggler-icon-bg), $size: 100%);
 }
 
 .navbar-nav-scroll {
@@ -278,14 +277,14 @@
   --navbar-brand-color: #{$navbar-dark-brand-color};
   --navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
   --navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
-  --navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+  --navbar-toggler-icon-color: #{$navbar-dark-icon-color};
   // scss-docs-end navbar-dark-css-vars
 }
 
 @if $enable-dark-mode {
   @include color-mode(dark) {
     .navbar-toggler-icon {
-      --navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
+      --navbar-toggler-icon-color: #{$navbar-dark-icon-color};
     }
   }
 }

package/scss/bootstrap/_offcanvas.scss

@@ -11,6 +11,7 @@
   --offcanvas-height: #{$offcanvas-vertical-height};
   --offcanvas-padding-x: #{$offcanvas-padding-x};
   --offcanvas-padding-y: #{$offcanvas-padding-y};
+  --offcanvas-margin: #{$offcanvas-margin};
   --offcanvas-color: #{$offcanvas-color};
   --offcanvas-bg: #{$offcanvas-bg-color};
   --offcanvas-border-width: #{$offcanvas-border-width};
@@ -103,6 +104,7 @@
       @include media-breakpoint-up($next) {
         --offcanvas-height: auto;
         --offcanvas-border-width: 0;
+        --offcanvas-margin: 0px;
         background-color: transparent !important; // stylelint-disable-line declaration-no-important
 
         .offcanvas-header {

package/scss/bootstrap/_pagination.scss

@@ -15,7 +15,6 @@
   --pagination-hover-border-color: #{$pagination-hover-border-color};
   --pagination-focus-color: #{$pagination-focus-color};
   --pagination-focus-bg: #{$pagination-focus-bg};
-  --pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
   --pagination-active-color: #{$pagination-active-color};
   --pagination-active-bg: #{$pagination-active-bg};
   --pagination-active-border-color: #{$pagination-active-border-color};
@@ -38,6 +37,8 @@
   background-color: var(--pagination-bg);
   border: var(--pagination-border-width) solid var(--pagination-border-color);
   @include transition($pagination-transition);
+  // Start the focus ring's `outline-color` transition from transparent, not `currentcolor`.
+  outline-color: transparent;
 
   &:hover {
     z-index: 2;
@@ -51,8 +52,11 @@
     z-index: 3;
     color: var(--pagination-focus-color);
     background-color: var(--pagination-focus-bg);
-    outline: $pagination-focus-outline;
-    box-shadow: var(--pagination-focus-box-shadow);
+    outline: 0;
+  }
+
+  &:focus-visible {
+    @include focus-ring(true);
   }
 
   &.active,

package/scss/bootstrap/_reboot.scss

@@ -54,7 +54,7 @@ body {
   text-align: var(--body-text-align);
   background-color: var(--body-bg); // 2
   -webkit-text-size-adjust: 100%; // 3
-  -webkit-tap-highlight-color: rgba($black, 0); // 4
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 4
 }
 // scss-docs-end reboot-body-rules
 
@@ -232,11 +232,11 @@ sup {
 // Links
 
 a {
-  color: rgba(var(--link-color-rgb), var(--link-opacity, 1));
+  color: color-transparent(var(--link-color), calc(var(--link-opacity, 1) * 100%));
   text-decoration: $link-decoration;
 
   &:hover {
-    --link-color-rgb: var(--link-hover-color-rgb);
+    --link-color: var(--link-hover-color);
     text-decoration: $link-hover-decoration;
   }
 }

package/scss/bootstrap/_root.scss

@@ -3,9 +3,7 @@
 
 @use '../config' as *;
 
-:root,
-[data-bs-theme='light'],
-[data-theme='light'] {
+:root {
   // Note: Custom variable values only support SassScript inside `#{}`.
 
   // Colors
@@ -24,10 +22,6 @@
     --#{$color}: #{$value};
   }
 
-  @each $color, $value in $theme-colors-rgb {
-    --#{$color}-rgb: #{$value};
-  }
-
   // $theme-colors-*-dark maps are only populated when $enable-dark-mode is true (see _maps.scss)
   @if $enable-dark-mode {
     @each $color, $value in $theme-colors-text {
@@ -55,9 +49,6 @@
     }
   }
 
-  --white-rgb: #{to-rgb($white)};
-  --black-rgb: #{to-rgb($black)};
-
   // Fonts
 
   // Note: Use `inspect` for lists so that quoted items keep the quotes.
@@ -78,34 +69,21 @@
   --body-text-align: #{$body-text-align};
 
   --body-color: light-dark(#{$body-color}, #{$body-color-dark});
-  --body-color-rgb: #{to-rgb($body-color)};
   --body-bg: light-dark(#{$body-bg}, #{$body-bg-dark});
-  --body-bg-rgb: #{to-rgb($body-bg)};
 
   --emphasis-color: light-dark(#{$body-emphasis-color}, #{$body-emphasis-color-dark});
-  --emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
 
   --secondary-color: light-dark(#{$body-secondary-color}, #{$body-secondary-color-dark});
-  --secondary-color-rgb: #{to-rgb($body-secondary-color)};
   --secondary-bg: light-dark(#{$body-secondary-bg}, #{$body-secondary-bg-dark});
-  --secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
 
   --tertiary-color: light-dark(#{$body-tertiary-color}, #{$body-tertiary-color-dark});
-  --tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
   --tertiary-bg: light-dark(#{$body-tertiary-bg}, #{$body-tertiary-bg-dark});
-  --tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
   // scss-docs-end root-body-variables
 
-  // $headings-color is itself light-dark(gray-900, white); the dark-mode block below
-  // overrides it to `inherit`, which can't be expressed as a light-dark() branch.
-  --heading-color: #{$headings-color};
-
   --link-color: light-dark(#{$link-color}, #{$link-color-dark});
-  --link-color-rgb: #{to-rgb($link-color)};
   --link-decoration: #{$link-decoration};
 
   --link-hover-color: light-dark(#{$link-hover-color}, #{$link-hover-color-dark});
-  --link-hover-color-rgb: #{to-rgb($link-hover-color)};
 
   @if $link-hover-decoration != null {
     --link-hover-decoration: #{$link-hover-decoration};
@@ -140,7 +118,9 @@
   // Focus styles
   // scss-docs-start root-focus-variables
   --focus-ring-width: #{$focus-ring-width};
+  --focus-ring-offset: #{$focus-ring-offset};
   --focus-ring-opacity: #{$focus-ring-opacity};
+  --focus-ring-opacity-dark: #{$focus-ring-opacity-dark};
   --focus-ring-color: #{$focus-ring-color};
   // scss-docs-end root-focus-variables
 
@@ -152,22 +132,19 @@
   // scss-docs-end root-form-validation-variables
 }
 
+:root,
+[data-bs-theme='light'],
+[data-theme='light'] {
+  --heading-color: #{$headings-color};
+}
+
 @if $enable-dark-mode {
   @include color-mode(dark, true) {
     // scss-docs-start root-dark-mode-vars
-    // -rgb triplets and non-color overrides can't be expressed inside light-dark(), so they stay here.
-    --body-color-rgb: #{to-rgb($body-color-dark)};
-    --body-bg-rgb: #{to-rgb($body-bg-dark)};
-    --emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
-    --secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
-    --secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
-    --tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
-    --tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+    // Non-color overrides can't be expressed inside light-dark(), so they stay here.
 
     --heading-color: #{$headings-color-dark};
 
-    --link-color-rgb: #{to-rgb($link-color-dark)};
-    --link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
     // scss-docs-end root-dark-mode-vars
   }
 }

package/scss/bootstrap/_tables.scss

@@ -8,6 +8,7 @@
 
 .table {
   // Reset needed for nesting tables
+  // scss-docs-start table-css-vars
   --table-color-type: initial;
   --table-bg-type: initial;
   --table-color-state: initial;
@@ -23,6 +24,7 @@
   --table-active-bg: #{$table-active-bg};
   --table-hover-color: #{$table-hover-color};
   --table-hover-bg: #{$table-hover-bg};
+  // scss-docs-end table-css-vars
 
   width: 100%;
   margin-bottom: $spacer;
@@ -109,10 +111,13 @@
 // Zebra-striping
 //
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
+//
+// A row or cell that declares its own background wins over the stripe, so
+// `.bg-*`, `.table-*`, `.text-bg-*` and inline backgrounds stay visible.
 
 // For rows
 .table-striped {
-  > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
+  > tbody > tr:nth-of-type(#{$table-striped-order}):not(:is(#{$table-striped-exclude-selector})) > *:not(:is(#{$table-striped-exclude-selector})) {
     --table-color-type: var(--table-striped-color);
     --table-bg-type: var(--table-striped-bg);
   }
@@ -120,7 +125,7 @@
 
 // For columns
 .table-striped-columns {
-  > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
+  > :not(caption) > tr:not(:is(#{$table-striped-exclude-selector})) > :nth-child(#{$table-striped-columns-order}):not(:is(#{$table-striped-exclude-selector})) {
     --table-color-type: var(--table-striped-color);
     --table-bg-type: var(--table-striped-bg);
   }

package/scss/bootstrap/forms/_floating-labels.scss

@@ -20,7 +20,7 @@
     height: 100%; // allow textareas
     padding: $form-floating-padding-y $form-floating-padding-x;
     overflow: hidden;
-    color: rgba(var(--body-color-rgb), #{$form-floating-label-opacity});
+    color: color-transparent(var(--body-color), $form-floating-label-opacity);
     text-align: start;
     text-overflow: ellipsis;
     white-space: nowrap;

package/scss/bootstrap/forms/_form-check.scss

@@ -30,7 +30,9 @@
 
 .form-check-input {
   --form-check-bg: #{$form-check-input-bg};
+  --form-check-icon-color: #{$form-check-input-checked-color};
 
+  position: relative;
   flex-shrink: 0;
   width: $form-check-input-width;
   height: $form-check-input-width;
@@ -38,19 +40,34 @@
   vertical-align: top;
   appearance: none;
   background-color: var(--form-check-bg);
-  background-image: var(--form-check-bg-image);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
   border: $form-check-input-border;
   print-color-adjust: exact; // Keep themed appearance for print
   @include transition($form-check-transition);
+  // Start the focus ring's `outline-color` transition from transparent, not `currentcolor`.
+  outline-color: transparent;
+
+  // The check, dash or dot is a pseudo-element painted through a CSS mask, so
+  // its colour comes from `--form-check-icon-color` instead of a colour baked
+  // into the svg. Hidden until the input is checked or indeterminate.
+  &::before {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: '';
+    background-color: var(--form-check-icon-color);
+    opacity: 0;
+    @include mask-icon(var(--form-check-icon));
+  }
 
   &[type='checkbox'] {
+    --form-check-icon: #{escape-svg($form-check-input-checked-bg-image)};
+
     @include border-radius($form-check-input-border-radius);
   }
 
   &[type='radio'] {
+    --form-check-icon: #{escape-svg($form-check-radio-checked-bg-image)};
+
     // stylelint-disable-next-line property-disallowed-list
     border-radius: $form-check-radio-border-radius;
   }
@@ -59,41 +76,29 @@
     filter: $form-check-input-active-filter;
   }
 
-  &:focus {
+  &:focus-visible {
     border-color: $form-check-input-focus-border;
-    outline: 0;
-    box-shadow: $form-check-input-focus-box-shadow;
+    @include focus-ring(true);
   }
 
   &:checked {
     background-color: $form-check-input-checked-bg-color;
     border-color: $form-check-input-checked-border-color;
 
-    &[type='checkbox'] {
-      @if $enable-gradients {
-        --form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--gradient);
-      } @else {
-        --form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
-      }
-    }
-
-    &[type='radio'] {
-      @if $enable-gradients {
-        --form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--gradient);
-      } @else {
-        --form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
-      }
+    &::before {
+      opacity: 1;
     }
   }
 
   &[type='checkbox']:indeterminate {
+    --form-check-icon: #{escape-svg($form-check-input-indeterminate-bg-image)};
+    --form-check-icon-color: #{$form-check-input-indeterminate-color};
+
     background-color: $form-check-input-indeterminate-bg-color;
     border-color: $form-check-input-indeterminate-border-color;
 
-    @if $enable-gradients {
-      --form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--gradient);
-    } @else {
-      --form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
+    &::before {
+      opacity: 1;
     }
   }
 
@@ -127,26 +132,41 @@
   padding-inline-start: $form-switch-padding-start;
 
   .form-check-input {
-    --form-switch-bg: #{escape-svg($form-switch-bg-image)};
+    --form-switch-color: #{$form-switch-color};
+    // The knob is a circle three quarters of the track height, inset by an eighth
+    // — the same geometry the old `viewBox='-4 -4 8 8'` svg had.
+    --form-switch-knob-size: calc(#{$form-switch-height} * 0.75);
+    --form-switch-knob-offset: calc(#{$form-switch-height} * 0.125);
 
     width: $form-switch-width;
     margin-inline-start: $form-switch-padding-start * -1;
-    background-image: var(--form-switch-bg);
-    background-position: left center;
     @include border-radius($form-switch-border-radius, 0);
     @include transition($form-switch-transition);
 
+    // The knob replaces the masked check icon: a plain circle that slides.
+    &::before {
+      inset-block: 0;
+      inset-inline: var(--form-switch-knob-offset) auto;
+      width: var(--form-switch-knob-size);
+      height: var(--form-switch-knob-size);
+      margin-block: auto;
+      background-color: var(--form-switch-color);
+      // stylelint-disable-next-line property-disallowed-list
+      border-radius: 50%;
+      opacity: 1;
+      mask-image: none;
+      @include transition($form-switch-knob-transition);
+    }
+
     &:focus {
-      --form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
+      --form-switch-color: #{$form-switch-focus-color};
     }
 
     &:checked {
-      background-position: $form-switch-checked-bg-position;
+      --form-switch-color: #{$form-switch-checked-color};
 
-      @if $enable-gradients {
-        --form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--gradient);
-      } @else {
-        --form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
+      &::before {
+        inset-inline-start: calc(100% - var(--form-switch-knob-size) - var(--form-switch-knob-offset));
       }
     }
   }
@@ -181,11 +201,3 @@
     }
   }
 }
-
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    .form-switch .form-check-input:not(:checked):not(:focus) {
-      --form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
-    }
-  }
-}

package/scss/bootstrap/forms/_form-control.scss

@@ -25,6 +25,8 @@
 
   @include box-shadow($input-box-shadow);
   @include transition($input-transition);
+  // Start the focus ring's `outline-color` transition from transparent, not `currentcolor`.
+  outline-color: transparent;
 
   &[type='file'] {
     overflow: hidden; // prevent pseudo element button overlap
@@ -39,14 +41,8 @@
     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;
-    }
+    --focus-ring-offset: -1px;
+    @include focus-ring(true);
   }
 
   &::-webkit-date-and-time-value {

package/scss/bootstrap/forms/_form-range.scss

@@ -19,10 +19,10 @@
     // Pseudo-elements must be split across multiple rulesets to have an effect.
     // No box-shadow() mixin for focus accessibility.
     &::-webkit-slider-thumb {
-      box-shadow: $form-range-thumb-focus-box-shadow;
+      @include focus-ring(true);
     }
     &::-moz-range-thumb {
-      box-shadow: $form-range-thumb-focus-box-shadow;
+      @include focus-ring(true);
     }
   }
 
@@ -40,6 +40,7 @@
     @include border-radius($form-range-thumb-border-radius);
     @include box-shadow($form-range-thumb-box-shadow);
     @include transition($form-range-thumb-transition);
+    outline-color: transparent;
 
     &:active {
       @include gradient-bg($form-range-thumb-active-bg);
@@ -66,6 +67,7 @@
     @include border-radius($form-range-thumb-border-radius);
     @include box-shadow($form-range-thumb-box-shadow);
     @include transition($form-range-thumb-transition);
+    outline-color: transparent;
 
     &:active {
       @include gradient-bg($form-range-thumb-active-bg);