remove - vars, update docs to generate from data yml files, update mixins, and generate card, button, bg, and color classes from the sass map

1 files changed, 9 insertions, 32 deletions

diff --git a/scss/_card.scss b/scss/_card.scss
index 436df300fa..df5c20fe12 100644
--- a/scss/_card.scss
+++ b/scss/_card.scss
@@ -105,42 +105,19 @@
 // Background variations
 //
 
-.card-primary {
-  @include card-variant($brand-primary, $brand-primary);
-}
-.card-success {
-  @include card-variant($brand-success, $brand-success);
-}
-.card-info {
-  @include card-variant($brand-info, $brand-info);
-}
-.card-warning {
-  @include card-variant($brand-warning, $brand-warning);
-}
-.card-danger {
-  @include card-variant($brand-danger, $brand-danger);
+@each $color, $value in $theme-colors {
+  .card-#{$color} {
+    @include card-variant($value, $value);
+  }
 }
 
-// Remove all backgrounds
-.card-outline-primary {
-  @include card-outline-variant($btn-primary-bg);
-}
-.card-outline-secondary {
-  @include card-outline-variant($btn-secondary-border-color);
-}
-.card-outline-info {
-  @include card-outline-variant($btn-info-bg);
-}
-.card-outline-success {
-  @include card-outline-variant($btn-success-bg);
-}
-.card-outline-warning {
-  @include card-outline-variant($btn-warning-bg);
-}
-.card-outline-danger {
-  @include card-outline-variant($btn-danger-bg);
+@each $color, $value in $theme-colors {
+  .card-outline-#{$color} {
+    @include card-variant($value, $value);
+  }
 }
 
+
 //
 // Inverse text within a card for use with dark backgrounds
 //