Add HSLA colors with Sass map fallbacks

diff --git a/bulma.sass b/bulma.sass
index 81d4a0e000ae4e530af9b64d51d74cf1bad91930..ab88cd9b32fb11031171ad2bc7070e04ad67ea6e 100644 (file)
--- a/bulma.sass
+++ b/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"

diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index 9e78de5a6a9433fe76e6a2211023af7bfdf33d6a..cb34998f9441432cdd02c3abfdd8e717c6e0a77c 100644 (file)
--- a/sass/elements/button.sass
+++ b/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,

diff --git a/sass/helpers/color.sass b/sass/helpers/color.sass
index c4d773350312f0009bf9a568c478a8982785473c..08c3e21b667628f950cebc7424f1e2f9d8fed9f3 100644 (file)
--- a/sass/helpers/color.sass
+++ b/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

diff --git a/sass/themes/basic.sass b/sass/themes/basic.sass
new file mode 100644 (file)
index 0000000..5e5b9ee
--- /dev/null
+++ b/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)

diff --git a/sass/utilities/derived-variables.sass b/sass/utilities/derived-variables.sass
index 51671dafd9630bde0df9c0bbdaa24fb53acb50aa..bb22124dcc24edc64eefee3a7007683aa0606f0a 100644 (file)
--- a/sass/utilities/derived-variables.sass
+++ b/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

diff --git a/sass/utilities/functions.sass b/sass/utilities/functions.sass
index 6d51649c9933a4eec67e970257c6b037bd98e2b4..195698aeb07eef1da977b99b173fb8d090e0c660 100644 (file)
--- a/sass/utilities/functions.sass
+++ b/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})