docs: update content

mrholek · mrholek · commit 39197fa12895 · 2023-06-10T13:37:25.000+02:00
diff --git a/packages/docs/forms/checkbox.md b/packages/docs/forms/checkbox.md
@@ -135,6 +135,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" checked/>
 ```
 
+## Customizing
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-check-variables" />
+
 ## API
 
 !!!include(./api/form/CFormCheck.api.md)!!!
diff --git a/packages/docs/forms/floating-labels.md b/packages/docs/forms/floating-labels.md
@@ -247,4 +247,10 @@ When working with the CoreUI for Bootstrap grid system, be sure to place form el
     </CFormFloating>
   </CCol>
 </CRow>
-```
+```
+
+## Customizing
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-floating-variables" />
diff --git a/packages/docs/forms/input-group.md b/packages/docs/forms/input-group.md
@@ -536,6 +536,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
 
 !!!include(./api/form/CInputGroup.api.md)!!!
diff --git a/packages/docs/forms/input.md b/packages/docs/forms/input.md
@@ -230,6 +230,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
 
 !!!include(./api/form/CFormInput.api.md)!!!
diff --git a/packages/docs/forms/radio.md b/packages/docs/forms/radio.md
@@ -117,6 +117,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
 
 !!!include(./api/form/CFormCheck.api.md)!!!
diff --git a/packages/docs/forms/range.md b/packages/docs/forms/range.md
@@ -32,23 +32,29 @@ Add the `disabled` boolean attribute on an input to give it a grayed out appeara
 Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.
 
 ::: demo
-<CFormRange label="Example range" :min="0" :max="5" value="3" id="customRange2"/>
+<CFormRange label="Example range" :min="0" :max="5" :value="3" id="customRange2"/>
 :::
 ```vue
-<CFormRange label="Example range" :min="0" :max="5" value="3" id="customRange2"/>
+<CFormRange label="Example range" :min="0" :max="5" :value="3" id="customRange2"/>
 ```
 
 ## Steps
 
 By default, range inputs "snap" to integer values. To change this, you can specify a `step` value. In the example below, we double the number of steps by using `:step="0.5"`.
 
 ::: demo
-<CFormRange label="Example range" :min="0" :max="5" :step="0.5" value="3" id="customRange3"/> 
+<CFormRange label="Example range" :min="0" :max="5" :step="0.5" :value="3" id="customRange3"/> 
 :::
 ```vue
-<CFormRange label="Example range" :min="0" :max="5" :step="0.5" value="3" id="customRange3"/> 
+<CFormRange label="Example range" :min="0" :max="5" :step="0.5" :value="3" id="customRange3"/> 
 ```
 
+## Customizing
+
+### SASS variables
+
+<ScssDocs file="_variables.scss" capture="form-range-variables" />
+
 ## API
 
 !!!include(./api/form/CFormRange.api.md)!!!
diff --git a/packages/docs/forms/select.md b/packages/docs/forms/select.md
@@ -128,6 +128,13 @@ 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
 
 !!!include(./api/form/CFormSelect.api.md)!!!
diff --git a/packages/docs/forms/switch.md b/packages/docs/forms/switch.md
@@ -54,6 +54,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
 
 !!!include(./api/form/CFormSwitch.api.md)!!!
diff --git a/packages/docs/forms/textarea.md b/packages/docs/forms/textarea.md
@@ -82,6 +82,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
 
 !!!include(./api/form/CFormTextarea.api.md)!!!
diff --git a/packages/docs/forms/validation.md b/packages/docs/forms/validation.md
@@ -804,6 +804,43 @@ If your form layout allows it, you can swap the text for the tooltip to display
 </script>
 ```
 
+## Customizing
+
+### CSS variables
+
+CoreUI forms 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" />
+
+### SASS mixins
+
+Two mixins are combined, through our loop, to generate our form validation feedback styles.
+
+<ScssDocs file="mixins/_forms.scss" capture="form-validation-mixins" />
+
+### SASS maps
+This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states.
+
+<ScssDocs file="_variables.scss" capture="form-validation-states" />
+
+Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles.
+
+### 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.
+
+<ScssDocs file="forms/_validation.scss" capture="form-validation-states-loop" />
+
 <script>
   export default {
     data: () => {
