diff --git a/docs/_includes/global/navbar.html b/docs/_includes/global/navbar.html
index b39309ee..21aeaaf1 100644
--- a/docs/_includes/global/navbar.html
+++ b/docs/_includes/global/navbar.html
@@ -41,7 +41,7 @@
 
       {% for link_id in site.data.links.navbar %}
         {% assign link = site.data.links.by_id[link_id] %}
-        <a class="navbar-item bd-navbar-item-{{ link.id }} {% if page.route == link.id %}is-active{% endif %}" href="{{ site.url }}{{ link.path }}/">
+        <a class="navbar-item bd-navbar-item-{{ link_id }} {% if page.route == link_id %}is-active{% endif %}" href="{{ site.url }}{{ link.path }}/">
           <span class="icon has-text-{{ link.color }}">
             <i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
           </span>
diff --git a/docs/_sass/book.sass b/docs/_sass/book.sass
index 4a58e0ab..ad1c8f8e 100644
--- a/docs/_sass/book.sass
+++ b/docs/_sass/book.sass
@@ -45,7 +45,7 @@ $book-beige: #FFEDD7
 
 .bd-book-content
   @extend %bd-box
-  box-shadow: 0 3rem 3rem -1rem rgba(var(--#{$prefix}-scheme-invert), 0.2)
+  box-shadow: 0 3rem 3rem -1rem rgba(var(--#{$prefix}scheme-invert), 0.2)
   max-width: 520px
   padding: 3rem
 
@@ -98,7 +98,7 @@ $book-beige: #FFEDD7
 
 .bd-book-modal-background
   +overlay
-  background-color: rgba(var(--#{$prefix}-scheme-invert), 0.86)
+  background-color: rgba(var(--#{$prefix}scheme-invert), 0.86)
 
 .bd-book-modal
   .bd-book-modal-background,
@@ -153,7 +153,7 @@ $book-beige: #FFEDD7
   .bd-book-inline-cover
     display: none
   .bd-book-modal-column
-    background-color: var(--#{$prefix}-scheme-main)
+    background-color: var(--#{$prefix}scheme-main)
     position: relative
     &.bd-is-cover
       align-items: center
diff --git a/docs/_sass/bootstrap.sass b/docs/_sass/bootstrap.sass
index 3f8ef627..e9c36a23 100644
--- a/docs/_sass/bootstrap.sass
+++ b/docs/_sass/bootstrap.sass
@@ -70,11 +70,11 @@ $bootstrap-invert: #fff
         &:hover
           text-decoration: underline
     .bd-is-empty
-      background-color: var(--#{$prefix}-background)
-      color: var(--#{$prefix}-text-light)
+      background-color: var(--#{$prefix}background)
+      color: var(--#{$prefix}text-light)
     .bd-is-unique
       background-color: rgba($green, 0.25)
-      color: var(--#{$prefix}-text-strong)
+      color: var(--#{$prefix}text-strong)
       font-weight: $weight-bold
 
 .bd-bootstrap-comparison-header
diff --git a/docs/_sass/bsa.sass b/docs/_sass/bsa.sass
index 6c384096..c2226b3d 100644
--- a/docs/_sass/bsa.sass
+++ b/docs/_sass/bsa.sass
@@ -8,7 +8,7 @@
   .default-ad
     background-color: rgba(black, 0.3)
     border-radius: 2px
-    color: var(--#{$prefix}-scheme-main)
+    color: var(--#{$prefix}scheme-main)
     display: inline-block
     font-size: 10px
     font-weight: bold
@@ -16,10 +16,10 @@
     text-transform: uppercase
     vertical-align: top
   & > a
-    background-color: var(--#{$prefix}-scheme-main)
+    background-color: var(--#{$prefix}scheme-main)
     border-radius: $radius-large
-    box-shadow: 0 2px 3px rgba(var(--#{$prefix}-scheme-invert), 0.1), 0 0 0 1px rgba(var(--#{$prefix}-scheme-invert), 0.1)
-    color: var(--#{$prefix}-text)
+    box-shadow: 0 2px 3px rgba(var(--#{$prefix}scheme-invert), 0.1), 0 0 0 1px rgba(var(--#{$prefix}scheme-invert), 0.1)
+    color: var(--#{$prefix}text)
     display: block
     line-height: 1.375
     margin-top: 15px
@@ -29,9 +29,9 @@
     position: relative
     &:hover,
     &:focus
-      box-shadow: 0 2px 3px rgba(var(--#{$prefix}-scheme-invert), 0.1), 0 0 0 1px var(--#{$prefix}-link)
+      box-shadow: 0 2px 3px rgba(var(--#{$prefix}scheme-invert), 0.1), 0 0 0 1px var(--#{$prefix}link)
     &:active
-      box-shadow: inset 0 1px 2px rgba(var(--#{$prefix}-scheme-invert), 0.2), 0 0 0 1px var(--#{$prefix}-link)
+      box-shadow: inset 0 1px 2px rgba(var(--#{$prefix}scheme-invert), 0.2), 0 0 0 1px var(--#{$prefix}link)
     span
       display: block
     .default-image
@@ -46,7 +46,7 @@
         height: 40px
         width: 40px
     .default-title
-      color: var(--#{$prefix}-text-strong)
+      color: var(--#{$prefix}text-strong)
       display: inline
       font-weight: $weight-bold
       &::after
diff --git a/docs/_sass/callout.sass b/docs/_sass/callout.sass
index 36ff9b5c..62f8d9ba 100644
--- a/docs/_sass/callout.sass
+++ b/docs/_sass/callout.sass
@@ -1,6 +1,6 @@
 .bd-callout
   +block
-  background-color: var(--#{$prefix}-background)
+  background-color: var(--#{$prefix}background)
   border-radius: $radius
   padding: 1.25rem 2.5rem 1.25rem 1.5rem
   position: relative
diff --git a/docs/_sass/example.sass b/docs/_sass/example.sass
index 77115a4c..aa9d89e4 100644
--- a/docs/_sass/example.sass
+++ b/docs/_sass/example.sass
@@ -1,7 +1,7 @@
 .bd-example,
 .bd-structure,
 .bd-snippet
-  border: 2px solid $background
+  border: 2px solid var(--#{$prefix}background)
   position: relative
   &::before
     background: $yellow
@@ -164,7 +164,7 @@ $structure-invert: $danger-invert
   position: relative
   &::before
     +overlay
-    background: rgba(var(--#{$prefix}-scheme-invert), 0.7)
+    background: rgba(var(--#{$prefix}scheme-invert), 0.7)
     background: $background
     border: 1px solid $border
     content: ""
@@ -193,7 +193,7 @@ $structure-invert: $danger-invert
   .bd-expand
     background: none
     border: none
-    color: var(--#{$prefix}-text)
+    color: var(--#{$prefix}text)
     cursor: pointer
     font-size: 0.625rem
     outline: none
@@ -213,20 +213,23 @@ $structure-invert: $danger-invert
   .bd-show
     +overlay
     align-items: center
-    background-color: rgba($background, 0.7)
+    background-color: var(--#{$prefix}background)
     border: none
-    color: rgba(#000, 0.5)
+    color: var(--#{$prefix}scheme-invert)
     cursor: pointer
     display: none
     font-size: $size-small
     justify-content: center
+    opacity: 0.8
     width: 100%
     strong
       color: currentColor
       font-weight: $weight-semibold
+      opacity: 1
     &:hover
       background-color: rgba($yellow, 0.8)
       color: rgba(#000, 0.7)
+      opacity: 1
   +tablet
     pre
       white-space: pre-wrap
diff --git a/docs/_sass/expo.sass b/docs/_sass/expo.sass
index 706feb24..ae3a8d65 100644
--- a/docs/_sass/expo.sass
+++ b/docs/_sass/expo.sass
@@ -1,5 +1,5 @@
 .bd-expo
-  background-color: var(--#{$prefix}-scheme-main)
+  background-color: var(--#{$prefix}scheme-main)
   padding: 1.5rem
 
 .bd-website
@@ -31,7 +31,7 @@
   transition: opacity 200ms $easing
 
 .bd-website-overlay
-  background-color: var(--#{$prefix}-scheme-invert)
+  background-color: var(--#{$prefix}scheme-invert)
   opacity: 0
   transition: opacity 200ms $easing
 
diff --git a/docs/_sass/footer.sass b/docs/_sass/footer.sass
index 8a60f3e5..1e37317d 100644
--- a/docs/_sass/footer.sass
+++ b/docs/_sass/footer.sass
@@ -1,5 +1,5 @@
 .bd-footer-title
-  color: var(--#{$prefix}-text-strong)
+  color: var(--#{$prefix}text-strong)
   font-size: 1.25rem
   line-height: 1.25
   margin-bottom: 0.5rem
@@ -9,7 +9,7 @@
     font-weight: $weight-semibold
 
 .bd-footer-subtitle
-  color: var(--#{$prefix}-border-hover)
+  color: var(--#{$prefix}border-hover)
   margin-top: -0.5rem
   transition-duration: $speed
   transition-property: color
@@ -29,7 +29,7 @@
       width: 100%
 
 .bd-footer-tsp
-  color: var(--#{$prefix}-border-hover)
+  color: var(--#{$prefix}border-hover)
   margin-top: 1.5rem
 
 %bd-footer-box
@@ -42,7 +42,7 @@
 
 .bd-footer-support
   @extend %bd-footer-box
-  border-top: 2px solid var(--#{$prefix}-scheme-main-ter)
+  border-top: 2px solid var(--#{$prefix}scheme-main-ter)
   box-shadow: none
   padding: 3rem
   .bd-footer-title
@@ -63,7 +63,7 @@
     padding: 0.75rem 1.5rem
 
 .bd-footer-donation-title
-  color: var(--#{$prefix}-border-hover)
+  color: var(--#{$prefix}border-hover)
   margin-bottom: 0.5rem
   strong
     color: currentColor
@@ -103,11 +103,11 @@ $star-figure-height: 156px
   +tablet
     width: calc(33.3333% - 2rem)
   &:hover
-    box-shadow: 0 3rem 3rem -1.25rem rgba(var(--#{$prefix}-scheme-invert), 0.1)
+    box-shadow: 0 3rem 3rem -1.25rem rgba(var(--#{$prefix}scheme-invert), 0.1)
     transform: translateY(-0.5rem)
     .bd-footer-title,
     .bd-footer-subtitle
-      color: var(--#{$prefix}-link)
+      color: var(--#{$prefix}link)
   &.bd-is-expo,
   &.bd-is-love
     padding-bottom: $star-figure-height
@@ -144,10 +144,10 @@ $star-figure-height: 156px
   a
     color: currentColor
     &:hover
-      color: var(--#{$prefix}-link)
+      color: var(--#{$prefix}link)
 
 .bd-footer-link-title
-  color: var(--#{$prefix}-text-strong)
+  color: var(--#{$prefix}text-strong)
   font-size: 1.25rem
   font-weight: $weight-semibold
   &:not(:first-child)
@@ -158,7 +158,7 @@ $star-figure-height: 156px
   &.bd-is-more
     font-size: 0.875rem
     a:not(:hover)
-      color: var(--#{$prefix}-border-hover)
+      color: var(--#{$prefix}border-hover)
   &.bd-has-subtitle
     a
       align-items: center
@@ -174,7 +174,7 @@ $star-figure-height: 156px
         font-style: normal
       &:not(:hover)
         em
-          color: var(--#{$prefix}-border-hover)
+          color: var(--#{$prefix}border-hover)
       +mobile
         flex-wrap: wrap
         margin-top: 1rem
diff --git a/docs/_sass/global.sass b/docs/_sass/global.sass
index bc96599d..07c11426 100644
--- a/docs/_sass/global.sass
+++ b/docs/_sass/global.sass
@@ -16,10 +16,10 @@ svg
   strong
     color: currentColor
   a
-    border-bottom: 1px solid rgba(var(--#{$prefix}-scheme-main), 0.5)
+    border-bottom: 1px solid rgba(var(--#{$prefix}scheme-main), 0.5)
     padding-bottom: 2px
     &:hover
-      border-bottom-color: var(--#{$prefix}-scheme-main)
+      border-bottom-color: var(--#{$prefix}scheme-main)
   span
     margin: 0 0.25em
     opacity: 0.5
@@ -99,8 +99,8 @@ $carbon-poweredby-height: 20px
   padding: 0
   position: relative
   &:hover
-    background-color: var(--#{$prefix}-scheme-main)
-    box-shadow: 0 0 0 $carbon-shadow-size var(--#{$prefix}-scheme-main)
+    background-color: var(--#{$prefix}scheme-main)
+    box-shadow: 0 0 0 $carbon-shadow-size var(--#{$prefix}scheme-main)
   +tablet
     width: $carbon-width
 
@@ -138,20 +138,20 @@ $carbon-poweredby-height: 20px
       width: $carbon-image-width
     &:hover
       & + .carbon-text
-        color: var(--#{$prefix}-link)
+        color: var(--#{$prefix}link)
     &:active
       opacity: 0.8
   .carbon-text
     display: block
-    color: var(--#{$prefix}-text-strong)
+    color: var(--#{$prefix}text-strong)
     line-height: 20px
     min-height: $carbon-height
     padding: 0 0 $carbon-poweredby-height calc(#{$carbon-image-width} + #{$carbon-spacing})
     &:hover
-      color: var(--#{$prefix}-link)
+      color: var(--#{$prefix}link)
   .carbon-poweredby
     bottom: 0
-    color: var(--#{$prefix}-border-hover)
+    color: var(--#{$prefix}border-hover)
     display: inline
     font-size: $size-small
     line-height: $carbon-poweredby-height
diff --git a/docs/_sass/header.sass b/docs/_sass/header.sass
index 5aa6bab8..9a419e46 100644
--- a/docs/_sass/header.sass
+++ b/docs/_sass/header.sass
@@ -4,19 +4,19 @@
   &:hover
     background: $github
     border-color: $github
-    color: var(--#{$prefix}-scheme-main)
+    color: var(--#{$prefix}scheme-main)
 
 .bd-tw-button
   background-color: $twitter
-  color: var(--#{$prefix}-scheme-main)
+  color: var(--#{$prefix}scheme-main)
   border-color: transparent !important
   &:hover
     background-color: darken($twitter, 2.5%)
-    color: var(--#{$prefix}-scheme-main)
+    color: var(--#{$prefix}scheme-main)
   &:active,
   &:focus
     background-color: darken($twitter, 5%)
-    color: var(--#{$prefix}-scheme-main)
+    color: var(--#{$prefix}scheme-main)
 
 #moreDropdown
   .navbar-item
diff --git a/docs/_sass/highlight.sass b/docs/_sass/highlight.sass
index 5ea60811..259b690d 100644
--- a/docs/_sass/highlight.sass
+++ b/docs/_sass/highlight.sass
@@ -1,5 +1,5 @@
 .highlight
-  background-color: var(--#{$prefix}-pre-background)
+  background-color: var(--#{$prefix}pre-background)
   border-radius: $radius-large
   color: #586e75
   pre
diff --git a/docs/_sass/index.sass b/docs/_sass/index.sass
index b20dcb0b..b467c9b7 100644
--- a/docs/_sass/index.sass
+++ b/docs/_sass/index.sass
@@ -11,14 +11,14 @@
     &:hover
       color: $blue
       strong
-        color: var(--#{$prefix}-link)
+        color: var(--#{$prefix}link)
   strong
     font-weight: $weight-semibold
   .title
     strong
       color: $primary
   .subtitle
-    color: var(--#{$prefix}-border-hover) !important
+    color: var(--#{$prefix}border-hover) !important
     strong
       color: currentColor
   &:not(:last-child)
@@ -41,7 +41,7 @@
     margin-right: auto
 
 .bd-index-custom-title
-  color: var(--#{$prefix}-border-hover)
+  color: var(--#{$prefix}border-hover)
 
 .bd-index-custom-example
   padding: 1rem
@@ -77,28 +77,28 @@
   .button
     &.is-primary
       background-color: $mauve
-      color: var(--#{$prefix}-scheme-main)
+      color: var(--#{$prefix}scheme-main)
       &:hover
         background-color: darken($mauve, 2.5%)
       &:active
         background-color: darken($mauve, 5%)
     &.is-link
       background-color: $pink
-      color: var(--#{$prefix}-scheme-main)
+      color: var(--#{$prefix}scheme-main)
       &:hover
         background-color: darken($pink, 2.5%)
       &:active
         background-color: darken($pink, 5%)
   +selection
     background-color: $pink
-    color: var(--#{$prefix}-scheme-main)
+    color: var(--#{$prefix}scheme-main)
 
 // Fullscreen
 
 .bd-index-fullscreen
   .tabs
     a
-      color: var(--#{$prefix}-border-hover) !important
+      color: var(--#{$prefix}border-hover) !important
 
 // Columns
 
@@ -161,13 +161,13 @@
     transition-duration: $speed * 2
     transition-property: color
   .subtitle
-    color: var(--#{$prefix}-border-hover)
+    color: var(--#{$prefix}border-hover)
     position: relative
     strong
       color: currentColor
   &::before
     +overlay
-    background-color: var(--#{$prefix}-scheme-main-bis)
+    background-color: var(--#{$prefix}scheme-main-bis)
     border-radius: $radius-large
     content: ""
     display: block
@@ -182,7 +182,7 @@
       opacity: 1
       transform: scale(1)
     .subtitle
-      color: var(--#{$prefix}-text)
+      color: var(--#{$prefix}text)
   &:nth-child(1):hover
     .title
       color: $orange
@@ -191,10 +191,10 @@
       color: $success
   &:nth-child(3):hover
     .title
-      color: var(--#{$prefix}-link)
+      color: var(--#{$prefix}link)
   &:nth-child(4):hover
     .title
-      color: var(--#{$prefix}-scheme-invert)
+      color: var(--#{$prefix}scheme-invert)
 
 .bd-focus-icon
   position: relative
@@ -292,7 +292,7 @@
       color: $black-ter
     &.is-success,
     &.is-error
-      color: var(--#{$prefix}-scheme-main)
+      color: var(--#{$prefix}scheme-main)
       pointer-events: none
       text-decoration: none
     &.is-success
@@ -301,10 +301,10 @@
       background-color: $red
   \::-moz-selection
     background: $yellow
-    color: var(--#{$prefix}-scheme-invert-ter)
+    color: var(--#{$prefix}scheme-invert-ter)
   \::selection
     background: $yellow
-    color: var(--#{$prefix}-scheme-invert-ter)
+    color: var(--#{$prefix}scheme-invert-ter)
 
 .intro-buttons
   margin-top: 1.5rem
@@ -313,7 +313,7 @@
     padding-right: 1.375em
 
 .intro-video
-  background-color: var(--#{$prefix}-scheme-main)
+  background-color: var(--#{$prefix}scheme-main)
   margin-left: auto
   margin-right: auto
   max-width: 640px
@@ -384,12 +384,12 @@
     width: 100%
 
 .intro-author
-  color: var(--#{$prefix}-text-light)
+  color: var(--#{$prefix}text-light)
   font-size: $size-small
   margin-top: 40px
   text-align: center
   a
-    color: var(--#{$prefix}-text-strong)
+    color: var(--#{$prefix}text-strong)
     &:hover
       text-decoration: underline
   span
diff --git a/docs/_sass/klmn.sass b/docs/_sass/klmn.sass
index 460f9c1a..90701383 100644
--- a/docs/_sass/klmn.sass
+++ b/docs/_sass/klmn.sass
@@ -12,7 +12,7 @@
   margin: 0.25rem auto 0.25rem 0
 
 .bd-klmn-gap
-  background-color: var(--#{$prefix}-background)
+  background-color: var(--#{$prefix}background)
   border-radius: $radius
   color: $red
   font-family: $family-monospace
@@ -24,7 +24,7 @@
   white-space: nowrap
   &.bd-is-selected
     background-color: $green
-    color: var(--#{$prefix}-scheme-main)
+    color: var(--#{$prefix}scheme-main)
 
 .bd-klmn-columns:last-child
   .bd-notification
diff --git a/docs/_sass/love.sass b/docs/_sass/love.sass
index 2d8530e3..1dddae54 100644
--- a/docs/_sass/love.sass
+++ b/docs/_sass/love.sass
@@ -1,5 +1,5 @@
 .bd-testimonials
-  background-color: var(--#{$prefix}-background)
+  background-color: var(--#{$prefix}background)
 
 .bd-testimonial
   align-items: flex-start
@@ -7,7 +7,7 @@
   justify-content: center
 
 .bd-testimonial-tweet
-  background-color: var(--#{$prefix}-scheme-main)
+  background-color: var(--#{$prefix}scheme-main)
 
 .bd-more-loves
   align-items: center
@@ -57,7 +57,7 @@
 .hero.bd-is-love
   .title,
   .subtitle
-    color: var(--#{$prefix}-scheme-main)
+    color: var(--#{$prefix}scheme-main)
 
 @keyframes rainbow
     0%
@@ -111,7 +111,7 @@
       margin-left: 1.5rem
 
 .bd-shoutout
-  background-color: var(--#{$prefix}-background)
+  background-color: var(--#{$prefix}background)
   padding: 2rem
   text-align: center
   &:not(:last-child)
diff --git a/docs/_sass/main.sass b/docs/_sass/main.sass
index 3d9f8a4c..7629c0c7 100644
--- a/docs/_sass/main.sass
+++ b/docs/_sass/main.sass
@@ -5,7 +5,7 @@
 .bd-figure
   +block
   align-items: center
-  border: 2px solid var(--#{$prefix}-scheme-main-ter)
+  border: 2px solid var(--#{$prefix}scheme-main-ter)
   border-radius: $radius
   display: flex
   flex-direction: column
@@ -14,8 +14,8 @@
     margin: 1em
   figcaption
     align-self: stretch
-    background-color: var(--#{$prefix}-scheme-main-ter)
-    color: var(--#{$prefix}-text-light)
+    background-color: var(--#{$prefix}scheme-main-ter)
+    color: var(--#{$prefix}text-light)
     font-size: $size-small
     padding: 1em
 
@@ -33,7 +33,7 @@
 
 .bd-prev-next
   align-items: flex-start
-  color: var(--#{$prefix}-border-hover)
+  color: var(--#{$prefix}border-hover)
   display: none
   flex-grow: 0
   flex-shrink: 0
@@ -45,7 +45,7 @@
     width: 1.5rem
   a
     &:hover
-      background-color: var(--#{$prefix}-background)
+      background-color: var(--#{$prefix}background)
 
 .bd-prev-next-bis
   border-top: 2px solid $background
@@ -64,7 +64,7 @@
 .bd-header
   margin-bottom: $main-spacing
   .subtitle
-    color: var(--#{$prefix}-text-light)
+    color: var(--#{$prefix}text-light)
     strong
       color: currentColor
   #meta
@@ -87,12 +87,12 @@
       overflow: visible
       ul,
       a
-        border-bottom-color: var(--#{$prefix}-scheme-main-ter)
+        border-bottom-color: var(--#{$prefix}scheme-main-ter)
         border-bottom-width: 2px
       a
         margin-bottom: -2px
       li:not(.is-active) a:hover
-          border-bottom-color: var(--#{$prefix}-border)
+          border-bottom-color: var(--#{$prefix}border)
       ul
         flex-wrap: wrap
         max-width: 100%
@@ -109,7 +109,7 @@
 
 .bd-side,
 .bd-side-background
-  background-color: var(--#{$prefix}-scheme-main-bis)
+  background-color: var(--#{$prefix}scheme-main-bis)
 
 .bd-side
   position: relative
@@ -128,19 +128,19 @@
       margin-bottom: 0.5em
     &.is-past
       a
-        color: var(--#{$prefix}-border-hover)
+        color: var(--#{$prefix}border-hover)
     &.is-current
       a
-        color: var(--#{$prefix}-link)
+        color: var(--#{$prefix}link)
   a
-    color: var(--#{$prefix}-text-light)
+    color: var(--#{$prefix}text-light)
     &:hover
-      color: var(--#{$prefix}-link)
+      color: var(--#{$prefix}link)
 
 .bd-category
   a
     &:hover
-      color: var(--#{$prefix}-link)
+      color: var(--#{$prefix}link)
   &:not(:last-child)
     margin-bottom: 0.5rem
   &.is-active
@@ -156,7 +156,7 @@
 .bd-category-toggle
   +overlay
   align-items: center
-  color: var(--#{$prefix}-border-hover)
+  color: var(--#{$prefix}border-hover)
   display: flex
   justify-content: flex-end
   .icon
@@ -174,10 +174,10 @@
   vertical-align: text-bottom
 
 .bd-category-name
-  color: var(--#{$prefix}-text-strong)
+  color: var(--#{$prefix}text-strong)
   position: relative
   &.is-active
-    color: var(--#{$prefix}-link)
+    color: var(--#{$prefix}link)
   .bd-mini-tag
     margin-left: 0.5em
 
@@ -201,7 +201,7 @@
       top: 0
 
 .bd-anchors-title
-  color: var(--#{$prefix}-border-hover)
+  color: var(--#{$prefix}border-hover)
   font-size: 0.875rem
   font-weight: $weight-semibold
   margin-bottom: 0.5rem
@@ -212,7 +212,7 @@
     &:last-child
       margin-top: 1em
   a
-    color: var(--#{$prefix}-text-strong)
+    color: var(--#{$prefix}text-strong)
 
 +touch
   .bd-lead,
@@ -229,7 +229,7 @@
   .bd-duo
     display: flex
   .bd-lead
-    background-color: var(--#{$prefix}-scheme-main)
+    background-color: var(--#{$prefix}scheme-main)
     overflow: hidden
     flex-grow: 1
     flex-shrink: 1
diff --git a/docs/_sass/native.sass b/docs/_sass/native.sass
index dfff9ebd..bc6e6a2a 100644
--- a/docs/_sass/native.sass
+++ b/docs/_sass/native.sass
@@ -30,7 +30,7 @@
   text-decoration: none
   &:hover
     .native-cta
-      box-shadow: 0 1rem 2rem 0 rgba(var(--#{$prefix}-scheme-invert), 0.1)
+      box-shadow: 0 1rem 2rem 0 rgba(var(--#{$prefix}scheme-invert), 0.1)
       transform: translateY(-0.25rem)
 
 .native-img
@@ -62,7 +62,7 @@
 
 .native-cta
   border: none
-  box-shadow: 0 0.5rem 1rem 0 rgba(var(--#{$prefix}-scheme-invert), 0.2)
+  box-shadow: 0 0.5rem 1rem 0 rgba(var(--#{$prefix}scheme-invert), 0.2)
   flex-grow: 0
   flex-shrink: 0
   font-weight: $weight-semibold
diff --git a/docs/_sass/patreon.sass b/docs/_sass/patreon.sass
index 0c37a450..5e896d0f 100644
--- a/docs/_sass/patreon.sass
+++ b/docs/_sass/patreon.sass
@@ -4,7 +4,7 @@
 
 .bd-side-sponsor-label,
 .bd-banner-label
-  color: var(--#{$prefix}-border-hover)
+  color: var(--#{$prefix}border-hover)
   font-size: 0.75rem
   margin-bottom: 0.75rem
 
@@ -31,17 +31,17 @@
     margin-bottom: 0.25em
   &.is-patreon
     background-color: $patreon-blue
-    color: var(--#{$prefix}-scheme-main)
+    color: var(--#{$prefix}scheme-main)
   // &.is-fortyfour
-  //   background-color: var(--#{$prefix}-scheme-main)
+  //   background-color: var(--#{$prefix}scheme-main)
   //   border: 2px solid $background
   .button
     transform-origin: center
     transition-duration: $speed
     transition-property: transform
   &:hover
-    border-color: var(--#{$prefix}-link)
-    color: var(--#{$prefix}-link)
+    border-color: var(--#{$prefix}link)
+    color: var(--#{$prefix}link)
     .bd-banner-title
       color: currentColor
     .button
@@ -55,7 +55,7 @@
   opacity: 0.5
 
 .bd-banner-title
-  color: var(--#{$prefix}-text-strong)
+  color: var(--#{$prefix}text-strong)
   font-size: 1.25em
   font-weight: $weight-semibold
   line-height: 1.25
diff --git a/docs/_sass/specific.sass b/docs/_sass/specific.sass
index 5d3bd109..597847b7 100644
--- a/docs/_sass/specific.sass
+++ b/docs/_sass/specific.sass
@@ -58,7 +58,7 @@
 
 .bd-link
   border-radius: $radius-large
-  color: var(--#{$prefix}-text-light)
+  color: var(--#{$prefix}text-light)
   display: block
   font-size: $size-5
   padding: 1rem 3rem 1.5rem 5rem
@@ -68,7 +68,7 @@
   strong
     font-weight: $weight-semibold
   &:hover
-    background-color: var(--#{$prefix}-scheme-main-bis)
+    background-color: var(--#{$prefix}scheme-main-bis)
 
 .bd-link-surtitle
   float: right
@@ -91,7 +91,7 @@
   min-width: 1.5em
 
 .bd-link-counter
-  color: var(--#{$prefix}-link)
+  color: var(--#{$prefix}link)
   display: block
   counter-increment: bd-links
   font-weight: $weight-normal
@@ -123,7 +123,7 @@
     width: 50%
 
 .bd-link-name
-  color: var(--#{$prefix}-text-strong)
+  color: var(--#{$prefix}text-strong)
   font-size: $size-4
   font-weight: $weight-semibold
 
@@ -139,11 +139,11 @@
     min-width: calc(33.3333% - 3rem)
 
 .bd-doc-title
-  color: var(--#{$prefix}-text-strong)
+  color: var(--#{$prefix}text-strong)
   a
     color: currentColor
     &:hover
-      color: var(--#{$prefix}-link)
+      color: var(--#{$prefix}link)
   &:not(:last-child)
     margin-bottom: 0.75rem
 
@@ -227,15 +227,15 @@
     background-color: darken($rss, 10%)
 
 .bd-view-all-versions
-  color: var(--#{$prefix}-text-light)
+  color: var(--#{$prefix}text-light)
   &:hover
     text-decoration: underline
 
 .bd-feature-title
-  color: var(--#{$prefix}-text-light)
+  color: var(--#{$prefix}text-light)
   a
     border-bottom: 1px solid transparent
-    color: var(--#{$prefix}-text-strong)
+    color: var(--#{$prefix}text-strong)
     &:hover
       border-bottom-color: $primary
 
@@ -273,14 +273,14 @@
   font-size: 1.25em
   vertical-align: middle
 
-$notification-background-color: var(--#{$prefix}-background) !default
+$notification-background-color: var(--#{$prefix}background) !default
 $notification-radius: $radius !default
 $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
 
 .bd-notification
-  background-color: var(--#{$prefix}-background)
+  background-color: var(--#{$prefix}background)
   border-radius: $radius
-  color: var(--#{$prefix}-text-light)
+  color: var(--#{$prefix}text-light)
   font-weight: $weight-semibold
   padding: 1.25rem 0
   position: relative
@@ -292,9 +292,9 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
     color: currentColor
   code,
   pre
-    background-color: rgba(var(--#{$prefix}-scheme-invert), 0.2)
+    background-color: rgba(var(--#{$prefix}scheme-invert), 0.2)
     border-radius: $radius
-    color: var(--#{$prefix}-scheme-main)
+    color: var(--#{$prefix}scheme-main)
   pre code
     background-color: transparent
   // Colors
diff --git a/docs/_sass/sponsors.sass b/docs/_sass/sponsors.sass
index 2ffdb2ee..6a396d61 100644
--- a/docs/_sass/sponsors.sass
+++ b/docs/_sass/sponsors.sass
@@ -29,13 +29,13 @@
   min-height: 80px
   text-align: center
   &.is-text
-    color: var(--#{$prefix}-text-light)
+    color: var(--#{$prefix}text-light)
     font-size: 0.75em
     line-height: 1.25
     min-height: 0
 
 .bd-partnrs
-  background-color: var(--#{$prefix}-scheme-main-bis)
+  background-color: var(--#{$prefix}scheme-main-bis)
   #carbonads
     .carbon-text
       padding-bottom: 0
@@ -43,7 +43,7 @@
       display: none
 
 .bd-partner-title
-  color: var(--#{$prefix}-border-hover)
+  color: var(--#{$prefix}border-hover)
   font-size: 0.875rem
   margin-bottom: 1rem
 
@@ -57,11 +57,11 @@
 
 .bd-minis-link
   @extend %center
-  color: var(--#{$prefix}-text-light)
+  color: var(--#{$prefix}text-light)
   .icon
     margin-right: 0.25em
   strong
-    color: var(--#{$prefix}-text-light)
+    color: var(--#{$prefix}text-light)
     margin-left: 0.25em
 
 .bd-minis-list
diff --git a/docs/_sass/twitter.sass b/docs/_sass/twitter.sass
index 87bc90b0..115085f2 100644
--- a/docs/_sass/twitter.sass
+++ b/docs/_sass/twitter.sass
@@ -1,14 +1,14 @@
 // $tw-black: #1c2022
-$tw-black: var(--#{$prefix}-text-strong)
+$tw-black: var(--#{$prefix}text-strong)
 $tw-blue: #2b7bb9
 $tw-grey: #697882
 $tw-border: #e1e8ed
 
 .bd-tws-home
-  background-color: var(--#{$prefix}-scheme-main-bis)
+  background-color: var(--#{$prefix}scheme-main-bis)
 
 .bd-tw
-  background-color: var(--#{$prefix}-scheme-main-bis)
+  background-color: var(--#{$prefix}scheme-main-bis)
   border-radius: $radius-large
   color: $tw-grey
   flex-shrink: 0
@@ -18,7 +18,7 @@ $tw-border: #e1e8ed
   padding: 20px
   text-align: left
   &.bd-is-white
-    background-color: var(--#{$prefix}-scheme-main)
+    background-color: var(--#{$prefix}scheme-main)
 
 .bd-tw-header
   align-items: stretch
@@ -45,7 +45,7 @@ $tw-border: #e1e8ed
     width: 36px
 
 .bd-tw-fullname
-  color: var(--#{$prefix}-text-strong)
+  color: var(--#{$prefix}text-strong)
   display: block
   font-size: 16px
   font-weight: 700
@@ -163,7 +163,7 @@ $tw-border: #e1e8ed
     min-height: 632px
 
 .twitter-tweet:not(.twitter-tweet-rendered)
-  background-color: var(--#{$prefix}-scheme-main)
+  background-color: var(--#{$prefix}scheme-main)
   border: 1px solid $tw-border
   border-radius: 5px
   color: $tw-grey
diff --git a/docs/bulma-cssvar.sass b/docs/bulma-cssvar.sass
index e08b4f8a..a2ec33b7 100644
--- a/docs/bulma-cssvar.sass
+++ b/docs/bulma-cssvar.sass
@@ -2,9 +2,9 @@ $prefix: "bulma-"
 
 @function findCSSVarColorInvert($color)
   @if colorLuminance($color) > 0.55
-    @return var(--#{$prefix}-black-transparent)
+    @return var(--#{$prefix}black-transparent)
   @else
-    @return var(--#{$prefix}-white)
+    @return var(--#{$prefix}white)
 
 @function findCSSVarLightColor($color)
   @if type-of($color) == "color"
@@ -12,7 +12,7 @@ $prefix: "bulma-"
     @if lightness($color) > 96%
       $l: lightness($color)
     @return change-color($color, $lightness: $l)
-  @return var(--#{$prefix}-background)
+  @return var(--#{$prefix}background)
 
 @function findCSSVarDarkColor($color)
   @if type-of($color) == "color"
@@ -21,7 +21,7 @@ $prefix: "bulma-"
     $luminance-delta: 0.53 - $luminance
     $target-l: round($base-l + $luminance-delta * 53)
     @return change-color($color, $lightness: max($base-l, $target-l))
-  @return var(--#{$prefix}-text-strong)
+  @return var(--#{$prefix}text-strong)
 
 $cssvar-colors: ("primary": $primary, "link": $link, "info": $info, "success": $success, "warning": $warning, "danger": $danger, "light": $white-ter, "dark": $grey-darker)
 
@@ -55,42 +55,42 @@ $cssvar-colors: ("primary": $primary, "link": $link, "info": $info, "success": $
   --#{$base}-dark-active: #{darken($color-dark, 10%)}
 
 \:root
-  --#{$prefix}-white: #{$white}
-  --#{$prefix}-black: #{$black}
-  --#{$prefix}-black-transparent: #{rgba(#000, 0.7)}
+  --#{$prefix}white: #{$white}
+  --#{$prefix}black: #{$black}
+  --#{$prefix}black-transparent: #{rgba(#000, 0.7)}
   @each $name, $color in $cssvar-colors
     +cssvar($name, $color)
 
-// $white: var(--#{$prefix}-white)
-// $black: var(--#{$prefix}-black)
-// $black-transparent: var(--#{$prefix}-black-transparent)
-// $scheme-main: var(--#{$prefix}-scheme-main)
-// $scheme-main-bis: var(--#{$prefix}-scheme-main-bis)
-// $scheme-main-ter: var(--#{$prefix}-scheme-main-ter)
-// $scheme-invert: var(--#{$prefix}-scheme-invert)
-// $scheme-invert-bis: var(--#{$prefix}-scheme-invert-bis)
-// $scheme-invert-ter: var(--#{$prefix}-scheme-invert-ter)
-// $background: var(--#{$prefix}-background)
-// $border: var(--#{$prefix}-border)
-// $border-hover: var(--#{$prefix}-border-hover)
-// $border-light: var(--#{$prefix}-border-light)
-// $border-light-hover: var(--#{$prefix}-border-light-hover)
-// $text: var(--#{$prefix}-text)
-// $text-invert: var(--#{$prefix}-text-invert)
-// $text-light: var(--#{$prefix}-text-light)
-// $text-strong: var(--#{$prefix}-text-strong)
-// $code: var(--#{$prefix}-code)
-// $code-background: var(--#{$prefix}-code-background)
-// $pre: var(--#{$prefix}-pre)
-// $pre-background: var(--#{$prefix}-pre-background)
-// $link: var(--#{$prefix}-link)
-// $link-invert: var(--#{$prefix}-link-invert)
-// $link-light: var(--#{$prefix}-link-light)
-// $link-dark: var(--#{$prefix}-link-dark)
-// $link-visited: var(--#{$prefix}-link-visited)
-// $link-hover: var(--#{$prefix}-link-hover)
-// $link-hover-border: var(--#{$prefix}-link-hover-border)
-// $link-focus: var(--#{$prefix}-link-focus)
-// $link-focus-border: var(--#{$prefix}-link-focus-border)
-// $link-active: var(--#{$prefix}-link-active)
-// $link-active-border: var(--#{$prefix}-link-active-border)
+// $white: var(--#{$prefix}white)
+// $black: var(--#{$prefix}black)
+// $black-transparent: var(--#{$prefix}black-transparent)
+// $scheme-main: var(--#{$prefix}scheme-main)
+// $scheme-main-bis: var(--#{$prefix}scheme-main-bis)
+// $scheme-main-ter: var(--#{$prefix}scheme-main-ter)
+// $scheme-invert: var(--#{$prefix}scheme-invert)
+// $scheme-invert-bis: var(--#{$prefix}scheme-invert-bis)
+// $scheme-invert-ter: var(--#{$prefix}scheme-invert-ter)
+// $background: var(--#{$prefix}background)
+// $border: var(--#{$prefix}border)
+// $border-hover: var(--#{$prefix}border-hover)
+// $border-light: var(--#{$prefix}border-light)
+// $border-light-hover: var(--#{$prefix}border-light-hover)
+// $text: var(--#{$prefix}text)
+// $text-invert: var(--#{$prefix}text-invert)
+// $text-light: var(--#{$prefix}text-light)
+// $text-strong: var(--#{$prefix}text-strong)
+// $code: var(--#{$prefix}code)
+// $code-background: var(--#{$prefix}code-background)
+// $pre: var(--#{$prefix}pre)
+// $pre-background: var(--#{$prefix}pre-background)
+// $link: var(--#{$prefix}link)
+// $link-invert: var(--#{$prefix}link-invert)
+// $link-light: var(--#{$prefix}link-light)
+// $link-dark: var(--#{$prefix}link-dark)
+// $link-visited: var(--#{$prefix}link-visited)
+// $link-hover: var(--#{$prefix}link-hover)
+// $link-hover-border: var(--#{$prefix}link-hover-border)
+// $link-focus: var(--#{$prefix}link-focus)
+// $link-focus-border: var(--#{$prefix}link-focus-border)
+// $link-active: var(--#{$prefix}link-active)
+// $link-active-border: var(--#{$prefix}link-active-border)
diff --git a/docs/bulma-cssvar.scss b/docs/bulma-cssvar.scss
index 4facb1db..3947d226 100644
--- a/docs/bulma-cssvar.scss
+++ b/docs/bulma-cssvar.scss
@@ -2,9 +2,9 @@ $prefix: "bulma-";
 
 @function findCSSVarColorInvert($color) {
   @if (colorLuminance($color) > 0.55) {
-    @return var(--#{$prefix}-black-transparent);
+    @return var(--#{$prefix}black-transparent);
   } @else {
-    @return var(--#{$prefix}-white);
+    @return var(--#{$prefix}white);
   }
 }
 
@@ -16,7 +16,7 @@ $prefix: "bulma-";
     }
     @return change-color($color, $lightness: $l);
   }
-  @return var(--#{$prefix}-background);
+  @return var(--#{$prefix}background);
 }
 
 @function findCSSVarDarkColor($color) {
@@ -27,7 +27,7 @@ $prefix: "bulma-";
     $target-l: round($base-l + ($luminance-delta * 53));
     @return change-color($color, $lightness: max($base-l, $target-l));
   }
-  @return var(--#{$prefix}-text-strong);
+  @return var(--#{$prefix}text-strong);
 }
 
 $cssvar-colors: (
@@ -78,78 +78,78 @@ $cssvar-colors: (
 }
 
 :root {
-  --#{$prefix}-white: #{$white};
-  --#{$prefix}-black: #{$black};
-  --#{$prefix}-black-transparent: #{rgba(#000, 0.7)};
-  --#{$prefix}-scheme-main: #{$white};
-  --#{$prefix}-scheme-main-bis: #{$white-bis};
-  --#{$prefix}-scheme-main-ter: #{$white-ter};
-  --#{$prefix}-scheme-invert: #{$black};
-  --#{$prefix}-scheme-invert-bis: #{$black-bis};
-  --#{$prefix}-scheme-invert-ter: #{$black-ter};
-  --#{$prefix}-background: #{$white-ter};
-  --#{$prefix}-border: #{$grey-lighter};
-  --#{$prefix}-border-hover: #{$grey-light};
-  --#{$prefix}-border-light: #{$grey-lightest};
-  --#{$prefix}-border-light-hover: #{$grey-light};
-  --#{$prefix}-text: #{$grey-dark};
-  --#{$prefix}-text-invert: #{findCSSVarColorInvert($text)};
-  --#{$prefix}-text-light: #{$grey};
-  --#{$prefix}-text-strong: #{$grey-darker};
-  --#{$prefix}-code: #{$red};
-  --#{$prefix}-code-background: #{$background};
-  --#{$prefix}-pre: #{$text};
-  --#{$prefix}-pre-background: #{$background};
-  --#{$prefix}-link: #{$blue};
-  --#{$prefix}-link-invert: #{findCSSVarColorInvert($link)};
-  --#{$prefix}-link-light: #{findCSSVarLightColor($link)};
-  --#{$prefix}-link-dark: #{findCSSVarDarkColor($link)};
-  --#{$prefix}-link-visited: #{$purple};
-  --#{$prefix}-link-hover: #{$grey-darker};
-  --#{$prefix}-link-hover-border: #{$grey-light};
-  --#{$prefix}-link-focus: #{$grey-darker};
-  --#{$prefix}-link-focus-border: #{$blue};
-  --#{$prefix}-link-active: #{$grey-darker};
-  --#{$prefix}-link-active-border: #{$grey-dark};
+  --#{$prefix}white: #{$white};
+  --#{$prefix}black: #{$black};
+  --#{$prefix}black-transparent: #{rgba(#000, 0.7)};
+  --#{$prefix}scheme-main: #{$white};
+  --#{$prefix}scheme-main-bis: #{$white-bis};
+  --#{$prefix}scheme-main-ter: #{$white-ter};
+  --#{$prefix}scheme-invert: #{$black};
+  --#{$prefix}scheme-invert-bis: #{$black-bis};
+  --#{$prefix}scheme-invert-ter: #{$black-ter};
+  --#{$prefix}background: #{$white-ter};
+  --#{$prefix}border: #{$grey-lighter};
+  --#{$prefix}border-hover: #{$grey-light};
+  --#{$prefix}border-light: #{$grey-lightest};
+  --#{$prefix}border-light-hover: #{$grey-light};
+  --#{$prefix}text: #{$grey-dark};
+  --#{$prefix}text-invert: #{findCSSVarColorInvert($text)};
+  --#{$prefix}text-light: #{$grey};
+  --#{$prefix}text-strong: #{$grey-darker};
+  --#{$prefix}code: #{$red};
+  --#{$prefix}code-background: #{$background};
+  --#{$prefix}pre: #{$text};
+  --#{$prefix}pre-background: #{$background};
+  --#{$prefix}link: #{$blue};
+  --#{$prefix}link-invert: #{findCSSVarColorInvert($link)};
+  --#{$prefix}link-light: #{findCSSVarLightColor($link)};
+  --#{$prefix}link-dark: #{findCSSVarDarkColor($link)};
+  --#{$prefix}link-visited: #{$purple};
+  --#{$prefix}link-hover: #{$grey-darker};
+  --#{$prefix}link-hover-border: #{$grey-light};
+  --#{$prefix}link-focus: #{$grey-darker};
+  --#{$prefix}link-focus-border: #{$blue};
+  --#{$prefix}link-active: #{$grey-darker};
+  --#{$prefix}link-active-border: #{$grey-dark};
 
   @each $name, $color in $cssvar-colors {
     @include cssvar($name, $color);
   }
 }
 
-$white: var(--#{$prefix}-white);
-$black: var(--#{$prefix}-black);
-$black-transparent: var(--#{$prefix}-black-transparent);
-$scheme-main: var(--#{$prefix}-scheme-main);
-$scheme-main-bis: var(--#{$prefix}-scheme-main-bis);
-$scheme-main-ter: var(--#{$prefix}-scheme-main-ter);
-$scheme-invert: var(--#{$prefix}-scheme-invert);
-$scheme-invert-bis: var(--#{$prefix}-scheme-invert-bis);
-$scheme-invert-ter: var(--#{$prefix}-scheme-invert-ter);
-$background: var(--#{$prefix}-background);
-$border: var(--#{$prefix}-border);
-$border-hover: var(--#{$prefix}-border-hover);
-$border-light: var(--#{$prefix}-border-light);
-$border-light-hover: var(--#{$prefix}-border-light-hover);
-$text: var(--#{$prefix}-text);
-$text-invert: var(--#{$prefix}-text-invert);
-$text-light: var(--#{$prefix}-text-light);
-$text-strong: var(--#{$prefix}-text-strong);
-$code: var(--#{$prefix}-code);
-$code-background: var(--#{$prefix}-code-background);
-$pre: var(--#{$prefix}-pre);
-$pre-background: var(--#{$prefix}-pre-background);
-$link: var(--#{$prefix}-link);
-$link-invert: var(--#{$prefix}-link-invert);
-$link-light: var(--#{$prefix}-link-light);
-$link-dark: var(--#{$prefix}-link-dark);
-$link-visited: var(--#{$prefix}-link-visited);
-$link-hover: var(--#{$prefix}-link-hover);
-$link-hover-border: var(--#{$prefix}-link-hover-border);
-$link-focus: var(--#{$prefix}-link-focus);
-$link-focus-border: var(--#{$prefix}-link-focus-border);
-$link-active: var(--#{$prefix}-link-active);
-$link-active-border: var(--#{$prefix}-link-active-border);
+$white: var(--#{$prefix}white);
+$black: var(--#{$prefix}black);
+$black-transparent: var(--#{$prefix}black-transparent);
+$scheme-main: var(--#{$prefix}scheme-main);
+$scheme-main-bis: var(--#{$prefix}scheme-main-bis);
+$scheme-main-ter: var(--#{$prefix}scheme-main-ter);
+$scheme-invert: var(--#{$prefix}scheme-invert);
+$scheme-invert-bis: var(--#{$prefix}scheme-invert-bis);
+$scheme-invert-ter: var(--#{$prefix}scheme-invert-ter);
+$background: var(--#{$prefix}background);
+$border: var(--#{$prefix}border);
+$border-hover: var(--#{$prefix}border-hover);
+$border-light: var(--#{$prefix}border-light);
+$border-light-hover: var(--#{$prefix}border-light-hover);
+$text: var(--#{$prefix}text);
+$text-invert: var(--#{$prefix}text-invert);
+$text-light: var(--#{$prefix}text-light);
+$text-strong: var(--#{$prefix}text-strong);
+$code: var(--#{$prefix}code);
+$code-background: var(--#{$prefix}code-background);
+$pre: var(--#{$prefix}pre);
+$pre-background: var(--#{$prefix}pre-background);
+$link: var(--#{$prefix}link);
+$link-invert: var(--#{$prefix}link-invert);
+$link-light: var(--#{$prefix}link-light);
+$link-dark: var(--#{$prefix}link-dark);
+$link-visited: var(--#{$prefix}link-visited);
+$link-hover: var(--#{$prefix}link-hover);
+$link-hover-border: var(--#{$prefix}link-hover-border);
+$link-focus: var(--#{$prefix}link-focus);
+$link-focus-border: var(--#{$prefix}link-focus-border);
+$link-active: var(--#{$prefix}link-active);
+$link-active-border: var(--#{$prefix}link-active-border);
 
 html {
   background-color: $scheme-main;
diff --git a/docs/bulma-dark.sass b/docs/bulma-dark.sass
index 88119451..4a1f301b 100644
--- a/docs/bulma-dark.sass
+++ b/docs/bulma-dark.sass
@@ -1,6 +1,5 @@
 @import "../sass/utilities/initial-variables.sass"
 
-
 @media (prefers-color-scheme: light)
   .bd-scheme-dark
     display: none
@@ -14,7 +13,7 @@
   $scheme-invert-bis: $white-bis
   $scheme-invert-ter: $white-ter
   $background: $black-ter
-  $border: lime
+  $border: $grey-darker
   $border-hover: $grey-dark
   $border-light: $grey-darker
   $border-light-hover: $grey-dark
@@ -23,6 +22,11 @@
   $text-invert: $grey-darker
   $text-light: $grey
   $text-strong: $white
+  // Code colors
+  $code: $red
+  $code-background: $background
+  $pre: $text
+  $pre-background: $background
   // Link colors
   $link-hover: $white
   $link-hover-border: $grey-dark
@@ -33,82 +37,364 @@
   .bd-scheme-light
     display: none
   \:root
-    --#{$prefix}-scheme-main: #{$scheme-main}
-    --#{$prefix}-scheme-main-bis: #{$scheme-main-bis}
-    --#{$prefix}-scheme-main-ter: #{$scheme-main-ter}
-    --#{$prefix}-scheme-invert: #{$scheme-invert}
-    --#{$prefix}-scheme-invert-bis: #{$scheme-invert-bis}
-    --#{$prefix}-scheme-invert-ter: #{$scheme-invert-ter}
-    --#{$prefix}-background: #{$background}
-    --#{$prefix}-border: #{$border}
-    --#{$prefix}-border-hover: #{$border-hover}
-    --#{$prefix}-border-light: #{$border-light}
-    --#{$prefix}-border-light-hover: #{$border-light-hover}
-    --#{$prefix}-text: #{$text}
-    --#{$prefix}-text-invert: #{$text-invert}
-    --#{$prefix}-text-light: #{$text-light}
-    --#{$prefix}-text-strong: #{$text-strong}
-    --#{$prefix}-code: #{$code}
-    --#{$prefix}-code-background: #{$code-background}
-    --#{$prefix}-pre: #{$pre}
-    --#{$prefix}-pre-background: #{$pre-background}
-    --#{$prefix}-link: #{$link}
-    --#{$prefix}-link-invert: #{$link-invert}
-    --#{$prefix}-link-light: #{$link-light}
-    --#{$prefix}-link-dark: #{$link-dark}
-    --#{$prefix}-link-visited: #{$link-visited}
-    --#{$prefix}-link-hover: #{$link-hover}
-    --#{$prefix}-link-hover-border: #{$link-hover-border}
-    --#{$prefix}-link-focus: #{$link-focus}
-    --#{$prefix}-link-focus-border: #{$link-focus-border}
-    --#{$prefix}-link-active: #{$link-active}
-    --#{$prefix}-link-active-border: #{$link-active-border}
+    --#{$prefix}scheme-main: #{$scheme-main}
+    --#{$prefix}scheme-main-bis: #{$scheme-main-bis}
+    --#{$prefix}scheme-main-ter: #{$scheme-main-ter}
+    --#{$prefix}scheme-invert: #{$scheme-invert}
+    --#{$prefix}scheme-invert-bis: #{$scheme-invert-bis}
+    --#{$prefix}scheme-invert-ter: #{$scheme-invert-ter}
+    --#{$prefix}background: #{$background}
+    --#{$prefix}border: #{$border}
+    --#{$prefix}border-hover: #{$border-hover}
+    --#{$prefix}border-light: #{$border-light}
+    --#{$prefix}border-light-hover: #{$border-light-hover}
+    --#{$prefix}text: #{$text}
+    --#{$prefix}text-invert: #{$text-invert}
+    --#{$prefix}text-light: #{$text-light}
+    --#{$prefix}text-strong: #{$text-strong}
+    --#{$prefix}code: #{$code}
+    --#{$prefix}code-background: #{$code-background}
+    --#{$prefix}pre: #{$pre}
+    --#{$prefix}pre-background: #{$pre-background}
+    --#{$prefix}link: #{$link}
+    --#{$prefix}link-invert: #{$link-invert}
+    --#{$prefix}link-light: #{$link-light}
+    --#{$prefix}link-dark: #{$link-dark}
+    --#{$prefix}link-visited: #{$link-visited}
+    --#{$prefix}link-hover: #{$link-hover}
+    --#{$prefix}link-hover-border: #{$link-hover-border}
+    --#{$prefix}link-focus: #{$link-focus}
+    --#{$prefix}link-focus-border: #{$link-focus-border}
+    --#{$prefix}link-active: #{$link-active}
+    --#{$prefix}link-active-border: #{$link-active-border}
   .bd-navbar
-    background-color: var(--#{$prefix}-scheme-main-bis)
+    background-color: $scheme-main-bis
     &.has-shadow
       box-shadow: none
+    .navbar-burger
+      color: $text
+    .navbar-item,
+    .navbar-link
+      color: $text
+    a.navbar-item,
+    .navbar-link
+      &:focus,
+      &:focus-within,
+      &:hover,
+      &.is-active
+        background-color: $scheme-main-bis
+        color: $link
+    .navbar-divider
+      background-color: $background
+    +until($navbar-breakpoint)
+      .navbar-menu
+        background-color: $scheme-main
+        box-shadow: 0 8px 16px rgba($scheme-invert, 0.1)
+    +from($navbar-breakpoint)
+      .navbar-dropdown
+        background-color: $scheme-main-bis
+        border-top-color: $border
+        box-shadow: 0 8px 8px rgba($scheme-invert, 0.1)
+        a.navbar-item
+          &:focus,
+          &:hover
+            background-color: $background
+            color: $scheme-invert
+          &.is-active
+            background-color: $background
+            color: $white
+      a.navbar-item,
+      .navbar-link
+        &.is-active
+          color: $white
+        &.is-active:not(:focus)
+          background-color: $background
+      .navbar-item.has-dropdown
+        &:focus,
+        &:hover,
+        &.is-active
+          .navbar-link
+            background-color: $background
+  .card
+    background-color: $scheme-main-bis
+    box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
+  .card-header
+    box-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1)
+  .dropdown-content
+    background-color: $scheme-main-bis
+    box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
+  .media .media,
+  .media + .media
+    border-top-color: rgba($border, 0.5)
+  .pagination-previous,
+  .pagination-next,
+  .pagination-link
+    &:active
+      box-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2)
+  .panel
+    background-color: $scheme-main-bis
+    box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
+  .box
+    box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)
+  a.box
+    &:hover,
+    &:focus
+      box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link
+    &:active
+      box-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link
 
 html
-  background-color: var(--#{$prefix}-scheme-main)
+  background-color: var(--#{$prefix}scheme-main)
 
 body
-  color: var(--#{$prefix}-text)
+  color: var(--#{$prefix}text)
 
 a
-  color: var(--#{$prefix}-link)
+  color: var(--#{$prefix}link)
 
   &:hover
-    color: var(--#{$prefix}-link-hover)
+    color: var(--#{$prefix}link-hover)
 
 code
-  background-color: var(--#{$prefix}-code-background)
-  color: var(--#{$prefix}-code)
+  background-color: var(--#{$prefix}code-background)
+  color: var(--#{$prefix}code)
 
 hr
-  background-color: var(--#{$prefix}-background)
+  background-color: var(--#{$prefix}background)
 
 strong
-  color: var(--#{$prefix}-text-strong)
+  color: var(--#{$prefix}text-strong)
 
 pre
-  background-color: var(--#{$prefix}-pre-background)
-  color: var(--#{$prefix}-pre)
+  background-color: var(--#{$prefix}pre-background)
+  color: var(--#{$prefix}pre)
 
 table
   th
-    color: var(--#{$prefix}-text-strong)
+    color: var(--#{$prefix}text-strong)
+
+// Components
+.breadcrumb
+  a
+    color: var(--#{$prefix}link)
+    &:hover
+      color: var(--#{$prefix}link-hover)
+  li
+    &.is-active
+      a
+        color: var(--#{$prefix}text-strong)
+    & + li::before
+      color: var(--#{$prefix}border-hover)
+
+.card
+  // background-color: var(--#{$prefix}scheme-main)
+  color: var(--#{$prefix}text)
+
+.card-header-title
+  color: var(--#{$prefix}text-strong)
+
+.card-footer
+  border-top-color: var(--#{$prefix}border-light)
+
+.card-footer-item
+  &:not(:last-child)
+    border-right-color: var(--#{$prefix}border-light)
+
+.dropdown-content
+  // background-color: var(--#{$prefix}scheme-main)
+
+.dropdown-item
+  color: var(--#{$prefix}text)
+
+a.dropdown-item,
+button.dropdown-item
+  &:hover
+    background-color: var(--#{$prefix}background)
+    color: var(--#{$prefix}scheme-invert)
+  &.is-active
+    background-color: var(--#{$prefix}link)
+    color: var(--#{$prefix}link-invert)
+
+.dropdown-divider
+  background-color: var(--#{$prefix}border-light)
+
+.menu-list
+  a
+    color: var(--#{$prefix}text)
+    &:hover
+      background-color: var(--#{$prefix}background)
+      color: var(--#{$prefix}text-strong)
+    &.is-active
+      background-color: var(--#{$prefix}link)
+      color: var(--#{$prefix}link-invert)
+  li
+    ul
+      border-left-color: var(--#{$prefix}border)
+
+.menu-label
+  color: var(--#{$prefix}text-light)
+
+// .message
+//   background-color: var(--#{$prefix}background)
+
+// .message-header
+//   background-color: var(--#{$prefix}text)
+//   color: var(--#{$prefix}text-invert)
+
+// .message-body
+//   border-color: var(--#{$prefix}border)
+//   color: var(--#{$prefix}text)
+//   code,
+//   pre
+//     background-color: var(--#{$prefix}scheme-main)
+
+.modal-card-head,
+.modal-card-foot
+  background-color: var(--#{$prefix}background)
+
+.modal-card-head
+  border-bottom-color: var(--#{$prefix}border)
+
+.modal-card-title
+  color: var(--#{$prefix}text-strong)
+
+.modal-card-foot
+  border-top-color: var(--#{$prefix}border)
+
+.modal-card-body
+  background-color: var(--#{$prefix}scheme-main)
+
+// .navbar
+//   background-color: var(--#{$prefix}scheme-main)
+
+// .navbar-burger
+//   color: var(--#{$prefix}text)
+
+// .navbar-item,
+// .navbar-link
+//   color: var(--#{$prefix}text)
+
+// a.navbar-item,
+// .navbar-link
+//   cursor: pointer
+//   &:focus,
+//   &:focus-within,
+//   &:hover,
+//   &.is-active
+//     background-color: var(--#{$prefix}scheme-main-bis)
+//     color: var(--#{$prefix}link)
+
+.pagination-previous,
+.pagination-next,
+.pagination-link
+  border-color: var(--#{$prefix}border)
+  color: var(--#{$prefix}text-strong)
+  &:hover
+    border-color: var(--#{$prefix}link-hover-border)
+    color: var(--#{$prefix}link-hover)
+  &:focus
+    border-color: var(--#{$prefix}link-focus-border)
+  &[disabled]
+    background-color: var(--#{$prefix}border)
+    border-color: var(--#{$prefix}border)
+    color: var(--#{$prefix}text-light)
+
+.pagination-link
+  &.is-current
+    background-color: var(--#{$prefix}link)
+    border-color: var(--#{$prefix}link)
+    color: var(--#{$prefix}link-invert)
+
+.pagination-ellipsis
+  color: var(--#{$prefix}border-hover)
+
+.panel-tabs,
+.panel-block
+  &:not(:last-child)
+    border-bottom-color: var(--#{$prefix}border-light)
+
+.panel-heading
+  background-color: var(--#{$prefix}border-light)
+  color: var(--#{$prefix}text-strong)
+
+.panel-tabs
+  a
+    border-bottom-color: var(--#{$prefix}border)
+    &.is-active
+      border-bottom-color: var(--#{$prefix}link-active-border)
+      color: var(--#{$prefix}link-active)
+
+.panel-list
+  a
+    color: var(--#{$prefix}text)
+    &:hover
+      color: var(--#{$prefix}link)
+
+.panel-block
+  color: var(--#{$prefix}text-strong)
+  &.is-active
+    border-left-color: var(--#{$prefix}link)
+    color: var(--#{$prefix}link-active)
+    .panel-icon
+      color: var(--#{$prefix}link)
+
+a.panel-block,
+label.panel-block
+  &:hover
+    background-color: var(--#{$prefix}background)
+
+.panel-icon
+  color: var(--#{$prefix}text-light)
+
+.tabs
+  a
+    border-bottom-color: var(--#{$prefix}border)
+    color: var(--#{$prefix}text)
+    &:hover
+      border-bottom-color: var(--#{$prefix}text-strong)
+      color: var(--#{$prefix}text-strong)
+  li
+    &.is-active
+      a
+        border-bottom-color: var(--#{$prefix}link)
+        color: var(--#{$prefix}link)
+  ul
+    border-bottom-color: var(--#{$prefix}border)
+  &.is-boxed
+    a
+      &:hover
+        background-color: var(--#{$prefix}background)
+        border-bottom-color: var(--#{$prefix}border)
+    li
+      &.is-active
+        a
+          background-color: var(--#{$prefix}scheme-main)
+          border-color: var(--#{$prefix}border)
+  &.is-toggle
+    a
+      border-color: var(--#{$prefix}border)
+      &:hover
+        background-color: var(--#{$prefix}background)
+        border-color: var(--#{$prefix}border-hover)
+    li
+      &.is-active
+        a
+          background-color: var(--#{$prefix}link)
+          border-color: var(--#{$prefix}link)
+          color: var(--#{$prefix}link-invert)
+
+// Elements
+.box
+  background-color: var(--#{$prefix}scheme-main)
+  color: var(--#{$prefix}text)
 
 .title
-  color: var(--#{$prefix}-text-strong)
+  color: var(--#{$prefix}text-strong)
 
 .subtitle
-  color: var(--#{$prefix}-text)
+  color: var(--#{$prefix}text)
   strong
-    color: var(--#{$prefix}-text-strong)
+    color: var(--#{$prefix}text-strong)
 
 .footer
-  background-color: var(--#{$prefix}-scheme-main-bis)
-
-.media .media,
-.media + .media
-  border-top-color: rgba(var(--#{$prefix}-border), 0.5)
+  background-color: var(--#{$prefix}scheme-main-bis)
diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index c27cfbda..22f1739f 100644
--- a/docs/bulma-docs.sass
+++ b/docs/bulma-docs.sass
@@ -39,7 +39,7 @@ $sidebar-width: 10.5rem
 //
 // 3. Assign CSS vars to elements/components
 // html
-//   background-color: var(--#{$prefix}-scheme-main)
+//   background-color: var(--#{$prefix}scheme-main)
 //
 
 %center
@@ -48,7 +48,7 @@ $sidebar-width: 10.5rem
   justify-content: center
 
 %bd-box
-  background-color: var(--#{$prefix}-scheme-main)
+  background-color: var(--#{$prefix}scheme-main)
   border-radius: $radius-large
   box-shadow: 0 1.5rem 1.5rem -1.25rem rgba($black, 0.05)
   display: block
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index cfc0c36e..ff06acf6 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -10805,16 +10805,16 @@ label.panel-block:hover {
 }
 
 :root {
-  --bulma--white: white;
-  --bulma--black: #0a0a0a;
-  --bulma--black-transparent: rgba(0, 0, 0, 0.7);
+  --bulma-white: white;
+  --bulma-black: #0a0a0a;
+  --bulma-black-transparent: rgba(0, 0, 0, 0.7);
   --bulma-primary-h: 171deg;
   --bulma-primary-s: 100%;
   --bulma-primary-l: 41%;
   --bulma-primary: hsl(var(--bulma-primary-h), calc(var(--bulma-primary-s)), calc(var(--bulma-primary-l)));
   --bulma-primary-hover: hsl(var(--bulma-primary-h), calc(var(--bulma-primary-s)), calc(var(--bulma-primary-l) - 5%));
   --bulma-primary-active: hsl(var(--bulma-primary-h), calc(var(--bulma-primary-s)), calc(var(--bulma-primary-l) - 10%));
-  --bulma-primary-invert: var(--bulma--white);
+  --bulma-primary-invert: var(--bulma-white);
   --bulma-primary-light: #ebfffc;
   --bulma-primary-light-hover: #d1fff8;
   --bulma-primary-light-active: #b8fff4;
@@ -10827,7 +10827,7 @@ label.panel-block:hover {
   --bulma-link: hsl(var(--bulma-link-h), calc(var(--bulma-link-s)), calc(var(--bulma-link-l)));
   --bulma-link-hover: hsl(var(--bulma-link-h), calc(var(--bulma-link-s)), calc(var(--bulma-link-l) - 5%));
   --bulma-link-active: hsl(var(--bulma-link-h), calc(var(--bulma-link-s)), calc(var(--bulma-link-l) - 10%));
-  --bulma-link-invert: var(--bulma--white);
+  --bulma-link-invert: var(--bulma-white);
   --bulma-link-light: #eef3fc;
   --bulma-link-light-hover: #d8e4f8;
   --bulma-link-light-active: #c2d5f5;
@@ -10840,7 +10840,7 @@ label.panel-block:hover {
   --bulma-info: hsl(var(--bulma-info-h), calc(var(--bulma-info-s)), calc(var(--bulma-info-l)));
   --bulma-info-hover: hsl(var(--bulma-info-h), calc(var(--bulma-info-s)), calc(var(--bulma-info-l) - 5%));
   --bulma-info-active: hsl(var(--bulma-info-h), calc(var(--bulma-info-s)), calc(var(--bulma-info-l) - 10%));
-  --bulma-info-invert: var(--bulma--white);
+  --bulma-info-invert: var(--bulma-white);
   --bulma-info-light: #eef6fc;
   --bulma-info-light-hover: #d8ebf8;
   --bulma-info-light-active: #c2e0f5;
@@ -10853,7 +10853,7 @@ label.panel-block:hover {
   --bulma-success: hsl(var(--bulma-success-h), calc(var(--bulma-success-s)), calc(var(--bulma-success-l)));
   --bulma-success-hover: hsl(var(--bulma-success-h), calc(var(--bulma-success-s)), calc(var(--bulma-success-l) - 5%));
   --bulma-success-active: hsl(var(--bulma-success-h), calc(var(--bulma-success-s)), calc(var(--bulma-success-l) - 10%));
-  --bulma-success-invert: var(--bulma--white);
+  --bulma-success-invert: var(--bulma-white);
   --bulma-success-light: #effaf3;
   --bulma-success-light-hover: #dcf4e4;
   --bulma-success-light-active: #c8eed6;
@@ -10866,7 +10866,7 @@ label.panel-block:hover {
   --bulma-warning: hsl(var(--bulma-warning-h), calc(var(--bulma-warning-s)), calc(var(--bulma-warning-l)));
   --bulma-warning-hover: hsl(var(--bulma-warning-h), calc(var(--bulma-warning-s)), calc(var(--bulma-warning-l) - 5%));
   --bulma-warning-active: hsl(var(--bulma-warning-h), calc(var(--bulma-warning-s)), calc(var(--bulma-warning-l) - 10%));
-  --bulma-warning-invert: var(--bulma--black-transparent);
+  --bulma-warning-invert: var(--bulma-black-transparent);
   --bulma-warning-light: #fffbeb;
   --bulma-warning-light-hover: #fff6d1;
   --bulma-warning-light-active: #fff1b8;
@@ -10879,7 +10879,7 @@ label.panel-block:hover {
   --bulma-danger: hsl(var(--bulma-danger-h), calc(var(--bulma-danger-s)), calc(var(--bulma-danger-l)));
   --bulma-danger-hover: hsl(var(--bulma-danger-h), calc(var(--bulma-danger-s)), calc(var(--bulma-danger-l) - 5%));
   --bulma-danger-active: hsl(var(--bulma-danger-h), calc(var(--bulma-danger-s)), calc(var(--bulma-danger-l) - 10%));
-  --bulma-danger-invert: var(--bulma--white);
+  --bulma-danger-invert: var(--bulma-white);
   --bulma-danger-light: #feecf0;
   --bulma-danger-light-hover: #fcd4dc;
   --bulma-danger-light-active: #fabdc9;
@@ -10892,7 +10892,7 @@ label.panel-block:hover {
   --bulma-light: hsl(var(--bulma-light-h), calc(var(--bulma-light-s)), calc(var(--bulma-light-l)));
   --bulma-light-hover: hsl(var(--bulma-light-h), calc(var(--bulma-light-s)), calc(var(--bulma-light-l) - 5%));
   --bulma-light-active: hsl(var(--bulma-light-h), calc(var(--bulma-light-s)), calc(var(--bulma-light-l) - 10%));
-  --bulma-light-invert: var(--bulma--black-transparent);
+  --bulma-light-invert: var(--bulma-black-transparent);
   --bulma-light-light: whitesmoke;
   --bulma-light-light-hover: #e8e8e8;
   --bulma-light-light-active: #dbdbdb;
@@ -10905,7 +10905,7 @@ label.panel-block:hover {
   --bulma-dark: hsl(var(--bulma-dark-h), calc(var(--bulma-dark-s)), calc(var(--bulma-dark-l)));
   --bulma-dark-hover: hsl(var(--bulma-dark-h), calc(var(--bulma-dark-s)), calc(var(--bulma-dark-l) - 5%));
   --bulma-dark-active: hsl(var(--bulma-dark-h), calc(var(--bulma-dark-s)), calc(var(--bulma-dark-l) - 10%));
-  --bulma-dark-invert: var(--bulma--white);
+  --bulma-dark-invert: var(--bulma-white);
   --bulma-dark-light: whitesmoke;
   --bulma-dark-light-hover: #e8e8e8;
   --bulma-dark-light-active: #dbdbdb;
@@ -10925,102 +10925,416 @@ label.panel-block:hover {
     display: none;
   }
   :root {
-    --bulma--scheme-main: #0a0a0a;
-    --bulma--scheme-main-bis: #121212;
-    --bulma--scheme-main-ter: #242424;
-    --bulma--scheme-invert: white;
-    --bulma--scheme-invert-bis: #fafafa;
-    --bulma--scheme-invert-ter: whitesmoke;
-    --bulma--background: #242424;
-    --bulma--border: lime;
-    --bulma--border-hover: #4a4a4a;
-    --bulma--border-light: #363636;
-    --bulma--border-light-hover: #4a4a4a;
-    --bulma--text: #b5b5b5;
-    --bulma--text-invert: #363636;
-    --bulma--text-light: #7a7a7a;
-    --bulma--text-strong: white;
-    --bulma--code: #f14668;
-    --bulma--code-background: whitesmoke;
-    --bulma--pre: #4a4a4a;
-    --bulma--pre-background: whitesmoke;
-    --bulma--link: #3273dc;
-    --bulma--link-invert: #fff;
-    --bulma--link-light: #eef3fc;
-    --bulma--link-dark: #2160c4;
-    --bulma--link-visited: #b86bff;
-    --bulma--link-hover: white;
-    --bulma--link-hover-border: #4a4a4a;
-    --bulma--link-focus: white;
-    --bulma--link-focus-border: #3273dc;
-    --bulma--link-active: white;
-    --bulma--link-active-border: #b5b5b5;
+    --bulma-scheme-main: #0a0a0a;
+    --bulma-scheme-main-bis: #121212;
+    --bulma-scheme-main-ter: #242424;
+    --bulma-scheme-invert: white;
+    --bulma-scheme-invert-bis: #fafafa;
+    --bulma-scheme-invert-ter: whitesmoke;
+    --bulma-background: #242424;
+    --bulma-border: #363636;
+    --bulma-border-hover: #4a4a4a;
+    --bulma-border-light: #363636;
+    --bulma-border-light-hover: #4a4a4a;
+    --bulma-text: #b5b5b5;
+    --bulma-text-invert: #363636;
+    --bulma-text-light: #7a7a7a;
+    --bulma-text-strong: white;
+    --bulma-code: #f14668;
+    --bulma-code-background: #242424;
+    --bulma-pre: #b5b5b5;
+    --bulma-pre-background: #242424;
+    --bulma-link: #3273dc;
+    --bulma-link-invert: #fff;
+    --bulma-link-light: #eef3fc;
+    --bulma-link-dark: #2160c4;
+    --bulma-link-visited: #b86bff;
+    --bulma-link-hover: white;
+    --bulma-link-hover-border: #4a4a4a;
+    --bulma-link-focus: white;
+    --bulma-link-focus-border: #3273dc;
+    --bulma-link-active: white;
+    --bulma-link-active-border: #b5b5b5;
   }
   .bd-navbar {
-    background-color: var(--bulma--scheme-main-bis);
+    background-color: #121212;
   }
   .bd-navbar.has-shadow {
     box-shadow: none;
   }
+  .bd-navbar .navbar-burger {
+    color: #b5b5b5;
+  }
+  .bd-navbar .navbar-item,
+  .bd-navbar .navbar-link {
+    color: #b5b5b5;
+  }
+  .bd-navbar a.navbar-item:focus, .bd-navbar a.navbar-item:focus-within, .bd-navbar a.navbar-item:hover, .bd-navbar a.navbar-item.is-active,
+  .bd-navbar .navbar-link:focus,
+  .bd-navbar .navbar-link:focus-within,
+  .bd-navbar .navbar-link:hover,
+  .bd-navbar .navbar-link.is-active {
+    background-color: #121212;
+    color: #3273dc;
+  }
+  .bd-navbar .navbar-divider {
+    background-color: #242424;
+  }
+}
+
+@media screen and (prefers-color-scheme: dark) and (max-width: 1023px) {
+  .bd-navbar .navbar-menu {
+    background-color: #0a0a0a;
+    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.1);
+  }
+}
+
+@media screen and (prefers-color-scheme: dark) and (min-width: 1024px) {
+  .bd-navbar .navbar-dropdown {
+    background-color: #121212;
+    border-top-color: #363636;
+    box-shadow: 0 8px 8px rgba(255, 255, 255, 0.1);
+  }
+  .bd-navbar .navbar-dropdown a.navbar-item:focus, .bd-navbar .navbar-dropdown a.navbar-item:hover {
+    background-color: #242424;
+    color: white;
+  }
+  .bd-navbar .navbar-dropdown a.navbar-item.is-active {
+    background-color: #242424;
+    color: white;
+  }
+  .bd-navbar a.navbar-item.is-active,
+  .bd-navbar .navbar-link.is-active {
+    color: white;
+  }
+  .bd-navbar a.navbar-item.is-active:not(:focus),
+  .bd-navbar .navbar-link.is-active:not(:focus) {
+    background-color: #242424;
+  }
+  .bd-navbar .navbar-item.has-dropdown:focus .navbar-link, .bd-navbar .navbar-item.has-dropdown:hover .navbar-link, .bd-navbar .navbar-item.has-dropdown.is-active .navbar-link {
+    background-color: #242424;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .card {
+    background-color: #121212;
+    box-shadow: 0 0.5em 1em -0.125em rgba(255, 255, 255, 0.1), 0 0px 0 1px rgba(255, 255, 255, 0.02);
+  }
+  .card-header {
+    box-shadow: 0 0.125em 0.25em rgba(255, 255, 255, 0.1);
+  }
+  .dropdown-content {
+    background-color: #121212;
+    box-shadow: 0 0.5em 1em -0.125em rgba(255, 255, 255, 0.1), 0 0px 0 1px rgba(255, 255, 255, 0.02);
+  }
+  .media .media,
+  .media + .media {
+    border-top-color: rgba(54, 54, 54, 0.5);
+  }
+  .pagination-previous:active,
+  .pagination-next:active,
+  .pagination-link:active {
+    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2);
+  }
+  .panel {
+    background-color: #121212;
+    box-shadow: 0 0.5em 1em -0.125em rgba(255, 255, 255, 0.1), 0 0px 0 1px rgba(255, 255, 255, 0.02);
+  }
+  .box {
+    box-shadow: 0 0.5em 1em -0.125em rgba(255, 255, 255, 0.1), 0 0px 0 1px rgba(255, 255, 255, 0.02);
+  }
+  a.box:hover, a.box:focus {
+    box-shadow: 0 0.5em 1em -0.125em rgba(255, 255, 255, 0.1), 0 0 0 1px #3273dc;
+  }
+  a.box:active {
+    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 0 0 1px #3273dc;
+  }
 }
 
 html {
-  background-color: var(--bulma--scheme-main);
+  background-color: var(--bulma-scheme-main);
 }
 
 body {
-  color: var(--bulma--text);
+  color: var(--bulma-text);
 }
 
 a {
-  color: var(--bulma--link);
+  color: var(--bulma-link);
 }
 
 a:hover {
-  color: var(--bulma--link-hover);
+  color: var(--bulma-link-hover);
 }
 
 code {
-  background-color: var(--bulma--code-background);
-  color: var(--bulma--code);
+  background-color: var(--bulma-code-background);
+  color: var(--bulma-code);
 }
 
 hr {
-  background-color: var(--bulma--background);
+  background-color: var(--bulma-background);
 }
 
 strong {
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
 }
 
 pre {
-  background-color: var(--bulma--pre-background);
-  color: var(--bulma--pre);
+  background-color: var(--bulma-pre-background);
+  color: var(--bulma-pre);
 }
 
 table th {
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
+}
+
+.breadcrumb a {
+  color: var(--bulma-link);
+}
+
+.breadcrumb a:hover {
+  color: var(--bulma-link-hover);
+}
+
+.breadcrumb li.is-active a {
+  color: var(--bulma-text-strong);
+}
+
+.breadcrumb li + li::before {
+  color: var(--bulma-border-hover);
+}
+
+.card {
+  color: var(--bulma-text);
+}
+
+.card-header-title {
+  color: var(--bulma-text-strong);
+}
+
+.card-footer {
+  border-top-color: var(--bulma-border-light);
+}
+
+.card-footer-item:not(:last-child) {
+  border-right-color: var(--bulma-border-light);
+}
+
+.dropdown-item {
+  color: var(--bulma-text);
+}
+
+a.dropdown-item:hover,
+button.dropdown-item:hover {
+  background-color: var(--bulma-background);
+  color: var(--bulma-scheme-invert);
+}
+
+a.dropdown-item.is-active,
+button.dropdown-item.is-active {
+  background-color: var(--bulma-link);
+  color: var(--bulma-link-invert);
+}
+
+.dropdown-divider {
+  background-color: var(--bulma-border-light);
+}
+
+.menu-list a {
+  color: var(--bulma-text);
+}
+
+.menu-list a:hover {
+  background-color: var(--bulma-background);
+  color: var(--bulma-text-strong);
+}
+
+.menu-list a.is-active {
+  background-color: var(--bulma-link);
+  color: var(--bulma-link-invert);
+}
+
+.menu-list li ul {
+  border-left-color: var(--bulma-border);
+}
+
+.menu-label {
+  color: var(--bulma-text-light);
+}
+
+.modal-card-head,
+.modal-card-foot {
+  background-color: var(--bulma-background);
+}
+
+.modal-card-head {
+  border-bottom-color: var(--bulma-border);
+}
+
+.modal-card-title {
+  color: var(--bulma-text-strong);
+}
+
+.modal-card-foot {
+  border-top-color: var(--bulma-border);
+}
+
+.modal-card-body {
+  background-color: var(--bulma-scheme-main);
+}
+
+.pagination-previous,
+.pagination-next,
+.pagination-link {
+  border-color: var(--bulma-border);
+  color: var(--bulma-text-strong);
+}
+
+.pagination-previous:hover,
+.pagination-next:hover,
+.pagination-link:hover {
+  border-color: var(--bulma-link-hover-border);
+  color: var(--bulma-link-hover);
+}
+
+.pagination-previous:focus,
+.pagination-next:focus,
+.pagination-link:focus {
+  border-color: var(--bulma-link-focus-border);
+}
+
+.pagination-previous[disabled],
+.pagination-next[disabled],
+.pagination-link[disabled] {
+  background-color: var(--bulma-border);
+  border-color: var(--bulma-border);
+  color: var(--bulma-text-light);
+}
+
+.pagination-link.is-current {
+  background-color: var(--bulma-link);
+  border-color: var(--bulma-link);
+  color: var(--bulma-link-invert);
+}
+
+.pagination-ellipsis {
+  color: var(--bulma-border-hover);
+}
+
+.panel-tabs:not(:last-child),
+.panel-block:not(:last-child) {
+  border-bottom-color: var(--bulma-border-light);
+}
+
+.panel-heading {
+  background-color: var(--bulma-border-light);
+  color: var(--bulma-text-strong);
+}
+
+.panel-tabs a {
+  border-bottom-color: var(--bulma-border);
+}
+
+.panel-tabs a.is-active {
+  border-bottom-color: var(--bulma-link-active-border);
+  color: var(--bulma-link-active);
+}
+
+.panel-list a {
+  color: var(--bulma-text);
+}
+
+.panel-list a:hover {
+  color: var(--bulma-link);
+}
+
+.panel-block {
+  color: var(--bulma-text-strong);
+}
+
+.panel-block.is-active {
+  border-left-color: var(--bulma-link);
+  color: var(--bulma-link-active);
+}
+
+.panel-block.is-active .panel-icon {
+  color: var(--bulma-link);
+}
+
+a.panel-block:hover,
+label.panel-block:hover {
+  background-color: var(--bulma-background);
+}
+
+.panel-icon {
+  color: var(--bulma-text-light);
+}
+
+.tabs a {
+  border-bottom-color: var(--bulma-border);
+  color: var(--bulma-text);
+}
+
+.tabs a:hover {
+  border-bottom-color: var(--bulma-text-strong);
+  color: var(--bulma-text-strong);
+}
+
+.tabs li.is-active a {
+  border-bottom-color: var(--bulma-link);
+  color: var(--bulma-link);
+}
+
+.tabs ul {
+  border-bottom-color: var(--bulma-border);
+}
+
+.tabs.is-boxed a:hover {
+  background-color: var(--bulma-background);
+  border-bottom-color: var(--bulma-border);
+}
+
+.tabs.is-boxed li.is-active a {
+  background-color: var(--bulma-scheme-main);
+  border-color: var(--bulma-border);
+}
+
+.tabs.is-toggle a {
+  border-color: var(--bulma-border);
+}
+
+.tabs.is-toggle a:hover {
+  background-color: var(--bulma-background);
+  border-color: var(--bulma-border-hover);
+}
+
+.tabs.is-toggle li.is-active a {
+  background-color: var(--bulma-link);
+  border-color: var(--bulma-link);
+  color: var(--bulma-link-invert);
+}
+
+.box {
+  background-color: var(--bulma-scheme-main);
+  color: var(--bulma-text);
 }
 
 .title {
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
 }
 
 .subtitle {
-  color: var(--bulma--text);
+  color: var(--bulma-text);
 }
 
 .subtitle strong {
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
 }
 
 .footer {
-  background-color: var(--bulma--scheme-main-bis);
-}
-
-.media .media,
-.media + .media {
-  border-top-color: rgba(var(--bulma--border), 0.5);
+  background-color: var(--bulma-scheme-main-bis);
 }
 
 .bd-columns-tool, .bd-footer-sponsor a, .bd-footer-donation-action, .bd-footer-star-figure, .bd-minis-title, .bd-minis-link, .bd-mini {
@@ -11030,7 +11344,7 @@ table th {
 }
 
 .bd-footer-support, .bd-footer-star, .bd-book-content {
-  background-color: var(--bulma--scheme-main);
+  background-color: var(--bulma-scheme-main);
   border-radius: 6px;
   box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10, 10, 10, 0.05);
   display: block;
@@ -11043,7 +11357,7 @@ table th {
 
 .bd-figure {
   align-items: center;
-  border: 2px solid var(--bulma--scheme-main-ter);
+  border: 2px solid var(--bulma-scheme-main-ter);
   border-radius: 4px;
   display: flex;
   flex-direction: column;
@@ -11060,8 +11374,8 @@ table th {
 
 .bd-figure figcaption {
   align-self: stretch;
-  background-color: var(--bulma--scheme-main-ter);
-  color: var(--bulma--text-light);
+  background-color: var(--bulma-scheme-main-ter);
+  color: var(--bulma-text-light);
   font-size: 0.75rem;
   padding: 1em;
 }
@@ -11082,7 +11396,7 @@ table th {
 
 .bd-prev-next {
   align-items: flex-start;
-  color: var(--bulma--border-hover);
+  color: var(--bulma-border-hover);
   display: none;
   flex-grow: 0;
   flex-shrink: 0;
@@ -11097,7 +11411,7 @@ table th {
 }
 
 .bd-prev-next a:hover {
-  background-color: var(--bulma--background);
+  background-color: var(--bulma-background);
 }
 
 .bd-prev-next-bis {
@@ -11124,7 +11438,7 @@ table th {
 }
 
 .bd-header .subtitle {
-  color: var(--bulma--text-light);
+  color: var(--bulma-text-light);
 }
 
 .bd-header .subtitle strong {
@@ -11155,14 +11469,14 @@ table th {
   }
   .bd-tabs .tabs ul,
   .bd-tabs .tabs a {
-    border-bottom-color: var(--bulma--scheme-main-ter);
+    border-bottom-color: var(--bulma-scheme-main-ter);
     border-bottom-width: 2px;
   }
   .bd-tabs .tabs a {
     margin-bottom: -2px;
   }
   .bd-tabs .tabs li:not(.is-active) a:hover {
-    border-bottom-color: var(--bulma--border);
+    border-bottom-color: var(--bulma-border);
   }
   .bd-tabs .tabs ul {
     flex-wrap: wrap;
@@ -11184,7 +11498,7 @@ table th {
 
 .bd-side,
 .bd-side-background {
-  background-color: var(--bulma--scheme-main-bis);
+  background-color: var(--bulma-scheme-main-bis);
 }
 
 .bd-side {
@@ -11208,23 +11522,23 @@ table th {
 }
 
 .bd-category-list li.is-past a, .bd-anchors-list li.is-past a {
-  color: var(--bulma--border-hover);
+  color: var(--bulma-border-hover);
 }
 
 .bd-category-list li.is-current a, .bd-anchors-list li.is-current a {
-  color: var(--bulma--link);
+  color: var(--bulma-link);
 }
 
 .bd-category-list a, .bd-anchors-list a {
-  color: var(--bulma--text-light);
+  color: var(--bulma-text-light);
 }
 
 .bd-category-list a:hover, .bd-anchors-list a:hover {
-  color: var(--bulma--link);
+  color: var(--bulma-link);
 }
 
 .bd-category a:hover {
-  color: var(--bulma--link);
+  color: var(--bulma-link);
 }
 
 .bd-category:not(:last-child) {
@@ -11250,7 +11564,7 @@ table th {
   right: 0;
   top: 0;
   align-items: center;
-  color: var(--bulma--border-hover);
+  color: var(--bulma-border-hover);
   display: flex;
   justify-content: flex-end;
 }
@@ -11272,12 +11586,12 @@ table th {
 }
 
 .bd-category-name {
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
   position: relative;
 }
 
 .bd-category-name.is-active {
-  color: var(--bulma--link);
+  color: var(--bulma-link);
 }
 
 .bd-category-name .bd-mini-tag {
@@ -11310,7 +11624,7 @@ table th {
 }
 
 .bd-anchors-title {
-  color: var(--bulma--border-hover);
+  color: var(--bulma-border-hover);
   font-size: 0.875rem;
   font-weight: 600;
   margin-bottom: 0.5rem;
@@ -11321,7 +11635,7 @@ table th {
 }
 
 .bd-anchors-list a {
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
 }
 
 @media screen and (max-width: 1023px) {
@@ -11345,7 +11659,7 @@ table th {
     display: flex;
   }
   .bd-lead {
-    background-color: var(--bulma--scheme-main);
+    background-color: var(--bulma-scheme-main);
     overflow: hidden;
     flex-grow: 1;
     flex-shrink: 1;
@@ -11402,7 +11716,7 @@ table th {
 }
 
 .highlight {
-  background-color: var(--bulma--pre-background);
+  background-color: var(--bulma-pre-background);
   border-radius: 6px;
   color: #586e75;
 }
@@ -11700,12 +12014,12 @@ svg {
 }
 
 .bd-notice-body a {
-  border-bottom: 1px solid rgba(var(--bulma--scheme-main), 0.5);
+  border-bottom: 1px solid rgba(var(--bulma-scheme-main), 0.5);
   padding-bottom: 2px;
 }
 
 .bd-notice-body a:hover {
-  border-bottom-color: var(--bulma--scheme-main);
+  border-bottom-color: var(--bulma-scheme-main);
 }
 
 .bd-notice-body span {
@@ -11807,8 +12121,8 @@ svg {
 }
 
 #carbon:hover {
-  background-color: var(--bulma--scheme-main);
-  box-shadow: 0 0 0 0.75rem var(--bulma--scheme-main);
+  background-color: var(--bulma-scheme-main);
+  box-shadow: 0 0 0 0.75rem var(--bulma-scheme-main);
 }
 
 @media screen and (min-width: 769px), print {
@@ -11861,7 +12175,7 @@ svg {
 }
 
 #carbonads .carbon-img:hover + .carbon-text {
-  color: var(--bulma--link);
+  color: var(--bulma-link);
 }
 
 #carbonads .carbon-img:active {
@@ -11870,19 +12184,19 @@ svg {
 
 #carbonads .carbon-text {
   display: block;
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
   line-height: 20px;
   min-height: 100px;
   padding: 0 0 20px calc(130px + 1rem);
 }
 
 #carbonads .carbon-text:hover {
-  color: var(--bulma--link);
+  color: var(--bulma-link);
 }
 
 #carbonads .carbon-poweredby {
   bottom: 0;
-  color: var(--bulma--border-hover);
+  color: var(--bulma-border-hover);
   display: inline;
   font-size: 0.75rem;
   line-height: 20px;
@@ -11932,7 +12246,7 @@ svg {
 }
 
 .bd-index-header a:hover strong {
-  color: var(--bulma--link);
+  color: var(--bulma-link);
 }
 
 .bd-index-header strong {
@@ -11944,7 +12258,7 @@ svg {
 }
 
 .bd-index-header .subtitle {
-  color: var(--bulma--border-hover) !important;
+  color: var(--bulma-border-hover) !important;
 }
 
 .bd-index-header .subtitle strong {
@@ -11970,7 +12284,7 @@ svg {
 }
 
 .bd-index-custom-title {
-  color: var(--bulma--border-hover);
+  color: var(--bulma-border-hover);
 }
 
 .bd-index-custom-example {
@@ -12025,7 +12339,7 @@ svg {
 
 .bd-index-custom.bd-is-after .button.is-primary {
   background-color: #8A4D76;
-  color: var(--bulma--scheme-main);
+  color: var(--bulma-scheme-main);
 }
 
 .bd-index-custom.bd-is-after .button.is-primary:hover {
@@ -12038,7 +12352,7 @@ svg {
 
 .bd-index-custom.bd-is-after .button.is-link {
   background-color: #FA7C91;
-  color: var(--bulma--scheme-main);
+  color: var(--bulma-scheme-main);
 }
 
 .bd-index-custom.bd-is-after .button.is-link:hover {
@@ -12051,16 +12365,16 @@ svg {
 
 .bd-index-custom.bd-is-after ::-moz-selection {
   background-color: #FA7C91;
-  color: var(--bulma--scheme-main);
+  color: var(--bulma-scheme-main);
 }
 
 .bd-index-custom.bd-is-after ::selection {
   background-color: #FA7C91;
-  color: var(--bulma--scheme-main);
+  color: var(--bulma-scheme-main);
 }
 
 .bd-index-fullscreen .tabs a {
-  color: var(--bulma--border-hover) !important;
+  color: var(--bulma-border-hover) !important;
 }
 
 #grid .notification {
@@ -12136,7 +12450,7 @@ svg {
 }
 
 .bd-focus-item .subtitle {
-  color: var(--bulma--border-hover);
+  color: var(--bulma-border-hover);
   position: relative;
 }
 
@@ -12150,7 +12464,7 @@ svg {
   position: absolute;
   right: 0;
   top: 0;
-  background-color: var(--bulma--scheme-main-bis);
+  background-color: var(--bulma-scheme-main-bis);
   border-radius: 6px;
   content: "";
   display: block;
@@ -12168,7 +12482,7 @@ svg {
 }
 
 .bd-focus-item:hover .subtitle {
-  color: var(--bulma--text);
+  color: var(--bulma-text);
 }
 
 .bd-focus-item:nth-child(1):hover .title {
@@ -12180,11 +12494,11 @@ svg {
 }
 
 .bd-focus-item:nth-child(3):hover .title {
-  color: var(--bulma--link);
+  color: var(--bulma-link);
 }
 
 .bd-focus-item:nth-child(4):hover .title {
-  color: var(--bulma--scheme-invert);
+  color: var(--bulma-scheme-invert);
 }
 
 .bd-focus-icon {
@@ -12310,7 +12624,7 @@ svg {
 }
 
 .intro-npm .intro-npm-copy.is-success, .intro-npm .intro-npm-copy.is-error {
-  color: var(--bulma--scheme-main);
+  color: var(--bulma-scheme-main);
   pointer-events: none;
   text-decoration: none;
 }
@@ -12325,12 +12639,12 @@ svg {
 
 .intro-npm ::-moz-selection {
   background: #ffdd57;
-  color: var(--bulma--scheme-invert-ter);
+  color: var(--bulma-scheme-invert-ter);
 }
 
 .intro-npm ::selection {
   background: #ffdd57;
-  color: var(--bulma--scheme-invert-ter);
+  color: var(--bulma-scheme-invert-ter);
 }
 
 .intro-buttons {
@@ -12343,7 +12657,7 @@ svg {
 }
 
 .intro-video {
-  background-color: var(--bulma--scheme-main);
+  background-color: var(--bulma-scheme-main);
   margin-left: auto;
   margin-right: auto;
   max-width: 640px;
@@ -12448,14 +12762,14 @@ svg {
 }
 
 .intro-author {
-  color: var(--bulma--text-light);
+  color: var(--bulma-text-light);
   font-size: 0.75rem;
   margin-top: 40px;
   text-align: center;
 }
 
 .intro-author a {
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
 }
 
 .intro-author a:hover {
@@ -12535,23 +12849,23 @@ svg {
 #github:hover {
   background: #333333;
   border-color: #333333;
-  color: var(--bulma--scheme-main);
+  color: var(--bulma-scheme-main);
 }
 
 .bd-tw-button {
   background-color: #55acee;
-  color: var(--bulma--scheme-main);
+  color: var(--bulma-scheme-main);
   border-color: transparent !important;
 }
 
 .bd-tw-button:hover {
   background-color: #49a6ed;
-  color: var(--bulma--scheme-main);
+  color: var(--bulma-scheme-main);
 }
 
 .bd-tw-button:active, .bd-tw-button:focus {
   background-color: #3ea1ec;
-  color: var(--bulma--scheme-main);
+  color: var(--bulma-scheme-main);
 }
 
 #moreDropdown .navbar-item {
@@ -12595,7 +12909,7 @@ svg {
 }
 
 .bd-footer-title {
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
   font-size: 1.25rem;
   line-height: 1.25;
   margin-bottom: 0.5rem;
@@ -12608,7 +12922,7 @@ svg {
 }
 
 .bd-footer-subtitle {
-  color: var(--bulma--border-hover);
+  color: var(--bulma-border-hover);
   margin-top: -0.5rem;
   transition-duration: 86ms;
   transition-property: color;
@@ -12635,7 +12949,7 @@ svg {
 }
 
 .bd-footer-tsp {
-  color: var(--bulma--border-hover);
+  color: var(--bulma-border-hover);
   margin-top: 1.5rem;
 }
 
@@ -12648,7 +12962,7 @@ svg {
 }
 
 .bd-footer-support {
-  border-top: 2px solid var(--bulma--scheme-main-ter);
+  border-top: 2px solid var(--bulma-scheme-main-ter);
   box-shadow: none;
   padding: 3rem;
 }
@@ -12676,7 +12990,7 @@ svg {
 }
 
 .bd-footer-donation-title {
-  color: var(--bulma--border-hover);
+  color: var(--bulma-border-hover);
   margin-bottom: 0.5rem;
 }
 
@@ -12736,13 +13050,13 @@ svg {
 }
 
 .bd-footer-star:hover {
-  box-shadow: 0 3rem 3rem -1.25rem rgba(var(--bulma--scheme-invert), 0.1);
+  box-shadow: 0 3rem 3rem -1.25rem rgba(var(--bulma-scheme-invert), 0.1);
   transform: translateY(-0.5rem);
 }
 
 .bd-footer-star:hover .bd-footer-title,
 .bd-footer-star:hover .bd-footer-subtitle {
-  color: var(--bulma--link);
+  color: var(--bulma-link);
 }
 
 .bd-footer-star.bd-is-expo, .bd-footer-star.bd-is-love {
@@ -12792,11 +13106,11 @@ svg {
 }
 
 .bd-footer-links a:hover {
-  color: var(--bulma--link);
+  color: var(--bulma-link);
 }
 
 .bd-footer-link-title {
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
   font-size: 1.25rem;
   font-weight: 600;
 }
@@ -12814,7 +13128,7 @@ svg {
 }
 
 .bd-footer-link.bd-is-more a:not(:hover) {
-  color: var(--bulma--border-hover);
+  color: var(--bulma-border-hover);
 }
 
 .bd-footer-link.bd-has-subtitle a {
@@ -12836,7 +13150,7 @@ svg {
 }
 
 .bd-footer-link.bd-has-subtitle a:not(:hover) em {
-  color: var(--bulma--border-hover);
+  color: var(--bulma-border-hover);
 }
 
 @media screen and (max-width: 768px) {
@@ -12955,7 +13269,7 @@ svg {
 
 .bd-link {
   border-radius: 6px;
-  color: var(--bulma--text-light);
+  color: var(--bulma-text-light);
   display: block;
   font-size: 1.25rem;
   padding: 1rem 3rem 1.5rem 5rem;
@@ -12969,7 +13283,7 @@ svg {
 }
 
 .bd-link:hover {
-  background-color: var(--bulma--scheme-main-bis);
+  background-color: var(--bulma-scheme-main-bis);
 }
 
 .bd-link-surtitle {
@@ -12996,7 +13310,7 @@ svg {
 }
 
 .bd-link-counter {
-  color: var(--bulma--link);
+  color: var(--bulma-link);
   display: block;
   counter-increment: bd-links;
   font-weight: 400;
@@ -13039,7 +13353,7 @@ svg {
 }
 
 .bd-link-name {
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
   font-size: 1.5rem;
   font-weight: 600;
 }
@@ -13066,7 +13380,7 @@ svg {
 }
 
 .bd-doc-title {
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
 }
 
 .bd-doc-title a {
@@ -13074,7 +13388,7 @@ svg {
 }
 
 .bd-doc-title a:hover {
-  color: var(--bulma--link);
+  color: var(--bulma-link);
 }
 
 .bd-doc-title:not(:last-child) {
@@ -13159,7 +13473,7 @@ svg {
 }
 
 .bd-view-all-versions {
-  color: var(--bulma--text-light);
+  color: var(--bulma-text-light);
 }
 
 .bd-view-all-versions:hover {
@@ -13167,12 +13481,12 @@ svg {
 }
 
 .bd-feature-title {
-  color: var(--bulma--text-light);
+  color: var(--bulma-text-light);
 }
 
 .bd-feature-title a {
   border-bottom: 1px solid transparent;
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
 }
 
 .bd-feature-title a:hover {
@@ -13230,9 +13544,9 @@ svg {
 }
 
 .bd-notification {
-  background-color: var(--bulma--background);
+  background-color: var(--bulma-background);
   border-radius: 4px;
-  color: var(--bulma--text-light);
+  color: var(--bulma-text-light);
   font-weight: 600;
   padding: 1.25rem 0;
   position: relative;
@@ -13248,9 +13562,9 @@ svg {
 
 .bd-notification code,
 .bd-notification pre {
-  background-color: rgba(var(--bulma--scheme-invert), 0.2);
+  background-color: rgba(var(--bulma-scheme-invert), 0.2);
   border-radius: 4px;
-  color: var(--bulma--scheme-main);
+  color: var(--bulma-scheme-main);
 }
 
 .bd-notification pre code {
@@ -13322,7 +13636,7 @@ svg {
 .bd-example,
 .bd-structure,
 .bd-snippet {
-  border: 2px solid whitesmoke;
+  border: 2px solid var(--bulma-background);
   position: relative;
 }
 
@@ -13537,7 +13851,7 @@ svg {
   position: absolute;
   right: 0;
   top: 0;
-  background: rgba(var(--bulma--scheme-invert), 0.7);
+  background: rgba(var(--bulma-scheme-invert), 0.7);
   background: whitesmoke;
   border: 1px solid #dbdbdb;
   content: "";
@@ -13579,7 +13893,7 @@ svg {
 .highlight .bd-expand {
   background: none;
   border: none;
-  color: var(--bulma--text);
+  color: var(--bulma-text);
   cursor: pointer;
   font-size: 0.625rem;
   outline: none;
@@ -13613,24 +13927,27 @@ svg {
   right: 0;
   top: 0;
   align-items: center;
-  background-color: rgba(245, 245, 245, 0.7);
+  background-color: var(--bulma-background);
   border: none;
-  color: rgba(0, 0, 0, 0.5);
+  color: var(--bulma-scheme-invert);
   cursor: pointer;
   display: none;
   font-size: 0.75rem;
   justify-content: center;
+  opacity: 0.8;
   width: 100%;
 }
 
 .highlight .bd-show strong {
   color: currentColor;
   font-weight: 600;
+  opacity: 1;
 }
 
 .highlight .bd-show:hover {
   background-color: rgba(255, 221, 87, 0.8);
   color: rgba(0, 0, 0, 0.7);
+  opacity: 1;
 }
 
 @media screen and (min-width: 769px), print {
@@ -13674,7 +13991,7 @@ svg {
 }
 
 .bd-callout {
-  background-color: var(--bulma--background);
+  background-color: var(--bulma-background);
   border-radius: 4px;
   padding: 1.25rem 2.5rem 1.25rem 1.5rem;
   position: relative;
@@ -13745,7 +14062,7 @@ svg {
 #_default_ .default-ad {
   background-color: rgba(0, 0, 0, 0.3);
   border-radius: 2px;
-  color: var(--bulma--scheme-main);
+  color: var(--bulma-scheme-main);
   display: inline-block;
   font-size: 10px;
   font-weight: bold;
@@ -13755,10 +14072,10 @@ svg {
 }
 
 #_default_ > a {
-  background-color: var(--bulma--scheme-main);
+  background-color: var(--bulma-scheme-main);
   border-radius: 6px;
-  box-shadow: 0 2px 3px rgba(var(--bulma--scheme-invert), 0.1), 0 0 0 1px rgba(var(--bulma--scheme-invert), 0.1);
-  color: var(--bulma--text);
+  box-shadow: 0 2px 3px rgba(var(--bulma-scheme-invert), 0.1), 0 0 0 1px rgba(var(--bulma-scheme-invert), 0.1);
+  color: var(--bulma-text);
   display: block;
   line-height: 1.375;
   margin-top: 15px;
@@ -13769,11 +14086,11 @@ svg {
 }
 
 #_default_ > a:hover, #_default_ > a:focus {
-  box-shadow: 0 2px 3px rgba(var(--bulma--scheme-invert), 0.1), 0 0 0 1px var(--bulma--link);
+  box-shadow: 0 2px 3px rgba(var(--bulma-scheme-invert), 0.1), 0 0 0 1px var(--bulma-link);
 }
 
 #_default_ > a:active {
-  box-shadow: inset 0 1px 2px rgba(var(--bulma--scheme-invert), 0.2), 0 0 0 1px var(--bulma--link);
+  box-shadow: inset 0 1px 2px rgba(var(--bulma-scheme-invert), 0.2), 0 0 0 1px var(--bulma-link);
 }
 
 #_default_ > a span {
@@ -13796,7 +14113,7 @@ svg {
 }
 
 #_default_ > a .default-title {
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
   display: inline;
   font-weight: 700;
 }
@@ -13834,11 +14151,11 @@ svg {
 }
 
 .bd-tws-home {
-  background-color: var(--bulma--scheme-main-bis);
+  background-color: var(--bulma-scheme-main-bis);
 }
 
 .bd-tw {
-  background-color: var(--bulma--scheme-main-bis);
+  background-color: var(--bulma-scheme-main-bis);
   border-radius: 6px;
   color: #697882;
   flex-shrink: 0;
@@ -13850,7 +14167,7 @@ svg {
 }
 
 .bd-tw.bd-is-white {
-  background-color: var(--bulma--scheme-main);
+  background-color: var(--bulma-scheme-main);
 }
 
 .bd-tw-header {
@@ -13861,7 +14178,7 @@ svg {
 
 .bd-tw-author {
   align-items: center;
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
   display: flex;
   line-height: 1.2;
 }
@@ -13885,7 +14202,7 @@ svg {
 }
 
 .bd-tw-fullname {
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
   display: block;
   font-size: 16px;
   font-weight: 700;
@@ -13898,7 +14215,7 @@ svg {
 }
 
 .bd-tw-content {
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
   font-size: 16px;
   line-height: 1.4;
   margin-top: 14px;
@@ -14043,7 +14360,7 @@ svg {
 }
 
 .twitter-tweet:not(.twitter-tweet-rendered) {
-  background-color: var(--bulma--scheme-main);
+  background-color: var(--bulma-scheme-main);
   border: 1px solid #e1e8ed;
   border-radius: 5px;
   color: #697882;
@@ -14060,7 +14377,7 @@ svg {
 }
 
 .twitter-tweet:not(.twitter-tweet-rendered) p {
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
   font-size: 16px;
   margin-bottom: 3.2px;
 }
@@ -14077,7 +14394,7 @@ svg {
 }
 
 .bd-expo {
-  background-color: var(--bulma--scheme-main);
+  background-color: var(--bulma-scheme-main);
   padding: 1.5rem;
 }
 
@@ -14122,7 +14439,7 @@ svg {
 }
 
 .bd-website-overlay {
-  background-color: var(--bulma--scheme-invert);
+  background-color: var(--bulma-scheme-invert);
   opacity: 0;
   transition: opacity 200ms ease-out;
 }
@@ -14156,7 +14473,7 @@ svg {
 }
 
 .bd-testimonials {
-  background-color: var(--bulma--background);
+  background-color: var(--bulma-background);
 }
 
 .bd-testimonial {
@@ -14166,7 +14483,7 @@ svg {
 }
 
 .bd-testimonial-tweet {
-  background-color: var(--bulma--scheme-main);
+  background-color: var(--bulma-scheme-main);
 }
 
 .bd-more-loves {
@@ -14235,7 +14552,7 @@ svg {
 
 .hero.bd-is-love .title,
 .hero.bd-is-love .subtitle {
-  color: var(--bulma--scheme-main);
+  color: var(--bulma-scheme-main);
 }
 
 @keyframes rainbow {
@@ -14307,7 +14624,7 @@ svg {
 }
 
 .bd-shoutout {
-  background-color: var(--bulma--background);
+  background-color: var(--bulma-background);
   padding: 2rem;
   text-align: center;
 }
@@ -14421,13 +14738,13 @@ svg {
 }
 
 .bd-bootstrap-comparison .table .bd-is-empty {
-  background-color: var(--bulma--background);
-  color: var(--bulma--text-light);
+  background-color: var(--bulma-background);
+  color: var(--bulma-text-light);
 }
 
 .bd-bootstrap-comparison .table .bd-is-unique {
   background-color: rgba(72, 199, 116, 0.25);
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
   font-weight: 700;
 }
 
@@ -14452,7 +14769,7 @@ svg {
 }
 
 .bd-klmn-gap {
-  background-color: var(--bulma--background);
+  background-color: var(--bulma-background);
   border-radius: 4px;
   color: #f14668;
   font-family: monospace;
@@ -14466,7 +14783,7 @@ svg {
 
 .bd-klmn-gap.bd-is-selected {
   background-color: #48c774;
-  color: var(--bulma--scheme-main);
+  color: var(--bulma-scheme-main);
 }
 
 .bd-klmn-columns:last-child .bd-notification {
@@ -14481,7 +14798,7 @@ svg {
 
 .bd-side-sponsor-label,
 .bd-banner-label {
-  color: var(--bulma--border-hover);
+  color: var(--bulma-border-hover);
   font-size: 0.75rem;
   margin-bottom: 0.75rem;
 }
@@ -14518,7 +14835,7 @@ svg {
 
 .bd-banner.is-patreon {
   background-color: #052d49;
-  color: var(--bulma--scheme-main);
+  color: var(--bulma-scheme-main);
 }
 
 .bd-banner .button {
@@ -14528,8 +14845,8 @@ svg {
 }
 
 .bd-banner:hover {
-  border-color: var(--bulma--link);
-  color: var(--bulma--link);
+  border-color: var(--bulma-link);
+  color: var(--bulma-link);
 }
 
 .bd-banner:hover .bd-banner-title {
@@ -14553,7 +14870,7 @@ svg {
 }
 
 .bd-banner-title {
-  color: var(--bulma--text-strong);
+  color: var(--bulma-text-strong);
   font-size: 1.25em;
   font-weight: 600;
   line-height: 1.25;
@@ -14632,14 +14949,14 @@ svg {
 }
 
 .bd-partner-sponsor.is-text {
-  color: var(--bulma--text-light);
+  color: var(--bulma-text-light);
   font-size: 0.75em;
   line-height: 1.25;
   min-height: 0;
 }
 
 .bd-partnrs {
-  background-color: var(--bulma--scheme-main-bis);
+  background-color: var(--bulma-scheme-main-bis);
 }
 
 .bd-partnrs #carbonads .carbon-text {
@@ -14651,7 +14968,7 @@ svg {
 }
 
 .bd-partner-title, .bd-minis-title {
-  color: var(--bulma--border-hover);
+  color: var(--bulma-border-hover);
   font-size: 0.875rem;
   margin-bottom: 1rem;
 }
@@ -14662,7 +14979,7 @@ svg {
 }
 
 .bd-minis-link {
-  color: var(--bulma--text-light);
+  color: var(--bulma-text-light);
 }
 
 .bd-minis-link .icon {
@@ -14670,7 +14987,7 @@ svg {
 }
 
 .bd-minis-link strong {
-  color: var(--bulma--text-light);
+  color: var(--bulma-text-light);
   margin-left: 0.25em;
 }
 
@@ -14797,7 +15114,7 @@ svg {
 }
 
 .bd-book-content {
-  box-shadow: 0 3rem 3rem -1rem rgba(var(--bulma--scheme-invert), 0.2);
+  box-shadow: 0 3rem 3rem -1rem rgba(var(--bulma-scheme-invert), 0.2);
   max-width: 520px;
   padding: 3rem;
 }
@@ -14875,7 +15192,7 @@ svg {
   position: absolute;
   right: 0;
   top: 0;
-  background-color: rgba(var(--bulma--scheme-invert), 0.86);
+  background-color: rgba(var(--bulma-scheme-invert), 0.86);
 }
 
 .bd-book-modal .bd-book-modal-background,
@@ -14943,7 +15260,7 @@ svg {
     display: none;
   }
   .bd-book-modal-column {
-    background-color: var(--bulma--scheme-main);
+    background-color: var(--bulma-scheme-main);
     position: relative;
   }
   .bd-book-modal-column.bd-is-cover {
@@ -14998,7 +15315,7 @@ svg {
 }
 
 .native-flex:hover .native-cta {
-  box-shadow: 0 1rem 2rem 0 rgba(var(--bulma--scheme-invert), 0.1);
+  box-shadow: 0 1rem 2rem 0 rgba(var(--bulma-scheme-invert), 0.1);
   transform: translateY(-0.25rem);
 }
 
@@ -15036,7 +15353,7 @@ svg {
 
 .native-cta {
   border: none;
-  box-shadow: 0 0.5rem 1rem 0 rgba(var(--bulma--scheme-invert), 0.2);
+  box-shadow: 0 0.5rem 1rem 0 rgba(var(--bulma-scheme-invert), 0.2);
   flex-grow: 0;
   flex-shrink: 0;
   font-weight: 600;