Add more CSS variables with fallback

sass/form/input-textarea.sass

@@ -3,9 +3,6 @@ $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: var(--input-shadow, #{$input-shadow})
   max-width: 100%

sass/helpers/color.sass

@@ -1,37 +1,37 @@
 @each $name, $pair in $colors
   $color: nth($pair, 1)
   .has-text-#{$name}
-    color: $color !important
+    color: var(--#{$name}, #{$color}) !important
   a.has-text-#{$name}
     &:hover,
     &:focus
       color: bulmaDarken($color, 10%) !important
   .has-background-#{$name}
-    background-color: $color !important
+    background-color: var(--#{$name}, #{$color}) !important
   @if length($pair) >= 4
     $color-light: nth($pair, 3)
     $color-dark: nth($pair, 4)
     // Light
     .has-text-#{$name}-light
-      color: $color-light !important
+      color: var(--#{$name}-light, #{$color-light}) !important
     a.has-text-#{$name}-light
       &:hover,
       &:focus
         color: bulmaDarken($color-light, 10%) !important
     .has-background-#{$name}-light
-      background-color: $color-light !important
+      background-color: var(--#{$name}-light, #{$color-light}) !important
     // Dark
     .has-text-#{$name}-dark
-      color: $color-dark !important
+      color: var(--#{$name}-dark, #{$color-dark}) !important
     a.has-text-#{$name}-dark
       &:hover,
       &:focus
         color: bulmaLighten($color-dark, 10%) !important
     .has-background-#{$name}-dark
-      background-color: $color-dark !important
+      background-color: var(--#{$name}-dark, #{$color-dark}) !important
 
 @each $name, $shade in $shades
   .has-text-#{$name}
-    color: $shade !important
+    color: var(--#{$name}, #{$shade}) !important
   .has-background-#{$name}
-    background-color: $shade !important
+    background-color: var(--#{$name}, #{$shade}) !important

sass/helpers/typography.sass

@@ -72,27 +72,31 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
   font-style: italic !important
 
 .has-text-weight-light
-  font-weight: $weight-light !important
+  font-weight: var(--weight-light, #{$weight-light}) !important
+
 .has-text-weight-normal
-  font-weight: $weight-normal !important
+  font-weight: var(--weight-normal, #{$weight-normal}) !important
+
 .has-text-weight-medium
-  font-weight: $weight-medium !important
+  font-weight: var(--weight-medium, #{$weight-medium}) !important
+
 .has-text-weight-semibold
-  font-weight: $weight-semibold !important
+  font-weight: var(--weight-semibold, #{$weight-semibold}) !important
+
 .has-text-weight-bold
-  font-weight: $weight-bold !important
+  font-weight: var(--weight-bold, #{$weight-bold}) !important
 
 .is-family-primary
-  font-family: $family-primary !important
+  font-family: var(--family-primary, #{$family-primary}) !important
 
 .is-family-secondary
-  font-family: $family-secondary !important
+  font-family: var(--family-secondary, #{$family-secondary}) !important
 
 .is-family-sans-serif
-  font-family: $family-sans-serif !important
+  font-family: var(--family-sans-serif, #{$family-sans-serif}) !important
 
 .is-family-monospace
-  font-family: $family-monospace !important
+  font-family: var(--family-monospace, #{$family-monospace}) !important
 
 .is-family-code
-  font-family: $family-code !important
+  font-family: var(--family-code, #{$family-code}) !important

sass/helpers/visibility.sass

@@ -1,5 +1,3 @@
-
-
 $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 
 @each $display in $displays

sass/layout/footer.sass

@@ -1,9 +1,13 @@
-$footer-background-color: $scheme-main-bis !default
+$footer-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default
 $footer-color: false !default
 $footer-padding: 3rem 1.5rem 6rem !default
 
 .footer
-  background-color: $footer-background-color
+  --footer-background-color: #{$footer-background-color}
-  padding: $footer-padding
+  --footer-padding: #{$footer-padding}
+  --footer-color: #{$footer-color}
+
+  background-color: var(--footer-background-color)
+  padding: var(--footer-padding)
   @if $footer-color
-    color: $footer-color
+    color: var(--footer-color, #{$footer-color})

sass/layout/hero.sass

@@ -5,6 +5,11 @@ $hero-body-padding-large: 18rem 1.5rem !default
 
 // Main container
 .hero
+  --hero-body-padding: #{$hero-body-padding}
+  --hero-body-padding-small: #{$hero-body-padding-small}
+  --hero-body-padding-medium: #{$hero-body-padding-medium}
+  --hero-body-padding-large: #{$hero-body-padding-large}
+
   align-items: stretch
   display: flex
   flex-direction: column
@@ -76,15 +81,15 @@ $hero-body-padding-large: 18rem 1.5rem !default
   // Sizes
   &.is-small
     .hero-body
-      padding: $hero-body-padding-small
+      --hero-body-padding: var(--hero-body-padding-small)
   &.is-medium
     +tablet
       .hero-body
-        padding: $hero-body-padding-medium
+        --hero-body-padding: var(--hero-body-padding-medium)
   &.is-large
     +tablet
       .hero-body
-        padding: $hero-body-padding-large
+        --hero-body-padding: var(--hero-body-padding-large)
   &.is-halfheight,
   &.is-fullheight,
   &.is-fullheight-with-navbar
@@ -142,4 +147,4 @@ $hero-body-padding-large: 18rem 1.5rem !default
 .hero-body
   flex-grow: 1
   flex-shrink: 0
-  padding: $hero-body-padding
+  padding: var(--hero-body-padding)

sass/layout/section.sass

@@ -3,11 +3,15 @@ $section-padding-medium: 9rem 1.5rem !default
 $section-padding-large: 18rem 1.5rem !default
 
 .section
-  padding: $section-padding
+  --section-padding: #{$section-padding}
+  --section-padding-medium: #{$section-padding-medium}
+  --section-padding-large: #{$section-padding-large}
+
+  padding: var(--section-padding)
   // Responsiveness
   +desktop
     // Sizes
     &.is-medium
-      padding: $section-padding-medium
+      --section-padding: var(--section-padding-medium)
     &.is-large
-      padding: $section-padding-large
+      --section-padding: var(--section-padding-large)

sass/themes/default.sass

@@ -45,6 +45,17 @@
   --speed: #{$speed}
   // Derived variables
   --primary: #{$primary}
+  // bulmaDarken($color, 5%)
+  // bulmaDarken($color, 10%)
+  // bulmaDarken($color, 2.5%)
+  // bulmaRgba($color, 0.25)
+  // bulmaDarken($color-light, 10%)
+  // bulmaDarken($color-light, 2.5%)
+  // bulmaDarken($color-light, 5%)
+  // bulmaLighten($color-dark, 10%)
+  // bulmaDarken($color-invert, 5%)
+  // bulmaRgba($color-invert, 0.9)
+  // bulmaRgba($color-invert, 0.7)
   --info: #{$info}
   --success: #{$success}
   --warning: #{$warning}

sass/utilities/derived-variables.scss

@@ -98,10 +98,10 @@ $family-primary  : var(--family-sans-serif, #{$family-sans-serif}) !default;
 $family-secondary: var(--family-sans-serif, #{$family-sans-serif}) !default;
 $family-code     : var(--family-monospace, #{$family-monospace}) !default;
 
-$size-small : $size-7 !default;
+$size-small : var(--size-7, #{size-7}) !default;
-$size-normal: $size-6 !default;
+$size-normal: var(--size-6, #{size-6}) !default;
-$size-medium: $size-5 !default;
+$size-medium: var(--size-5, #{size-5}) !default;
-$size-large : $size-4 !default;
+$size-large : var(--size-4, #{size-4}) !default;
 
 // Lists and maps
 $custom-colors: null !default;

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

@@ -3,7 +3,7 @@ module.exports = plugin;
 const utils = require('./utils');
 const fs = require('fs');
 const regexAssign = /--[a-z-]*:/g;
-const regexUsage = /var\(--[a-z-]*\)/g;
+const regexUsage = /var\(--[a-z-]*(\, \#|\))/g;
 const LOG_EVERYTHING = false;
 
 function logThis(message) {
@@ -51,6 +51,7 @@ function plugin() {
       usages = usages.map(usage => {
         usage = usage.replace('var(', '');
         usage = usage.replace(')', '');
+        usage = usage.replace(', #', '');
         return usage;
       });