From a03da2b801bf88f24c64e6649b22d0591d3f4127 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 5 Dec 2022 23:15:28 +0000 Subject: [PATCH] Init CSS variables --- bulma.scss | 1 + docs/css/bulma-docs.css | 700 +++++++++++++++++++++++++- docs/cyp/base/generic.html | 2 +- sass/base/generic.scss | 16 +- sass/base/helpers.scss | 1 - sass/components/breadcrumb.scss | 1 - sass/themes/default.scss | 71 +++ sass/utilities/_all.scss | 1 + sass/utilities/css-variables.scss | 77 +++ sass/utilities/derived-variables.scss | 76 ++- sass/utilities/initial-variables.scss | 1 + 11 files changed, 919 insertions(+), 28 deletions(-) delete mode 100644 sass/base/helpers.scss create mode 100644 sass/themes/default.scss create mode 100644 sass/utilities/css-variables.scss diff --git a/bulma.scss b/bulma.scss index 8dc2a359..967efbb0 100644 --- 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 843c5b33..fcf5397f 100644 --- 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 7205c74a..69994c28 100644 --- a/docs/cyp/base/generic.html +++ b/docs/cyp/base/generic.html @@ -19,7 +19,7 @@ title: Base/Generic code 
precode
Bulma: a modern CSS framework based on Flexbox -Link strong> +Link strong
hr img small diff --git a/sass/base/generic.scss b/sass/base/generic.scss index 38c53848..e4d35120 100644 --- 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 index 7dc4840e..00000000 --- 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 6245cf15..c0599df6 100644 --- 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 index 00000000..975e6f74 --- /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 d421c96d..ab6ce521 100644 --- 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 index 00000000..a9be8140 --- /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 08e05366..10189788 100644 --- 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; +$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; +$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 b016533e..ce797306 100644 --- 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;