Init CSS variables

diff --git a/bulma.scss b/bulma.scss
index 8dc2a35963b7b530595319c098fa8d5f32dd7882..967efbb033723e8b71151f850d263ceea95dfd16 100644 (file)
--- a/bulma.scss
+++ b/bulma.scss
@@ -9,3 +9,4 @@
 @import "sass/grid/_all";
 @import "sass/helpers/_all";
 @import "sass/layout/_all";
+@import "sass/themes/default";

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 843c5b33d2988a5366d1379096514c9030406e3e..fcf5397f895035e41a595711eb4c24aa56ca9834 100644 (file)
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -72,6 +72,7 @@ fieldset[disabled] .bulma-control-extend {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none;
 }
 
@@ -102,6 +103,7 @@ fieldset[disabled] .bulma-control-extend {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none;
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -315,7 +317,7 @@ th:not([align]) {
 }
 
 html {
-  background-color: white;
+  background-color: var(--bulma-scheme-main);
   font-size: 16px;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -323,9 +325,7 @@ html {
   overflow-x: hidden;
   overflow-y: scroll;
   text-rendering: optimizeLegibility;
-  -webkit-text-size-adjust: 100%;
-     -moz-text-size-adjust: 100%;
-          text-size-adjust: 100%;
+  text-size-adjust: 100%;
 }
 
 article,
@@ -344,20 +344,20 @@ input,
 optgroup,
 select,
 textarea {
-  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font-family: var(--bulma-family-primary);
 }
 
 code,
 pre {
   -moz-osx-font-smoothing: auto;
   -webkit-font-smoothing: auto;
-  font-family: monospace;
+  font-family: var(--bulma-family-code);
 }
 
 body {
-  color: #4a4a4a;
+  color: var(--bulma-text);
   font-size: 1em;
-  font-weight: 400;
+  font-weight: var(--bulma-weight-normal);
   line-height: 1.5;
 }
 
@@ -384,7 +384,7 @@ code {
 }
 
 hr {
-  background-color: whitesmoke;
+  background-color: var(--bulma-background);
   border: none;
   display: block;
   height: 2px;
@@ -411,8 +411,8 @@ span {
 }
 
 strong {
-  color: #363636;
-  font-weight: 700;
+  color: var(--bulma-text-strong);
+  font-weight: var(--bulma-weight-bold);
 }
 
 fieldset {
@@ -12540,7 +12540,6 @@ label.panel-block:hover {
   flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
-  min-height: -moz-min-content;
   min-height: min-content;
 }
 
@@ -16890,6 +16889,679 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   padding: 3rem 1.5rem 6rem;
 }
 
+:root {
+  --bulma-family-sans-serif: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
+  --bulma-family-monospace: monospace;
+  --bulma-size-1: 3rem;
+  --bulma-size-2: 2.5rem;
+  --bulma-size-3: 2rem;
+  --bulma-size-4: 1.5rem;
+  --bulma-size-5: 1.25rem;
+  --bulma-size-6: 1rem;
+  --bulma-size-7: 0.75rem;
+  --bulma-weight-light: 300;
+  --bulma-weight-normal: 400;
+  --bulma-weight-medium: 500;
+  --bulma-weight-semibold: 600;
+  --bulma-weight-bold: 700;
+  --bulma-block-spacing: 1.5rem;
+  --bulma-scheme-main: white;
+  --bulma-scheme-main-bis: #fafafa;
+  --bulma-scheme-main-ter: whitesmoke;
+  --bulma-scheme-invert: #0a0a0a;
+  --bulma-scheme-invert-bis: #121212;
+  --bulma-scheme-invert-ter: #242424;
+  --bulma-background: whitesmoke;
+  --bulma-border: #dbdbdb;
+  --bulma-border-hover: #b5b5b5;
+  --bulma-border-light: #ededed;
+  --bulma-border-light-hover: #b5b5b5;
+  --bulma-text: #4a4a4a;
+  --bulma-text-invert: #fff;
+  --bulma-text-light: #7a7a7a;
+  --bulma-text-strong: #363636;
+  --bulma-code: #da1039;
+  --bulma-code-background: whitesmoke;
+  --bulma-pre: #4a4a4a;
+  --bulma-pre-background: whitesmoke;
+  --bulma-link-light: #eff1fa;
+  --bulma-link-dark: #3850b7;
+  --bulma-link-visited: #b86bff;
+  --bulma-link-hover: #363636;
+  --bulma-link-hover-border: #b5b5b5;
+  --bulma-link-focus: #363636;
+  --bulma-link-focus-border: #485fc7;
+  --bulma-link-active: #363636;
+  --bulma-link-active-border: #4a4a4a;
+  --bulma-family-primary: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
+  --bulma-family-secondary: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
+  --bulma-family-code: monospace;
+  --bulma-size-small: 0.75rem;
+  --bulma-size-normal: 1rem;
+  --bulma-size-medium: 1.25rem;
+  --bulma-size-large: 1.5rem;
+  --bulma-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0px 0 1px rgba(10, 10, 10, 0.02);
+  --bulma-white-rgb: 255, 255, 255;
+  --bulma-white-h: 0deg;
+  --bulma-white-s: 0%;
+  --bulma-white-l: 100%;
+  --bulma-white: white;
+  --bulma-white-base: white;
+  --bulma-white-00: hsl(var(--bulma-white-h), var(--bulma-white-s), 0%);
+  --bulma-white-05: hsl(var(--bulma-white-h), var(--bulma-white-s), 5%);
+  --bulma-white-10: hsl(var(--bulma-white-h), var(--bulma-white-s), 10%);
+  --bulma-white-15: hsl(var(--bulma-white-h), var(--bulma-white-s), 15%);
+  --bulma-white-20: hsl(var(--bulma-white-h), var(--bulma-white-s), 20%);
+  --bulma-white-25: hsl(var(--bulma-white-h), var(--bulma-white-s), 25%);
+  --bulma-white-30: hsl(var(--bulma-white-h), var(--bulma-white-s), 30%);
+  --bulma-white-35: hsl(var(--bulma-white-h), var(--bulma-white-s), 35%);
+  --bulma-white-40: hsl(var(--bulma-white-h), var(--bulma-white-s), 40%);
+  --bulma-white-45: hsl(var(--bulma-white-h), var(--bulma-white-s), 45%);
+  --bulma-white-50: hsl(var(--bulma-white-h), var(--bulma-white-s), 50%);
+  --bulma-white-55: hsl(var(--bulma-white-h), var(--bulma-white-s), 55%);
+  --bulma-white-60: hsl(var(--bulma-white-h), var(--bulma-white-s), 60%);
+  --bulma-white-65: hsl(var(--bulma-white-h), var(--bulma-white-s), 65%);
+  --bulma-white-70: hsl(var(--bulma-white-h), var(--bulma-white-s), 70%);
+  --bulma-white-75: hsl(var(--bulma-white-h), var(--bulma-white-s), 75%);
+  --bulma-white-80: hsl(var(--bulma-white-h), var(--bulma-white-s), 80%);
+  --bulma-white-85: hsl(var(--bulma-white-h), var(--bulma-white-s), 85%);
+  --bulma-white-90: hsl(var(--bulma-white-h), var(--bulma-white-s), 90%);
+  --bulma-white-95: hsl(var(--bulma-white-h), var(--bulma-white-s), 95%);
+  --bulma-white-95: hsl(var(--bulma-white-h), var(--bulma-white-s), 95%);
+  --bulma-white-invert: #0a0a0a;
+  --bulma-black-rgb: 10.2, 10.2, 10.2;
+  --bulma-black-h: 0deg;
+  --bulma-black-s: 0%;
+  --bulma-black-l: 4%;
+  --bulma-black: #0a0a0a;
+  --bulma-black-base: #0a0a0a;
+  --bulma-black-00: hsl(var(--bulma-black-h), var(--bulma-black-s), 4%);
+  --bulma-black-05: hsl(var(--bulma-black-h), var(--bulma-black-s), 9%);
+  --bulma-black-10: hsl(var(--bulma-black-h), var(--bulma-black-s), 14%);
+  --bulma-black-15: hsl(var(--bulma-black-h), var(--bulma-black-s), 19%);
+  --bulma-black-20: hsl(var(--bulma-black-h), var(--bulma-black-s), 24%);
+  --bulma-black-25: hsl(var(--bulma-black-h), var(--bulma-black-s), 29%);
+  --bulma-black-30: hsl(var(--bulma-black-h), var(--bulma-black-s), 34%);
+  --bulma-black-35: hsl(var(--bulma-black-h), var(--bulma-black-s), 39%);
+  --bulma-black-40: hsl(var(--bulma-black-h), var(--bulma-black-s), 44%);
+  --bulma-black-45: hsl(var(--bulma-black-h), var(--bulma-black-s), 49%);
+  --bulma-black-50: hsl(var(--bulma-black-h), var(--bulma-black-s), 54%);
+  --bulma-black-55: hsl(var(--bulma-black-h), var(--bulma-black-s), 59%);
+  --bulma-black-60: hsl(var(--bulma-black-h), var(--bulma-black-s), 64%);
+  --bulma-black-65: hsl(var(--bulma-black-h), var(--bulma-black-s), 69%);
+  --bulma-black-70: hsl(var(--bulma-black-h), var(--bulma-black-s), 74%);
+  --bulma-black-75: hsl(var(--bulma-black-h), var(--bulma-black-s), 79%);
+  --bulma-black-80: hsl(var(--bulma-black-h), var(--bulma-black-s), 84%);
+  --bulma-black-85: hsl(var(--bulma-black-h), var(--bulma-black-s), 89%);
+  --bulma-black-90: hsl(var(--bulma-black-h), var(--bulma-black-s), 94%);
+  --bulma-black-95: hsl(var(--bulma-black-h), var(--bulma-black-s), 99%);
+  --bulma-black-95: hsl(var(--bulma-black-h), var(--bulma-black-s), 99%);
+  --bulma-black-invert: white;
+  --bulma-light-rgb: 244.8, 244.8, 244.8;
+  --bulma-light-h: 0deg;
+  --bulma-light-s: 0%;
+  --bulma-light-l: 96%;
+  --bulma-light: whitesmoke;
+  --bulma-light-base: whitesmoke;
+  --bulma-light-00: hsl(var(--bulma-light-h), var(--bulma-light-s), 1%);
+  --bulma-light-05: hsl(var(--bulma-light-h), var(--bulma-light-s), 6%);
+  --bulma-light-10: hsl(var(--bulma-light-h), var(--bulma-light-s), 11%);
+  --bulma-light-15: hsl(var(--bulma-light-h), var(--bulma-light-s), 16%);
+  --bulma-light-20: hsl(var(--bulma-light-h), var(--bulma-light-s), 21%);
+  --bulma-light-25: hsl(var(--bulma-light-h), var(--bulma-light-s), 26%);
+  --bulma-light-30: hsl(var(--bulma-light-h), var(--bulma-light-s), 31%);
+  --bulma-light-35: hsl(var(--bulma-light-h), var(--bulma-light-s), 36%);
+  --bulma-light-40: hsl(var(--bulma-light-h), var(--bulma-light-s), 41%);
+  --bulma-light-45: hsl(var(--bulma-light-h), var(--bulma-light-s), 46%);
+  --bulma-light-50: hsl(var(--bulma-light-h), var(--bulma-light-s), 51%);
+  --bulma-light-55: hsl(var(--bulma-light-h), var(--bulma-light-s), 56%);
+  --bulma-light-60: hsl(var(--bulma-light-h), var(--bulma-light-s), 61%);
+  --bulma-light-65: hsl(var(--bulma-light-h), var(--bulma-light-s), 66%);
+  --bulma-light-70: hsl(var(--bulma-light-h), var(--bulma-light-s), 71%);
+  --bulma-light-75: hsl(var(--bulma-light-h), var(--bulma-light-s), 76%);
+  --bulma-light-80: hsl(var(--bulma-light-h), var(--bulma-light-s), 81%);
+  --bulma-light-85: hsl(var(--bulma-light-h), var(--bulma-light-s), 86%);
+  --bulma-light-90: hsl(var(--bulma-light-h), var(--bulma-light-s), 91%);
+  --bulma-light-95: hsl(var(--bulma-light-h), var(--bulma-light-s), 96%);
+  --bulma-light-invert: rgba(0, 0, 0, 0.7);
+  --bulma-dark-rgb: 53.55, 53.55, 53.55;
+  --bulma-dark-h: 0deg;
+  --bulma-dark-s: 0%;
+  --bulma-dark-l: 21%;
+  --bulma-dark: #363636;
+  --bulma-dark-base: #363636;
+  --bulma-dark-00: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 1%);
+  --bulma-dark-05: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 6%);
+  --bulma-dark-10: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 11%);
+  --bulma-dark-15: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 16%);
+  --bulma-dark-20: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 21%);
+  --bulma-dark-25: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 26%);
+  --bulma-dark-30: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 31%);
+  --bulma-dark-35: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 36%);
+  --bulma-dark-40: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 41%);
+  --bulma-dark-45: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 46%);
+  --bulma-dark-50: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 51%);
+  --bulma-dark-55: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 56%);
+  --bulma-dark-60: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 61%);
+  --bulma-dark-65: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 66%);
+  --bulma-dark-70: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 71%);
+  --bulma-dark-75: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 76%);
+  --bulma-dark-80: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 81%);
+  --bulma-dark-85: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 86%);
+  --bulma-dark-90: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 91%);
+  --bulma-dark-95: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 96%);
+  --bulma-dark-95: hsl(var(--bulma-dark-h), var(--bulma-dark-s), 96%);
+  --bulma-dark-invert: #fff;
+  --bulma-primary-rgb: 0, 209.1, 177.735;
+  --bulma-primary-h: 171deg;
+  --bulma-primary-s: 100%;
+  --bulma-primary-l: 41%;
+  --bulma-primary: #00d1b2;
+  --bulma-primary-base: #00d1b2;
+  --bulma-primary-00: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 1%);
+  --bulma-primary-05: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 6%);
+  --bulma-primary-10: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 11%);
+  --bulma-primary-15: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 16%);
+  --bulma-primary-20: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 21%);
+  --bulma-primary-25: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 26%);
+  --bulma-primary-30: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 31%);
+  --bulma-primary-35: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 36%);
+  --bulma-primary-40: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 41%);
+  --bulma-primary-45: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 46%);
+  --bulma-primary-50: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 51%);
+  --bulma-primary-55: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 56%);
+  --bulma-primary-60: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 61%);
+  --bulma-primary-65: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 66%);
+  --bulma-primary-70: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 71%);
+  --bulma-primary-75: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 76%);
+  --bulma-primary-80: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 81%);
+  --bulma-primary-85: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 86%);
+  --bulma-primary-90: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 91%);
+  --bulma-primary-95: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 96%);
+  --bulma-primary-95: hsl(var(--bulma-primary-h), var(--bulma-primary-s), 96%);
+  --bulma-primary-invert: #fff;
+  --bulma-link-rgb: 71.6295, 94.92035, 198.6705;
+  --bulma-link-h: 229deg;
+  --bulma-link-s: 53%;
+  --bulma-link-l: 53%;
+  --bulma-link: #485fc7;
+  --bulma-link-base: #485fc7;
+  --bulma-link-00: hsl(var(--bulma-link-h), var(--bulma-link-s), 3%);
+  --bulma-link-05: hsl(var(--bulma-link-h), var(--bulma-link-s), 8%);
+  --bulma-link-10: hsl(var(--bulma-link-h), var(--bulma-link-s), 13%);
+  --bulma-link-15: hsl(var(--bulma-link-h), var(--bulma-link-s), 18%);
+  --bulma-link-20: hsl(var(--bulma-link-h), var(--bulma-link-s), 23%);
+  --bulma-link-25: hsl(var(--bulma-link-h), var(--bulma-link-s), 28%);
+  --bulma-link-30: hsl(var(--bulma-link-h), var(--bulma-link-s), 33%);
+  --bulma-link-35: hsl(var(--bulma-link-h), var(--bulma-link-s), 38%);
+  --bulma-link-40: hsl(var(--bulma-link-h), var(--bulma-link-s), 43%);
+  --bulma-link-45: hsl(var(--bulma-link-h), var(--bulma-link-s), 48%);
+  --bulma-link-50: hsl(var(--bulma-link-h), var(--bulma-link-s), 53%);
+  --bulma-link-55: hsl(var(--bulma-link-h), var(--bulma-link-s), 58%);
+  --bulma-link-60: hsl(var(--bulma-link-h), var(--bulma-link-s), 63%);
+  --bulma-link-65: hsl(var(--bulma-link-h), var(--bulma-link-s), 68%);
+  --bulma-link-70: hsl(var(--bulma-link-h), var(--bulma-link-s), 73%);
+  --bulma-link-75: hsl(var(--bulma-link-h), var(--bulma-link-s), 78%);
+  --bulma-link-80: hsl(var(--bulma-link-h), var(--bulma-link-s), 83%);
+  --bulma-link-85: hsl(var(--bulma-link-h), var(--bulma-link-s), 88%);
+  --bulma-link-90: hsl(var(--bulma-link-h), var(--bulma-link-s), 93%);
+  --bulma-link-95: hsl(var(--bulma-link-h), var(--bulma-link-s), 98%);
+  --bulma-link-95: hsl(var(--bulma-link-h), var(--bulma-link-s), 98%);
+  --bulma-link-invert: #fff;
+  --bulma-info-rgb: 62.0415, 142.46085, 208.2585;
+  --bulma-info-h: 207deg;
+  --bulma-info-s: 61%;
+  --bulma-info-l: 53%;
+  --bulma-info: #3e8ed0;
+  --bulma-info-base: #3e8ed0;
+  --bulma-info-00: hsl(var(--bulma-info-h), var(--bulma-info-s), 3%);
+  --bulma-info-05: hsl(var(--bulma-info-h), var(--bulma-info-s), 8%);
+  --bulma-info-10: hsl(var(--bulma-info-h), var(--bulma-info-s), 13%);
+  --bulma-info-15: hsl(var(--bulma-info-h), var(--bulma-info-s), 18%);
+  --bulma-info-20: hsl(var(--bulma-info-h), var(--bulma-info-s), 23%);
+  --bulma-info-25: hsl(var(--bulma-info-h), var(--bulma-info-s), 28%);
+  --bulma-info-30: hsl(var(--bulma-info-h), var(--bulma-info-s), 33%);
+  --bulma-info-35: hsl(var(--bulma-info-h), var(--bulma-info-s), 38%);
+  --bulma-info-40: hsl(var(--bulma-info-h), var(--bulma-info-s), 43%);
+  --bulma-info-45: hsl(var(--bulma-info-h), var(--bulma-info-s), 48%);
+  --bulma-info-50: hsl(var(--bulma-info-h), var(--bulma-info-s), 53%);
+  --bulma-info-55: hsl(var(--bulma-info-h), var(--bulma-info-s), 58%);
+  --bulma-info-60: hsl(var(--bulma-info-h), var(--bulma-info-s), 63%);
+  --bulma-info-65: hsl(var(--bulma-info-h), var(--bulma-info-s), 68%);
+  --bulma-info-70: hsl(var(--bulma-info-h), var(--bulma-info-s), 73%);
+  --bulma-info-75: hsl(var(--bulma-info-h), var(--bulma-info-s), 78%);
+  --bulma-info-80: hsl(var(--bulma-info-h), var(--bulma-info-s), 83%);
+  --bulma-info-85: hsl(var(--bulma-info-h), var(--bulma-info-s), 88%);
+  --bulma-info-90: hsl(var(--bulma-info-h), var(--bulma-info-s), 93%);
+  --bulma-info-95: hsl(var(--bulma-info-h), var(--bulma-info-s), 98%);
+  --bulma-info-95: hsl(var(--bulma-info-h), var(--bulma-info-s), 98%);
+  --bulma-info-invert: #fff;
+  --bulma-success-rgb: 71.6295, 198.6705, 141.50205;
+  --bulma-success-h: 153deg;
+  --bulma-success-s: 53%;
+  --bulma-success-l: 53%;
+  --bulma-success: #48c78e;
+  --bulma-success-base: #48c78e;
+  --bulma-success-00: hsl(var(--bulma-success-h), var(--bulma-success-s), 3%);
+  --bulma-success-05: hsl(var(--bulma-success-h), var(--bulma-success-s), 8%);
+  --bulma-success-10: hsl(var(--bulma-success-h), var(--bulma-success-s), 13%);
+  --bulma-success-15: hsl(var(--bulma-success-h), var(--bulma-success-s), 18%);
+  --bulma-success-20: hsl(var(--bulma-success-h), var(--bulma-success-s), 23%);
+  --bulma-success-25: hsl(var(--bulma-success-h), var(--bulma-success-s), 28%);
+  --bulma-success-30: hsl(var(--bulma-success-h), var(--bulma-success-s), 33%);
+  --bulma-success-35: hsl(var(--bulma-success-h), var(--bulma-success-s), 38%);
+  --bulma-success-40: hsl(var(--bulma-success-h), var(--bulma-success-s), 43%);
+  --bulma-success-45: hsl(var(--bulma-success-h), var(--bulma-success-s), 48%);
+  --bulma-success-50: hsl(var(--bulma-success-h), var(--bulma-success-s), 53%);
+  --bulma-success-55: hsl(var(--bulma-success-h), var(--bulma-success-s), 58%);
+  --bulma-success-60: hsl(var(--bulma-success-h), var(--bulma-success-s), 63%);
+  --bulma-success-65: hsl(var(--bulma-success-h), var(--bulma-success-s), 68%);
+  --bulma-success-70: hsl(var(--bulma-success-h), var(--bulma-success-s), 73%);
+  --bulma-success-75: hsl(var(--bulma-success-h), var(--bulma-success-s), 78%);
+  --bulma-success-80: hsl(var(--bulma-success-h), var(--bulma-success-s), 83%);
+  --bulma-success-85: hsl(var(--bulma-success-h), var(--bulma-success-s), 88%);
+  --bulma-success-90: hsl(var(--bulma-success-h), var(--bulma-success-s), 93%);
+  --bulma-success-95: hsl(var(--bulma-success-h), var(--bulma-success-s), 98%);
+  --bulma-success-95: hsl(var(--bulma-success-h), var(--bulma-success-s), 98%);
+  --bulma-success-invert: #fff;
+  --bulma-warning-rgb: 255, 223.72, 137.7;
+  --bulma-warning-h: 44deg;
+  --bulma-warning-s: 100%;
+  --bulma-warning-l: 77%;
+  --bulma-warning: #ffe08a;
+  --bulma-warning-base: #ffe08a;
+  --bulma-warning-00: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 2%);
+  --bulma-warning-05: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 7%);
+  --bulma-warning-10: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 12%);
+  --bulma-warning-15: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 17%);
+  --bulma-warning-20: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 22%);
+  --bulma-warning-25: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 27%);
+  --bulma-warning-30: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 32%);
+  --bulma-warning-35: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 37%);
+  --bulma-warning-40: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 42%);
+  --bulma-warning-45: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 47%);
+  --bulma-warning-50: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 52%);
+  --bulma-warning-55: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 57%);
+  --bulma-warning-60: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 62%);
+  --bulma-warning-65: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 67%);
+  --bulma-warning-70: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 72%);
+  --bulma-warning-75: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 77%);
+  --bulma-warning-80: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 82%);
+  --bulma-warning-85: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 87%);
+  --bulma-warning-90: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 92%);
+  --bulma-warning-95: hsl(var(--bulma-warning-h), var(--bulma-warning-s), 97%);
+  --bulma-warning-invert: rgba(0, 0, 0, 0.7);
+  --bulma-danger-rgb: 241.077, 70.023, 104.2338;
+  --bulma-danger-h: 348deg;
+  --bulma-danger-s: 86%;
+  --bulma-danger-l: 61%;
+  --bulma-danger: #f14668;
+  --bulma-danger-base: #f14668;
+  --bulma-danger-00: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 1%);
+  --bulma-danger-05: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 6%);
+  --bulma-danger-10: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 11%);
+  --bulma-danger-15: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 16%);
+  --bulma-danger-20: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 21%);
+  --bulma-danger-25: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 26%);
+  --bulma-danger-30: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 31%);
+  --bulma-danger-35: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 36%);
+  --bulma-danger-40: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 41%);
+  --bulma-danger-45: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 46%);
+  --bulma-danger-50: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 51%);
+  --bulma-danger-55: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 56%);
+  --bulma-danger-60: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 61%);
+  --bulma-danger-65: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 66%);
+  --bulma-danger-70: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 71%);
+  --bulma-danger-75: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 76%);
+  --bulma-danger-80: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 81%);
+  --bulma-danger-85: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 86%);
+  --bulma-danger-90: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 91%);
+  --bulma-danger-95: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 96%);
+  --bulma-danger-95: hsl(var(--bulma-danger-h), var(--bulma-danger-s), 96%);
+  --bulma-danger-invert: #fff;
+  --bulma-expo-rgb: 255, 210, 87;
+  --bulma-expo-h: 44deg;
+  --bulma-expo-s: 100%;
+  --bulma-expo-l: 67%;
+  --bulma-expo: #ffd257;
+  --bulma-expo-base: #ffd257;
+  --bulma-expo-00: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 2%);
+  --bulma-expo-05: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 7%);
+  --bulma-expo-10: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 12%);
+  --bulma-expo-15: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 17%);
+  --bulma-expo-20: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 22%);
+  --bulma-expo-25: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 27%);
+  --bulma-expo-30: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 32%);
+  --bulma-expo-35: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 37%);
+  --bulma-expo-40: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 42%);
+  --bulma-expo-45: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 47%);
+  --bulma-expo-50: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 52%);
+  --bulma-expo-55: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 57%);
+  --bulma-expo-60: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 62%);
+  --bulma-expo-65: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 67%);
+  --bulma-expo-70: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 72%);
+  --bulma-expo-75: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 77%);
+  --bulma-expo-80: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 82%);
+  --bulma-expo-85: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 87%);
+  --bulma-expo-90: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 92%);
+  --bulma-expo-95: hsl(var(--bulma-expo-h), var(--bulma-expo-s), 97%);
+  --bulma-expo-invert: white;
+  --bulma-love-rgb: 241.077, 70.023, 104.2338;
+  --bulma-love-h: 348deg;
+  --bulma-love-s: 86%;
+  --bulma-love-l: 61%;
+  --bulma-love: #f14668;
+  --bulma-love-base: #f14668;
+  --bulma-love-00: hsl(var(--bulma-love-h), var(--bulma-love-s), 1%);
+  --bulma-love-05: hsl(var(--bulma-love-h), var(--bulma-love-s), 6%);
+  --bulma-love-10: hsl(var(--bulma-love-h), var(--bulma-love-s), 11%);
+  --bulma-love-15: hsl(var(--bulma-love-h), var(--bulma-love-s), 16%);
+  --bulma-love-20: hsl(var(--bulma-love-h), var(--bulma-love-s), 21%);
+  --bulma-love-25: hsl(var(--bulma-love-h), var(--bulma-love-s), 26%);
+  --bulma-love-30: hsl(var(--bulma-love-h), var(--bulma-love-s), 31%);
+  --bulma-love-35: hsl(var(--bulma-love-h), var(--bulma-love-s), 36%);
+  --bulma-love-40: hsl(var(--bulma-love-h), var(--bulma-love-s), 41%);
+  --bulma-love-45: hsl(var(--bulma-love-h), var(--bulma-love-s), 46%);
+  --bulma-love-50: hsl(var(--bulma-love-h), var(--bulma-love-s), 51%);
+  --bulma-love-55: hsl(var(--bulma-love-h), var(--bulma-love-s), 56%);
+  --bulma-love-60: hsl(var(--bulma-love-h), var(--bulma-love-s), 61%);
+  --bulma-love-65: hsl(var(--bulma-love-h), var(--bulma-love-s), 66%);
+  --bulma-love-70: hsl(var(--bulma-love-h), var(--bulma-love-s), 71%);
+  --bulma-love-75: hsl(var(--bulma-love-h), var(--bulma-love-s), 76%);
+  --bulma-love-80: hsl(var(--bulma-love-h), var(--bulma-love-s), 81%);
+  --bulma-love-85: hsl(var(--bulma-love-h), var(--bulma-love-s), 86%);
+  --bulma-love-90: hsl(var(--bulma-love-h), var(--bulma-love-s), 91%);
+  --bulma-love-95: hsl(var(--bulma-love-h), var(--bulma-love-s), 96%);
+  --bulma-love-95: hsl(var(--bulma-love-h), var(--bulma-love-s), 96%);
+  --bulma-love-invert: white;
+  --bulma-patreon-rgb: 249, 104, 84;
+  --bulma-patreon-h: 7deg;
+  --bulma-patreon-s: 93%;
+  --bulma-patreon-l: 65%;
+  --bulma-patreon: #f96854;
+  --bulma-patreon-base: #f96854;
+  --bulma-patreon-00: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 0%);
+  --bulma-patreon-05: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 5%);
+  --bulma-patreon-10: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 10%);
+  --bulma-patreon-15: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 15%);
+  --bulma-patreon-20: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 20%);
+  --bulma-patreon-25: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 25%);
+  --bulma-patreon-30: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 30%);
+  --bulma-patreon-35: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 35%);
+  --bulma-patreon-40: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 40%);
+  --bulma-patreon-45: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 45%);
+  --bulma-patreon-50: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 50%);
+  --bulma-patreon-55: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 55%);
+  --bulma-patreon-60: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 60%);
+  --bulma-patreon-65: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 65%);
+  --bulma-patreon-70: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 70%);
+  --bulma-patreon-75: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 75%);
+  --bulma-patreon-80: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 80%);
+  --bulma-patreon-85: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 85%);
+  --bulma-patreon-90: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 90%);
+  --bulma-patreon-95: hsl(var(--bulma-patreon-h), var(--bulma-patreon-s), 95%);
+  --bulma-patreon-invert: white;
+  --bulma-rss-rgb: 242, 101, 34;
+  --bulma-rss-h: 19deg;
+  --bulma-rss-s: 89%;
+  --bulma-rss-l: 54%;
+  --bulma-rss: #f26522;
+  --bulma-rss-base: #f26522;
+  --bulma-rss-00: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 4%);
+  --bulma-rss-05: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 9%);
+  --bulma-rss-10: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 14%);
+  --bulma-rss-15: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 19%);
+  --bulma-rss-20: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 24%);
+  --bulma-rss-25: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 29%);
+  --bulma-rss-30: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 34%);
+  --bulma-rss-35: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 39%);
+  --bulma-rss-40: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 44%);
+  --bulma-rss-45: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 49%);
+  --bulma-rss-50: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 54%);
+  --bulma-rss-55: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 59%);
+  --bulma-rss-60: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 64%);
+  --bulma-rss-65: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 69%);
+  --bulma-rss-70: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 74%);
+  --bulma-rss-75: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 79%);
+  --bulma-rss-80: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 84%);
+  --bulma-rss-85: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 89%);
+  --bulma-rss-90: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 94%);
+  --bulma-rss-95: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 99%);
+  --bulma-rss-95: hsl(var(--bulma-rss-h), var(--bulma-rss-s), 99%);
+  --bulma-rss-invert: white;
+  --bulma-bleeding-rgb: 171, 244, 124;
+  --bulma-bleeding-h: 97deg;
+  --bulma-bleeding-s: 85%;
+  --bulma-bleeding-l: 72%;
+  --bulma-bleeding: #abf47c;
+  --bulma-bleeding-base: #abf47c;
+  --bulma-bleeding-00: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 2%);
+  --bulma-bleeding-05: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 7%);
+  --bulma-bleeding-10: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 12%);
+  --bulma-bleeding-15: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 17%);
+  --bulma-bleeding-20: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 22%);
+  --bulma-bleeding-25: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 27%);
+  --bulma-bleeding-30: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 32%);
+  --bulma-bleeding-35: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 37%);
+  --bulma-bleeding-40: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 42%);
+  --bulma-bleeding-45: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 47%);
+  --bulma-bleeding-50: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 52%);
+  --bulma-bleeding-55: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 57%);
+  --bulma-bleeding-60: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 62%);
+  --bulma-bleeding-65: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 67%);
+  --bulma-bleeding-70: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 72%);
+  --bulma-bleeding-75: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 77%);
+  --bulma-bleeding-80: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 82%);
+  --bulma-bleeding-85: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 87%);
+  --bulma-bleeding-90: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 92%);
+  --bulma-bleeding-95: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 97%);
+  --bulma-bleeding-95: hsl(var(--bulma-bleeding-h), var(--bulma-bleeding-s), 97%);
+  --bulma-bleeding-invert: rgba(0, 0, 0, 0.7);
+  --bulma-sass-rgb: 191, 64, 128;
+  --bulma-sass-h: 330deg;
+  --bulma-sass-s: 50%;
+  --bulma-sass-l: 50%;
+  --bulma-sass: #bf4080;
+  --bulma-sass-base: #bf4080;
+  --bulma-sass-00: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 0%);
+  --bulma-sass-05: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 5%);
+  --bulma-sass-10: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 10%);
+  --bulma-sass-15: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 15%);
+  --bulma-sass-20: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 20%);
+  --bulma-sass-25: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 25%);
+  --bulma-sass-30: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 30%);
+  --bulma-sass-35: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 35%);
+  --bulma-sass-40: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 40%);
+  --bulma-sass-45: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 45%);
+  --bulma-sass-50: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 50%);
+  --bulma-sass-55: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 55%);
+  --bulma-sass-60: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 60%);
+  --bulma-sass-65: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 65%);
+  --bulma-sass-70: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 70%);
+  --bulma-sass-75: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 75%);
+  --bulma-sass-80: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 80%);
+  --bulma-sass-85: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 85%);
+  --bulma-sass-90: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 90%);
+  --bulma-sass-95: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 95%);
+  --bulma-sass-95: hsl(var(--bulma-sass-h), var(--bulma-sass-s), 95%);
+  --bulma-sass-invert: white;
+  --bulma-amazon-rgb: 255, 216, 99;
+  --bulma-amazon-h: 45deg;
+  --bulma-amazon-s: 100%;
+  --bulma-amazon-l: 69%;
+  --bulma-amazon: #ffd863;
+  --bulma-amazon-base: #ffd863;
+  --bulma-amazon-00: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 4%);
+  --bulma-amazon-05: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 9%);
+  --bulma-amazon-10: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 14%);
+  --bulma-amazon-15: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 19%);
+  --bulma-amazon-20: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 24%);
+  --bulma-amazon-25: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 29%);
+  --bulma-amazon-30: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 34%);
+  --bulma-amazon-35: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 39%);
+  --bulma-amazon-40: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 44%);
+  --bulma-amazon-45: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 49%);
+  --bulma-amazon-50: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 54%);
+  --bulma-amazon-55: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 59%);
+  --bulma-amazon-60: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 64%);
+  --bulma-amazon-65: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 69%);
+  --bulma-amazon-70: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 74%);
+  --bulma-amazon-75: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 79%);
+  --bulma-amazon-80: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 84%);
+  --bulma-amazon-85: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 89%);
+  --bulma-amazon-90: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 94%);
+  --bulma-amazon-95: hsl(var(--bulma-amazon-h), var(--bulma-amazon-s), 99%);
+  --bulma-amazon-invert: rgba(0, 0, 0, 0.7);
+  --bulma-sponsor-rgb: 234, 74, 170;
+  --bulma-sponsor-h: 324deg;
+  --bulma-sponsor-s: 79%;
+  --bulma-sponsor-l: 60%;
+  --bulma-sponsor: #ea4aaa;
+  --bulma-sponsor-base: #ea4aaa;
+  --bulma-sponsor-00: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 0%);
+  --bulma-sponsor-05: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 5%);
+  --bulma-sponsor-10: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 10%);
+  --bulma-sponsor-15: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 15%);
+  --bulma-sponsor-20: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 20%);
+  --bulma-sponsor-25: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 25%);
+  --bulma-sponsor-30: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 30%);
+  --bulma-sponsor-35: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 35%);
+  --bulma-sponsor-40: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 40%);
+  --bulma-sponsor-45: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 45%);
+  --bulma-sponsor-50: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 50%);
+  --bulma-sponsor-55: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 55%);
+  --bulma-sponsor-60: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 60%);
+  --bulma-sponsor-65: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 65%);
+  --bulma-sponsor-70: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 70%);
+  --bulma-sponsor-75: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 75%);
+  --bulma-sponsor-80: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 80%);
+  --bulma-sponsor-85: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 85%);
+  --bulma-sponsor-90: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 90%);
+  --bulma-sponsor-95: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 95%);
+  --bulma-sponsor-95: hsl(var(--bulma-sponsor-h), var(--bulma-sponsor-s), 95%);
+  --bulma-sponsor-invert: white;
+  --bulma-twitter-rgb: 85, 172, 238;
+  --bulma-twitter-h: 206deg;
+  --bulma-twitter-s: 82%;
+  --bulma-twitter-l: 63%;
+  --bulma-twitter: #55acee;
+  --bulma-twitter-base: #55acee;
+  --bulma-twitter-00: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 3%);
+  --bulma-twitter-05: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 8%);
+  --bulma-twitter-10: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 13%);
+  --bulma-twitter-15: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 18%);
+  --bulma-twitter-20: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 23%);
+  --bulma-twitter-25: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 28%);
+  --bulma-twitter-30: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 33%);
+  --bulma-twitter-35: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 38%);
+  --bulma-twitter-40: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 43%);
+  --bulma-twitter-45: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 48%);
+  --bulma-twitter-50: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 53%);
+  --bulma-twitter-55: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 58%);
+  --bulma-twitter-60: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 63%);
+  --bulma-twitter-65: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 68%);
+  --bulma-twitter-70: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 73%);
+  --bulma-twitter-75: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 78%);
+  --bulma-twitter-80: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 83%);
+  --bulma-twitter-85: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 88%);
+  --bulma-twitter-90: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 93%);
+  --bulma-twitter-95: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 98%);
+  --bulma-twitter-95: hsl(var(--bulma-twitter-h), var(--bulma-twitter-s), 98%);
+  --bulma-twitter-invert: white;
+  --bulma-videos-rgb: 71.6295, 198.6705, 141.50205;
+  --bulma-videos-h: 153deg;
+  --bulma-videos-s: 53%;
+  --bulma-videos-l: 53%;
+  --bulma-videos: #48c78e;
+  --bulma-videos-base: #48c78e;
+  --bulma-videos-00: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 3%);
+  --bulma-videos-05: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 8%);
+  --bulma-videos-10: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 13%);
+  --bulma-videos-15: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 18%);
+  --bulma-videos-20: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 23%);
+  --bulma-videos-25: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 28%);
+  --bulma-videos-30: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 33%);
+  --bulma-videos-35: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 38%);
+  --bulma-videos-40: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 43%);
+  --bulma-videos-45: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 48%);
+  --bulma-videos-50: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 53%);
+  --bulma-videos-55: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 58%);
+  --bulma-videos-60: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 63%);
+  --bulma-videos-65: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 68%);
+  --bulma-videos-70: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 73%);
+  --bulma-videos-75: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 78%);
+  --bulma-videos-80: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 83%);
+  --bulma-videos-85: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 88%);
+  --bulma-videos-90: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 93%);
+  --bulma-videos-95: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 98%);
+  --bulma-videos-95: hsl(var(--bulma-videos-h), var(--bulma-videos-s), 98%);
+  --bulma-videos-invert: white;
+  --bulma-extensions-rgb: 62.0415, 142.46085, 208.2585;
+  --bulma-extensions-h: 207deg;
+  --bulma-extensions-s: 61%;
+  --bulma-extensions-l: 53%;
+  --bulma-extensions: #3e8ed0;
+  --bulma-extensions-base: #3e8ed0;
+  --bulma-extensions-00: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 3%);
+  --bulma-extensions-05: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 8%);
+  --bulma-extensions-10: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 13%);
+  --bulma-extensions-15: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 18%);
+  --bulma-extensions-20: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 23%);
+  --bulma-extensions-25: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 28%);
+  --bulma-extensions-30: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 33%);
+  --bulma-extensions-35: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 38%);
+  --bulma-extensions-40: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 43%);
+  --bulma-extensions-45: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 48%);
+  --bulma-extensions-50: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 53%);
+  --bulma-extensions-55: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 58%);
+  --bulma-extensions-60: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 63%);
+  --bulma-extensions-65: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 68%);
+  --bulma-extensions-70: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 73%);
+  --bulma-extensions-75: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 78%);
+  --bulma-extensions-80: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 83%);
+  --bulma-extensions-85: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 88%);
+  --bulma-extensions-90: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 93%);
+  --bulma-extensions-95: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 98%);
+  --bulma-extensions-95: hsl(var(--bulma-extensions-h), var(--bulma-extensions-s), 98%);
+  --bulma-extensions-invert: white;
+  --bulma-bootstrap-rgb: 111, 84, 153;
+  --bulma-bootstrap-h: 263deg;
+  --bulma-bootstrap-s: 29%;
+  --bulma-bootstrap-l: 46%;
+  --bulma-bootstrap: #6f5499;
+  --bulma-bootstrap-base: #6f5499;
+  --bulma-bootstrap-00: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 1%);
+  --bulma-bootstrap-05: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 6%);
+  --bulma-bootstrap-10: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 11%);
+  --bulma-bootstrap-15: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 16%);
+  --bulma-bootstrap-20: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 21%);
+  --bulma-bootstrap-25: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 26%);
+  --bulma-bootstrap-30: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 31%);
+  --bulma-bootstrap-35: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 36%);
+  --bulma-bootstrap-40: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 41%);
+  --bulma-bootstrap-45: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 46%);
+  --bulma-bootstrap-50: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 51%);
+  --bulma-bootstrap-55: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 56%);
+  --bulma-bootstrap-60: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 61%);
+  --bulma-bootstrap-65: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 66%);
+  --bulma-bootstrap-70: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 71%);
+  --bulma-bootstrap-75: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 76%);
+  --bulma-bootstrap-80: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 81%);
+  --bulma-bootstrap-85: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 86%);
+  --bulma-bootstrap-90: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 91%);
+  --bulma-bootstrap-95: hsl(var(--bulma-bootstrap-h), var(--bulma-bootstrap-s), 96%);
+  --bulma-bootstrap-invert: white;
+  --bulma-black-bis: #121212;
+  --bulma-black-ter: #242424;
+  --bulma-grey-darker: #363636;
+  --bulma-grey-dark: #4a4a4a;
+  --bulma-grey: #7a7a7a;
+  --bulma-grey-light: #b5b5b5;
+  --bulma-grey-lighter: #dbdbdb;
+  --bulma-white-ter: whitesmoke;
+  --bulma-white-bis: #fafafa;
+}
+
 .bd-option-or p, .bd-snippet-preview.bd-is-mwb, .bd-book-cover, .bd-fortyfour-image, .bd-fortyfour-cta, .bd-side-sponsor, .bd-backers-platform, .bd-backers-platform .bd-backers-platform-logo, .bd-backers-heading, .bd-single-carbon, .bd-single-image, .bd-snippet-mwb, .bd-logos-download, .bd-partner-sponsor, .bd-columns-tool, .bd-footer-sponsor, .bd-footer-donation-action, .bd-footer-star-figure {
   align-items: center;
   display: flex;
@@ -22511,6 +23183,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none;
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -22715,6 +23388,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none;
 }
 
