Updated - Bootstrap to v5.1, colors as bg- class

components.html

@@ -208,33 +208,33 @@ <h6 class="card-text">Named colors</h6>
 								<h6 class="card-text">Light colors</h6>
 								<div class="row mb-4">
 									<div class="col my-1">
-										<div class="p-2 rounded bg-primary-light">
+										<div class="p-2 rounded bg-purple-300">
 											<p class="mb-2"><code>#xxx</code></p>
-											<p class="text-white mb-0">primary-light</p>
+											<p class="text-white mb-0">purple-300</p>
 										</div>
 									</div>
 									<div class="col my-1">
-										<div class="p-2 rounded bg-primary-lighter">
+										<div class="p-2 rounded bg-purple-100">
 											<p class="mb-2"><code>#xxx</code></p>
-											<p class="mb-0">primary-lighter</p>
+											<p class="mb-0">purple-100</p>
 										</div>
 									</div>
 									<div class="col my-1">
-										<div class="p-2 rounded bg-secondary-light">
+										<div class="p-2 rounded bg-gray-400">
 											<p class="mb-2"><code>#xxx</code></p>
-											<p class="mb-0">secondary-light</p>
+											<p class="mb-0">gray-400</p>
 										</div>
 									</div>
 									<div class="col my-1">
-										<div class="p-2 rounded bg-info-light">
+										<div class="p-2 rounded bg-blue-100">
 											<p class="mb-2"><code>#xxx</code></p>
-											<p class="mb-0">info-light</p>
+											<p class="mb-0">blue-100</p>
 										</div>
 									</div>
 									<div class="col my-1">
-										<div class="p-2 rounded bg-success-light">
+										<div class="p-2 rounded bg-green-100">
 											<p class="mb-2"><code>#xxx</code></p>
-											<p class="mb-0">success-light</p>
+											<p class="mb-0">green-100</p>
 										</div>
 									</div>
 									<div class="col my-1">
@@ -553,7 +553,7 @@ <h5 class="subtitle">Layered Design</h5>
 						<ul class="nicer-list">
 							<li><a href="#">Submenu</a></li>
 							<li><a href="#">Support</a></li>
-							<li><span class="badge badge-outline-dark js-version">v1.5.2</span></li>
+							<li><span class="badge badge-outline-dark js-version">v1.5.3</span></li>
 						</ul>
 					</div>
 					<div class="col-xs-6 col-md-3">

dist/layered.js.LICENSE.txt

@@ -1,5 +1,5 @@
 /*!
-  * Bootstrap v5.0.2 (https://getbootstrap.com/)
+  * Bootstrap v5.1.0 (https://getbootstrap.com/)
   * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */

index.html

@@ -204,7 +204,7 @@ <h5 class="subtitle">Layered Design</h5>
 						<ul class="nicer-list">
 							<li><a href="#">Submenu</a></li>
 							<li><a href="#">Support</a></li>
-							<li><span class="badge badge-outline-dark js-version">v1.5.2</span></li>
+							<li><span class="badge badge-outline-dark js-version">v1.5.3</span></li>
 						</ul>
 					</div>
 					<div class="col-xs-6 col-md-3">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layered/layered-design",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "Layered design system, based on Bootstrap",
   "style": "dist/layered.css",
   "sass": "src/layered.scss",

src/layered.scss

@@ -11,11 +11,51 @@
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 
-@import 'utilities';
-
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/utilities";
 
+$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans, $grays);
+
+$utilities: map-merge(
+  $utilities,
+  (
+    "background-color": map-merge(
+      map-get($utilities, "background-color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "background-color"), "values"),
+          (
+            $all-colors
+          ),
+        ),
+      ),
+    ),
+  )
+);
+
+// temp
+.bg-primary-light {
+	background-color: $purple-300;
+}
+.bg-primary-lighter {
+	background-color: $purple-100;
+}
+.bg-secondary-light {
+	background-color: $gray-300;
+}
+.bg-info-light {
+	background-color: $blue-100;
+}
+.bg-success-light {
+	background-color: $green-100;
+}
+.bg-warning-light {
+	background-color: $orange-100;
+}
+.bg-danger-light {
+	background-color: $red-100;
+}
+
 
 // Bootstrap Layout & components
 @import "~bootstrap/scss/root";