Add HSL CSS Variables generator

sass/components/message.sass

@@ -97,3 +97,58 @@ $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(--header-background-color)
+  border-top-left-radius: $message-radius
+  border-top-right-radius: $message-radius
+  color: var(--header-color)
+  &:hover
+    background-color: var(--header-background-color-hover)
+  &:active
+    background-color: var(--header-background-color-active)
+  & + .vmessage-body
+    border-width: $message-header-body-border-width
+    border-top-left-radius: 0
+    border-top-right-radius: 0
+
+.vmessage-body
+  @extend .message-body
+  border-color: var(--body-border-color)
+  color: var(--body-color)
+  &:hover
+    background-color: var(--background-color-hover)
+    color: var(--body-color-hover)
+  &:active
+    background-color: var(--background-color-active)
+    color: var(--body-color-active)
+
+.vmessage
+  --background-color: #{$message-background-color}
+  --header-background-color: #{$message-header-background-color}
+  --header-color: #{$message-header-color}
+  --body-border-color: #{$message-body-border-color}
+  --body-color: #{$message-body-color}
+  background-color: var(--background-color)
+  border-radius: $message-radius
+  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}
+      --background-color: var(--#{$base}-light)
+      --background-color-hover: var(--#{$base}-light-hover)
+      --background-color-active: var(--#{$base}-light-active)
+      --header-background-color: var(--#{$base})
+      --header-background-color-hover: var(--#{$base}-hover)
+      --header-background-color-active: var(--#{$base}-active)
+      --header-color: var(--#{$base}-invert)
+      --body-border-color: var(--#{$base})
+      --body-color: var(--#{$base}-dark)
+      --body-color-hover: var(--#{$base}-dark-hover)
+      --body-color-active: var(--#{$base}-dark-active)

sass/elements/button.sass

@@ -1,4 +1,5 @@
 $button-color: $text-strong !default
+$button-color-invert: $white !default
 $button-background-color: $scheme-main !default
 $button-family: false !default
 
@@ -23,6 +24,12 @@ $button-text-color: $text !default
 $button-text-decoration: underline !default
 $button-text-hover-background-color: $background !default
 $button-text-hover-color: $text-strong !default
+$button-text-focus-background-color: $border-light !default
+$button-text-focus-border-color: $border !default
+$button-text-focus-color: $text-strong !default
+$button-text-focus-box-shadow-color: $border-light !default
+$button-text-active-background-color: $border-light !default
+$button-text-active-color: $text-strong !default
 
 $button-disabled-background-color: $scheme-main !default
 $button-disabled-border-color: $border !default
@@ -321,3 +328,206 @@ $button-static-border-color: $border !default
       .button:not(.is-fullwidth)
         margin-left: 0.25rem
         margin-right: 0.25rem
+
+.vbuttons
+  align-items: center
+  display: flex
+  flex-wrap: wrap
+  justify-content: flex-start
+  &:not(:last-child)
+    margin-bottom: 1rem
+  .vbutton
+    margin-right: 1em
+
+.vbutton
+  --background-color: #{$button-background-color}
+  --border-color: #{$button-border-color}
+  --color: #{$button-color}
+  --hover-border-color: #{$button-hover-border-color}
+  --hover-color: #{$button-hover-color}
+  --focus-border-color: #{$button-focus-border-color}
+  --focus-color: #{$button-focus-color}
+  --focus-box-shadow-color: #{$button-focus-box-shadow-color}
+  --active-border-color: #{$button-active-border-color}
+  --active-color: #{$button-active-color}
+  --outlined-color: #{$button-color}
+  --outlined-hover-background-color: #{$button-color}
+  --outlined-hover-color: #{$button-color-invert}
+  --outlined-active-background-color: #{darken($button-color, 5%)}
+  --outlined-active-color: #{$button-color-invert}
+  --outlined-focus-box-shadow-color: #{$border}
+  @extend %control
+  @extend %unselectable
+  background-color: var(--background-color)
+  border-color: var(--border-color)
+  border-width: $button-border-width
+  color: var(--color)
+  cursor: pointer
+  @if $button-family
+    font-family: $button-family
+  justify-content: center
+  padding-bottom: $button-padding-vertical
+  padding-left: $button-padding-horizontal
+  padding-right: $button-padding-horizontal
+  padding-top: $button-padding-vertical
+  text-align: center
+  white-space: nowrap
+  strong
+    color: inherit
+  .icon
+    &,
+    &.is-small,
+    &.is-medium,
+    &.is-large
+      height: 1.5em
+      width: 1.5em
+    &:first-child:not(:last-child)
+      margin-left: calc(-0.375em - #{$button-border-width})
+      margin-right: 0.1875em
+    &:last-child:not(:first-child)
+      margin-left: 0.1875em
+      margin-right: calc(-0.375em - #{$button-border-width})
+    &:first-child:last-child
+      margin-left: calc(-0.375em - #{$button-border-width})
+      margin-right: calc(-0.375em - #{$button-border-width})
+  &:hover,
+  &.is-hovered
+    background-color: var(--hover-background-color)
+    border-color: var(--hover-border-color)
+    color: var(--hover-color)
+  &:focus,
+  &.is-focused
+    border-color: var(--focus-border-color)
+    &:not(:active)
+      box-shadow: $button-focus-box-shadow-size #{var(--focus-box-shadow-color)}
+  &:active,
+  &.is-active
+    background-color: var(--active-background-color)
+    border-color: var(--active-border-color)
+    color: var(--active-color)
+  &.is-outlined
+    --background-color: transparent
+    --border-color: #{$button-color}
+    --color: #{$button-color}
+    --hover-background-color: #{$button-color}
+    --hover-color: #{$button-color-invert}
+    --active-background-color: #{darken($button-color, 5%)}
+    --active-color: #{$button-color-invert}
+    --focus-border-color: #{$button-color}
+    --focus-box-shadow-color: #{$border}
+    &:not(:hover):not(.is-hovered):not(:active):not(.is-active)
+      background-color: transparent
+    &:not(.is-inverted):not([disabled])
+      &:hover,
+      &.is-hovered,
+      &:active,
+      &.is-active
+        border-color: transparent
+  &.is-outlined.is-inverted
+    background-color: transparent
+  &.is-text
+    --background-color: transparent
+    --border-color: transparent
+    --color: #{$text}
+    --hover-background-color: #{$button-text-hover-background-color}
+    --hover-border-color: transparent
+    --hover-color: #{$button-text-hover-color}
+    --focus-background-color: #{$button-text-focus-background-color}
+    --focus-border-color: transparent
+    --focus-border-color: #{$button-text-focus-border-color}
+    --focus-color: #{$button-text-focus-color}
+    --focus-box-shadow-color: #{$button-text-focus-box-shadow-color}
+    --active-background-color: #{$button-text-active-background-color}
+    --active-border-color: transparent
+    --active-color: #{$button-text-active-color}
+    text-decoration: underline
+  @each $name, $trio in $colors
+    $base: "#{$prefix}#{$name}"
+    &.is-#{$name}
+      --background-color: var(--#{$base})
+      --border-color: transparent
+      --color: var(--#{$base}-invert)
+      --hover-background-color: var(--#{$base}-hover)
+      --hover-border-color: transparent
+      --hover-color: var(--#{$base}-invert)
+      --focus-background-color: var(--#{$base})
+      --focus-border-color: transparent
+      --focus-color: var(--#{$base}-invert)
+      --focus-box-shadow-color: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), 86%)
+      --active-background-color: var(--#{$base}-active)
+      --active-border-color: transparent
+      --active-color: var(--#{$base}-invert)
+      --outlined-color: var(--#{$base})
+      &.is-inverted
+        --background-color: var(--#{$base}-invert)
+        --color: var(--#{$base})
+        --hover-background-color: var(--#{$base}-invert)
+        --hover-color: var(--#{$base}-hover)
+        --active-background-color: var(--#{$base}-invert)
+        --active-color: var(--#{$base}-active)
+      &.is-outlined
+        --background-color: transparent
+        --border-color: var(--#{$base})
+        --color: var(--#{$base})
+        --hover-background-color: var(--#{$base})
+        --focus-border-color: var(--#{$base})
+      &.is-outlined.is-inverted
+        --background-color: transparent
+        --border-color: var(--#{$base}-invert)
+        --color: var(--#{$base}-invert)
+        --hover-border-color: var(--#{$base}-hover)
+        --hover-color: var(--#{$base}-invert)
+        --active-border-color: var(--#{$base}-active)
+        --active-color: var(--#{$base}-active)
+        --focus-box-shadow-color: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), 14%)
+      &.is-light
+        --background-color: var(--#{$base}-light)
+        --border-color: transparent
+        --color: var(--#{$base}-dark)
+        --hover-background-color: var(--#{$base}-light-hover)
+        --hover-border-color: transparent
+        --hover-color: var(--#{$base}-dark)
+        --focus-background-color: var(--#{$base}-light)
+        --focus-border-color: transparent
+        --focus-color: var(--#{$base}-dark)
+        --focus-box-shadow-color: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), 86%)
+        --active-background-color: var(--#{$base}-light-active)
+        --active-border-color: transparent
+        --active-color: var(--#{$base}-dark)
+  // Sizes
+  &.is-small
+    +button-small
+  &.is-normal
+    +button-normal
+  &.is-medium
+    +button-medium
+  &.is-large
+    +button-large
+  // Modifiers
+  &[disabled],
+  fieldset[disabled] &
+    --hover-background-color: var(--background-color) !important
+    --hover-border-color: var(--border-color) !important
+    --hover-color: var(--color) !important
+    opacity: $button-disabled-opacity
+  &.is-fullwidth
+    display: flex
+    width: 100%
+  &.is-loading
+    color: transparent !important
+    pointer-events: none
+    &::after
+      @extend %loader
+      +center(1em)
+      border-color: transparent transparent var(--color) var(--color) !important
+      position: absolute !important
+  &.is-static
+    --background-color: #{$button-static-background-color}
+    --border-color: #{$button-static-border-color}
+    --color: #{$button-static-color}
+    box-shadow: none
+    pointer-events: none
+  &.is-rounded
+    border-radius: $radius-rounded
+    padding-left: 1.25em
+    padding-right: 1.25em

sass/elements/notification.sass

@@ -41,3 +41,23 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
         &.is-light
           background-color: $color-light
           color: $color-dark
+
+.vnotification
+  @extend %block
+  background-color: var(--background-color)
+  border-radius: $notification-radius
+  color: var(--color)
+  padding: $notification-padding
+  position: relative
+  & > .delete
+    position: absolute
+    right: 0.5rem
+    top: 0.5rem
+  @each $name, $trio in $colors
+    $base: "#{$prefix}#{$name}"
+    &.is-#{$name}
+      --background-color: var(--#{$base})
+      --color: var(--#{$base}-invert)
+      &.is-light
+        --background-color: var(--#{$base}-light)
+        --color: var(--#{$base}-dark)

sass/elements/tag.sass

@@ -46,6 +46,41 @@ $tag-delete-margin: 1px !default
         border-bottom-right-radius: 0
         border-top-right-radius: 0
 
+.vtags
+  align-items: center
+  display: flex
+  flex-wrap: wrap
+  justify-content: flex-start
+  &:not(:last-child)
+    margin-bottom: 1.5rem
+  .vtag
+    &:not(:last-child)
+      margin-right: 0.5rem
+
+.vtag
+  --background-color: #{$tag-background-color}
+  --color: #{$tag-color}
+  align-items: center
+  background-color: var(--background-color)
+  border-radius: $tag-radius
+  color: var(--color)
+  display: inline-flex
+  font-size: $size-small
+  height: 2em
+  justify-content: center
+  line-height: 1.5
+  padding-left: 0.75em
+  padding-right: 0.75em
+  white-space: nowrap
+  @each $name, $trio in $colors
+    $base: "#{$prefix}#{$name}"
+    &.is-#{$name}
+      --background-color: var(--#{$base})
+      --color: var(--#{$base}-invert)
+      &.is-light
+        --background-color: var(--#{$base}-light)
+        --color: var(--#{$base}-dark)
+
 .tag:not(body)
   align-items: center
   background-color: $tag-background-color

sass/utilities/derived-variables.sass

@@ -104,3 +104,55 @@ $colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "
 $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 getLightness($color)
+  $min: 96%
+  @if type-of($color) == 'color'
+    @return max($min, lightness($color))
+  @return $min
+
+@function getDarkness($color)
+  $min: 29%
+  @if type-of($color) == 'color'
+    $luminance: colorLuminance($color)
+    $luminance-delta: (0.53 - $luminance)
+    $target: round($min + ($luminance-delta * 53))
+    @return max($min, $target)
+  @return $max
+
+=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%))
+
+  $l: getLightness($color)
+  --#{$base}-light: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), #{$l})
+  --#{$base}-light-hover: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), #{$l - 2%})
+  --#{$base}-light-active: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), #{$l - 4%})
+
+  $d: getDarkness($color)
+  --#{$base}-dark: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), #{$d})
+  --#{$base}-dark-hover: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), #{$d - 5%})
+  --#{$base}-dark-active: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), #{$d - 10%})
+
+  @if $cssvar-invert
+    --#{$base}-invert: var(--#{$prefix}#{$cssvar-invert})
+  @else
+    --#{$base}-invert: #{findColorInvert($color)}
+
+\:root
+  @each $name, $components in $colors
+    $color: nth($components, 1)
+    $color-invert: nth($components, 2)
+    $cssvar-invert: false
+    @if length($components) >= 5
+      $cssvar-invert: nth($components, 5)
+    +css-variable($color, $name, $cssvar-invert)

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