Updated - include all colors as text-color classes

components.html

@@ -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.3</span></li>
+							<li><span class="badge badge-outline-dark js-version">v1.5.4</span></li>
 						</ul>
 					</div>
 					<div class="col-xs-6 col-md-3">

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.3</span></li>
+							<li><span class="badge badge-outline-dark js-version">v1.5.4</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.3",
+  "version": "1.5.4",
   "description": "Layered design system, based on Bootstrap",
   "style": "dist/layered.css",
   "sass": "src/layered.scss",

src/layered.scss

@@ -2,7 +2,6 @@
 // Layered Design System variables
 @import 'variables';
 
-
 // Bootstrap files
 // @import '~bootstrap';
 // OR
@@ -11,6 +10,10 @@
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
 
+$spacers: map-merge($spacers, (
+  6: $spacer * 4,
+));
+
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/utilities";
 
@@ -33,6 +36,23 @@ $utilities: map-merge(
   )
 );
 
+$utilities: map-merge(
+  $utilities,
+  (
+    "color": map-merge(
+      map-get($utilities, "color"),
+      (
+        values: map-merge(
+          map-get(map-get($utilities, "color"), "values"),
+          (
+            $all-colors
+          ),
+        ),
+      ),
+    ),
+  )
+);
+
 // temp
 .bg-primary-light {
 	background-color: $purple-300;