Add more CSS variables with fallback

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