Use CSS vars for docs

docs/_includes/global/navbar.html

@@ -2,7 +2,8 @@
   <div class="container">
   <div class="navbar-brand">
     <a class="navbar-item" href="{{ site.url }}">
-      <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
+      <img class="bd-scheme-light" src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
+      <img class="bd-scheme-dark" src="{{ site.url }}/images/bulma-logo-light.png" alt="{{ site.data.meta.title }}" width="112" height="28">
     </a>
 
     <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">

docs/bulma-cssvar.sass

@@ -0,0 +1,63 @@
+$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 getCssVariable($color, $name)
+  $hue: hue($color)
+  $saturation: saturation($color)
+  $lightness: lightness($color)
+  $alpha: alpha($color)
+  @return $hue, $saturation, $lightness
+
+=cssvar($color, $name, $color-light, $color-dark)
+  $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}-light: #{$color-light}
+  --#{$base}-light-hover: #{darken($color-light, 5%)}
+  --#{$base}-light-active: #{darken($color-light, 10%)}
+
+  --#{$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)

docs/bulma-cssvar.scss

@@ -0,0 +1,176 @@
+$prefix: "bulma-";
+
+@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);
+  $saturation: saturation($color);
+  $lightness: lightness($color);
+  $alpha: alpha($color);
+
+  @return $hue, $saturation, $lightness;
+}
+
+@mixin 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%));
+
+  $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%)};
+}
+
+: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};
+
+  @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);
+
+html {
+  background-color: $scheme-main;
+}
+
+body {
+  color: $text;
+}
+
+a {
+  color: $link;
+  &:hover {
+    color: $link-hover;
+  }
+}
+
+code {
+  background-color: $code-background;
+  color: $code;
+}
+
+hr {
+  background-color: $hr-background-color;
+}

docs/bulma-dark.sass

@@ -1,41 +1,52 @@
-@import ../sass/utilities/initial-variables.sass
+@import "../sass/utilities/initial-variables.sass"
 
-// General colors
+@media (prefers-color-scheme: light)
+  .bd-scheme-dark
+    display: none
 
-$scheme-main: $black
+@media (prefers-color-scheme: dark)
-$scheme-main-bis: $black-bis
+  .bd-scheme-light
-$scheme-main-ter: $black-ter
+    display: none
-$scheme-invert: $white
+  html
-$scheme-invert-bis: $white-bis
+    background-color: $scheme-invert-bis
-$scheme-invert-ter: $white-ter
+    color: $scheme-main-ter
+  .bd-navbar
+    background-color: $scheme-invert-ter
+    &.has-shadow
+      box-shadow: none
+  .title
+    color: $scheme-main
 
-$background: $black-ter
+// // General colors
 
-$border: $grey-darker
+// $scheme-main: $black
-$border-hover: $grey-dark
+// $scheme-main-bis: $black-bis
-$border-light: $grey-darker
+// $scheme-main-ter: $black-ter
-$border-light-hover: $grey-dark
+// $scheme-invert: $white
+// $scheme-invert-bis: $white-bis
+// $scheme-invert-ter: $white-ter
 
-// Text colors
+// $background: $black-ter
 
-$text: $grey-light
+// $border: $grey-darker
-$text-invert: $grey-darker
+// $border-hover: $grey-dark
-$text-light: $grey
+// $border-light: $grey-darker
-$text-strong: $white
+// $border-light-hover: $grey-dark
 
-// Link colors
+// // Text colors
 
-$link-hover: $white
+// $text: $grey-light
-$link-hover-border: $grey-dark
+// $text-invert: $grey-darker
+// $text-light: $grey
+// $text-strong: $white
 
-$link-focus: $white
+// // Link colors
-$link-focus-border: $blue
 
-$link-active: $white
+// $link-hover: $white
-$link-active-border: $grey-light
+// $link-hover-border: $grey-dark
 
-.bd-navbar
+// $link-focus: $white
-  background-color: $scheme-main-bis
+// $link-focus-border: $blue
 
-  &.has-shadow
+// $link-active: $white
-    box-shadow: none
+// $link-active-border: $grey-light

docs/bulma-docs.sass

@@ -24,8 +24,10 @@ $main-spacing: 3rem
 $intro-width: 1080px
 $sidebar-width: 10.5rem
 
-// @import "./bulma-dark"
 @import "../bulma"
+// @import "../sass/utilities/_all.sass"
+@import "./bulma-cssvar.scss"
+// @import "./bulma-dark"
 
 %center
   align-items: center
@@ -33,7 +35,7 @@ $sidebar-width: 10.5rem
   justify-content: center
 
 %bd-box
-  background-color: $white
+  background-color: $scheme-main
   border-radius: $radius-large
   box-shadow: 0 1.5rem 1.5rem -1.25rem rgba($black, 0.05)
   display: block