Add new CSS vars to `.form-control`

diff --git a/scss/forms/_form-control.scss b/scss/forms/_form-control.scss
index 67ae5f4f90389e4f5da849a03443d59e4e6b28e1..0ecef1057db4d3583bacb3646237d7eadb31183b 100644 (file)
--- a/scss/forms/_form-control.scss
+++ b/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;
@@ -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;
+  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; }
 }

diff --git a/site/content/docs/5.3/forms/form-control.md b/site/content/docs/5.3/forms/form-control.md
index 1f3474dacf4286f3fab8ac84c4fa0d30fdbb7a99..dceb9243b96c15d1335474a19c1930eac93233e0 100644 (file)
--- a/site/content/docs/5.3/forms/form-control.md
+++ b/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).