docs: update content

Author: mrholek

packages/docs/content/components/modal.mdx

@@ -1044,7 +1044,7 @@ return <CModal style={vars}>...</CModal>
 
 <ScssDocs file="_variables.scss" capture="modal-variables"/>
 
-### Sass loops
+### SASS loops
 
 [Responsive fullscreen modals](#fullscreen-modal) are generated via the `$breakpoints` map and a loop in `scss/_modal.scss`.
 

packages/docs/content/components/navbar.mdx

@@ -1448,7 +1448,7 @@ Variables for the [dark navbar](#color-schemes):
 
 <ScssDocs file="_variables.scss" capture="navbar-dark-variables"/>
 
-### Sass loops
+### SASS loops
 
 [Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`.
 

packages/docs/content/forms/checkbox.mdx

@@ -114,6 +114,12 @@ Different variants of button, such at the various outlined styles, are supported
 <CFormCheck button={{ color: 'secondary', variant: 'outline' }} id="btn-check-2-outlined" autoComplete="off" label="Checked" defaultChecked/>
 ```
 
+## Customizing
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-check-variables" />
+
 ## API
 
 ### CFormCheck

packages/docs/content/forms/floating-labels.mdx

@@ -146,6 +146,12 @@ When working with the CoreUI for Bootstrap grid system, be sure to place form el
 </CRow>
 ```
 
+## Customizing
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-floating-variables" />
+
 ## API
 
 ### CFormFloating

packages/docs/content/forms/input-group.mdx

@@ -339,6 +339,12 @@ Input groups include support for custom selects and custom file inputs. Browser
 </CInputGroup>
 ```
 
+## Customizing
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="input-group-variables" />
+
 ## API
 
 ### CInputGroup

packages/docs/content/forms/input.mdx

@@ -155,6 +155,24 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
 />
 ```
 
+## Customizing
+
+### SASS variables
+
+`$input-*` are shared across most of our form controls (and not buttons).
+
+<ScssDocs file="_variables.scss" capture="form-input-variables" />
+
+`$form-label-*` and `$form-text-*` are for our `<CFormLabel />`s and `<CFormText />` component.
+
+<ScssDocs file="_variables.scss" capture="form-label-variables" />
+
+<ScssDocs file="_variables.scss" capture="form-text-variables" />
+
+`$form-file-*` are for file input.
+
+<ScssDocs file="_variables.scss" capture="form-file-variables" />
+
 ## API
 
 ### CFormInput

packages/docs/content/forms/radio.mdx

@@ -90,6 +90,12 @@ Different variants of button, such at the various outlined styles, are supported
 <CFormCheck button={{ color: 'danger', variant: 'outline' }} type="radio" name="options-outlined" id="danger-outlined" autoComplete="off" label="Radio"/>
 ```
 
+## Customizing
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-check-variables" />
+
 ## API
 
 ### CFormCheck

packages/docs/content/forms/range.mdx

@@ -41,6 +41,12 @@ By default, range inputs "snap" to integer values. To change this, you can speci
 <CFormRange min={0} max={5} step={0.5} label="Example range" defaultValue="3" id="customRange3" />
 ```
 
+## Customizing
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-range-variables" />
+
 ## API
 
 ### CFormRange

packages/docs/content/forms/select.mdx

@@ -96,6 +96,12 @@ Add the `disabled` boolean attribute on a select to give it a grayed out appeara
 </CFormSelect>
 ```
 
+## Customizing
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-select-variables" />
+
 ## API
 
 ### CFormSelect

packages/docs/content/forms/switch.mdx

@@ -46,6 +46,12 @@ Put your switches on the opposite side by adding `reverse` boolean property.
 <CFormSwitch reverse type="radio" id="reverseFormSwitch2" label="Disabled reverse switch" disabled/>
 ```
 
+## Customizing
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-switch-variables" />
+
 ## API
 
 ### CFormSwitch

packages/docs/content/forms/textarea.mdx

@@ -66,6 +66,20 @@ Add the `readOnly` boolean attribute on an textarea to prevent modification of t
 ></CFormTextarea>
 ```
 
+## Customizing
+
+### SASS variables
+
+`$input-*` are shared across most of our form controls (and not buttons).
+
+<ScssDocs file="_variables.scss" capture="form-input-variables" />
+
+`$form-label-*` and `$form-text-*` are for our `<CFormLabel />`s and `<CFormText />` component.
+
+<ScssDocs file="_variables.scss" capture="form-label-variables" />
+
+<ScssDocs file="_variables.scss" capture="form-text-variables" />
+
 ## API
 
 ### CFormTextarea

packages/docs/content/forms/validation.mdx

@@ -30,21 +30,6 @@ import {
   CRow,
 } from '@coreui/react/src/index'
 
-{/* ## How it works
-
-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.
-- CoreUI for 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.
-- 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.
-- Feedback messages may utilize the [browser defaults](#browser-defaults) (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS.
-- You may provide custom validity messages with `setCustomValidity` in JavaScript.
-
-With that in mind, consider the following demos for our custom form validation styles, optional server-side classes, and browser defaults.*/}
-
 ## Example
 
 For custom CoreUI form validation messages, you'll need to add the `noValidate` boolean property to your `<CForm>`. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you'll see the `:invalid` and `:valid` styles applied to your form controls.
@@ -692,3 +677,21 @@ return (
 </CForm>
 )
 ```
+
+## Customizing
+
+### CSS variables
+
+CoreUI for React components 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.
+
+<ScssDocs file="_root.scss" capture="root-form-validation-variables"/>
+
+These variables are also color mode adaptive, meaning they change color while in dark mode.
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-feedback-variables" />
+
+<ScssDocs file="_variables.scss" capture="form-validation-colors" />
+
+<ScssDocs file="_variables-dark.scss" capture="form-validation-colors-dark" />