bootstrap/scss/forms/_form-variables.scss

@use "../config" as *;
@use "../colors" as *;
@use "../variables" as *;

$control-min-height: 2.5rem !default;
$control-min-height-sm: 2rem !default;
$control-min-height-lg: 3rem !default;
$control-padding-y: .375rem !default;
$control-padding-x: .75rem !default;
$control-font-size: $font-size-base !default;
$control-line-height: $line-height-base !default;
$control-color: var(--#{$prefix}body-color) !default;
$control-bg: var(--#{$prefix}body-bg) !default;
$control-border-width: var(--#{$prefix}border-width) !default;
$control-border-color: var(--#{$prefix}border-color) !default;
$control-border-radius: var(--#{$prefix}border-radius) !default;

$control-padding-y-sm: .25rem !default;
$control-padding-x-sm: .5rem !default;
$control-font-size-sm: $font-size-sm !default;
$control-line-height-sm: $line-height-sm !default;
$control-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;

$control-padding-y-lg: .5rem !default;
$control-padding-x-lg: 1rem !default;
$control-font-size-lg: $font-size-lg !default;
$control-line-height-lg: $line-height-lg !default;
$control-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;

$control-select-indicator-color:       $gray-600 !default;
$control-select-indicator:             url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$control-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
$control-select-bg-position:           right $control-padding-x center !default;
$control-select-bg-size:               16px 12px !default;

$control-select-indicator-color-dark:  $body-color-dark !default;
$control-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$control-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;


// scss-docs-start input-btn-variables
$input-btn-padding-y:         .375rem !default;
$input-btn-padding-x:         .75rem !default;
// $input-btn-font-family:       null !default;
$input-btn-font-size:         $font-size-base !default;
$input-btn-line-height:       $line-height-base !default;

// $input-btn-focus-width:         $focus-ring-width !default;
// $input-btn-focus-color-opacity: $focus-ring-opacity !default;
// $input-btn-focus-color:         $focus-ring-color !default;
// $input-btn-focus-blur:          $focus-ring-blur !default;
// $input-btn-focus-box-shadow:    $focus-ring-box-shadow !default;

$input-btn-padding-y-sm:      .25rem !default;
$input-btn-padding-x-sm:      .5rem !default;
$input-btn-font-size-sm:      $font-size-sm !default;

$input-btn-padding-y-lg:      .5rem !default;
$input-btn-padding-x-lg:      1rem !default;
$input-btn-font-size-lg:      $font-size-lg !default;

// $input-btn-border-width:      var(--#{$prefix}border-width) !default;
// scss-docs-end input-btn-variables

// scss-docs-start form-input-variables
$input-padding-y:                       $input-btn-padding-y !default;
$input-padding-x:                       $input-btn-padding-x !default;
// $input-font-family:                     $input-btn-font-family !default;
$input-font-size:                       $input-btn-font-size !default;
// $input-font-weight:                     $font-weight-base !default;
$input-line-height:                     $input-btn-line-height !default;

$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
$input-font-size-sm:                    $input-btn-font-size-sm !default;

$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
$input-font-size-lg:                    $input-btn-font-size-lg !default;

$input-bg:                              var(--#{$prefix}body-bg) !default;
$input-disabled-color:                  null !default;
$input-disabled-bg:                     var(--#{$prefix}secondary-bg) !default;
$input-disabled-border-color:           null !default;

$input-color:                           var(--#{$prefix}body-color) !default;
$input-border-color:                    var(--#{$prefix}border-color) !default;
$input-border-width:                    var(--#{$prefix}border-width) !default;
$input-box-shadow:                      var(--#{$prefix}box-shadow-inset) !default;

$input-border-radius:                   var(--#{$prefix}border-radius) !default;
$input-border-radius-sm:                var(--#{$prefix}border-radius-sm) !default;
$input-border-radius-lg:                var(--#{$prefix}border-radius-lg) !default;

$input-focus-bg:                        $input-bg !default;
$input-focus-border-color:              var(--#{$prefix}primary-border) !default;
$input-focus-color:                     $input-color !default;
$input-focus-width:                     $input-btn-focus-width !default;
$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;

$input-placeholder-color:               var(--#{$prefix}secondary-color) !default;
$input-plaintext-color:                 var(--#{$prefix}body-color) !default;

$input-height-border:                   calc(#{$input-border-width} * 2) !default;

$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2) !default;
$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y) !default;
$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5) !default;

// $input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false)) !default;
// $input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false)) !default;
// $input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false)) !default;
$input-height:                          2.5rem !default;
$input-height-sm:                       2rem !default;
$input-height-lg:                       3rem !default;

$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

$form-color-width:                      3rem !default;
// scss-docs-end form-input-variables

// scss-docs-start form-file-variables
$form-file-button-color:          $input-color !default;
$form-file-button-bg:             var(--#{$prefix}tertiary-bg) !default;
$form-file-button-hover-bg:       var(--#{$prefix}secondary-bg) !default;
// scss-docs-end form-file-variables

// scss-docs-start form-feedback-variables
$form-feedback-margin-top:          .5rem !default;
$form-feedback-font-size:           $font-size-sm !default;
$form-feedback-font-style:          null !default;
$form-feedback-valid-color:         var(--#{$prefix}success) !default;
$form-feedback-invalid-color:       var(--#{$prefix}danger) !default;

$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/></svg>") !default;
$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}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}form-valid-border-color),
  ),
  "invalid": (
    "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}form-invalid-border-color),
  )
) !default;
// scss-docs-end form-validation-states