Fix `.form-control` in dark mode (#37893)

* Fix .form-control in dark mode

* Remove CSS vars from docs

diff --git a/scss/_root.scss b/scss/_root.scss
index f9de30195aabd53f0828df345582b2fb6faf9ffc..7841a153eb84fb343d59105612e2b6828a256702 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -115,11 +115,6 @@
   --#{$prefix}box-shadow-lg: #{$box-shadow-lg};
   --#{$prefix}box-shadow-inset: #{$box-shadow-inset};
 
-  // scss-docs-start form-control-vars
-  --#{$prefix}form-control-bg: var(--#{$prefix}body-bg);
-  --#{$prefix}form-control-disabled-bg: var(--#{$prefix}secondary-bg);
-  // scss-docs-end form-control-vars
-
   // Focus styles
   // scss-docs-start root-focus-variables
   --#{$prefix}focus-ring-width: #{$focus-ring-width};

diff --git a/scss/_variables.scss b/scss/_variables.scss
index b6e6c04a7e1600589e787158eeb1988a54321f58..7db6e4aa091d62f22bff651c1aaa746e76719ce4 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -875,9 +875,9 @@ $input-padding-y-lg:                    $input-btn-padding-y-lg !default;
 $input-padding-x-lg:                    $input-btn-padding-x-lg !default;
 $input-font-size-lg:                    $input-btn-font-size-lg !default;
 
-$input-bg:                              var(--#{$prefix}form-control-bg) !default;
+$input-bg:                              var(--#{$prefix}body-bg) !default;
 $input-disabled-color:                  null !default;
-$input-disabled-bg:                     var(--#{$prefix}form-control-disabled-bg) !default;
+$input-disabled-bg:                     var(--#{$prefix}secondary-bg) !default;
 $input-disabled-border-color:           null !default;
 
 $input-color:                           var(--#{$prefix}body-color) !default;

diff --git a/site/content/docs/5.3/forms/form-control.md b/site/content/docs/5.3/forms/form-control.md
index b2abeb7c2469b2668722f7e81194b33136bd490e..0c6b5997e51653a5458435d01007fbac71611f7d 100644 (file)
--- a/site/content/docs/5.3/forms/form-control.md
+++ b/site/content/docs/5.3/forms/form-control.md
@@ -173,12 +173,6 @@ Learn more about [support for datalist elements](https://caniuse.com/datalist).
 
 ## CSS
 
-### Variables
-
-Form controls make use of a small amount of CSS variables to support custom styling across color modes.
-
-{{< scss-docs name="form-control-vars" file="scss/_root.scss" >}}
-
 ### Sass variables
 
 `$input-*` are shared across most of our form controls (and not buttons).