Bootstrap 5.1.1

Author: benabraham

package.json

@@ -8,7 +8,7 @@
   "main": "index.js",
   "devDependencies": {
     "autoprefixer": "^10.3.4",
-    "bootstrap": "^5.1.0",
+    "bootstrap": "^5.1.1",
     "browser-sync": "^2.27.5",
     "del": "^6.0.0",
     "esm": "^3.2.25",

src/data.json

@@ -1,5 +1,5 @@
 {
-  "bootstrapVersion": "5.1.0",
+  "bootstrapVersion": "5.1.1",
   "sampleColors": [
     {
       "name": "red",

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

@@ -454,20 +454,29 @@
     //
     // Extends the default `$theme-colors` maps to help create our utilities.
 
-    // uncomment whole block
-    // so you can define only new ones you need
+    // Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
+
+    // uncomment the whole block
     /*
-    $utilities-colors: map-merge(
-        $theme-colors-rgb,
-        (
-            "black": to-rgb($black),
-            "white": to-rgb($white),
-            "body": to-rgb($body-color)
-        )
-    ); $utilities-colors: $utilities-colors !global;
+    $utilities-colors: $theme-colors-rgb; $utilities-colors: $utilities-colors !global; // do not change!
+    $utilities-text: map-merge(
+            $utilities-colors,
+            (
+                "black": to-rgb($black),
+                "white": to-rgb($white),
+                "body": to-rgb($body-color)
+            )
+    ); $utilities-text: $utilities-text !global;
+
+    $utilities-bg: map-merge(
+            $utilities-colors,
+            (
+                "black": to-rgb($black),
+                "white": to-rgb($white),
+                "body": to-rgb($body-bg)
+            )
+    ); $utilities-bg: $utilities-bg !global;
     */
-    // $utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text"); $utilities-text-colors: $utilities-text-colors !global; // map-loop($utilities-colors, rgba-css-var, "$key", "text")
-    // $utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg"); $utilities-bg-colors: $utilities-bg-colors !global; // map-loop($utilities-colors, rgba-css-var, "$key", "bg")
 
 
     // Links
@@ -1142,7 +1151,7 @@
     // $dropdown-box-shadow: $box-shadow; $dropdown-box-shadow: $dropdown-box-shadow !global; // $box-shadow
 
     // $dropdown-link-color: $gray-900; $dropdown-link-color: $dropdown-link-color !global; // $gray-900
-    // $dropdown-link-hover-color: shade-color($gray-900, 10%); $dropdown-link-hover-color: $dropdown-link-hover-color !global; // shade-color($gray-900, 10%)
+    // $dropdown-link-hover-color: shade-color($dropdown-link-color, 10%); $dropdown-link-hover-color: $dropdown-link-hover-color !global; // shade-color($dropdown-link-color, 10%)
     // $dropdown-link-hover-bg: $gray-200; $dropdown-link-hover-bg: $dropdown-link-hover-bg !global; // $gray-200
 
     // $dropdown-link-active-color: $component-active-color; $dropdown-link-active-color: $dropdown-link-active-color !global; // $component-active-color

src/templates/_base.njk

@@ -12,7 +12,7 @@
         <!-- Optional JavaScript -->
         <!-- jQuery first if needed then Bootstrap JS and your own script at the end -->
         <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
-        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha256-KuvCVS19rfTjoLgMyDDCdOkRRlhNrY4psEM4uezts2M=" crossorigin="anonymous"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
         <script src="js/custom.js"></script>
         #}
     </body>