From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Fri, 18 Oct 2019 18:05:37 +0000 (-0400)
Subject: Use var() notation
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6b09dcfcf0a3c120dedc0724299b1027f99886f3;p=thirdparty%2Fbulma.git

Use var() notation
---

diff --git a/docs/_sass/book.sass b/docs/_sass/book.sass
index 326eb2082..4a58e0ab9 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($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($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: $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 7398075ce..3f8ef627c 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: $background
-      color: $text-light
+      background-color: var(--#{$prefix}-background)
+      color: var(--#{$prefix}-text-light)
     .bd-is-unique
       background-color: rgba($green, 0.25)
-      color: $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 8f303267f..6c384096f 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: $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: $scheme-main
+    background-color: var(--#{$prefix}-scheme-main)
     border-radius: $radius-large
-    box-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1)
-    color: $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($scheme-invert, 0.1), 0 0 0 1px $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($scheme-invert, 0.2), 0 0 0 1px $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: $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 0303b6820..36ff9b5ca 100644
--- a/docs/_sass/callout.sass
+++ b/docs/_sass/callout.sass
@@ -1,6 +1,6 @@
 .bd-callout
   +block
-  background-color: $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 4bd5735d1..77115a4c7 100644
--- a/docs/_sass/example.sass
+++ b/docs/_sass/example.sass
@@ -164,7 +164,7 @@ $structure-invert: $danger-invert
   position: relative
   &::before
     +overlay
-    background: rgba($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: $text
+    color: var(--#{$prefix}-text)
     cursor: pointer
     font-size: 0.625rem
     outline: none
diff --git a/docs/_sass/expo.sass b/docs/_sass/expo.sass
index 9fe22e3c5..706feb24c 100644
--- a/docs/_sass/expo.sass
+++ b/docs/_sass/expo.sass
@@ -1,5 +1,5 @@
 .bd-expo
-  background-color: $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: $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 1d68fdd35..8a60f3e55 100644
--- a/docs/_sass/footer.sass
+++ b/docs/_sass/footer.sass
@@ -1,5 +1,5 @@
 .bd-footer-title
-  color: $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: $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: $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 $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: $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($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: $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: $link
+      color: var(--#{$prefix}-link)
 
 .bd-footer-link-title
-  color: $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: $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: $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 13e69cfb5..bc96599d3 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($scheme-main, 0.5)
+    border-bottom: 1px solid rgba(var(--#{$prefix}-scheme-main), 0.5)
     padding-bottom: 2px
     &:hover
-      border-bottom-color: $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: $scheme-main
-    box-shadow: 0 0 0 $carbon-shadow-size $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: $link
+        color: var(--#{$prefix}-link)
     &:active
       opacity: 0.8
   .carbon-text
     display: block
-    color: $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: $link
+      color: var(--#{$prefix}-link)
   .carbon-poweredby
     bottom: 0
-    color: $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 22dfa26af..5aa6bab87 100644
--- a/docs/_sass/header.sass
+++ b/docs/_sass/header.sass
@@ -4,19 +4,19 @@
   &:hover
     background: $github
     border-color: $github
-    color: $scheme-main
+    color: var(--#{$prefix}-scheme-main)
 
 .bd-tw-button
   background-color: $twitter
-  color: $scheme-main
+  color: var(--#{$prefix}-scheme-main)
   border-color: transparent !important
   &:hover
     background-color: darken($twitter, 2.5%)
-    color: $scheme-main
+    color: var(--#{$prefix}-scheme-main)
   &:active,
   &:focus
     background-color: darken($twitter, 5%)
-    color: $scheme-main
+    color: var(--#{$prefix}-scheme-main)
 
 #moreDropdown
   .navbar-item
diff --git a/docs/_sass/highlight.sass b/docs/_sass/highlight.sass
index c4a78ca4f..5ea608114 100644
--- a/docs/_sass/highlight.sass
+++ b/docs/_sass/highlight.sass
@@ -1,5 +1,5 @@
 .highlight
-  background-color: $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 22d778b08..b20dcb0b2 100644
--- a/docs/_sass/index.sass
+++ b/docs/_sass/index.sass
@@ -11,14 +11,14 @@
     &:hover
       color: $blue
       strong
-        color: $link
+        color: var(--#{$prefix}-link)
   strong
     font-weight: $weight-semibold
   .title
     strong
       color: $primary
   .subtitle
-    color: $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: $border-hover
+  color: var(--#{$prefix}-border-hover)
 
 .bd-index-custom-example
   padding: 1rem
@@ -77,28 +77,28 @@
   .button
     &.is-primary
       background-color: $mauve
-      color: $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: $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: $scheme-main
+    color: var(--#{$prefix}-scheme-main)
 
 // Fullscreen
 
 .bd-index-fullscreen
   .tabs
     a
-      color: $border-hover !important
+      color: var(--#{$prefix}-border-hover) !important
 
 // Columns
 
@@ -161,13 +161,13 @@
     transition-duration: $speed * 2
     transition-property: color
   .subtitle
-    color: $border-hover
+    color: var(--#{$prefix}-border-hover)
     position: relative
     strong
       color: currentColor
   &::before
     +overlay
-    background-color: $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: $text
+      color: var(--#{$prefix}-text)
   &:nth-child(1):hover
     .title
       color: $orange
@@ -191,10 +191,10 @@
       color: $success
   &:nth-child(3):hover
     .title
-      color: $link
+      color: var(--#{$prefix}-link)
   &:nth-child(4):hover
     .title
-      color: $scheme-invert
+      color: var(--#{$prefix}-scheme-invert)
 
 .bd-focus-icon
   position: relative
@@ -292,7 +292,7 @@
       color: $black-ter
     &.is-success,
     &.is-error
-      color: $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: $scheme-invert-ter
+    color: var(--#{$prefix}-scheme-invert-ter)
   \::selection
     background: $yellow
-    color: $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: $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: $text-light
+  color: var(--#{$prefix}-text-light)
   font-size: $size-small
   margin-top: 40px
   text-align: center
   a
-    color: $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 1f6cd49dc..460f9c1a8 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: $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: $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 f9fef05d7..2d8530e3b 100644
--- a/docs/_sass/love.sass
+++ b/docs/_sass/love.sass
@@ -1,5 +1,5 @@
 .bd-testimonials
-  background-color: $background
+  background-color: var(--#{$prefix}-background)
 
 .bd-testimonial
   align-items: flex-start
@@ -7,7 +7,7 @@
   justify-content: center
 
 .bd-testimonial-tweet
-  background-color: $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: $scheme-main
+    color: var(--#{$prefix}-scheme-main)
 
 @keyframes rainbow
     0%
@@ -111,7 +111,7 @@
       margin-left: 1.5rem
 
 .bd-shoutout
-  background-color: $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 1de5e292d..3d9f8a4c3 100644
--- a/docs/_sass/main.sass
+++ b/docs/_sass/main.sass
@@ -5,7 +5,7 @@
 .bd-figure
   +block
   align-items: center
-  border: 2px solid $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: $scheme-main-ter
-    color: $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: $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: $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: $text-light
+    color: var(--#{$prefix}-text-light)
     strong
       color: currentColor
   #meta
@@ -87,12 +87,12 @@
       overflow: visible
       ul,
       a
-        border-bottom-color: $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: $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: $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: $border-hover
+        color: var(--#{$prefix}-border-hover)
     &.is-current
       a
-        color: $link
+        color: var(--#{$prefix}-link)
   a
-    color: $text-light
+    color: var(--#{$prefix}-text-light)
     &:hover
-      color: $link
+      color: var(--#{$prefix}-link)
 
 .bd-category
   a
     &:hover
-      color: $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: $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: $text-strong
+  color: var(--#{$prefix}-text-strong)
   position: relative
   &.is-active
-    color: $link
+    color: var(--#{$prefix}-link)
   .bd-mini-tag
     margin-left: 0.5em
 
@@ -201,7 +201,7 @@
       top: 0
 
 .bd-anchors-title
-  color: $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: $text-strong
+    color: var(--#{$prefix}-text-strong)
 
 +touch
   .bd-lead,
@@ -229,7 +229,7 @@
   .bd-duo
     display: flex
   .bd-lead
-    background-color: $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 344de9094..dfff9ebdf 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($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($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 143dc3856..0c37a450a 100644
--- a/docs/_sass/patreon.sass
+++ b/docs/_sass/patreon.sass
@@ -4,7 +4,7 @@
 
 .bd-side-sponsor-label,
 .bd-banner-label
-  color: $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: $scheme-main
+    color: var(--#{$prefix}-scheme-main)
   // &.is-fortyfour
-  //   background-color: $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: $link
-    color: $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: $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 62d705df2..5d3bd1096 100644
--- a/docs/_sass/specific.sass
+++ b/docs/_sass/specific.sass
@@ -58,7 +58,7 @@
 
 .bd-link
   border-radius: $radius-large
-  color: $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: $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: $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: $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: $text-strong
+  color: var(--#{$prefix}-text-strong)
   a
     color: currentColor
     &:hover
-      color: $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: $text-light
+  color: var(--#{$prefix}-text-light)
   &:hover
     text-decoration: underline
 
 .bd-feature-title
-  color: $text-light
+  color: var(--#{$prefix}-text-light)
   a
     border-bottom: 1px solid transparent
-    color: $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: $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: $background
+  background-color: var(--#{$prefix}-background)
   border-radius: $radius
-  color: $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($scheme-invert, 0.2)
+    background-color: rgba(var(--#{$prefix}-scheme-invert), 0.2)
     border-radius: $radius
-    color: $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 8fe1f8eea..2ffdb2ee2 100644
--- a/docs/_sass/sponsors.sass
+++ b/docs/_sass/sponsors.sass
@@ -29,13 +29,13 @@
   min-height: 80px
   text-align: center
   &.is-text
-    color: $text-light
+    color: var(--#{$prefix}-text-light)
     font-size: 0.75em
     line-height: 1.25
     min-height: 0
 
 .bd-partnrs
-  background-color: $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: $border-hover
+  color: var(--#{$prefix}-border-hover)
   font-size: 0.875rem
   margin-bottom: 1rem
 
@@ -57,11 +57,11 @@
 
 .bd-minis-link
   @extend %center
-  color: $text-light
+  color: var(--#{$prefix}-text-light)
   .icon
     margin-right: 0.25em
   strong
-    color: $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 e44f48289..87bc90b0f 100644
--- a/docs/_sass/twitter.sass
+++ b/docs/_sass/twitter.sass
@@ -1,14 +1,14 @@
 // $tw-black: #1c2022
-$tw-black: $text-strong
+$tw-black: var(--#{$prefix}-text-strong)
 $tw-blue: #2b7bb9
 $tw-grey: #697882
 $tw-border: #e1e8ed
 
 .bd-tws-home
-  background-color: $scheme-main-bis
+  background-color: var(--#{$prefix}-scheme-main-bis)
 
 .bd-tw
-  background-color: $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: $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: $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: $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 088c6c6c5..e08b4f8a4 100644
--- a/docs/bulma-cssvar.sass
+++ b/docs/bulma-cssvar.sass
@@ -1,6 +1,29 @@
 $prefix: "bulma-"
 
-$cssvar-colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark), "scheme-main": ($scheme-main, $scheme-invert))
+@function findCSSVarColorInvert($color)
+  @if colorLuminance($color) > 0.55
+    @return var(--#{$prefix}-black-transparent)
+  @else
+    @return var(--#{$prefix}-white)
+
+@function findCSSVarLightColor($color)
+  @if type-of($color) == "color"
+    $l: 96%
+    @if lightness($color) > 96%
+      $l: lightness($color)
+    @return change-color($color, $lightness: $l)
+  @return var(--#{$prefix}-background)
+
+@function findCSSVarDarkColor($color)
+  @if type-of($color) == "color"
+    $base-l: 29%
+    $luminance: colorLuminance($color)
+    $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)
+
+$cssvar-colors: ("primary": $primary, "link": $link, "info": $info, "success": $success, "warning": $warning, "danger": $danger, "light": $white-ter, "dark": $grey-darker)
 
 @function getCssVariable($color, $name)
   $hue: hue($color)
@@ -9,55 +32,65 @@ $cssvar-colors: ("white": ($white, $black), "black": ($black, $white), "light":
   $alpha: alpha($color)
   @return $hue, $saturation, $lightness
 
-=cssvar($color, $name, $color-light, $color-dark)
+=cssvar($name, $color)
   $hue: hue($color)
   $saturation: saturation($color)
   $lightness: lightness($color)
   $base: "#{$prefix}#{$name}"
-
   --#{$base}-h: #{$hue}
   --#{$base}-s: #{$saturation}
   --#{$base}-l: #{$lightness}
   --#{$base}: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l)))
-  --#{$base}-hover: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l)  - 5%))
-  --#{$base}-active: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l)  - 10%))
-
+  --#{$base}-hover: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 5%))
+  --#{$base}-active: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 10%))
+  $color-invert: findCSSVarColorInvert($color)
+  --#{$base}-invert: #{$color-invert}
+  $color-light: findCSSVarLightColor($color)
   --#{$base}-light: #{$color-light}
   --#{$base}-light-hover: #{darken($color-light, 5%)}
   --#{$base}-light-active: #{darken($color-light, 10%)}
-
+  $color-dark: findCSSVarDarkColor($color)
   --#{$base}-dark: #{$color-dark}
   --#{$base}-dark-hover: #{darken($color-dark, 5%)}
   --#{$base}-dark-active: #{darken($color-dark, 10%)}
 
-  // @if $cssvar-invert
-  //   --#{$base}-invert: var(--#{$prefix}#{$cssvar-invert})
-  // @else
-  //   --#{$base}-invert: #{findColorInvert($color)}
-
 \:root
-  @each $name, $components in $cssvar-colors
-    $color: nth($components, 1)
-    $color-invert: nth($components, 2)
-    $color-light: null
-    $color-dark: null
-    // $cssvar-invert-name: ""
-
-    // @if length($components) >= 5
-    //   $color-light: nth($components, 3)
-    //   $color-dark: nth($components, 4)
-    //   $cssvar-invert-name: nth($components, 5)
-    @if length($components) >= 4
-      $color-light: nth($components, 3)
-      $color-dark: nth($components, 4)
-      // $cssvar-invert-name: findColorInvert($color)
-    @else if length($components) >= 3
-      $color-light: nth($components, 3)
-      $color-dark: findDarkColor($color)
-      // $cssvar-invert-name: findColorInvert($color)
-    @else
-      $color-light: findLightColor($color)
-      $color-dark: findDarkColor($color)
-      // $cssvar-invert-name: findColorInvert($color)
-
-    +cssvar($color, $name, $color-light, $color-dark)
+  --#{$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)
diff --git a/docs/bulma-dark.sass b/docs/bulma-dark.sass
index 539c8e9b2..88119451d 100644
--- a/docs/bulma-dark.sass
+++ b/docs/bulma-dark.sass
@@ -1,52 +1,114 @@
 @import "../sass/utilities/initial-variables.sass"
 
+
 @media (prefers-color-scheme: light)
   .bd-scheme-dark
     display: none
 
 @media (prefers-color-scheme: dark)
+  // General colors
+  $scheme-main: $black
+  $scheme-main-bis: $black-bis
+  $scheme-main-ter: $black-ter
+  $scheme-invert: $white
+  $scheme-invert-bis: $white-bis
+  $scheme-invert-ter: $white-ter
+  $background: $black-ter
+  $border: lime
+  $border-hover: $grey-dark
+  $border-light: $grey-darker
+  $border-light-hover: $grey-dark
+  // Text colors
+  $text: $grey-light
+  $text-invert: $grey-darker
+  $text-light: $grey
+  $text-strong: $white
+  // Link colors
+  $link-hover: $white
+  $link-hover-border: $grey-dark
+  $link-focus: $white
+  $link-focus-border: $blue
+  $link-active: $white
+  $link-active-border: $grey-light
   .bd-scheme-light
     display: none
-  html
-    background-color: $scheme-invert-bis
-    color: $scheme-main-ter
+  \: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}
   .bd-navbar
-    background-color: $scheme-invert-ter
+    background-color: var(--#{$prefix}-scheme-main-bis)
     &.has-shadow
       box-shadow: none
-  .title
-    color: $scheme-main
 
-// // General colors
+html
+  background-color: var(--#{$prefix}-scheme-main)
+
+body
+  color: var(--#{$prefix}-text)
+
+a
+  color: var(--#{$prefix}-link)
+
+  &:hover
+    color: var(--#{$prefix}-link-hover)
 
-// $scheme-main: $black
-// $scheme-main-bis: $black-bis
-// $scheme-main-ter: $black-ter
-// $scheme-invert: $white
-// $scheme-invert-bis: $white-bis
-// $scheme-invert-ter: $white-ter
+code
+  background-color: var(--#{$prefix}-code-background)
+  color: var(--#{$prefix}-code)
 
-// $background: $black-ter
+hr
+  background-color: var(--#{$prefix}-background)
 
-// $border: $grey-darker
-// $border-hover: $grey-dark
-// $border-light: $grey-darker
-// $border-light-hover: $grey-dark
+strong
+  color: var(--#{$prefix}-text-strong)
 
-// // Text colors
+pre
+  background-color: var(--#{$prefix}-pre-background)
+  color: var(--#{$prefix}-pre)
 
-// $text: $grey-light
-// $text-invert: $grey-darker
-// $text-light: $grey
-// $text-strong: $white
+table
+  th
+    color: var(--#{$prefix}-text-strong)
 
-// // Link colors
+.title
+  color: var(--#{$prefix}-text-strong)
 
-// $link-hover: $white
-// $link-hover-border: $grey-dark
+.subtitle
+  color: var(--#{$prefix}-text)
+  strong
+    color: var(--#{$prefix}-text-strong)
 
-// $link-focus: $white
-// $link-focus-border: $blue
+.footer
+  background-color: var(--#{$prefix}-scheme-main-bis)
 
-// $link-active: $white
-// $link-active-border: $grey-light
+.media .media,
+.media + .media
+  border-top-color: rgba(var(--#{$prefix}-border), 0.5)
diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
index 8a1501353..c27cfbda8 100644
--- a/docs/bulma-docs.sass
+++ b/docs/bulma-docs.sass
@@ -25,9 +25,22 @@ $intro-width: 1080px
 $sidebar-width: 10.5rem
 
 @import "../bulma"
-// @import "../sass/utilities/_all.sass"
-@import "./bulma-cssvar.scss"
-// @import "./bulma-dark"
+@import "./bulma-cssvar.sass"
+@import "./bulma-dark"
+
+// Dark mode steps
+//
+// 1. Swap values
+// $scheme-main: $black
+//
+// 2. Assign updated CSS vars to :root
+// :root
+//   --bulma-scheme-main: #{$scheme-main}
+//
+// 3. Assign CSS vars to elements/components
+// html
+//   background-color: var(--#{$prefix}-scheme-main)
+//
 
 %center
   align-items: center
@@ -35,7 +48,7 @@ $sidebar-width: 10.5rem
   justify-content: center
 
 %bd-box
-  background-color: $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 77c52b6ef..cfc0c36e2 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -10808,36 +10808,6 @@ label.panel-block:hover {
   --bulma--white: white;
   --bulma--black: #0a0a0a;
   --bulma--black-transparent: rgba(0, 0, 0, 0.7);
-  --bulma--scheme-main: white;
-  --bulma--scheme-main-bis: #fafafa;
-  --bulma--scheme-main-ter: whitesmoke;
-  --bulma--scheme-invert: #0a0a0a;
-  --bulma--scheme-invert-bis: #121212;
-  --bulma--scheme-invert-ter: #242424;
-  --bulma--background: whitesmoke;
-  --bulma--border: #dbdbdb;
-  --bulma--border-hover: #b5b5b5;
-  --bulma--border-light: #ededed;
-  --bulma--border-light-hover: #b5b5b5;
-  --bulma--text: #4a4a4a;
-  --bulma--text-invert: var(--bulma--white);
-  --bulma--text-light: #7a7a7a;
-  --bulma--text-strong: #363636;
-  --bulma--code: #f14668;
-  --bulma--code-background: whitesmoke;
-  --bulma--pre: #4a4a4a;
-  --bulma--pre-background: whitesmoke;
-  --bulma--link: #3273dc;
-  --bulma--link-invert: var(--bulma--white);
-  --bulma--link-light: #eef3fc;
-  --bulma--link-dark: #2160c4;
-  --bulma--link-visited: #b86bff;
-  --bulma--link-hover: #363636;
-  --bulma--link-hover-border: #b5b5b5;
-  --bulma--link-focus: #363636;
-  --bulma--link-focus-border: #3273dc;
-  --bulma--link-active: #363636;
-  --bulma--link-active-border: #4a4a4a;
   --bulma-primary-h: 171deg;
   --bulma-primary-s: 100%;
   --bulma-primary-l: 41%;
@@ -10944,6 +10914,56 @@ label.panel-block:hover {
   --bulma-dark-dark-active: #707070;
 }
 
+@media (prefers-color-scheme: light) {
+  .bd-scheme-dark {
+    display: none;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .bd-scheme-light {
+    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;
+  }
+  .bd-navbar {
+    background-color: var(--bulma--scheme-main-bis);
+  }
+  .bd-navbar.has-shadow {
+    box-shadow: none;
+  }
+}
+
 html {
   background-color: var(--bulma--scheme-main);
 }
@@ -10966,7 +10986,41 @@ code {
 }
 
 hr {
-  background-color: whitesmoke;
+  background-color: var(--bulma--background);
+}
+
+strong {
+  color: var(--bulma--text-strong);
+}
+
+pre {
+  background-color: var(--bulma--pre-background);
+  color: var(--bulma--pre);
+}
+
+table th {
+  color: var(--bulma--text-strong);
+}
+
+.title {
+  color: var(--bulma--text-strong);
+}
+
+.subtitle {
+  color: var(--bulma--text);
+}
+
+.subtitle 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);
 }
 
 .bd-columns-tool, .bd-footer-sponsor a, .bd-footer-donation-action, .bd-footer-star-figure, .bd-minis-title, .bd-minis-link, .bd-mini {
@@ -10978,7 +11032,7 @@ hr {
 .bd-footer-support, .bd-footer-star, .bd-book-content {
   background-color: var(--bulma--scheme-main);
   border-radius: 6px;
-  box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(var(--bulma--black), 0.05);
+  box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10, 10, 10, 0.05);
   display: block;
 }
 
@@ -11047,7 +11101,7 @@ hr {
 }
 
 .bd-prev-next-bis {
-  border-top: 2px solid var(--bulma--background);
+  border-top: 2px solid whitesmoke;
   display: flex;
   justify-content: space-between;
   margin-top: 3rem;
@@ -12227,7 +12281,7 @@ svg {
 .intro-npm {
   background: #242424;
   border-radius: 4px;
-  color: var(--bulma--white);
+  color: white;
   display: flex;
   font-size: 15px;
   justify-content: space-between;
@@ -13034,7 +13088,7 @@ svg {
 }
 
 .bd-box {
-  border: 4px solid var(--bulma--background);
+  border: 4px solid whitesmoke;
   border-radius: 4px;
 }
 
@@ -13268,7 +13322,7 @@ svg {
 .bd-example,
 .bd-structure,
 .bd-snippet {
-  border: 2px solid var(--bulma--background);
+  border: 2px solid whitesmoke;
   position: relative;
 }
 
@@ -13484,8 +13538,8 @@ svg {
   right: 0;
   top: 0;
   background: rgba(var(--bulma--scheme-invert), 0.7);
-  background: var(--bulma--background);
-  border: 1px solid var(--bulma--border);
+  background: whitesmoke;
+  border: 1px solid #dbdbdb;
   content: "";
   display: block;
   z-index: 1;
@@ -13559,7 +13613,7 @@ svg {
   right: 0;
   top: 0;
   align-items: center;
-  background-color: rgba(var(--bulma--background), 0.7);
+  background-color: rgba(245, 245, 245, 0.7);
   border: none;
   color: rgba(0, 0, 0, 0.5);
   cursor: pointer;