Introducing CSS var for rules

scss/_reboot.scss

@@ -66,11 +66,11 @@ body {
 // 1. Reset Firefox's gray color
 
 hr {
-  margin: $hr-margin-y 0;
-  color: $hr-color; // 1
+  margin: var(--#{$prefix}hr-margin, $hr-margin-y 0);
+  color: var(--#{$prefix}hr-color, $hr-color); // 1
   border: 0;
-  border-top: $hr-border-width solid $hr-border-color;
-  opacity: $hr-opacity;
+  border-top: var(--#{$prefix}hr-width, $hr-border-width) solid var(--#{$prefix}hr-border-color, $hr-border-color);
+  opacity: var(--#{$prefix}hr-opacity, $hr-opacity);
 }
 
 

scss/_tables.scss

@@ -12,6 +12,7 @@
   --#{$prefix}table-color: #{$table-color};
   --#{$prefix}table-bg: #{$table-bg};
   --#{$prefix}table-border-color: #{$table-border-color};
+  --#{$prefix}table-border-width: #{$table-border-width};
   --#{$prefix}table-accent-bg: #{$table-accent-bg};
   --#{$prefix}table-striped-color: #{$table-striped-color};
   --#{$prefix}table-striped-bg: #{$table-striped-bg};
@@ -19,9 +20,10 @@
   --#{$prefix}table-active-bg: #{$table-active-bg};
   --#{$prefix}table-hover-color: #{$table-hover-color};
   --#{$prefix}table-hover-bg: #{$table-hover-bg};
+  --#{$prefix}table-cell-padding: #{$table-cell-padding-y $table-cell-padding-x};
 
   width: 100%;
-  margin-bottom: $spacer;
+  margin-bottom: $table-margin-bottom;
   vertical-align: $table-cell-vertical-align;
   border-color: var(--#{$prefix}table-border-color);
 
@@ -31,11 +33,11 @@
   // Another advantage is that this generates less code and makes the selector less specific making it easier to override.
   // stylelint-disable-next-line selector-max-universal
   > :not(caption) > * > * {
-    padding: $table-cell-padding-y $table-cell-padding-x;
+    padding: var(--#{$prefix}table-cell-padding);
     // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
     color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
     background-color: var(--#{$prefix}table-bg);
-    border-bottom-width: $table-border-width;
+    border-bottom-width: var(--#{$prefix}table-border-width);
     box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
   }
 
@@ -49,7 +51,7 @@
 }
 
 .table-group-divider {
-  border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
+  border-top: calc(var(--#{$prefix}table-border-width) * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list
 }
 
 //
@@ -66,10 +68,7 @@
 //
 
 .table-sm {
-  // stylelint-disable-next-line selector-max-universal
-  > :not(caption) > * > * {
-    padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
-  }
+  --#{$prefix}table-cell-padding: #{$table-cell-padding-y-sm $table-cell-padding-x-sm};
 }
 
 
@@ -84,11 +83,11 @@
 
 .table-bordered {
   > :not(caption) > * {
-    border-width: $table-border-width 0;
+    border-width: var(--#{$prefix}table-border-width) 0;
 
     // stylelint-disable-next-line selector-max-universal
     > * {
-      border-width: 0 $table-border-width;
+      border-width: 0 var(--#{$prefix}table-border-width);
     }
   }
 }

scss/_variables.scss

@@ -737,6 +737,7 @@ $table-cell-vertical-align:   top !default;
 $table-color:                 var(--#{$prefix}body-color) !default;
 $table-bg:                    var(--#{$prefix}body-bg) !default;
 $table-accent-bg:             transparent !default;
+$table-margin-bottom:         $spacer !default;
 
 $table-th-font-weight:        null !default;
 
@@ -935,6 +936,7 @@ $form-color-width:                      3rem !default;
 
 // scss-docs-start form-check-variables
 $form-check-input-width:                  1em !default;
+$form-check-input-height:                 $form-check-input-width !default;
 $form-check-min-height:                   $font-size-base * $line-height-base !default;
 $form-check-padding-start:                $form-check-input-width + .5em !default;
 $form-check-margin-bottom:                .125rem !default;
@@ -978,7 +980,9 @@ $form-switch-border-radius:       $form-switch-width !default;
 $form-switch-transition:          background-position .15s ease-in-out !default;
 
 $form-switch-focus-color:         $input-focus-border-color !default;
-$form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
+// fusv-disable
+$form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default; // Deprecated in 5.3.2
+// fusv-enable
 
 $form-switch-checked-color:       $component-active-color !default;
 $form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;

scss/forms/_floating-labels.scss

@@ -65,7 +65,7 @@
         z-index: -1;
         height: $form-floating-label-height;
         content: "";
-        background-color: $input-bg;
+        background-color: var(--#{$prefix}form-floating-input-bg, $input-bg);
         @include border-radius($input-border-radius);
       }
     }
@@ -86,10 +86,7 @@
 
   > :disabled ~ label,
   > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
+    --#{$prefix}form-floating-input-bg: #{$input-disabled-bg};
     color: $form-floating-label-disabled-color;
-
-    &::after {
-      background-color: $input-disabled-bg;
-    }
   }
 }

scss/forms/_form-check.scss

@@ -2,54 +2,30 @@
 // Check/radio
 //
 
-.form-check {
-  display: block;
-  min-height: $form-check-min-height;
-  padding-left: $form-check-padding-start;
-  margin-bottom: $form-check-margin-bottom;
-
-  .form-check-input {
-    float: left;
-    margin-left: $form-check-padding-start * -1;
-  }
-}
-
-.form-check-reverse {
-  padding-right: $form-check-padding-start;
-  padding-left: 0;
-  text-align: right;
-
-  .form-check-input {
-    float: right;
-    margin-right: $form-check-padding-start * -1;
-    margin-left: 0;
-  }
-}
-
 .form-check-input {
-  --#{$prefix}form-check-bg: #{$form-check-input-bg};
-
-  width: $form-check-input-width;
-  height: $form-check-input-width;
-  margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
+  float: var(--#{$prefix}form-check-float, left);
+  width: var(--#{$prefix}form-check-input-width, $form-check-input-width);
+  height: var(--#{$prefix}form-check-input-height, $form-check-input-height);
+  margin: ($line-height-base - $form-check-input-width) * .5 var(--#{$prefix}form-check-input-margin-right, 0) 0 var(--#{$prefix}form-check-input-margin-left, 0); // line-height minus check height
   vertical-align: top;
   appearance: none;
-  background-color: var(--#{$prefix}form-check-bg);
+  background-color: var(--#{$prefix}form-check-bg, $form-check-input-bg);
   background-image: var(--#{$prefix}form-check-bg-image);
   background-repeat: no-repeat;
-  background-position: center;
+  background-position: var(--#{$prefix}form-check-bg-position, center);
   background-size: contain;
   border: $form-check-input-border;
   print-color-adjust: exact; // Keep themed appearance for print
-  @include transition($form-check-transition);
-
-  &[type="checkbox"] {
-    @include border-radius($form-check-input-border-radius);
-  }
+  @include transition(var(--#{$prefix}form-check-transition, $form-check-transition));
+  border-radius: var(--#{$prefix}form-check-border-radius, $form-check-input-border-radius); // stylelint-disable-line property-disallowed-list
 
   &[type="radio"] {
-    // stylelint-disable-next-line property-disallowed-list
-    border-radius: $form-check-radio-border-radius;
+    @if $enable-gradients {
+      --#{$prefix}form-check-checked-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
+    } @else {
+      --#{$prefix}form-check-checked-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
+    }
+    --#{$prefix}form-check-border-radius: #{$form-check-radio-border-radius};
   }
 
   &:active {
@@ -59,28 +35,18 @@
   &:focus {
     border-color: $form-check-input-focus-border;
     outline: 0;
-    box-shadow: $form-check-input-focus-box-shadow;
+    box-shadow: var(--#{$prefix}form-check-focus-box-shadow, $form-check-input-focus-box-shadow);
   }
 
   &:checked {
-    background-color: $form-check-input-checked-bg-color;
+    background-color: var(--#{$prefix}form-check-checked-bg-color, $form-check-input-checked-bg-color);
+    @if $enable-gradients {
+      background-image: var(--#{$prefix}form-check-checked-bg-image, escape-svg($form-check-input-checked-bg-image), var(--#{$prefix}gradient));
+    } @else {
+      background-image: var(--#{$prefix}form-check-checked-bg-image, escape-svg($form-check-input-checked-bg-image));
+    }
+    background-position: var(--#{$prefix}form-check-checked-bg-position, center);
     border-color: $form-check-input-checked-border-color;
-
-    &[type="checkbox"] {
-      @if $enable-gradients {
-        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
-      } @else {
-        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
-      }
-    }
-
-    &[type="radio"] {
-      @if $enable-gradients {
-        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
-      } @else {
-        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
-      }
-    }
   }
 
   &[type="checkbox"]:indeterminate {
@@ -111,6 +77,25 @@
   }
 }
 
+.form-check {
+  --#{$prefix}form-check-input-margin-left: #{-$form-check-padding-start};
+
+  display: block;
+  min-height: $form-check-min-height;
+  padding-left: $form-check-padding-start;
+  margin-bottom: $form-check-margin-bottom;
+}
+
+.form-check-reverse {
+  --#{$prefix}form-check-float: #{right};
+  --#{$prefix}form-check-input-margin-left: #{0};
+  --#{$prefix}form-check-input-margin-right: #{-$form-check-padding-start};
+
+  padding-right: $form-check-padding-start;
+  padding-left: 0;
+  text-align: right;
+}
+
 .form-check-label {
   color: $form-check-label-color;
   cursor: $form-check-label-cursor;
@@ -121,41 +106,28 @@
 //
 
 .form-switch {
-  padding-left: $form-switch-padding-start;
-
-  .form-check-input {
-    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
-
-    width: $form-switch-width;
-    margin-left: $form-switch-padding-start * -1;
-    background-image: var(--#{$prefix}form-switch-bg);
-    background-position: left center;
-    @include border-radius($form-switch-border-radius);
-    @include transition($form-switch-transition);
-
-    &:focus {
-      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
-    }
-
-    &:checked {
-      background-position: $form-switch-checked-bg-position;
-
-      @if $enable-gradients {
-        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
-      } @else {
-        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
-      }
-    }
+  @if $enable-gradients {
+    --#{$prefix}form-check-checked-bg-image: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
+  } @else {
+    --#{$prefix}form-check-checked-bg-image: #{escape-svg($form-switch-checked-bg-image)};
   }
 
+  --#{$prefix}form-check-input-width: #{$form-switch-width};
+  --#{$prefix}form-check-input-margin-left: #{-$form-switch-padding-start};
+  --#{$prefix}form-check-bg-image: #{escape-svg($form-switch-bg-image)};
+  --#{$prefix}form-check-bg-position: #{left center};
+  --#{$prefix}form-check-checked-bg-position: #{$form-switch-checked-bg-position};
+  --#{$prefix}form-check-transition: #{$form-switch-transition};
+  --#{$prefix}form-check-border-radius: #{$form-switch-border-radius};
+
+  padding-left: $form-switch-padding-start;
+
   &.form-check-reverse {
+    --#{$prefix}form-check-input-margin-left: #{0};
+    --#{$prefix}form-check-input-margin-right: #{-$form-switch-padding-start};
+
     padding-right: $form-switch-padding-start;
     padding-left: 0;
-
-    .form-check-input {
-      margin-right: $form-switch-padding-start * -1;
-      margin-left: 0;
-    }
   }
 }
 
@@ -181,8 +153,8 @@
 
 @if $enable-dark-mode {
   @include color-mode(dark) {
-    .form-switch .form-check-input:not(:checked):not(:focus) {
-      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
+    .form-switch .form-check-input:not(:checked) {
+      --#{$prefix}form-check-bg-image: #{escape-svg($form-switch-bg-image-dark)};
     }
   }
 }

scss/forms/_form-control.scss

@@ -3,9 +3,16 @@
 //
 
 .form-control {
+  // scss-docs-start form-control-css-vars
+  --#{$prefix}form-control-min-height: #{$input-height};
+  --#{$prefix}form-control-padding-y: #{$input-padding-y};
+  --#{$prefix}form-control-padding-x: #{$input-padding-x};
+  // scss-docs-end form-control-css-vars
+
   display: block;
   width: 100%;
-  padding: $input-padding-y $input-padding-x;
+  min-height: var(--#{$prefix}form-control-min-height);
+  padding: var(--#{$prefix}form-control-padding-y) var(--#{$prefix}form-control-padding-x);
   font-family: $input-font-family;
   @include font-size($input-font-size);
   font-weight: $input-font-weight;
@@ -14,7 +21,7 @@
   appearance: none; // Fix appearance for date inputs in Safari
   background-color: $input-bg;
   background-clip: padding-box;
-  border: $input-border-width solid $input-border-color;
+  border: $input-border-width solid var(--#{$prefix}input-border-color, $input-border-color);
 
   // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
   @include border-radius($input-border-radius, 0);
@@ -34,13 +41,13 @@
   &:focus {
     color: $input-focus-color;
     background-color: $input-focus-bg;
-    border-color: $input-focus-border-color;
+    border-color: var(--#{$prefix}input-focus-border-color, $input-focus-border-color);
     outline: 0;
     @if $enable-shadows {
-      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+      @include box-shadow($input-box-shadow, var(--#{$prefix}input-focus-box-shadow, $input-focus-box-shadow));
     } @else {
       // Avoid using mixin so we can pass custom focus shadow properly
-      box-shadow: $input-focus-box-shadow;
+      box-shadow: var(--#{$prefix}input-focus-box-shadow, $input-focus-box-shadow);
     }
   }
 
@@ -93,9 +100,9 @@
 
   // File input buttons theming
   &::file-selector-button {
-    padding: $input-padding-y $input-padding-x;
-    margin: (-$input-padding-y) (-$input-padding-x);
-    margin-inline-end: $input-padding-x;
+    padding: var(--#{$prefix}form-control-padding-y) var(--#{$prefix}form-control-padding-x);
+    margin: calc(-1 * var(--#{$prefix}form-control-padding-y)) calc(-1 * var(--#{$prefix}form-control-padding-x)); // stylelint-disable-line function-disallowed-list
+    margin-inline-end: var(--#{$prefix}form-control-padding-x);
     color: $form-file-button-color;
     @include gradient-bg($form-file-button-bg);
     pointer-events: none;
@@ -118,9 +125,10 @@
 // text (without any border, background color, focus indicator)
 
 .form-control-plaintext {
+  --#{$prefix}form-control-padding-x: 0;
+
   display: block;
   width: 100%;
-  padding: $input-padding-y 0;
   margin-bottom: 0; // match inputs if this class comes on inputs with default margins
   line-height: $input-line-height;
   color: $input-plaintext-color;
@@ -131,12 +139,6 @@
   &:focus {
     outline: 0;
   }
-
-  &.form-control-sm,
-  &.form-control-lg {
-    padding-right: 0;
-    padding-left: 0;
-  }
 }
 
 // Form control sizing
@@ -147,53 +149,24 @@
 // Repeated in `_input_group.scss` to avoid Sass extend issues.
 
 .form-control-sm {
-  min-height: $input-height-sm;
-  padding: $input-padding-y-sm $input-padding-x-sm;
+  --#{$prefix}form-control-min-height: #{$input-height-sm};
+  --#{$prefix}form-control-padding-y: #{$input-padding-y-sm};
+  --#{$prefix}form-control-padding-x: #{$input-padding-x-sm};
   @include font-size($input-font-size-sm);
   @include border-radius($input-border-radius-sm);
-
-  &::file-selector-button {
-    padding: $input-padding-y-sm $input-padding-x-sm;
-    margin: (-$input-padding-y-sm) (-$input-padding-x-sm);
-    margin-inline-end: $input-padding-x-sm;
-  }
 }
 
 .form-control-lg {
-  min-height: $input-height-lg;
-  padding: $input-padding-y-lg $input-padding-x-lg;
+  --#{$prefix}form-control-min-height: #{$input-height-lg};
+  --#{$prefix}form-control-padding-y: #{$input-padding-y-lg};
+  --#{$prefix}form-control-padding-x: #{$input-padding-x-lg};
   @include font-size($input-font-size-lg);
   @include border-radius($input-border-radius-lg);
-
-  &::file-selector-button {
-    padding: $input-padding-y-lg $input-padding-x-lg;
-    margin: (-$input-padding-y-lg) (-$input-padding-x-lg);
-    margin-inline-end: $input-padding-x-lg;
-  }
 }
 
-// Make sure textareas don't shrink too much when resized
-// https://github.com/twbs/bootstrap/pull/29124
-// stylelint-disable selector-no-qualifying-type
-textarea {
-  &.form-control {
-    min-height: $input-height;
-  }
-
-  &.form-control-sm {
-    min-height: $input-height-sm;
-  }
-
-  &.form-control-lg {
-    min-height: $input-height-lg;
-  }
-}
-// stylelint-enable selector-no-qualifying-type
-
 .form-control-color {
-  width: $form-color-width;
-  height: $input-height;
-  padding: $input-padding-y;
+  width: var(--#{$prefix}form-color-width, $form-color-width);
+  padding: var(--#{$prefix}form-control-padding-y);
 
   &:not(:disabled):not([readonly]) {
     cursor: pointer;
@@ -208,7 +181,4 @@ textarea {
     border: 0 !important; // stylelint-disable-line declaration-no-important
     @include border-radius($input-border-radius);
   }
-
-  &.form-control-sm { height: $input-height-sm; }
-  &.form-control-lg { height: $input-height-lg; }
 }

scss/forms/_form-range.scss

@@ -29,7 +29,7 @@
     height: $form-range-thumb-height;
     margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
     appearance: none;
-    @include gradient-bg($form-range-thumb-bg);
+    @include gradient-bg(var(--#{$prefix}form-range-thumb-bg, $form-range-thumb-bg));
     border: $form-range-thumb-border;
     @include border-radius($form-range-thumb-border-radius);
     @include box-shadow($form-range-thumb-box-shadow);
@@ -55,7 +55,7 @@
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
     appearance: none;
-    @include gradient-bg($form-range-thumb-bg);
+    @include gradient-bg(var(--#{$prefix}form-range-thumb-bg, $form-range-thumb-bg));
     border: $form-range-thumb-border;
     @include border-radius($form-range-thumb-border-radius);
     @include box-shadow($form-range-thumb-box-shadow);
@@ -72,20 +72,13 @@
     color: transparent;
     cursor: $form-range-track-cursor;
     background-color: $form-range-track-bg;
-    border-color: transparent; // Firefox specific?
+    border-color: transparent;
     @include border-radius($form-range-track-border-radius);
     @include box-shadow($form-range-track-box-shadow);
   }
 
   &:disabled {
+    --#{$prefix}form-range-thumb-bg: #{$form-range-thumb-disabled-bg};
     pointer-events: none;
-
-    &::-webkit-slider-thumb {
-      background-color: $form-range-thumb-disabled-bg;
-    }
-
-    &::-moz-range-thumb {
-      background-color: $form-range-thumb-disabled-bg;
-    }
   }
 }

scss/forms/_form-select.scss

@@ -20,19 +20,19 @@
   background-repeat: no-repeat;
   background-position: $form-select-bg-position;
   background-size: $form-select-bg-size;
-  border: $form-select-border-width solid $form-select-border-color;
+  border: $form-select-border-width solid var(--#{$prefix}form-select-border-color, $form-select-border-color);
   @include border-radius($form-select-border-radius, 0);
   @include box-shadow($form-select-box-shadow);
   @include transition($form-select-transition);
 
   &:focus {
-    border-color: $form-select-focus-border-color;
+    border-color: var(--#{$prefix}form-select-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);
+      @include box-shadow($form-select-box-shadow, var(--#{$prefix}form-select-focus-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;
+      box-shadow: var(--#{$prefix}form-select-focus-box-shadow, $form-select-focus-box-shadow);
     }
   }
 

scss/helpers/_stretched-link.scss

@@ -5,11 +5,11 @@
 .stretched-link {
   &::#{$stretched-link-pseudo-element} {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: $stretched-link-z-index;
+    top: var(--#{$prefix}stretched-top, 0);
+    right: var(--#{$prefix}stretched-right, 0);
+    bottom: var(--#{$prefix}stretched-bottom, 0);
+    left: var(--#{$prefix}stretched-left, 0);
+    z-index: var(--#{$prefix}stretched-z-index, $stretched-link-z-index);
     content: "";
   }
 }

scss/helpers/_vr.scss

@@ -1,8 +1,8 @@
 .vr {
   display: inline-block;
   align-self: stretch;
-  width: $vr-border-width;
-  min-height: 1em;
+  width: var(--#{$prefix}vr-width, $vr-border-width);
+  min-height: var(--#{$prefix}vr-height, 1em);
   background-color: currentcolor;
-  opacity: $hr-opacity;
+  opacity: var(--#{$prefix}vr-opacity, $hr-opacity);
 }

scss/mixins/_forms.scss

@@ -57,7 +57,9 @@
 
   .form-control {
     @include form-validation-state-selector($state) {
-      border-color: $border-color;
+      --#{$prefix}input-border-color: #{$border-color};
+      --#{$prefix}input-focus-border-color: #{$border-color};
+      --#{$prefix}input-focus-box-shadow: #{$focus-box-shadow};
 
       @if $enable-validation-icons {
         padding-right: $input-height-inner;
@@ -66,11 +68,6 @@
         background-position: right $input-height-inner-quarter center;
         background-size: $input-height-inner-half $input-height-inner-half;
       }
-
-      &:focus {
-        border-color: $border-color;
-        box-shadow: $focus-box-shadow;
-      }
     }
   }
 
@@ -86,7 +83,9 @@
 
   .form-select {
     @include form-validation-state-selector($state) {
-      border-color: $border-color;
+      --#{$prefix}form-select-border-color: #{$border-color};
+      --#{$prefix}form-select-focus-border-color: #{$border-color};
+      --#{$prefix}form-select-focus-box-shadow: #{$focus-box-shadow};
 
       @if $enable-validation-icons {
         &:not([multiple]):not([size]),
@@ -97,34 +96,24 @@
           background-size: $form-select-bg-size, $form-select-feedback-icon-size;
         }
       }
-
-      &:focus {
-        border-color: $border-color;
-        box-shadow: $focus-box-shadow;
-      }
     }
   }
 
   .form-control-color {
     @include form-validation-state-selector($state) {
       @if $enable-validation-icons {
-        width: add($form-color-width, $input-height-inner);
+        --#{$prefix}form-color-width: #{add($form-color-width, $input-height-inner)};
       }
     }
   }
 
   .form-check-input {
     @include form-validation-state-selector($state) {
+      --#{$prefix}form-check-focus-box-shadow: #{$focus-box-shadow};
+      --#{$prefix}form-check-checked-bg-color: #{$color};
+
       border-color: $border-color;
 
-      &:checked {
-        background-color: $color;
-      }
-
-      &:focus {
-        box-shadow: $focus-box-shadow;
-      }
-
       ~ .form-check-label {
         color: $color;
       }

site/content/docs/5.3/forms/form-control.md

@@ -173,6 +173,14 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist).
 
 ## CSS
 
+### Variables
+
+{{< added-in "5.3.2" >}}
+
+As part of Bootstrap's evolving CSS variables approach, form controls now use local CSS variables on `.form-control` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
+
+{{< scss-docs name="form-control-css-vars" file="scss/forms/_form-control.scss" >}}
+
 ### Sass variables
 
 `$input-*` are shared across most of our form controls (and not buttons).