Merge branch 'master' into css-variables-with-fallback

sass/form/checkbox-radio.sass

@@ -11,7 +11,8 @@
   &:hover
     color: var(--checkbox-radio-hover-color)
   &[disabled],
-  fieldset[disabled] &
+  fieldset[disabled] &,
+  input[disabled]
     color: var(--checkbox-radio-disabled-color)
     cursor: not-allowed
 

sass/form/file.sass

@@ -11,6 +11,8 @@ $file-name-border-style: solid !default
 $file-name-border-width: 1px 1px 1px 0 !default
 $file-name-max-width: 16em !default
 
+$file-colors: $form-colors !default
+
 .file
   --file-radius: #{$file-radius}
   --file-cta-hover-color: #{$file-cta-hover-color}
@@ -30,7 +32,7 @@ $file-name-max-width: 16em !default
   justify-content: flex-start
   position: relative
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $file-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}

sass/form/input-textarea.sass

@@ -2,6 +2,8 @@ $textarea-padding: var(--control-padding-horizontal, #{$control-padding-horizont
 $textarea-max-height: 40em !default
 $textarea-min-height: 8em !default
 
+$textarea-colors: $form-colors !default
+
 %input-textarea
   @extend %input
   box-shadow: var(--input-shadow, #{$input-shadow})
@@ -10,7 +12,7 @@ $textarea-min-height: 8em !default
   &[readonly]
     box-shadow: none
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $textarea-colors
     $color: nth($pair, 1)
     &.is-#{$name}
       border-color: var(--#{$name}, #{$color})

sass/form/select.sass

@@ -1,3 +1,5 @@
+$select-colors: $form-colors !default
+
 .select
   --select-arrow: #{$input-arrow}
   --select-disabled-border-color: #{$input-disabled-border-color}
@@ -45,7 +47,7 @@
     &::after
       border-color: var(--select-hover-color)
   // Colors
-  @each $name, $pair in $colors
+  @each $name, $pair in $select-colors
     $color: nth($pair, 1)
     &.is-#{$name}
       &:not(:hover)::after

sass/form/shared.sass

@@ -1,3 +1,5 @@
+$form-colors: $colors !default
+
 $input-color: var(--text-strong, #{$text-strong}) !default
 $input-background-color: var(--scheme-main, #{$scheme-main}) !default
 $input-border-color: var(--border, #{$border}) !default

sass/form/tools.sass

@@ -6,6 +6,8 @@ $help-size: var(--size-small, #{$size-small}) !default
 
 $control-font-size: var(--size-normal, #{$size-normal}) !default
 
+$label-colors: $form-colors !default
+
 .label
   --label-color: #{$label-color}
   --label-font-size: #{$label-font-size}
@@ -31,7 +33,7 @@ $control-font-size: var(--size-normal, #{$size-normal}) !default
   display: block
   font-size: var(--help-font-size)
   margin-top: 0.25rem
-  @each $name, $pair in $colors
+  @each $name, $pair in $label-colors
     $color: nth($pair, 1)
     &.is-#{$name}
       color: var(--#{$name}, #{$color})