Toast color theme loop

src/scss/_toasts.scss

@@ -7,76 +7,89 @@
 }
 
 .toast .toast-body {
-  --#{$prefix}toast-color: #{$black};
-  --#{$prefix}toast-bg: #{$gray-100};
+  //--#{$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-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};
+//}
 
-.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
+//
+@each $name, $color in $theme-colors {
+  .toast-#{$name} {
+    --#{$prefix}toast-header-color: #{color-contrast($color)};
+    --#{$prefix}toast-header-bg: #{$color};
+    --#{$prefix}toast-header-border-color: #{$color};
+    --#{$prefix}toast-border-color: #{$color};
+    --#{$prefix}toast-bg: #{$color};
+  }
 }