@@ -22831,5 +23505,3 @@ fieldset[disabled] .bulma-control-mixin {
     background: blue;
   }
 }
-
-/*# sourceMappingURL=bulma-docs.css.map */
\ No newline at end of file

diff --git a/docs/cyp/base/generic.html b/docs/cyp/base/generic.html
index 7205c74a30ee6bbf48180f2f7adfd6d363f266e6..69994c283d206aa27a50ac5bc0babd5a7fe6b4d3 100644 (file)
--- a/docs/cyp/base/generic.html
+++ b/docs/cyp/base/generic.html
@@ -19,7 +19,7 @@ title: Base/Generic
 <code>code</code>
 <pre>pre<code>code</code></pre>
 <img src="{{ site.url }}/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
-<a>Link <strong>strong</strong></a>>
+<a>Link <strong>strong</strong></a>
 <hr>hr</pre>
 <img>img</pre>
 <small>small</small>

diff --git a/sass/base/generic.scss b/sass/base/generic.scss
index 38c53848db26da1147c282a33ead0ad8acd24b3a..e4d3512061f536cb858f73b63abb010c20748bd8 100644 (file)
--- a/sass/base/generic.scss
+++ b/sass/base/generic.scss
@@ -1,31 +1,31 @@
 @import "../utilities/mixins";
 
