Add HSLA colors with Sass map fallbacks

bulma.sass

@@ -8,4 +8,4 @@
 @import "sass/grid/_all"
 @import "sass/helpers/_all"
 @import "sass/layout/_all"
-@import "sass/themes/default"
+@import "sass/themes/basic"

sass/elements/button.sass

@@ -126,7 +126,9 @@ $button-colors: $colors !default
       color: $color-invert
       &:hover,
       &.is-hovered
-        background-color: bulmaDarken($color, 2.5%)
+        --hover-#{$name}-l: calc(#{var(--#{$name}-l)} + 10%)
+        --button-hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--hover-#{$name}-l), var(--#{$name}-a))
+        background-color: var(--button-hover-background-color, #{bulmaDarken($color, 2.5%)})
         border-color: transparent
         color: $color-invert
       &:focus,

sass/helpers/color.sass

@@ -1,11 +1,14 @@
 @each $name, $pair in $colors
   $color: nth($pair, 1)
   .has-text-#{$name}
+    --has-text-hover-delta: 10%
+    --has-text-hover-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--has-text-hover-delta)})
+    --has-text-hover-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--has-text-hover-#{$name}-l), var(--#{$name}-a))
     color: var(--#{$name}, #{$color}) !important
-  a.has-text-#{$name}
+  .has-text-#{$name}
     &:hover,
     &:focus
-      color: bulmaDarken($color, 10%) !important
+      color: var(--has-text-hover-color, #{bulmaDarken($color, 10%)}) !important
   .has-background-#{$name}
     background-color: var(--#{$name}, #{$color}) !important
   @if length($pair) >= 4

sass/themes/basic.sass

@@ -0,0 +1,7 @@
+\:root
+  --black: #{$black}
+  --black-70: rgba(0, 0, 0, 0.7)
+  --white: #{$white}
+  // +registerCSSVarColor('primary', ($primary, $primary-invert, $primary-light, $primary-dark))
+  @each $name, $components in $colors
+    +registerCSSVarColor($name, $components)

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})