Bootstrap 5.3.0

- updated to Bootstrap 5.3.0
- added custom dark mode CSS variables
- doc: fixed and added info about other variable files
- updated rfs configuration
- not longer needed Sass variables init removed (current Sass compiler shows no warnings)
- caniuse-lite updated

Author: benabraham

gulpfile.esm.js

@@ -53,7 +53,7 @@ const sassCompile = () =>
                 autoprefixer, // automatically adds vendor prefixes if needed
                 // see browserslist in package.json for included browsers
                 // Official Bootstrap browser support policy:
-                // https://getbootstrap.com/docs/5.2/getting-started/browsers-devices/#supported-browsers
+                // https://getbootstrap.com/docs/5.3/getting-started/browsers-devices/#supported-browsers
             ])
         )
         .pipe(csso()) // compresses CSS

package-lock.json

@@ -8,7 +8,7 @@
   "main": "index.js",
   "devDependencies": {
     "autoprefixer": "^10.4.14",
-    "bootstrap": "^5.2.3",
+    "bootstrap": "^5.3.0",
     "browser-sync": "^2.29.3",
     "del": "^6.1.1",
     "esm": "^3.2.25",

package.json

@@ -1,5 +1,5 @@
 {
-  "bootstrapVersion": "5.2.3",
+  "bootstrapVersion": "5.3.0",
   "sampleColors": [
     {
       "name": "red",

src/data.json

@@ -21,7 +21,7 @@
 //
 // If you want to use Bootstrap’s variables
 // to override other variables, please see
-// _1-customized-bootstrap-variables.scss.
+// _2-customized-bootstrap-variables.scss.
 
 // Working examples (feel free to delete them):
 $paragraph-margin-bottom: 1.5rem;

src/scss/_1-customized-bootstrap-variables.scss

@@ -33,6 +33,7 @@
 %custom-bootstrap-variables {
     @import "./node_modules/bootstrap/scss/functions";
     @import "./node_modules/bootstrap/scss/variables";
+    @import "./node_modules/bootstrap/scss/variables-dark";
 
     // Working examples (feel free to delete them):
     $paragraph-margin-bottom: 1.5rem !global;

src/scss/_2-customized-bootstrap-variables.scss

@@ -28,10 +28,14 @@
 //
 // Note: while ugly, this is the only workaround because
 // of how variables and variable shadowing works in Sass.
+//
+// Please see _4-customized-bootstrap-variables.scss.
+// for a more practical version of this solution.
 
 %custom-bootstrap-variables {
     @import "./node_modules/bootstrap/scss/functions";
     @import "./node_modules/bootstrap/scss/variables";
+    @import "./node_modules/bootstrap/scss/variables-dark";
 
     // Working examples (feel free to delete them):
     $paragraph-margin-bottom: 1.5rem; // local variable overridden