-$body-background-color: $scheme-main !default;
+$body-background-color: getVar("scheme-main") !default;
 $body-size: 16px !default;
 $body-min-width: 300px !default;
 $body-rendering: optimizeLegibility !default;
-$body-family: $family-primary !default;
+$body-family: getVar("family-primary") !default;
 $body-overflow-x: hidden !default;
 $body-overflow-y: scroll !default;
 
-$body-color: $text !default;
+$body-color: getVar("text") !default;
 $body-font-size: 1em !default;
-$body-weight: $weight-normal !default;
+$body-weight: getVar("weight-normal") !default;
 $body-line-height: 1.5 !default;
 
-$code-family: $family-code !default;
+$code-family: getVar("family-code") !default;
 $code-padding: 0.25em 0.5em 0.25em !default;
 $code-weight: normal !default;
 $code-size: 0.875em !default;
 
 $small-font-size: 0.875em !default;
 
-$hr-background-color: $background !default;
+$hr-background-color: getVar("background") !default;
 $hr-height: 2px !default;
 $hr-margin: 1.5rem 0 !default;
 
-$strong-color: $text-strong !default;
-$strong-weight: $weight-bold !default;
+$strong-color: getVar("text-strong") !default;
+$strong-weight: getVar("weight-bold") !default;
 
 $pre-font-size: 0.875em !default;
 $pre-padding: 1.25rem 1.5rem !default;

