Background and color utility classes & map

falcon/_dev/css/abstracts/variables/bootstrap/_colors.scss

@@ -1,6 +1,6 @@
 // Color system
 
-$white:    #fff;
+$white: #fff;
 $gray-100: #f8f9fa;
 $gray-200: #e9ecef;
 $gray-300: #dee2e6;
@@ -10,24 +10,33 @@ $gray-600: #6c757d;
 $gray-700: #495057;
 $gray-800: #343a40;
 $gray-900: #212529;
-$black:    #000;
+$black: #000;
 
-$blue:    #007bff;
-$indigo:  #6610f2;
-$purple:  #6f42c1;
-$pink:    #e83e8c;
-$red:     #dc3545;
-$orange:  #fd7e14;
-$yellow:  #ffc107;
-$green:   #28a745;
-$teal:    #20c997;
-$cyan:    #17a2b8;
+$blue: #007bff;
+$indigo: #6610f2;
+$purple: #6f42c1;
+$pink: #e83e8c;
+$red: #dc3545;
+$orange: #fd7e14;
+$yellow: #ffc107;
+$green: #28a745;
+$teal: #20c997;
+$cyan: #17a2b8;
 
-$primary:       $blue;
-$secondary:     $gray-600;
-$success:       $green;
-$info:          $cyan;
-$warning:       #ff9a52;
-$danger:        $red;
-$light:         $gray-100;
-$dark:          $gray-800;
+$success: $green;
+$info: $cyan;
+$warning: #ff9a52;
+$danger: $red;
+$light: $gray-100;
+$dark: $gray-800;
+
+$primary: $blue;
+$secondary: $gray-600;
+
+// Map for utility classes
+$theme-colors: (
+    "primary": $primary,
+    "secondary": $secondary,
+    //"tertiary": $tertiary,
+    //"quaternary": $quaternary,,
+);

falcon/_dev/css/theme/custom/abstracts/_utilities.scss

@@ -0,0 +1,12 @@
+// Color utility classes
+@each $name, $color in $theme-colors {
+    .bg-#{$name} {
+        background-color: $color;
+    }
+}
+
+@each $name, $color in $theme-colors {
+    .color-#{$name} {
+        color: $color;
+    }
+}