Reduce bundle size by importing variables in _forms.scss directly

diff --git a/scss/_forms.scss b/scss/_forms.scss
index 7b17d849ac0f6f8aab561e4c54065c3180941658..bd8a2c5124d6baeab2e3dcbf2d2e82b6acb59c31 100644 (file)
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -1,3 +1,25 @@
+:root {
+  // scss-docs-start root-form-validation-variables
+  --#{$prefix}form-valid-color: #{$form-valid-color};
+  --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
+  --#{$prefix}form-valid-icon: #{$form-feedback-icon-valid};
+  --#{$prefix}form-invalid-color: #{$form-invalid-color};
+  --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
+  --#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid};
+  // scss-docs-end root-form-validation-variables
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    --#{$prefix}form-valid-color: #{$form-valid-color-dark};
+    --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
+    --#{$prefix}form-valid-icon: #{$form-feedback-icon-valid-dark};
+    --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
+    --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
+    --#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid-dark};
+  }
+}
+
 @import "forms/labels";
 @import "forms/form-text";
 @import "forms/form-control";

diff --git a/scss/_root.scss b/scss/_root.scss
index 566c8b45a964d31610ea7b85373d5b702ff183b6..6c3f52ddd5013c104333bcc74e0bfebf1a88eb5a 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -119,15 +119,6 @@
   --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
   --#{$prefix}focus-ring-color: #{$focus-ring-color};
   // scss-docs-end root-focus-variables
-
-  // scss-docs-start root-form-validation-variables
-  --#{$prefix}form-valid-color: #{$form-valid-color};
-  --#{$prefix}form-valid-border-color: #{$form-valid-border-color};
-  --#{$prefix}form-valid-icon: #{$form-feedback-icon-valid};
-  --#{$prefix}form-invalid-color: #{$form-invalid-color};
-  --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color};
-  --#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid};
-  // scss-docs-end root-form-validation-variables
 }
 
 @if $enable-dark-mode {
@@ -176,13 +167,6 @@
 
     --#{$prefix}border-color: #{$border-color-dark};
     --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
-
-    --#{$prefix}form-valid-color: #{$form-valid-color-dark};
-    --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark};
-    --#{$prefix}form-valid-icon: #{$form-feedback-icon-valid-dark};
-    --#{$prefix}form-invalid-color: #{$form-invalid-color-dark};
-    --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark};
-    --#{$prefix}form-invalid-icon: #{$form-feedback-icon-invalid-dark};
     // scss-docs-end root-dark-mode-vars
   }
 }

diff --git a/site/content/docs/5.3/forms/validation.md b/site/content/docs/5.3/forms/validation.md
index c66bbaf87c8214ace1484c6fac3560a30e0626d7..a0e0979f7d31edf822ffe57fed3a7decec128aa5 100644 (file)
--- a/site/content/docs/5.3/forms/validation.md
+++ b/site/content/docs/5.3/forms/validation.md
@@ -357,7 +357,7 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
 
 As part of Bootstrap's evolving CSS variables approach, forms now use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
 
-{{< scss-docs name="root-form-validation-variables" file="scss/_root.scss" >}}
+{{< scss-docs name="root-form-validation-variables" file="scss/_forms.scss" >}}
 
 These variables are also color mode adaptive, meaning they change color while in dark mode.