Use var() notation

Author: jgthms

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

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

docs/_sass/bsa.sass

@@ -8,18 +8,18 @@
   .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
     padding: 0 4px
     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

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

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

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
 

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

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

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

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