Add CSS variables to form controls

sass/components/pagination.sass

@@ -68,9 +68,9 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
     .pagination-next
       padding-left: 1em
       padding-right: 1em
-      border-radius: var(--radius-rounded)
+      border-radius: var(--radius-rounded, #{$radius-rounded})
     .pagination-link
-      border-radius: var(--radius-rounded)
+      border-radius: var(--radius-rounded, #{$radius-rounded})
 
 .pagination,
 .pagination-list

sass/form/checkbox-radio.sass

@@ -1,4 +1,7 @@
 %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
@@ -6,10 +9,10 @@
   input
     cursor: pointer
   &:hover
-    color: $input-hover-color
+    color: var(--checkbox-radio-hover-color)
   &[disabled],
   fieldset[disabled] &
-    color: $input-disabled-color
+    color: var(--checkbox-radio-disabled-color)
     cursor: not-allowed
 
 .checkbox

sass/form/file.sass

@@ -1,20 +1,32 @@
-$file-border-color: $border !default
-$file-radius: $radius !default
+$file-border-color: var(--border, #{$border}) !default
+$file-radius: var(--radius, #{$radius}) !default
 
-$file-cta-background-color: $scheme-main-ter !default
-$file-cta-color: $text !default
-$file-cta-hover-color: $text-strong !default
-$file-cta-active-color: $text-strong !default
+$file-cta-background-color: var(--scheme-main-ter, #{$scheme-main-ter}) !default
+$file-cta-color: var(--text, #{$text}) !default
+$file-cta-hover-color: var(--text-strong, #{$text-strong}) !default
+$file-cta-active-color: var(--text-strong, #{$text-strong}) !default
 
-$file-name-border-color: $border !default
+$file-name-border-color: var(--border, #{$border}) !default
 $file-name-border-style: solid !default
 $file-name-border-width: 1px 1px 1px 0 !default
 $file-name-max-width: 16em !default
 
 .file
+  --file-radius: #{$file-radius}
+  --file-cta-hover-color: #{$file-cta-hover-color}
+  --file-cta-active-color: #{$file-cta-active-color}
+  --file-border-color: #{$file-border-color}
+  --file-cta-background-color: #{$file-cta-background-color}
+  --file-cta-color: #{$file-cta-color}
+  --file-name-border-color: #{$file-name-border-color}
+  --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
+  font-size: var(--file-font-size)
   justify-content: flex-start
   position: relative
   // Colors
@@ -46,14 +58,14 @@ $file-name-max-width: 16em !default
           color: $color-invert
   // Sizes
   &.is-small
-    font-size: $size-small
+    --file-font-size: var(--size-small, #{$size-small})
   &.is-medium
-    font-size: $size-medium
+    --file-font-size: var(--size-medium, #{$size-medium})
     .file-icon
       .fa
         font-size: 21px
   &.is-large
-    font-size: $size-large
+    --file-font-size: var(--size-large, #{$size-large})
     .file-icon
       .fa
         font-size: 28px
@@ -67,7 +79,7 @@ $file-name-max-width: 16em !default
       border-top-left-radius: 0
     &.is-empty
       .file-cta
-        border-radius: $file-radius
+        border-radius: var(--file-radius)
       .file-name
         display: none
   &.is-boxed
@@ -95,9 +107,9 @@ $file-name-max-width: 16em !default
         font-size: 35px
     &.has-name
       .file-cta
-        border-radius: $file-radius $file-radius 0 0
+        border-radius: var(--file-radius) var(--file-radius) 0 0
       .file-name
-        border-radius: 0 0 $file-radius $file-radius
+        border-radius: 0 0 var(--file-radius) var(--file-radius)
         border-width: 0 1px 1px
   &.is-centered
     justify-content: center
@@ -110,9 +122,9 @@ $file-name-max-width: 16em !default
   &.is-right
     justify-content: flex-end
     .file-cta
-      border-radius: 0 $file-radius $file-radius 0
+      border-radius: 0 var(--file-radius) var(--file-radius) 0
     .file-name
-      border-radius: $file-radius 0 0 $file-radius
+      border-radius: var(--file-radius) 0 0 var(--file-radius)
       border-width: 1px 0 1px 1px
       order: -1
 
@@ -126,13 +138,13 @@ $file-name-max-width: 16em !default
   &:hover
     .file-cta
       background-color: bulmaDarken($file-cta-background-color, 2.5%)
-      color: $file-cta-hover-color
+      color: var(--file-cta-hover-color)
     .file-name
       border-color: bulmaDarken($file-name-border-color, 2.5%)
   &:active
     .file-cta
       background-color: bulmaDarken($file-cta-background-color, 5%)
-      color: $file-cta-active-color
+      color: var(--file-cta-active-color)
     .file-name
       border-color: bulmaDarken($file-name-border-color, 5%)
 
@@ -148,23 +160,23 @@ $file-name-max-width: 16em !default
 .file-cta,
 .file-name
   @extend %control
-  border-color: $file-border-color
-  border-radius: $file-radius
+  border-color: var(--file-border-color)
+  border-radius: var(--file-radius)
   font-size: 1em
   padding-left: 1em
   padding-right: 1em
   white-space: nowrap
 
 .file-cta
-  background-color: $file-cta-background-color
-  color: $file-cta-color
+  background-color: var(--file-cta-background-color)
+  color: var(--file-cta-color)
 
 .file-name
-  border-color: $file-name-border-color
-  border-style: $file-name-border-style
-  border-width: $file-name-border-width
+  border-color: var(--file-name-border-color)
+  border-style: var(--file-name-border-style)
+  border-width: var(--file-name-border-width)
   display: block
-  max-width: $file-name-max-width
+  max-width: var(--file-name-max-width)
   overflow: hidden
   text-align: inherit
   text-overflow: ellipsis

sass/form/input-textarea.sass

@@ -1,10 +1,13 @@
-$textarea-padding: $control-padding-horizontal !default
+$textarea-padding: var(--control-padding-horizontal, #{$control-padding-horizontal}) !default
 $textarea-max-height: 40em !default
 $textarea-min-height: 8em !default
 
 %input-textarea
+  --input-shadow: #{$input-shadow}
+  --input-focus-box-shadow-size: #{$input-focus-box-shadow-size}
+
   @extend %input
-  box-shadow: $input-shadow
+  box-shadow: var(--input-shadow)
   max-width: 100%
   width: 100%
   &[readonly]
@@ -18,7 +21,7 @@ $textarea-min-height: 8em !default
       &.is-focused,
       &:active,
       &.is-active
-        box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
+        box-shadow: var(--input-focus-box-shadow-size) bulmaRgba($color, 0.25)
   // Sizes
   &.is-small
     +control-small
@@ -37,9 +40,9 @@ $textarea-min-height: 8em !default
 .input
   @extend %input-textarea
   &.is-rounded
-    border-radius: $radius-rounded
-    padding-left: calc(#{$control-padding-horizontal} + 0.375em)
-    padding-right: calc(#{$control-padding-horizontal} + 0.375em)
+    border-radius: var(--radius-rounded, #{$radius-rounded})
+    padding-left: calc(#{var(--control-padding-horizontal, #{$control-padding-horizontal})} + 0.375em)
+    padding-right: calc(#{var(--control-padding-horizontal, #{$control-padding-horizontal})} + 0.375em)
   &.is-static
     background-color: transparent
     border-color: transparent
@@ -48,15 +51,19 @@ $textarea-min-height: 8em !default
     padding-right: 0
 
 .textarea
+  --textarea-padding: #{$textarea-padding}
+  --textarea-max-height: #{$textarea-max-height}
+  --textarea-min-height: #{$textarea-min-height}
+
   @extend %input-textarea
   display: block
   max-width: 100%
   min-width: 100%
-  padding: $textarea-padding
+  padding: var(--textarea-padding)
   resize: vertical
   &:not([rows])
-    max-height: $textarea-max-height
-    min-height: $textarea-min-height
+    max-height: var(--textarea-max-height)
+    min-height: var(--textarea-min-height)
   &[rows]
     height: initial
   // Modifiers

sass/form/select.sass

@@ -1,4 +1,10 @@
 .select
+  --select-arrow: #{$input-arrow}
+  --select-disabled-border-color: #{$input-disabled-border-color}
+  --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
@@ -8,12 +14,12 @@
   &:not(.is-multiple):not(.is-loading)
     &::after
       @extend %arrow
-      border-color: $input-arrow
+      border-color: var(--select-arrow)
       +ltr-position(1.125em)
       z-index: 4
   &.is-rounded
     select
-      border-radius: $radius-rounded
+      border-radius: var(--radius-rounded, #{$radius-rounded})
       +ltr-property("padding", 1em, false)
   select
     @extend %input
@@ -26,7 +32,7 @@
       display: none
     &[disabled]:hover,
     fieldset[disabled] &:hover
-      border-color: $input-disabled-border-color
+      border-color: var(--select-disabled-border-color)
     &:not([multiple])
       +ltr-property("padding", 2.5em)
     &[multiple]
@@ -37,15 +43,15 @@
   // States
   &:not(.is-multiple):not(.is-loading):hover
     &::after
-      border-color: $input-hover-color
+      border-color: var(--select-hover-color)
   // Colors
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     &.is-#{$name}
       &:not(:hover)::after
-        border-color: $color
+        border-color: var(--#{$name}, #{$color})
       select
-        border-color: $color
+        border-color: var(--#{$name}, #{$color})
         &:hover,
         &.is-hovered
           border-color: bulmaDarken($color, 5%)
@@ -53,7 +59,7 @@
         &.is-focused,
         &:active,
         &.is-active
-          box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
+          box-shadow: var(--select-focus-box-shadow-size) bulmaRgba($color, 0.25)
   // Sizes
   &.is-small
     +control-small
@@ -64,7 +70,7 @@
   // Modifiers
   &.is-disabled
     &::after
-      border-color: $input-disabled-color
+      border-color: var(--select-disabled-color)
   &.is-fullwidth
     width: 100%
     select
@@ -78,8 +84,8 @@
       top: 0.625em
       transform: none
     &.is-small:after
-      font-size: $size-small
+      font-size: var(--size-small, #{$size-small})
     &.is-medium:after
-      font-size: $size-medium
+      font-size: var(--size-medium, #{$size-medium})
     &.is-large:after
-      font-size: $size-large
+      font-size: var(--size-large, #{$size-large})

sass/form/shared.sass

@@ -1,55 +1,57 @@
-$input-color: $text-strong !default
-$input-background-color: $scheme-main !default
-$input-border-color: $border !default
-$input-height: $control-height !default
-$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !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
+$input-height: var(--control-height, #{$control-height}) !default
+$input-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.05) !default
+$input-shadow: inset 0 0.0625em 0.125em $input-shadow-color !default
 $input-placeholder-color: bulmaRgba($input-color, 0.3) !default
 
-$input-hover-color: $text-strong !default
-$input-hover-border-color: $border-hover !default
+$input-hover-color: var(--text-strong, #{$text-strong}) !default
+$input-hover-border-color: var(--border-hover, #{$border-hover}) !default
 
-$input-focus-color: $text-strong !default
-$input-focus-border-color: $link !default
+$input-focus-color: var(--text-strong, #{$text-strong}) !default
+$input-focus-border-color: var(--link, #{$link}) !default
 $input-focus-box-shadow-size: 0 0 0 0.125em !default
 $input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
 
-$input-disabled-color: $text-light !default
-$input-disabled-background-color: $background !default
-$input-disabled-border-color: $background !default
+$input-disabled-color: var(--text-light, #{$text-light}) !default
+$input-disabled-background-color: var(--background, #{$background}) !default
+$input-disabled-border-color: var(--background, #{$background}) !default
 $input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
 
-$input-arrow: $link !default
+$input-arrow: var(--link, #{$link}) !default
 
-$input-icon-color: $border !default
-$input-icon-active-color: $text !default
+$input-icon-color: var(--border, #{$border}) !default
+$input-icon-active-color: var(--text, #{$text}) !default
 
-$input-radius: $radius !default
+$input-radius: var(--radius, #{$radius}) !default
 
 =input
+
   @extend %control
-  background-color: $input-background-color
-  border-color: $input-border-color
-  border-radius: $input-radius
-  color: $input-color
+  background-color: var(--input-background-color)
+  border-color: var(--input-border-color)
+  border-radius: var(--input-radius)
+  color: var(--input-color)
   +placeholder
-    color: $input-placeholder-color
+    color: var(--input-placeholder-color)
   &:hover,
   &.is-hovered
-    border-color: $input-hover-border-color
+    border-color: var(--input-hover-border-color)
   &:focus,
   &.is-focused,
   &:active,
   &.is-active
-    border-color: $input-focus-border-color
-    box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
+    border-color: var(--input-focus-border-color)
+    box-shadow: var(--input-focus-box-shadow-size) var(--input-focus-box-shadow-color)
   &[disabled],
   fieldset[disabled] &
-    background-color: $input-disabled-background-color
-    border-color: $input-disabled-border-color
+    background-color: var(--input-disabled-background-color)
+    border-color: var(--input-disabled-border-color)
     box-shadow: none
-    color: $input-disabled-color
+    color: var(--input-disabled-color)
     +placeholder
-      color: $input-disabled-placeholder-color
+      color: var(--input-disabled-placeholder-color)
 
 %input
   +input

sass/form/tools.sass

@@ -1,13 +1,20 @@
-$label-color: $text-strong !default
-$label-weight: $weight-bold !default
+$label-font-size: var(--size-normal, #{$size-normal}) !default
+$label-color: var(--text-strong, #{$text-strong}) !default
+$label-weight: var(--weight-bold, #{$weight-bold}) !default
 
-$help-size: $size-small !default
+$help-size: var(--size-small, #{$size-small}) !default
+
+$control-font-size: var(--size-normal, #{$size-normal}) !default
 
 .label
-  color: $label-color
+  --label-color: #{$label-color}
+  --label-font-size: #{$label-font-size}
+  --label-font-weight: #{$label-weight}
+
+  color: var(--label-color)
   display: block
-  font-size: $size-normal
-  font-weight: $label-weight
+  font-size: var(--label-font-size)
+  font-weight: var(--label-font-weight)
   &:not(:last-child)
     margin-bottom: 0.5em
   // Sizes
@@ -19,8 +26,10 @@ $help-size: $size-small !default
     font-size: $size-large
 
 .help
+  --help-font-size: #{$help-size}
+
   display: block
-  font-size: $help-size
+  font-size: var(--help-font-size)
   margin-top: 0.25rem
   @each $name, $pair in $colors
     $color: nth($pair, 1)
@@ -130,15 +139,15 @@ $help-size: $size-small !default
     +ltr-property("margin", 1.5rem)
     text-align: right
     &.is-small
-      font-size: $size-small
+      font-size: var(--size-small, #{$size-small})
       padding-top: 0.375em
     &.is-normal
       padding-top: 0.375em
     &.is-medium
-      font-size: $size-medium
+      font-size: var(--size-medium, #{$size-medium})
       padding-top: 0.375em
     &.is-large
-      font-size: $size-large
+      font-size: var(--size-large, #{$size-large})
       padding-top: 0.375em
 
 .field-body
@@ -159,9 +168,11 @@ $help-size: $size-small !default
         +ltr-property("margin", 0.75rem)
 
 .control
+  --control-font-size: #{$control-font-size}
+
   box-sizing: border-box
   clear: both
-  font-size: $size-normal
+  font-size: var(--control-font-size)
   position: relative
   text-align: inherit
   // Modifiers
@@ -173,11 +184,11 @@ $help-size: $size-small !default
         & ~ .icon
           color: $input-icon-active-color
       &.is-small ~ .icon
-        font-size: $size-small
+        font-size: var(--size-small, #{$size-small})
       &.is-medium ~ .icon
-        font-size: $size-medium
+        font-size: var(--size-medium, #{$size-medium})
       &.is-large ~ .icon
-        font-size: $size-large
+        font-size: var(--size-large, #{$size-large})
     .icon
       color: $input-icon-color
       height: $input-height
@@ -206,8 +217,8 @@ $help-size: $size-small !default
       top: 0.625em
       z-index: 4
     &.is-small:after
-      font-size: $size-small
+      font-size: var(--size-small, #{$size-small})
     &.is-medium:after
-      font-size: $size-medium
+      font-size: var(--size-medium, #{$size-medium})
     &.is-large:after
-      font-size: $size-large
+      font-size: var(--size-large, #{$size-large})

sass/themes/default.sass

@@ -119,3 +119,11 @@
   --size-normal: #{$size-normal}
   --size-medium: #{$size-medium}
   --size-large: #{$size-large}
+  // Controls
+  --control-radius: #{$control-radius}
+  --control-radius-small: #{$control-radius-small}
+  --control-border-width: #{$control-border-width}
+  --control-height: #{$control-height}
+  --control-line-height: #{$control-line-height}
+  --control-padding-vertical: #{$control-padding-vertical}
+  --control-padding-horizontal: #{$control-padding-horizontal}

sass/utilities/controls.sass

@@ -1,5 +1,5 @@
-$control-radius: $radius !default
-$control-radius-small: $radius-small !default
+$control-radius: var(--radius, #{$radius}) !default
+$control-radius-small: var(--radius-small, #{$radius-small}) !default
 
 $control-border-width: 1px !default
 
@@ -14,17 +14,17 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
   -webkit-appearance: none
   align-items: center
   border: $control-border-width solid transparent
-  border-radius: $control-radius
+  border-radius: var(--control-radius, #{$control-radius})
   box-shadow: none
   display: inline-flex
-  font-size: $size-normal
-  height: $control-height
+  font-size: var(--size-normal, #{$size-normal})
+  height: var(--control-height, #{$control-height})
   justify-content: flex-start
-  line-height: $control-line-height
-  padding-bottom: $control-padding-vertical
-  padding-left: $control-padding-horizontal
-  padding-right: $control-padding-horizontal
-  padding-top: $control-padding-vertical
+  line-height: var(--control-line-height, #{$control-line-height})
+  padding-bottom: var(--control-padding-vertical, #{$control-padding-vertical})
+  padding-left: var(--control-padding-horizontal, #{$control-padding-horizontal})
+  padding-right: var(--control-padding-horizontal, #{$control-padding-horizontal})
+  padding-top: var(--control-padding-vertical, #{$control-padding-vertical})
   position: relative
   vertical-align: top
   // States
@@ -42,9 +42,9 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
 
 // The controls sizes use mixins so they can be used at different breakpoints
 =control-small
-  border-radius: $control-radius-small
-  font-size: $size-small
+  border-radius: var(--control-radius-small, #{$control-radius-small})
+  font-size: var(--size-small, #{$size-small})
 =control-medium
-  font-size: $size-medium
+  font-size: var(--size-medium, #{$size-medium})
 =control-large
-  font-size: $size-large
+  font-size: var(--size-large, #{$size-large})

test/plugins/check-css-variables-exist.js

@@ -125,6 +125,13 @@ const DEFAULT_ASSIGNMENTS = [
   '--size-normal',
   '--size-medium',
   '--size-large',
+  '--control-radius',
+  '--control-radius-small',
+  '--control-border-width',
+  '--control-height',
+  '--control-line-height',
+  '--control-padding-vertical',
+  '--control-padding-horizontal',
 ];
 
 function logThis(message) {
@@ -145,8 +152,11 @@ function plugin() {
       const contents = file.contents.toString();
       const assignments = contents.match(regexAssign);
 
+      let errorCount = 0;
+
       if (!assignments) {
         logThis(`${filePath} has no CSS var assignments`);
+        errorCount++;
         return;
       }
 
@@ -157,6 +167,7 @@ function plugin() {
 
       if (!usages) {
         logThis(`${filePath} has no CSS var usages`);
+        errorCount++;
         return;
       }
 
@@ -167,7 +178,10 @@ function plugin() {
         return usage;
       });
 
-      let errorCount = 0;
+      if (filePath.endsWith('shared.sass')) {
+        console.log('ZLOG usages', usages);
+        console.log('ZLOG assignments', fileAssignments);
+      }
 
       usages.forEach(usage => {
         if (!allAssignments.includes(usage)) {
@@ -185,6 +199,7 @@ function plugin() {
 
       if (errorCount) {
         console.log(`There are some errors in ${filePath}`);
+        hasErrors = true;
       } else {
         logThis(`${filePath} is all good!`);
       }