1 files changed, 23 insertions, 9 deletions
diff --git a/site/content/docs/5.2/forms/validation.md b/site/content/docs/5.3/forms/validation.md
index d6d6266..c66bbaf 100644
--- a/site/content/docs/5.2/forms/validation.md
+++ b/site/content/docs/5.3/forms/validation.md
@@ -5,7 +5,7 @@ description: Provide valuable, actionable feedback to your users with HTML5 form
 group: forms
 toc: true
 extra_js:
-  - src: "/docs/5.2/assets/js/validate-forms.js"
+  - src: "/docs/5.3/assets/js/validate-forms.js"
     async: true
 ---
 
@@ -19,7 +19,7 @@ Here's how form validation works with Bootstrap:
 
 - HTML form validation is applied via CSS's two pseudo-classes, `:invalid` and `:valid`. It applies to `<input>`, `<select>`, and `<textarea>` elements.
 - Bootstrap scopes the `:invalid` and `:valid` styles to parent `.was-validated` class, usually applied to the `<form>`. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).
-- To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the `.was-validated` class from the `<form>` again after submission.
+- To reset the appearance of the form (for instance, in the case of dynamic form submissions using Ajax), remove the `.was-validated` class from the `<form>` again after submission.
 - As a fallback, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for [server-side validation](#server-side). They do not require a `.was-validated` parent class.
 - Due to constraints in how CSS works, we cannot (at present) apply styles to a `<label>` that comes before a form control in the DOM without the help of custom JavaScript.
 - All modern browsers support the [constraint validation API](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api), a series of JavaScript methods for validating form controls.
@@ -127,7 +127,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t
     <label for="validationDefaultUsername" class="form-label">Username</label>
     <div class="input-group">
       <span class="input-group-text" id="inputGroupPrepend2">@</span>
-      <input type="text" class="form-control" id="validationDefaultUsername"  aria-describedby="inputGroupPrepend2" required>
+      <input type="text" class="form-control" id="validationDefaultUsername" aria-describedby="inputGroupPrepend2" required>
     </div>
   </div>
   <div class="col-md-6">
@@ -159,7 +159,7 @@ While these feedback styles cannot be styled with CSS, you can still customize t
 </form>
 {{< /example >}}
 
-## Server side
+## Server-side
 
 We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes.
 
@@ -349,19 +349,33 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas
 </form>
 {{< /example >}}
 
-## Sass
+## CSS
 
 ### Variables
 
+{{< added-in "5.3.0" >}}
+
+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" >}}
+
+These variables are also color mode adaptive, meaning they change color while in dark mode.
+
+### Sass variables
+
 {{< scss-docs name="form-feedback-variables" file="scss/_variables.scss" >}}
 
-### Mixins
+{{< scss-docs name="form-validation-colors" file="scss/_variables.scss" >}}
+
+{{< scss-docs name="form-validation-colors-dark" file="scss/_variables-dark.scss" >}}
+
+### Sass mixins
 
-Two mixins are combined together, through our [loop](#loop), to generate our form validation feedback styles.
+Two mixins are combined, through our [loop](#sass-loops), to generate our form validation feedback styles.
 
 {{< scss-docs name="form-validation-mixins" file="scss/mixins/_forms.scss" >}}
 
-### Map
+### Sass maps
 
 This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states.
 
@@ -369,7 +383,7 @@ This is the validation Sass map from `_variables.scss`. Override or extend this
 
 Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles.
 
-### Loop
+### Sass loops
 
 Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop.