Only use derived variables

docs/_data/meta.json

@@ -10,5 +10,7 @@
   "book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/",
   "book_amazon": "https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/",
   "book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf",
-  "scrimba_url": "https://scrimba.com/g/gbulma"
+  "scrimba_url": "https://scrimba.com/g/gbulma",
+  "patreon_url": "https://www.patreon.com/jgthms",
+  "sponsorship_url": "https://github.com/users/jgthms/sponsorship"
 }

docs/_includes/elements/github.html

@@ -1,4 +1,4 @@
-<a class="button bd-github-button" href="https://github.com/users/jgthms/sponsorship" target="_blank">
+<a class="button bd-github-button" href="{{ site.data.meta.sponsorship_url }}" target="_blank">
   <span class="icon">
     <i class="fas fa-heart"></i>
   </span>

docs/_includes/elements/patreon.html

@@ -1,4 +1,4 @@
-<a class="bd-patreon-button" href="https://www.patreon.com/jgthms" target="_blank">
+<a class="bd-patreon-button" href="{{ site.data.meta.patreon_url }}" target="_blank">
   {%
     include elements/responsive-image.html
     path="become-a-patron"

docs/_includes/index/partnrs.html

@@ -1,7 +1,7 @@
 <section class="bd-partnrs-list">
   <div class="bd-partner bd-is-sponsor">
     <p class="bd-partner-title has-text-centered">
-      Bulma is thankful to its <a href="https://www.patreon.com/jgthms" target="_blank">Patreon sponsors</a>
+      Bulma is thankful to its <a href="{{ site.data.meta.patreon_url }}" target="_blank">Patreon</a> and <a href="{{ site.data.meta.sponsorship_url }}" target="_blank">GitHub sponsors</a>
     </p>
 
     <div class="bd-partner-sponsors">
@@ -25,7 +25,7 @@
     </div>
 
     <p class="has-text-centered" style="margin-top: 1.5rem;">
-      <a class="button is-primary is-medium" href="https://www.patreon.com/jgthms" target="_blank">
+      <a class="button is-primary is-medium" href="{{ site.data.meta.sponsorship_url }}" target="_blank">
         Become a sponsor
       </a>
     </p>

docs/_sass/book.sass

@@ -45,7 +45,7 @@ $book-beige: #FFEDD7
 
 .bd-book-content
   @extend %bd-box
-  box-shadow: 0 3rem 3rem -1rem rgba($black, 0.2)
+  box-shadow: 0 3rem 3rem -1rem rgba($scheme-invert, 0.2)
   max-width: 520px
   padding: 3rem
 
@@ -98,7 +98,7 @@ $book-beige: #FFEDD7
 
 .bd-book-modal-background
   +overlay
-  background-color: rgba($black, 0.86)
+  background-color: rgba($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: $white
+    background-color: $scheme-main
     position: relative
     &.bd-is-cover
       align-items: center

docs/_sass/bsa.sass

@@ -8,17 +8,17 @@
   .default-ad
     background-color: rgba(black, 0.3)
     border-radius: 2px
-    color: $white
+    color: $scheme-main
     display: inline-block
     font-size: 10px
     font-weight: bold
     padding: 0 4px
     text-transform: uppercase
     vertical-align: top
   & > a
-    background-color: $white
+    background-color: $scheme-main
     border-radius: $radius-large
-    box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
+    box-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1)
     color: $text
     display: block
     line-height: 1.375
@@ -29,9 +29,9 @@
     position: relative
     &:hover,
     &:focus
-      box-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
+      box-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px $link
     &:active
-      box-shadow: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
+      box-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link
     span
       display: block
     .default-image

docs/_sass/example.sass

@@ -164,7 +164,7 @@ $structure-invert: $danger-invert
   position: relative
   &::before
     +overlay
-    background: rgba($black, 0.7)
+    background: rgba($scheme-invert, 0.7)
     background: $background
     border: 1px solid $border
     content: ""

docs/_sass/expo.sass

@@ -1,5 +1,5 @@
 .bd-expo
-  background-color: $white
+  background-color: $scheme-main
   padding: 1.5rem
 
 .bd-website
@@ -31,7 +31,7 @@
   transition: opacity 200ms $easing
 
 .bd-website-overlay
-  background-color: $black
+  background-color: $scheme-invert
   opacity: 0
   transition: opacity 200ms $easing
 

docs/_sass/footer.sass

@@ -9,7 +9,7 @@
     font-weight: $weight-semibold
 
 .bd-footer-subtitle
-  color: $grey-light
+  color: $border-hover
   margin-top: -0.5rem
   transition-duration: $speed
   transition-property: color
@@ -29,7 +29,7 @@
       width: 100%
 
 .bd-footer-tsp
-  color: $grey-light
+  color: $border-hover
   margin-top: 1.5rem
 
 %bd-footer-box
@@ -42,7 +42,7 @@
 
 .bd-footer-support
   @extend %bd-footer-box
-  border-top: 2px solid $white-ter
+  border-top: 2px solid $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: $grey-light
+  color: $border-hover
   margin-bottom: 0.5rem
   strong
     color: currentColor
@@ -103,7 +103,7 @@ $star-figure-height: 156px
   +tablet
     width: calc(33.3333% - 2rem)
   &:hover
-    box-shadow: 0 3rem 3rem -1.25rem rgba($black, 0.1)
+    box-shadow: 0 3rem 3rem -1.25rem rgba($scheme-invert, 0.1)
     transform: translateY(-0.5rem)
     .bd-footer-title,
     .bd-footer-subtitle
@@ -158,7 +158,7 @@ $star-figure-height: 156px
   &.bd-is-more
     font-size: 0.875rem
     a:not(:hover)
-      color: $grey-light
+      color: $border-hover
   &.bd-has-subtitle
     a
       align-items: center
@@ -174,7 +174,7 @@ $star-figure-height: 156px
         font-style: normal
       &:not(:hover)
         em
-          color: $grey-light
+          color: $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($white, 0.5)
+    border-bottom: 1px solid rgba($scheme-main, 0.5)
     padding-bottom: 2px
     &:hover
-      border-bottom-color: $white
+      border-bottom-color: $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: $white
-    box-shadow: 0 0 0 $carbon-shadow-size $white
+    background-color: $scheme-main
+    box-shadow: 0 0 0 $carbon-shadow-size $scheme-main
   +tablet
     width: $carbon-width
 
@@ -151,7 +151,7 @@ $carbon-poweredby-height: 20px
       color: $link
   .carbon-poweredby
     bottom: 0
-    color: $grey-light
+    color: $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: $white
+    color: $scheme-main
 
 .bd-tw-button
   background-color: $twitter
-  color: $white
+  color: $scheme-main
   border-color: transparent !important
   &:hover
     background-color: darken($twitter, 2.5%)
-    color: $white
+    color: $scheme-main
   &:active,
   &:focus
     background-color: darken($twitter, 5%)
-    color: $white
+    color: $scheme-main
 
 #moreDropdown
   .navbar-item

docs/_sass/index.sass

@@ -18,7 +18,7 @@
     strong
       color: $primary
   .subtitle
-    color: $grey-light !important
+    color: $border-hover !important
     strong
       color: currentColor
   &:not(:last-child)
@@ -41,7 +41,7 @@
     margin-right: auto
 
 .bd-index-custom-title
-  color: $grey-light
+  color: $border-hover
 
 .bd-index-custom-example
   padding: 1rem
@@ -77,28 +77,28 @@
   .button
     &.is-primary
       background-color: $mauve
-      color: $white
+      color: $scheme-main
       &:hover
         background-color: darken($mauve, 2.5%)
       &:active
         background-color: darken($mauve, 5%)
     &.is-link
       background-color: $pink
-      color: $white
+      color: $scheme-main
       &:hover
         background-color: darken($pink, 2.5%)
       &:active
         background-color: darken($pink, 5%)
   +selection
     background-color: $pink
-    color: $white
+    color: $scheme-main
 
 // Fullscreen
 
 .bd-index-fullscreen
   .tabs
     a
-      color: $grey-light !important
+      color: $border-hover !important
 
 // Columns
 
@@ -161,13 +161,13 @@
     transition-duration: $speed * 2
     transition-property: color
   .subtitle
-    color: $grey-light
+    color: $border-hover
     position: relative
     strong
       color: currentColor
   &::before
     +overlay
-    background-color: $white-bis
+    background-color: $scheme-main-bis
     border-radius: $radius-large
     content: ""
     display: block
@@ -194,7 +194,7 @@
       color: $link
   &:nth-child(4):hover
     .title
-      color: $black
+      color: $scheme-invert
 
 .bd-focus-icon
   position: relative
@@ -292,7 +292,7 @@
       color: $black-ter
     &.is-success,
     &.is-error
-      color: $white
+      color: $scheme-main
       pointer-events: none
       text-decoration: none
     &.is-success
@@ -301,10 +301,10 @@
       background-color: $red
   \::-moz-selection
     background: $yellow
-    color: $black-ter
+    color: $scheme-invert-ter
   \::selection
     background: $yellow
-    color: $black-ter
+    color: $scheme-invert-ter
 
 .intro-buttons
   margin-top: 1.5rem
@@ -313,7 +313,7 @@
     padding-right: 1.375em
 
 .intro-video
-  background-color: $white
+  background-color: $scheme-main
   margin-left: auto
   margin-right: auto
   max-width: 640px

docs/_sass/klmn.sass

@@ -24,7 +24,7 @@
   white-space: nowrap
   &.bd-is-selected
     background-color: $green
-    color: $white
+    color: $scheme-main
 
 .bd-klmn-columns:last-child
   .bd-notification

docs/_sass/love.sass

@@ -7,7 +7,7 @@
   justify-content: center
 
 .bd-testimonial-tweet
-  background-color: $white
+  background-color: $scheme-main
 
 .bd-more-loves
   align-items: center
@@ -57,7 +57,7 @@
 .hero.bd-is-love
   .title,
   .subtitle
-    color: $white
+    color: $scheme-main
 
 @keyframes rainbow
     0%
@@ -124,4 +124,4 @@
     opacity: 0.5
 
 .bd-shoutout-button
-  margin-top: -0.75rem
+  margin-top: -0.75rem