diff options
| -rw-r--r-- | scss/_root.scss | 12 | ||||
| -rw-r--r-- | scss/_variables-dark.scss | 7 | ||||
| -rw-r--r-- | scss/_variables.scss | 15 | ||||
| -rw-r--r-- | site/content/docs/5.3/forms/validation.md | 14 |
4 files changed, 44 insertions, 4 deletions
diff --git a/scss/_root.scss b/scss/_root.scss index b82759a21..2219ba032 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -123,6 +123,13 @@ // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values --#{$prefix}focus-ring-box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}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-invalid-color: #{$form-invalid-color}; + --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color}; + // scss-docs-end root-form-validation-variables } @if $enable-dark-mode { @@ -173,6 +180,11 @@ --#{$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-invalid-color: #{$form-invalid-color-dark}; + --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark}; // scss-docs-end root-dark-mode-vars } } diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss index 88f757a5c..10ae120de 100644 --- a/scss/_variables-dark.scss +++ b/scss/_variables-dark.scss @@ -65,6 +65,13 @@ $form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://w $form-switch-color-dark: rgba($white, .25) !default; $form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default; +// scss-docs-start form-validation-colors-dark +$form-valid-color-dark: $green-300 !default; +$form-valid-border-color-dark: $green-300 !default; +$form-invalid-color-dark: $red-300 !default; +$form-invalid-border-color-dark: $red-300 !default; +// scss-docs-end form-validation-colors-dark + // // Accordion diff --git a/scss/_variables.scss b/scss/_variables.scss index 6f255d404..fe6847be3 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1080,23 +1080,30 @@ $form-feedback-icon-invalid-color: $form-feedback-invalid-color !default; $form-feedback-icon-invalid: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default; // scss-docs-end form-feedback-variables +// scss-docs-start form-validation-colors +$form-valid-color: $form-feedback-valid-color !default; +$form-valid-border-color: $form-feedback-valid-color !default; +$form-invalid-color: $form-feedback-invalid-color !default; +$form-invalid-border-color: $form-feedback-invalid-color !default; +// scss-docs-end form-validation-colors + // scss-docs-start form-validation-states $form-validation-states: ( "valid": ( - "color": var(--#{$prefix}success-text), + "color": var(--#{$prefix}form-valid-color), "icon": $form-feedback-icon-valid, "tooltip-color": #fff, "tooltip-bg-color": var(--#{$prefix}success), "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}success-rgb), $input-btn-focus-color-opacity), - "border-color": var(--#{$prefix}success), + "border-color": var(--#{$prefix}form-valid-border-color), ), "invalid": ( - "color": var(--#{$prefix}danger-text), + "color": var(--#{$prefix}form-invalid-color), "icon": $form-feedback-icon-invalid, "tooltip-color": #fff, "tooltip-bg-color": var(--#{$prefix}danger), "focus-box-shadow": 0 0 $input-btn-focus-blur $input-focus-width rgba(var(--#{$prefix}danger-rgb), $input-btn-focus-color-opacity), - "border-color": var(--#{$prefix}danger), + "border-color": var(--#{$prefix}form-invalid-border-color), ) ) !default; // scss-docs-end form-validation-states diff --git a/site/content/docs/5.3/forms/validation.md b/site/content/docs/5.3/forms/validation.md index cf2a87e80..0371d229d 100644 --- a/site/content/docs/5.3/forms/validation.md +++ b/site/content/docs/5.3/forms/validation.md @@ -351,10 +351,24 @@ If your form layout allows it, you can swap the `.{valid|invalid}-feedback` clas ## 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" >}} +{{< 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. |