fix: workaround for bulma functions

In Bulma v0.9 new functions were added which disabled bulma-css-vars for
some lighten, darken and rgba uses like hover states.

These are overridden in bulma-css-vars to work with CSS custom variables
again.

Author: wtho

demo/src/bulma-generated/bulma-colors.js

@@ -51,44 +51,145 @@ $yellow: var(--yellow)
 // derived, generated css variables
 #{":root"}
   --black--10--rgba: rgba(10, 10, 10, 0.1)
+  --black--1000--darken: rgb(0, 0, 0)
   --black--2--rgba: rgba(10, 10, 10, 0.02)
   --black--20--rgba: rgba(10, 10, 10, 0.2)
+  --black--25--rgba: rgba(10, 10, 10, 0.25)
+  --black--250--darken: rgb(4, 4, 4)
+  --black--30--rgba: rgba(10, 10, 10, 0.3)
+  --black--40--rgba: rgba(10, 10, 10, 0.4)
   --black--5--rgba: rgba(10, 10, 10, 0.05)
+  --black--500--darken: rgb(0, 0, 0)
+  --black--70--rgba: rgba(10, 10, 10, 0.7)
   --black--800--lighten: rgb(30, 30, 30)
+  --black--86--rgba: rgba(10, 10, 10, 0.86)
+  --black--90--rgba: rgba(10, 10, 10, 0.9)
 
+  --blue--1000--darken: rgb(32, 91, 187)
+  --blue--25--rgba: rgba(50, 115, 220, 0.25)
+  --blue--250--darken: rgb(39, 108, 218)
+  --blue--500--darken: rgb(36, 102, 209)
   --blue--color-invert: rgb(255, 255, 255)
+  --blue--color-invert--500--darken: rgb(242, 242, 242)
+  --blue--color-invert--70--rgba: rgba(255, 255, 255, 0.7)
+  --blue--color-invert--90--rgba: rgba(255, 255, 255, 0.9)
   --blue--dark-color: rgb(34, 96, 196)
+  --blue--dark-color--1000--lighten: rgb(60, 122, 221)
   --blue--light-color: rgb(238, 243, 252)
-
+  --blue--light-color--1000--darken: rgb(195, 212, 244)
+  --blue--light-color--250--darken: rgb(227, 235, 250)
+  --blue--light-color--500--darken: rgb(216, 228, 248)
+
+  --cyan--1000--darken: rgb(32, 125, 187)
+  --cyan--25--rgba: rgba(50, 152, 220, 0.25)
+  --cyan--250--darken: rgb(39, 147, 218)
+  --cyan--500--darken: rgb(36, 140, 209)
   --cyan--color-invert: rgb(255, 255, 255)
+  --cyan--color-invert--500--darken: rgb(242, 242, 242)
+  --cyan--color-invert--70--rgba: rgba(255, 255, 255, 0.7)
+  --cyan--color-invert--90--rgba: rgba(255, 255, 255, 0.9)
   --cyan--dark-color: rgb(29, 114, 170)
+  --cyan--dark-color--1000--lighten: rgb(36, 143, 214)
   --cyan--light-color: rgb(238, 246, 252)
-
+  --cyan--light-color--1000--darken: rgb(195, 223, 244)
+  --cyan--light-color--250--darken: rgb(227, 240, 250)
+  --cyan--light-color--500--darken: rgb(216, 235, 248)
+
+  --green--1000--darken: rgb(52, 169, 92)
+  --green--25--rgba: rgba(72, 199, 116, 0.25)
+  --green--250--darken: rgb(62, 196, 109)
+  --green--500--darken: rgb(58, 188, 103)
   --green--color-invert: rgb(255, 255, 255)
+  --green--color-invert--500--darken: rgb(242, 242, 242)
+  --green--color-invert--70--rgba: rgba(255, 255, 255, 0.7)
+  --green--color-invert--90--rgba: rgba(255, 255, 255, 0.9)
   --green--dark-color: rgb(37, 121, 66)
+  --green--dark-color--1000--lighten: rgb(49, 160, 87)
   --green--light-color: rgb(239, 250, 243)
+  --green--light-color--1000--darken: rgb(200, 238, 214)
+  --green--light-color--250--darken: rgb(229, 247, 236)
+  --green--light-color--500--darken: rgb(220, 244, 228)
 
+  --grey--30--rgba: rgba(122, 122, 122, 0.3)
+
+  --grey-darker--1000--darken: rgb(29, 29, 29)
+  --grey-darker--25--rgba: rgba(54, 54, 54, 0.25)
+  --grey-darker--250--darken: rgb(48, 48, 48)
+  --grey-darker--500--darken: rgb(41, 41, 41)
   --grey-darker--800--lighten: rgb(74, 74, 74)
   --grey-darker--color-invert: rgb(255, 255, 255)
-
+  --grey-darker--color-invert--500--darken: rgb(242, 242, 242)
+  --grey-darker--color-invert--70--rgba: rgba(255, 255, 255, 0.7)
+  --grey-darker--color-invert--90--rgba: rgba(255, 255, 255, 0.9)
+
+  --grey-lighter--250--darken: rgb(213, 213, 213)
+  --grey-lighter--50--rgba: rgba(219, 219, 219, 0.5)
+  --grey-lighter--500--darken: rgb(206, 206, 206)
+
+  --red--1000--darken: rgb(237, 23, 65)
+  --red--25--rgba: rgba(241, 70, 104, 0.25)
+  --red--250--darken: rgb(240, 58, 94)
+  --red--500--darken: rgb(239, 46, 85)
   --red--color-invert: rgb(255, 255, 255)
