Add functions to register and assign CSS variables

sass/utilities/derived-variables.scss

@@ -54,6 +54,7 @@ $scheme-invert-ter : var(--black-ter, #{$black-ter}) !default;
 $background        : var(--white-ter, #{$white-ter}) !default;
 
 $border            : var(--grey-lighter, #{$grey-lighter}) !default;
+$border-rgb        : bulmaToRGB($grey-lighter) !default;
 $border-hover      : var(--grey-light, #{$grey-light}) !default;
 $border-light      : var(--grey-lightest, #{$grey-lightest}) !default;
 $border-light-hover: var(--grey-light, #{$grey-light}) !default;

sass/utilities/functions.sass

@@ -133,3 +133,23 @@
 
 @function bulmaToRGB($color)
   @return red($color), green($color), blue($color)
+
+=registerCSSVar($name, $value, $at-root: true)
+  @if $at-root
+    @at-root :root
+      --#{$name}: #{$value}
+  @else
+    --#{$name}: #{$value}
+
+=registerCSSVars($list, $at-root: true)
+  @if $at-root
+    @at-root :root
+      @each $name, $value in $list
+        --#{$name}: #{$value}
+  @else
+    @each $name, $value in $list
+      --#{$name}: #{$value}
+
+@function assignCSSVar($name, $fallback)
+  // +registerCSSVar($name, $fallback)
+  @return var(--#{$name}, #{$fallback})

sass/utilities/mixins.sass

@@ -194,9 +194,9 @@
   @extend %unselectable
   -moz-appearance: none
   -webkit-appearance: none
-  background-color: bulmaRgba($scheme-invert, 0.2)
+  background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.2)
   border: none
-  border-radius: $radius-rounded
+  border-radius: var(--radius-rounded, #{$radius-rounded})
   cursor: pointer
   pointer-events: auto
   display: inline-block
@@ -214,7 +214,7 @@
   width: 20px
   &::before,
   &::after
-    background-color: $scheme-main
+    background-color: var(--scheme-main, #{$scheme-main})
     content: ""
     display: block
     left: 50%
@@ -230,9 +230,9 @@
     width: 2px
   &:hover,
   &:focus
-    background-color: bulmaRgba($scheme-invert, 0.3)
+    background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.3)
   &:active
-    background-color: bulmaRgba($scheme-invert, 0.4)
+    background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.4)
   // Sizes
   &.is-small
     height: 16px