Merge branch 'master' into css-variables-with-fallback

bulma.sass

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

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "bulma",
-  "version": "0.9.1",
+  "version": "0.9.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -42,6 +42,11 @@
       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
       "dev": true
     },
+    "absolute": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/absolute/-/absolute-0.0.1.tgz",
+      "integrity": "sha1-wigi+H4ck59XmIdQTZwQnEFzgp0="
+    },
     "ajv": {
       "version": "6.12.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.2.tgz",
@@ -60,11 +65,18 @@
       "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
       "dev": true
     },
+    "ansi-red": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-red/-/ansi-red-0.1.1.tgz",
+      "integrity": "sha1-jGOPnRCAgAo1PJwoyKgcpHBdlGw=",
+      "requires": {
+        "ansi-wrap": "0.1.0"
+      }
+    },
     "ansi-regex": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-      "dev": true
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
     },
     "ansi-styles": {
       "version": "3.2.1",
@@ -75,6 +87,11 @@
         "color-convert": "^1.9.0"
       }
     },
+    "ansi-wrap": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-wrap/-/ansi-wrap-0.1.0.tgz",
+      "integrity": "sha1-qCJQ3bABXponyoLoLqYDu/pF768="
+    },
     "anymatch": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
@@ -105,11 +122,15 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
     },
+    "array-differ": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-1.0.0.tgz",
+      "integrity": "sha1-7/UuN1gknTO+QCuLuOVkuytdQDE="
+    },
     "array-find-index": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
@@ -122,6 +143,16 @@
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
       "dev": true
     },
+    "array-uniq": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
+      "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY="
+    },
+    "arrify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0="
+    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -137,6 +168,11 @@
       "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
       "dev": true
     },
+    "async": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+      "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo="
+    },
     "async-foreach": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz",
@@ -185,8 +221,7 @@
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
-      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
-      "dev": true
+      "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
     },
     "bcrypt-pbkdf": {
       "version": "1.0.2",
@@ -216,7 +251,6 @@
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
       "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
@@ -387,12 +421,80 @@
         }
       }
     },
+    "clone": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz",
+      "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4="
+    },
+    "co": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-3.1.0.tgz",
+      "integrity": "sha1-TqVOpaCJOBUxheFSEMaNkJK8G3g="
+    },
+    "co-from-stream": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/co-from-stream/-/co-from-stream-0.0.0.tgz",
+      "integrity": "sha1-GlzYztdyY5RglPo58kmaYyl7yvk=",
+      "requires": {
+        "co-read": "0.0.1"
+      }
+    },
+    "co-fs-extra": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/co-fs-extra/-/co-fs-extra-1.2.1.tgz",
+      "integrity": "sha1-O2rXfPJhRTD2d7HPYmZPW6dWtyI=",
+      "requires": {
+        "co-from-stream": "~0.0.0",
+        "fs-extra": "~0.26.5",
+        "thunkify-wrap": "~1.0.4"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "0.26.7",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.26.7.tgz",
+          "integrity": "sha1-muH92UiXeY7at20JGM9C0MMYT6k=",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^2.1.0",
+            "klaw": "^1.0.0",
+            "path-is-absolute": "^1.0.0",
+            "rimraf": "^2.2.8"
+          }
+        },
+        "jsonfile": {
+          "version": "2.4.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
+          "integrity": "sha1-NzaitCi4e72gzIO1P6PWM6NcKug=",
+          "requires": {
+            "graceful-fs": "^4.1.6"
+          }
+        },
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "co-read": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/co-read/-/co-read-0.0.1.tgz",
+      "integrity": "sha1-+Bs+uKhmdf7FHj2IOn9WToc8k4k="
+    },
     "code-point-at": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
       "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
       "dev": true
     },
+    "coffee-script": {
+      "version": "1.12.7",
+      "resolved": "https://registry.npmjs.org/coffee-script/-/coffee-script-1.12.7.tgz",
+      "integrity": "sha512-fLeEhqwymYat/MpTPUjSKHVYYl0ec2mOyALEMLmzr5i1isuG+6jfI2j2d5oBO3VIzgUXgBVIcOT9uH1TFxBckw=="
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -420,14 +522,12 @@
     "commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
     },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
     },
     "console-control-strings": {
       "version": "1.1.0",
@@ -556,6 +656,11 @@
       "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==",
       "dev": true
     },
+    "enable": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/enable/-/enable-1.3.2.tgz",
+      "integrity": "sha1-nrpoN9FtCYK1n4fYib91REPVKTE="
+    },
     "error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -568,14 +673,12 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
     },
     "extend": {
       "version": "3.0.2",
@@ -583,6 +686,14 @@
       "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
       "dev": true
     },
+    "extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "requires": {
+        "is-extendable": "^0.1.0"
+      }
+    },
     "extsprintf": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
@@ -674,8 +785,7 @@
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
     "fsevents": {
       "version": "2.1.3",
@@ -757,7 +867,6 @@
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
       "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
-      "dev": true,
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -804,8 +913,19 @@
     "graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
-      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
-      "dev": true
+      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
+    },
+    "gray-matter": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-2.1.1.tgz",
+      "integrity": "sha1-MELZrewqHe1qdwep7SOA+KF6Qw4=",
+      "requires": {
+        "ansi-red": "^0.1.1",
+        "coffee-script": "^1.12.4",
+        "extend-shallow": "^2.0.1",
+        "js-yaml": "^3.8.1",
+        "toml": "^2.3.2"
+      }
     },
     "har-schema": {
       "version": "2.0.0",
@@ -827,7 +947,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
       "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
-      "dev": true,
       "requires": {
         "ansi-regex": "^2.0.0"
       }
@@ -838,6 +957,11 @@
       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
       "dev": true
     },
+    "has-generators": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-generators/-/has-generators-1.0.1.tgz",
+      "integrity": "sha1-pqLlVIYBGUBILhPiyTeRxEms9Ek="
+    },
     "has-unicode": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
@@ -914,7 +1038,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
       "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -923,8 +1046,12 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "is": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/is/-/is-3.3.0.tgz",
+      "integrity": "sha512-nW24QBoPcFGGHJGUwnfpI7Yc5CdqWNdsyHQszVE/z2pKHXzh7FZ5GWhJqSyaQ9wMkQnsTx+kAI8bHlCX4tKdbg=="
     },
     "is-arrayish": {
       "version": "0.2.1",
@@ -947,6 +1074,11 @@
       "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
       "dev": true
     },
+    "is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik="
+    },
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -992,8 +1124,7 @@
     "is-utf8": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
-      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
-      "dev": true
+      "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI="
     },
     "isarray": {
       "version": "1.0.0",
@@ -1023,7 +1154,6 @@
       "version": "3.13.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
       "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
-      "dev": true,
       "requires": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
@@ -1081,6 +1211,14 @@
         "verror": "1.10.0"
       }
     },
+    "klaw": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/klaw/-/klaw-1.3.1.tgz",
+      "integrity": "sha1-QIhDO0azsbolnXh4XY6W9zugJDk=",
+      "requires": {
+        "graceful-fs": "^4.1.9"
+      }
+    },
     "load-json-file": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@@ -1105,9 +1243,9 @@
       }
     },
     "lodash": {
-      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
+      "version": "4.17.15",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
       "dev": true
     },
     "log-symbols": {
@@ -1169,6 +1307,71 @@
       "integrity": "sha512-2j4DAdlBOkiSZIsaXk4mTE3sRS02yBHAtfy127xRV3bQUFqXkjHCHLW6Scv7DwNRbIWNHH8zpnz9zMaKXIdvYw==",
       "dev": true
     },
+    "metalsmith": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/metalsmith/-/metalsmith-2.3.0.tgz",
+      "integrity": "sha1-gzr7taKmOF4tmuPZNeOeM+rqUjE=",
+      "requires": {
+        "absolute": "0.0.1",
+        "chalk": "^1.1.3",
+        "clone": "^1.0.2",
+        "co-fs-extra": "^1.2.1",
+        "commander": "^2.6.0",
+        "gray-matter": "^2.0.0",
+        "has-generators": "^1.0.1",
+        "is": "^3.1.0",
+        "is-utf8": "~0.2.0",
+        "recursive-readdir": "^2.1.0",
+        "rimraf": "^2.2.8",
+        "stat-mode": "^0.2.0",
+        "thunkify": "^2.1.2",
+        "unyield": "0.0.1",
+        "ware": "^1.2.0",
+        "win-fork": "^1.1.1"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "rimraf": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+        }
+      }
+    },
+    "metalsmith-filter": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/metalsmith-filter/-/metalsmith-filter-1.0.2.tgz",
+      "integrity": "sha1-FfFsrBTewnwHSoWKJbclZRoDA7g=",
+      "requires": {
+        "async": "^1.2.0",
+        "is": "^3.0.1",
+        "multimatch": "^2.0.0"
+      }
+    },
     "micromatch": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
@@ -1198,7 +1401,6 @@
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
-      "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
@@ -1218,6 +1420,27 @@
         "minimist": "^1.2.5"
       }
     },
+    "multimatch": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-2.1.0.tgz",
+      "integrity": "sha1-nHkGoi+0wCkZ4vX3UWG0zb1LKis=",
+      "requires": {
+        "array-differ": "^1.0.0",
+        "array-union": "^1.0.1",
+        "arrify": "^1.0.0",
+        "minimatch": "^3.0.0"
+      },
+      "dependencies": {
+        "array-union": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+          "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+          "requires": {
+            "array-uniq": "^1.0.1"
+          }
+        }
+      }
+    },
     "nan": {
       "version": "2.14.1",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
@@ -1392,7 +1615,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
       "requires": {
         "wrappy": "1"
       }
@@ -1461,8 +1683,7 @@
     "path-is-absolute": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
     },
     "path-parse": {
       "version": "1.0.6",
@@ -1906,6 +2127,14 @@
         "picomatch": "^2.2.1"
       }
     },
+    "recursive-readdir": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
+      "integrity": "sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==",
+      "requires": {
+        "minimatch": "3.0.4"
+      }
+    },
     "redent": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
@@ -2111,8 +2340,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
     },
     "sshpk": {
       "version": "1.16.1",
@@ -2131,6 +2359,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "stat-mode": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/stat-mode/-/stat-mode-0.2.2.tgz",
+      "integrity": "sha1-5sgLYjEj19gM8TLOU480YokHJQI="
+    },
     "stdout-stream": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
@@ -2164,7 +2397,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
       "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-      "dev": true,
       "requires": {
         "ansi-regex": "^2.0.0"
       }
@@ -2207,6 +2439,19 @@
         "inherits": "2"
       }
     },
+    "thunkify": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/thunkify/-/thunkify-2.1.2.tgz",
+      "integrity": "sha1-+qDp0jDFGsyVyhOjYawFyn4EVT0="
+    },
+    "thunkify-wrap": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/thunkify-wrap/-/thunkify-wrap-1.0.4.tgz",
+      "integrity": "sha1-tSvlSN3+/aIOALWMYJZ2K0PdaIA=",
+      "requires": {
+        "enable": "1"
+      }
+    },
     "to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -2216,6 +2461,11 @@
         "is-number": "^7.0.0"
       }
     },
+    "toml": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/toml/-/toml-2.3.6.tgz",
+      "integrity": "sha512-gVweAectJU3ebq//Ferr2JUY4WKSDe5N+z0FvjDncLGyHmIDoxgY/2Ie4qfEIDm4IS7OA6Rmdm7pdEEdMcV/xQ=="
+    },
     "tough-cookie": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
@@ -2262,6 +2512,14 @@
       "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==",
       "dev": true
     },
+    "unyield": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/unyield/-/unyield-0.0.1.tgz",
+      "integrity": "sha1-FQ5l2kK/d0JEW5WKZOubhdHSsYA=",
+      "requires": {
+        "co": "~3.1.0"
+      }
+    },
     "uri-js": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.2.2.tgz",
@@ -2304,6 +2562,14 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "ware": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ware/-/ware-1.3.0.tgz",
+      "integrity": "sha1-0bFPOdLiy0q4xAmPdW/ksWTkc9Q=",
+      "requires": {
+        "wrap-fn": "^0.1.0"
+      }
+    },
     "which": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
@@ -2328,6 +2594,11 @@
         "string-width": "^1.0.2 || 2"
       }
     },
+    "win-fork": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/win-fork/-/win-fork-1.1.1.tgz",
+      "integrity": "sha1-j1jgZW/KAK3IyGoriePNLWotXl4="
+    },
     "wrap-ansi": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
@@ -2373,11 +2644,18 @@
         }
       }
     },
+    "wrap-fn": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/wrap-fn/-/wrap-fn-0.1.5.tgz",
+      "integrity": "sha1-8htuQQFv9KfjFyDbxjoJAWvfmEU=",
+      "requires": {
+        "co": "3.1.0"
+      }
+    },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
     "y18n": {
       "version": "4.0.0",

package.json

@@ -43,7 +43,7 @@
     "rtl-sass": "node-sass --output-style expanded --source-map true bulma-rtl.sass css/bulma-rtl.css",
     "rtl-autoprefix": "postcss --use autoprefixer --map false --output css/bulma-rtl.css css/bulma-rtl.css",
     "rtl-cleancss": "cleancss -o css/bulma-rtl.min.css css/bulma-rtl.css",
-    "deploy": "npm run clean && npm run build && npm run rtl",
+    "deploy": "npm run clean && npm run build",
     "start": "npm run build-sass -- --watch"
   },
   "files": [
@@ -52,5 +52,9 @@
     "bulma.sass",
     "LICENSE",
     "README.md"
-  ]
+  ],
+  "dependencies": {
+    "metalsmith": "^2.3.0",
+    "metalsmith-filter": "^1.0.2"
+  }
 }

sass/base/generic.sass

