Add HSLA colors with Sass map fallbacks

sass/utilities/derived-variables.sass

@@ -1,12 +1,12 @@
-$primary: var(--turquoise, #{$turquoise}) !default
+$primary: $turquoise !default
 
-$info: var(--cyan, #{$cyan}) !default
-$success: var(--green, #{$green}) !default
-$warning: var(--yellow, #{$yellow}) !default
-$danger: var(--red, #{$red}) !default
+$info: $cyan !default
+$success: $green !default
+$warning: $yellow !default
+$danger: $red !default
 
-$light: var(--white-ter, #{$white-ter}) !default
-$dark: var(--grey-darker, #{$grey-darker}) !default
+$light: $white-ter !default
+$dark: $grey-darker !default
 
 // Invert colors
 
@@ -76,7 +76,7 @@ $pre-background: var(--background, #{$background}) !default
 
 // Link colors
 
-$link: var(--blue, #{$blue}) !default
+$link: $blue !default
 $link-rgb: bulmaToRGB($blue) !default
 $link-invert: findColorInvert($link, $blue) !default
 $link-light: findLightColor($link, $blue) !default

sass/utilities/functions.sass

@@ -79,9 +79,9 @@
 @function findColorInvert($color, $fallback: null)
   @if type-of($color) == 'color'
     @if (colorLuminance($color) > 0.55)
-      @return rgba(#000, 0.7)
+      @return var(--black-70, rgba(0, 0, 0, 0.7))
     @else
-      @return #fff
+      @return var(--white, #fff)
   @else if type-of($fallback) == 'color'
     @if (colorLuminance($fallback) > 0.55)
       @return var(--black-70, rgba(0, 0, 0, 0.7))
@@ -150,6 +150,44 @@
     @each $name, $value in $list
       --#{$name}: #{$value}
 
+// 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)
+=registerCSSVarColor($name, $components, $fallback: null)
+  $color: nth($components, 1)
+
+  --#{$name}-h: #{hue($color)}
+  --#{$name}-s: #{saturation($color)}
+  --#{$name}-l: #{lightness($color)}
+  --#{$name}-a: 1
+  --#{$name}: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--#{$name}-l), var(--#{$name}-a))
+
+  // Invert color
+  --#{$name}-invert: #{findColorInvert($color)}
+
+  // Light color
+  $light-l: 96%
+  @if lightness($color) > 96%
+    $light-l: lightness($color)
+  --#{$name}-light-l: #{$light-l}
+  --#{$name}-light: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--#{$name}-light-l), var(--#{$name}-a))
+
+  // Dark color
+  $base-l: 29%
+  $luminance: colorLuminance($color)
+  $luminance-delta: (0.53 - $luminance)
+  $dark-l: round($base-l + ($luminance-delta * 53))
+  --#{$name}-dark-l: #{$dark-l}
+  --#{$name}-dark: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--#{$name}-dark-l), var(--#{$name}-a))
+
 @function assignCSSVar($name, $fallback)
   // +registerCSSVar($name, $fallback)
   @return var(--#{$name}, #{$fallback})