Style more button parts

sass/form/checkbox-radio.sass

@@ -1,7 +1,6 @@
 %checkbox-radio
   --checkbox-radio-hover-color: #{$input-hover-color}
   --checkbox-radio-disabled-color: #{$input-disabled-color}
-
   cursor: pointer
   display: inline-block
   line-height: 1.25

sass/form/file.sass

@@ -24,7 +24,6 @@ $file-colors: $form-colors !default
   --file-name-border-style: #{$file-name-border-style}
   --file-name-border-width: #{$file-name-border-width}
   --file-name-max-width: #{$file-name-max-width}
-
   @extend %unselectable
   align-items: stretch
   display: flex
@@ -37,27 +36,27 @@ $file-colors: $form-colors !default
     $color-invert: nth($pair, 2)
     &.is-#{$name}
       .file-cta
-        background-color: $color
+        background-color: var(--#{$name} #{$color})
         border-color: transparent
-        color: $color-invert
+        color: var(--#{$name}-invert, #{$color-invert})
       &:hover,
       &.is-hovered
         .file-cta
           background-color: bulmaDarken($color, 2.5%)
           border-color: transparent
-          color: $color-invert
+          color: var(--#{$name}-invert, #{$color-invert})
       &:focus,
       &.is-focused
         .file-cta
           border-color: transparent
           box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
-          color: $color-invert
+          color: var(--#{$name}-invert, #{$color-invert})
       &:active,
       &.is-active
         .file-cta
           background-color: bulmaDarken($color, 5%)
           border-color: transparent
-          color: $color-invert
+          color: var(--#{$name}-invert, #{$color-invert})
   // Sizes
   &.is-small
     --file-font-size: var(--size-small, #{$size-small})

sass/form/input-textarea.sass

@@ -53,7 +53,6 @@ $textarea-colors: $form-colors !default
   --textarea-padding: #{$textarea-padding}
   --textarea-max-height: #{$textarea-max-height}
   --textarea-min-height: #{$textarea-min-height}
-
   @extend %input-textarea
   display: block
   max-width: 100%

sass/form/select.sass

@@ -6,13 +6,12 @@ $select-colors: $form-colors !default
   --select-hover-color: #{$input-hover-color}
   --select-disabled-color: #{$input-disabled-color}
   --select-focus-box-shadow-size: #{$input-focus-box-shadow-size}
-
   display: inline-block
   max-width: 100%
   position: relative
   vertical-align: top
   &:not(.is-multiple)
-    height: $input-height
+    height: var(--input-height)
   &:not(.is-multiple):not(.is-loading)
     &::after
       @extend %arrow

sass/form/tools.sass

@@ -12,7 +12,6 @@ $label-colors: $form-colors !default
   --label-color: #{$label-color}
   --label-font-size: #{$label-font-size}
   --label-font-weight: #{$label-weight}
-
   color: var(--label-color)
   display: block
   font-size: var(--label-font-size)
@@ -21,15 +20,14 @@ $label-colors: $form-colors !default
     margin-bottom: 0.5em
   // Sizes
   &.is-small
-    font-size: $size-small
+    font-size: var(--size-small, #{$size-small})
   &.is-medium
-    font-size: $size-medium
+    font-size: var(--size-medium, #{$size-medium})
   &.is-large
-    font-size: $size-large
+    font-size: var(--size-large, #{$size-large})
 
 .help
   --help-font-size: #{$help-size}
-
   display: block
   font-size: var(--help-font-size)
   margin-top: 0.25rem