@@ -1,43 +1,74 @@
-$body-background-color: $scheme-main !default
+$body-background-color: var(--scheme-main, #{$scheme-main}) !default
 $body-size: 16px !default
 $body-min-width: 300px !default
 $body-rendering: optimizeLegibility !default
-$body-family: $family-primary !default
+$body-family: var(--family-primary, #{$family-primary}) !default
 $body-overflow-x: hidden !default
 $body-overflow-y: scroll !default
 
-$body-color: $text !default
+$body-color: var(--text, #{$text}) !default
 $body-font-size: 1em !default
-$body-weight: $weight-normal !default
+$body-weight: var(--weight-normal, #{$weight-normal}) !default
 $body-line-height: 1.5 !default
 
-$code-family: $family-code !default
+$code-family: var(--family-code, #{$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: var(--background, #{$background}) !default
 $hr-height: 2px !default
 $hr-margin: 1.5rem 0 !default
 
-$strong-color: $text-strong !default
-$strong-weight: $weight-bold !default
+$strong-color: var(--text-strong, #{$text-strong}) !default
+$strong-weight: var(--weight-bold, #{$weight-bold}) !default
 
 $pre-font-size: 0.875em !default
 $pre-padding: 1.25rem 1.5rem !default
 $pre-code-font-size: 1em !default
 
 html
-  background-color: $body-background-color
-  font-size: $body-size
+  --body-background-color: #{$body-background-color}
+  --body-size: #{$body-size}
+  --body-min-width: #{$body-min-width}
+  --body-overflow-x: #{$body-overflow-x}
+  --body-overflow-y: #{$body-overflow-y}
+  --body-rendering: #{$body-rendering}
+  --body-family: #{$body-family}
+  --code-family: #{$code-family}
+  --body-color: #{$body-color}
+  --body-font-size: #{$body-font-size}
+  --body-weight: #{$body-weight}
+  --body-line-height: #{$body-line-height}
+  --link: #{$link}
+  --link-hover: #{$link-hover}
+  --code-background: #{$code-background}
+  --code: #{$code}
+  --code-size: #{$code-size}
+  --code-weight: #{$code-weight}
+  --code-padding: #{$code-padding}
+  --hr-background-color: #{$hr-background-color}
+  --hr-height: #{$hr-height}
+  --hr-margin: #{$hr-margin}
+  --small-font-size: #{$small-font-size}
+  --strong-color: #{$strong-color}
+  --strong-weight: #{$strong-weight}
+  --pre-background: #{$pre-background}
+  --pre: #{$pre}
+  --pre-font-size: #{$pre-font-size}
+  --pre-padding: #{$pre-padding}
+  --pre-code-font-size: #{$pre-code-font-size}
+  --text-strong: #{$text-strong}
+  background-color: var(--body-background-color)
+  font-size: var(--body-size)
   -moz-osx-font-smoothing: grayscale
   -webkit-font-smoothing: antialiased
-  min-width: $body-min-width
-  overflow-x: $body-overflow-x
-  overflow-y: $body-overflow-y
-  text-rendering: $body-rendering
+  min-width: var(--body-min-width)
+  overflow-x: var(--body-overflow-x)
+  overflow-y: var(--body-overflow-y)
+  text-rendering: var(--body-rendering)
   text-size-adjust: 100%
 
 article,
@@ -55,44 +86,44 @@ input,
 optgroup,
 select,
 textarea
-  font-family: $body-family
+  font-family: var(--body-family)
 
 code,
 pre
   -moz-osx-font-smoothing: auto
   -webkit-font-smoothing: auto
-  font-family: $code-family
+  font-family: var(--code-family)
 
 body
-  color: $body-color
-  font-size: $body-font-size
-  font-weight: $body-weight
-  line-height: $body-line-height
+  color: var(--body-color)
+  font-size: var(--body-font-size)
+  font-weight: var(--body-weight)
+  line-height: var(--body-line-height)
 
 // Inline
 
 a
-  color: $link
+  color: var(--link)
   cursor: pointer
   text-decoration: none
   strong
     color: currentColor
   &:hover
-    color: $link-hover
+    color: var(--link-hover)
 
 code
-  background-color: $code-background
-  color: $code
-  font-size: $code-size
-  font-weight: $code-weight
-  padding: $code-padding
+  background-color: var(--code-background)
+  color: var(--code)
+  font-size: var(--code-size)
+  font-weight: var(--code-weight)
+  padding: var(--code-padding)
 
 hr
-  background-color: $hr-background-color
+  background-color: var(--hr-background-color)
   border: none
   display: block
-  height: $hr-height
-  margin: $hr-margin
+  height: var(--hr-height)
+  margin: var(--hr-margin)
 
 img
   height: auto
@@ -103,15 +134,15 @@ input[type="radio"]
   vertical-align: baseline
 
 small
-  font-size: $small-font-size
+  font-size: var(--small-font-size)
 
 span
   font-style: inherit
   font-weight: inherit
 
 strong
-  color: $strong-color
-  font-weight: $strong-weight
+  color: var(--strong-color)
+  font-weight: var(--strong-weight)
 
 // Block
 
@@ -120,17 +151,17 @@ fieldset
 
 pre
   +overflow-touch
-  background-color: $pre-background
-  color: $pre
-  font-size: $pre-font-size
+  background-color: var(--pre-background)
+  color: var(--pre)
+  font-size: var(--pre-font-size)
   overflow-x: auto
-  padding: $pre-padding
+  padding: var(--pre-padding)
   white-space: pre
   word-wrap: normal
   code
     background-color: transparent
     color: currentColor
-    font-size: $pre-code-font-size
+    font-size: var(--pre-code-font-size)
     padding: 0
 
 table
@@ -140,4 +171,4 @@ table
     &:not([align])
       text-align: inherit
   th
-    color: $text-strong
+    color: var(--text-strong)

sass/components/breadcrumb.sass

@@ -1,25 +1,34 @@
-$breadcrumb-item-color: $link !default
-$breadcrumb-item-hover-color: $link-hover !default
-$breadcrumb-item-active-color: $text-strong !default
+$breadcrumb-font-size: var(--size-normal, #{$size-normal}) !default
+
+$breadcrumb-item-color: var(--link, #{$link}) !default
+$breadcrumb-item-hover-color: var(--link-hover, #{$link-hover}) !default
+$breadcrumb-item-active-color: var(--text-strong, #{$text-strong}) !default
 
 $breadcrumb-item-padding-vertical: 0 !default
 $breadcrumb-item-padding-horizontal: 0.75em !default
 
-$breadcrumb-item-separator-color: $border-hover !default
+$breadcrumb-item-separator-color: var(--border-hover, #{$border-hover}) !default
 
 .breadcrumb
+  --breadcrumb-font-size: #{$content-font-size}
+  --breadcrumb-item-color: #{$breadcrumb-item-color}
+  --breadcrumb-item-hover-color: #{$breadcrumb-item-hover-color}
+  --breadcrumb-item-active-color: #{$breadcrumb-item-active-color}
+  --breadcrumb-item-separator-color: #{$breadcrumb-item-separator-color}
+  --breadcrumb-item-padding-vertical: #{$breadcrumb-item-padding-vertical}
+  --breadcrumb-item-padding-horizontal: #{$breadcrumb-item-padding-horizontal}
   @extend %block
   @extend %unselectable
-  font-size: $size-normal
+  font-size: var(--breadcrumb-font-size)
   white-space: nowrap
   a
     align-items: center
-    color: $breadcrumb-item-color
+    color: var(--breadcrumb-item-color)
     display: flex
     justify-content: center
-    padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal
+    padding: var(--breadcrumb-item-padding-vertical) var(--breadcrumb-item-padding-horizontal)
     &:hover
-      color: $breadcrumb-item-hover-color
+      --breadcrumb-item-color: var(--breadcrumb-item-hover-color)
   li
     align-items: center
     display: flex
@@ -27,11 +36,11 @@ $breadcrumb-item-separator-color: $border-hover !default
       +ltr-property("padding", 0, false)
     &.is-active
       a
-        color: $breadcrumb-item-active-color
+        --breadcrumb-item-color: var(--breadcrumb-item-active-color)
         cursor: default
         pointer-events: none
     & + li::before
-      color: $breadcrumb-item-separator-color
+      color: var(--breadcrumb-item-separator-color)
       content: "\0002f"
   ul,
   ol
@@ -55,11 +64,11 @@ $breadcrumb-item-separator-color: $border-hover !default
       justify-content: flex-end
   // Sizes
   &.is-small
-    font-size: $size-small
+    --breadcrumb-font-size: var(--size-small, #{$size-small})
   &.is-medium
-    font-size: $size-medium
+    --breadcrumb-font-size: var(--size-medium, #{$size-medium})
   &.is-large
-    font-size: $size-large
+    --breadcrumb-font-size: var(--size-large, #{$size-large})
   // Styles
   &.has-arrow-separator
     li + li::before

sass/components/card.sass

@@ -1,28 +1,48 @@
-$card-color: $text !default
-$card-background-color: $scheme-main !default
-$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
+$card-color: var(--text, #{$text}) !default
+$card-background-color: var(--scheme-main, #{$scheme-main}) !default
+$card-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
+$card-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.02) !default
+$card-shadow: 0 0.5em 1em -0.125em $card-shadow-color, 0 0px 0 1px $card-shadow-color-bis !default
 $card-radius: 0.25rem !default
 
 $card-header-background-color: transparent !default
-$card-header-color: $text-strong !default
+$card-header-color: var(--text-strong, #{$text-strong}) !default
 $card-header-padding: 0.75rem 1rem !default
-$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default
-$card-header-weight: $weight-bold !default
+$card-header-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
+$card-header-shadow: 0 0.125em 0.25em $card-header-shadow-color !default
+$card-header-weight: var(--weight-bold, #{$weight-bold}) !default
 
 $card-content-background-color: transparent !default
 $card-content-padding: 1.5rem !default
 
 $card-footer-background-color: transparent !default
-$card-footer-border-top: 1px solid $border-light !default
+$card-footer-border-top-color: var(--border-light, #{$border-light}) !default
+$card-footer-border-top: 1px solid $card-footer-border-top-color !default
 $card-footer-padding: 0.75rem !default
 
-$card-media-margin: $block-spacing !default
+$card-media-margin: var(--block-spacing, #{$block-spacing}) !default
 
 .card
-  background-color: $card-background-color
-  border-radius: $card-radius
-  box-shadow: $card-shadow
-  color: $card-color
+  --card-background-color: #{$card-background-color}
+  --card-shadow: #{$card-shadow}
+  --card-color: #{$card-color}
+  --card-radius: #{$card-radius}
+  --card-header-background-color: #{$card-header-background-color}
+  --card-header-shadow: #{$card-header-shadow}
+  --card-header-color: #{$card-header-color}
+  --card-header-weight: #{$card-header-weight}
+  --card-header-padding: #{$card-header-padding}
+  --card-header-padding: #{$card-header-padding}
+  --card-content-background-color: #{$card-content-background-color}
+  --card-content-padding: #{$card-content-padding}
+  --card-footer-background-color: #{$card-footer-background-color}
+  --card-footer-border-top: #{$card-footer-border-top}
+  --card-footer-padding: #{$card-footer-padding}
+  --card-media-margin: #{$card-media-margin}
+  background-color: var(--card-background-color)
+  border-radius: var(--card-radius)
+  box-shadow: var(--card-shadow)
+  color: var(--card-color)
   max-width: 100%
   position: relative
 
@@ -36,18 +56,18 @@ $card-media-margin: $block-spacing !default
 
 .card-header
   @extend %card-item
-  background-color: $card-header-background-color
+  background-color: var(--card-header-background-color)
   align-items: stretch
-  box-shadow: $card-header-shadow
+  box-shadow: var(--card-header-shadow)
   display: flex
 
 .card-header-title
   align-items: center
-  color: $card-header-color
+  color: var(--card-header-color)
   display: flex
   flex-grow: 1
-  font-weight: $card-header-weight
-  padding: $card-header-padding
+  font-weight: var(--card-header-weight)
+  padding: var(--card-header-padding)
   &.is-centered
     justify-content: center
 
@@ -56,7 +76,7 @@ $card-media-margin: $block-spacing !default
   cursor: pointer
   display: flex
   justify-content: center
-  padding: $card-header-padding
+  padding: var(--card-header-padding)
 
 .card-image
   display: block
@@ -72,13 +92,13 @@ $card-media-margin: $block-spacing !default
 
 .card-content
   @extend %card-item
-  background-color: $card-content-background-color
-  padding: $card-content-padding
+  background-color: var(--card-content-background-color)
+  padding: var(--card-content-padding)
 
 .card-footer
   @extend %card-item
-  background-color: $card-footer-background-color
-  border-top: $card-footer-border-top
+  background-color: var(--card-footer-background-color)
+  border-top: var(--card-footer-border-top)
   align-items: stretch
   display: flex
 
@@ -89,12 +109,12 @@ $card-media-margin: $block-spacing !default
   flex-grow: 1
   flex-shrink: 0
   justify-content: center
-  padding: $card-footer-padding
+  padding: var(--card-footer-padding)
   &:not(:last-child)
-    +ltr-property("border", $card-footer-border-top)
+    +ltr-property("border", var(--card-footer-border-top))
 
 // Combinations
 
 .card
   .media:not(:last-child)
-    margin-bottom: $card-media-margin
+    margin-bottom: var(--card-media-margin)

sass/components/dropdown.sass

@@ -1,23 +1,40 @@
 $dropdown-menu-min-width: 12rem !default
 
-$dropdown-content-background-color: $scheme-main !default
-$dropdown-content-arrow: $link !default
+$dropdown-content-background-color: var(--scheme-main, #{$scheme-main}) !default
+$dropdown-content-arrow: var(--link, #{$link}) !default
 $dropdown-content-offset: 4px !default
 $dropdown-content-padding-bottom: 0.5rem !default
 $dropdown-content-padding-top: 0.5rem !default
-$dropdown-content-radius: $radius !default
-$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
+$dropdown-content-radius: var(--radius, #{$radius}) !default
+$dropdown-content-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
+$dropdown-content-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.02) !default
+$dropdown-content-shadow: 0 0.5em 1em -0.125em $dropdown-content-shadow-color, 0 0px 0 1px $dropdown-content-shadow-color-bis !default
 $dropdown-content-z: 20 !default
 
-$dropdown-item-color: $text !default
-$dropdown-item-hover-color: $scheme-invert !default
-$dropdown-item-hover-background-color: $background !default
-$dropdown-item-active-color: $link-invert !default
-$dropdown-item-active-background-color: $link !default
+$dropdown-item-color: var(--text, #{$text}) !default
+$dropdown-item-hover-color: var(--scheme-invert, #{$scheme-invert}) !default
+$dropdown-item-hover-background-color: var(--background, #{$background}) !default
+$dropdown-item-active-color: var(--link-invert, #{$link-invert}) !default
+$dropdown-item-active-background-color: var(--link, #{$link}) !default
 
-$dropdown-divider-background-color: $border-light !default
+$dropdown-divider-background-color: var(--border-light, #{$border-light}) !default
 
 .dropdown
+  --dropdown-content-offset: #{$dropdown-content-offset}
+  --dropdown-menu-min-width: #{$dropdown-menu-min-width}
+  --dropdown-content-offset: #{$dropdown-content-offset}
+  --dropdown-content-z: #{$dropdown-content-z}
+  --dropdown-content-background-color: #{$dropdown-content-background-color}
+  --dropdown-content-radius: #{$dropdown-content-radius}
+  --dropdown-content-shadow: #{$dropdown-content-shadow}
+  --dropdown-content-padding-bottom: #{$dropdown-content-padding-bottom}
+  --dropdown-content-padding-top: #{$dropdown-content-padding-top}
+  --dropdown-item-color: #{$dropdown-item-color}
+  --dropdown-item-hover-background-color: #{$dropdown-item-hover-background-color}
+  --dropdown-item-hover-color: #{$dropdown-item-hover-color}
+  --dropdown-item-active-background-color: #{$dropdown-item-active-background-color}
+  --dropdown-item-active-color: #{$dropdown-item-active-color}
+  --dropdown-divider-background-color: #{$dropdown-divider-background-color}
   display: inline-flex
   position: relative
   vertical-align: top
@@ -32,28 +49,28 @@ $dropdown-divider-background-color: $border-light !default
   &.is-up
     .dropdown-menu
       bottom: 100%
-      padding-bottom: $dropdown-content-offset
+      padding-bottom: var(--dropdown-content-offset)
       padding-top: initial
       top: auto
 
 .dropdown-menu
   display: none
   +ltr-position(0, false)
-  min-width: $dropdown-menu-min-width
-  padding-top: $dropdown-content-offset
+  min-width: var(--dropdown-menu-min-width)
+  padding-top: var(--dropdown-content-offset)
   position: absolute
   top: 100%
-  z-index: $dropdown-content-z
+  z-index: var(--dropdown-content-z)
 
 .dropdown-content
-  background-color: $dropdown-content-background-color
-  border-radius: $dropdown-content-radius
-  box-shadow: $dropdown-content-shadow
-  padding-bottom: $dropdown-content-padding-bottom
-  padding-top: $dropdown-content-padding-top
+  background-color: var(--dropdown-content-background-color)
+  border-radius: var(--dropdown-content-radius)
+  box-shadow: var(--dropdown-content-shadow)
+  padding-bottom: var(--dropdown-content-padding-bottom)
+  padding-top: var(--dropdown-content-padding-top)
 
 .dropdown-item
-  color: $dropdown-item-color
+  color: var(--dropdown-item-color)
   display: block
   font-size: 0.875rem
   line-height: 1.5
@@ -66,15 +83,15 @@ button.dropdown-item
   text-align: inherit
   white-space: nowrap
   width: 100%
-  &:hover
-    background-color: $dropdown-item-hover-background-color
-    color: $dropdown-item-hover-color
+  &:hover:not(.is-active)
+    background-color: var(--dropdown-item-hover-background-color)
+    color: var(--dropdown-item-hover-color)
   &.is-active
-    background-color: $dropdown-item-active-background-color
-    color: $dropdown-item-active-color
+    background-color: var(--dropdown-item-active-background-color)
+    color: var(--dropdown-item-active-color)
 
 .dropdown-divider
-  background-color: $dropdown-divider-background-color
+  background-color: var(--dropdown-divider-background-color)
   border: none
   display: block
   height: 1px

sass/components/level.sass

@@ -1,11 +1,12 @@
-$level-item-spacing: ($block-spacing / 2) !default
+$level-item-spacing: calc(var(--block-spacing, #{$block-spacing}) / 2) !default
 
 .level
+  --level-item-spacing: #{$level-item-spacing}
   @extend %block
   align-items: center
   justify-content: space-between
   code
-    border-radius: $radius
+    border-radius: var(--radius, #{$radius})
   img
     display: inline-block
     vertical-align: top
@@ -20,7 +21,7 @@ $level-item-spacing: ($block-spacing / 2) !default
     .level-item
       &:not(:last-child)
         margin-bottom: 0
-        +ltr-property("margin", $level-item-spacing)
+        +ltr-property("margin", var(--level-item-spacing))
       &:not(.is-narrow)
         flex-grow: 1
   // Responsiveness
@@ -43,7 +44,7 @@ $level-item-spacing: ($block-spacing / 2) !default
   // Responsiveness
   +mobile
     &:not(:last-child)
-      margin-bottom: $level-item-spacing
+      margin-bottom: var(--level-item-spacing)
 
 .level-left,
 .level-right
@@ -57,7 +58,7 @@ $level-item-spacing: ($block-spacing / 2) !default
     // Responsiveness
     +tablet
       &:not(:last-child)
-        +ltr-property("margin", $level-item-spacing)
+        +ltr-property("margin", var(--level-item-spacing))
 
 .level-left
   align-items: center

sass/components/media.sass

@@ -1,4 +1,4 @@
-$media-border-color: bulmaRgba($border, 0.5) !default
+$media-border-color: rgba(var(--border-rgb, #{bulmaToRGB($grey-lighter)}), 0.5) !default
 $media-border-size: 1px !default
 $media-spacing: 1rem !default
 $media-spacing-large: 1.5rem !default
@@ -8,13 +8,16 @@ $media-level-1-content-spacing: 0.5rem !default
 $media-level-2-spacing: 0.5rem !default
 
 .media
+  --media-border-color: #{$media-border-color}
+  --media-spacing: #{$media-spacing}
+  --media-spacing-large: #{$media-spacing-large}
   align-items: flex-start
   display: flex
   text-align: inherit
   .content:not(:last-child)
     margin-bottom: $media-content-spacing
   .media
-    border-top: $media-border-size solid $media-border-color
+    border-top: 1px solid var(--media-border-color)
     display: flex
     padding-top: $media-level-1-spacing
     .content:not(:last-child),
@@ -31,8 +34,8 @@ $media-level-2-spacing: 0.5rem !default
   // Sizes
   &.is-large
     & + .media
-      margin-top: $media-spacing-large
-      padding-top: $media-spacing-large
+      margin-top: var(--media-spacing-large)
+      padding-top: var(--media-spacing-large)
 
 .media-left,
 .media-right
@@ -41,10 +44,10 @@ $media-level-2-spacing: 0.5rem !default
   flex-shrink: 0
 
 .media-left
-  +ltr-property("margin", $media-spacing)
+  +ltr-property("margin", var(--media-spacing))
 
 .media-right
-  +ltr-property("margin", $media-spacing, false)
+  +ltr-property("margin", var(--media-spacing), false)
 
 .media-content
   flex-basis: auto

sass/components/menu.sass

@@ -1,57 +1,76 @@
-$menu-item-color: $text !default
-$menu-item-radius: $radius-small !default
-$menu-item-hover-color: $text-strong !default
-$menu-item-hover-background-color: $background !default
-$menu-item-active-color: $link-invert !default
-$menu-item-active-background-color: $link !default
+$menu-font-size: var(--size-normal, #{$size-normal}) !default
 
-$menu-list-border-left: 1px solid $border !default
+$menu-item-color: var(--text, #{$text}) !default
+$menu-item-radius: var(--radius-small, #{$radius-small}) !default
+$menu-item-hover-color: var(--text-strong, #{$text-strong}) !default
+$menu-item-hover-background-color: var(--background, #{$background}) !default
+$menu-item-active-color: var(--link-invert, #{$link-invert}) !default
+$menu-item-active-background-color: var(--link, #{$link}) !default
+
+$menu-list-border-left: 1px solid var(--border, #{$border}) !default
 $menu-list-line-height: 1.25 !default
 $menu-list-link-padding: 0.5em 0.75em !default
 $menu-nested-list-margin: 0.75em !default
 $menu-nested-list-padding-left: 0.75em !default
 
-$menu-label-color: $text-light !default
+$menu-label-color: var(--text-light, #{$text-light}) !default
 $menu-label-font-size: 0.75em !default
 $menu-label-letter-spacing: 0.1em !default
 $menu-label-spacing: 1em !default
 
 .menu
-  font-size: $size-normal
+  --menu-font-size: #{$menu-font-size}
+  --menu-list-line-height: #{$menu-list-line-height}
+  --menu-item-radius: #{$menu-item-radius}
+  --menu-item-color: #{$menu-item-color}
+  --menu-list-link-padding: #{$menu-list-link-padding}
+  --menu-item-hover-background-color: #{$menu-item-hover-background-color}
+  --menu-item-hover-color: #{$menu-item-hover-color}
+  --menu-item-active-background-color: #{$menu-item-active-background-color}
+  --menu-item-active-color: #{$menu-item-active-color}
+  --menu-list-border-left: #{$menu-list-border-left}
+  --menu-nested-list-padding-left: #{$menu-nested-list-padding-left}
+  --menu-nested-list-margin: #{$menu-nested-list-margin}
+  --menu-label-color: #{$menu-label-color}
+  --menu-label-font-size: #{$menu-label-font-size}
+  --menu-label-letter-spacing: #{$menu-label-letter-spacing}
+  --menu-label-spacing: #{$menu-label-spacing}
+  --menu-label-spacing: #{$menu-label-spacing}
+  font-size: var(--menu-font-size)
   // Sizes
   &.is-small
-    font-size: $size-small
+    --menu-font-size: var(--size-small, #{$size-small})
   &.is-medium
-    font-size: $size-medium
+    --menu-font-size: var(--size-medium, #{$size-medium})
   &.is-large
-    font-size: $size-large
+    --menu-font-size: var(--size-large, #{$size-large})
 
 .menu-list
-  line-height: $menu-list-line-height
+  line-height: var(--menu-list-line-height)
   a
-    border-radius: $menu-item-radius
-    color: $menu-item-color
+    border-radius: var(--menu-item-radius)
+    color: var(--menu-item-color)
     display: block
-    padding: $menu-list-link-padding
+    padding: var(--menu-list-link-padding)
     &:hover
-      background-color: $menu-item-hover-background-color
-      color: $menu-item-hover-color
+      background-color: var(--menu-item-hover-background-color)
+      color: var(--menu-item-hover-color)
     // Modifiers
     &.is-active
-      background-color: $menu-item-active-background-color
-      color: $menu-item-active-color
+      background-color: var(--menu-item-active-background-color)
+      color: var(--menu-item-active-color)
   li
     ul
-      +ltr-property("border", $menu-list-border-left, false)
-      margin: $menu-nested-list-margin
-      +ltr-property("padding", $menu-nested-list-padding-left, false)
+      +ltr-property("border", var(--menu-list-border-left), false)
+      margin: var(--menu-nested-list-margin)
+      +ltr-property("padding", var(--menu-nested-list-padding-left), false)
 
 .menu-label
-  color: $menu-label-color
-  font-size: $menu-label-font-size
-  letter-spacing: $menu-label-letter-spacing
+  color: var(--menu-label-color)
+  font-size: var(--menu-label-font-size)
+  letter-spacing: var(--menu-label-letter-spacing)
   text-transform: uppercase
   &:not(:first-child)
-    margin-top: $menu-label-spacing
+    margin-top: var(--menu-label-spacing)
   &:not(:last-child)
-    margin-bottom: $menu-label-spacing
+    margin-bottom: var(--menu-label-spacing)

sass/components/message.sass

@@ -1,29 +1,46 @@
-$message-background-color: $background !default
-$message-radius: $radius !default
+$message-background-color: var(--background, #{$background}) !default
+$message-font-size: var(--size-normal, #{$size-normal}) !default
+$message-radius: var(--radius, #{$radius}) !default
 
-$message-header-background-color: $text !default
-$message-header-color: $text-invert !default
-$message-header-weight: $weight-bold !default
+$message-header-background-color: var(--text, #{$text}) !default
+$message-header-color: var(--text-invert, #{$text-invert}) !default
+$message-header-weight: var(--weight-bold, #{$weight-bold}) !default
 $message-header-padding: 0.75em 1em !default
-$message-header-radius: $radius !default
+$message-header-radius: var(--radius, #{$radius}) !default
 
-$message-body-border-color: $border !default
+$message-body-border-color: var(--border, #{$border}) !default
 $message-body-border-width: 0 0 0 4px !default
-$message-body-color: $text !default
+$message-body-color: var(--text, #{$text}) !default
 $message-body-padding: 1.25em 1.5em !default
-$message-body-radius: $radius !default
+$message-body-radius: var(--radius, #{$radius}) !default
 
-$message-body-pre-background-color: $scheme-main !default
+$message-body-pre-background-color: var(--scheme-main, #{$scheme-main}) !default
 $message-body-pre-code-background-color: transparent !default
 
 $message-header-body-border-width: 0 !default
 $message-colors: $colors !default
 
 .message
+  --message-background-color: #{$message-background-color}
+  --message-font-size: #{$message-font-size}
+  --message-radius: #{$message-radius}
+  --message-header-background-color: #{$message-header-background-color}
+  --message-header-color: #{$message-header-color}
+  --message-header-weight: #{$message-header-weight}
+  --message-header-padding: #{$message-header-padding}
+  --message-header-radius: #{$message-header-radius}
+  --message-body-border-color: #{$message-body-border-color}
+  --message-body-radius: #{$message-body-radius}
+  --message-body-border-width: #{$message-body-border-width}
+  --message-body-color: #{$message-body-color}
+  --message-body-padding: #{$message-body-padding}
+  --message-body-pre-background-color: #{$message-body-pre-background-color}
+  --message-body-pre-code-background-color: #{$message-body-pre-code-background-color}
+  --message-header-body-border-width: #{$message-header-body-border-width}
   @extend %block
-  background-color: $message-background-color
-  border-radius: $message-radius
-  font-size: $size-normal
+  background-color: var(--message-background-color)
+  border-radius: var(--message-radius)
+  font-size: var(--message-font-size)
   strong
     color: currentColor
   a:not(.button):not(.tag):not(.dropdown-item)
@@ -31,11 +48,11 @@ $message-colors: $colors !default
     text-decoration: underline
   // Sizes
   &.is-small
-    font-size: $size-small
+    --message-font-size: var(--size-small, #{$size-small})
   &.is-medium
-    font-size: $size-medium
+    --message-font-size: var(--size-medium, #{$size-medium})
   &.is-large
-    font-size: $size-large
+    --message-font-size: var(--size-large, #{$size-large})
   // Colors
   @each $name, $components in $message-colors
     $color: nth($components, 1)
@@ -53,47 +70,48 @@ $message-colors: $colors !default
         $desaturate-percentage: $color-luminance * 30%
         $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
     @else
-      $color-lightning: max((100% - lightness($color)) - 2%, 0%)
-      $color-light: lighten($color, $color-lightning)
+      @if type-of($color) == 'color'
+        $color-lightning: max((100% - lightness($color)) - 2%, 0%)
+        $color-light: lighten($color, $color-lightning)
+      @else
+        $color-light: $color
 
     &.is-#{$name}
-      background-color: $color-light
-      .message-header
-        background-color: $color
-        color: $color-invert
-      .message-body
-        border-color: $color
-        color: $color-dark
+      --message-background-color: var(--#{$name}-light, #{$color-light})
+      --message-header-background-color: var(--#{$name}, #{$color})
+      --message-header-color: var(--#{$name}-invert, #{$color-invert})
+      --message-body-border-color: var(--#{$name}, #{$color})
+      --message-body-color: var(--#{$name}-dark, #{$color-dark})
 
 .message-header
   align-items: center
-  background-color: $message-header-background-color
-  border-radius: $message-header-radius $message-header-radius 0 0
-  color: $message-header-color
+  background-color: var(--message-header-background-color)
+  border-radius: var(--message-header-radius) var(--message-header-radius) 0 0
+  color: var(--message-header-color)
   display: flex
-  font-weight: $message-header-weight
+  font-weight: var(--message-header-weight)
   justify-content: space-between
   line-height: 1.25
-  padding: $message-header-padding
+  padding: var(--message-header-padding)
   position: relative
   .delete
     flex-grow: 0
     flex-shrink: 0
     +ltr-property("margin", 0.75em, false)
   & + .message-body
-    border-width: $message-header-body-border-width
+    border-width: var(--message-header-body-border-width)
     border-top-left-radius: 0
     border-top-right-radius: 0
 
 .message-body
-  border-color: $message-body-border-color
-  border-radius: $message-body-radius
+  border-color: var(--message-body-border-color)
+  border-radius: var(--message-body-radius)
   border-style: solid
-  border-width: $message-body-border-width
-  color: $message-body-color
-  padding: $message-body-padding
+  border-width: var(--message-body-border-width)
+  color: var(--message-body-color)
+  padding: var(--message-body-padding)
   code,
   pre
-    background-color: $message-body-pre-background-color
+    background-color: var(--message-body-pre-background-color)
   pre code
-    background-color: $message-body-pre-code-background-color
+    background-color: var(--message-body-pre-code-background-color)

sass/components/modal.sass

@@ -1,6 +1,6 @@
 $modal-z: 40 !default
 
-$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default
+$modal-background-background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.86) !default
 
 $modal-content-width: 640px !default
 $modal-content-margin-mobile: 20px !default
@@ -13,24 +13,47 @@ $modal-close-top: 20px !default
 
 $modal-card-spacing: 40px !default
 
-$modal-card-head-background-color: $background !default
+$modal-card-head-background-color: var(--background, #{$background}) !default
 $modal-card-head-border-bottom: 1px solid $border !default
 $modal-card-head-padding: 20px !default
-$modal-card-head-radius: $radius-large !default
+$modal-card-head-radius: var(--radius-large, #{$radius-large}) !default
 
-$modal-card-title-color: $text-strong !default
+$modal-card-title-color: var(--text-strong, #{$text-strong}) !default
 $modal-card-title-line-height: 1 !default
 $modal-card-title-size: $size-4 !default
 
-$modal-card-foot-radius: $radius-large !default
+$modal-card-foot-radius: var(--radius-large, #{$radius-large}) !default
 $modal-card-foot-border-top: 1px solid $border !default
 
-$modal-card-body-background-color: $scheme-main !default
+$modal-card-body-background-color: var(--scheme-main, #{$scheme-main}) !default
 $modal-card-body-padding: 20px !default
 
 $modal-breakpoint: $tablet !default
 
 .modal
+  --modal-z: #{$modal-z}
+  --modal-background-background-color: #{$modal-background-background-color}
+  --modal-content-width: #{$modal-content-width}
+  --modal-content-margin-mobile: #{$modal-content-margin-mobile}
+  --modal-content-spacing-mobile: #{$modal-content-spacing-mobile}
+  --modal-content-spacing-tablet: #{$modal-content-spacing-tablet}
+  --modal-close-dimensions: #{$modal-close-dimensions}
+  --modal-close-right: #{$modal-close-right}
+  --modal-close-top: #{$modal-close-top}
+  --modal-card-spacing: #{$modal-card-spacing}
+  --modal-card-head-background-color: #{$modal-card-head-background-color}
+  --modal-card-head-padding: #{$modal-card-head-padding}
+  --modal-card-head-border-bottom: #{$modal-card-head-border-bottom}
+  --modal-card-head-radius: #{$modal-card-head-radius}
+  --modal-card-head-radius: #{$modal-card-head-radius}
+  --modal-card-title-color: #{$modal-card-title-color}
+  --modal-card-title-size: #{$modal-card-title-size}
+  --modal-card-title-line-height: #{$modal-card-title-line-height}
+  --modal-card-foot-radius: #{$modal-card-foot-radius}
+  --modal-card-foot-radius: #{$modal-card-foot-radius}
+  --modal-card-foot-border-top: #{$modal-card-foot-border-top}
+  --modal-card-body-background-color: #{$modal-card-body-background-color}
+  --modal-card-body-padding: #{$modal-card-body-padding}
   @extend %overlay
   align-items: center
   display: none
@@ -38,78 +61,78 @@ $modal-breakpoint: $tablet !default
   justify-content: center
   overflow: hidden
   position: fixed
-  z-index: $modal-z
+  z-index: var(--modal-z)
   // Modifiers
   &.is-active
     display: flex
 
 .modal-background
   @extend %overlay
-  background-color: $modal-background-background-color
+  background-color: var(--modal-background-background-color)
 
 .modal-content,
 .modal-card
-  margin: 0 $modal-content-margin-mobile
-  max-height: calc(100vh - #{$modal-content-spacing-mobile})
+  margin: 0 var(--modal-content-margin-mobile)
+  max-height: calc(100vh - #{var(--modal-content-spacing-mobile)})
   overflow: auto
   position: relative
   width: 100%
   // Responsiveness
   +from($modal-breakpoint)
     margin: 0 auto
-    max-height: calc(100vh - #{$modal-content-spacing-tablet})
-    width: $modal-content-width
+    max-height: calc(100vh - #{var(--modal-content-spacing-tablet)})
+    width: var(--modal-content-width)
 
 .modal-close
   @extend %delete
   background: none
-  height: $modal-close-dimensions
+  height: var(--modal-close-dimensions)
   position: fixed
-  +ltr-position($modal-close-right)
-  top: $modal-close-top
-  width: $modal-close-dimensions
+  +ltr-position(var(--modal-close-right))
+  top: var(--modal-close-top)
+  width: var(--modal-close-dimensions)
 
 .modal-card
   display: flex
   flex-direction: column
-  max-height: calc(100vh - #{$modal-card-spacing})
+  max-height: calc(100vh - #{var(--modal-card-spacing)})
   overflow: hidden
   -ms-overflow-y: visible
 
 .modal-card-head,
 .modal-card-foot
   align-items: center
-  background-color: $modal-card-head-background-color
+  background-color: var(--modal-card-head-background-color)
   display: flex
   flex-shrink: 0
   justify-content: flex-start
-  padding: $modal-card-head-padding
+  padding: var(--modal-card-head-padding)
   position: relative
 
 .modal-card-head
-  border-bottom: $modal-card-head-border-bottom
-  border-top-left-radius: $modal-card-head-radius
-  border-top-right-radius: $modal-card-head-radius
+  border-bottom: var(--modal-card-head-border-bottom)
+  border-top-left-radius: var(--modal-card-head-radius)
+  border-top-right-radius: var(--modal-card-head-radius)
 
 .modal-card-title
-  color: $modal-card-title-color
+  color: var(--modal-card-title-color)
   flex-grow: 1
   flex-shrink: 0
-  font-size: $modal-card-title-size
-  line-height: $modal-card-title-line-height
+  font-size: var(--modal-card-title-size)
+  line-height: var(--modal-card-title-line-height)
 
 .modal-card-foot
-  border-bottom-left-radius: $modal-card-foot-radius
-  border-bottom-right-radius: $modal-card-foot-radius
-  border-top: $modal-card-foot-border-top
+  border-bottom-left-radius: var(--modal-card-foot-radius)
+  border-bottom-right-radius: var(--modal-card-foot-radius)
+  border-top: var(--modal-card-foot-border-top)
   .button
     &:not(:last-child)
       +ltr-property("margin", 0.5em)
 
 .modal-card-body
   +overflow-touch
-  background-color: $modal-card-body-background-color
+  background-color: var(--modal-card-body-background-color)
   flex-grow: 1
   flex-shrink: 1
   overflow: auto
-  padding: $modal-card-body-padding
+  padding: var(--modal-card-body-padding)

sass/components/navbar.sass

@@ -1,45 +1,50 @@
-$navbar-background-color: $scheme-main !default
+$navbar-background-color: var(--scheme-main, #{$scheme-main}) !default
 $navbar-box-shadow-size: 0 2px 0 0 !default
-$navbar-box-shadow-color: $background !default
+$navbar-box-shadow-color: var(--background, #{$background}) !default
 $navbar-height: 3.25rem !default
 $navbar-padding-vertical: 1rem !default
 $navbar-padding-horizontal: 2rem !default
 $navbar-z: 30 !default
 $navbar-fixed-z: 30 !default
+$navbar-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
 
-$navbar-item-color: $text !default
-$navbar-item-hover-color: $link !default
-$navbar-item-hover-background-color: $scheme-main-bis !default
-$navbar-item-active-color: $scheme-invert !default
+$navbar-menu-background-color: var(--scheme-main, #{$scheme-main}) !default
+
+$navbar-item-color: var(--text, #{$text}) !default
+$navbar-item-hover-color: var(--link, #{$link}) !default
+$navbar-item-hover-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default
+$navbar-item-active-color: var(--scheme-invert, #{$scheme-invert}) !default
 $navbar-item-active-background-color: transparent !default
 $navbar-item-img-max-height: 1.75rem !default
 
-$navbar-burger-color: $navbar-item-color !default
+$navbar-burger-color: var(--navbar-item-color, #{$navbar-item-color}) !default
 
 $navbar-tab-hover-background-color: transparent !default
-$navbar-tab-hover-border-bottom-color: $link !default
-$navbar-tab-active-color: $link !default
+$navbar-tab-hover-border-bottom-color: var(--link, #{$link}) !default
+$navbar-tab-active-color: var(--link, #{$link}) !default
 $navbar-tab-active-background-color: transparent !default
-$navbar-tab-active-border-bottom-color: $link !default
+$navbar-tab-active-border-bottom-color: var(--link, #{$link}) !default
 $navbar-tab-active-border-bottom-style: solid !default
 $navbar-tab-active-border-bottom-width: 3px !default
 
-$navbar-dropdown-background-color: $scheme-main !default
+$navbar-dropdown-background-color: var(--scheme-main, #{$scheme-main}) !default
 $navbar-dropdown-border-top: 2px solid $border !default
 $navbar-dropdown-offset: -4px !default
-$navbar-dropdown-arrow: $link !default
-$navbar-dropdown-radius: $radius-large !default
+$navbar-dropdown-arrow: var(--link, #{$link}) !default
+$navbar-dropdown-radius: var(--radius-large, #{$radius-large}) !default
 $navbar-dropdown-z: 20 !default
 
-$navbar-dropdown-boxed-radius: $radius-large !default
-$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default
+$navbar-dropdown-boxed-radius: var(--radius-large, #{$radius-large}) !default
+$navbar-dropdown-boxed-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
+$navbar-dropdown-boxed-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
+$navbar-dropdown-boxed-shadow: 0 8px 8px $navbar-dropdown-boxed-shadow-color, 0 0 0 1px $navbar-dropdown-boxed-shadow-color-bis !default
 
-$navbar-dropdown-item-hover-color: $scheme-invert !default
-$navbar-dropdown-item-hover-background-color: $background !default
-$navbar-dropdown-item-active-color: $link !default
-$navbar-dropdown-item-active-background-color: $background !default
+$navbar-dropdown-item-hover-color: var(--scheme-invert, #{$scheme-invert}) !default
+$navbar-dropdown-item-hover-background-color: var(--background, #{$background}) !default
+$navbar-dropdown-item-active-color: var(--link, #{$link}) !default
+$navbar-dropdown-item-active-background-color: var(--background, #{$background}) !default
 
-$navbar-divider-background-color: $background !default
+$navbar-divider-background-color: var(--background, #{$background}) !default
 $navbar-divider-height: 2px !default
 
 $navbar-bottom-box-shadow-size: 0 -2px 0 0 !default
@@ -52,91 +57,118 @@ $navbar-colors: $colors !default
   left: 0
   position: fixed
   right: 0
-  z-index: $navbar-fixed-z
+  z-index: var(--navbar-fixed-z)
 
 .navbar
-  background-color: $navbar-background-color
-  min-height: $navbar-height
+  --navbar-fixed-z: #{$navbar-fixed-z}
+  --navbar-shadow-color: #{$navbar-shadow-color}
+  --navbar-menu-background-color: #{$navbar-menu-background-color}
+  --navbar-background-color: #{$navbar-background-color}
+  --navbar-box-shadow-size: #{$navbar-box-shadow-size}
+  --navbar-box-shadow-color: #{$navbar-box-shadow-color}
+  --navbar-bottom-box-shadow-size: #{$navbar-bottom-box-shadow-size}
+  --navbar-height: #{$navbar-height}
+  --navbar-padding-vertical: #{$navbar-padding-vertical}
+  --navbar-padding-horizontal: #{$navbar-padding-horizontal}
+  --navbar-z: #{$navbar-z}
+  --navbar-burger-color: #{$navbar-burger-color}
+  --navbar-item-color: #{$navbar-item-color}
+  --navbar-item-hover-background-color: #{$navbar-item-hover-background-color}
+  --navbar-item-hover-color: #{$navbar-item-hover-color}
+  --navbar-item-img-max-height: #{$navbar-item-img-max-height}
+  --navbar-tab-hover-background-color: #{$navbar-tab-hover-background-color}
+  --navbar-tab-hover-border-bottom-color: #{$navbar-tab-hover-border-bottom-color}
+  --navbar-tab-active-background-color: #{$navbar-tab-active-background-color}
+  --navbar-tab-active-border-bottom-color: #{$navbar-tab-active-border-bottom-color}
+  --navbar-tab-active-border-bottom-style: #{$navbar-tab-active-border-bottom-style}
+  --navbar-tab-active-border-bottom-width: #{$navbar-tab-active-border-bottom-width}
+  --navbar-tab-active-color: #{$navbar-tab-active-color}
+  --navbar-dropdown-arrow: #{$navbar-dropdown-arrow}
+  --navbar-divider-background-color: #{$navbar-divider-background-color}
+  --navbar-divider-height: #{$navbar-divider-height}
+  --navbar-dropdown-item-hover-background-color: #{$navbar-dropdown-item-hover-background-color}
+  --navbar-dropdown-item-hover-color: #{$navbar-dropdown-item-hover-color}
+  --navbar-dropdown-item-active-background-color: #{$navbar-dropdown-item-active-background-color}
+  --navbar-dropdown-item-active-color: #{$navbar-dropdown-item-active-color}
+  --navbar-dropdown-border-top: #{$navbar-dropdown-border-top}
+  --navbar-dropdown-background-color: #{$navbar-dropdown-background-color}
+  --navbar-dropdown-radius: #{$navbar-dropdown-radius}
+  --navbar-dropdown-z: #{$navbar-dropdown-z}
+  --navbar-dropdown-boxed-radius: #{$navbar-dropdown-boxed-radius}
+  --navbar-dropdown-boxed-shadow: #{$navbar-dropdown-boxed-shadow}
+  --navbar-dropdown-offset: #{$navbar-dropdown-offset}
+  --navbar-item-active-color: #{$navbar-item-active-color}
+  --navbar-item-active-background-color: #{$navbar-item-active-background-color}
+  background-color: var(--navbar-background-color)
+  min-height: var(--navbar-height)
   position: relative
-  z-index: $navbar-z
+  z-index: var(--navbar-z)
   @each $name, $pair in $navbar-colors
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
-      background-color: $color
-      color: $color-invert
+      --navbar-burger-color: var(--#{$name}-invert, #{$color-invert})
+      background-color: var(--#{$name}, #{$color})
+      color: var(--#{$name}-invert, #{$color-invert})
       .navbar-brand
         & > .navbar-item,
         .navbar-link
-          color: $color-invert
+          color: var(--#{$name}-invert, #{$color-invert})
         & > a.navbar-item,
         .navbar-link
+          --navbar-item-hover-background-delta: -5%
+          --navbar-item-hover-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--navbar-item-hover-background-delta)})
+          --navbar-item-hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--navbar-item-hover-background-#{$name}-l), var(--#{$name}-a))
           &:focus,
           &:hover,
           &.is-active
-            background-color: bulmaDarken($color, 5%)
-            color: $color-invert
-        .navbar-link
-          &::after
-            border-color: $color-invert
-      .navbar-burger
-        color: $color-invert
+            background-color: var(--navbar-item-hover-background-color, #{bulmaDarken($color, 5%)})
       +from($navbar-breakpoint)
+        --navbar-dropdown-item-active-background-color: var(--#{$name}, #{$color})
+        --navbar-dropdown-item-active-color: var(--#{$name}-invert, #{$color-invert})
+        .navbar-brand,
         .navbar-start,
         .navbar-end
           & > .navbar-item,
           .navbar-link
-            color: $color-invert
+            color: var(--#{$name}-invert, #{$color-invert})
           & > a.navbar-item,
           .navbar-link
             &:focus,
             &:hover,
             &.is-active
-              background-color: bulmaDarken($color, 5%)
-              color: $color-invert
-          .navbar-link
-            &::after
-              border-color: $color-invert
-        .navbar-item.has-dropdown:focus .navbar-link,
-        .navbar-item.has-dropdown:hover .navbar-link,
-        .navbar-item.has-dropdown.is-active .navbar-link
-          background-color: bulmaDarken($color, 5%)
-          color: $color-invert
-        .navbar-dropdown
-          a.navbar-item
-            &.is-active
-              background-color: $color
-              color: $color-invert
+              background-color: var(--navbar-item-hover-background-color, #{bulmaDarken($color, 5%)})
+              color: var(--#{$name}-invert, #{$color-invert})
   & > .container
     align-items: stretch
     display: flex
-    min-height: $navbar-height
+    min-height: var(--navbar-height)
     width: 100%
   &.has-shadow
-    box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
+    box-shadow: var(--navbar-box-shadow-size) var(--navbar-box-shadow-color)
   &.is-fixed-bottom,
   &.is-fixed-top
     +navbar-fixed
   &.is-fixed-bottom
     bottom: 0
     &.has-shadow
-      box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
+      box-shadow: var(--navbar-bottom-box-shadow-size) var(--navbar-box-shadow-color)
   &.is-fixed-top
     top: 0
 
 html,
 body
   &.has-navbar-fixed-top
-    padding-top: $navbar-height
+    padding-top: var(--navbar-height)
   &.has-navbar-fixed-bottom
-    padding-bottom: $navbar-height
+    padding-bottom: var(--navbar-height)
 
 .navbar-brand,
 .navbar-tabs
   align-items: stretch
   display: flex
   flex-shrink: 0
-  min-height: $navbar-height
+  min-height: var(--navbar-height)
 
 .navbar-brand
   a.navbar-item
@@ -151,8 +183,8 @@ body
   overflow-y: hidden
 
 .navbar-burger
-  color: $navbar-burger-color
-  +hamburger($navbar-height)
+  color: var(--navbar-burger-color)
+  +hamburger(var(--navbar-height))
   +ltr-property("margin", auto, false)
 
 .navbar-menu
@@ -160,7 +192,7 @@ body
 
 .navbar-item,
 .navbar-link
-  color: $navbar-item-color
+  color: var(--navbar-item-color)
   display: block
   line-height: 1.5
   padding: 0.5rem 0.75rem
@@ -177,14 +209,14 @@ a.navbar-item,
   &:focus-within,
   &:hover,
   &.is-active
-    background-color: $navbar-item-hover-background-color
-    color: $navbar-item-hover-color
+    background-color: var(--navbar-item-hover-background-color)
+    color: var(--navbar-item-hover-color)
 
 .navbar-item
   flex-grow: 0
   flex-shrink: 0
   img
-    max-height: $navbar-item-img-max-height
+    max-height: var(--navbar-item-img-max-height)
   &.has-dropdown
     padding: 0
   &.is-expanded
@@ -192,19 +224,19 @@ a.navbar-item,
     flex-shrink: 1
   &.is-tab
     border-bottom: 1px solid transparent
-    min-height: $navbar-height
+    min-height: var(--navbar-height)
     padding-bottom: calc(0.5rem - 1px)
     &:focus,
     &:hover
-      background-color: $navbar-tab-hover-background-color
-      border-bottom-color: $navbar-tab-hover-border-bottom-color
+      background-color: var(--navbar-tab-hover-background-color)
+      border-bottom-color: var(--navbar-tab-hover-border-bottom-color)
     &.is-active
-      background-color: $navbar-tab-active-background-color
-      border-bottom-color: $navbar-tab-active-border-bottom-color
-      border-bottom-style: $navbar-tab-active-border-bottom-style
-      border-bottom-width: $navbar-tab-active-border-bottom-width
-      color: $navbar-tab-active-color
-      padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})
+      background-color: var(--navbar-tab-active-background-color)
+      border-bottom-color: var(--navbar-tab-active-border-bottom-color)
+      border-bottom-style: var(--navbar-tab-active-border-bottom-style)
+      border-bottom-width: var(--navbar-tab-active-border-bottom-width)
+      color: var(--navbar-tab-active-color)
+      padding-bottom: calc(0.5rem - #{var(--navbar-tab-active-border-bottom-width)})
 
 .navbar-content
   flex-grow: 1
@@ -214,7 +246,7 @@ a.navbar-item,
   +ltr-property("padding", 2.5em)
   &::after
     @extend %arrow
-    border-color: $navbar-dropdown-arrow
+    border-color: var(--navbar-dropdown-arrow)
     margin-top: -0.375em
     +ltr-position(1.125em)
 
@@ -227,10 +259,10 @@ a.navbar-item,
     padding-right: 1.5rem
 
 .navbar-divider
-  background-color: $navbar-divider-background-color
+  background-color: var(--navbar-divider-background-color)
   border: none
   display: none
-  height: $navbar-divider-height
+  height: var(--navbar-divider-height)
   margin: 0.5rem 0
 
 +until($navbar-breakpoint)
@@ -245,8 +277,8 @@ a.navbar-item,
     &::after
       display: none
   .navbar-menu
-    background-color: $navbar-background-color
-    box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
+    background-color: var(--navbar-menu-background-color)
+    box-shadow: 0 8px 16px var(--navbar-shadow-color)
     padding: 0.5rem 0
     &.is-active
       display: block
@@ -258,21 +290,21 @@ a.navbar-item,
     &.is-fixed-bottom-touch
       bottom: 0
       &.has-shadow
-        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
+        box-shadow: 0 -2px 3px var(--navbar-shadow-color)
     &.is-fixed-top-touch
       top: 0
     &.is-fixed-top,
     &.is-fixed-top-touch
       .navbar-menu
         +overflow-touch
-        max-height: calc(100vh - #{$navbar-height})
+        max-height: calc(100vh - #{var(--navbar-height)})
         overflow: auto
   html,
   body
     &.has-navbar-fixed-top-touch
-      padding-top: $navbar-height
+      padding-top: var(--navbar-height)
     &.has-navbar-fixed-bottom-touch
-      padding-bottom: $navbar-height
+      padding-bottom: var(--navbar-height)
 
 +from($navbar-breakpoint)
   .navbar,
@@ -282,15 +314,15 @@ a.navbar-item,
     align-items: stretch
     display: flex
   .navbar
-    min-height: $navbar-height
+    min-height: var(--navbar-height)
     &.is-spaced
-      padding: $navbar-padding-vertical $navbar-padding-horizontal
+      padding: var(--navbar-padding-vertical) var(--navbar-padding-horizontal)
       .navbar-start,
       .navbar-end
         align-items: center
       a.navbar-item,
       .navbar-link
-        border-radius: $radius
+        border-radius: var(--radius, #{$radius})
     &.is-transparent
       a.navbar-item,
       .navbar-link
@@ -309,11 +341,11 @@ a.navbar-item,
         a.navbar-item
           &:focus,
           &:hover
-            background-color: $navbar-dropdown-item-hover-background-color
-            color: $navbar-dropdown-item-hover-color
+            background-color: var(--navbar-dropdown-item-hover-background-color)
+            color: var(--navbar-dropdown-item-hover-color)
           &.is-active
-            background-color: $navbar-dropdown-item-active-background-color
-            color: $navbar-dropdown-item-active-color
+            background-color: var(--navbar-dropdown-item-active-background-color)
+            color: var(--navbar-dropdown-item-active-color)
   .navbar-burger
     display: none
   .navbar-item,
@@ -327,11 +359,11 @@ a.navbar-item,
       .navbar-link::after
         transform: rotate(135deg) translate(0.25em, -0.25em)
       .navbar-dropdown
-        border-bottom: $navbar-dropdown-border-top
-        border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
+        border-bottom: var(--navbar-dropdown-border-top)
+        border-radius: var(--navbar-dropdown-radius) var(--navbar-dropdown-radius) 0 0
         border-top: none
         bottom: 100%
-        box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
+        box-shadow: 0 -8px 8px var(--navbar-shadow-color)
         top: auto
     &.is-active,
     &.is-hoverable:focus,
@@ -354,18 +386,18 @@ a.navbar-item,
     justify-content: flex-end
     +ltr-property("margin", auto, false)
   .navbar-dropdown
-    background-color: $navbar-dropdown-background-color
-    border-bottom-left-radius: $navbar-dropdown-radius
-    border-bottom-right-radius: $navbar-dropdown-radius
-    border-top: $navbar-dropdown-border-top
-    box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
+    background-color: var(--navbar-dropdown-background-color)
+    border-bottom-left-radius: var(--navbar-dropdown-radius)
+    border-bottom-right-radius: var(--navbar-dropdown-radius)
+    border-top: var(--navbar-dropdown-border-top)
+    box-shadow: 0 8px 8px var(--navbar-shadow-color)
     display: none
     font-size: 0.875rem
     +ltr-position(0, false)
     min-width: 100%
     position: absolute
     top: 100%
-    z-index: $navbar-dropdown-z
+    z-index: var(--navbar-dropdown-z)
     .navbar-item
       padding: 0.375rem 1rem
       white-space: nowrap
@@ -373,22 +405,22 @@ a.navbar-item,
       +ltr-property("padding", 3rem)
       &:focus,
       &:hover
-        background-color: $navbar-dropdown-item-hover-background-color
-        color: $navbar-dropdown-item-hover-color
+        background-color: var(--navbar-dropdown-item-hover-background-color)
+        color: var(--navbar-dropdown-item-hover-color)
       &.is-active
-        background-color: $navbar-dropdown-item-active-background-color
-        color: $navbar-dropdown-item-active-color
+        background-color: var(--navbar-dropdown-item-active-background-color) !important
+        color: var(--navbar-dropdown-item-active-color)
     .navbar.is-spaced &,
     &.is-boxed
-      border-radius: $navbar-dropdown-boxed-radius
+      border-radius: var(--navbar-dropdown-boxed-radius)
       border-top: none
-      box-shadow: $navbar-dropdown-boxed-shadow
+      box-shadow: var(--navbar-dropdown-boxed-shadow)
       display: block
       opacity: 0
       pointer-events: none
-      top: calc(100% + (#{$navbar-dropdown-offset}))
+      top: calc(100% + #{var(--navbar-dropdown-offset)})
       transform: translateY(-5px)
-      transition-duration: $speed
+      transition-duration: var(--speed, #{$speed})
       transition-property: opacity, transform
     &.is-right
       left: auto
@@ -409,35 +441,35 @@ a.navbar-item,
     &.is-fixed-bottom-desktop
       bottom: 0
       &.has-shadow
-        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
+        box-shadow: 0 -2px 3px var(--navbar-shadow-color)
     &.is-fixed-top-desktop
       top: 0
   html,
   body
     &.has-navbar-fixed-top-desktop
-      padding-top: $navbar-height
+      padding-top: var(--navbar-height)
     &.has-navbar-fixed-bottom-desktop
-      padding-bottom: $navbar-height
+      padding-bottom: var(--navbar-height)
     &.has-spaced-navbar-fixed-top
-      padding-top: $navbar-height + ($navbar-padding-vertical * 2)
+      padding-top: calc(#{var(--navbar-height)} + calc(#{var(--navbar-padding-vertical)} * 2))
     &.has-spaced-navbar-fixed-bottom
-      padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
+      padding-bottom: calc(#{var(--navbar-height)} + calc(#{var(--navbar-padding-vertical)} * 2))
   // Hover/Active states
   a.navbar-item,
   .navbar-link
     &.is-active
-      color: $navbar-item-active-color
+      color: var(--navbar-item-active-color)
     &.is-active:not(:focus):not(:hover)
-      background-color: $navbar-item-active-background-color
+      background-color: var(--navbar-item-active-background-color)
   .navbar-item.has-dropdown
     &:focus,
     &:hover,
     &.is-active
       .navbar-link
-        background-color: $navbar-item-hover-background-color
+        background-color: var(--navbar-item-hover-background-color)
 
 // Combination
 
 .hero
   &.is-fullheight-with-navbar
-    min-height: calc(100vh - #{$navbar-height})
+    min-height: calc(100vh - #{var(--navbar-height)})

sass/components/pagination.sass

@@ -1,53 +1,74 @@
-$pagination-color: $text-strong !default
-$pagination-border-color: $border !default
+$pagination-color: var(--text-strong, #{$text-strong}) !default
+$pagination-border-color: var(--border, #{$border}) !default
+$pagination-font-size: var(--size-normal, #{$size-normal}) !default
 $pagination-margin: -0.25rem !default
-$pagination-min-width: $control-height !default
+$pagination-min-width: var(--control-height, #{$control-height}) !default
 
 $pagination-item-font-size: 1em !default
 $pagination-item-margin: 0.25rem !default
 $pagination-item-padding-left: 0.5em !default
 $pagination-item-padding-right: 0.5em !default
 
-$pagination-hover-color: $link-hover !default
-$pagination-hover-border-color: $link-hover-border !default
+$pagination-hover-color: var(--link-hover, #{$link-hover}) !default
+$pagination-hover-border-color: var(--link-hover-border, #{$link-hover-border}) !default
 
-$pagination-focus-color: $link-focus !default
-$pagination-focus-border-color: $link-focus-border !default
+$pagination-focus-color: var(--link-focus, #{$link-focus}) !default
+$pagination-focus-border-color: var(--link-focus-border, #{$link-focus-border}) !default
 
-$pagination-active-color: $link-active !default
-$pagination-active-border-color: $link-active-border !default
+$pagination-active-color: var(--link-active, #{$link-active}) !default
+$pagination-active-border-color: var(--link-active-border, #{$link-active-border}) !default
 
-$pagination-disabled-color: $text-light !default
-$pagination-disabled-background-color: $border !default
-$pagination-disabled-border-color: $border !default
+$pagination-disabled-color: var(--text-light, #{$text-light}) !default
+$pagination-disabled-background-color: var(--border, #{$border}) !default
+$pagination-disabled-border-color: var(--border, #{$border}) !default
 
-$pagination-current-color: $link-invert !default
-$pagination-current-background-color: $link !default
-$pagination-current-border-color: $link !default
+$pagination-current-color: var(--link-invert, #{$link-invert}) !default
+$pagination-current-background-color: var(--link, #{$link}) !default
+$pagination-current-border-color: var(--link, #{$link}) !default
 
-$pagination-ellipsis-color: $grey-light !default
+$pagination-ellipsis-color: var(--grey-light, #{$grey-light}) !default
 
 $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
 
 .pagination
+  --pagination-font-size: #{$pagination-font-size}
+  --pagination-margin: #{$pagination-margin}
+  --pagination-item-font-size: #{$pagination-item-font-size}
+  --pagination-item-margin: #{$pagination-item-margin}
+  --pagination-item-padding-left: #{$pagination-item-padding-left}
+  --pagination-item-padding-right: #{$pagination-item-padding-right}
+  --pagination-border-color: #{$pagination-border-color}
+  --pagination-color: #{$pagination-color}
+  --pagination-min-width: #{$pagination-min-width}
+  --pagination-hover-border-color: #{$pagination-hover-border-color}
+  --pagination-hover-color: #{$pagination-hover-color}
+  --pagination-focus-border-color: #{$pagination-focus-border-color}
+  --pagination-shadow-inset: #{$pagination-shadow-inset}
+  --pagination-disabled-background-color: #{$pagination-disabled-background-color}
+  --pagination-disabled-border-color: #{$pagination-disabled-border-color}
+  --pagination-disabled-color: #{$pagination-disabled-color}
+  --pagination-current-background-color: #{$pagination-current-background-color}
+  --pagination-current-border-color: #{$pagination-current-border-color}
+  --pagination-current-color: #{$pagination-current-color}
+  --pagination-ellipsis-color: #{$pagination-ellipsis-color}
   @extend %block
-  font-size: $size-normal
-  margin: $pagination-margin
+  font-size: var(--pagination-font-size)
+  margin: var(--pagination-margin)
   // Sizes
   &.is-small
-    font-size: $size-small
+    --pagination-font-size: var(--size-small, #{$size-small})
   &.is-medium
-    font-size: $size-medium
+    --pagination-font-size: var(--size-medium, #{$size-medium})
   &.is-large
-    font-size: $size-large
+    --pagination-font-size: var(--size-large, #{$size-large})
   &.is-rounded
     .pagination-previous,
     .pagination-next
       padding-left: 1em
       padding-right: 1em
-      border-radius: $radius-rounded
+      border-radius: var(--radius-rounded, #{$radius-rounded})
     .pagination-link
-      border-radius: $radius-rounded
+      border-radius: var(--radius-rounded, #{$radius-rounded})
 
 .pagination,
 .pagination-list
@@ -62,31 +83,31 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
 .pagination-ellipsis
   @extend %control
   @extend %unselectable
-  font-size: $pagination-item-font-size
+  font-size: var(--pagination-item-font-size)
   justify-content: center
-  margin: $pagination-item-margin
-  padding-left: $pagination-item-padding-left
-  padding-right: $pagination-item-padding-right
+  margin: var(--pagination-item-margin)
+  padding-left: var(--pagination-item-padding-left)
+  padding-right: var(--pagination-item-padding-right)
   text-align: center
 
 .pagination-previous,
 .pagination-next,
 .pagination-link
-  border-color: $pagination-border-color
-  color: $pagination-color
-  min-width: $pagination-min-width
+  border-color: var(--pagination-border-color)
+  color: var(--pagination-color)
+  min-width: var(--pagination-min-width)
   &:hover
-    border-color: $pagination-hover-border-color
-    color: $pagination-hover-color
+    border-color: var(--pagination-hover-border-color)
+    color: var(--pagination-hover-color)
   &:focus
-    border-color: $pagination-focus-border-color
+    border-color: var(--pagination-focus-border-color)
   &:active
-    box-shadow: $pagination-shadow-inset
+    box-shadow: var(--pagination-shadow-inset)
   &[disabled]
-    background-color: $pagination-disabled-background-color
-    border-color: $pagination-disabled-border-color
+    background-color: var(--pagination-disabled-background-color)
+    border-color: var(--pagination-disabled-border-color)
     box-shadow: none
-    color: $pagination-disabled-color
+    color: var(--pagination-disabled-color)
     opacity: 0.5
 
 .pagination-previous,
@@ -97,12 +118,12 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)
 
 .pagination-link
   &.is-current
-    background-color: $pagination-current-background-color
-    border-color: $pagination-current-border-color
-    color: $pagination-current-color
+    background-color: var(--pagination-current-background-color)
+    border-color: var(--pagination-current-border-color)
+    color: var(--pagination-current-color)
 
 .pagination-ellipsis
-  color: $pagination-ellipsis-color
+  color: var(--pagination-ellipsis-color)
   pointer-events: none
 
 .pagination-list

sass/components/panel.sass

@@ -1,3 +1,4 @@
+$panel-font-size: var(--size-normal, #{$size-normal}) !default
 $panel-margin: $block-spacing !default
 $panel-item-border: 1px solid $border-light !default
 $panel-radius: $radius-large !default
@@ -29,61 +30,85 @@ $panel-icon-color: $text-light !default
 $panel-colors: $colors !default
 
 .panel
-  border-radius: $panel-radius
-  box-shadow: $panel-shadow
-  font-size: $size-normal
+  --panel-font-size: #{$panel-font-size}
+  --panel-radius: #{$panel-radius}
+  --panel-shadow: #{$panel-shadow}
+  --panel-margin: #{$panel-margin}
+  --panel-item-border: #{$panel-item-border}
+  --panel-radius: #{$panel-radius}
+  --panel-heading-background-color: #{$panel-heading-background-color}
+  --panel-heading-color: #{$panel-heading-color}
+  --panel-heading-size: #{$panel-heading-size}
+  --panel-heading-weight: #{$panel-heading-weight}
+  --panel-heading-line-height: #{$panel-heading-line-height}
+  --panel-heading-padding: #{$panel-heading-padding}
+  --panel-tabs-font-size: #{$panel-tabs-font-size}
+  --panel-tab-border-bottom: #{$panel-tab-border-bottom}
+  --panel-tab-active-border-bottom-color: #{$panel-tab-active-border-bottom-color}
+  --panel-tab-active-color: #{$panel-tab-active-color}
+  --panel-list-item-color: #{$panel-list-item-color}
+  --panel-list-item-hover-color: #{$panel-list-item-hover-color}
+  --panel-block-color: #{$panel-block-color}
+  --panel-block-active-border-left-color: #{$panel-block-active-border-left-color}
+  --panel-block-active-color: #{$panel-block-active-color}
+  --panel-block-active-icon-color: #{$panel-block-active-icon-color}
+  --panel-block-hover-background-color: #{$panel-block-hover-background-color}
+  --panel-icon-color: #{$panel-icon-color}
+  border-radius: var(--panel-radius)
+  box-shadow: var(--panel-shadow)
+  font-size: var(--panel-font-size)
   &:not(:last-child)
-    margin-bottom: $panel-margin
+    margin-bottom: var(--panel-margin)
   // Colors
   @each $name, $components in $panel-colors
     $color: nth($components, 1)
     $color-invert: nth($components, 2)
     &.is-#{$name}
       .panel-heading
-        background-color: $color
-        color: $color-invert
+        background-color: var(--#{$name}, #{$color})
+        color: var(--#{$name}-invert, #{$color-invert})
       .panel-tabs a.is-active
-        border-bottom-color: $color
+        border-bottom-color: var(--#{$name}, #{$color})
       .panel-block.is-active .panel-icon
-        color: $color
+        color: var(--#{$name}, #{$color})
 
 .panel-tabs,
 .panel-block
   &:not(:last-child)
-    border-bottom: $panel-item-border
+    border-bottom: var(--panel-item-border)
 
 .panel-heading
-  background-color: $panel-heading-background-color
-  border-radius: $panel-radius $panel-radius 0 0
-  color: $panel-heading-color
-  font-size: $panel-heading-size
-  font-weight: $panel-heading-weight
-  line-height: $panel-heading-line-height
-  padding: $panel-heading-padding
+  background-color: var(--panel-heading-background-color)
+  border-radius: var(--panel-radius) var(--panel-radius) 0 0
+  color: var(--panel-heading-color)
+  font-size: var(--panel-heading-size)
+  font-weight: var(--panel-heading-weight)
+  line-height: var(--panel-heading-line-height)
+  padding: var(--panel-heading-padding)
 
 .panel-tabs
   align-items: flex-end
   display: flex
-  font-size: $panel-tabs-font-size
+  font-size: var(--panel-tabs-font-size)
   justify-content: center
   a
-    border-bottom: $panel-tab-border-bottom
+    border-bottom: var(--panel-tab-border-bottom)
     margin-bottom: -1px
     padding: 0.5em
     // Modifiers
     &.is-active
-      border-bottom-color: $panel-tab-active-border-bottom-color
-      color: $panel-tab-active-color
+      border-bottom-color: var(--panel-tab-active-border-bottom-color)
+      color: var(--panel-tab-active-color)
 
 .panel-list
   a
-    color: $panel-list-item-color
+    color: var(--panel-list-item-color)
     &:hover
-      color: $panel-list-item-hover-color
+      color: var(--panel-list-item-hover-color)
 
 .panel-block
   align-items: center
-  color: $panel-block-color
+  color: var(--panel-block-color)
   display: flex
   justify-content: flex-start
   padding: 0.5em 0.75em
@@ -96,23 +121,23 @@ $panel-colors: $colors !default
   &.is-wrapped
     flex-wrap: wrap
   &.is-active
-    border-left-color: $panel-block-active-border-left-color
-    color: $panel-block-active-color
+    border-left-color: var(--panel-block-active-border-left-color)
+    color: var(--panel-block-active-color)
     .panel-icon
-      color: $panel-block-active-icon-color
+      color: var(--panel-block-active-icon-color)
   &:last-child
-    border-bottom-left-radius: $panel-radius
-    border-bottom-right-radius: $panel-radius
+    border-bottom-left-radius: var(--panel-radius)
+    border-bottom-right-radius: var(--panel-radius)
 
 a.panel-block,
 label.panel-block
   cursor: pointer
   &:hover
-    background-color: $panel-block-hover-background-color
+    background-color: var(--panel-block-hover-background-color)
 
 .panel-icon
   +fa(14px, 1em)
-  color: $panel-icon-color
+  color: var(--panel-icon-color)
   +ltr-property("margin", 0.75em)
   .fa
     font-size: inherit

sass/components/tabs.sass

@@ -1,67 +1,93 @@
-$tabs-border-bottom-color: $border !default
+$tabs-font-size: var(--size-normal, #{$size-normal}) !default
+$tabs-border-bottom-color: var(--border, #{$border}) !default
 $tabs-border-bottom-style: solid !default
 $tabs-border-bottom-width: 1px !default
-$tabs-link-color: $text !default
-$tabs-link-hover-border-bottom-color: $text-strong !default
-$tabs-link-hover-color: $text-strong !default
-$tabs-link-active-border-bottom-color: $link !default
-$tabs-link-active-color: $link !default
+$tabs-link-color: var(--text, #{$text}) !default
+$tabs-link-hover-border-bottom-color: var(--text-strong, #{$text-strong}) !default
+$tabs-link-hover-color: var(--text-strong, #{$text-strong}) !default
+$tabs-link-active-border-bottom-color: var(--link, #{$link}) !default
+$tabs-link-active-color: var(--link, #{$link}) !default
 $tabs-link-padding: 0.5em 1em !default
 
-$tabs-boxed-link-radius: $radius !default
-$tabs-boxed-link-hover-background-color: $background !default
-$tabs-boxed-link-hover-border-bottom-color: $border !default
+$tabs-boxed-link-radius: var(--radius, #{$radius}) !default
+$tabs-boxed-link-hover-background-color: var(--background, #{$background}) !default
+$tabs-boxed-link-hover-border-bottom-color: var(--border, #{$border}) !default
 
-$tabs-boxed-link-active-background-color: $scheme-main !default
-$tabs-boxed-link-active-border-color: $border !default
+$tabs-boxed-link-active-background-color: var(--scheme-main, #{$scheme-main}) !default
+$tabs-boxed-link-active-border-color: var(--border, #{$border}) !default
 $tabs-boxed-link-active-border-bottom-color: transparent !default
 
-$tabs-toggle-link-border-color: $border !default
+$tabs-toggle-link-border-color: var(--border, #{$border}) !default
 $tabs-toggle-link-border-style: solid !default
 $tabs-toggle-link-border-width: 1px !default
-$tabs-toggle-link-hover-background-color: $background !default
-$tabs-toggle-link-hover-border-color: $border-hover !default
-$tabs-toggle-link-radius: $radius !default
-$tabs-toggle-link-active-background-color: $link !default
-$tabs-toggle-link-active-border-color: $link !default
-$tabs-toggle-link-active-color: $link-invert !default
+$tabs-toggle-link-hover-background-color: var(--background, #{$background}) !default
+$tabs-toggle-link-hover-border-color: var(--border-hover, #{$border-hover}) !default
+$tabs-toggle-link-radius: var(--radius, #{$radius}) !default
+$tabs-toggle-link-active-background-color: var(--link, #{$link}) !default
+$tabs-toggle-link-active-border-color: var(--link, #{$link}) !default
+$tabs-toggle-link-active-color: var(--link-invert, #{$link-invert}) !default
 
 .tabs
+  --tabs-font-size: #{$tabs-font-size}
+  --tabs-border-bottom-color: #{$tabs-border-bottom-color}
+  --tabs-border-bottom-style: #{$tabs-border-bottom-style}
+  --tabs-border-bottom-width: #{$tabs-border-bottom-width}
+  --tabs-link-color: #{$tabs-link-color}
+  --tabs-link-padding: #{$tabs-link-padding}
+  --tabs-link-hover-border-bottom-color: #{$tabs-link-hover-border-bottom-color}
+  --tabs-link-hover-color: #{$tabs-link-hover-color}
+  --tabs-link-active-border-bottom-color: #{$tabs-link-active-border-bottom-color}
+  --tabs-link-active-color: #{$tabs-link-active-color}
+  --tabs-boxed-link-radius: #{$tabs-boxed-link-radius}
+  --tabs-boxed-link-hover-background-color: #{$tabs-boxed-link-hover-background-color}
+  --tabs-boxed-link-hover-border-bottom-color: #{$tabs-boxed-link-hover-border-bottom-color}
+  --tabs-boxed-link-active-background-color: #{$tabs-boxed-link-active-background-color}
+  --tabs-boxed-link-active-border-color: #{$tabs-boxed-link-active-border-color}
+  --tabs-boxed-link-active-border-bottom-color: #{$tabs-boxed-link-active-border-bottom-color}
+  --tabs-toggle-link-border-color: #{$tabs-toggle-link-border-color}
+  --tabs-toggle-link-border-style: #{$tabs-toggle-link-border-style}
+  --tabs-toggle-link-border-width: #{$tabs-toggle-link-border-width}
+  --tabs-toggle-link-hover-background-color: #{$tabs-toggle-link-hover-background-color}
+  --tabs-toggle-link-hover-border-color: #{$tabs-toggle-link-hover-border-color}
+  --tabs-toggle-link-radius: #{$tabs-toggle-link-radius}
+  --tabs-toggle-link-active-background-color: #{$tabs-toggle-link-active-background-color}
+  --tabs-toggle-link-active-border-color: #{$tabs-toggle-link-active-border-color}
+  --tabs-toggle-link-active-color: #{$tabs-toggle-link-active-color}
   @extend %block
-  +overflow-touch
   @extend %unselectable
+  +overflow-touch
   align-items: stretch
   display: flex
-  font-size: $size-normal
+  font-size: var(--tabs-font-size)
   justify-content: space-between
   overflow: hidden
   overflow-x: auto
   white-space: nowrap
   a
     align-items: center
-    border-bottom-color: $tabs-border-bottom-color
-    border-bottom-style: $tabs-border-bottom-style
-    border-bottom-width: $tabs-border-bottom-width
-    color: $tabs-link-color
+    border-bottom-color: var(--tabs-border-bottom-color)
+    border-bottom-style: var(--tabs-border-bottom-style)
+    border-bottom-width: var(--tabs-border-bottom-width)
+    color: var(--tabs-link-color)
     display: flex
     justify-content: center
-    margin-bottom: -#{$tabs-border-bottom-width}
-    padding: $tabs-link-padding
+    margin-bottom: calc(-1 * #{var(--tabs-border-bottom-width)})
+    padding: var(--tabs-link-padding)
     vertical-align: top
     &:hover
-      border-bottom-color: $tabs-link-hover-border-bottom-color
-      color: $tabs-link-hover-color
+      border-bottom-color: var(--tabs-link-hover-border-bottom-color)
+      color: var(--tabs-link-hover-color)
   li
     display: block
     &.is-active
       a
-        border-bottom-color: $tabs-link-active-border-bottom-color
-        color: $tabs-link-active-color
+        border-bottom-color: var(--tabs-link-active-border-bottom-color)
+        color: var(--tabs-link-active-color)
   ul
     align-items: center
-    border-bottom-color: $tabs-border-bottom-color
-    border-bottom-style: $tabs-border-bottom-style
-    border-bottom-width: $tabs-border-bottom-width
+    border-bottom-color: var(--tabs-border-bottom-color)
+    border-bottom-style: var(--tabs-border-bottom-style)
+    border-bottom-width: var(--tabs-border-bottom-width)
     display: flex
     flex-grow: 1
     flex-shrink: 0
@@ -93,55 +119,55 @@ $tabs-toggle-link-active-color: $link-invert !default
     a
       border: 1px solid transparent
       +ltr
-        border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
+        border-radius: var(--tabs-boxed-link-radius) var(--tabs-boxed-link-radius) 0 0
       +rtl
-        border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius
+        border-radius: 0 0 var(--tabs-boxed-link-radius) var(--tabs-boxed-link-radius)
       &:hover
-        background-color: $tabs-boxed-link-hover-background-color
-        border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
+        background-color: var(--tabs-boxed-link-hover-background-color)
+        border-bottom-color: var(--tabs-boxed-link-hover-border-bottom-color)
     li
       &.is-active
         a
-          background-color: $tabs-boxed-link-active-background-color
-          border-color: $tabs-boxed-link-active-border-color
-          border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important
+          background-color: var(--tabs-boxed-link-active-background-color)
+          border-color: var(--tabs-boxed-link-active-border-color)
+          border-bottom-color: var(--tabs-boxed-link-active-border-bottom-color) !important
   &.is-fullwidth
     li
       flex-grow: 1
       flex-shrink: 0
   &.is-toggle
     a
-      border-color: $tabs-toggle-link-border-color
-      border-style: $tabs-toggle-link-border-style
-      border-width: $tabs-toggle-link-border-width
+      border-color: var(--tabs-toggle-link-border-color)
+      border-style: var(--tabs-toggle-link-border-style)
+      border-width: var(--tabs-toggle-link-border-width)
       margin-bottom: 0
       position: relative
       &:hover
-        background-color: $tabs-toggle-link-hover-background-color
-        border-color: $tabs-toggle-link-hover-border-color
+        background-color: var(--tabs-toggle-link-hover-background-color)
+        border-color: var(--tabs-toggle-link-hover-border-color)
         z-index: 2
     li
       & + li
-        +ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
+        +ltr-property("margin", calc(-1 * #{var(--tabs-toggle-link-border-width)}), false)
       &:first-child a
         +ltr
-          border-top-left-radius: $tabs-toggle-link-radius
-          border-bottom-left-radius: $tabs-toggle-link-radius
+          border-top-left-radius: var(--tabs-toggle-link-radius)
+          border-bottom-left-radius: var(--tabs-toggle-link-radius)
         +rtl
-          border-top-right-radius: $tabs-toggle-link-radius
-          border-bottom-right-radius: $tabs-toggle-link-radius
+          border-top-right-radius: var(--tabs-toggle-link-radius)
+          border-bottom-right-radius: var(--tabs-toggle-link-radius)
       &:last-child a
         +ltr
-          border-top-right-radius: $tabs-toggle-link-radius
-          border-bottom-right-radius: $tabs-toggle-link-radius
+          border-top-right-radius: var(--tabs-toggle-link-radius)
+          border-bottom-right-radius: var(--tabs-toggle-link-radius)
         +rtl
-          border-top-left-radius: $tabs-toggle-link-radius
-          border-bottom-left-radius: $tabs-toggle-link-radius
+          border-top-left-radius: var(--tabs-toggle-link-radius)
+          border-bottom-left-radius: var(--tabs-toggle-link-radius)
       &.is-active
         a
-          background-color: $tabs-toggle-link-active-background-color
-          border-color: $tabs-toggle-link-active-border-color
-          color: $tabs-toggle-link-active-color
+          background-color: var(--tabs-toggle-link-active-background-color)
+          border-color: var(--tabs-toggle-link-active-border-color)
+          color: var(--tabs-toggle-link-active-color)
           z-index: 1
     ul
       border-bottom: none
@@ -149,26 +175,26 @@ $tabs-toggle-link-active-color: $link-invert !default
       li
         &:first-child a
           +ltr
-            border-bottom-left-radius: $radius-rounded
-            border-top-left-radius: $radius-rounded
+            border-bottom-left-radius: var(--radius-rounded, #{$radius-rounded})
+            border-top-left-radius: var(--radius-rounded, #{$radius-rounded})
             padding-left: 1.25em
           +rtl
-            border-bottom-right-radius: $radius-rounded
-            border-top-right-radius: $radius-rounded
+            border-bottom-right-radius: var(--radius-rounded, #{$radius-rounded})
+            border-top-right-radius: var(--radius-rounded, #{$radius-rounded})
             padding-right: 1.25em
         &:last-child a
           +ltr
-            border-bottom-right-radius: $radius-rounded
-            border-top-right-radius: $radius-rounded
+            border-bottom-right-radius: var(--radius-rounded, #{$radius-rounded})
+            border-top-right-radius: var(--radius-rounded, #{$radius-rounded})
             padding-right: 1.25em
           +rtl
-            border-bottom-left-radius: $radius-rounded
-            border-top-left-radius: $radius-rounded
+            border-bottom-left-radius: var(--radius-rounded, #{$radius-rounded})
+            border-top-left-radius: var(--radius-rounded, #{$radius-rounded})
             padding-left: 1.25em
   // Sizes
   &.is-small
-    font-size: $size-small
+    --tabs-font-size: var(--size-small, #{$size-small})
   &.is-medium
-    font-size: $size-medium
+    --tabs-font-size: var(--size-medium, #{$size-medium})
   &.is-large
-    font-size: $size-large
+    --tabs-font-size: var(--size-large, #{$size-large})

sass/elements/box.sass

@@ -1,24 +1,37 @@
-$box-color: $text !default
-$box-background-color: $scheme-main !default
-$box-radius: $radius-large !default
-$box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
+$box-color: var(--text, #{$text}) !default
+$box-background-color: var(--scheme-main, #{$scheme-main}) !default
+$box-radius: var(--radius-large, #{$radius-large}) !default
+$box-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
+$box-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.02) !default
+$box-shadow: 0 0.5em 1em -0.125em $box-shadow-color, 0 0px 0 1px $box-shadow-color-bis !default
 $box-padding: 1.25rem !default
 
-$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default
-$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default
+$box-link-hover-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
+$box-link-hover-shadow-color-bis: var(--link, #{$link}) !default
+$box-link-hover-shadow: 0 0.5em 1em -0.125em $box-link-hover-shadow-color, 0 0 0 1px $box-link-hover-shadow-color-bis !default
+$box-link-active-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.2) !default
+$box-link-active-shadow-color-bis: var(--link, #{$link}) !default
+$box-link-active-shadow: inset 0 1px 2px $box-link-active-shadow-color, 0 0 0 1px $box-link-active-shadow-color-bis !default
 
 .box
+  --box-background-color: #{$box-background-color}
+  --box-radius: #{$box-radius}
+  --box-shadow: #{$box-shadow}
+  --box-color: #{$box-color}
+  --box-padding: #{$box-padding}
+  --box-link-hover-shadow: #{$box-link-hover-shadow}
+  --box-link-active-shadow: #{$box-link-active-shadow}
   @extend %block
-  background-color: $box-background-color
-  border-radius: $box-radius
-  box-shadow: $box-shadow
-  color: $box-color
+  background-color: var(--box-background-color)
+  border-radius: var(--box-radius)
+  box-shadow: var(--box-shadow)
+  color: var(--box-color)
   display: block
-  padding: $box-padding
+  padding: var(--box-padding)
 
 a.box
   &:hover,
   &:focus
-    box-shadow: $box-link-hover-shadow
+    box-shadow: var(--box-link-hover-shadow)
   &:active
-    box-shadow: $box-link-active-shadow
+    box-shadow: var(--box-link-active-shadow)

sass/elements/button.sass

@@ -1,28 +1,29 @@
-$button-color: $text-strong !default
-$button-background-color: $scheme-main !default
+$button-color: var(--text-strong, #{$text-strong}) !default
+$button-background-color: var(--scheme-main, #{$scheme-main}) !default
 $button-family: false !default
 
-$button-border-color: $border !default
-$button-border-width: $control-border-width !default
+$button-border-color: var(--border, #{$border}) !default
+$button-border-width: var(--control-border-width, #{$control-border-width}) !default
 
 $button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
 $button-padding-horizontal: 1em !default
 
-$button-hover-color: $link-hover !default
-$button-hover-border-color: $link-hover-border !default
+$button-hover-color: var(--link-hover, #{$link-hover}) !default
+$button-hover-border-color: var(--link-hover-border, #{$link-hover-border}) !default
 
-$button-focus-color: $link-focus !default
-$button-focus-border-color: $link-focus-border !default
+$button-focus-color: var(--link-focus, #{$link-focus}) !default
+$button-focus-border-color: var(--link-focus-border, #{$link-focus-border}) !default
 $button-focus-box-shadow-size: 0 0 0 0.125em !default
-$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
+$button-focus-box-shadow-color-hsla: hsla(var(--link-h), var(--link-s), var(--link-l), 0.25) !default
+$button-focus-box-shadow-color: var(--button-focus-box-shadow-color-hsla, #{bulmaRgba($link, 0.25)}) !default
 
-$button-active-color: $link-active !default
-$button-active-border-color: $link-active-border !default
+$button-active-color: var(--link-active, #{$link-active}) !default
+$button-active-border-color: var(--link-active-border, #{$link-active-border}) !default
 
-$button-text-color: $text !default
+$button-text-color: var(--text, #{$text}) !default
 $button-text-decoration: underline !default
 $button-text-hover-background-color: $background !default
-$button-text-hover-color: $text-strong !default
+$button-text-hover-color: var(--text-strong, #{$text-strong}) !default
 
 $button-ghost-background: none !default
 $button-ghost-border-color: transparent !default
@@ -36,38 +37,66 @@ $button-disabled-border-color: $border !default
 $button-disabled-shadow: none !default
 $button-disabled-opacity: 0.5 !default
 
-$button-static-color: $text-light !default
-$button-static-background-color: $scheme-main-ter !default
-$button-static-border-color: $border !default
+$button-static-color: var(--text-light, #{$text-light}) !default
+$button-static-background-color: var(--scheme-main-ter, #{$scheme-main-ter}) !default
+$button-static-border-color: var(--border, #{$border}) !default
 
 $button-colors: $colors !default
 
 // The button sizes use mixins so they can be used at different breakpoints
 =button-small
-  border-radius: $radius-small
-  font-size: $size-small
+  border-radius: var(--radius-small, #{$radius-small})
+  --button-font-size: var(--size-small, #{$size-small})
 =button-normal
-  font-size: $size-normal
+  --button-font-size: var(--size-normal, #{$size-normal})
 =button-medium
-  font-size: $size-medium
+  --button-font-size: var(--size-medium, #{$size-medium})
 =button-large
-  font-size: $size-large
+  --button-font-size: var(--size-large, #{$size-large})
 
 .button
+  --button-background-color: #{$button-background-color}
+  --button-border-color: #{$button-border-color}
+  --button-border-width: #{$button-border-width}
+  --button-color: #{$button-color}
+  --button-family: #{$button-family}
+  --button-padding-vertical: #{$button-padding-vertical}
+  --button-padding-horizontal: #{$button-padding-horizontal}
+  --button-hover-border-color: #{$button-hover-border-color}
+  --button-hover-color: #{$button-hover-color}
+  --button-focus-border-color: #{$button-focus-border-color}
+  --button-focus-box-shadow-size: #{$button-focus-box-shadow-size}
+  --button-focus-box-shadow-color-hsla: #{$button-focus-box-shadow-color-hsla}
+  --button-focus-box-shadow-color: #{$button-focus-box-shadow-color}
+  --button-focus-color: #{$button-focus-color}
+  --button-active-border-color: #{$button-active-border-color}
+  --button-active-color: #{$button-active-color}
+  --button-text-color: #{$button-text-color}
+  --button-text-decoration: #{$button-text-decoration}
+  --button-text-hover-background-color: #{$button-text-hover-background-color}
+  --button-text-hover-color: #{$button-text-hover-color}
+  --button-disabled-background-color: #{$button-disabled-background-color}
+  --button-disabled-border-color: #{$button-disabled-border-color}
+  --button-disabled-shadow: #{$button-disabled-shadow}
+  --button-disabled-opacity: #{$button-disabled-opacity}
+  --button-static-background-color: #{$button-static-background-color}
+  --button-static-border-color: #{$button-static-border-color}
+  --button-static-color: #{$button-static-color}
   @extend %control
   @extend %unselectable
-  background-color: $button-background-color
-  border-color: $button-border-color
-  border-width: $button-border-width
-  color: $button-color
+  background-color: var(--button-background-color)
+  border-color: var(--button-border-color)
+  border-width: var(--button-border-width)
+  color: var(--button-color)
   cursor: pointer
   @if $button-family
-    font-family: $button-family
+    font-family: var(--button-family)
+  font-size: var(--button-font-size)
   justify-content: center
-  padding-bottom: $button-padding-vertical
-  padding-left: $button-padding-horizontal
-  padding-right: $button-padding-horizontal
-  padding-top: $button-padding-vertical
+  padding-bottom: var(--button-padding-vertical)
+  padding-left: var(--button-padding-horizontal)
+  padding-right: var(--button-padding-horizontal)
+  padding-top: var(--button-padding-vertical)
   text-align: center
   white-space: nowrap
   strong
@@ -80,45 +109,45 @@ $button-colors: $colors !default
       height: 1.5em
       width: 1.5em
     &:first-child:not(:last-child)
-      +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false)
-      +ltr-property("margin", $button-padding-horizontal / 4)
+      +ltr-property("margin", calc(-1 / 2 * #{var(--button-padding-horizontal, #{$button-padding-horizontal})} - #{var(--button-border-width, #{$button-border-width})}), false)
+      +ltr-property("margin", calc(#{var(--button-padding-horizontal, #{$button-padding-horizontal})} / 4))
     &:last-child:not(:first-child)
-      +ltr-property("margin", $button-padding-horizontal / 4, false)
-      +ltr-property("margin", calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}))
+      +ltr-property("margin", calc(#{var(--button-padding-horizontal, #{$button-padding-horizontal})} / 4), false)
+      +ltr-property("margin", calc(-1 / 2 * #{var(--button-padding-horizontal, #{$button-padding-horizontal})} - #{var(--button-border-width, #{$button-border-width})}))
     &:first-child:last-child
-      margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
-      margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
+      margin-left: calc(-1 / 2 * #{var(--button-padding-horizontal, #{$button-padding-horizontal})} - #{var(--button-border-width, #{$button-border-width})})
+      margin-right: calc(-1 / 2 * #{var(--button-padding-horizontal, #{$button-padding-horizontal})} - #{var(--button-border-width, #{$button-border-width})})
   // States
   &:hover,
   &.is-hovered
-    border-color: $button-hover-border-color
-    color: $button-hover-color
+    border-color: var(--button-hover-border-color)
+    color: var(--button-hover-color)
   &:focus,
   &.is-focused
-    border-color: $button-focus-border-color
-    color: $button-focus-color
+    border-color: var(--button-focus-border-color)
+    color: var(--button-focus-color)
     &:not(:active)
-      box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
+      box-shadow: var(--button-focus-box-shadow-size) var(--button-focus-box-shadow-color, #{$button-focus-box-shadow-color})
   &:active,
   &.is-active
-    border-color: $button-active-border-color
-    color: $button-active-color
+    border-color: var(--button-active-border-color)
+    color: var(--button-active-color)
   // Colors
   &.is-text
     background-color: transparent
     border-color: transparent
-    color: $button-text-color
-    text-decoration: $button-text-decoration
+    color: var(--button-text-color)
+    text-decoration: var(--button-text-decoration)
     &:hover,
     &.is-hovered,
     &:focus,
     &.is-focused
-      background-color: $button-text-hover-background-color
-      color: $button-text-hover-color
+      background-color: var(--button-text-hover-background-color)
+      color: var(--button-text-hover-color)
     &:active,
     &.is-active
       background-color: bulmaDarken($button-text-hover-background-color, 5%)
-      color: $button-text-hover-color
+      color: var(--button-text-hover-color)
     &[disabled],
     fieldset[disabled] &
       background-color: transparent
@@ -137,111 +166,125 @@ $button-colors: $colors !default
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
-      background-color: $color
+      --hover-background-l-delta: -2.5%
+      --hover-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--hover-background-l-delta)})
+      --hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--hover-background-#{$name}-l), var(--#{$name}-a))
+      --focus-box-shadow-color-hsla: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--#{$name}-l), 0.25)
+      --focus-box-shadow-color: var(--focus-box-shadow-color-hsla, #{bulmaRgba($color, 0.25)})
+      --active-background-l-delta: -5%
+      --active-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--active-background-l-delta)})
+      --active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--active-background-#{$name}-l), var(--#{$name}-a))
+      background-color: var(--#{$name}, #{$color})
       border-color: transparent
-      color: $color-invert
+      color: var(--#{$name}-invert, #{$color-invert})
       &:hover,
       &.is-hovered
-        background-color: bulmaDarken($color, 2.5%)
+        background-color: var(--hover-background-color, #{bulmaDarken($color, 2.5%)})
         border-color: transparent
-        color: $color-invert
+        color: var(--#{$name}-invert, #{$color-invert})
       &:focus,
       &.is-focused
         border-color: transparent
-        color: $color-invert
+        color: var(--#{$name}-invert, #{$color-invert})
         &:not(:active)
-          box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25)
+          box-shadow: var(--button-focus-box-shadow-size) var(--focus-box-shadow-color)
       &:active,
       &.is-active
-        background-color: bulmaDarken($color, 5%)
+        background-color: var(--active-background-color, #{bulmaDarken($color, 5%)})
         border-color: transparent
-        color: $color-invert
+        color: var(--#{$name}-invert, #{$color-invert})
       &[disabled],
       fieldset[disabled] &
-        background-color: $color
+        background-color: var(--#{$name}, #{$color})
         border-color: transparent
         box-shadow: none
       &.is-inverted
-        background-color: $color-invert
-        color: $color
+        background-color: var(--#{$name}-invert, #{$color-invert})
+        color: var(--#{$name}, #{$color})
         &:hover,
         &.is-hovered
           background-color: bulmaDarken($color-invert, 5%)
         &[disabled],
         fieldset[disabled] &
-          background-color: $color-invert
+          background-color: var(--#{$name}-invert, #{$color-invert})
           border-color: transparent
           box-shadow: none
-          color: $color
+          color: var(--#{$name}, #{$color})
       &.is-loading
         &::after
-          border-color: transparent transparent $color-invert $color-invert !important
+          border-color: transparent transparent var(--#{$name}-invert, #{$color-invert}) var(--#{$name}-invert, #{$color-invert}) !important
       &.is-outlined
         background-color: transparent
-        border-color: $color
-        color: $color
+        border-color: var(--#{$name}, #{$color})
+        color: var(--#{$name}, #{$color})
         &:hover,
         &.is-hovered,
         &:focus,
         &.is-focused
-          background-color: $color
-          border-color: $color
-          color: $color-invert
+          background-color: var(--#{$name}, #{$color})
+          border-color: var(--#{$name}, #{$color})
+          color: var(--#{$name}-invert, #{$color-invert})
         &.is-loading
           &::after
-            border-color: transparent transparent $color $color !important
+            border-color: transparent transparent var(--#{$name}, #{$color}) var(--#{$name}, #{$color}) !important
           &:hover,
           &.is-hovered,
           &:focus,
           &.is-focused
             &::after
-              border-color: transparent transparent $color-invert $color-invert !important
+              border-color: transparent transparent var(--#{$name}-invert, #{$color-invert}) var(--#{$name}-invert, #{$color-invert}) !important
         &[disabled],
         fieldset[disabled] &
           background-color: transparent
-          border-color: $color
+          border-color: var(--#{$name}, #{$color})
           box-shadow: none
-          color: $color
+          color: var(--#{$name}, #{$color})
       &.is-inverted.is-outlined
         background-color: transparent
-        border-color: $color-invert
-        color: $color-invert
+        border-color: var(--#{$name}-invert, #{$color-invert})
+        color: var(--#{$name}-invert, #{$color-invert})
         &:hover,
         &.is-hovered,
         &:focus,
         &.is-focused
-          background-color: $color-invert
-          color: $color
+          background-color: var(--#{$name}-invert, #{$color-invert})
+          color: var(--#{$name}, #{$color})
         &.is-loading
           &:hover,
           &.is-hovered,
           &:focus,
           &.is-focused
             &::after
-              border-color: transparent transparent $color $color !important
+              border-color: transparent transparent var(--#{$name}, #{$color}) var(--#{$name}, #{$color}) !important
         &[disabled],
         fieldset[disabled] &
           background-color: transparent
-          border-color: $color-invert
+          border-color: var(--#{$name}-invert, #{$color-invert})
           box-shadow: none
-          color: $color-invert
+          color: var(--#{$name}-invert, #{$color-invert})
       // If light and dark colors are provided
       @if length($pair) >= 4
         $color-light: nth($pair, 3)
         $color-dark: nth($pair, 4)
         &.is-light
-          background-color: $color-light
-          color: $color-dark
+          --hover-background-l-delta: -2.5%
+          --hover-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--hover-background-l-delta)})
+          --hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--hover-background-#{$name}-l), var(--#{$name}-a))
+          --active-background-l-delta: -5%
+          --active-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--active-background-l-delta)})
+          --active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--active-background-#{$name}-l), var(--#{$name}-a))
+          background-color: var(--#{$name}-light, #{$color-light})
+          color: var(--#{$name}-dark, #{$color-dark})
           &:hover,
           &.is-hovered
-            background-color: bulmaDarken($color-light, 2.5%)
+            background-color: var(--hover-background-color, #{bulmaDarken($color-light, 2.5%)})
             border-color: transparent
-            color: $color-dark
+            color: var(--#{$name}-dark, #{$color-dark})
           &:active,
           &.is-active
-            background-color: bulmaDarken($color-light, 5%)
+            background-color: var(--active-background-color, #{bulmaDarken($color-light, 5%)})
             border-color: transparent
-            color: $color-dark
+            color: var(--#{$name}-dark, #{$color-dark})
   // Sizes
   &.is-small
     +button-small
@@ -254,10 +297,10 @@ $button-colors: $colors !default
   // Modifiers
   &[disabled],
   fieldset[disabled] &
-    background-color: $button-disabled-background-color
-    border-color: $button-disabled-border-color
-    box-shadow: $button-disabled-shadow
-    opacity: $button-disabled-opacity
+    background-color: var(--button-disabled-background-color)
+    border-color: var(--button-disabled-border-color)
+    box-shadow: var(--button-disabled-shadow)
+    opacity: var(--button-disabled-opacity)
   &.is-fullwidth
     display: flex
     width: 100%
@@ -269,15 +312,15 @@ $button-colors: $colors !default
       +center(1em)
       position: absolute !important
   &.is-static
-    background-color: $button-static-background-color
-    border-color: $button-static-border-color
-    color: $button-static-color
+    background-color: var(--button-static-background-color)
+    border-color: var(--button-static-border-color)
+    color: var(--button-static-color)
     box-shadow: none
     pointer-events: none
   &.is-rounded
-    border-radius: $radius-rounded
-    padding-left: calc(#{$button-padding-horizontal} + 0.25em)
-    padding-right: calc(#{$button-padding-horizontal} + 0.25em)
+    border-radius: var(--radius-rounded, #{$radius-rounded})
+    padding-left: calc(#{var(--button-padding-horizontal, #{$button-padding-horizontal})} + 0.25em)
+    padding-right: calc(#{var(--button-padding-horizontal, #{$button-padding-horizontal})} + 0.25em)
 
 .buttons
   align-items: center

sass/elements/content.sass

@@ -1,24 +1,43 @@
-$content-heading-color: $text-strong !default
-$content-heading-weight: $weight-semibold !default
+$content-font-size: var(--size-normal, #{$size-normal}) !default
+
+$content-heading-color: var(--text-strong, #{$text-strong}) !default
+$content-heading-weight: var(--weight-semibold, #{$weight-semibold}) !default
 $content-heading-line-height: 1.125 !default
 
-$content-blockquote-background-color: $background !default
-$content-blockquote-border-left: 5px solid $border !default
+$content-blockquote-background-color: var(--background, #{$background}) !default
+$content-blockquote-border-left: 5px solid var(--border, #{$border}) !default
 $content-blockquote-padding: 1.25em 1.5em !default
 
 $content-pre-padding: 1.25em 1.5em !default
 
-$content-table-cell-border: 1px solid $border !default
+$content-table-cell-border: 1px solid var(--border, #{$border}) !default
 $content-table-cell-border-width: 0 0 1px !default
 $content-table-cell-padding: 0.5em 0.75em !default
-$content-table-cell-heading-color: $text-strong !default
+$content-table-cell-heading-color: var(--text-strong, #{$text-strong}) !default
 $content-table-head-cell-border-width: 0 0 2px !default
-$content-table-head-cell-color: $text-strong !default
+$content-table-head-cell-color: var(--text-strong, #{$text-strong}) !default
 $content-table-foot-cell-border-width: 2px 0 0 !default
-$content-table-foot-cell-color: $text-strong !default
+$content-table-foot-cell-color: var(--text-strong, #{$text-strong}) !default
 
 .content
+  --content-font-size: #{$content-font-size}
+  --content-heading-color: #{$content-heading-color}
+  --content-heading-weight: #{$content-heading-weight}
+  --content-heading-line-height: #{$content-heading-line-height}
+  --content-blockquote-background-color: #{$content-blockquote-background-color}
+  --content-blockquote-border-left: #{$content-blockquote-border-left}
+  --content-blockquote-padding: #{$content-blockquote-padding}
+  --content-pre-padding: #{$content-pre-padding}
+  --content-table-cell-border: #{$content-table-cell-border}
+  --content-table-cell-border-width: #{$content-table-cell-border-width}
+  --content-table-cell-padding: #{$content-table-cell-padding}
+  --content-table-cell-heading-color: #{$content-table-cell-heading-color}
+  --content-table-head-cell-border-width: #{$content-table-head-cell-border-width}
+  --content-table-head-cell-color: #{$content-table-head-cell-color}
+  --content-table-foot-cell-border-width: #{$content-table-foot-cell-border-width}
+  --content-table-foot-cell-color: #{$content-table-foot-cell-color}
   @extend %block
+  font-size: var(--content-font-size)
   // Inline
   li + li
     margin-top: 0.25em
@@ -38,9 +57,9 @@ $content-table-foot-cell-color: $text-strong !default
   h4,
   h5,
   h6
-    color: $content-heading-color
-    font-weight: $content-heading-weight
-    line-height: $content-heading-line-height
+    color: var(--content-heading-color)
+    font-weight: var(--content-heading-weight)
+    line-height: var(--content-heading-line-height)
   h1
     font-size: 2em
     margin-bottom: 0.5em
@@ -66,9 +85,9 @@ $content-table-foot-cell-color: $text-strong !default
     font-size: 1em
     margin-bottom: 1em
   blockquote
-    background-color: $content-blockquote-background-color
-    +ltr-property("border", $content-blockquote-border-left, false)
-    padding: $content-blockquote-padding
+    background-color: var(--content-blockquote-background-color)
+    +ltr-property("border", var(--content-blockquote-border-left), false)
+    padding: var(--content-blockquote-padding)
   ol
     list-style-position: outside
     +ltr-property("margin", 2em, false)
@@ -109,7 +128,7 @@ $content-table-foot-cell-color: $text-strong !default
   pre
     +overflow-touch
     overflow-x: auto
-    padding: $content-pre-padding
+    padding: var(--content-pre-padding)
     white-space: pre
     word-wrap: normal
   sup,
@@ -119,24 +138,24 @@ $content-table-foot-cell-color: $text-strong !default
     width: 100%
     td,
     th
-      border: $content-table-cell-border
-      border-width: $content-table-cell-border-width
-      padding: $content-table-cell-padding
+      border: var(--content-table-cell-border)
+      border-width: var(--content-table-cell-border-width)
+      padding: var(--content-table-cell-padding)
       vertical-align: top
     th
-      color: $content-table-cell-heading-color
+      color: var(--content-table-cell-heading-color)
       &:not([align])
         text-align: inherit
     thead
       td,
       th
-        border-width: $content-table-head-cell-border-width
-        color: $content-table-head-cell-color
+        border-width: var(--content-table-head-cell-border-width)
+        color: var(--content-table-head-cell-color)
     tfoot
       td,
       th
-        border-width: $content-table-foot-cell-border-width
-        color: $content-table-foot-cell-color
+        border-width: var(--content-table-foot-cell-border-width)
+        color: var(--content-table-foot-cell-color)
     tbody
       tr
         &:last-child
@@ -148,8 +167,8 @@ $content-table-foot-cell-color: $text-strong !default
       margin-top: 0
   // Sizes
   &.is-small
-    font-size: $size-small
+    --content-font-size: var(--size-small, #{$size-small})
   &.is-medium
-    font-size: $size-medium
+    --content-font-size: var(--size-medium, #{$size-medium})
   &.is-large
-    font-size: $size-large
+    --content-font-size: var(--size-large, #{$size-large})

sass/elements/icon.sass

@@ -4,18 +4,19 @@ $icon-dimensions-medium: 2rem !default
 $icon-dimensions-large: 3rem !default
 
 .icon
+  --icon-dimensions: #{$icon-dimensions}
+  --icon-dimensions-small: #{$icon-dimensions-small}
+  --icon-dimensions-medium: #{$icon-dimensions-medium}
+  --icon-dimensions-large: #{$icon-dimensions-large}
   align-items: center
   display: inline-flex
   justify-content: center
-  height: $icon-dimensions
-  width: $icon-dimensions
+  height: var(--icon-dimensions)
+  width: var(--icon-dimensions)
   // Sizes
   &.is-small
-    height: $icon-dimensions-small
-    width: $icon-dimensions-small
+    --icon-dimensions: var(--icon-dimensions-small)
   &.is-medium
-    height: $icon-dimensions-medium
-    width: $icon-dimensions-medium
+    --icon-dimensions: var(--icon-dimensions-medium)
   &.is-large
-    height: $icon-dimensions-large
-    width: $icon-dimensions-large
+    --icon-dimensions: var(--icon-dimensions-large)

sass/elements/image.sass

@@ -8,7 +8,7 @@ $dimensions: 16 24 32 48 64 96 128 !default
     height: auto
     width: 100%
     &.is-rounded
-      border-radius: $radius-rounded
+      border-radius: var(--radius-rounded, #{$radius-rounded})
   &.is-fullwidth
     width: 100%
   // Ratio

sass/elements/notification.sass

@@ -1,6 +1,6 @@
-$notification-background-color: $background !default
-$notification-code-background-color: $scheme-main !default
-$notification-radius: $radius !default
+$notification-background-color: var(--background, #{$background}) !default
+$notification-code-background-color: var(--scheme-main, #{$scheme-main}) !default
+$notification-radius: var(--radius, #{$radius}) !default
 $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
 $notification-padding-ltr: 1.25rem 2.5rem 1.25rem 1.5rem !default
 $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
@@ -8,14 +8,20 @@ $notification-padding-rtl: 1.25rem 1.5rem 1.25rem 2.5rem !default
 $notification-colors: $colors !default
 
 .notification
+  --notification-background-color: #{$notification-background-color}
+  --notification-radius: #{$notification-radius}
+  --notification-padding-ltr: #{$notification-padding-ltr}
+  --notification-padding-rtl: #{$notification-padding-rtl}
+  --notification-code-background-color: #{$notification-code-background-color}
   @extend %block
-  background-color: $notification-background-color
-  border-radius: $notification-radius
+  background-color: var(--notification-background-color)
+  border-radius: var(--notification-radius)
+  color: var(--notification-color)
   position: relative
   +ltr
-    padding: $notification-padding-ltr
+    padding: var(--notification-padding-ltr)
   +rtl
-    padding: $notification-padding-rtl
+    padding: var(--notification-padding-rtl)
   a:not(.button):not(.dropdown-item)
     color: currentColor
     text-decoration: underline
@@ -23,7 +29,7 @@ $notification-colors: $colors !default
     color: currentColor
   code,
   pre
-    background: $notification-code-background-color
+    background: var(--notification-code-background-color)
   pre code
     background: transparent
   & > .delete
@@ -39,12 +45,12 @@ $notification-colors: $colors !default
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
-      background-color: $color
-      color: $color-invert
+      --notification-background-color: var(--#{$name}, #{$color})
+      --notification-color: var(--#{$name}-invert, #{$color-invert})
       // If light and dark colors are provided
       @if length($pair) >= 4
         $color-light: nth($pair, 3)
         $color-dark: nth($pair, 4)
         &.is-light
-          background-color: $color-light
-          color: $color-dark
+          --notification-background-color: var(--#{$name}-light, #{$color-light})
+          --notification-color: var(--#{$name}-dark, #{$color-dark})

sass/elements/other.sass

@@ -12,8 +12,9 @@
   text-transform: uppercase
 
 .highlight
+  --highlight-font-weight: var(--weight-normal, #{$weight-normal})
   @extend %block
-  font-weight: $weight-normal
+  font-weight: var(--highlight-font-weight)
   max-width: 100%
   overflow: hidden
   padding: 0
@@ -25,11 +26,14 @@
   @extend %loader
 
 .number
+  --number-background: var(--background, #{$background})
+  --number-radius-rounded: var(--radius-rounded, #{$radius-rounded})
+  --number-font-size: var(--size-medium, #{$size-medium})
   align-items: center
-  background-color: $background
-  border-radius: $radius-rounded
+  background-color: var(--number-background)
+  border-radius: var(--number-radius-rounded)
   display: inline-flex
-  font-size: $size-medium
+  font-size: var(--number-font-size)
   height: 2em
   justify-content: center
   margin-right: 1.5rem

sass/elements/progress.sass

@@ -1,51 +1,58 @@
-$progress-bar-background-color: $border-light !default
-$progress-value-background-color: $text !default
-$progress-border-radius: $radius-rounded !default
+$progress-height: var(--size-normal, #{$size-normal}) !default
+
+$progress-bar-background-color: var(--border-light, #{$border-light}) !default
+$progress-value-background-color: var(--text, #{$text}) !default
+$progress-border-radius: var(--radius-rounded, #{$radius-rounded}) !default
 
 $progress-indeterminate-duration: 1.5s !default
 
 $progress-colors: $colors !default
 
 .progress
+  --progress-border-radius: #{$progress-border-radius}
+  --progress-bar-background-color: #{$progress-bar-background-color}
+  --progress-height: #{$progress-height}
+  --progress-value-background-color: #{$progress-value-background-color}
+  --progress-indeterminate-duration: #{$progress-indeterminate-duration}
   @extend %block
   -moz-appearance: none
   -webkit-appearance: none
   border: none
-  border-radius: $progress-border-radius
+  border-radius: var(--progress-border-radius)
   display: block
-  height: $size-normal
+  height: var(--progress-height)
   overflow: hidden
   padding: 0
   width: 100%
   &::-webkit-progress-bar
-    background-color: $progress-bar-background-color
+    background-color: var(--progress-bar-background-color)
   &::-webkit-progress-value
-    background-color: $progress-value-background-color
+    background-color: var(--progress-value-background-color)
   &::-moz-progress-bar
-    background-color: $progress-value-background-color
+    background-color: var(--progress-value-background-color)
   &::-ms-fill
-    background-color: $progress-value-background-color
+    background-color: var(--progress-value-background-color)
     border: none
   // Colors
   @each $name, $pair in $progress-colors
     $color: nth($pair, 1)
     &.is-#{$name}
       &::-webkit-progress-value
-        background-color: $color
+        --progress-value-background-color: var(--#{$name}, #{$color})
       &::-moz-progress-bar
-        background-color: $color
+        --progress-value-background-color: var(--#{$name}, #{$color})
       &::-ms-fill
-        background-color: $color
+        --progress-value-background-color: var(--#{$name}, #{$color})
       &:indeterminate
-        background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)
+        background-image: linear-gradient(to right, var(--#{$name}, #{$color}) 30%, var(--progress-bar-background-color) 30%)
 
   &:indeterminate
-    animation-duration: $progress-indeterminate-duration
+    animation-duration: var(--progress-indeterminate-duration)
     animation-iteration-count: infinite
     animation-name: moveIndeterminate
     animation-timing-function: linear
-    background-color: $progress-bar-background-color
-    background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
+    background-color: var(--progress-bar-background-color)
+    background-image: linear-gradient(to right, var(--text, #{$text}) 30%, var(--progress-bar-background-color) 30%)
     background-position: top left
     background-repeat: no-repeat
     background-size: 150% 150%
@@ -58,11 +65,11 @@ $progress-colors: $colors !default
 
   // Sizes
   &.is-small
-    height: $size-small
+    --progress-height: var(--size-small, #{$size-small})
   &.is-medium
-    height: $size-medium
+    --progress-height: var(--size-medium, #{$size-medium})
   &.is-large
-    height: $size-large
+    --progress-height: var(--size-large, #{$size-large})
 
 @keyframes moveIndeterminate
   from

sass/elements/table.sass

@@ -1,89 +1,107 @@
-$table-color: $text-strong !default
-$table-background-color: $scheme-main !default
+$table-color: var(--text-strong, #{$text-strong}) !default
+$table-background-color: var(--scheme-main, #{$scheme-main}) !default
 
-$table-cell-border: 1px solid $border !default
+$table-cell-border: 1px solid var(--border, #{$border}) !default
 $table-cell-border-width: 0 0 1px !default
 $table-cell-padding: 0.5em 0.75em !default
-$table-cell-heading-color: $text-strong !default
+$table-cell-heading-color: var(--text-strong, #{$text-strong}) !default
 
 $table-head-cell-border-width: 0 0 2px !default
-$table-head-cell-color: $text-strong !default
+$table-head-cell-color: var(--text-strong, #{$text-strong}) !default
 $table-foot-cell-border-width: 2px 0 0 !default
-$table-foot-cell-color: $text-strong !default
+$table-foot-cell-color: var(--text-strong, #{$text-strong}) !default
 
 $table-head-background-color: transparent !default
 $table-body-background-color: transparent !default
 $table-foot-background-color: transparent !default
 
-$table-row-hover-background-color: $scheme-main-bis !default
+$table-row-hover-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default
 
-$table-row-active-background-color: $primary !default
-$table-row-active-color: $primary-invert !default
+$table-row-active-background-color: var(--primary, #{$primary}) !default
+$table-row-active-color: var(--primary-invert, #{$primary-invert}) !default
 
-$table-striped-row-even-background-color: $scheme-main-bis !default
-$table-striped-row-even-hover-background-color: $scheme-main-ter !default
+$table-striped-row-even-background-color: var(--scheme-main-bis, #{$scheme-main-bis}) !default
+$table-striped-row-even-hover-background-color: var(--scheme-main-ter, #{$scheme-main-ter}) !default
 
 $table-colors: $colors !default
 
 .table
+  --table-body-background-color: #{$table-body-background-color}
+  --table-color: #{$table-color}
+  --table-cell-border-width: #{$table-cell-border-width}
+  --table-cell-border: #{$table-cell-border}
+  --table-cell-heading-color: #{$table-cell-heading-color}
+  --table-cell-padding: #{$table-cell-padding}
+  --table-foot-background-color: #{$table-foot-background-color}
+  --table-foot-cell-border-width: #{$table-foot-cell-border-width}
+  --table-foot-cell-color: #{$table-foot-cell-color}
+  --table-head-background-color: #{$table-head-background-color}
+  --table-head-cell-border-width: #{$table-head-cell-border-width}
+  --table-head-cell-color: #{$table-head-cell-color}
+  --table-row-active-background-color: #{$table-row-active-background-color}
+  --table-row-active-color: #{$table-row-active-color}
+  --table-row-hover-background-color: #{$table-row-hover-background-color}
+  --table-row-hover-background-color: #{$table-row-hover-background-color}
+  --table-striped-row-even-background-color: #{$table-striped-row-even-background-color}
+  --table-striped-row-even-hover-background-color: #{$table-striped-row-even-hover-background-color}
   @extend %block
-  background-color: $table-background-color
-  color: $table-color
+  background-color: var(--table-body-background-color)
+  color: var(--table-color)
   td,
   th
-    border: $table-cell-border
-    border-width: $table-cell-border-width
-    padding: $table-cell-padding
+    border: var(--table-cell-border)
+    border-width: var(--table-cell-border-width)
+    padding: var(--table-cell-padding)
     vertical-align: top
     // Colors
     @each $name, $pair in $table-colors
       $color: nth($pair, 1)
       $color-invert: nth($pair, 2)
       &.is-#{$name}
-        background-color: $color
-        border-color: $color
-        color: $color-invert
+        background-color: var(--#{$name}, #{$color})
+        border-color: var(--#{$name}, #{$color})
+        color: var(--#{$name}-invert, #{$color-invert})
     // Modifiers
     &.is-narrow
       white-space: nowrap
       width: 1%
     &.is-selected
-      background-color: $table-row-active-background-color
-      color: $table-row-active-color
+      background-color: var(--table-row-active-background-color)
+      color: var(--table-row-active-color)
       a,
       strong
         color: currentColor
     &.is-vcentered
       vertical-align: middle
   th
-    color: $table-cell-heading-color
+    color: var(--table-cell-heading-color)
     &:not([align])
       text-align: inherit
   tr
     &.is-selected
-      background-color: $table-row-active-background-color
-      color: $table-row-active-color
+      background-color: var(--table-row-active-background-color)
+      color: var(--table-row-active-color)
       a,
       strong
         color: currentColor
       td,
       th
-        border-color: $table-row-active-color
+        border-color: var(--table-row-active-color)
         color: currentColor
   thead
-    background-color: $table-head-background-color
+    background-color: var(--table-head-background-color)
     td,
     th
-      border-width: $table-head-cell-border-width
-      color: $table-head-cell-color
+      border-width: var(--table-head-cell-border-width)
+      color: var(--table-head-cell-color)
   tfoot
-    background-color: $table-foot-background-color
+    background-color: var(--table-foot-background-color)
     td,
     th
-      border-width: $table-foot-cell-border-width
-      color: $table-foot-cell-color
+      border-width: var(--table-foot-cell-border-width)
+      color: var(--table-foot-cell-color)
   tbody
-    background-color: $table-body-background-color
+    background-color: var(--table-body-background-color)
     tr
       &:last-child
         td,
@@ -105,14 +123,14 @@ $table-colors: $colors !default
     tbody
       tr:not(.is-selected)
         &:hover
-          background-color: $table-row-hover-background-color
+          background-color: var(--table-row-hover-background-color)
     &.is-striped
       tbody
         tr:not(.is-selected)
           &:hover
-            background-color: $table-row-hover-background-color
+            background-color: var(--table-row-hover-background-color)
             &:nth-child(even)
-              background-color: $table-striped-row-even-hover-background-color
+              background-color: var(--table-striped-row-even-hover-background-color)
   &.is-narrow
     td,
     th
@@ -121,7 +139,7 @@ $table-colors: $colors !default
     tbody
       tr:not(.is-selected)
         &:nth-child(even)
-          background-color: $table-striped-row-even-background-color
+          background-color: var(--table-striped-row-even-background-color)
 
 .table-container
   @extend %block

sass/elements/tag.sass

@@ -1,6 +1,6 @@
 $tag-background-color: $background !default
-$tag-color: $text !default
-$tag-radius: $radius !default
+$tag-color: var(--text, #{$text}) !default
+$tag-radius: var(--radius, #{$radius}) !default
 $tag-delete-margin: 1px !default
 
 $tag-colors: $colors !default
@@ -21,10 +21,10 @@ $tag-colors: $colors !default
   // Sizes
   &.are-medium
     .tag:not(.is-normal):not(.is-large)
-      font-size: $size-normal
+      --tag-font-size: var(--size-normal, #{$size-normal})
   &.are-large
     .tag:not(.is-normal):not(.is-medium)
-      font-size: $size-medium
+      --tag-font-size: var(--size-medium, #{$size-medium})
   &.is-centered
     justify-content: center
     .tag
@@ -57,12 +57,17 @@ $tag-colors: $colors !default
           border-bottom-left-radius: 0
 
 .tag:not(body)
+  --tag-background-color: #{$tag-background-color}
+  --tag-radius: #{$tag-radius}
+  --tag-color: #{$tag-color}
+  --tag-font-size: #{$size-small}
+  --tag-delete-margin: #{$tag-delete-margin}
   align-items: center
-  background-color: $tag-background-color
-  border-radius: $tag-radius
-  color: $tag-color
+  background-color: var(--tag-background-color)
+  border-radius: var(--tag-radius)
+  color: var(--tag-color)
   display: inline-flex
-  font-size: $size-small
+  font-size: var(--tag-font-size)
   height: 2em
   justify-content: center
   line-height: 1.5
@@ -77,22 +82,22 @@ $tag-colors: $colors !default
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
-      background-color: $color
-      color: $color-invert
+      --tag-background-color: var(--#{$name}, #{$color})
+      --tag-color: var(--#{$name}-invert, #{$color-invert})
       // If a light and dark colors are provided
       @if length($pair) > 3
         $color-light: nth($pair, 3)
         $color-dark: nth($pair, 4)
         &.is-light
-          background-color: $color-light
-          color: $color-dark
+          --tag-background-color: var(--#{$name}-light, #{$color-light})
+          --tag-color: var(--#{$name}-dark, #{$color-dark})
   // Sizes
-  &.is-normal
-    font-size: $size-small
+  &.is-small
+    --tag-font-size: var(--size-small, #{$size-small})
   &.is-medium
-    font-size: $size-normal
+    --tag-font-size: var(--size-medium, #{$size-medium})
   &.is-large
-    font-size: $size-medium
+    --tag-font-size: var(--size-large, #{$size-large})
   .icon
     &:first-child:not(:last-child)
       +ltr-property("margin", -0.375em, false)
@@ -105,7 +110,7 @@ $tag-colors: $colors !default
       +ltr-property("margin", -0.375em)
   // Modifiers
   &.is-delete
-    +ltr-property("margin", $tag-delete-margin, false)
+    +ltr-property("margin", var(--tag-delete-margin), false)
     padding: 0
     position: relative
     width: 2em
@@ -127,11 +132,11 @@ $tag-colors: $colors !default
       width: 1px
     &:hover,
     &:focus
-      background-color: darken($tag-background-color, 5%)
+      background-color: bulmaDarken($tag-background-color, 5%)
     &:active
-      background-color: darken($tag-background-color, 10%)
+      background-color: bulmaDarken($tag-background-color, 10%)
   &.is-rounded
-    border-radius: $radius-rounded
+    border-radius: var(--radius-rounded, #{$radius-rounded})
 
 a.tag
   &:hover

sass/elements/title.sass

@@ -1,50 +1,59 @@
-$title-color: $text-strong !default
+$title-color: var(--text-strong, #{$text-strong}) !default
 $title-family: false !default
-$title-size: $size-3 !default
-$title-weight: $weight-semibold !default
+$title-size: var(--size-3, #{$size-3}) !default
+$title-weight: var(--weight-semibold, #{$weight-semibold}) !default
 $title-line-height: 1.125 !default
 $title-strong-color: inherit !default
 $title-strong-weight: inherit !default
 $title-sub-size: 0.75em !default
 $title-sup-size: 0.75em !default
 
-$subtitle-color: $text !default
+$subtitle-color: var(--text, #{$text}) !default
 $subtitle-family: false !default
-$subtitle-size: $size-5 !default
-$subtitle-weight: $weight-normal !default
+$subtitle-size: var(--size-5, #{$size-5}) !default
+$subtitle-weight: var(--weight-normal, #{$weight-normal}) !default
 $subtitle-line-height: 1.25 !default
-$subtitle-strong-color: $text-strong !default
-$subtitle-strong-weight: $weight-semibold !default
+$subtitle-strong-color: var(--text-strong, #{$text-strong}) !default
+$subtitle-strong-weight: var(--weight-semibold, #{$weight-semibold}) !default
 $subtitle-negative-margin: -1.25rem !default
 
 .title,
 .subtitle
+  --title-sub-size: #{$title-sub-size}
+  --title-sup-size: #{$title-sup-size}
   @extend %block
   word-break: break-word
   em,
   span
     font-weight: inherit
   sub
-    font-size: $title-sub-size
+    font-size: var(--title-sub-size)
   sup
-    font-size: $title-sup-size
+    font-size: var(--title-sup-size)
   .tag
     vertical-align: middle
 
 .title
-  color: $title-color
+  --title-color: #{$title-color}
+  --title-font-size: #{$title-size}
+  --title-weight: #{$title-weight}
+  --title-line-height: #{$title-line-height}
+  --title-strong-color: #{$title-strong-color}
+  --title-strong-weight: #{$title-strong-weight}
+  color: var(--title-color)
+  font-size: var(--title-font-size)
+  font-weight: var(--title-weight)
+  line-height: var(--title-line-height)
   @if $title-family
-    font-family: $title-family
-  font-size: $title-size
-  font-weight: $title-weight
-  line-height: $title-line-height
+    --title-family: #{$title-family}
+    font-family: var(--title-family)
   strong
-    color: $title-strong-color
-    font-weight: $title-strong-weight
+    color: var(--title-strong-color)
+    font-weight: var(--title-strong-weight)
   & + .highlight
     margin-top: -0.75rem
   &:not(.is-spaced) + .subtitle
-    margin-top: $subtitle-negative-margin
+    margin-top: var(--subtitle-negative-margin)
   // Sizes
   @each $size in $sizes
     $i: index($sizes, $size)
@@ -52,17 +61,25 @@ $subtitle-negative-margin: -1.25rem !default
       font-size: $size
 
 .subtitle
-  color: $subtitle-color
+  --subtitle-negative-margin: #{$subtitle-negative-margin}
+  --subtitle-color: #{$subtitle-color}
+  --subtitle-font-size: #{$subtitle-size}
+  --subtitle-weight: #{$subtitle-weight}
+  --subtitle-line-height: #{$subtitle-line-height}
+  --subtitle-strong-color: #{$subtitle-strong-color}
+  --subtitle-strong-weight: #{$subtitle-strong-weight}
+  color: var(--subtitle-color)
+  font-size: var(--subtitle-font-size)
+  font-weight: var(--subtitle-weight)
+  line-height: var(--subtitle-line-height)
   @if $subtitle-family
-    font-family: $subtitle-family
-  font-size: $subtitle-size
-  font-weight: $subtitle-weight
-  line-height: $subtitle-line-height
+    --subtitle-family: #{$subtitle-family}
+    font-family: var(--subtitle-family)
   strong
-    color: $subtitle-strong-color
-    font-weight: $subtitle-strong-weight
+    color: var(--subtitle-strong-color)
+    font-weight: var(--subtitle-strong-weight)
   &:not(.is-spaced) + .title
-    margin-top: $subtitle-negative-margin
+    margin-top: var(--subtitle-negative-margin)
   // Sizes
   @each $size in $sizes
     $i: index($sizes, $size)

sass/form/checkbox-radio.sass

@@ -1,4 +1,6 @@
 %checkbox-radio
+  --checkbox-radio-hover-color: #{$input-hover-color}
+  --checkbox-radio-disabled-color: #{$input-disabled-color}
   cursor: pointer
   display: inline-block
   line-height: 1.25
@@ -6,11 +8,11 @@
   input
     cursor: pointer
   &:hover
-    color: $input-hover-color
+    color: var(--checkbox-radio-hover-color)
   &[disabled],
   fieldset[disabled] &,
   input[disabled]
-    color: $input-disabled-color
+    color: var(--checkbox-radio-disabled-color)
     cursor: not-allowed
 
 .checkbox

sass/form/file.sass

@@ -1,10 +1,10 @@
-$file-border-color: $border !default
-$file-radius: $radius !default
+$file-border-color: var(--border, #{$border}) !default
+$file-radius: var(--radius, #{$radius}) !default
 
 $file-cta-background-color: $scheme-main-ter !default
-$file-cta-color: $text !default
-$file-cta-hover-color: $text-strong !default
-$file-cta-active-color: $text-strong !default
+$file-cta-color: var(--text, #{$text}) !default
+$file-cta-hover-color: var(--text-strong, #{$text-strong}) !default
+$file-cta-active-color: var(--text-strong, #{$text-strong}) !default
 
 $file-name-border-color: $border !default
 $file-name-border-style: solid !default
@@ -14,9 +14,20 @@ $file-name-max-width: 16em !default
 $file-colors: $form-colors !default
 
 .file
+  --file-radius: #{$file-radius}
+  --file-cta-hover-color: #{$file-cta-hover-color}
+  --file-cta-active-color: #{$file-cta-active-color}
+  --file-border-color: #{$file-border-color}
+  --file-cta-background-color: #{$file-cta-background-color}
+  --file-cta-color: #{$file-cta-color}
+  --file-name-border-color: #{$file-name-border-color}
+  --file-name-border-style: #{$file-name-border-style}
+  --file-name-border-width: #{$file-name-border-width}
+  --file-name-max-width: #{$file-name-max-width}
   @extend %unselectable
   align-items: stretch
   display: flex
+  font-size: var(--file-font-size)
   justify-content: flex-start
   position: relative
   // Colors
@@ -24,38 +35,46 @@ $file-colors: $form-colors !default
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
+      --hover-background-l-delta: -2.5%
+      --hover-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--hover-background-l-delta)})
+      --hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--hover-background-#{$name}-l), var(--#{$name}-a))
+      --focus-box-shadow-color-hsla: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--#{$name}-l), 0.25)
+      --focus-box-shadow-color: var(--focus-box-shadow-color-hsla, #{bulmaRgba($color, 0.25)})
+      --active-background-l-delta: -5%
+      --active-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--active-background-l-delta)})
+      --active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--active-background-#{$name}-l), var(--#{$name}-a))
       .file-cta
-        background-color: $color
+        background-color: var(--#{$name} #{$color})
         border-color: transparent
-        color: $color-invert
+        color: var(--#{$name}-invert, #{$color-invert})
       &:hover,
       &.is-hovered
         .file-cta
-          background-color: bulmaDarken($color, 2.5%)
+          background-color: var(--hover-background-color, #{bulmaDarken($color, 2.5%)})
           border-color: transparent
-          color: $color-invert
+          color: var(--#{$name}-invert, #{$color-invert})
       &:focus,
       &.is-focused
         .file-cta
           border-color: transparent
-          box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
-          color: $color-invert
+          box-shadow: 0 0 0.5em var(--focus-box-shadow-color)
+          color: var(--#{$name}-invert, #{$color-invert})
       &:active,
       &.is-active
         .file-cta
-          background-color: bulmaDarken($color, 5%)
+          background-color: var(--active-background-color, #{bulmaDarken($color, 5%)})
           border-color: transparent
-          color: $color-invert
+          color: var(--#{$name}-invert, #{$color-invert})
   // Sizes
   &.is-small
-    font-size: $size-small
+    --file-font-size: var(--size-small, #{$size-small})
   &.is-medium
-    font-size: $size-medium
+    --file-font-size: var(--size-medium, #{$size-medium})
     .file-icon
       .fa
         font-size: 21px
   &.is-large
-    font-size: $size-large
+    --file-font-size: var(--size-large, #{$size-large})
     .file-icon
       .fa
         font-size: 28px
@@ -69,7 +88,7 @@ $file-colors: $form-colors !default
       border-top-left-radius: 0
     &.is-empty
       .file-cta
-        border-radius: $file-radius
+        border-radius: var(--file-radius)
       .file-name
         display: none
   &.is-boxed
@@ -97,9 +116,9 @@ $file-colors: $form-colors !default
         font-size: 35px
     &.has-name
       .file-cta
-        border-radius: $file-radius $file-radius 0 0
+        border-radius: var(--file-radius) var(--file-radius) 0 0
       .file-name
-        border-radius: 0 0 $file-radius $file-radius
+        border-radius: 0 0 var(--file-radius) var(--file-radius)
         border-width: 0 1px 1px
   &.is-centered
     justify-content: center
@@ -112,9 +131,9 @@ $file-colors: $form-colors !default
   &.is-right
     justify-content: flex-end
     .file-cta
-      border-radius: 0 $file-radius $file-radius 0
+      border-radius: 0 var(--file-radius) var(--file-radius) 0
     .file-name
-      border-radius: $file-radius 0 0 $file-radius
+      border-radius: var(--file-radius) 0 0 var(--file-radius)
       border-width: 1px 0 1px 1px
       order: -1
 
@@ -128,13 +147,13 @@ $file-colors: $form-colors !default
   &:hover
     .file-cta
       background-color: bulmaDarken($file-cta-background-color, 2.5%)
-      color: $file-cta-hover-color
+      color: var(--file-cta-hover-color)
     .file-name
       border-color: bulmaDarken($file-name-border-color, 2.5%)
   &:active
     .file-cta
       background-color: bulmaDarken($file-cta-background-color, 5%)
-      color: $file-cta-active-color
+      color: var(--file-cta-active-color)
     .file-name
       border-color: bulmaDarken($file-name-border-color, 5%)
 
@@ -150,23 +169,23 @@ $file-colors: $form-colors !default
 .file-cta,
 .file-name
   @extend %control
-  border-color: $file-border-color
-  border-radius: $file-radius
+  border-color: var(--file-border-color)
+  border-radius: var(--file-radius)
   font-size: 1em
   padding-left: 1em
   padding-right: 1em
   white-space: nowrap
 
 .file-cta
-  background-color: $file-cta-background-color
-  color: $file-cta-color
+  background-color: var(--file-cta-background-color)
+  color: var(--file-cta-color)
 
 .file-name
-  border-color: $file-name-border-color
-  border-style: $file-name-border-style
-  border-width: $file-name-border-width
+  border-color: var(--file-name-border-color)
+  border-style: var(--file-name-border-style)
+  border-width: var(--file-name-border-width)
   display: block
-  max-width: $file-name-max-width
+  max-width: var(--file-name-max-width)
   overflow: hidden
   text-align: inherit
   text-overflow: ellipsis

sass/form/input-textarea.sass

@@ -1,4 +1,4 @@
-$textarea-padding: $control-padding-horizontal !default
+$textarea-padding: var(--control-padding-horizontal, #{$control-padding-horizontal}) !default
 $textarea-max-height: 40em !default
 $textarea-min-height: 8em !default
 
@@ -6,7 +6,7 @@ $textarea-colors: $form-colors !default
 
 %input-textarea
   @extend %input
-  box-shadow: $input-shadow
+  box-shadow: var(--input-shadow, #{$input-shadow})
   max-width: 100%
   width: 100%
   &[readonly]
@@ -15,12 +15,14 @@ $textarea-colors: $form-colors !default
   @each $name, $pair in $textarea-colors
     $color: nth($pair, 1)
     &.is-#{$name}
-      border-color: $color
+      --focus-box-shadow-color-hsla: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--#{$name}-l), 0.25)
+      --focus-box-shadow-color: var(--focus-box-shadow-color-hsla, #{bulmaRgba($color, 0.25)})
+      border-color: var(--#{$name}, #{$color})
       &:focus,
       &.is-focused,
       &:active,
       &.is-active
-        box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
+        box-shadow: var(--input-focus-box-shadow-size, #{$input-focus-box-shadow-size}) var(--focus-box-shadow-color)
   // Sizes
   &.is-small
     +control-small
@@ -39,9 +41,9 @@ $textarea-colors: $form-colors !default
 .input
   @extend %input-textarea
   &.is-rounded
-    border-radius: $radius-rounded
-    padding-left: calc(#{$control-padding-horizontal} + 0.375em)
-    padding-right: calc(#{$control-padding-horizontal} + 0.375em)
+    border-radius: var(--radius-rounded, #{$radius-rounded})
+    padding-left: calc(#{var(--control-padding-horizontal, #{$control-padding-horizontal})} + 0.375em)
+    padding-right: calc(#{var(--control-padding-horizontal, #{$control-padding-horizontal})} + 0.375em)
   &.is-static
     background-color: transparent
     border-color: transparent
@@ -50,15 +52,18 @@ $textarea-colors: $form-colors !default
     padding-right: 0
 
 .textarea
+  --textarea-padding: #{$textarea-padding}
+  --textarea-max-height: #{$textarea-max-height}
+  --textarea-min-height: #{$textarea-min-height}
   @extend %input-textarea
   display: block
   max-width: 100%
   min-width: 100%
-  padding: $textarea-padding
+  padding: var(--textarea-padding)
   resize: vertical
   &:not([rows])
-    max-height: $textarea-max-height
-    min-height: $textarea-min-height
+    max-height: var(--textarea-max-height)
+    min-height: var(--textarea-min-height)
   &[rows]
     height: initial
   // Modifiers

sass/form/select.sass

@@ -1,21 +1,26 @@
 $select-colors: $form-colors !default
 
 .select
+  --select-arrow: #{$input-arrow}
+  --select-disabled-border-color: #{$input-disabled-border-color}
+  --select-hover-color: #{$input-hover-color}
+  --select-disabled-color: #{$input-disabled-color}
+  --select-focus-box-shadow-size: #{$input-focus-box-shadow-size}
   display: inline-block
   max-width: 100%
   position: relative
   vertical-align: top
   &:not(.is-multiple)
-    height: $input-height
+    height: var(--input-height)
   &:not(.is-multiple):not(.is-loading)
     &::after
       @extend %arrow
-      border-color: $input-arrow
+      border-color: var(--select-arrow)
       +ltr-position(1.125em)
       z-index: 4
   &.is-rounded
     select
-      border-radius: $radius-rounded
+      border-radius: var(--radius-rounded, #{$radius-rounded})
       +ltr-property("padding", 1em, false)
   select
     @extend %input
@@ -28,7 +33,7 @@ $select-colors: $form-colors !default
       display: none
     &[disabled]:hover,
     fieldset[disabled] &:hover
-      border-color: $input-disabled-border-color
+      border-color: var(--select-disabled-border-color)
     &:not([multiple])
       +ltr-property("padding", 2.5em)
     &[multiple]
@@ -39,23 +44,27 @@ $select-colors: $form-colors !default
   // States
   &:not(.is-multiple):not(.is-loading):hover
     &::after
-      border-color: $input-hover-color
+      border-color: var(--select-hover-color)
   // Colors
   @each $name, $pair in $select-colors
     $color: nth($pair, 1)
     &.is-#{$name}
+      --hover-border-delta: -5%
+      --hover-border-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--hover-border-delta)})
+      --hover-border-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--hover-border-#{$name}-l), var(--#{$name}-a))
+      --focus-box-shadow-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--#{$name}-l), 0.25)
       &:not(:hover)::after
-        border-color: $color
+        border-color: var(--#{$name}, #{$color})
       select
-        border-color: $color
+        border-color: var(--#{$name}, #{$color})
         &:hover,
         &.is-hovered
-          border-color: bulmaDarken($color, 5%)
+          border-color: var(--hover-border-color, #{bulmaDarken($color, 5%)})
         &:focus,
         &.is-focused,
         &:active,
         &.is-active
-          box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
+          box-shadow: var(--select-focus-box-shadow-size) var(--focus-box-shadow-color, #{bulmaRgba($color, 0.25)})
   // Sizes
   &.is-small
     +control-small
@@ -66,7 +75,7 @@ $select-colors: $form-colors !default
   // Modifiers
   &.is-disabled
     &::after
-      border-color: $input-disabled-color
+      border-color: var(--select-disabled-color)
   &.is-fullwidth
     width: 100%
     select
@@ -80,8 +89,8 @@ $select-colors: $form-colors !default
       top: 0.625em
       transform: none
     &.is-small:after
-      font-size: $size-small
+      font-size: var(--size-small, #{$size-small})
     &.is-medium:after
-      font-size: $size-medium
+      font-size: var(--size-medium, #{$size-medium})
     &.is-large:after
-      font-size: $size-large
+      font-size: var(--size-large, #{$size-large})

sass/form/shared.sass

@@ -1,57 +1,58 @@
 $form-colors: $colors !default
 
-$input-color: $text-strong !default
-$input-background-color: $scheme-main !default
-$input-border-color: $border !default
-$input-height: $control-height !default
-$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
-$input-placeholder-color: bulmaRgba($input-color, 0.3) !default
+$input-color: var(--text-strong, #{$text-strong}) !default
+$input-background-color: var(--scheme-main, #{$scheme-main}) !default
+$input-border-color: var(--border, #{$border}) !default
+$input-height: var(--control-height, #{$control-height}) !default
+$input-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.05) !default
+$input-shadow: inset 0 0.0625em 0.125em $input-shadow-color !default
+$input-placeholder-color: bulmaRgba($text-strong, 0.3) !default
 
-$input-hover-color: $text-strong !default
-$input-hover-border-color: $border-hover !default
+$input-hover-color: var(--text-strong, #{$text-strong}) !default
+$input-hover-border-color: var(--border-hover, #{$border-hover}) !default
 
-$input-focus-color: $text-strong !default
-$input-focus-border-color: $link !default
+$input-focus-color: var(--text-strong, #{$text-strong}) !default
+$input-focus-border-color: var(--link, #{$link}) !default
 $input-focus-box-shadow-size: 0 0 0 0.125em !default
 $input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
 
-$input-disabled-color: $text-light !default
-$input-disabled-background-color: $background !default
-$input-disabled-border-color: $background !default
-$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
+$input-disabled-color: var(--text-light, #{$text-light}) !default
+$input-disabled-background-color: var(--background, #{$background}) !default
+$input-disabled-border-color: var(--background, #{$background}) !default
+$input-disabled-placeholder-color: bulmaRgba($text-light, 0.3) !default
 
-$input-arrow: $link !default
+$input-arrow: var(--link, #{$link}) !default
 
-$input-icon-color: $border !default
-$input-icon-active-color: $text !default
+$input-icon-color: var(--border, #{$border}) !default
+$input-icon-active-color: var(--text, #{$text}) !default
 
-$input-radius: $radius !default
+$input-radius: var(--radius, #{$radius}) !default
 
 =input
   @extend %control
-  background-color: $input-background-color
-  border-color: $input-border-color
-  border-radius: $input-radius
-  color: $input-color
+  background-color: var(--input-background-color, #{$input-background-color})
+  border-color: var(--input-border-color, #{$input-border-color})
+  border-radius: var(--input-radius, #{$input-radius})
+  color: var(--input-color, #{$input-color})
   +placeholder
-    color: $input-placeholder-color
+    color: var(--input-placeholder-color, #{$input-placeholder-color})
   &:hover,
   &.is-hovered
-    border-color: $input-hover-border-color
+    border-color: var(--input-hover-border-color, #{$input-hover-border-color})
   &:focus,
   &.is-focused,
   &:active,
   &.is-active
-    border-color: $input-focus-border-color
-    box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
+    border-color: var(--input-focus-border-color, #{$input-focus-border-color})
+    box-shadow: var(--input-focus-box-shadow-size, #{$input-focus-box-shadow-size}) var(--input-focus-box-shadow-color, #{$input-focus-box-shadow-color})
   &[disabled],
   fieldset[disabled] &
-    background-color: $input-disabled-background-color
-    border-color: $input-disabled-border-color
+    background-color: var(--input-disabled-background-color, #{$input-disabled-background-color})
+    border-color: var(--input-disabled-border-color, #{$input-disabled-border-color})
     box-shadow: none
-    color: $input-disabled-color
+    color: var(--input-disabled-color, #{$input-disabled-color})
     +placeholder
-      color: $input-disabled-placeholder-color
+      color: var(--input-disabled-placeholder-color, #{$input-disabled-placeholder-color})
 
 %input
   +input

sass/form/tools.sass

@@ -1,33 +1,40 @@
-$label-color: $text-strong !default
-$label-weight: $weight-bold !default
+$label-font-size: var(--size-normal, #{$size-normal}) !default
+$label-color: var(--text-strong, #{$text-strong}) !default
+$label-weight: var(--weight-bold, #{$weight-bold}) !default
 
-$help-size: $size-small !default
+$help-size: var(--size-small, #{$size-small}) !default
+
+$control-font-size: var(--size-normal, #{$size-normal}) !default
 
 $label-colors: $form-colors !default
 
 .label
-  color: $label-color
+  --label-color: #{$label-color}
+  --label-font-size: #{$label-font-size}
+  --label-font-weight: #{$label-weight}
+  color: var(--label-color)
   display: block
-  font-size: $size-normal
-  font-weight: $label-weight
+  font-size: var(--label-font-size)
+  font-weight: var(--label-font-weight)
   &:not(:last-child)
     margin-bottom: 0.5em
   // Sizes
   &.is-small
-    font-size: $size-small
+    font-size: var(--size-small, #{$size-small})
   &.is-medium
-    font-size: $size-medium
+    font-size: var(--size-medium, #{$size-medium})
   &.is-large
-    font-size: $size-large
+    font-size: var(--size-large, #{$size-large})
 
 .help
+  --help-font-size: #{$help-size}
   display: block
-  font-size: $help-size
+  font-size: var(--help-font-size)
   margin-top: 0.25rem
   @each $name, $pair in $label-colors
     $color: nth($pair, 1)
     &.is-#{$name}
-      color: $color
+      color: var(--#{$name}, #{$color})
 
 // Containers
 
@@ -132,15 +139,15 @@ $label-colors: $form-colors !default
     +ltr-property("margin", 1.5rem)
     text-align: right
     &.is-small
-      font-size: $size-small
+      font-size: var(--size-small, #{$size-small})
       padding-top: 0.375em
     &.is-normal
       padding-top: 0.375em
     &.is-medium
-      font-size: $size-medium
+      font-size: var(--size-medium, #{$size-medium})
       padding-top: 0.375em
     &.is-large
-      font-size: $size-large
+      font-size: var(--size-large, #{$size-large})
       padding-top: 0.375em
 
 .field-body
@@ -163,7 +170,7 @@ $label-colors: $form-colors !default
 .control
   box-sizing: border-box
   clear: both
-  font-size: $size-normal
+  font-size: var(--control-font-size, #{$control-font-size})
   position: relative
   text-align: inherit
   // Modifiers
@@ -173,31 +180,31 @@ $label-colors: $form-colors !default
     .select
       &:focus
         & ~ .icon
-          color: $input-icon-active-color
+          color: var(--input-icon-active-color, #{$input-icon-active-color})
       &.is-small ~ .icon
-        font-size: $size-small
+        font-size: var(--size-small, #{$size-small})
       &.is-medium ~ .icon
-        font-size: $size-medium
+        font-size: var(--size-medium, #{$size-medium})
       &.is-large ~ .icon
-        font-size: $size-large
+        font-size: var(--size-large, #{$size-large})
     .icon
-      color: $input-icon-color
-      height: $input-height
+      color: var(--input-icon-color, #{$input-icon-color})
+      height: var(--input-height, #{$input-height})
       pointer-events: none
       position: absolute
       top: 0
-      width: $input-height
+      width: var(--input-height, #{$input-height})
       z-index: 4
   &.has-icons-left
     .input,
     .select select
-      padding-left: $input-height
+      padding-left: var(--input-height, #{$input-height})
     .icon.is-left
       left: 0
   &.has-icons-right
     .input,
     .select select
-      padding-right: $input-height
+      padding-right: var(--input-height, #{$input-height})
     .icon.is-right
       right: 0
   &.is-loading
@@ -208,8 +215,8 @@ $label-colors: $form-colors !default
       top: 0.625em
       z-index: 4
     &.is-small:after
-      font-size: $size-small
+      font-size: var(--size-small, #{$size-small})
     &.is-medium:after
-      font-size: $size-medium
+      font-size: var(--size-medium, #{$size-medium})
     &.is-large:after
-      font-size: $size-large
+      font-size: var(--size-large, #{$size-large})

sass/helpers/color.sass

@@ -1,37 +1,45 @@
 @each $name, $pair in $colors
   $color: nth($pair, 1)
   .has-text-#{$name}
-    color: $color !important
-  a.has-text-#{$name}
+    --has-text-hover-delta: -10%
+    --has-text-hover-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--has-text-hover-delta)})
+    --has-text-hover-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--has-text-hover-#{$name}-l), var(--#{$name}-a))
+    color: var(--#{$name}, #{$color}) !important
     &:hover,
     &:focus
-      color: bulmaDarken($color, 10%) !important
+      color: var(--has-text-hover-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
+      --has-text-light-hover-delta: -10%
+      --has-text-light-hover-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--has-text-light-hover-delta)})
+      --has-text-light-hover-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--has-text-light-hover-#{$name}-l), var(--#{$name}-a))
+      color: var(--#{$name}-light, #{$color-light}) !important
     a.has-text-#{$name}-light
       &:hover,
       &:focus
-        color: bulmaDarken($color-light, 10%) !important
+        color: var(--has-text-light-hover-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
+      --has-text-dark-hover-delta: 10%
+      --has-text-dark-hover-#{$name}-l: calc(#{var(--#{$name}-dark-l)} + #{var(--has-text-dark-hover-delta)})
+      --has-text-dark-hover-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--has-text-dark-hover-#{$name}-l), var(--#{$name}-a))
+      color: var(--#{$name}-dark, #{$color-dark}) !important
     a.has-text-#{$name}-dark
       &:hover,
       &:focus
-        color: bulmaLighten($color-dark, 10%) !important
+        color: var(--has-text-dark-hover-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

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

sass/helpers/visibility.sass

@@ -1,5 +1,3 @@
-
-
 $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
 
 @each $display in $displays

sass/layout/footer.sass

@@ -1,9 +1,12 @@
-$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})

sass/layout/hero.sass

@@ -7,6 +7,10 @@ $hero-colors: $colors !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
@@ -21,21 +25,24 @@ $hero-colors: $colors !default
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
-      background-color: $color
-      color: $color-invert
+      --hover-background-l-delta: -5%
+      --hover-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--hover-background-l-delta)})
+      --hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--hover-background-#{$name}-l), var(--#{$name}-a))
+      background-color: var(--#{$name}, #{$color})
+      color: var(--#{$name}-invert, #{$color-invert})
       a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
       strong
         color: inherit
       .title
-        color: $color-invert
+        color: var(--#{$name}-invert, #{$color-invert})
       .subtitle
         color: bulmaRgba($color-invert, 0.9)
         a:not(.button),
         strong
-          color: $color-invert
+          color: var(--#{$name}-invert, #{$color-invert})
       .navbar-menu
         +touch
-          background-color: $color
+          background-color: var(--#{$name}, #{$color})
       .navbar-item,
       .navbar-link
         color: bulmaRgba($color-invert, 0.7)
@@ -43,11 +50,11 @@ $hero-colors: $colors !default
       .navbar-link
         &:hover,
         &.is-active
-          background-color: bulmaDarken($color, 5%)
-          color: $color-invert
+          background-color: var(--hover-background-color, #{bulmaDarken($color, 5%)})
+          color: var(--#{$name}-invert, #{$color-invert})
       .tabs
         a
-          color: $color-invert
+          color: var(--#{$name}-invert, #{$color-invert})
           opacity: 0.9
           &:hover
             opacity: 1
@@ -57,15 +64,15 @@ $hero-colors: $colors !default
         &.is-boxed,
         &.is-toggle
           a
-            color: $color-invert
+            color: var(--#{$name}-invert, #{$color-invert})
             &:hover
-              background-color: bulmaRgba($scheme-invert, 0.1)
+              background-color: rgba(0, 0, 0, 0.1)
           li.is-active a
             &,
             &:hover
-              background-color: $color-invert
-              border-color: $color-invert
-              color: $color
+              background-color: var(--#{$name}-invert, #{$color-invert})
+              border-color: var(--#{$name}-invert, #{$color-invert})
+              color: var(--#{$name}, #{$color})
       // Modifiers
       @if type-of($color) == 'color'
         &.is-bold
@@ -78,15 +85,15 @@ $hero-colors: $colors !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
@@ -144,4 +151,4 @@ $hero-colors: $colors !default
 .hero-body
   flex-grow: 1
   flex-shrink: 0
-  padding: $hero-body-padding
+  padding: var(--hero-body-padding)

sass/layout/section.sass

@@ -3,11 +3,14 @@ $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)

sass/themes/basic.sass

@@ -0,0 +1,85 @@
+\:root
+  // Initial variables
+  --family-sans-serif: #{$family-sans-serif}
+  --family-monospace: #{$family-monospace}
+  --weight-light: #{$weight-light}
+  --weight-normal: #{$weight-normal}
+  --weight-medium: #{$weight-medium}
+  --weight-semibold: #{$weight-semibold}
+  --weight-bold: #{$weight-bold}
+  --block-spacing: #{$block-spacing}
+  --easing: #{$easing}
+  --radius-small: #{$radius-small}
+  --radius: #{$radius}
+  --radius-large: #{$radius-large}
+  --radius-rounded: #{$radius-rounded}
+  --speed: #{$speed}
+  // Derived
+  --scheme-main: #{$scheme-main}
+  --scheme-main-bis: #{$scheme-main-bis}
+  --scheme-main-ter: #{$scheme-main-ter}
+  --scheme-invert: #{$scheme-invert}
+  --scheme-invert-rgb: #{$scheme-invert-rgb}
+  --scheme-invert-bis: #{$scheme-invert-bis}
+  --scheme-invert-ter: #{$scheme-invert-ter}
+  --background: #{$background}
+  --border: #{$border}
+  --border-rgb: #{$border-rgb}
+  --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-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}
+  // Color Maps
+  +registerCSSVarColors($colors)
+  +registerCSSVarColors($shades)
+  // Controls
+  --control-font-size: #{$control-font-size}
+  --control-radius: #{$control-radius}
+  --control-radius-small: #{$control-radius-small}
+  --control-border-width: #{$control-border-width}
+  --control-height: #{$control-height}
+  --control-line-height: #{$control-line-height}
+  --control-padding-vertical: #{$control-padding-vertical}
+  --control-padding-horizontal: #{$control-padding-horizontal}
+  // Inputs
+  --input-color: #{$input-color}
+  --input-background-color: #{$input-background-color}
+  --input-border-color: #{$input-border-color}
+  --input-height: #{$input-height}
+  --input-shadow: #{$input-shadow}
+  --input-placeholder-color: #{$input-placeholder-color}
+  --input-hover-color: #{$input-hover-color}
+  --input-hover-border-color: #{$input-hover-border-color}
+  --input-focus-color: #{$input-focus-color}
+  --input-focus-border-color: #{$input-focus-border-color}
+  --input-focus-box-shadow-size: #{$input-focus-box-shadow-size}
+  --input-focus-box-shadow-color: #{$input-focus-box-shadow-color}
+  --input-disabled-color: #{$input-disabled-color}
+  --input-disabled-background-color: #{$input-disabled-background-color}
+  --input-disabled-border-color: #{$input-disabled-border-color}
+  --input-disabled-placeholder-color: #{$input-disabled-placeholder-color}
+  --input-arrow: #{$input-arrow}
+  --input-icon-color: #{$input-icon-color}
+  --input-icon-active-color: #{$input-icon-active-color}
+  --input-radius: #{$input-radius}

sass/themes/default.sass

@@ -0,0 +1,151 @@
+\:root
+  // Initial variables
+  --black: #{$black}
+  --black-70: rgba(0, 0, 0, 0.7)
+  --black-bis: #{$black-bis}
+  --black-ter: #{$black-ter}
+  --grey-darker: #{$grey-darker}
+  --grey-dark: #{$grey-dark}
+  --grey: #{$grey}
+  --grey-light: #{$grey-light}
+  --grey-lighter: #{$grey-lighter}
+  --grey-lightest: #{$grey-lightest}
+  --white-ter: #{$white-ter}
+  --white-bis: #{$white-bis}
+  --white: #{$white}
+  --orange: #{$orange}
+  --yellow: #{$yellow}
+  --green: #{$green}
+  --turquoise: #{$turquoise}
+  --cyan: #{$cyan}
+  --blue: #{$blue}
+  --purple: #{$purple}
+  --red: #{$red}
+  --family-sans-serif: #{$family-sans-serif}
+  --family-monospace: #{$family-monospace}
+  --render-mode: #{$render-mode}
+  --size-1: #{$size-1}
+  --size-2: #{$size-2}
+  --size-3: #{$size-3}
+  --size-4: #{$size-4}
+  --size-5: #{$size-5}
+  --size-6: #{$size-6}
+  --size-7: #{$size-7}
+  --weight-light: #{$weight-light}
+  --weight-normal: #{$weight-normal}
+  --weight-medium: #{$weight-medium}
+  --weight-semibold: #{$weight-semibold}
+  --weight-bold: #{$weight-bold}
+  --block-spacing: #{$block-spacing}
+  --easing: #{$easing}
+  --radius-small: #{$radius-small}
+  --radius: #{$radius}
+  --radius-large: #{$radius-large}
+  --radius-rounded: #{$radius-rounded}
+  --speed: #{$speed}
+  // Derived variables
+  --primary: #{$primary}
+  --info: #{$info}
+  --success: #{$success}
+  --warning: #{$warning}
+  --danger: #{$danger}
+  --light: #{$light}
+  --dark: #{$dark}
+  --orange-invert: #{$orange-invert}
+  --yellow-invert: #{$yellow-invert}
+  --green-invert: #{$green-invert}
+  --turquoise-invert: #{$turquoise-invert}
+  --cyan-invert: #{$cyan-invert}
+  --blue-invert: #{$blue-invert}
+  --purple-invert: #{$purple-invert}
+  --red-invert: #{$red-invert}
+  --primary-invert: #{$primary-invert}
+  --primary-light: #{$primary-light}
+  --primary-dark: #{$primary-dark}
+  --info-invert: #{$info-invert}
+  --info-light: #{$info-light}
+  --info-dark: #{$info-dark}
+  --success-invert: #{$success-invert}
+  --success-light: #{$success-light}
+  --success-dark: #{$success-dark}
+  --warning-invert: #{$warning-invert}
+  --warning-light: #{$warning-light}
+  --warning-dark: #{$warning-dark}
+  --danger-invert: #{$danger-invert}
+  --danger-light: #{$danger-light}
+  --danger-dark: #{$danger-dark}
+  --light-invert: #{$light-invert}
+  --light-light: #{$light-light}
+  --light-dark: #{$light-dark}
+  --dark-invert: #{$dark-invert}
+  --dark-light: #{$dark-light}
+  --dark-dark: #{$dark-dark}
+  --scheme-main: #{$scheme-main}
+  --scheme-main-bis: #{$scheme-main-bis}
+  --scheme-main-ter: #{$scheme-main-ter}
+  --scheme-invert: #{$scheme-invert}
+  --scheme-invert-rgb: #{$scheme-invert-rgb}
+  --scheme-invert-bis: #{$scheme-invert-bis}
+  --scheme-invert-ter: #{$scheme-invert-ter}
+  --background: #{$background}
+  --border: #{$border}
+  --border-rgb: #{$border-rgb}
+  --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: #{$link}
+  --link-invert: #{$link-invert}
+  --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}
+  // Controls
+  --control-font-size: #{$control-font-size}
+  --control-radius: #{$control-radius}
+  --control-radius-small: #{$control-radius-small}
+  --control-border-width: #{$control-border-width}
+  --control-height: #{$control-height}
+  --control-line-height: #{$control-line-height}
+  --control-padding-vertical: #{$control-padding-vertical}
+  --control-padding-horizontal: #{$control-padding-horizontal}
+  // Inputs
+  --input-color: #{$input-color}
+  --input-background-color: #{$input-background-color}
+  --input-border-color: #{$input-border-color}
+  --input-height: #{$input-height}
+  --input-shadow: #{$input-shadow}
+  --input-placeholder-color: #{$input-placeholder-color}
+  --input-hover-color: #{$input-hover-color}
+  --input-hover-border-color: #{$input-hover-border-color}
+  --input-focus-color: #{$input-focus-color}
+  --input-focus-border-color: #{$input-focus-border-color}
+  --input-focus-box-shadow-size: #{$input-focus-box-shadow-size}
+  --input-focus-box-shadow-color: #{$input-focus-box-shadow-color}
+  --input-disabled-color: #{$input-disabled-color}
+  --input-disabled-background-color: #{$input-disabled-background-color}
+  --input-disabled-border-color: #{$input-disabled-border-color}
+  --input-disabled-placeholder-color: #{$input-disabled-placeholder-color}
+  --input-arrow: #{$input-arrow}
+  --input-icon-color: #{$input-icon-color}
+  --input-icon-active-color: #{$input-icon-active-color}
+  --input-radius: #{$input-radius}

sass/utilities/controls.sass

@@ -1,5 +1,5 @@
-$control-radius: $radius !default
-$control-radius-small: $radius-small !default
+$control-radius: var(--radius, #{$radius}) !default
+$control-radius-small: var(--radius-small, #{$radius-small}) !default
 
 $control-border-width: 1px !default
 
@@ -13,18 +13,18 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
   -moz-appearance: none
   -webkit-appearance: none
   align-items: center
-  border: $control-border-width solid transparent
-  border-radius: $control-radius
+  border: var(--control-border-width, #{$control-border-width}) solid transparent
+  border-radius: var(--control-radius, #{$control-radius})
   box-shadow: none
   display: inline-flex
-  font-size: $size-normal
-  height: $control-height
+  font-size: var(--size-normal, #{$size-normal})
+  height: var(--control-height, #{$control-height})
   justify-content: flex-start
-  line-height: $control-line-height
-  padding-bottom: $control-padding-vertical
-  padding-left: $control-padding-horizontal
-  padding-right: $control-padding-horizontal
-  padding-top: $control-padding-vertical
+  line-height: var(--control-line-height, #{$control-line-height})
+  padding-bottom: var(--control-padding-vertical, #{$control-padding-vertical})
+  padding-left: var(--control-padding-horizontal, #{$control-padding-horizontal})
+  padding-right: var(--control-padding-horizontal, #{$control-padding-horizontal})
+  padding-top: var(--control-padding-vertical, #{$control-padding-vertical})
   position: relative
   vertical-align: top
   // States
@@ -42,9 +42,9 @@ $control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
 
 // The controls sizes use mixins so they can be used at different breakpoints
 =control-small
-  border-radius: $control-radius-small
-  font-size: $size-small
+  border-radius: var(--control-radius-small, #{$control-radius-small})
+  font-size: var(--size-small, #{$size-small})
 =control-medium
-  font-size: $size-medium
+  font-size: var(--size-medium, #{$size-medium})
 =control-large
-  font-size: $size-large
+  font-size: var(--size-large, #{$size-large})

sass/utilities/derived-variables.sass

@@ -19,23 +19,27 @@ $blue-invert: findColorInvert($blue) !default
 $purple-invert: findColorInvert($purple) !default
 $red-invert: findColorInvert($red) !default
 
-$primary-invert: findColorInvert($primary) !default
-$primary-light: findLightColor($primary) !default
-$primary-dark: findDarkColor($primary) !default
-$info-invert: findColorInvert($info) !default
-$info-light: findLightColor($info) !default
-$info-dark: findDarkColor($info) !default
-$success-invert: findColorInvert($success) !default
-$success-light: findLightColor($success) !default
-$success-dark: findDarkColor($success) !default
-$warning-invert: findColorInvert($warning) !default
-$warning-light: findLightColor($warning) !default
-$warning-dark: findDarkColor($warning) !default
-$danger-invert: findColorInvert($danger) !default
-$danger-light: findLightColor($danger) !default
-$danger-dark: findDarkColor($danger) !default
-$light-invert: findColorInvert($light) !default
-$dark-invert: findColorInvert($dark) !default
+$primary-invert: findColorInvert($primary, $turquoise) !default
+$primary-light: findLightColor($primary, $turquoise) !default
+$primary-dark: findDarkColor($primary, $turquoise) !default
+$info-invert: findColorInvert($info, $cyan) !default
+$info-light: findLightColor($info, $cyan) !default
+$info-dark: findDarkColor($info, $cyan) !default
+$success-invert: findColorInvert($success, $green) !default
+$success-light: findLightColor($success, $green) !default
+$success-dark: findDarkColor($success, $green) !default
+$warning-invert: findColorInvert($warning, $yellow) !default
+$warning-light: findLightColor($warning, $yellow) !default
+$warning-dark: findDarkColor($warning, $yellow) !default
+$danger-invert: findColorInvert($danger, $red) !default
+$danger-light: findLightColor($danger, $red) !default
+$danger-dark: findDarkColor($danger, $red) !default
+$light-invert: findColorInvert($light, $white-ter) !default
+$light-light: findLightColor($light, $white-ter) !default
+$light-dark: findDarkColor($light, $white-ter) !default
+$dark-invert: findColorInvert($dark, $grey-darker) !default
+$dark-light: findLightColor($dark, $grey-darker) !default
+$dark-dark: findDarkColor($dark, $grey-darker) !default
 
 // General colors
 
@@ -43,12 +47,14 @@ $scheme-main: $white !default
 $scheme-main-bis: $white-bis !default
 $scheme-main-ter: $white-ter !default
 $scheme-invert: $black !default
+$scheme-invert-rgb: bulmaToRGB($black) !default
 $scheme-invert-bis: $black-bis !default
 $scheme-invert-ter: $black-ter !default
 
 $background: $white-ter !default
 
 $border: $grey-lighter !default
+$border-rgb: bulmaToRGB($grey-lighter) !default
 $border-hover: $grey-light !default
 $border-light: $grey-lightest !default
 $border-light-hover: $grey-light !default
@@ -56,31 +62,32 @@ $border-light-hover: $grey-light !default
 // Text colors
 
 $text: $grey-dark !default
-$text-invert: findColorInvert($text) !default
+$text-invert: findColorInvert($text, $grey-dark) !default
 $text-light: $grey !default
 $text-strong: $grey-darker !default
 
 // Code colors
 
 $code: darken($red, 15%) !default
-$code-background: $background !default
+$code-background: var(--background, #{$background}) !default
 
-$pre: $text !default
-$pre-background: $background !default
+$pre: var(--text, #{$text}) !default
+$pre-background: var(--background, #{$background}) !default
 
 // Link colors
 
 $link: $blue !default
-$link-invert: findColorInvert($link) !default
-$link-light: findLightColor($link) !default
-$link-dark: findDarkColor($link) !default
+$link-rgb: bulmaToRGB($blue) !default
+$link-invert: findColorInvert($link, $blue) !default
+$link-light: findLightColor($link, $blue) !default
+$link-dark: findDarkColor($link, $blue) !default
 $link-visited: $purple !default
 
 $link-hover: $grey-darker !default
 $link-hover-border: $grey-light !default
 
 $link-focus: $grey-darker !default
-$link-focus-border: $blue !default
+$link-focus-border: var(--link, #{$blue}) !default
 
 $link-active: $grey-darker !default
 $link-active-border: $grey-dark !default

sass/utilities/functions.sass

@@ -76,28 +76,45 @@
     $color-rgb: map-merge($color-rgb, ($name: $value))
   @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)
 
-@function findColorInvert($color)
-  @if (colorLuminance($color) > 0.55)
-    @return rgba(#000, 0.7)
-  @else
-    @return #fff
+@function findColorInvert($color, $fallback: null)
+  @if type-of($color) == 'color'
+    @if (colorLuminance($color) > 0.55)
+      @return rgba(0, 0, 0, 0.7)
+    @else
+      @return #fff
+  @else if type-of($fallback) == 'color'
+    @if (colorLuminance($fallback) > 0.55)
+      @return rgba(0, 0, 0, 0.7)
+    @else
+      @return #fff
+  @return $color
 
-@function findLightColor($color)
+@function findLightColor($color, $fallback: null)
   @if type-of($color) == 'color'
     $l: 96%
     @if lightness($color) > 96%
       $l: lightness($color)
     @return change-color($color, $lightness: $l)
-  @return $background
+  @else if type-of($fallback) == 'color'
+    $l: 96%
+    @if lightness($fallback) > 96%
+      $l: lightness($fallback)
+    @return change-color($fallback, $lightness: $l)
+  @return $color
 
-@function findDarkColor($color)
+@function calculateDarkColor($color)
+  $base-l: 29%
+  $luminance: colorLuminance($color)
+  $luminance-delta: (0.53 - $luminance)
+  $target-l: round($base-l + ($luminance-delta * 53))
+  @return change-color($color, $lightness: max($base-l, $target-l))
+
+@function findDarkColor($color, $fallback: null)
   @if type-of($color) == 'color'
-    $base-l: 29%
-    $luminance: colorLuminance($color)
-    $luminance-delta: (0.53 - $luminance)
-    $target-l: round($base-l + ($luminance-delta * 53))
-    @return change-color($color, $lightness: max($base-l, $target-l))
-  @return $text-strong
+    @return calculateDarkColor($color)
+  @else if type-of($fallback) == 'color'
+    @return calculateDarkColor($fallback)
+  @return $color
 
 @function bulmaRgba($color, $alpha)
   @if type-of($color) != 'color'
@@ -113,3 +130,57 @@
   @if type-of($color) != 'color'
     @return $color
   @return lighten($color, $amount)
+
+@function bulmaToRGB($color)
+  @return red($color), green($color), blue($color)
+
+=registerCSSVar($name, $value, $at-root: true)
+  @if $at-root
+    @at-root :root
+      --#{$name}: #{$value}
+  @else
+    --#{$name}: #{$value}
+
+=registerCSSVars($list, $at-root: true)
+  @if $at-root
+    @at-root :root
+      @each $name, $value in $list
+        --#{$name}: #{$value}
+  @else
+    @each $name, $value in $list
+      --#{$name}: #{$value}
+
+=registerCSSVarColor($name, $components, $prefix: '')
+  $color: nth($components, 1)
+  $base: $prefix + $name
+
+  --#{$base}-h: #{hue($color)}
+  --#{$base}-s: #{saturation($color)}
+  --#{$base}-l: #{lightness($color)}
+  --#{$base}-a: 1
+  --#{$base}: hsla(var(--#{$base}-h), var(--#{$base}-s), var(--#{$base}-l), var(--#{$base}-a))
+
+  // Invert color
+  --#{$base}-invert: #{findColorInvert($color)}
+
+  // Light color
+  $light-l: 96%
+  @if lightness($color) > 96%
+    $light-l: lightness($color)
+  --#{$base}-light-l: #{$light-l}
+  --#{$base}-light: hsla(var(--#{$base}-h), var(--#{$base}-s), var(--#{$base}-light-l), var(--#{$base}-a))
+
+  // Dark color
+  $base-l: 29%
+  $luminance: colorLuminance($color)
+  $luminance-delta: (0.53 - $luminance)
+  $dark-l: round($base-l + ($luminance-delta * 53))
+  --#{$base}-dark-l: #{$dark-l}
+  --#{$base}-dark: hsla(var(--#{$base}-h), var(--#{$base}-s), var(--#{$base}-dark-l), var(--#{$base}-a))
+
+=registerCSSVarColors($colors, $prefix: '')
+  @each $name, $components in $colors
+    +registerCSSVarColor($name, $components, $prefix)
+
+@function assignCSSVar($name, $fallback)
+  @return var(--#{$name}, #{$fallback})

sass/utilities/mixins.sass

@@ -16,20 +16,23 @@
     top: calc(50% - (#{$width} / 2))
 
 =fa($size, $dimensions)
+  --fa-dimensions: #{$dimensions}
+  --fa-font-size: #{$size}
   display: inline-block
-  font-size: $size
-  height: $dimensions
-  line-height: $dimensions
+  font-size: var(--fa-font-size)
+  height: var(--fa-dimensions)
+  line-height: var(--fa-dimensions)
   text-align: center
   vertical-align: top
-  width: $dimensions
+  width: var(--fa-dimensions)
 
 =hamburger($dimensions)
+  --hamburger-dimensions: #{$dimensions}
   cursor: pointer
   display: block
-  height: $dimensions
+  height: var(--hamburger-dimensions)
   position: relative
-  width: $dimensions
+  width: var(--hamburger-dimensions)
   span
     background-color: currentColor
     display: block
@@ -37,9 +40,9 @@
     left: calc(50% - 8px)
     position: absolute
     transform-origin: center
-    transition-duration: $speed
+    transition-duration: var(--speed, #{$speed})
     transition-property: background-color, opacity, transform
-    transition-timing-function: $easing
+    transition-timing-function: var(--easing, #{$easing})
     width: 16px
     &:nth-child(1)
       top: calc(50% - 6px)
@@ -48,7 +51,7 @@
     &:nth-child(3)
       top: calc(50% + 4px)
   &:hover
-    background-color: bulmaRgba(black, 0.05)
+    background-color: rgba(0, 0, 0, 0.05)
   // Modifers
   &.is-active
     span
@@ -165,7 +168,8 @@
   +unselectable
 
 =arrow($color: transparent)
-  border: 3px solid $color
+  --arrow-color: #{$color}
+  border: 3px solid var(--arrow-color)
   border-radius: 2px
   border-right: 0
   border-top: 0
@@ -184,8 +188,9 @@
   +arrow
 
 =block($spacing: $block-spacing)
+  --block-spacing: #{$spacing}
   &:not(:last-child)
-    margin-bottom: $spacing
+    margin-bottom: var(--block-spacing)
 
 %block
   +block
@@ -194,9 +199,9 @@
   @extend %unselectable
   -moz-appearance: none
   -webkit-appearance: none
-  background-color: bulmaRgba($scheme-invert, 0.2)
+  background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.2)
   border: none
-  border-radius: $radius-rounded
+  border-radius: var(--radius-rounded, #{$radius-rounded})
   cursor: pointer
   pointer-events: auto
   display: inline-block
@@ -214,7 +219,7 @@
   width: 20px
   &::before,
   &::after
-    background-color: $scheme-main
+    background-color: var(--scheme-main, #{$scheme-main})
     content: ""
     display: block
     left: 50%
@@ -230,9 +235,9 @@
     width: 2px
   &:hover,
   &:focus
-    background-color: bulmaRgba($scheme-invert, 0.3)
+    background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.3)
   &:active
-    background-color: bulmaRgba($scheme-invert, 0.4)
+    background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.4)
   // Sizes
   &.is-small
     height: 16px
@@ -260,9 +265,10 @@
   +delete
 
 =loader
+  --loader-border-color: var(--grey-lighter, #{$grey-lighter})
   animation: spinAround 500ms infinite linear
-  border: 2px solid $grey-lighter
-  border-radius: $radius-rounded
+  border: 2px solid var(--loader-border-color)
+  border-radius: var(--radius-rounded, #{$radius-rounded})
   border-right-color: transparent
   border-top-color: transparent
   content: ""

test/cssvars.js

@@ -0,0 +1,13 @@
+const Metalsmith = require('metalsmith');
+const filter = require('metalsmith-filter');
+
+const regex_sass = '**/*.sass';
+const other_plugin = require('./plugins/check-css-variables-exist');
+
+Metalsmith(__dirname)
+  .source('../sass')
+  .use(filter(regex_sass))
+  .use(other_plugin())
+  .build(function(err) {
+    if (err) throw err;
+  });

test/plugins/check-css-variables-exist.js

@@ -0,0 +1,119 @@
+module.exports = plugin;
+
+const utils = require('./utils');
+const fs = require('fs');
+const regexRegisterColors = /registerCSSVarColors\((\$[a-z]+)\)/g;
+const regexAssign = /--[a-z-]*:/g;
+const regexUsage = /var\(--[a-z-]*(\, \#|\))/g;
+const LOG_EVERYTHING = false;
+
+const COLOR_MAPS = {
+  '$colors': ["white", "black", "light", "dark", "primary", "link", "info", "success", "warning", "danger"],
+  '$shades': ["black-bis", "black-ter", "grey-darker", "grey-dark", "grey", "grey-light", "grey-lighter", "white-ter", "white-bis"],
+}
+
+function logThis(message) {
+  if (LOG_EVERYTHING) {
+    console.log(message);
+  }
+}
+
+function getFirstGroup(regexp, str) {
+  const array = [...str.matchAll(regexp)];
+  return array.map(m => m[1]);
+}
+
+function plugin() {
+  return (files, metalsmith, done) => {
+    setImmediate(done);
+
+    let hasErrors = false;
+
+    const cssvars = fs.readFileSync(`../sass/themes/basic.sass`, "utf8");
+
+    // Check for --cyan: #{$cyan}
+    let defaultAssignments = cssvars.match(regexAssign) || [];
+    defaultAssignments = defaultAssignments.map(assignment => assignment.replace(':', ''));
+
+    // Check for +registerCSSVarColors($colors)
+    let registerMaps = getFirstGroup(regexRegisterColors, cssvars);
+
+    if (registerMaps) {
+      registerMaps.forEach(mapName => {
+        if (mapName in COLOR_MAPS) {
+          const colors = COLOR_MAPS[mapName].map(colorName => {
+            defaultAssignments.push(`--${colorName}`);
+            defaultAssignments.push(`--${colorName}-h`);
+            defaultAssignments.push(`--${colorName}-s`);
+            defaultAssignments.push(`--${colorName}-l`);
+            defaultAssignments.push(`--${colorName}-a`);
+            defaultAssignments.push(`--${colorName}-invert`);
+            defaultAssignments.push(`--${colorName}-light`);
+            defaultAssignments.push(`--${colorName}-dark`);
+          });
+        }
+      });
+    }
+
+    Object.keys(files).forEach(filePath => {
+      const {fileName, lines} = utils.getLines(files, filePath);
+      const file = files[filePath];
+      const contents = file.contents.toString();
+      const assignments = contents.match(regexAssign);
+      let fileAssignments = [];
+      let allAssignments = [];
+      let errorCount = 0;
+
+      if (assignments) {
+        // --foobar: ==> --foobar
+        fileAssignments = assignments.map(assignment => assignment.replace(':', ''));
+        allAssignments = [...defaultAssignments, ...fileAssignments];
+      } else {
+        logThis(`${filePath} has no CSS var assignments`);
+        allAssignments = [...defaultAssignments];
+      }
+
+      let usages = contents.match(regexUsage);
+
+      if (!usages) {
+        logThis(`${filePath} has no CSS var usages`);
+        return;
+      }
+
+      // var(--foobar) ==> --foobar
+      usages = usages.map(usage => {
+        usage = usage.replace('var(', '');
+        usage = usage.replace(')', '');
+        usage = usage.replace(', #', '');
+        return usage;
+      });
+
+      usages.forEach(usage => {
+        if (!allAssignments.includes(usage)) {
+          console.log(`${usage} is not assigned`);
+          errorCount++;
+        }
+      });
+
+      fileAssignments.forEach(assignment => {
+        if (!usages.includes(assignment)) {
+          console.log(`${assignment} is not used`);
+          errorCount++;
+        }
+      });
+
+      if (errorCount) {
+        console.log(`There are some errors in ${filePath}.`);
+        hasErrors = true;
+      } else {
+        logThis(`${filePath} is all good!`);
+      }
+    });
+
+    if (hasErrors) {
+      console.log(`There are some errors.`);
+    } else {
+      console.log(`All CSS variables are used and assigned correctly!`);
+    }
+  };
+}

test/plugins/utils.js

@@ -0,0 +1,49 @@
+const fs = require('fs');
+const path = require('path');
+
+let utils = {
+  parseLine: (line) => {
+    if (line.startsWith('$') && line.endsWith('!default')) {
+      const colon_index = line.indexOf(':');
+      const variable_name = line.substring(0, colon_index).trim();
+
+      const default_index = line.indexOf('!default');
+      const variable_value = line.substring(colon_index + 1, default_index).trim();
+
+      return variable = {
+        name: variable_name,
+        value: variable_value,
+        type: utils.getVariableType(variable_name, variable_value),
+      };
+    }
+
+    return false;
+  },
+
+  getLines: (files, file_path) => {
+    const file = files[file_path];
+    const slash_index = file_path.lastIndexOf('/');
+    const dot_index = file_path.lastIndexOf('.');
+    const file_name = file_path.substring(slash_index + 1, dot_index);
+
+    return {
+      file_name,
+      lines: file.contents.toString().split(/(?:\r\n|\r|\n)/g),
+    }
+  },
+
+  ensureDirectoryExistence: (file_path) => {
+    var dirname = path.dirname(file_path);
+
+    if (fs.existsSync(dirname)) {
+      return true;
+    }
+
+    utils.ensureDirectoryExistence(dirname);
+    fs.mkdirSync(dirname);
+  }
+}
+
+utils.files = {};
+
+module.exports = utils;