Add fallback values for input and control CSS variables

sass/form/input-textarea.sass

@@ -7,7 +7,7 @@ $textarea-min-height: 8em !default
   --input-focus-box-shadow-size: #{$input-focus-box-shadow-size}
 
   @extend %input
-  box-shadow: var(--input-shadow)
+  box-shadow: var(--input-shadow, #{$input-shadow})
   max-width: 100%
   width: 100%
   &[readonly]
@@ -16,12 +16,12 @@ $textarea-min-height: 8em !default
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     &.is-#{$name}
-      border-color: $color
+      border-color: var(--#{$name}, #{$color})
       &:focus,
       &.is-focused,
       &:active,
       &.is-active
-        box-shadow: var(--input-focus-box-shadow-size) bulmaRgba($color, 0.25)
+        box-shadow: var(--input-focus-box-shadow-size, #{$input-focus-box-shadow-size}) bulmaRgba($color, 0.25)
   // Sizes
   &.is-small
     +control-small

sass/form/shared.sass

@@ -28,29 +28,29 @@ $input-radius: var(--radius, #{$radius}) !default
 
 =input
   @extend %control
-  background-color: var(--input-background-color)
+  background-color: var(--input-background-color, #{$input-background-color})
-  border-color: var(--input-border-color)
+  border-color: var(--input-border-color, #{$input-border-color})
-  border-radius: var(--input-radius)
+  border-radius: var(--input-radius, #{$input-radius})
-  color: var(--input-color)
+  color: var(--input-color, #{$input-color})
   +placeholder
-    color: var(--input-placeholder-color)
+    color: var(--input-placeholder-color, #{$input-placeholder-color})
   &:hover,
   &.is-hovered
-    border-color: var(--input-hover-border-color)
+    border-color: var(--input-hover-border-color, #{$input-hover-border-color})
   &:focus,
   &.is-focused,
   &:active,
   &.is-active
-    border-color: var(--input-focus-border-color)
+    border-color: var(--input-focus-border-color, #{$input-focus-border-color})
-    box-shadow: var(--input-focus-box-shadow-size) var(--input-focus-box-shadow-color)
+    box-shadow: var(--input-focus-box-shadow-size, #{$input-focus-box-shadow-size}) var(--input-focus-box-shadow-color, #{$input-focus-box-shadow-color})
   &[disabled],
   fieldset[disabled] &
-    background-color: var(--input-disabled-background-color)
+    background-color: var(--input-disabled-background-color, #{$input-disabled-background-color})
-    border-color: var(--input-disabled-border-color)
+    border-color: var(--input-disabled-border-color, #{$input-disabled-border-color})
     box-shadow: none
-    color: var(--input-disabled-color)
+    color: var(--input-disabled-color, #{$input-disabled-color})
     +placeholder
-      color: var(--input-disabled-placeholder-color)
+      color: var(--input-disabled-placeholder-color, #{$input-disabled-placeholder-color})
 
 %input
   +input

sass/form/tools.sass

@@ -34,7 +34,7 @@ $control-font-size: var(--size-normal, #{$size-normal}) !default
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     &.is-#{$name}
-      color: $color
+      color: var(--#{$name}, #{$color})
 
 // Containers
 
@@ -168,11 +168,9 @@ $control-font-size: var(--size-normal, #{$size-normal}) !default
         +ltr-property("margin", 0.75rem)
 
 .control
-  --control-font-size: #{$control-font-size}
-
   box-sizing: border-box
   clear: both
-  font-size: var(--control-font-size)
+  font-size: var(--control-font-size, #{$control-font-size})
   position: relative
   text-align: inherit
   // Modifiers
@@ -182,7 +180,7 @@ $control-font-size: var(--size-normal, #{$size-normal}) !default
     .select
       &:focus
         & ~ .icon
-          color: var(--input-icon-active-color)
+          color: var(--input-icon-active-color, #{$input-icon-active-color})
       &.is-small ~ .icon
         font-size: var(--size-small, #{$size-small})
       &.is-medium ~ .icon
@@ -190,23 +188,23 @@ $control-font-size: var(--size-normal, #{$size-normal}) !default
       &.is-large ~ .icon
         font-size: var(--size-large, #{$size-large})
     .icon
-      color: var(--input-icon-color)
+      color: var(--input-icon-color, #{$input-icon-color})
-      height: var(--input-height)
+      height: var(--input-height, #{$input-height})
       pointer-events: none
       position: absolute
       top: 0
-      width: var(--input-height)
+      width: var(--input-height, #{$input-height})
       z-index: 4
   &.has-icons-left
     .input,
     .select select
-      padding-left: var(--input-height)
+      padding-left: var(--input-height, #{$input-height})
     .icon.is-left
       left: 0
   &.has-icons-right
     .input,
     .select select
-      padding-right: var(--input-height)
+      padding-right: var(--input-height, #{$input-height})
     .icon.is-right
       right: 0
   &.is-loading

sass/themes/default.sass

@@ -120,6 +120,7 @@
   --size-medium: #{$size-medium}
   --size-large: #{$size-large}
   // Controls
+  --control-font-size: #{$control-font-size}
   --control-radius: #{$control-radius}
   --control-radius-small: #{$control-radius-small}
   --control-border-width: #{$control-border-width}