Add CSS vars to buttons

sass/components/navbar.sass

@@ -100,7 +100,6 @@ $navbar-colors: $colors !default
   --navbar-item-active-background-color: #{$navbar-item-active-background-color}
 
   background-color: var(--navbar-background-color)
-  color: var(--navbar-color)
   min-height: var(--navbar-height)
   position: relative
   z-index: var(--navbar-z)
@@ -343,8 +342,6 @@ a.navbar-item,
             background-color: transparent !important
       .navbar-dropdown
         a.navbar-item
-          background-color: var(--navbar-dropdown-item-background-color)
-          color: var(--navbar-dropdown-item-color)
           &:focus,
           &:hover
             background-color: var(--navbar-dropdown-item-hover-background-color)

sass/elements/button.sass

@@ -1,66 +1,92 @@
-$button-color: $text-strong !default
+$button-color: var(--text-strong, #{$text-strong}) !default
-$button-background-color: $scheme-main !default
+$button-background-color: var(--scheme-main, #{$scheme-main}) !default
 $button-family: false !default
 
-$button-border-color: $border !default
+$button-border-color: var(--border, #{$border}) !default
-$button-border-width: $control-border-width !default
+$button-border-width: var(--control-border-width, #{$control-border-width}) !default
 
 $button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
 $button-padding-horizontal: 1em !default
 
-$button-hover-color: $link-hover !default
+$button-hover-color: var(--link-hover, #{$link-hover}) !default
-$button-hover-border-color: $link-hover-border !default
+$button-hover-border-color: var(--link-hover-border, #{$link-hover-border}) !default
 
-$button-focus-color: $link-focus !default
+$button-focus-color: var(--link-focus, #{$link-focus}) !default
-$button-focus-border-color: $link-focus-border !default
+$button-focus-border-color: var(--link-focus-border, #{$link-focus-border}) !default
 $button-focus-box-shadow-size: 0 0 0 0.125em !default
 $button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
 
-$button-active-color: $link-active !default
+$button-active-color: var(--link-active, #{$link-active}) !default
-$button-active-border-color: $link-active-border !default
+$button-active-border-color: var(--link-active-border, #{$link-active-border}) !default
 
-$button-text-color: $text !default
+$button-text-color: var(--text, #{$text}) !default
 $button-text-decoration: underline !default
-$button-text-hover-background-color: $background !default
+$button-text-hover-background-color: var(--background, #{$background}) !default
-$button-text-hover-color: $text-strong !default
+$button-text-hover-color: var(--text-strong, #{$text-strong}) !default
 
-$button-disabled-background-color: $scheme-main !default
+$button-disabled-background-color: var(--scheme-main, #{$scheme-main}) !default
-$button-disabled-border-color: $border !default
+$button-disabled-border-color: var(--border, #{$border}) !default
 $button-disabled-shadow: none !default
 $button-disabled-opacity: 0.5 !default
 
-$button-static-color: $text-light !default
+$button-static-color: var(--text-light, #{$text-light}) !default
-$button-static-background-color: $scheme-main-ter !default
+$button-static-background-color: var(--scheme-main-ter, #{$scheme-main-ter}) !default
-$button-static-border-color: $border !default
+$button-static-border-color: var(--border, #{$border}) !default
 
 $button-colors: $colors !default
 
 // The button sizes use mixins so they can be used at different breakpoints
 =button-small
-  border-radius: $radius-small
+  border-radius: var(--radius-small, #{$radius-small})
-  font-size: $size-small
+  --button-font-size: var(--size-small, #{$size-small})
 =button-normal
-  font-size: $size-normal
+  --button-font-size: var(--size-normal, #{$size-normal})
 =button-medium
-  font-size: $size-medium
+  --button-font-size: var(--size-medium, #{$size-medium})
 =button-large
-  font-size: $size-large
+  --button-font-size: var(--size-large, #{$size-large})
 
 .button
+  --button-background-color: #{$button-background-color}
+  --button-border-color: #{$button-border-color}
+  --button-border-width: #{$button-border-width}
+  --button-color: #{$button-color}
+  --button-family: #{$button-family}
+  --button-padding-vertical: #{$button-padding-vertical}
+  --button-padding-horizontal: #{$button-padding-horizontal}
+  --button-hover-border-color: #{$button-hover-border-color}
+  --button-hover-color: #{$button-hover-color}
+  --button-focus-border-color: #{$button-focus-border-color}
+  --button-focus-color: #{$button-focus-color}
+  --button-active-border-color: #{$button-active-border-color}
+  --button-active-color: #{$button-active-color}
+  --button-text-color: #{$button-text-color}
+  --button-text-decoration: #{$button-text-decoration}
+  --button-text-hover-background-color: #{$button-text-hover-background-color}
+  --button-text-hover-color: #{$button-text-hover-color}
+  --button-disabled-background-color: #{$button-disabled-background-color}
+  --button-disabled-border-color: #{$button-disabled-border-color}
+  --button-disabled-shadow: #{$button-disabled-shadow}
+  --button-disabled-opacity: #{$button-disabled-opacity}
+  --button-static-background-color: #{$button-static-background-color}
+  --button-static-border-color: #{$button-static-border-color}
+  --button-static-color: #{$button-static-color}
+
   @extend %control
   @extend %unselectable
-  background-color: $button-background-color
+  background-color: var(--button-background-color)
-  border-color: $button-border-color
+  border-color: var(--button-border-color)
-  border-width: $button-border-width
+  border-width: var(--button-border-width)
-  color: $button-color
+  color: var(--button-color)
   cursor: pointer
   @if $button-family
-    font-family: $button-family
+    font-family: var(--button-family)
+  font-size: var(--button-font-size)
   justify-content: center
-  padding-bottom: $button-padding-vertical
+  padding-bottom: var(--button-padding-vertical)
-  padding-left: $button-padding-horizontal
+  padding-left: var(--button-padding-horizontal)
-  padding-right: $button-padding-horizontal
+  padding-right: var(--button-padding-horizontal)
-  padding-top: $button-padding-vertical
+  padding-top: var(--button-padding-vertical)
   text-align: center
   white-space: nowrap
   strong
@@ -73,45 +99,45 @@ $button-colors: $colors !default
       height: 1.5em
       width: 1.5em
     &:first-child:not(:last-child)
-      +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false)
+      +ltr-property("margin", calc(-1 / 2 * #{var(--button-padding-horizontal, #{$button-padding-horizontal})} - #{var(--button-border-width, #{$button-border-width})}), false)
-      +ltr-property("margin", $button-padding-horizontal / 4)
+      +ltr-property("margin", calc(#{var(--button-padding-horizontal, #{$button-padding-horizontal})} / 4))
     &:last-child:not(:first-child)
-      +ltr-property("margin", $button-padding-horizontal / 4, false)
+      +ltr-property("margin", calc(#{var(--button-padding-horizontal, #{$button-padding-horizontal})} / 4), false)
-      +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}))
+      +ltr-property("margin", calc(-1 / 2 * #{var(--button-padding-horizontal, #{$button-padding-horizontal})} - #{var(--button-border-width, #{$button-border-width})}))
     &:first-child:last-child
-      margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
+      margin-left: calc(-1 / 2 * #{var(--button-padding-horizontal, #{$button-padding-horizontal})} - #{var(--button-border-width, #{$button-border-width})})
-      margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
+      margin-right: calc(-1 / 2 * #{var(--button-padding-horizontal, #{$button-padding-horizontal})} - #{var(--button-border-width, #{$button-border-width})})
   // States
   &:hover,
   &.is-hovered
-    border-color: $button-hover-border-color
+    border-color: var(--button-hover-border-color)
-    color: $button-hover-color
+    color: var(--button-hover-color)
   &:focus,
   &.is-focused
-    border-color: $button-focus-border-color
+    border-color: var(--button-focus-border-color)
-    color: $button-focus-color
+    color: var(--button-focus-color)
     &:not(:active)
-      box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
+      box-shadow: var(--button-focus-box-shadow-size, #{$button-focus-box-shadow-size}) var(--button-focus-box-shadow-color, #{$button-focus-box-shadow-color})
   &:active,
   &.is-active
-    border-color: $button-active-border-color
+    border-color: var(--button-active-border-color)
-    color: $button-active-color
+    color: var(--button-active-color)
   // Colors
   &.is-text
     background-color: transparent
     border-color: transparent
-    color: $button-text-color
+    color: var(--button-text-color)
-    text-decoration: $button-text-decoration
+    text-decoration: var(--button-text-decoration)
     &:hover,
     &.is-hovered,
     &:focus,
     &.is-focused
-      background-color: $button-text-hover-background-color
+      background-color: var(--button-text-hover-background-color)
-      color: $button-text-hover-color
+      color: var(--button-text-hover-color)
     &:active,
     &.is-active
       background-color: bulmaDarken($button-text-hover-background-color, 5%)
-      color: $button-text-hover-color
+      color: var(--button-text-hover-color)
     &[disabled],
     fieldset[disabled] &
       background-color: transparent
@@ -121,113 +147,117 @@ $button-colors: $colors !default
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
-      background-color: $color
+      background-color: var(--#{$name}, #{$color})
       border-color: transparent
-      color: $color-invert
+      color: var(--#{$name}-invert, #{$color-invert})
       &:hover,
       &.is-hovered
-        --hover-#{$name}-l: calc(#{var(--#{$name}-l)} + 10%)
+        --button-hover-background-l-delta: -2.5%
-        --button-hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--hover-#{$name}-l), var(--#{$name}-a))
+        --button-hover-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--button-hover-background-l-delta)})
+        --button-hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-hover-background-#{$name}-l), var(--#{$name}-a))
         background-color: var(--button-hover-background-color, #{bulmaDarken($color, 2.5%)})
         border-color: transparent
-        color: $color-invert
+        color: var(--#{$name}-invert, #{$color-invert})
       &:focus,
       &.is-focused
         border-color: transparent
-        color: $color-invert
+        color: var(--#{$name}-invert, #{$color-invert})
         &:not(:active)
-          box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25)
+          box-shadow: var(--button-focus-box-shadow-size, #{$button-focus-box-shadow-size}) bulmaRgba($color, 0.25)
       &:active,
       &.is-active
-        background-color: bulmaDarken($color, 5%)
+        --button-active-background-l-delta: -5%
+        --button-active-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--button-active-background-l-delta)})
+        --button-active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-active-background-#{$name}-l), var(--#{$name}-a))
+        background-color: var(--button-active-background-color, #{bulmaDarken($color, 5%)})
         border-color: transparent
-        color: $color-invert
+        color: var(--#{$name}-invert, #{$color-invert})
       &[disabled],
       fieldset[disabled] &
-        background-color: $color
+        background-color: var(--#{$name}, #{$color})
         border-color: transparent
         box-shadow: none
       &.is-inverted
-        background-color: $color-invert
+        background-color: var(--#{$name}-invert, #{$color-invert})
-        color: $color
+        color: var(--#{$name}, #{$color})
         &:hover,
         &.is-hovered
           background-color: bulmaDarken($color-invert, 5%)
         &[disabled],
         fieldset[disabled] &
-          background-color: $color-invert
+          background-color: var(--#{$name}-invert, #{$color-invert})
           border-color: transparent
           box-shadow: none
-          color: $color
+          color: var(--#{$name}, #{$color})
       &.is-loading
         &::after
-          border-color: transparent transparent $color-invert $color-invert !important
+          border-color: transparent transparent var(--#{$name}-invert, #{$color-invert}) var(--#{$name}-invert, #{$color-invert}) !important
       &.is-outlined
         background-color: transparent
-        border-color: $color
+        border-color: var(--#{$name}, #{$color})
-        color: $color
+        color: var(--#{$name}, #{$color})
         &:hover,
         &.is-hovered,
         &:focus,
         &.is-focused
-          background-color: $color
+          background-color: var(--#{$name}, #{$color})
-          border-color: $color
+          border-color: var(--#{$name}, #{$color})
-          color: $color-invert
+          color: var(--#{$name}-invert, #{$color-invert})
         &.is-loading
           &::after
-            border-color: transparent transparent $color $color !important
+            border-color: transparent transparent var(--#{$name}, #{$color}) var(--#{$name}, #{$color}) !important
           &:hover,
           &.is-hovered,
           &:focus,
           &.is-focused
             &::after
-              border-color: transparent transparent $color-invert $color-invert !important
+              border-color: transparent transparent var(--#{$name}-invert, #{$color-invert}) var(--#{$name}-invert, #{$color-invert}) !important
         &[disabled],
         fieldset[disabled] &
           background-color: transparent
-          border-color: $color
+          border-color: var(--#{$name}, #{$color})
           box-shadow: none
-          color: $color
+          color: var(--#{$name}, #{$color})
       &.is-inverted.is-outlined
         background-color: transparent
-        border-color: $color-invert
+        border-color: var(--#{$name}-invert, #{$color-invert})
-        color: $color-invert
+        color: var(--#{$name}-invert, #{$color-invert})
         &:hover,
         &.is-hovered,
         &:focus,
         &.is-focused
-          background-color: $color-invert
+          background-color: var(--#{$name}-invert, #{$color-invert})
-          color: $color
+          color: var(--#{$name}, #{$color})
         &.is-loading
           &:hover,
           &.is-hovered,
           &:focus,
           &.is-focused
             &::after
-              border-color: transparent transparent $color $color !important
+              border-color: transparent transparent var(--#{$name}, #{$color}) var(--#{$name}, #{$color}) !important
         &[disabled],
         fieldset[disabled] &
           background-color: transparent
-          border-color: $color-invert
+          border-color: var(--#{$name}-invert, #{$color-invert})
           box-shadow: none
-          color: $color-invert
+          color: var(--#{$name}-invert, #{$color-invert})
       // If light and dark colors are provided
       @if length($pair) >= 4
         $color-light: nth($pair, 3)
         $color-dark: nth($pair, 4)
         &.is-light
-          background-color: $color-light
+          background-color: var(--#{$name}-light, #{$color-light})
-          color: $color-dark
+          color: var(--#{$name}-dark, #{$color-dark})
           &:hover,
           &.is-hovered
             background-color: bulmaDarken($color-light, 2.5%)
             border-color: transparent
-            color: $color-dark
+            color: var(--#{$name}-dark, #{$color-dark})
           &:active,
           &.is-active
             background-color: bulmaDarken($color-light, 5%)
             border-color: transparent
-            color: $color-dark
+            color: var(--#{$name}-dark, #{$color-dark})
   // Sizes
   &.is-small
     +button-small
@@ -240,10 +270,10 @@ $button-colors: $colors !default
   // Modifiers
   &[disabled],
   fieldset[disabled] &
-    background-color: $button-disabled-background-color
+    background-color: var(--button-disabled-background-color)
-    border-color: $button-disabled-border-color
+    border-color: var(--button-disabled-border-color)
-    box-shadow: $button-disabled-shadow
+    box-shadow: var(--button-disabled-shadow)
-    opacity: $button-disabled-opacity
+    opacity: var(--button-disabled-opacity)
   &.is-fullwidth
     display: flex
     width: 100%
@@ -255,15 +285,15 @@ $button-colors: $colors !default
       +center(1em)
       position: absolute !important
   &.is-static
-    background-color: $button-static-background-color
+    background-color: var(--button-static-background-color)
-    border-color: $button-static-border-color
+    border-color: var(--button-static-border-color)
-    color: $button-static-color
+    color: var(--button-static-color)
     box-shadow: none
     pointer-events: none
   &.is-rounded
-    border-radius: $radius-rounded
+    border-radius: var(--radius-rounded, #{$radius-rounded})
-    padding-left: calc(#{$button-padding-horizontal} + 0.25em)
+    padding-left: calc(#{var(--button-padding-horizontal, #{$button-padding-horizontal})} + 0.25em)
-    padding-right: calc(#{$button-padding-horizontal} + 0.25em)
+    padding-right: calc(#{var(--button-padding-horizontal, #{$button-padding-horizontal})} + 0.25em)
 
 .buttons
   align-items: center

sass/themes/basic.sass

@@ -3,5 +3,4 @@
   --black-70: rgba(0, 0, 0, 0.7)
   --white: #{$white}
   // +registerCSSVarColor('primary', ($primary, $primary-invert, $primary-light, $primary-dark))
-  @each $name, $components in $colors
+  +registerCSSVarColors($colors)
-    +registerCSSVarColor($name, $components)

sass/utilities/functions.sass

@@ -161,32 +161,37 @@
 // bulmaDarken($color-invert, 5%)
 // bulmaRgba($color-invert, 0.9)
 // bulmaRgba($color-invert, 0.7)
-=registerCSSVarColor($name, $components, $fallback: null)
+=registerCSSVarColor($name, $components, $prefix: '')
   $color: nth($components, 1)
+  $base: $prefix + $name
 
-  --#{$name}-h: #{hue($color)}
+  --#{$base}-h: #{hue($color)}
-  --#{$name}-s: #{saturation($color)}
+  --#{$base}-s: #{saturation($color)}
-  --#{$name}-l: #{lightness($color)}
+  --#{$base}-l: #{lightness($color)}
-  --#{$name}-a: 1
+  --#{$base}-a: 1
-  --#{$name}: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--#{$name}-l), var(--#{$name}-a))
+  --#{$base}: hsla(var(--#{$base}-h), var(--#{$base}-s), var(--#{$base}-l), var(--#{$base}-a))
 
   // Invert color
-  --#{$name}-invert: #{findColorInvert($color)}
+  --#{$base}-invert: #{findColorInvert($color)}
 
   // Light color
   $light-l: 96%
   @if lightness($color) > 96%
     $light-l: lightness($color)
-  --#{$name}-light-l: #{$light-l}
+  --#{$base}-light-l: #{$light-l}
-  --#{$name}-light: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--#{$name}-light-l), var(--#{$name}-a))
+  --#{$base}-light: hsla(var(--#{$base}-h), var(--#{$base}-s), var(--#{$base}-light-l), var(--#{$base}-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}
+  --#{$base}-dark-l: #{$dark-l}
-  --#{$name}-dark: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--#{$name}-dark-l), var(--#{$name}-a))
+  --#{$base}-dark: hsla(var(--#{$base}-h), var(--#{$base}-s), var(--#{$base}-dark-l), var(--#{$base}-a))
+
+=registerCSSVarColors($colors, $prefix: '')
+  @each $name, $components in $colors
+    +registerCSSVarColor($name, $components, $prefix)
 
 @function assignCSSVar($name, $fallback)
   // +registerCSSVar($name, $fallback)