diff --git a/sass/base/helpers.scss b/sass/base/helpers.scss
deleted file mode 100644 (file)
index 7dc4840..0000000
--- a/sass/base/helpers.scss
+++ /dev/null
@@ -1 +0,0 @@
-@warn "The helpers.scss file is DEPRECATED. It has moved into its own /helpers folder. Please import sass/helpers/_all instead.";

diff --git a/sass/components/breadcrumb.scss b/sass/components/breadcrumb.scss
index 6245cf15f9573f0d9ea98f3c443f3e77d15fadfa..c0599df6b52f14d988f47747d155aae2a75fcf6f 100644 (file)
--- a/sass/components/breadcrumb.scss
+++ b/sass/components/breadcrumb.scss
@@ -11,7 +11,6 @@ $breadcrumb-item-separator-color: $border-hover !default;
 
 .#{$class-prefix}breadcrumb {
   @extend %block;
-
   @extend %unselectable;
 
   font-size: $size-normal;

diff --git a/sass/themes/default.scss b/sass/themes/default.scss
new file mode 100644 (file)
index 0000000..975e6f7
--- /dev/null
+++ b/sass/themes/default.scss
@@ -0,0 +1,71 @@
+:root {
+  @include register-vars(
+    (
+      family-sans-serif: #{$family-sans-serif},
+      family-monospace: #{$family-monospace},
+      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},
+
+      scheme-main: #{$white},
+      scheme-main-bis: #{$white-bis},
+      scheme-main-ter: #{$white-ter},
+      scheme-invert: #{$black},
+      scheme-invert-bis: #{$black-bis},
+      scheme-invert-ter: #{$black-ter},
+      background: #{$background},
+      border: #{$border},
+      border-hover: #{$border-hover},
+      border-light: #{$border-light},
+      border-light-hover: #{$border-light-hover},
+      text: #{$text},
+      text-invert: #{$text-invert},
+      text-light: #{$text-light},
+      text-strong: #{$text-strong},
+      code: #{$code},
+      code-background: #{$code-background},
+      pre: #{$pre},
+      pre-background: #{$pre-background},
+      link-light: #{$link-light},
+      link-dark: #{$link-dark},
+      link-visited: #{$link-visited},
+      link-hover: #{$link-hover},
+      link-hover-border: #{$link-hover-border},
+      link-focus: #{$link-focus},
+      link-focus-border: #{$link-focus-border},
+      link-active: #{$link-active},
+      link-active-border: #{$link-active-border},
+      family-primary: #{$family-primary},
+      family-secondary: #{$family-secondary},
+      family-code: #{$family-code},
+      size-small: #{$size-small},
+      size-normal: #{$size-normal},
+      size-medium: #{$size-medium},
+      size-large: #{$size-large},
+      shadow: #{$shadow},
+    )
+  );
+
+  @each $name, $pair in $colors {
+    $base: nth($pair, 1);
+    $invert: nth($pair, 2);
+
+    @include register-rgb($name, $base);
+    @include register-hsl($name, $base);
+    @include generate-color-palette($name, $base, $invert);
+  }
+
+  @each $name, $shade in $shades {
+    @include register-var($name, $shade);
+  }
+}

