use lists to output coloring classes

diff --git a/scss/components/_badge.scss b/scss/components/_badge.scss
index 768f649f242ada60e9a6630dd453474cd533e728..c433d8aa247f0386e2c3bee4961a9b951b57aef0 100644 (file)
--- a/scss/components/_badge.scss
+++ b/scss/components/_badge.scss
@@ -18,6 +18,10 @@ $badge-color: $white !default;
 /// @type Color
 $badge-color-alt: $black !default;
 
+/// Coloring classes. The names in this list output classes in your CSS, like `.secondary`, `.success`, and so on. Each value must also be in the `$foundation-palette` map.
+/// @type List
+$badge-classes: ( secondary success warning alert ) !default;
+
 /// Default padding inside badges.
 /// @type Number
 $badge-padding: 0.3em !default;
@@ -49,12 +53,11 @@ $badge-font-size: 0.6rem !default;
     background: $badge-background;
     color: $badge-color;
 
-    @each $name, $color in $foundation-palette {
-      @if $name != primary {
-        &.#{$name} {
-          background: $color;
-          color: color-pick-contrast($color, ($badge-color, $badge-color-alt));
-        }
+    @each $class in $badge-classes {
+      $color: get-color($class);
+      &.#{$class} {
+        background: $color;
+        color: color-pick-contrast($color, ($badge-color, $badge-color-alt));
       }
     }
   }

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 01686a6efbf83ad6f2ac09e5c1f27ab08819825b..b3c3beb7c667e2c050500b52a347f74ef1bfafc9 100644 (file)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -47,6 +47,10 @@ $button-sizes: (
   large: 1.25rem,
 ) !default;
 
+/// Coloring classes. The names in this list output classes in your CSS, like `.secondary`, `.success`, and so on. Each value must also be in the `$foundation-palette` map.
+/// @type List
+$button-classes: ( secondary success warning alert ) !default;
+
 /// opacity for a disabled button.
 /// @type List
 $button-opacity-disabled: 0.25 !default;
@@ -226,18 +230,19 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
     &.expanded { @include button-expand; }
 
     // Colors
-    @each $name, $color in $foundation-palette {
+    @each $class in $button-classes {
+      $color: get-color($class);
       @if $button-fill != hollow {
-        &.#{$name} {
+        &.#{$class} {
           @include button-style($color, auto, auto);
         }
       }
       @else {
-        &.#{$name} {
+        &.#{$class} {
           @include button-hollow-style($color);
         }
 
-        &.#{$name}.dropdown::after {
+        &.#{$class}.dropdown::after {
           border-top-color: $color;
         }
       }
@@ -249,8 +254,9 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
         @include button-hollow;
         @include button-hollow-style;
 
-        @each $name, $color in $foundation-palette {
-          &.#{$name} {
+        @each $class in $button-classes {
+          $color: get-color($class);
+          &.#{$class} {
             @include button-hollow-style($color);
           }
         }
@@ -262,8 +268,9 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
     &[disabled] {
       @include button-disabled;
 
-      @each $name, $color in $foundation-palette {
-        &.#{$name} {
+      @each $class in $button-classes {
+        $color: get-color($class);
+        &.#{$class} {
           @include button-disabled($color);
         }
       }

diff --git a/scss/components/_label.scss b/scss/components/_label.scss
index 5f26e91f471d1d9b9d4956dc15468293d72646b1..d3b81cae2f6ca47b6bb32f98db3acb2c6d3cbf0e 100644 (file)
--- a/scss/components/_label.scss
+++ b/scss/components/_label.scss
@@ -18,6 +18,10 @@ $label-color: $white !default;
 /// @type Color
 $label-color-alt: $black !default;
 
+/// Coloring classes. The names in this list output classes in your CSS, like `.secondary`, `.success`, and so on. Each value must also be in the `$foundation-palette` map.
+/// @type List
+$label-classes: ( secondary success warning alert ) !default;
+
 /// Default font size for labels.
 /// @type Number
 $label-font-size: 0.8rem !default;
@@ -50,12 +54,11 @@ $label-radius: $global-radius !default;
     background: $label-background;
     color: $label-color;
 
-    @each $name, $color in $foundation-palette {
-      @if $name != primary {
-        &.#{$name} {
-          background: $color;
-          color: color-pick-contrast($color, ($label-color, $label-color-alt));
-        }
+    @each $class in $label-classes {
+      $color: get-color($class);
+      &.#{$class} {
+        background: $color;
+        color: color-pick-contrast($color, ($label-color, $label-color-alt));
       }
     }
   }