More color! Plus new package.json

Author: gelder-ux

css/css-utilities.css

@@ -19,15 +19,51 @@
 .bg-white {
   background-color: #ffffff; }
 
+.bg-black {
+  background-color: #000000; }
+
+.bg-gray {
+  background-color: #333; }
+
 .bg-gray-light {
   background-color: #efefef; }
 
 .bg-gray-dark {
   background-color: #222; }
 
+.text-primary {
+  color: blue; }
+
+.text-secondary {
+  color: red; }
+
+.text-tertiary {
+  color: purple; }
+
+.text-success {
+  color: #e1ffe1; }
+
+.text-warning {
+  color: orange; }
+
+.text-danger {
+  color: red; }
+
 .text-white {
   color: #ffffff; }
 
+.text-black {
+  color: #000000; }
+
+.text-gray {
+  color: #333; }
+
+.text-gray-light {
+  color: #efefef; }
+
+.text-gray-dark {
+  color: #222; }
+
 .border {
   border: 1px solid #222; }
 

scss/_color.scss

@@ -27,6 +27,14 @@
 	background-color: $color-white;
 }
 
+.bg-black {
+	background-color: $color-black;
+}
+
+.bg-gray {
+	background-color: $color-gray;
+}
+
 .bg-gray-light {
 	background-color: $color-gray-light;
 }
@@ -36,10 +44,46 @@
 }
 
 // text color
+.text-primary {
+	color: $color-primary;
+}
+
+.text-secondary {
+	color: $color-secondary;
+}
+
+.text-tertiary {
+	color: $color-tertiary;
+}
+
+.text-success {
+	color: $color-success;
+}
+
+.text-warning {
+	color: $color-warning;
+}
+
+.text-danger {
+	color: $color-danger;
+}
+
 .text-white {
 	color: $color-white;
 }
 
-.text-primary {
-	background-color: $color-primary;
+.text-black {
+	color: $color-black;
+}
+
+.text-gray {
+	color: $color-gray;
+}
+
+.text-gray-light {
+	color: $color-gray-light;
+}
+
+.text-gray-dark {
+	color: $color-gray-dark;
 }