+  --red--color-invert--500--darken: rgb(242, 242, 242)
+  --red--color-invert--70--rgba: rgba(255, 255, 255, 0.7)
+  --red--color-invert--90--rgba: rgba(255, 255, 255, 0.9)
   --red--dark-color: rgb(204, 15, 53)
+  --red--dark-color--1000--lighten: rgb(239, 31, 73)
   --red--light-color: rgb(254, 236, 240)
+  --red--light-color--1000--darken: rgb(252, 188, 202)
+  --red--light-color--250--darken: rgb(253, 224, 230)
+  --red--light-color--500--darken: rgb(253, 212, 221)
 
   --text--color-invert: rgb(255, 255, 255)
 
+  --text-strong--30--rgba: rgba(54, 54, 54, 0.3)
+
+  --turquoise--1000--darken: rgb(0, 158, 135)
+  --turquoise--25--rgba: rgba(0, 209, 178, 0.25)
+  --turquoise--250--darken: rgb(0, 196, 167)
+  --turquoise--500--darken: rgb(0, 184, 156)
   --turquoise--color-invert: rgb(255, 255, 255)
+  --turquoise--color-invert--500--darken: rgb(242, 242, 242)
+  --turquoise--color-invert--70--rgba: rgba(255, 255, 255, 0.7)
+  --turquoise--color-invert--90--rgba: rgba(255, 255, 255, 0.9)
   --turquoise--dark-color: rgb(0, 148, 126)
+  --turquoise--dark-color--1000--lighten: rgb(0, 199, 169)
   --turquoise--light-color: rgb(235, 255, 252)
-
+  --turquoise--light-color--1000--darken: rgb(184, 255, 244)
+  --turquoise--light-color--250--darken: rgb(222, 255, 250)
+  --turquoise--light-color--500--darken: rgb(210, 255, 248)
+
+  --white--1000--darken: rgb(230, 230, 230)
+  --white--25--rgba: rgba(255, 255, 255, 0.25)
+  --white--250--darken: rgb(249, 249, 249)
+  --white--500--darken: rgb(242, 242, 242)
+  --white--70--rgba: rgba(255, 255, 255, 0.7)
   --white--800--lighten: rgb(255, 255, 255)
+  --white--90--rgba: rgba(255, 255, 255, 0.9)
 
   --white-ter--1000--darken: rgb(220, 220, 220)
+  --white-ter--25--rgba: rgba(245, 245, 245, 0.25)
+  --white-ter--250--darken: rgb(239, 239, 239)
   --white-ter--500--darken: rgb(232, 232, 232)
   --white-ter--800--lighten: rgb(255, 255, 255)
   --white-ter--color-invert: rgba(0, 0, 0, 0.7)
-
+  --white-ter--color-invert--500--darken: rgba(0, 0, 0, 0.7)
+  --white-ter--color-invert--70--rgba: rgba(0, 0, 0, 0.7)
+  --white-ter--color-invert--90--rgba: rgba(0, 0, 0, 0.9)
+
+  --yellow--1000--darken: rgb(255, 211, 36)
+  --yellow--25--rgba: rgba(255, 221, 87, 0.25)
+  --yellow--250--darken: rgb(255, 218, 74)
+  --yellow--500--darken: rgb(255, 216, 62)
   --yellow--color-invert: rgba(0, 0, 0, 0.7)
+  --yellow--color-invert--500--darken: rgba(0, 0, 0, 0.7)
+  --yellow--color-invert--70--rgba: rgba(0, 0, 0, 0.7)
+  --yellow--color-invert--90--rgba: rgba(0, 0, 0, 0.9)
   --yellow--dark-color: rgb(148, 118, 0)
+  --yellow--dark-color--1000--lighten: rgb(199, 159, 0)
   --yellow--light-color: rgb(255, 251, 235)
+  --yellow--light-color--1000--darken: rgb(255, 241, 184)
+  --yellow--light-color--250--darken: rgb(255, 248, 222)
+  --yellow--light-color--500--darken: rgb(255, 246, 210)
 

demo/src/bulma-generated/generated-fallbacks.css

@@ -48,13 +48,13 @@
     $num: str-slice(quote($perccalc), 0, -2) // remove '%''
     @return wrap(#{$color}--#{$num}--desaturate)
 
-@function rgba($col, $val)
+@function rgba($col, $alpha)
   @if type-of($col) == 'color'
-    @return color.change($col, $alpha: $val)
+    @return color.change($col, $alpha: $alpha)
   @else
     $color: unwrap($col)
     @if str-index($color, "--") == 1
-      @return wrap(#{$color}--#{$val * 100}--rgba)
+      @return wrap(#{$color}--#{$alpha * 100}--rgba)
     @else
       @return color.change($color, $alpha: $perc)
 
@@ -134,3 +134,11 @@
     @return change-color($color, $lightness: max($base-l, $target-l))
   @return $text-strong
 
+@function bulmaRgba($color, $alpha)
+  @return rgba($color, $alpha)
+
+@function bulmaDarken($color, $amount)
+  @return darken($color, $amount)
+
+@function bulmaLighten($color, $amount)
+  @return lighten($color, $amount)

demo/src/bulma-generated/generated-vars.sass

@@ -1,6 +1,6 @@
 {
   "name": "bulma-css-vars",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Bulma with CSS variables",
   "keywords": [
     "bulma",