Init themes

bulma.sass

@@ -8,3 +8,4 @@
 @import "sass/grid/_all"
 @import "sass/helpers/_all"
 @import "sass/layout/_all"
+@import "sass/themes/default"

css/bulma.css

@@ -1,12 +1,5 @@
 /*! bulma.io v0.9.0 | MIT License | github.com/jgthms/bulma */
-@-webkit-keyframes spinAround {
+/* Bulma Utilities */
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-}
 @keyframes spinAround {
   from {
     transform: rotate(0deg);
@@ -129,8 +122,7 @@
 }
 
 .button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after {
-  -webkit-animation: spinAround 500ms infinite linear;
+  animation: spinAround 500ms infinite linear;
-          animation: spinAround 500ms infinite linear;
   border: 2px solid #dbdbdb;
   border-radius: 290486px;
   border-right-color: transparent;
@@ -229,6 +221,7 @@ fieldset[disabled] .pagination-ellipsis {
   cursor: not-allowed;
 }
 
+/* Bulma Base */
 /*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
 html,
 body,
@@ -320,10 +313,7 @@ html {
   overflow-x: hidden;
   overflow-y: scroll;
   text-rendering: optimizeLegibility;
-  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
-     -moz-text-size-adjust: 100%;
-      -ms-text-size-adjust: 100%;
-          text-size-adjust: 100%;
 }
 
 article,
@@ -448,6 +438,7 @@ table th {
   color: #363636;
 }
 
+/* Bulma Elements */
 .box {
   background-color: white;
   border-radius: 6px;
@@ -2566,14 +2557,10 @@ fieldset[disabled] .button {
 }
 
 .progress:indeterminate {
-  -webkit-animation-duration: 1.5s;
+  animation-duration: 1.5s;
-          animation-duration: 1.5s;
+  animation-iteration-count: infinite;
-  -webkit-animation-iteration-count: infinite;
+  animation-name: moveIndeterminate;
-          animation-iteration-count: infinite;
+  animation-timing-function: linear;
-  -webkit-animation-name: moveIndeterminate;
-          animation-name: moveIndeterminate;
-  -webkit-animation-timing-function: linear;
-          animation-timing-function: linear;
   background-color: #ededed;
   background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%);
   background-position: top left;
@@ -2601,15 +2588,6 @@ fieldset[disabled] .button {
   height: 1.5rem;
 }
 
-@-webkit-keyframes moveIndeterminate {
-  from {
-    background-position: 200% 0;
-  }
-  to {
-    background-position: -200% 0;
-  }
-}
-
 @keyframes moveIndeterminate {
   from {
     background-position: 200% 0;
@@ -3061,6 +3039,8 @@ a.tag:hover {
 
 .title,
 .subtitle {
+  --title-sub-size: 0.75em;
+  --title-sup-size: 0.75em;
   word-break: break-word;
 }
 
@@ -3073,12 +3053,12 @@ a.tag:hover {
 
 .title sub,
 .subtitle sub {
-  font-size: 0.75em;
+  font-size: var(--title-sub-size);
 }
 
 .title sup,
 .subtitle sup {
-  font-size: 0.75em;
+  font-size: var(--title-sup-size);
 }
 
 .title .tag,
@@ -3087,15 +3067,21 @@ a.tag:hover {
 }
 
 .title {
-  color: #363636;
+  --title-color: var(--text-strong, #363636);
-  font-size: 2rem;
+  color: var(--title-color);
-  font-weight: 600;
+  --title-size: var(--size-3, 2rem);
-  line-height: 1.125;
+  --title-weight: var(--weight-semibold, 600);
+  --title-line-height: 1.125;
+  --title-strong-color: inherit;
+  --title-strong-weight: inherit;
+  font-size: var(--title-size);
+  font-weight: var(--title-weight);
+  line-height: var(--title-line-height);
 }
 
 .title strong {
-  color: inherit;
+  color: var(--title-strong-color);
-  font-weight: inherit;
+  font-weight: var(--title-strong-weight);
 }
 
 .title + .highlight {
@@ -3135,15 +3121,15 @@ a.tag:hover {
 }
 
 .subtitle {
-  color: #4a4a4a;
+  color: var(--text, #4a4a4a);
-  font-size: 1.25rem;
+  font-size: var(--size-5, 1.25rem);
-  font-weight: 400;
+  font-weight: var(--weight-normal, 400);
   line-height: 1.25;
 }
 
 .subtitle strong {
-  color: #363636;
+  color: var(--text-strong, #363636);
-  font-weight: 600;
+  font-weight: var(--weight-semibold, 600);
 }
 
 .subtitle:not(.is-spaced) + .title {
@@ -3213,6 +3199,7 @@ a.tag:hover {
   vertical-align: top;
 }
 
+/* Bulma Form */
 .input, .textarea, .select select {
   background-color: white;
   border-color: #dbdbdb;
@@ -4495,6 +4482,7 @@ fieldset[disabled] .select select:hover {
   font-size: 1.5rem;
 }
 
+/* Bulma Components */
 .breadcrumb {
   font-size: 1rem;
   white-space: nowrap;
@@ -4592,6 +4580,8 @@ fieldset[disabled] .select select:hover {
   color: #4a4a4a;
   max-width: 100%;
   position: relative;
+  border-radius: 0;
+  overflow: hidden;
 }
 
 .card-header {
@@ -6921,6 +6911,7 @@ label.panel-block:hover {
   font-size: 1.5rem;
 }
 
+/* Bulma Grid */
 .column {
   display: block;
   flex-basis: 0;
@@ -8720,8 +8711,6 @@ label.panel-block:hover {
   flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
-  min-height: -webkit-min-content;
-  min-height: -moz-min-content;
   min-height: min-content;
 }
 
@@ -8809,6 +8798,7 @@ label.panel-block:hover {
   }
 }
 
+/* Bulma Helpers */
 .has-text-white {
   color: white !important;
 }
@@ -10424,6 +10414,7 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   }
 }
 
+/* Bulma Layout */
 .hero {
   align-items: stretch;
   display: flex;
@@ -11328,4 +11319,112 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
   background-color: #fafafa;
   padding: 3rem 1.5rem 6rem;
 }
+
+:root {
+  --black: #0a0a0a;
+  --black-bis: #121212;
+  --black-ter: #242424;
+  --grey-darker: #363636;
+  --grey-dark: #4a4a4a;
+  --grey: #7a7a7a;
+  --grey-light: #b5b5b5;
+  --grey-lighter: #dbdbdb;
+  --grey-lightest: #ededed;
+  --white-ter: whitesmoke;
+  --white-bis: #fafafa;
+  --white: white;
+  --orange: #ff470f;
+  --yellow: #ffdd57;
+  --green: #48c774;
+  --turquoise: #00d1b2;
+  --cyan: #3298dc;
+  --blue: #3273dc;
+  --purple: #b86bff;
+  --red: #f14668;
+  --family-sans-serif: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
+  --family-monospace: monospace;
+  --render-mode: optimizeLegibility;
+  --size-1: 3rem;
+  --size-2: 2.5rem;
+  --size-3: 2rem;
+  --size-4: 1.5rem;
+  --size-5: 1.25rem;
+  --size-6: 1rem;
+  --size-7: 0.75rem;
+  --weight-light: 300;
+  --weight-normal: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+  --weight-bold: 700;
+  --block-spacing: 1.5rem;
+  --easing: ease-out;
+  --radius-small: 2px;
+  --radius: 4px;
+  --radius-large: 6px;
+  --radius-rounded: 290486px;
+  --speed: 86ms;
+  --primary: var(--turquoise);
+  --info: var(--cyan);
+  --success: var(--green);
+  --warning: var(--yellow);
+  --danger: var(--red);
+  --light: var(--white-ter);
+  --dark: var(--grey-darker);
+  --orange-invert: #fff;
+  --yellow-invert: rgba(0, 0, 0, 0.7);
+  --green-invert: #fff;
+  --turquoise-invert: #fff;
+  --cyan-invert: #fff;
+  --blue-invert: #fff;
+  --purple-invert: #fff;
+  --red-invert: #fff;
+  --primary-invert: #fff;
+  --primary-light: findLightColor($primary);
+  --primary-dark: findDarkColor($primary);
+  --info-invert: #fff;
+  --info-light: findLightColor($info);
+  --info-dark: findDarkColor($info);
+  --success-invert: #fff;
+  --success-light: findLightColor($success);
+  --success-dark: findDarkColor($success);
+  --warning-invert: rgba(0, 0, 0, 0.7);
+  --warning-light: findLightColor($warning);
+  --warning-dark: findDarkColor($warning);
+  --danger-invert: #fff;
+  --danger-light: findLightColor($danger);
+  --danger-dark: findDarkColor($danger);
+  --light-invert: rgba(0, 0, 0, 0.7);
+  --dark-invert: #fff;
+  --scheme-main: var(--white);
+  --scheme-main-bis: var(--white-bis);
+  --scheme-main-ter: var(--white-ter);
+  --scheme-invert: var(--black);
+  --scheme-invert-bis: var(--black-bis);
+  --scheme-invert-ter: var(--black-ter);
+  --background: var(--white-ter);
+  --border: var(--grey-lighter);
+  --border-hover: var(--grey-light);
+  --border-light: var(--grey-lightest);
+  --border-light-hover: var(--grey-light);
+  --text: var(--grey-dark);
+  --text-invert: #fff;
+  --text-light: var(--grey);
+  --text-strong: var(--grey-darker);
+  --code: var(--red);
+  --code-background: var(--background);
+  --pre: var(--text);
+  --pre-background: var(--background);
+  --link: var(--blue);
+  --link-invert: #fff;
+  --link-light: findLightColor($link);
+  --link-dark: findDarkColor($link);
+  --link-visited: var(--purple);
+  --link-hover: var(--grey-darker);
+  --link-hover-border: var(--grey-light);
+  --link-focus: var(--grey-darker);
+  --link-focus-border: var(--blue);
+  --link-active: var(--grey-darker);
+  --link-active-border: var(--grey-dark);
+}
+
 /*# sourceMappingURL=bulma.css.map */

sass/elements/title.sass

@@ -1,46 +1,69 @@
-$title-color: $text-strong !default
+$title-color: var(--text-strong, #{$text-strong}) !default
 $title-family: false !default
-$title-size: $size-3 !default
+$title-size: var(--size-3, #{$size-3}) !default
-$title-weight: $weight-semibold !default
+$title-weight: var(--weight-semibold, #{$weight-semibold}) !default
 $title-line-height: 1.125 !default
 $title-strong-color: inherit !default
 $title-strong-weight: inherit !default
 $title-sub-size: 0.75em !default
 $title-sup-size: 0.75em !default
 
-$subtitle-color: $text !default
+$subtitle-color: var(--text, #{$text}) !default
 $subtitle-family: false !default
-$subtitle-size: $size-5 !default
+$subtitle-size: var(--size-5, #{$size-5}) !default
-$subtitle-weight: $weight-normal !default
+$subtitle-weight: var(--weight-normal, #{$weight-normal}) !default
 $subtitle-line-height: 1.25 !default
-$subtitle-strong-color: $text-strong !default
+$subtitle-strong-color: var(--text-strong, #{$text-strong}) !default
-$subtitle-strong-weight: $weight-semibold !default
+$subtitle-strong-weight: var(--weight-semibold, #{$weight-semibold}) !default
 $subtitle-negative-margin: -1.25rem !default
 
 .title,
 .subtitle
+  --title-sub-size: #{$title-sub-size}
+  --title-sup-size: #{$title-sup-size}
   @extend %block
   word-break: break-word
   em,
   span
     font-weight: inherit
   sub
-    font-size: $title-sub-size
+    font-size: var(--title-sub-size)
   sup
-    font-size: $title-sup-size
+    font-size: var(--title-sup-size)
   .tag
     vertical-align: middle
 
 .title
-  color: $title-color
+  // Approach A
+  // CSS Variable takes precedence, if theme is included
+  // --title-color: var(--text-strong, #{$title-color})
+  // color: var(--title-color)
+
+  // Approach B
+  // Sass Variable takes precedence
+  // Problem: --title-color is always set, so the fallback is never used
+  // --title-color: #{$title-color}
+  // color: var(--title-color, var(--text-strong))
+
+  // Approach C
+  // Sass variable references a CSS variable
+  // $title-color: var(--text-strong)
+  --title-color: #{$title-color}
+  color: var(--title-color)
+
+  --title-size: #{$title-size}
+  --title-weight: #{$title-weight}
+  --title-line-height: #{$title-line-height}
+  --title-strong-color: #{$title-strong-color}
+  --title-strong-weight: #{$title-strong-weight}
   @if $title-family
     font-family: $title-family
-  font-size: $title-size
+  font-size: var(--title-size)
-  font-weight: $title-weight
+  font-weight: var(--title-weight)
-  line-height: $title-line-height
+  line-height: var(--title-line-height)
   strong
-    color: $title-strong-color
+    color: var(--title-strong-color)
-    font-weight: $title-strong-weight
+    font-weight: var(--title-strong-weight)
   & + .highlight
     margin-top: -0.75rem
   &:not(.is-spaced) + .subtitle

sass/themes/default.sass

@@ -0,0 +1,107 @@
+\:root
+  // Initial variables
+  --black: #{$black}
+  --black-bis: #{$black-bis}
+  --black-ter: #{$black-ter}
+  --grey-darker: #{$grey-darker}
+  --grey-dark: #{$grey-dark}
+  --grey: #{$grey}
+  --grey-light: #{$grey-light}
+  --grey-lighter: #{$grey-lighter}
+  --grey-lightest: #{$grey-lightest}
+  --white-ter: #{$white-ter}
+  --white-bis: #{$white-bis}
+  --white: #{$white}
+  --orange: #{$orange}
+  --yellow: #{$yellow}
+  --green: #{$green}
+  --turquoise: #{$turquoise}
+  --cyan: #{$cyan}
+  --blue: #{$blue}
+  --purple: #{$purple}
+  --red: #{$red}
+  --family-sans-serif: #{$family-sans-serif}
+  --family-monospace: #{$family-monospace}
+  --render-mode: #{$render-mode}
+  --size-1: #{$size-1}
+  --size-2: #{$size-2}
+  --size-3: #{$size-3}
+  --size-4: #{$size-4}
+  --size-5: #{$size-5}
+  --size-6: #{$size-6}
+  --size-7: #{$size-7}
+  --weight-light: #{$weight-light}
+  --weight-normal: #{$weight-normal}
+  --weight-medium: #{$weight-medium}
+  --weight-semibold: #{$weight-semibold}
+  --weight-bold: #{$weight-bold}
+  --block-spacing: #{$block-spacing}
+  --easing: #{$easing}
+  --radius-small: #{$radius-small}
+  --radius: #{$radius}
+  --radius-large: #{$radius-large}
+  --radius-rounded: #{$radius-rounded}
+  --speed: #{$speed}
+  // Derived variables
+  --primary: var(--turquoise)
+  --info: var(--cyan)
+  --success: var(--green)
+  --warning: var(--yellow)
+  --danger: var(--red)
+  --light: var(--white-ter)
+  --dark: var(--grey-darker)
+  --orange-invert: #{findColorInvert($orange)}
+  --yellow-invert: #{findColorInvert($yellow)}
+  --green-invert: #{findColorInvert($green)}
+  --turquoise-invert: #{findColorInvert($turquoise)}
+  --cyan-invert: #{findColorInvert($cyan)}
+  --blue-invert: #{findColorInvert($blue)}
+  --purple-invert: #{findColorInvert($purple)}
+  --red-invert: #{findColorInvert($red)}
+  --primary-invert: #{findColorInvert($primary)}
+  --primary-light: findLightColor($primary)
+  --primary-dark: findDarkColor($primary)
+  --info-invert: #{findColorInvert($info)}
+  --info-light: findLightColor($info)
+  --info-dark: findDarkColor($info)
+  --success-invert: #{findColorInvert($success)}
+  --success-light: findLightColor($success)
+  --success-dark: findDarkColor($success)
+  --warning-invert: #{findColorInvert($warning)}
+  --warning-light: findLightColor($warning)
+  --warning-dark: findDarkColor($warning)
+  --danger-invert: #{findColorInvert($danger)}
+  --danger-light: findLightColor($danger)
+  --danger-dark: findDarkColor($danger)
+  --light-invert: #{findColorInvert($light)}
+  --dark-invert: #{findColorInvert($dark)}
+  --scheme-main: var(--white)
+  --scheme-main-bis: var(--white-bis)
+  --scheme-main-ter: var(--white-ter)
+  --scheme-invert: var(--black)
+  --scheme-invert-bis: var(--black-bis)
+  --scheme-invert-ter: var(--black-ter)
+  --background: var(--white-ter)
+  --border: var(--grey-lighter)
+  --border-hover: var(--grey-light)
+  --border-light: var(--grey-lightest)
+  --border-light-hover: var(--grey-light)
+  --text: var(--grey-dark)
+  --text-invert: #{findColorInvert($text)}
+  --text-light: var(--grey)
+  --text-strong: var(--grey-darker)
+  --code: var(--red)
+  --code-background: var(--background)
+  --pre: var(--text)
+  --pre-background: var(--background)
+  --link: var(--blue)
+  --link-invert: #{findColorInvert($link)}
+  --link-light: findLightColor($link)
+  --link-dark: findDarkColor($link)
+  --link-visited: var(--purple)
+  --link-hover: var(--grey-darker)
+  --link-hover-border: var(--grey-light)
+  --link-focus: var(--grey-darker)
+  --link-focus-border: var(--blue)
+  --link-active: var(--grey-darker)
+  --link-active-border: var(--grey-dark)