From 591915e0e110558fbd19a8b8e6bebf0fa45a73a6 Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sat, 22 Aug 2020 11:32:55 +0200
Subject: [PATCH] Add CSS vars to navbar

---
 sass/components/modal.sass  |  84 +++++++++------
 sass/components/navbar.sass | 206 +++++++++++++++++++++---------------
 2 files changed, 176 insertions(+), 114 deletions(-)

diff --git a/sass/components/modal.sass b/sass/components/modal.sass
index f352744a..aaa29b30 100644
--- a/sass/components/modal.sass
+++ b/sass/components/modal.sass
@@ -1,6 +1,6 @@
 $modal-z: 40 !default
 
-$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default
+$modal-background-background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.86) !default
 
 $modal-content-width: 640px !default
 $modal-content-margin-mobile: 20px !default
@@ -13,22 +13,46 @@ $modal-close-top: 20px !default
 
 $modal-card-spacing: 40px !default
 
-$modal-card-head-background-color: $background !default
+$modal-card-head-background-color: var(--background, #{$background}) !default
 $modal-card-head-border-bottom: 1px solid $border !default
 $modal-card-head-padding: 20px !default
-$modal-card-head-radius: $radius-large !default
+$modal-card-head-radius: var(--radius-large, #{$radius-large}) !default
 
-$modal-card-title-color: $text-strong !default
+$modal-card-title-color: var(--text-strong, #{$text-strong}) !default
 $modal-card-title-line-height: 1 !default
 $modal-card-title-size: $size-4 !default
 
-$modal-card-foot-radius: $radius-large !default
+$modal-card-foot-radius: var(--radius-large, #{$radius-large}) !default
 $modal-card-foot-border-top: 1px solid $border !default
 
-$modal-card-body-background-color: $scheme-main !default
+$modal-card-body-background-color: var(--scheme-main, #{$scheme-main}) !default
 $modal-card-body-padding: 20px !default
 
 .modal
+  --modal-z: #{$modal-z}
+  --modal-background-background-color: #{$modal-background-background-color}
+  --modal-content-width: #{$modal-content-width}
+  --modal-content-margin-mobile: #{$modal-content-margin-mobile}
+  --modal-content-spacing-mobile: #{$modal-content-spacing-mobile}
+  --modal-content-spacing-tablet: #{$modal-content-spacing-tablet}
+  --modal-close-dimensions: #{$modal-close-dimensions}
+  --modal-close-right: #{$modal-close-right}
+  --modal-close-top: #{$modal-close-top}
+  --modal-card-spacing: #{$modal-card-spacing}
+  --modal-card-head-background-color: #{$modal-card-head-background-color}
+  --modal-card-head-padding: #{$modal-card-head-padding}
+  --modal-card-head-border-bottom: #{$modal-card-head-border-bottom}
+  --modal-card-head-radius: #{$modal-card-head-radius}
+  --modal-card-head-radius: #{$modal-card-head-radius}
+  --modal-card-title-color: #{$modal-card-title-color}
+  --modal-card-title-size: #{$modal-card-title-size}
+  --modal-card-title-line-height: #{$modal-card-title-line-height}
+  --modal-card-foot-radius: #{$modal-card-foot-radius}
+  --modal-card-foot-radius: #{$modal-card-foot-radius}
+  --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
@@ -36,78 +60,78 @@ $modal-card-body-padding: 20px !default
   justify-content: center
   overflow: hidden
   position: fixed
-  z-index: $modal-z
+  z-index: var(--modal-z)
   // Modifiers
   &.is-active
     display: flex
 
 .modal-background
   @extend %overlay
-  background-color: $modal-background-background-color
+  background-color: var(--modal-background-background-color)
 
 .modal-content,
 .modal-card
-  margin: 0 $modal-content-margin-mobile
-  max-height: calc(100vh - #{$modal-content-spacing-mobile})
+  margin: 0 var(--modal-content-margin-mobile)
+  max-height: calc(100vh - #{var(--modal-content-spacing-mobile)})
   overflow: auto
   position: relative
   width: 100%
   // Responsiveness
   +tablet
     margin: 0 auto
-    max-height: calc(100vh - #{$modal-content-spacing-tablet})
-    width: $modal-content-width
+    max-height: calc(100vh - #{var(--modal-content-spacing-tablet)})
+    width: var(--modal-content-width)
 
 .modal-close
   @extend %delete
   background: none
-  height: $modal-close-dimensions
+  height: var(--modal-close-dimensions)
   position: fixed
-  +ltr-position($modal-close-right)
-  top: $modal-close-top
-  width: $modal-close-dimensions
+  +ltr-position(var(--modal-close-right))
+  top: var(--modal-close-top)
+  width: var(--modal-close-dimensions)
 
 .modal-card
   display: flex
   flex-direction: column
-  max-height: calc(100vh - #{$modal-card-spacing})
+  max-height: calc(100vh - #{var(--modal-card-spacing)})
   overflow: hidden
   -ms-overflow-y: visible
 
 .modal-card-head,
 .modal-card-foot
   align-items: center
-  background-color: $modal-card-head-background-color
+  background-color: var(--modal-card-head-background-color)
   display: flex
   flex-shrink: 0
   justify-content: flex-start
-  padding: $modal-card-head-padding
+  padding: var(--modal-card-head-padding)
   position: relative
 
 .modal-card-head
-  border-bottom: $modal-card-head-border-bottom
-  border-top-left-radius: $modal-card-head-radius
-  border-top-right-radius: $modal-card-head-radius
+  border-bottom: var(--modal-card-head-border-bottom)
+  border-top-left-radius: var(--modal-card-head-radius)
+  border-top-right-radius: var(--modal-card-head-radius)
 
 .modal-card-title
-  color: $modal-card-title-color
+  color: var(--modal-card-title-color)
   flex-grow: 1
   flex-shrink: 0
-  font-size: $modal-card-title-size
-  line-height: $modal-card-title-line-height
+  font-size: var(--modal-card-title-size)
+  line-height: var(--modal-card-title-line-height)
 
 .modal-card-foot
-  border-bottom-left-radius: $modal-card-foot-radius
-  border-bottom-right-radius: $modal-card-foot-radius
-  border-top: $modal-card-foot-border-top
+  border-bottom-left-radius: var(--modal-card-foot-radius)
+  border-bottom-right-radius: var(--modal-card-foot-radius)
+  border-top: var(--modal-card-foot-border-top)
   .button
     &:not(:last-child)
       +ltr-property("margin", 0.5em)
 
 .modal-card-body
   +overflow-touch
-  background-color: $modal-card-body-background-color
+  background-color: var(--modal-card-body-background-color)
   flex-grow: 1
   flex-shrink: 1
   overflow: auto
-  padding: $modal-card-body-padding
+  padding: var(--modal-card-body-padding)
diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index a0fe1ef3..53b3d87c 100644
--- a/sass/components/navbar.sass
+++ b/sass/components/navbar.sass
@@ -1,6 +1,6 @@
-$navbar-background-color: $scheme-main !default
+$navbar-background-color: var(--scheme-main, #{$scheme-main}) !default
 $navbar-box-shadow-size: 0 2px 0 0 !default
-$navbar-box-shadow-color: $background !default
+$navbar-box-shadow-color: var(--background, #{$background}) !default
 $navbar-height: 3.25rem !default
 $navbar-padding-vertical: 1rem !default
 $navbar-padding-horizontal: 2rem !default
@@ -8,41 +8,41 @@ $navbar-z: 30 !default
 $navbar-fixed-z: 30 !default
 $navbar-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
 
-$navbar-item-color: $text !default
-$navbar-item-hover-color: $link !default
-$navbar-item-hover-background-color: $scheme-main-bis !default
-$navbar-item-active-color: $scheme-invert !default
+$navbar-item-color: var(--text, #{$text}) !default
+$navbar-item-hover-color: var(--link, #{$link}) !default
+$navbar-item-hover-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default
+$navbar-item-active-color: var(--scheme-invert, #{$scheme-invert}) !default
 $navbar-item-active-background-color: transparent !default
 $navbar-item-img-max-height: 1.75rem !default
 
-$navbar-burger-color: $navbar-item-color !default
+$navbar-burger-color: var(--navbar-item-color, #{$navbar-item-color}) !default
 
 $navbar-tab-hover-background-color: transparent !default
-$navbar-tab-hover-border-bottom-color: $link !default
-$navbar-tab-active-color: $link !default
+$navbar-tab-hover-border-bottom-color: var(--link, #{$link}) !default
+$navbar-tab-active-color: var(--link, #{$link}) !default
 $navbar-tab-active-background-color: transparent !default
-$navbar-tab-active-border-bottom-color: $link !default
+$navbar-tab-active-border-bottom-color: var(--link, #{$link}) !default
 $navbar-tab-active-border-bottom-style: solid !default
 $navbar-tab-active-border-bottom-width: 3px !default
 
-$navbar-dropdown-background-color: $scheme-main !default
+$navbar-dropdown-background-color: var(--scheme-main, #{$scheme-main}) !default
 $navbar-dropdown-border-top: 2px solid $border !default
 $navbar-dropdown-offset: -4px !default
-$navbar-dropdown-arrow: $link !default
-$navbar-dropdown-radius: $radius-large !default
+$navbar-dropdown-arrow: var(--link, #{$link}) !default
+$navbar-dropdown-radius: var(--radius-large, #{$radius-large}) !default
 $navbar-dropdown-z: 20 !default
 
-$navbar-dropdown-boxed-radius: $radius-large !default
+$navbar-dropdown-boxed-radius: var(--radius-large, #{$radius-large}) !default
 $navbar-dropdown-boxed-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
 $navbar-dropdown-boxed-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
 $navbar-dropdown-boxed-shadow: 0 8px 8px $navbar-dropdown-boxed-shadow-color, 0 0 0 1px $navbar-dropdown-boxed-shadow-color-bis !default
 
-$navbar-dropdown-item-hover-color: $scheme-invert !default
-$navbar-dropdown-item-hover-background-color: $background !default
-$navbar-dropdown-item-active-color: $link !default
-$navbar-dropdown-item-active-background-color: $background !default
+$navbar-dropdown-item-hover-color: var(--scheme-invert, #{$scheme-invert}) !default
+$navbar-dropdown-item-hover-background-color: var(--background, #{$background}) !default
+$navbar-dropdown-item-active-color: var(--link, #{$link}) !default
+$navbar-dropdown-item-active-background-color: var(--background, #{$background}) !default
 
-$navbar-divider-background-color: $background !default
+$navbar-divider-background-color: var(--background, #{$background}) !default
 $navbar-divider-height: 2px !default
 
 $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
@@ -53,13 +53,51 @@ $navbar-breakpoint: $desktop !default
   left: 0
   position: fixed
   right: 0
-  z-index: $navbar-fixed-z
+  z-index: var(--navbar-fixed-z)
 
 .navbar
-  background-color: $navbar-background-color
-  min-height: $navbar-height
+  --navbar-fixed-z: #{$navbar-fixed-z}
+  --navbar-shadow-color: #{$navbar-shadow-color}
+  --navbar-background-color: #{$navbar-background-color}
+  --navbar-box-shadow-size: #{$navbar-box-shadow-size}
+  --navbar-box-shadow-color: #{$navbar-box-shadow-color}
+  --navbar-bottom-box-shadow-size: #{$navbar-bottom-box-shadow-size}
+  --navbar-height: #{$navbar-height}
+  --navbar-padding-vertical: #{$navbar-padding-vertical}
+  --navbar-padding-horizontal: #{$navbar-padding-horizontal}
+  --navbar-z: #{$navbar-z}
+  --navbar-burger-color: #{$navbar-burger-color}
+  --navbar-item-color: #{$navbar-item-color}
+  --navbar-item-hover-background-color: #{$navbar-item-hover-background-color}
+  --navbar-item-hover-color: #{$navbar-item-hover-color}
+  --navbar-item-img-max-height: #{$navbar-item-img-max-height}
+  --navbar-tab-hover-background-color: #{$navbar-tab-hover-background-color}
+  --navbar-tab-hover-border-bottom-color: #{$navbar-tab-hover-border-bottom-color}
+  --navbar-tab-active-background-color: #{$navbar-tab-active-background-color}
+  --navbar-tab-active-border-bottom-color: #{$navbar-tab-active-border-bottom-color}
+  --navbar-tab-active-border-bottom-style: #{$navbar-tab-active-border-bottom-style}
+  --navbar-tab-active-border-bottom-width: #{$navbar-tab-active-border-bottom-width}
+  --navbar-tab-active-color: #{$navbar-tab-active-color}
+  --navbar-dropdown-arrow: #{$navbar-dropdown-arrow}
+  --navbar-divider-background-color: #{$navbar-divider-background-color}
+  --navbar-divider-height: #{$navbar-divider-height}
+  --navbar-dropdown-item-hover-background-color: #{$navbar-dropdown-item-hover-background-color}
+  --navbar-dropdown-item-hover-color: #{$navbar-dropdown-item-hover-color}
+  --navbar-dropdown-item-active-background-color: #{$navbar-dropdown-item-active-background-color}
+  --navbar-dropdown-item-active-color: #{$navbar-dropdown-item-active-color}
+  --navbar-dropdown-border-top: #{$navbar-dropdown-border-top}
+  --navbar-dropdown-background-color: #{$navbar-dropdown-background-color}
+  --navbar-dropdown-radius: #{$navbar-dropdown-radius}
+  --navbar-dropdown-z: #{$navbar-dropdown-z}
+  --navbar-dropdown-boxed-radius: #{$navbar-dropdown-boxed-radius}
+  --navbar-dropdown-boxed-shadow: #{$navbar-dropdown-boxed-shadow}
+  --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
-  z-index: $navbar-z
+  z-index: var(--navbar-z)
   @each $name, $pair in $colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
@@ -111,33 +149,33 @@ $navbar-breakpoint: $desktop !default
   & > .container
     align-items: stretch
     display: flex
-    min-height: $navbar-height
+    min-height: var(--navbar-height)
     width: 100%
   &.has-shadow
-    box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
+    box-shadow: var(--navbar-box-shadow-size) var(--navbar-box-shadow-color)
   &.is-fixed-bottom,
   &.is-fixed-top
     +navbar-fixed
   &.is-fixed-bottom
     bottom: 0
     &.has-shadow
-      box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
+      box-shadow: var(--navbar-bottom-box-shadow-size) var(--navbar-box-shadow-color)
   &.is-fixed-top
     top: 0
 
 html,
 body
   &.has-navbar-fixed-top
-    padding-top: $navbar-height
+    padding-top: var(--navbar-height)
   &.has-navbar-fixed-bottom
-    padding-bottom: $navbar-height
+    padding-bottom: var(--navbar-height)
 
 .navbar-brand,
 .navbar-tabs
   align-items: stretch
   display: flex
   flex-shrink: 0
-  min-height: $navbar-height
+  min-height: var(--navbar-height)
 
 .navbar-brand
   a.navbar-item
@@ -152,7 +190,7 @@ body
   overflow-y: hidden
 
 .navbar-burger
-  color: $navbar-burger-color
+  color: var(--navbar-burger-color)
   +hamburger($navbar-height)
   +ltr-property("margin", auto, false)
 
@@ -161,7 +199,7 @@ body
 
 .navbar-item,
 .navbar-link
-  color: $navbar-item-color
+  color: var(--navbar-item-color)
   display: block
   line-height: 1.5
   padding: 0.5rem 0.75rem
@@ -178,14 +216,14 @@ a.navbar-item,
   &:focus-within,
   &:hover,
   &.is-active
-    background-color: $navbar-item-hover-background-color
-    color: $navbar-item-hover-color
+    background-color: var(--navbar-item-hover-background-color)
+    color: var(--navbar-item-hover-color)
 
 .navbar-item
   flex-grow: 0
   flex-shrink: 0
   img
-    max-height: $navbar-item-img-max-height
+    max-height: var(--navbar-item-img-max-height)
   &.has-dropdown
     padding: 0
   &.is-expanded
@@ -193,19 +231,19 @@ a.navbar-item,
     flex-shrink: 1
   &.is-tab
     border-bottom: 1px solid transparent
-    min-height: $navbar-height
+    min-height: var(--navbar-height)
     padding-bottom: calc(0.5rem - 1px)
     &:focus,
     &:hover
-      background-color: $navbar-tab-hover-background-color
-      border-bottom-color: $navbar-tab-hover-border-bottom-color
+      background-color: var(--navbar-tab-hover-background-color)
+      border-bottom-color: var(--navbar-tab-hover-border-bottom-color)
     &.is-active
-      background-color: $navbar-tab-active-background-color
-      border-bottom-color: $navbar-tab-active-border-bottom-color
-      border-bottom-style: $navbar-tab-active-border-bottom-style
-      border-bottom-width: $navbar-tab-active-border-bottom-width
-      color: $navbar-tab-active-color
-      padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
+      background-color: var(--navbar-tab-active-background-color)
+      border-bottom-color: var(--navbar-tab-active-border-bottom-color)
+      border-bottom-style: var(--navbar-tab-active-border-bottom-style)
+      border-bottom-width: var(--navbar-tab-active-border-bottom-width)
+      color: var(--navbar-tab-active-color)
+      padding-bottom: calc(0.5rem - #{var(--navbar-tab-active-border-bottom-width)})
 
 .navbar-content
   flex-grow: 1
@@ -215,7 +253,7 @@ a.navbar-item,
   +ltr-property("padding", 2.5em)
   &::after
     @extend %arrow
-    border-color: $navbar-dropdown-arrow
+    border-color: var(--navbar-dropdown-arrow)
     margin-top: -0.375em
     +ltr-position(1.125em)
 
@@ -228,10 +266,10 @@ a.navbar-item,
     padding-right: 1.5rem
 
 .navbar-divider
-  background-color: $navbar-divider-background-color
+  background-color: var(--navbar-divider-background-color)
   border: none
   display: none
-  height: $navbar-divider-height
+  height: var(--navbar-divider-height)
   margin: 0.5rem 0
 
 +until($navbar-breakpoint)
@@ -246,8 +284,8 @@ a.navbar-item,
     &::after
       display: none
   .navbar-menu
-    background-color: $navbar-background-color
-    box-shadow: 0 8px 16px $navbar-shadow-color
+    background-color: var(--navbar-background-color)
+    box-shadow: 0 8px 16px var(--navbar-shadow-color)
     padding: 0.5rem 0
     &.is-active
       display: block
@@ -259,21 +297,21 @@ a.navbar-item,
     &.is-fixed-bottom-touch
       bottom: 0
       &.has-shadow
-        box-shadow: 0 -2px 3px $navbar-shadow-color
+        box-shadow: 0 -2px 3px var(--navbar-shadow-color)
     &.is-fixed-top-touch
       top: 0
     &.is-fixed-top,
     &.is-fixed-top-touch
       .navbar-menu
         +overflow-touch
-        max-height: calc(100vh - #{$navbar-height})
+        max-height: calc(100vh - #{var(--navbar-height)})
         overflow: auto
   html,
   body
     &.has-navbar-fixed-top-touch
-      padding-top: $navbar-height
+      padding-top: var(--navbar-height)
     &.has-navbar-fixed-bottom-touch
-      padding-bottom: $navbar-height
+      padding-bottom: var(--navbar-height)
 
 +from($navbar-breakpoint)
   .navbar,
@@ -283,15 +321,15 @@ a.navbar-item,
     align-items: stretch
     display: flex
   .navbar
-    min-height: $navbar-height
+    min-height: var(--navbar-height)
     &.is-spaced
-      padding: $navbar-padding-vertical $navbar-padding-horizontal
+      padding: var(--navbar-padding-vertical) var(--navbar-padding-horizontal)
       .navbar-start,
       .navbar-end
         align-items: center
       a.navbar-item,
       .navbar-link
-        border-radius: $radius
+        border-radius: var(--radius, #{$radius})
     &.is-transparent
       a.navbar-item,
       .navbar-link
@@ -310,11 +348,11 @@ a.navbar-item,
         a.navbar-item
           &:focus,
           &:hover
-            background-color: $navbar-dropdown-item-hover-background-color
-            color: $navbar-dropdown-item-hover-color
+            background-color: var(--navbar-dropdown-item-hover-background-color)
+            color: var(--navbar-dropdown-item-hover-color)
           &.is-active
-            background-color: $navbar-dropdown-item-active-background-color
-            color: $navbar-dropdown-item-active-color
+            background-color: var(--navbar-dropdown-item-active-background-color)
+            color: var(--navbar-dropdown-item-active-color)
   .navbar-burger
     display: none
   .navbar-item,
@@ -328,11 +366,11 @@ a.navbar-item,
       .navbar-link::after
         transform: rotate(135deg) translate(0.25em, -0.25em)
       .navbar-dropdown
-        border-bottom: $navbar-dropdown-border-top
-        border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
+        border-bottom: var(--navbar-dropdown-border-top)
+        border-radius: var(--navbar-dropdown-radius) var(--navbar-dropdown-radius) 0 0
         border-top: none
         bottom: 100%
-        box-shadow: 0 -8px 8px $navbar-shadow-color
+        box-shadow: 0 -8px 8px var(--navbar-shadow-color)
         top: auto
     &.is-active,
     &.is-hoverable:focus,
@@ -355,18 +393,18 @@ a.navbar-item,
     justify-content: flex-end
     +ltr-property("margin", auto, false)
   .navbar-dropdown
-    background-color: $navbar-dropdown-background-color
-    border-bottom-left-radius: $navbar-dropdown-radius
-    border-bottom-right-radius: $navbar-dropdown-radius
-    border-top: $navbar-dropdown-border-top
-    box-shadow: 0 8px 8px $navbar-shadow-color
+    background-color: var(--navbar-dropdown-background-color)
+    border-bottom-left-radius: var(--navbar-dropdown-radius)
+    border-bottom-right-radius: var(--navbar-dropdown-radius)
+    border-top: var(--navbar-dropdown-border-top)
+    box-shadow: 0 8px 8px var(--navbar-shadow-color)
     display: none
     font-size: 0.875rem
     +ltr-position(0, false)
     min-width: 100%
     position: absolute
     top: 100%
-    z-index: $navbar-dropdown-z
+    z-index: var(--navbar-dropdown-z)
     .navbar-item
       padding: 0.375rem 1rem
       white-space: nowrap
@@ -374,22 +412,22 @@ a.navbar-item,
       +ltr-property("padding", 3rem)
       &:focus,
       &:hover
-        background-color: $navbar-dropdown-item-hover-background-color
-        color: $navbar-dropdown-item-hover-color
+        background-color: var(--navbar-dropdown-item-hover-background-color)
+        color: var(--navbar-dropdown-item-hover-color)
       &.is-active
-        background-color: $navbar-dropdown-item-active-background-color
-        color: $navbar-dropdown-item-active-color
+        background-color: var(--navbar-dropdown-item-active-background-color)
+        color: var(--navbar-dropdown-item-active-color)
     .navbar.is-spaced &,
     &.is-boxed
-      border-radius: $navbar-dropdown-boxed-radius
+      border-radius: var(--navbar-dropdown-boxed-radius)
       border-top: none
-      box-shadow: $navbar-dropdown-boxed-shadow
+      box-shadow: var(--navbar-dropdown-boxed-shadow)
       display: block
       opacity: 0
       pointer-events: none
       top: calc(100% + (#{$navbar-dropdown-offset}))
       transform: translateY(-5px)
-      transition-duration: $speed
+      transition-duration: var(--speed, #{$speed})
       transition-property: opacity, transform
     &.is-right
       left: auto
@@ -410,35 +448,35 @@ a.navbar-item,
     &.is-fixed-bottom-desktop
       bottom: 0
       &.has-shadow
-        box-shadow: 0 -2px 3px $navbar-shadow-color
+        box-shadow: 0 -2px 3px var(--navbar-shadow-color)
     &.is-fixed-top-desktop
       top: 0
   html,
   body
     &.has-navbar-fixed-top-desktop
-      padding-top: $navbar-height
+      padding-top: var(--navbar-height)
     &.has-navbar-fixed-bottom-desktop
-      padding-bottom: $navbar-height
+      padding-bottom: var(--navbar-height)
     &.has-spaced-navbar-fixed-top
-      padding-top: $navbar-height + ($navbar-padding-vertical * 2)
+      padding-top: calc(#{var(--navbar-height)} + calc(#{var(--navbar-padding-vertical)} * 2))
     &.has-spaced-navbar-fixed-bottom
-      padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
+      padding-bottom: calc(#{var(--navbar-height)} + calc(#{var(--navbar-padding-vertical)} * 2))
   // Hover/Active states
   a.navbar-item,
   .navbar-link
     &.is-active
-      color: $navbar-item-active-color
+      color: var(--navbar-item-active-color)
     &.is-active:not(:focus):not(:hover)
-      background-color: $navbar-item-active-background-color
+      background-color: var(--navbar-item-active-background-color)
   .navbar-item.has-dropdown
     &:focus,
     &:hover,
     &.is-active
       .navbar-link
-        background-color: $navbar-item-hover-background-color
+        background-color: var(--navbar-item-hover-background-color)
 
 // Combination
 
 .hero
   &.is-fullheight-with-navbar
-    min-height: calc(100vh - #{$navbar-height})
+    min-height: calc(100vh - #{var(--navbar-height)})