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,7 +8,7 @@
   .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
@@ -16,9 +16,9 @@
     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

docs/_sass/main.sass

@@ -5,7 +5,7 @@
 .bd-figure
   +block
   align-items: center
-  border: 2px solid $white-ter
+  border: 2px solid $scheme-main-ter
   border-radius: $radius
   display: flex
   flex-direction: column
@@ -14,7 +14,7 @@
     margin: 1em
   figcaption
     align-self: stretch
-    background-color: $white-ter
+    background-color: $scheme-main-ter
     color: $text-light
     font-size: $size-small
     padding: 1em
@@ -33,7 +33,7 @@
 
 .bd-prev-next
   align-items: flex-start
-  color: $grey-light
+  color: $border-hover
   display: none
   flex-grow: 0
   flex-shrink: 0
@@ -87,7 +87,7 @@
       overflow: visible
       ul,
       a
-        border-bottom-color: $white-ter
+        border-bottom-color: $scheme-main-ter
         border-bottom-width: 2px
       a
         margin-bottom: -2px
@@ -109,7 +109,7 @@
 
 .bd-side,
 .bd-side-background
-  background-color: $white-bis
+  background-color: $scheme-main-bis
 
 .bd-side
   position: relative
@@ -128,7 +128,7 @@
       margin-bottom: 0.5em
     &.is-past
       a
-        color: $grey-light
+        color: $border-hover
     &.is-current
       a
         color: $link
@@ -156,7 +156,7 @@
 .bd-category-toggle
   +overlay
   align-items: center
-  color: $grey-light
+  color: $border-hover
   display: flex
   justify-content: flex-end
   .icon
@@ -201,7 +201,7 @@
       top: 0
 
 .bd-anchors-title
-  color: $grey-light
+  color: $border-hover
   font-size: 0.875rem
   font-weight: $weight-semibold
   margin-bottom: 0.5rem
@@ -229,7 +229,7 @@
   .bd-duo
     display: flex
   .bd-lead
-    background-color: $white
+    background-color: $scheme-main
     overflow: hidden
     flex-grow: 1
     flex-shrink: 1

docs/_sass/native.sass

@@ -30,7 +30,7 @@
   text-decoration: none
   &:hover
     .native-cta
-      box-shadow: 0 1rem 2rem 0 rgba($black, 0.1)
+      box-shadow: 0 1rem 2rem 0 rgba($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($black, 0.2)
+  box-shadow: 0 0.5rem 1rem 0 rgba($scheme-invert, 0.2)
   flex-grow: 0
   flex-shrink: 0
   font-weight: $weight-semibold

docs/_sass/patreon.sass

@@ -4,7 +4,7 @@
 
 .bd-side-sponsor-label,
 .bd-banner-label
-  color: $grey-light
+  color: $border-hover
   font-size: 0.75rem
   margin-bottom: 0.75rem
 
@@ -31,9 +31,9 @@
     margin-bottom: 0.25em
   &.is-patreon
     background-color: $patreon-blue
-    color: $white
+    color: $scheme-main
   // &.is-fortyfour
-  //   background-color: $white
+  //   background-color: $scheme-main
   //   border: 2px solid $background
   .button
     transform-origin: center

docs/_sass/specific.sass

@@ -56,7 +56,7 @@
   strong
     font-weight: $weight-semibold
   &:hover
-    background-color: $white-bis
+    background-color: $scheme-main-bis
 
 .bd-link-surtitle
   float: right
@@ -280,9 +280,9 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
     color: currentColor
   code,
   pre
-    background-color: rgba($black, 0.2)
+    background-color: rgba($scheme-invert, 0.2)
     border-radius: $radius
-    color: $white
+    color: $scheme-main
   pre code
     background-color: transparent
   // Colors

docs/_sass/sponsors.sass

@@ -35,7 +35,7 @@
     min-height: 0
 
 .bd-partnrs
-  background-color: $white-bis
+  background-color: $scheme-main-bis
   #carbonads
     .carbon-text
       padding-bottom: 0
@@ -43,7 +43,7 @@
       display: none
 
 .bd-partner-title
-  color: $grey-light
+  color: $border-hover
   font-size: 0.875rem
   margin-bottom: 1rem
 
@@ -57,11 +57,11 @@
 
 .bd-minis-link
   @extend %center
-  color: $grey
+  color: $text-light
   .icon
     margin-right: 0.25em
   strong
-    color: $grey
+    color: $text-light
     margin-left: 0.25em
 
 .bd-minis-list

docs/_sass/twitter.sass

@@ -1,13 +1,14 @@
-$tw-black: #1c2022
+// $tw-black: #1c2022
+$tw-black: $text-strong
 $tw-blue: #2b7bb9
 $tw-grey: #697882
 $tw-border: #e1e8ed
 
 .bd-tws-home
-  background-color: $white-bis
+  background-color: $scheme-main-bis
 
 .bd-tw
-  background-color: $white-bis
+  background-color: $scheme-main-bis
   border-radius: $radius-large
   color: $tw-grey
   flex-shrink: 0
@@ -17,7 +18,7 @@ $tw-border: #e1e8ed
   padding: 20px
   text-align: left
   &.bd-is-white
-    background-color: $white
+    background-color: $scheme-main
 
 .bd-tw-header
   align-items: stretch
@@ -162,7 +163,7 @@ $tw-border: #e1e8ed
     min-height: 632px
 
 .twitter-tweet:not(.twitter-tweet-rendered)
-  background-color: $white
+  background-color: $scheme-main
   border: 1px solid $tw-border
   border-radius: 5px
   color: $tw-grey

docs/bulma-docs.sass

@@ -24,6 +24,7 @@ $main-spacing: 3rem
 $intro-width: 1080px
 $sidebar-width: 10.5rem
 
+// @import "./bulma-dark.scss"
 @import "../bulma"
 
 %center

docs/css/bulma-docs.css

@@ -13554,7 +13554,7 @@ svg {
 
 .bd-tw-author {
   align-items: center;
-  color: #1c2022;
+  color: #363636;
   display: flex;
   line-height: 1.2;
 }
@@ -13591,7 +13591,7 @@ svg {
 }
 
 .bd-tw-content {
-  color: #1c2022;
+  color: #363636;
   font-size: 16px;
   line-height: 1.4;
   margin-top: 14px;
@@ -13753,7 +13753,7 @@ svg {
 }
 
 .twitter-tweet:not(.twitter-tweet-rendered) p {
-  color: #1c2022;
+  color: #363636;
   font-size: 16px;
   margin-bottom: 3.2px;
 }