Add more CSS variables with fallback

diff --git a/sass/form/input-textarea.sass b/sass/form/input-textarea.sass
index 7688e34ab166246cf2fdbc8fffb4ac79db4ea634..117c7bfa412eca3b7f108e493da90fb6d811d0db 100644 (file)
--- a/sass/form/input-textarea.sass
+++ b/sass/form/input-textarea.sass
@@ -3,9 +3,6 @@ $textarea-max-height: 40em !default
 $textarea-min-height: 8em !default
 
 %input-textarea
-  --input-shadow: #{$input-shadow}
-  --input-focus-box-shadow-size: #{$input-focus-box-shadow-size}
-
   @extend %input
   box-shadow: var(--input-shadow, #{$input-shadow})
   max-width: 100%

diff --git a/sass/helpers/color.sass b/sass/helpers/color.sass
index 22ac8c517f11d81743f4c8377a7f2e44af0d8ee4..c4d773350312f0009bf9a568c478a8982785473c 100644 (file)
--- a/sass/helpers/color.sass
+++ b/sass/helpers/color.sass
@@ -1,37 +1,37 @@
 @each $name, $pair in $colors
   $color: nth($pair, 1)
   .has-text-#{$name}
-    color: $color !important
+    color: var(--#{$name}, #{$color}) !important
   a.has-text-#{$name}
     &:hover,
     &:focus
       color: bulmaDarken($color, 10%) !important
   .has-background-#{$name}
-    background-color: $color !important
+    background-color: var(--#{$name}, #{$color}) !important
   @if length($pair) >= 4
     $color-light: nth($pair, 3)
     $color-dark: nth($pair, 4)
     // Light
     .has-text-#{$name}-light
-      color: $color-light !important
+      color: var(--#{$name}-light, #{$color-light}) !important
     a.has-text-#{$name}-light
       &:hover,
       &:focus
         color: bulmaDarken($color-light, 10%) !important
     .has-background-#{$name}-light
-      background-color: $color-light !important
+      background-color: var(--#{$name}-light, #{$color-light}) !important
     // Dark
     .has-text-#{$name}-dark
-      color: $color-dark !important
+      color: var(--#{$name}-dark, #{$color-dark}) !important
     a.has-text-#{$name}-dark
       &:hover,
       &:focus
         color: bulmaLighten($color-dark, 10%) !important
     .has-background-#{$name}-dark
-      background-color: $color-dark !important
+      background-color: var(--#{$name}-dark, #{$color-dark}) !important
 
 @each $name, $shade in $shades
   .has-text-#{$name}
-    color: $shade !important
+    color: var(--#{$name}, #{$shade}) !important
   .has-background-#{$name}
-    background-color: $shade !important
+    background-color: var(--#{$name}, #{$shade}) !important

diff --git a/sass/helpers/typography.sass b/sass/helpers/typography.sass
index eafd7e0998baa703f91a97e3b84fb23848e88562..129f0aec3cc7da9f9c28f6269e628d4bf5949137 100644 (file)
--- a/sass/helpers/typography.sass
+++ b/sass/helpers/typography.sass
@@ -72,27 +72,31 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
   font-style: italic !important
 
 .has-text-weight-light
-  font-weight: $weight-light !important
+  font-weight: var(--weight-light, #{$weight-light}) !important
+
 .has-text-weight-normal
-  font-weight: $weight-normal !important
+  font-weight: var(--weight-normal, #{$weight-normal}) !important
+
 .has-text-weight-medium
-  font-weight: $weight-medium !important
+  font-weight: var(--weight-medium, #{$weight-medium}) !important
+
 .has-text-weight-semibold
-  font-weight: $weight-semibold !important
+  font-weight: var(--weight-semibold, #{$weight-semibold}) !important
+
 .has-text-weight-bold
-  font-weight: $weight-bold !important
+  font-weight: var(--weight-bold, #{$weight-bold}) !important
 
 .is-family-primary
-  font-family: $family-primary !important
+  font-family: var(--family-primary, #{$family-primary}) !important
 
 .is-family-secondary
-  font-family: $family-secondary !important
+  font-family: var(--family-secondary, #{$family-secondary}) !important
 
 .is-family-sans-serif
-  font-family: $family-sans-serif !important
+  font-family: var(--family-sans-serif, #{$family-sans-serif}) !important
 
 .is-family-monospace
-  font-family: $family-monospace !important
+  font-family: var(--family-monospace, #{$family-monospace}) !important
 
 .is-family-code
-  font-family: $family-code !important
+  font-family: var(--family-code, #{$family-code}) !important

diff --git a/sass/helpers/visibility.sass b/sass/helpers/visibility.sass
index 92477f3ac7a354b5095e627de919e82916e5a4ea..9c388b6d8f65e6bd7d431fff2ff6d880923f96a3 100644 (file)
--- a/sass/helpers/visibility.sass
+++ b/sass/helpers/visibility.sass
@@ -1,5 +1,3 @@
-
-
 $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 
 @each $display in $displays

diff --git a/sass/layout/footer.sass b/sass/layout/footer.sass
index 8faa11ed098d1ff8472ffde3e83b27c0f5b312f9..ea62014b1001f66e74b13114ec45866af3440ed0 100644 (file)
--- a/sass/layout/footer.sass
+++ b/sass/layout/footer.sass
@@ -1,9 +1,13 @@
-$footer-background-color: $scheme-main-bis !default
+$footer-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default
 $footer-color: false !default
 $footer-padding: 3rem 1.5rem 6rem !default
 
 .footer
-  background-color: $footer-background-color
-  padding: $footer-padding
+  --footer-background-color: #{$footer-background-color}
+  --footer-padding: #{$footer-padding}
+  --footer-color: #{$footer-color}
+
+  background-color: var(--footer-background-color)
+  padding: var(--footer-padding)
   @if $footer-color
-    color: $footer-color
+    color: var(--footer-color, #{$footer-color})

diff --git a/sass/layout/hero.sass b/sass/layout/hero.sass
index 925c98c285a1461fe5ef87a3b3b2e080bae9d051..4c746a96edefa0da02993fa437eff3a3ead06a43 100644 (file)
--- a/sass/layout/hero.sass
+++ b/sass/layout/hero.sass
@@ -5,6 +5,11 @@ $hero-body-padding-large: 18rem 1.5rem !default
 
 // Main container
 .hero
+  --hero-body-padding: #{$hero-body-padding}
+  --hero-body-padding-small: #{$hero-body-padding-small}
+  --hero-body-padding-medium: #{$hero-body-padding-medium}
+  --hero-body-padding-large: #{$hero-body-padding-large}
+
   align-items: stretch
   display: flex
   flex-direction: column
@@ -76,15 +81,15 @@ $hero-body-padding-large: 18rem 1.5rem !default
   // Sizes
   &.is-small
     .hero-body
-      padding: $hero-body-padding-small
+      --hero-body-padding: var(--hero-body-padding-small)
   &.is-medium
     +tablet
       .hero-body
-        padding: $hero-body-padding-medium
+        --hero-body-padding: var(--hero-body-padding-medium)
   &.is-large
     +tablet
       .hero-body
-        padding: $hero-body-padding-large
+        --hero-body-padding: var(--hero-body-padding-large)
   &.is-halfheight,
   &.is-fullheight,
   &.is-fullheight-with-navbar
@@ -142,4 +147,4 @@ $hero-body-padding-large: 18rem 1.5rem !default
 .hero-body
   flex-grow: 1
   flex-shrink: 0
-  padding: $hero-body-padding
+  padding: var(--hero-body-padding)

diff --git a/sass/layout/section.sass b/sass/layout/section.sass
index 6f2d35231f155964b86b5ca24475792d92cdc894..4dee0903a3d72e129974253cccec3a400544b62c 100644 (file)
--- a/sass/layout/section.sass
+++ b/sass/layout/section.sass
@@ -3,11 +3,15 @@ $section-padding-medium: 9rem 1.5rem !default
 $section-padding-large: 18rem 1.5rem !default
 
 .section
-  padding: $section-padding
+  --section-padding: #{$section-padding}
+  --section-padding-medium: #{$section-padding-medium}
+  --section-padding-large: #{$section-padding-large}
+
+  padding: var(--section-padding)
   // Responsiveness
   +desktop
     // Sizes
     &.is-medium
-      padding: $section-padding-medium
+      --section-padding: var(--section-padding-medium)
     &.is-large
-      padding: $section-padding-large
+      --section-padding: var(--section-padding-large)

diff --git a/sass/themes/default.sass b/sass/themes/default.sass
index a11d06ce129f5beaee48e34605d4eeba7e05df5e..3963141332c4000fd1704601b66ff89d826dbdd2 100644 (file)
--- a/sass/themes/default.sass
+++ b/sass/themes/default.sass
@@ -45,6 +45,17 @@
   --speed: #{$speed}
   // Derived variables
   --primary: #{$primary}
+  // bulmaDarken($color, 5%)
+  // bulmaDarken($color, 10%)
+  // bulmaDarken($color, 2.5%)
+  // bulmaRgba($color, 0.25)
+  // bulmaDarken($color-light, 10%)
+  // bulmaDarken($color-light, 2.5%)
+  // bulmaDarken($color-light, 5%)
+  // bulmaLighten($color-dark, 10%)
+  // bulmaDarken($color-invert, 5%)
+  // bulmaRgba($color-invert, 0.9)
+  // bulmaRgba($color-invert, 0.7)
   --info: #{$info}
   --success: #{$success}
   --warning: #{$warning}

diff --git a/sass/utilities/derived-variables.scss b/sass/utilities/derived-variables.scss
index de8fb738c9de78c9e865793788710fe81730a9e8..a6488dad57fc0e369749dafed5c85cbeeb8c5863 100644 (file)
--- a/sass/utilities/derived-variables.scss
+++ b/sass/utilities/derived-variables.scss
@@ -98,10 +98,10 @@ $family-primary  : var(--family-sans-serif, #{$family-sans-serif}) !default;
 $family-secondary: var(--family-sans-serif, #{$family-sans-serif}) !default;
 $family-code     : var(--family-monospace, #{$family-monospace}) !default;
 
-$size-small : $size-7 !default;
-$size-normal: $size-6 !default;
-$size-medium: $size-5 !default;
-$size-large : $size-4 !default;
+$size-small : var(--size-7, #{size-7}) !default;
+$size-normal: var(--size-6, #{size-6}) !default;
+$size-medium: var(--size-5, #{size-5}) !default;
+$size-large : var(--size-4, #{size-4}) !default;
 
 // Lists and maps
 $custom-colors: null !default;

diff --git a/test/plugins/check-css-variables-exist.js b/test/plugins/check-css-variables-exist.js
index 3e4945c9138afdb53442d0f80e6270c4d3ba34c7..1619b21b31b847cdbfaf63ae75503f8827e848e3 100644 (file)
--- a/test/plugins/check-css-variables-exist.js
+++ b/test/plugins/check-css-variables-exist.js
@@ -3,7 +3,7 @@ module.exports = plugin;
 const utils = require('./utils');
 const fs = require('fs');
 const regexAssign = /--[a-z-]*:/g;
-const regexUsage = /var\(--[a-z-]*\)/g;
+const regexUsage = /var\(--[a-z-]*(\, \#|\))/g;
 const LOG_EVERYTHING = false;
 
 function logThis(message) {
@@ -51,6 +51,7 @@ function plugin() {
       usages = usages.map(usage => {
         usage = usage.replace('var(', '');
         usage = usage.replace(')', '');
+        usage = usage.replace(', #', '');
         return usage;
       });