From 04d9a3679a03376fab86a1db6a5d140b3cf6510a Mon Sep 17 00:00:00 2001
From: "LEWE, GEORGE" <george.lewe@lhsystems.com>
Date: Tue, 5 Sep 2023 18:34:34 +0200
Subject: [PATCH] Bootstrap color loop for custom toast styles

---
 src/scss/_toasts.scss | 109 ++++++++++++++----------------------------
 1 file changed, 37 insertions(+), 72 deletions(-)

diff --git a/src/scss/_toasts.scss b/src/scss/_toasts.scss
index ec0e2f757..6fce8b927 100644
--- a/src/scss/_toasts.scss
+++ b/src/scss/_toasts.scss
@@ -1,86 +1,51 @@
 /**
  * Custom toast styles to reflect Bootstrap colors
  */
+
+/**
+ * Get subtle BG color.
+ * Returns the subtle bg color for a given color name.
+ *
+ * @param string $value - Bootstrap color name
+ * @return string - Bootstrap subtle bg color
+ */
+@function get-subtle-bg-color($value) {
+  @if $value == "primary" {
+    @return $primary-bg-subtle;
+  } @else if $value == "secondary" {
+    @return $secondary-bg-subtle;
+  } @else if $value == "success" {
+    @return $success-bg-subtle;
+  } @else if $value == "info" {
+    @return $info-bg-subtle;
+  } @else if $value == "warning" {
+    @return $warning-bg-subtle;
+  } @else if $value == "danger" {
+    @return $danger-bg-subtle;
+  } @else if $value == "light" {
+    @return $light-bg-subtle;
+  } @else if $value == "dark" {
+    @return $dark-bg-subtle;
+  } @else {
+    @return $value;
+  }
+}
+
+//
+// Adjusting size and margin
+//
 .toast {
   min-width: 300px;
   margin: 8px;
 }
 
+//
+// Adding a bottom border radius the toast body
+//
 .toast .toast-body {
-  //--#{$prefix}toast-color: #{$black};
-  //--#{$prefix}toast-bg: #{$gray-100};
   --#{$prefix}toast-border-radius: 0 0 .25rem .25rem;
 }
 
-//.toast-danger {
-//  --#{$prefix}toast-header-color: #{$white};
-//  --#{$prefix}toast-header-bg: #{$danger};
-//  --#{$prefix}toast-header-border-color: #{$danger};
-//  --#{$prefix}toast-border-color: #{$danger};
-//  --#{$prefix}toast-color: #{$white};
-//  --#{$prefix}toast-bg: #{$red-300};
-//}
-//
-//.toast-dark {
-//  --#{$prefix}toast-header-color: #{$white};
-//  --#{$prefix}toast-header-bg: #{$dark};
-//  --#{$prefix}toast-header-border-color: #{$dark};
-//  --#{$prefix}toast-border-color: #{$dark};
-//  --#{$prefix}toast-color: #{$white};
-//  --#{$prefix}toast-bg: #{$gray-600};
-//}
-//
-//.toast-info {
-//  --#{$prefix}toast-header-color: #{$white};
-//  --#{$prefix}toast-header-bg: #{$info};
-//  --#{$prefix}toast-header-border-color: #{$info};
-//  --#{$prefix}toast-border-color: #{$info};
-//  --#{$prefix}toast-bg: #{$cyan-300};
-//}
-//
-//.toast-light {
-//  --#{$prefix}toast-header-color: #{$gray-900};
-//  --#{$prefix}toast-header-bg: #{$light};
-//  --#{$prefix}toast-header-border-color: #{$light};
-//  --#{$prefix}toast-border-color: #{$light};
-//  --#{$prefix}toast-color: #{$gray-900};
-//  --#{$prefix}toast-bg: #{$white};
-//}
-//
-//.toast-primary {
-//  --#{$prefix}toast-header-color: #{$white};
-//  --#{$prefix}toast-header-bg: #{$primary};
-//  --#{$prefix}toast-header-border-color: #{$primary};
-//  --#{$prefix}toast-border-color: #{$primary};
-//  --#{$prefix}toast-color: #{$white};
-//  --#{$prefix}toast-bg: #{$blue-300};
-//}
-//
-//.toast-secondary {
-//  --#{$prefix}toast-header-color: #{$white};
-//  --#{$prefix}toast-header-bg: #{$secondary};
-//  --#{$prefix}toast-header-border-color: #{$secondary};
-//  --#{$prefix}toast-border-color: #{$secondary};
-//  --#{$prefix}toast-bg: #{$gray-400};
-//}
-//
-//.toast-success {
-//  --#{$prefix}toast-header-color: #{$white};
-//  --#{$prefix}toast-header-bg: #{$success};
-//  --#{$prefix}toast-header-border-color: #{$success};
-//  --#{$prefix}toast-border-color: #{$success};
-//  --#{$prefix}toast-color: #{$white};
-//  --#{$prefix}toast-bg: #{$green-300};
-//}
-//
-//.toast-warning {
-//  --#{$prefix}toast-header-color: #{$white};
-//  --#{$prefix}toast-header-bg: #{$warning};
-//  --#{$prefix}toast-header-border-color: #{$warning};
-//  --#{$prefix}toast-border-color: #{$warning};
-//  --#{$prefix}toast-bg: #{$yellow-300};
-//}
-
 //
 // Color variants
 //
@@ -90,6 +55,6 @@
     --#{$prefix}toast-header-bg: #{$color};
     --#{$prefix}toast-header-border-color: #{$color};
     --#{$prefix}toast-border-color: #{$color};
-    --#{$prefix}toast-bg: #{$color};
+    --#{$prefix}toast-bg: #{get-subtle-bg-color($name)};
   }
 }