diff --git a/sass/utilities/_all.scss b/sass/utilities/_all.scss
index d421c96d5c5ba45a22cddef81e6a33c042febd73..ab6ce521c8ac643ef75eb6775749fc62c06f35a7 100644 (file)
--- a/sass/utilities/_all.scss
+++ b/sass/utilities/_all.scss
@@ -4,6 +4,7 @@
 @import "initial-variables";
 @import "functions";
 @import "derived-variables";
+@import "css-variables";
 @import "mixins";
 @import "controls";
 @import "extends";

diff --git a/sass/utilities/css-variables.scss b/sass/utilities/css-variables.scss
new file mode 100644 (file)
index 0000000..a9be814
--- /dev/null
+++ b/sass/utilities/css-variables.scss
@@ -0,0 +1,77 @@
+@function buildVarName($name, $prefix: "", $suffix: "") {
+  @debug $cssvars-prefix;
+  @return "--#{$cssvars-prefix}#{$prefix}#{$name}#{$suffix}";
+}
+
+@function getVar($name, $prefix: "", $suffix: "") {
+  $varName: buildVarName($name, $prefix, $suffix);
+  @return var(#{$varName});
+}
+
+@mixin register-var($name, $value, $prefix: "", $suffix: "") {
+  $varName: buildVarName($name, $prefix, $suffix);
+  #{$varName}: #{$value};
+}
+
+@mixin register-vars($vars, $prefix: "", $suffix: "") {
+  @each $name, $value in $vars {
+    @include register-var($name, $value, $prefix, $suffix);
+  }
+}
+
+@mixin register-rgb($name, $value) {
+  @include register-var(
+    $name,
+    (red($value), green($value), blue($value)),
+    "",
+    "-rgb"
+  );
+}
+
+@mixin register-hsl($name, $value) {
+  @include register-var($name, round(hue($value)), "", "-h");
+  @include register-var($name, round(saturation($value)), "", "-s");
+  @include register-var($name, round(lightness($value)), "", "-l");
+}
+
+@mixin generate-color-palette($name, $base, $invert) {
+  $h: round(hue($base));
+  $s: round(saturation($base));
+  $l-base: round(
+    lightness($base) % 10
+  ); // get lightness second digit: 53% -> 3%
+
+  $l-0: 0%; // 5% or less
+  $l-5: 5%; // more than 5%
+
+  @if ($l-base < 5%) {
+    $l-0: $l-base;
+    $l-5: $l-base + 5%;
+  } @else {
+    $l-0: $l-base - 5%;
+    $l-5: $l-base;
+  }
+
+  @include register-var($name, $base);
+  @include register-var($name, $base, "", "-base");
+
+  @for $i from 0 through 9 {
+    $color-l-0: $l-0 +
+      $i *
+      10; // if $l-base = 3%, then we get 3%, 13%, 23%, 33% etc.
+    $color-l-5: $l-5 +
+      $i *
+      10; // if $l-base = 3%, then we get 8%, 18%, 28%, 38% etc.
+    $v-0: "hsl(#{getVar($name, '', '-h')}, #{getVar($name, '', '-s')}, #{$color-l-0})";
+    $v-5: "hsl(#{getVar($name, '', '-h')}, #{getVar($name, '', '-s')}, #{$color-l-5})";
+    @include register-var($name, $v-0, "", "-#{$i}0");
+    @include register-var($name, $v-5, "", "-#{$i}5");
+  }
+
+  @if ($l-base < 5%) {
+    $v: "hsl(#{getVar($name, '', '-h')}, #{getVar($name, '', '-s')}, #{$l-base + 95%})";
+    @include register-var($name, $v, "", "-95");
+  }
+
+  @include register-var($name, $invert, "", "-invert");
+}

diff --git a/sass/utilities/derived-variables.scss b/sass/utilities/derived-variables.scss
index 08e053661e64c09a29d6b14ea4766b46fdf16733..10189788b526c3446aefd59ad39b997becbf9df1 100644 (file)
--- a/sass/utilities/derived-variables.scss
+++ b/sass/utilities/derived-variables.scss
@@ -101,14 +101,84 @@ $size-large: $size-4 !default;
 
 // Effects
 
-$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default;
+$shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1),
+  0 0px 0 1px rgba($scheme-invert, 0.02) !default;
 
 // Lists and maps
 $custom-colors: null !default;
 $custom-shades: null !default;
 
-$colors: mergeColorMaps(("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)), $custom-colors) !default;
-
-$shades: mergeColorMaps(("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, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default;
+$colors: mergeColorMaps(
+  (
+    "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
+    )
+  ),
+  $custom-colors
+) !default;
+
+$shades: mergeColorMaps(
+  (
+    "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,
+    "white-ter": $white-ter,
+    "white-bis": $white-bis
+  ),
+  $custom-shades
+) !default;
 
 $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default;

diff --git a/sass/utilities/initial-variables.scss b/sass/utilities/initial-variables.scss
index b016533e38890abfb95c7ae4e454648188ea056c..ce79730630b71dc9234fc601203a618898cf5147 100644 (file)
--- a/sass/utilities/initial-variables.scss
+++ b/sass/utilities/initial-variables.scss
@@ -124,3 +124,4 @@ $rtl: false !default;
 // Prefixes
 
 $class-prefix: "" !default;
+$cssvars-prefix: "bulma-" !default;