From efa88a508a85a44b6b91788267af8723351b6c4a Mon Sep 17 00:00:00 2001
From: Isabelle <isabelle@dewebsmid.nl>
Date: Wed, 24 Dec 2025 11:52:12 +0100
Subject: [PATCH] feat(standard-styling): Add button color map

---
 falcon/_dev/css/theme/custom/_custom.scss     |  8 +-
 .../css/theme/custom/abstracts/_mixins.scss   | 73 +++++++++++++++++++
 .../css/theme/custom/components/_buttons.scss | 26 +++++++
 3 files changed, 105 insertions(+), 2 deletions(-)
 create mode 100644 falcon/_dev/css/theme/custom/abstracts/_mixins.scss
 create mode 100644 falcon/_dev/css/theme/custom/components/_buttons.scss

diff --git a/falcon/_dev/css/theme/custom/_custom.scss b/falcon/_dev/css/theme/custom/_custom.scss
index fea6de0..6dcd960 100644
--- a/falcon/_dev/css/theme/custom/_custom.scss
+++ b/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";
diff --git a/falcon/_dev/css/theme/custom/abstracts/_mixins.scss b/falcon/_dev/css/theme/custom/abstracts/_mixins.scss
new file mode 100644
index 0000000..d4ec7ab
--- /dev/null
+++ b/falcon/_dev/css/theme/custom/abstracts/_mixins.scss
@@ -0,0 +1,73 @@
+// Bootstrap 5-style responsive mixins (more intuitive than Bootstrap 4)
+// Learn the difference here https://getbootstrap.com/docs/5.0/migration/#sass
+
+@mixin bs5-media-breakpoint-up($name) {
+    $min: map-get($grid-breakpoints, $name);
+    @if $min and $min > 0 {
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin bs5-media-breakpoint-down($name) {
+    $max: map-get($grid-breakpoints, $name);
+    @if $max {
+        @media (max-width: calc(#{$max} - 0.02px)) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin bs5-media-breakpoint-between($lower, $upper) {
+    $min: map-get($grid-breakpoints, $lower);
+    $max: map-get($grid-breakpoints, $upper);
+    @if $min and $max {
+        @media (min-width: $min) and (max-width: calc(#{$max} - 0.02px)) {
+            @content;
+        }
+    }
+}
+
+@mixin bs5-media-breakpoint-only($name) {
+    $breakpoint-names: map-keys($grid-breakpoints);
+    $index: index($breakpoint-names, $name);
+    $next-name: nth($breakpoint-names, $index + 1);
+
+    @include bs5-media-breakpoint-between($name, $next-name) {
+        @content;
+    }
+}
+
+// Mixin to add an after pseudo-element with a mask image to customize button colors
+/* Example: 
+
+.btn-arrow-right{
+    &::after {
+        @include btn-after("../img/arrow-right.svg");
+    }
+}
+    
+*/
+
+@mixin btn-after($url, $color: currentColor) {
+    content: "";
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    margin-left: 0.5em;
+    vertical-align: middle;
+    background-color: currentColor;
+    mask-image: url(#{$url});
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    -webkit-mask-image: url(#{$url});
+    -webkit-mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+}
diff --git a/falcon/_dev/css/theme/custom/components/_buttons.scss b/falcon/_dev/css/theme/custom/components/_buttons.scss
new file mode 100644
index 0000000..3a64197
--- /dev/null
+++ b/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;
+        }
+    }
+}