Init CSS variables

sass/components/message.sass

@@ -19,6 +19,10 @@ $message-body-pre-code-background-color: transparent !default
 $message-header-body-border-width: 0 !default
 $message-colors: $colors !default
 
+\:root
+  --bulma-message-background-color-lightness: 96
+  --bulma-message-color-lightness: 29
+
 .message
   @extend %block
   background-color: $message-background-color
@@ -85,3 +89,35 @@ $message-colors: $colors !default
     background-color: $message-body-pre-background-color
   pre code
     background-color: $message-body-pre-code-background-color
+
+.vmessage-header
+  @extend .message-header
+  background-color: var(--cssvar-header-background-color)
+  color: var(--cssvar-header-color)
+
+.vmessage-body
+  @extend .message-body
+  border-color: var(--cssvar-body-border-color)
+  color: var(--cssvar-body-color)
+
+.vmessage
+  --cssvar-background-color: #{$message-background-color}
+  --cssvar-header-background-color: #{$message-header-background-color}
+  --cssvar-header-color: #{$message-header-color}
+  --cssvar-body-border-color: #{$message-body-border-color}
+  --cssvar-body-color: #{$message-body-color}
+  background-color: var(--cssvar-background-color)
+  margin-bottom: 1.5rem
+  strong
+    color: currentColor
+  a:not(.button):not(.tag):not(.dropdown-item)
+    color: currentColor
+    text-decoration: underline
+  @each $name, $trio in $colors
+    $base: "#{$prefix}#{$name}"
+    &.is-#{$name}
+      --cssvar-background-color: var(--#{$base}-light)
+      --cssvar-header-background-color: var(--#{$base})
+      --cssvar-header-color: var(--#{$base}-invert)
+      --cssvar-body-border-color: var(--#{$base})
+      --cssvar-body-color: var(--#{$base}-dark)

sass/elements/button.sass

@@ -303,3 +303,93 @@ $button-static-border-color: $grey-lighter !default
       .button:not(.is-fullwidth)
         margin-left: 0.25rem
         margin-right: 0.25rem
+
+.vbuttons
+  display: flex
+  flex-wrap: wrap
+  .vbutton
+    margin: 0 1em 1em 0
+
+.vbutton
+  --cssvar-background-color: #{$button-background-color}
+  --cssvar-border-color: #{$button-border-color}
+  --cssvar-color: #{$button-color}
+  --cssvar-hover-border-color: #{$button-hover-border-color}
+  --cssvar-hover-color: #{$button-hover-color}
+  --cssvar-active-border-color: #{$button-active-border-color}
+  --cssvar-active-color: #{$button-active-color}
+  -moz-appearance: none
+  -webkit-appearance: none
+  background-color: var(--cssvar-background-color)
+  border-color: var(--cssvar-border-color)
+  border-style: solid
+  border-width: 1px
+  color: var(--cssvar-color)
+  font-size: 1rem
+  padding: 1em 2em
+  outline: none
+  &:hover
+    background-color: var(--cssvar-hover-background-color)
+    border-color: var(--cssvar-hover-border-color)
+    color: var(--cssvar-hover-color)
+  &:active
+    background-color: var(--cssvar-active-background-color)
+    border-color: var(--cssvar-hover-border-color)
+    color: var(--cssvar-hover-color)
+  &.is-light
+    --cssvar-background-color: var(--cssvar-light-background-color)
+    --cssvar-border-color: var(--cssvar-light-border-color)
+    --cssvar-color: var(--cssvar-light-color)
+    --cssvar-hover-background-color: var(--cssvar-light-hover-background-color)
+    --cssvar-hover-border-color: var(--cssvar-light-hover-border-color)
+    --cssvar-hover-color: var(--cssvar-light-hover-color)
+    --cssvar-active-background-color: var(--cssvar-light-active-background-color)
+    --cssvar-active-border-color: var(--cssvar-light-active-border-color)
+    --cssvar-active-color: var(--cssvar-light-active-color)
+  &.is-dark
+    --cssvar-background-color: var(--cssvar-dark-background-color)
+    --cssvar-border-color: var(--cssvar-dark-border-color)
+    --cssvar-color: var(--cssvar-dark-color)
+    --cssvar-hover-background-color: var(--cssvar-dark-hover-background-color)
+    --cssvar-hover-border-color: var(--cssvar-dark-hover-border-color)
+    --cssvar-hover-color: var(--cssvar-dark-hover-color)
+    --cssvar-active-background-color: var(--cssvar-dark-active-background-color)
+    --cssvar-active-border-color: var(--cssvar-dark-active-border-color)
+    --cssvar-active-color: var(--cssvar-dark-active-color)
+  &.is-text
+    background-color: transparent
+    border-color: transparent
+    color: $text
+    text-decoration: underline
+  @each $name, $trio in $colors
+    $base: "#{$prefix}#{$name}"
+    &.is-#{$name}
+      --cssvar-background-color: var(--#{$base})
+      --cssvar-border-color: var(--#{$base})
+      --cssvar-color: var(--#{$base}-invert)
+      --cssvar-hover-background-color: var(--#{$base}-hover)
+      --cssvar-hover-border-color: var(--#{$base}-hover)
+      --cssvar-hover-color: var(--#{$base}-invert)
+      --cssvar-active-background-color: var(--#{$base}-active)
+      --cssvar-active-border-color: var(--#{$base}-active)
+      --cssvar-active-color: var(--#{$base}-invert)
+      &.is-light
+        --cssvar-background-color: var(--#{$base}-light)
+        --cssvar-border-color: var(--#{$base}-light)
+        --cssvar-color: var(--#{$base}-dark)
+        --cssvar-hover-background-color: var(--#{$base}-light-hover)
+        --cssvar-hover-border-color: var(--#{$base}-light-hover)
+        --cssvar-hover-color: var(--#{$base}-dark)
+        --cssvar-active-background-color: var(--#{$base}-light-active)
+        --cssvar-active-border-color: var(--#{$base}-light-active)
+        --cssvar-active-color: var(--#{$base}-dark)
+      &.is-dark
+        --cssvar-background-color: var(--#{$base}-dark)
+        --cssvar-border-color: var(--#{$base}-dark)
+        --cssvar-color: var(--#{$base}-light)
+        --cssvar-hover-background-color: var(--#{$base}-dark-hover)
+        --cssvar-hover-border-color: var(--#{$base}-dark-hover)
+        --cssvar-hover-color: var(--#{$base}-light)
+        --cssvar-active-background-color: var(--#{$base}-dark-active)
+        --cssvar-active-border-color: var(--#{$base}-dark-active)
+        --cssvar-active-color: var(--#{$base}-light)

sass/utilities/_all.sass

@@ -1,7 +1,7 @@
 @charset "utf-8"
 
 @import "initial-variables.sass"
-@import "functions.sass"
+@import "functions.scss"
 @import "derived-variables.sass"
 @import "animations.sass"
 @import "mixins.sass"

sass/utilities/derived-variables.sass

@@ -81,7 +81,53 @@ $size-large: $size-4 !default
 $custom-colors: null !default
 $custom-shades: null !default
 
-$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
+$colors: mergeColorMaps(("white": ($white, $black, "black"), "black": ($black, $white, "white"), "light": ($light, $light-invert, "dark"), "dark": ($dark, $dark-invert, "light"), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert)), $custom-colors) !default
 $shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default
 
 $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default
+
+@function findLightColor($color)
+  @if type-of($color) == 'color'
+    @return change-color($color, $lightness: 96%)
+  @return $background
+
+@function findDarkColor($color)
+  @if type-of($color) == 'color'
+    @return change-color($color, $lightness: 29%)
+  @return $text-strong
+
+=css-variable($color, $name, $cssvar-invert)
+  $hue: hue($color)
+  $saturation: saturation($color)
+  $lightness: lightness($color)
+  $base: "#{$prefix}#{$name}"
+  --#{$base}-h: #{$hue}
+  --#{$base}-s: #{$saturation}
+  --#{$base}-l: #{$lightness}
+  --#{$base}: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l)))
+  --#{$base}-hover: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l)  - 5%))
+  --#{$base}-active: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l)  - 10%))
+
+  $light: findLightColor($color)
+  --#{$base}-light: #{$light}
+  --#{$base}-light-hover: #{darken($light, 5%)}
+  --#{$base}-light-active: #{darken($light, 10%)}
+
+  $dark: findDarkColor($color)
+  --#{$base}-dark: #{$dark}
+  --#{$base}-dark-hover: #{darken($dark, 5%)}
+  --#{$base}-dark-active: #{darken($dark, 10%)}
+
+  @if $cssvar-invert
+    --#{$base}-invert: var(--#{$prefix}#{$cssvar-invert})
+  @else
+    --#{$base}-invert: #{findColorInvert($color)}
+
+\:root
+  @each $name, $trio in $colors
+    $color: nth($trio, 1)
+    $color-invert: nth($trio, 2)
+    $cssvar-invert: false
+    @if length($trio) > 2
+      $cssvar-invert: nth($trio, 3)
+    +css-variable($color, $name, $cssvar-invert)

sass/utilities/functions.sass

@@ -65,3 +65,20 @@
     @return rgba(#000, 0.7)
   @else
     @return #fff
+
+@function findLightColor($color)
+  @if type-of($color) == 'color'
+    @return change-color($color, $lightness: 96%)
+  @return $background
+
+@function findDarkColor($color)
+  @if type-of($color) == 'color'
+    @return change-color($color, $lightness: 29%)
+  @return $text-strong
+
+@function getCssVariable($color, $name)
+  $hue: hue($color)
+  $saturation: saturation($color)
+  $lightness: lightness($color)
+  $alpha: alpha($color)
+  @return $hue, $saturation, $lightness

sass/utilities/initial-variables.sass

@@ -71,7 +71,9 @@ $radius: 4px !default
 $radius-large: 6px !default
 $radius-rounded: 290486px !default
 $speed: 86ms !default
+$prefix: "bulma-"
 
 // Flags
 
 $variable-columns: true !default
+$css-variables: true !default