feat(standard-styling): Add button color map

falcon/_dev/css/theme/custom/_custom.scss

@@ -5,14 +5,16 @@ I am loosely following the 7 in 1 structure for better organization of the style
 https://medium.com/@diyorbekjuraev77/be-a-master-at-creating-the-7-1-sass-pattern-776fdfb5a3b1
 
 ⚠️NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap
+Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/articles/bs5-variables/index.html
+
 */
 
 //Abstracts: Things used throughout the site such as utility classes and generic overrides.
 @import "abstracts/utilities";
 //@import "abstracts/base";
-//@import "abstracts/utilities";
 
 // Components: parts of the theme itself that are not associated with a module.
+//@import "components/buttons";
 @import "components/forms";
 
 // Modules: Styling for specific modules.
@@ -25,5 +27,7 @@ https://medium.com/@diyorbekjuraev77/be-a-master-at-creating-the-7-1-sass-patter
 @import "layout/swiper";
 
 // Pages
-//@import "pages/category";
+//@import "pages/checkout";
+//@import "pages/home";
+//@import "pages/listing";
 //@import "pages/product";

falcon/_dev/css/theme/custom/components/_buttons.scss

@@ -0,0 +1,26 @@
+// To customize text colors per button, use this map
+$btn-color: (
+    "primary": $white,
+    "secondary": $white,
+    "light": $primary,
+    "dark": $white,
+);
+
+// Generate button color overrides from the map
+@each $name, $color in $btn-color {
+    .btn-#{$name},
+    .btn-lg-#{$name},
+    .btn-sm-#{$name} {
+        color: $color !important;
+    }
+    .btn-outline-#{$name},
+    .btn-lg-outline-#{$name},
+    .btn-sm-outline-#{$name} {
+        color: $color;
+        &:hover,
+        &:focus,
+        &:active {
+            color: $color !important;
+        }
+    }
+}