Style more button parts

sass/base/generic.sass

@@ -1,43 +1,74 @@
-$body-background-color: $scheme-main !default
+$body-background-color: var(--scheme-main, #{$scheme-main}) !default
 $body-size: 16px !default
 $body-min-width: 300px !default
 $body-rendering: optimizeLegibility !default
-$body-family: $family-primary !default
+$body-family: var(--family-primary, #{$family-primary}) !default
 $body-overflow-x: hidden !default
 $body-overflow-y: scroll !default
 
-$body-color: $text !default
+$body-color: var(--text, #{$text}) !default
 $body-font-size: 1em !default
-$body-weight: $weight-normal !default
+$body-weight: var(--weight-normal, #{$weight-normal}) !default
 $body-line-height: 1.5 !default
 
-$code-family: $family-code !default
+$code-family: var(--family-code, #{$family-code}) !default
 $code-padding: 0.25em 0.5em 0.25em !default
 $code-weight: normal !default
 $code-size: 0.875em !default
 
 $small-font-size: 0.875em !default
 
-$hr-background-color: $background !default
+$hr-background-color: var(--background, #{$background}) !default
 $hr-height: 2px !default
 $hr-margin: 1.5rem 0 !default
 
-$strong-color: $text-strong !default
-$strong-weight: $weight-bold !default
+$strong-color: var(--text-strong, #{$text-strong}) !default
+$strong-weight: var(--weight-bold, #{$weight-bold}) !default
 
 $pre-font-size: 0.875em !default
 $pre-padding: 1.25rem 1.5rem !default
 $pre-code-font-size: 1em !default
 
 html
-  background-color: $body-background-color
-  font-size: $body-size
+  --body-background-color: #{$body-background-color}
+  --body-size: #{$body-size}
+  --body-min-width: #{$body-min-width}
+  --body-overflow-x: #{$body-overflow-x}
+  --body-overflow-y: #{$body-overflow-y}
+  --body-rendering: #{$body-rendering}
+  --body-family: #{$body-family}
+  --code-family: #{$code-family}
+  --body-color: #{$body-color}
+  --body-font-size: #{$body-font-size}
+  --body-weight: #{$body-weight}
+  --body-line-height: #{$body-line-height}
+  --link: #{$link}
+  --link-hover: #{$link-hover}
+  --code-background: #{$code-background}
+  --code: #{$code}
+  --code-size: #{$code-size}
+  --code-weight: #{$code-weight}
+  --code-padding: #{$code-padding}
+  --hr-background-color: #{$hr-background-color}
+  --hr-height: #{$hr-height}
+  --hr-margin: #{$hr-margin}
+  --small-font-size: #{$small-font-size}
+  --strong-color: #{$strong-color}
+  --strong-weight: #{$strong-weight}
+  --pre-background: #{$pre-background}
+  --pre: #{$pre}
+  --pre-font-size: #{$pre-font-size}
+  --pre-padding: #{$pre-padding}
+  --pre-code-font-size: #{$pre-code-font-size}
+  --text-strong: #{$text-strong}
+  background-color: var(--body-background-color)
+  font-size: var(--body-size)
   -moz-osx-font-smoothing: grayscale
   -webkit-font-smoothing: antialiased
-  min-width: $body-min-width
-  overflow-x: $body-overflow-x
-  overflow-y: $body-overflow-y
-  text-rendering: $body-rendering
+  min-width: var(--body-min-width)
+  overflow-x: var(--body-overflow-x)
+  overflow-y: var(--body-overflow-y)
+  text-rendering: var(--body-rendering)
   text-size-adjust: 100%
 
 article,
@@ -54,44 +85,44 @@ button,
 input,
 select,
 textarea
-  font-family: $body-family
+  font-family: var(--body-family)
 
 code,
 pre
   -moz-osx-font-smoothing: auto
   -webkit-font-smoothing: auto
-  font-family: $code-family
+  font-family: var(--code-family)
 
 body
-  color: $body-color
-  font-size: $body-font-size
-  font-weight: $body-weight
-  line-height: $body-line-height
+  color: var(--body-color)
+  font-size: var(--body-font-size)
+  font-weight: var(--body-weight)
+  line-height: var(--body-line-height)
 
 // Inline
 
 a
-  color: $link
+  color: var(--link)
   cursor: pointer
   text-decoration: none
   strong
     color: currentColor
   &:hover
-    color: $link-hover
+    color: var(--link-hover)
 
 code
-  background-color: $code-background
-  color: $code
-  font-size: $code-size
-  font-weight: $code-weight
-  padding: $code-padding
+  background-color: var(--code-background)
+  color: var(--code)
+  font-size: var(--code-size)
+  font-weight: var(--code-weight)
+  padding: var(--code-padding)
 
 hr
-  background-color: $hr-background-color
+  background-color: var(--hr-background-color)
   border: none
   display: block
-  height: $hr-height
-  margin: $hr-margin
+  height: var(--hr-height)
+  margin: var(--hr-margin)
 
 img
   height: auto
@@ -102,15 +133,15 @@ input[type="radio"]
   vertical-align: baseline
 
 small
-  font-size: $small-font-size
+  font-size: var(--small-font-size)
 
 span
   font-style: inherit
   font-weight: inherit
 
 strong
-  color: $strong-color
-  font-weight: $strong-weight
+  color: var(--strong-color)
+  font-weight: var(--strong-weight)
 
 // Block
 
@@ -119,17 +150,17 @@ fieldset
 
 pre
   +overflow-touch
-  background-color: $pre-background
-  color: $pre
-  font-size: $pre-font-size
+  background-color: var(--pre-background)
+  color: var(--pre)
+  font-size: var(--pre-font-size)
   overflow-x: auto
-  padding: $pre-padding
+  padding: var(--pre-padding)
   white-space: pre
   word-wrap: normal
   code
     background-color: transparent
     color: currentColor
-    font-size: $pre-code-font-size
+    font-size: var(--pre-code-font-size)
     padding: 0
 
 table
@@ -139,4 +170,4 @@ table
     &:not([align])
       text-align: inherit
   th
-    color: $text-strong
+    color: var(--text-strong)

sass/components/breadcrumb.sass

@@ -17,7 +17,6 @@ $breadcrumb-item-separator-color: var(--border-hover, #{$border-hover}) !default
   --breadcrumb-item-separator-color: #{$breadcrumb-item-separator-color}
   --breadcrumb-item-padding-vertical: #{$breadcrumb-item-padding-vertical}
   --breadcrumb-item-padding-horizontal: #{$breadcrumb-item-padding-horizontal}
-
   @extend %block
   @extend %unselectable
   font-size: var(--breadcrumb-font-size)

sass/components/card.sass

@@ -39,7 +39,6 @@ $card-media-margin: var(--block-spacing, #{$block-spacing}) !default
   --card-footer-border-top: #{$card-footer-border-top}
   --card-footer-padding: #{$card-footer-padding}
   --card-media-margin: #{$card-media-margin}
-
   background-color: var(--card-background-color)
   box-shadow: var(--card-shadow)
   color: var(--card-color)

sass/components/dropdown.sass

@@ -35,7 +35,6 @@ $dropdown-divider-background-color: var(--border-light, #{$border-light}) !defau
   --dropdown-item-active-background-color: #{$dropdown-item-active-background-color}
   --dropdown-item-active-color: #{$dropdown-item-active-color}
   --dropdown-divider-background-color: #{$dropdown-divider-background-color}
-
   display: inline-flex
   position: relative
   vertical-align: top

sass/components/level.sass

@@ -2,7 +2,6 @@ $level-item-spacing: calc(var(--block-spacing, #{$block-spacing}) / 2) !default
 
 .level
   --level-item-spacing: #{$level-item-spacing}
-
   @extend %block
   align-items: center
   justify-content: space-between

sass/components/media.sass

@@ -6,7 +6,6 @@ $media-spacing-large: 1.5rem
   --media-border-color: #{$media-border-color}
   --media-spacing: #{$media-spacing}
   --media-spacing-large: #{$media-spacing-large}
-
   align-items: flex-start
   display: flex
   text-align: inherit

sass/components/menu.sass

@@ -36,7 +36,6 @@ $menu-label-spacing: 1em !default
   --menu-label-letter-spacing: #{$menu-label-letter-spacing}
   --menu-label-spacing: #{$menu-label-spacing}
   --menu-label-spacing: #{$menu-label-spacing}
-
   font-size: var(--menu-font-size)
   // Sizes
   &.is-small

sass/components/message.sass

@@ -37,7 +37,6 @@ $message-colors: $colors !default
   --message-body-pre-background-color: #{$message-body-pre-background-color}
   --message-body-pre-code-background-color: #{$message-body-pre-code-background-color}
   --message-header-body-border-width: #{$message-header-body-border-width}
-
   @extend %block
   background-color: var(--message-background-color)
   border-radius: var(--message-radius)

sass/components/modal.sass

@@ -52,7 +52,6 @@ $modal-card-body-padding: 20px !default
   --modal-card-foot-border-top: #{$modal-card-foot-border-top}
   --modal-card-body-background-color: #{$modal-card-body-background-color}
   --modal-card-body-padding: #{$modal-card-body-padding}
-
   @extend %overlay
   align-items: center
   display: none

sass/components/navbar.sass

@@ -96,9 +96,9 @@ $navbar-colors: $colors !default
   --navbar-dropdown-z: #{$navbar-dropdown-z}
   --navbar-dropdown-boxed-radius: #{$navbar-dropdown-boxed-radius}
   --navbar-dropdown-boxed-shadow: #{$navbar-dropdown-boxed-shadow}
+  --navbar-dropdown-offset: #{$navbar-dropdown-offset}
   --navbar-item-active-color: #{$navbar-item-active-color}
   --navbar-item-active-background-color: #{$navbar-item-active-background-color}
-
   background-color: var(--navbar-background-color)
   min-height: var(--navbar-height)
   position: relative
@@ -106,10 +106,8 @@ $navbar-colors: $colors !default
   @each $name, $pair in $navbar-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
-
     &.is-#{$name}
       --navbar-burger-color: var(--#{$name}-invert, #{$color-invert})
-
       background-color: var(--#{$name}, #{$color})
       color: var(--#{$name}-invert, #{$color-invert})
       .navbar-brand
@@ -128,7 +126,6 @@ $navbar-colors: $colors !default
       +from($navbar-breakpoint)
         --navbar-dropdown-item-active-background-color: var(--#{$name}, #{$color})
         --navbar-dropdown-item-active-color: var(--#{$name}-invert, #{$color-invert})
-
         .navbar-brand,
         .navbar-start,
         .navbar-end
@@ -187,7 +184,7 @@ body
 
 .navbar-burger
   color: var(--navbar-burger-color)
-  +hamburger($navbar-height)
+  +hamburger(var(--navbar-height))
   +ltr-property("margin", auto, false)
 
 .navbar-menu
@@ -421,7 +418,7 @@ a.navbar-item,
       display: block
       opacity: 0
       pointer-events: none
-      top: calc(100% + (#{$navbar-dropdown-offset}))
+      top: calc(100% + #{var(--navbar-dropdown-offset)})
       transform: translateY(-5px)
       transition-duration: var(--speed, #{$speed})
       transition-property: opacity, transform

sass/components/pagination.sass

@@ -51,11 +51,9 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
   --pagination-current-border-color: #{$pagination-current-border-color}
   --pagination-current-color: #{$pagination-current-color}
   --pagination-ellipsis-color: #{$pagination-ellipsis-color}
-
   @extend %block
   font-size: var(--pagination-font-size)
   margin: var(--pagination-margin)
-
   // Sizes
   &.is-small
     --pagination-font-size: var(--size-small, #{$size-small})

sass/components/panel.sass

@@ -54,7 +54,6 @@ $panel-colors: $colors !default
   --panel-block-active-icon-color: #{$panel-block-active-icon-color}
   --panel-block-hover-background-color: #{$panel-block-hover-background-color}
   --panel-icon-color: #{$panel-icon-color}
-
   border-radius: var(--panel-radius)
   box-shadow: var(--panel-shadow)
   font-size: var(--panel-font-size)
@@ -66,12 +65,12 @@ $panel-colors: $colors !default
     $color-invert: nth($components, 2)
     &.is-#{$name}
       .panel-heading
-        background-color: $color
-        color: $color-invert
+        background-color: var(--#{$name}, #{$color})
+        color: var(--#{$name}-invert, #{$color-invert})
       .panel-tabs a.is-active
-        border-bottom-color: $color
+        border-bottom-color: var(--#{$name}, #{$color})
       .panel-block.is-active .panel-icon
-        color: $color
+        color: var(--#{$name}, #{$color})
 
 .panel-tabs,
 .panel-block

sass/components/tabs.sass

@@ -53,10 +53,9 @@ $tabs-toggle-link-active-color: var(--link-invert, #{$link-invert}) !default
   --tabs-toggle-link-active-background-color: #{$tabs-toggle-link-active-background-color}
   --tabs-toggle-link-active-border-color: #{$tabs-toggle-link-active-border-color}
   --tabs-toggle-link-active-color: #{$tabs-toggle-link-active-color}
-
   @extend %block
-  +overflow-touch
   @extend %unselectable
+  +overflow-touch
   align-items: stretch
   display: flex
   font-size: var(--tabs-font-size)

sass/elements/box.sass

@@ -21,7 +21,6 @@ $box-link-active-shadow: inset 0 1px 2px $box-link-active-shadow-color, 0 0 0 1p
   --box-padding: #{$box-padding}
   --box-link-hover-shadow: #{$box-link-hover-shadow}
   --box-link-active-shadow: #{$box-link-active-shadow}
-
   @extend %block
   background-color: var(--box-background-color)
   border-radius: var(--box-radius)

sass/elements/button.sass

@@ -57,6 +57,8 @@ $button-colors: $colors !default
   --button-hover-border-color: #{$button-hover-border-color}
   --button-hover-color: #{$button-hover-color}
   --button-focus-border-color: #{$button-focus-border-color}
+  --button-focus-box-shadow-size: #{$button-focus-box-shadow-size}
+  --button-focus-box-shadow-color: #{$button-focus-box-shadow-color}
   --button-focus-color: #{$button-focus-color}
   --button-active-border-color: #{$button-active-border-color}
   --button-active-color: #{$button-active-color}
@@ -71,7 +73,6 @@ $button-colors: $colors !default
   --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: var(--button-background-color)
@@ -147,14 +148,20 @@ $button-colors: $colors !default
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
+      --button-hover-background-l-delta: -2.5%
+      --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))
+      --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))
+      --button-invert-hover-background-l-delta: -5%
+      --button-invert-hover-background-#{$name}-l: calc(#{var(--#{$name}-invert-l)} + #{var(--button-invert-hover-background-l-delta)})
+      --button-invert-hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-invert-hover-background-#{$name}-l), var(--#{$name}-a))
       background-color: var(--#{$name}, #{$color})
       border-color: transparent
       color: var(--#{$name}-invert, #{$color-invert})
       &:hover,
       &.is-hovered
-        --button-hover-background-l-delta: -2.5%
-        --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: var(--#{$name}-invert, #{$color-invert})
@@ -166,9 +173,6 @@ $button-colors: $colors !default
           box-shadow: var(--button-focus-box-shadow-size, #{$button-focus-box-shadow-size}) bulmaRgba($color, 0.25)
       &:active,
       &.is-active
-        --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: var(--#{$name}-invert, #{$color-invert})
@@ -246,16 +250,22 @@ $button-colors: $colors !default
         $color-light: nth($pair, 3)
         $color-dark: nth($pair, 4)
         &.is-light
+          --button-light-hover-background-l-delta: -2.5%
+          --button-light-hover-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--button-light-hover-background-l-delta)})
+          --button-light-hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-light-hover-background-#{$name}-l), var(--#{$name}-a))
+          --button-light-active-background-l-delta: -5%
+          --button-light-active-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--button-light-active-background-l-delta)})
+          --button-light-active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-light-active-background-#{$name}-l), var(--#{$name}-a))
           background-color: var(--#{$name}-light, #{$color-light})
           color: var(--#{$name}-dark, #{$color-dark})
           &:hover,
           &.is-hovered
-            background-color: bulmaDarken($color-light, 2.5%)
+            background-color: var(--button-light-hover-background-color, #{bulmaDarken($color-light, 2.5%)})
             border-color: transparent
             color: var(--#{$name}-dark, #{$color-dark})
           &:active,
           &.is-active
-            background-color: bulmaDarken($color-light, 5%)
+            background-color: var(--button-light-active-background-color, #{bulmaDarken($color-light, 5%)})
             border-color: transparent
             color: var(--#{$name}-dark, #{$color-dark})
   // Sizes

sass/elements/content.sass

@@ -36,7 +36,6 @@ $content-table-foot-cell-color: var(--text-strong, #{$text-strong}) !default
   --content-table-head-cell-color: #{$content-table-head-cell-color}
   --content-table-foot-cell-border-width: #{$content-table-foot-cell-border-width}
   --content-table-foot-cell-color: #{$content-table-foot-cell-color}
-
   @extend %block
   font-size: var(--content-font-size)
   // Inline

sass/elements/icon.sass

@@ -8,13 +8,11 @@ $icon-dimensions-large: 3rem !default
   --icon-dimensions-small: #{$icon-dimensions-small}
   --icon-dimensions-medium: #{$icon-dimensions-medium}
   --icon-dimensions-large: #{$icon-dimensions-large}
-
   align-items: center
   display: inline-flex
   justify-content: center
   height: var(--icon-dimensions)
   width: var(--icon-dimensions)
-
   // Sizes
   &.is-small
     --icon-dimensions: var(--icon-dimensions-small)

sass/elements/notification.sass

@@ -13,7 +13,6 @@ $notification-colors: $colors !default
   --notification-padding-ltr: #{$notification-padding-ltr}
   --notification-padding-rtl: #{$notification-padding-rtl}
   --notification-code-background-color: #{$notification-code-background-color}
-
   @extend %block
   background-color: var(--notification-background-color)
   border-radius: var(--notification-radius)

sass/elements/progress.sass

@@ -14,7 +14,6 @@ $progress-colors: $colors !default
   --progress-height: #{$progress-height}
   --progress-value-background-color: #{$progress-value-background-color}
   --progress-indeterminate-duration: #{$progress-indeterminate-duration}
-
   @extend %block
   -moz-appearance: none
   -webkit-appearance: none

sass/elements/table.sass

@@ -44,7 +44,6 @@ $table-colors: $colors !default
   --table-row-hover-background-color: #{$table-row-hover-background-color}
   --table-striped-row-even-background-color: #{$table-striped-row-even-background-color}
   --table-striped-row-even-hover-background-color: #{$table-striped-row-even-hover-background-color}
-
   @extend %block
   background-color: var(--table-body-background-color)
   color: var(--table-color)

sass/elements/title.sass

@@ -34,29 +34,13 @@ $subtitle-negative-margin: -1.25rem !default
     vertical-align: middle
 
 .title
-  // Approach A
-  // CSS Variable takes precedence, if theme is included
-  // --title-color: var(--text-strong, #{$title-color})
-  // color: var(--title-color)
-
-  // Approach B
-  // Sass Variable takes precedence
-  // Problem: --title-color is always set, so the fallback is never used
-  // --title-color: #{$title-color}
-  // color: var(--title-color, var(--text-strong))
-
-  // Approach C
-  // Sass variable references a CSS variable with fallback
-  // $title-color: var(--text-strong, #{$text-strong})
   --title-color: #{$title-color}
-  color: var(--title-color)
-
   --title-font-size: #{$title-size}
   --title-weight: #{$title-weight}
   --title-line-height: #{$title-line-height}
   --title-strong-color: #{$title-strong-color}
   --title-strong-weight: #{$title-strong-weight}
-
+  color: var(--title-color)
   font-size: var(--title-font-size)
   font-weight: var(--title-weight)
   line-height: var(--title-line-height)
@@ -84,7 +68,6 @@ $subtitle-negative-margin: -1.25rem !default
   --subtitle-line-height: #{$subtitle-line-height}
   --subtitle-strong-color: #{$subtitle-strong-color}
   --subtitle-strong-weight: #{$subtitle-strong-weight}
-
   color: var(--subtitle-color)
   font-size: var(--subtitle-font-size)
   font-weight: var(--subtitle-weight)
@@ -101,4 +84,4 @@ $subtitle-negative-margin: -1.25rem !default
   @each $size in $sizes
     $i: index($sizes, $size)
     &.is-#{$i}
-      --subtitle-font-size: $size
+      font-size: $size

sass/form/checkbox-radio.sass

@@ -1,7 +1,6 @@
 %checkbox-radio
   --checkbox-radio-hover-color: #{$input-hover-color}
   --checkbox-radio-disabled-color: #{$input-disabled-color}
-
   cursor: pointer
   display: inline-block
   line-height: 1.25

sass/form/file.sass

@@ -24,7 +24,6 @@ $file-colors: $form-colors !default
   --file-name-border-style: #{$file-name-border-style}
   --file-name-border-width: #{$file-name-border-width}
   --file-name-max-width: #{$file-name-max-width}
-
   @extend %unselectable
   align-items: stretch
   display: flex
@@ -37,27 +36,27 @@ $file-colors: $form-colors !default
     $color-invert: nth($pair, 2)
     &.is-#{$name}
       .file-cta
-        background-color: $color
+        background-color: var(--#{$name} #{$color})
         border-color: transparent
-        color: $color-invert
+        color: var(--#{$name}-invert, #{$color-invert})
       &:hover,
       &.is-hovered
         .file-cta
           background-color: bulmaDarken($color, 2.5%)
           border-color: transparent
-          color: $color-invert
+          color: var(--#{$name}-invert, #{$color-invert})
       &:focus,
       &.is-focused
         .file-cta
           border-color: transparent
           box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
-          color: $color-invert
+          color: var(--#{$name}-invert, #{$color-invert})
       &:active,
       &.is-active
         .file-cta
           background-color: bulmaDarken($color, 5%)
           border-color: transparent
-          color: $color-invert
+          color: var(--#{$name}-invert, #{$color-invert})
   // Sizes
   &.is-small
     --file-font-size: var(--size-small, #{$size-small})

sass/form/input-textarea.sass

@@ -53,7 +53,6 @@ $textarea-colors: $form-colors !default
   --textarea-padding: #{$textarea-padding}
   --textarea-max-height: #{$textarea-max-height}
   --textarea-min-height: #{$textarea-min-height}
-
   @extend %input-textarea
   display: block
   max-width: 100%

sass/form/select.sass

@@ -6,13 +6,12 @@ $select-colors: $form-colors !default
   --select-hover-color: #{$input-hover-color}
   --select-disabled-color: #{$input-disabled-color}
   --select-focus-box-shadow-size: #{$input-focus-box-shadow-size}
-
   display: inline-block
   max-width: 100%
   position: relative
   vertical-align: top
   &:not(.is-multiple)
-    height: $input-height
+    height: var(--input-height)
   &:not(.is-multiple):not(.is-loading)
     &::after
       @extend %arrow

sass/form/tools.sass

@@ -12,7 +12,6 @@ $label-colors: $form-colors !default
   --label-color: #{$label-color}
   --label-font-size: #{$label-font-size}
   --label-font-weight: #{$label-weight}
-
   color: var(--label-color)
   display: block
   font-size: var(--label-font-size)
@@ -21,15 +20,14 @@ $label-colors: $form-colors !default
     margin-bottom: 0.5em
   // Sizes
   &.is-small
-    font-size: $size-small
+    font-size: var(--size-small, #{$size-small})
   &.is-medium
-    font-size: $size-medium
+    font-size: var(--size-medium, #{$size-medium})
   &.is-large
-    font-size: $size-large
+    font-size: var(--size-large, #{$size-large})
 
 .help
   --help-font-size: #{$help-size}
-
   display: block
   font-size: var(--help-font-size)
   margin-top: 0.25rem

sass/helpers/flexbox.sass

@@ -1,35 +1,35 @@
 $flex-directions-values: row, row-reverse, column, column-reverse
 @each $value in $flex-directions-values
-    .is-flex-direction-#{$value}
-        flex-direction: $value !important
+  .is-flex-direction-#{$value}
+    flex-direction: $value !important
 
 $flex-wrap-values: nowrap, wrap, wrap-reverse
 @each $value in $flex-wrap-values
-    .is-flex-wrap-#{$value}
-        flex-wrap: $value !important
+  .is-flex-wrap-#{$value}
+    flex-wrap: $value !important
 
 $justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right
 @each $value in $justify-content-values
-    .is-justify-content-#{$value}
-        justify-content: $value !important
+  .is-justify-content-#{$value}
+    justify-content: $value !important
 
 $align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline
 @each $value in $align-content-values
-    .is-align-content-#{$value}
-        align-content: $value !important
+  .is-align-content-#{$value}
+    align-content: $value !important
 
 $align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end
 @each $value in $align-items-values
-    .is-align-items-#{$value}
-        align-items: $value !important
+  .is-align-items-#{$value}
+    align-items: $value !important
 
 $align-self-values: auto, flex-start, flex-end, center, baseline, stretch
 @each $value in $align-self-values
-    .is-align-self-#{$value}
-        align-self: $value !important
+  .is-align-self-#{$value}
+    align-self: $value !important
 
 $flex-operators: grow, shrink
 @each $operator in $flex-operators
-    @for $i from 0 through 5
-        .is-flex-#{$operator}-#{$i}
-            flex-#{$operator}: $i !important
+  @for $i from 0 through 5
+    .is-flex-#{$operator}-#{$i}
+      flex-#{$operator}: $i !important

sass/layout/footer.sass

@@ -6,7 +6,6 @@ $footer-padding: 3rem 1.5rem 6rem !default
   --footer-background-color: #{$footer-background-color}
   --footer-padding: #{$footer-padding}
   --footer-color: #{$footer-color}
-
   background-color: var(--footer-background-color)
   padding: var(--footer-padding)
   @if $footer-color

sass/layout/hero.sass

@@ -11,7 +11,6 @@ $hero-colors: $colors !default
   --hero-body-padding-small: #{$hero-body-padding-small}
   --hero-body-padding-medium: #{$hero-body-padding-medium}
   --hero-body-padding-large: #{$hero-body-padding-large}
-
   align-items: stretch
   display: flex
   flex-direction: column
@@ -26,21 +25,21 @@ $hero-colors: $colors !default
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
-      background-color: $color
-      color: $color-invert
+      background-color: var(--#{$name}, #{$color})
+      color: var(--#{$name}-invert, #{$color-invert})
       a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
       strong
         color: inherit
       .title
-        color: $color-invert
+        color: var(--#{$name}-invert, #{$color-invert})
       .subtitle
         color: bulmaRgba($color-invert, 0.9)
         a:not(.button),
         strong
-          color: $color-invert
+          color: var(--#{$name}-invert, #{$color-invert})
       .navbar-menu
         +touch
-          background-color: $color
+          background-color: var(--#{$name}, #{$color})
       .navbar-item,
       .navbar-link
         color: bulmaRgba($color-invert, 0.7)
@@ -49,10 +48,10 @@ $hero-colors: $colors !default
         &:hover,
         &.is-active
           background-color: bulmaDarken($color, 5%)
-          color: $color-invert
+          color: var(--#{$name}-invert, #{$color-invert})
       .tabs
         a
-          color: $color-invert
+          color: var(--#{$name}-invert, #{$color-invert})
           opacity: 0.9
           &:hover
             opacity: 1
@@ -62,15 +61,15 @@ $hero-colors: $colors !default
         &.is-boxed,
         &.is-toggle
           a
-            color: $color-invert
+            color: var(--#{$name}-invert, #{$color-invert})
             &:hover
               background-color: bulmaRgba($scheme-invert, 0.1)
           li.is-active a
             &,
             &:hover
-              background-color: $color-invert
-              border-color: $color-invert
-              color: $color
+              background-color: var(--#{$name}-invert, #{$color-invert})
+              border-color: var(--#{$name}-invert, #{$color-invert})
+              color: var(--#{$name}, #{$color})
       // Modifiers
       @if type-of($color) == 'color'
         &.is-bold

sass/layout/section.sass

@@ -6,7 +6,6 @@ $section-padding-large: 18rem 1.5rem !default
   --section-padding: #{$section-padding}
   --section-padding-medium: #{$section-padding-medium}
   --section-padding-large: #{$section-padding-large}
-
   padding: var(--section-padding)
   // Responsiveness
   +desktop

sass/themes/basic.sass

@@ -2,5 +2,5 @@
   --black: #{$black}
   --black-70: rgba(0, 0, 0, 0.7)
   --white: #{$white}
-  // +registerCSSVarColor('primary', ($primary, $primary-invert, $primary-light, $primary-dark))
   +registerCSSVarColors($colors)
+  +registerCSSVarColors($shades)

sass/utilities/controls.sass

@@ -13,7 +13,7 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
   -moz-appearance: none
   -webkit-appearance: none
   align-items: center
-  border: $control-border-width solid transparent
+  border: var(--control-border-width, #{$control-border-width}) solid transparent
   border-radius: var(--control-radius, #{$control-radius})
   box-shadow: none
   display: inline-flex

sass/utilities/functions.sass

@@ -79,14 +79,14 @@
 @function findColorInvert($color, $fallback: null)
   @if type-of($color) == 'color'
     @if (colorLuminance($color) > 0.55)
-      @return var(--black-70, rgba(0, 0, 0, 0.7))
+      @return rgba(0, 0, 0, 0.7)
     @else
-      @return var(--white, #fff)
+      @return #fff
   @else if type-of($fallback) == 'color'
     @if (colorLuminance($fallback) > 0.55)
-      @return var(--black-70, rgba(0, 0, 0, 0.7))
+      @return rgba(0, 0, 0, 0.7)
     @else
-      @return var(--white, #fff)
+      @return #fff
   @return $color
 
 @function findLightColor($color, $fallback: null)

sass/utilities/mixins.sass

@@ -16,20 +16,23 @@
     top: calc(50% - (#{$width} / 2))
 
 =fa($size, $dimensions)
+  --fa-dimensions: #{$dimensions}
+  --fa-font-size: #{$size}
   display: inline-block
-  font-size: $size
-  height: $dimensions
-  line-height: $dimensions
+  font-size: var(--fa-font-size)
+  height: var(--fa-dimensions)
+  line-height: var(--fa-dimensions)
   text-align: center
   vertical-align: top
-  width: $dimensions
+  width: var(--fa-dimensions)
 
 =hamburger($dimensions)
+  --hamburger-dimensions: #{$dimensions}
   cursor: pointer
   display: block
-  height: $dimensions
+  height: var(--hamburger-dimensions)
   position: relative
-  width: $dimensions
+  width: var(--hamburger-dimensions)
   span
     background-color: currentColor
     display: block
@@ -37,9 +40,9 @@
     left: calc(50% - 8px)
     position: absolute
     transform-origin: center
-    transition-duration: $speed
+    transition-duration: var(--speed, #{$speed})
     transition-property: background-color, opacity, transform
-    transition-timing-function: $easing
+    transition-timing-function: var(--easing, #{$easing})
     width: 16px
     &:nth-child(1)
       top: calc(50% - 6px)
@@ -165,7 +168,8 @@
   +unselectable
 
 =arrow($color: transparent)
-  border: 3px solid $color
+  --arrow-color: #{$color}
+  border: 3px solid var(--arrow-color)
   border-radius: 2px
   border-right: 0
   border-top: 0
@@ -184,8 +188,9 @@
   +arrow
 
 =block($spacing: $block-spacing)
+  --block-spacing: #{$spacing}
   &:not(:last-child)
-    margin-bottom: $spacing
+    margin-bottom: var(--block-spacing)
 
 %block
   +block
@@ -260,9 +265,10 @@
   +delete
 
 =loader
+  --loader-border-color: var(--grey-lighter, #{$grey-lighter})
   animation: spinAround 500ms infinite linear
-  border: 2px solid $grey-lighter
-  border-radius: $radius-rounded
+  border: 2px solid var(--loader-border-color)
+  border-radius: var(--radius-rounded, #{$radius-rounded})
   border-right-color: transparent
   border-top-color: transparent
   content: ""