switch from list to map for coloring classes

diff --git a/docs/pages/badge.md b/docs/pages/badge.md
index d09e57642feebe5f66709cf8e1d1ef50d4a8dacc..3cc33e1a5b6b9222ca7a10cb2a8d944cb9a0cd57 100644 (file)
--- a/docs/pages/badge.md
+++ b/docs/pages/badge.md
@@ -34,16 +34,49 @@ Finally, the content itself might need more context for users that use screen re
 Add color classes to give badges additional meaning.
 
 ```html_example
-<span class="badge">1</span>
+<span class="badge primary">1</span>
 <span class="badge secondary">2</span>
 <span class="badge success">3</span>
 <span class="badge alert">A</span>
 <span class="badge warning">B</span>
 ```
 
-<br>
+---
+
+### Custom Colors
+
+If you're using the Sass version of Foundation, you can customize the badge classes by editing the `$badge-palette` map in your settings file. The badge palette defaults to `$foundation-palette`.
+
+If you don't need certain colors from the default palette, simply remove them from the list.
+
+```scss
+$badge-palette: map-remove($foundation-palette, (
+    primary,
+    secondary
+)) !default;
+```  
+
+Or you can add more colors to the default palette.
+
+```scss
+$badge-palette: map-merge($foundation-palette, (
+    purple: #bb00ff
+)) !default;
+```
+
+Or you can define your own custom badge palette.
+
+```scss
+$badge-palette: (
+    black: #000000,
+    red: #ff0000,
+    purple: #bb00ff
+) !default;
+```
+
+---
 
-The `$badge-classes` list in your settings file determines which colors in `$foundation-palette` will generate color classes. If you don't need a certain badge class, simply remove it from the list.
+### Text Colors
 
 The text color for each badge class is determined by either `$badge-color` or `$badge-color-alt`, whichever settings variable has more contrast.
 
@@ -53,7 +86,7 @@ The text color for each badge class is determined by either `$badge-color` or `$
 
 ---
 
-### With Icons
+## Icons
 
 An icon can be used in place of text. We're using the [Foundation icon font](http://zurb.com/playground/foundation-icon-fonts-3) here, but any icon fonts or image-based icons will work fine.
 

diff --git a/docs/pages/button.md b/docs/pages/button.md
index 1813fb4b8277862439c17fb9a2a31733d8e6ceb9..c556f12fab1c54704277bfaef6d33bb6d361265f 100644 (file)
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@ -49,15 +49,49 @@ Additional classes can be added to your button to change its size and shape.
 Add color classes to give buttons additional meaning.
 
 ```html_example
-<a class="button" href="#">Primary</a>
+<a class="button primary" href="#">Primary</a>
 <a class="button secondary" href="#">Secondary</a>
 <a class="button success" href="#">Success</a>
 <a class="button alert" href="#">Alert</a>
 <a class="button warning" href="#">Warning</a>
-<a class="button disabled" href="#">Disabled</a>
 ```
 
-The `$button-classes` list in your settings file determines which colors in `$foundation-palette` will generate color classes. If you don't need a certain button class, simply remove it from the list.
+---
+
+### Custom Colors
+
+If you're using the Sass version of Foundation, you can customize the button classes by editing the `$button-palette` map in your settings file. The button palette defaults to `$foundation-palette`.
+
+If you don't need certain colors from the default palette, simply remove them from the list.
+
+```scss
+$button-palette: map-remove($foundation-palette, (
+    primary,
+    secondary
+)) !default;
+```  
+
+Or you can add more colors to the default palette.
+
+```scss
+$button-palette: map-merge($foundation-palette, (
+    purple: #bb00ff
+)) !default;
+```
+
+Or you can define your own custom button palette.
+
+```scss
+$button-palette: (
+    black: #000000,
+    red: #ff0000,
+    purple: #bb00ff
+) !default;
+```
+
+---
+
+### Text Colors
 
 The text color for each button class is determined by either `$button-color` or `$button-color-alt`, whichever settings variable has more contrast.
 
@@ -65,8 +99,18 @@ The text color for each button class is determined by either `$button-color` or
   <p>The default settings meet WCAG 2.0 level AA contrast requirements. Be sure to [check the contrast](http://webaim.org/resources/contrastchecker/) when changing color variables. To give all buttons the same color text, set `$button-color` and `$button-color-alt` to the same value &mdash; but know that doing so may decrease accessibility.</p>
 </div>
 
+---
+
+### Disabled Buttons
+
 The `.disabled` class will give buttons a faded appearance. The class is a purely visual style, and won't actually disable a control. For `<button>` elements, you can add the `disabled` attribute to both disable and style it. If you want to disable a link, you should add the `aria-disabled` attribute to mark it as disabled for assistive technology.
 
+
+```html_example
+<button type="button" class="button" disabled>Disabled</button>
+<a class="button disabled" href="#" aria-disabled>Disabled</a>
+```
+
 ---
 
 ## Hollow Style

diff --git a/docs/pages/label.md b/docs/pages/label.md
index 1484e49b94bd60d703b2d2d00e5b0919ee766b3b..7af4836a765f3bb91a47f54c1c1a345e172487f2 100644 (file)
--- a/docs/pages/label.md
+++ b/docs/pages/label.md
@@ -36,16 +36,49 @@ If an element is described by multiple labels, place multiple IDs inside of `ari
 Add color classes to give labels additional meaning.
 
 ```html_example
-<span class="label">Primary Label</span>
+<span class="label primary">Primary Label</span>
 <span class="label secondary">Secondary Label</span>
 <span class="label success">Success Label</span>
 <span class="label alert">Alert Label</span>
 <span class="label warning">Warning Label</span>
 ```
 
-<br>
+---
+
+### Custom Colors
+
+If you're using the Sass version of Foundation, you can customize the label classes by editing the `$label-palette` map in your settings file. The label palette defaults to `$foundation-palette`.
+
+If you don't need certain colors from the default palette, simply remove them from the list.
+
+```scss
+$label-palette: map-remove($foundation-palette, (
+    primary,
+    secondary
+)) !default;
+```  
+
+Or you can add more colors to the default palette.
+
+```scss
+$label-palette: map-merge($foundation-palette, (
+    purple: #bb00ff
+)) !default;
+```
+
+Or you can define your own custom label palette.
+
+```scss
+$label-palette: (
+    black: #000000,
+    red: #ff0000,
+    purple: #bb00ff
+) !default;
+```
+
+---
 
-The `$label-classes` list in your settings file determines which colors in `$foundation-palette` will generate color classes. If you don't need a certain badge class, simply remove it from the list.
+### Text Colors
 
 The text color for each label class is determined by either `$label-color` or `$label-color-alt`, whichever settings variable has more contrast.
 
@@ -55,7 +88,7 @@ The text color for each label class is determined by either `$label-color` or `$
 
 ---
 
-### With Icons
+## Icons
 
 An icon can be dropped into a label just fine. We're using the [Foundation icon font](http://zurb.com/playground/foundation-icon-fonts-3) here, but any icon fonts or image-based icons will work fine.
 

diff --git a/scss/components/_badge.scss b/scss/components/_badge.scss
index c433d8aa247f0386e2c3bee4961a9b951b57aef0..3d5b6bab79420d56724b5f345ba8f0c5f70dc12a 100644 (file)
--- a/scss/components/_badge.scss
+++ b/scss/components/_badge.scss
@@ -18,9 +18,9 @@ $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;
+/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
+/// @type Map
+$badge-palette: $foundation-palette !default;
 
 /// Default padding inside badges.
 /// @type Number
@@ -53,9 +53,8 @@ $badge-font-size: 0.6rem !default;
     background: $badge-background;
     color: $badge-color;
 
-    @each $class in $badge-classes {
-      $color: get-color($class);
-      &.#{$class} {
+    @each $name, $color in $badge-palette {
+      &.#{$name} {
         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 b3c3beb7c667e2c050500b52a347f74ef1bfafc9..0d7945be17a68e7b9f0d904df4125424cc4626a5 100644 (file)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -47,9 +47,9 @@ $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;
+/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
+/// @type Map
+$button-palette: $foundation-palette !default;
 
 /// opacity for a disabled button.
 /// @type List
@@ -230,19 +230,18 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
     &.expanded { @include button-expand; }
 
     // Colors
-    @each $class in $button-classes {
-      $color: get-color($class);
+    @each $name, $color in $button-palette {
       @if $button-fill != hollow {
-        &.#{$class} {
+        &.#{$name} {
           @include button-style($color, auto, auto);
         }
       }
       @else {
-        &.#{$class} {
+        &.#{$name} {
           @include button-hollow-style($color);
         }
 
-        &.#{$class}.dropdown::after {
+        &.#{$name}.dropdown::after {
           border-top-color: $color;
         }
       }
@@ -254,9 +253,8 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
         @include button-hollow;
         @include button-hollow-style;
 
-        @each $class in $button-classes {
-          $color: get-color($class);
-          &.#{$class} {
+        @each $name, $color in $button-palette {
+          &.#{$name} {
             @include button-hollow-style($color);
           }
         }
@@ -268,9 +266,8 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
     &[disabled] {
       @include button-disabled;
 
-      @each $class in $button-classes {
-        $color: get-color($class);
-        &.#{$class} {
+      @each $name, $color in $button-palette {
+        &.#{$name} {
           @include button-disabled($color);
         }
       }

diff --git a/scss/components/_label.scss b/scss/components/_label.scss
index d3b81cae2f6ca47b6bb32f98db3acb2c6d3cbf0e..cf7cf7da4c68bcc5fbee698391172ec2d25bc077 100644 (file)
--- a/scss/components/_label.scss
+++ b/scss/components/_label.scss
@@ -18,9 +18,9 @@ $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;
+/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.
+/// @type Map
+$label-palette: $foundation-palette !default;
 
 /// Default font size for labels.
 /// @type Number
@@ -54,9 +54,8 @@ $label-radius: $global-radius !default;
     background: $label-background;
     color: $label-color;
 
-    @each $class in $label-classes {
-      $color: get-color($class);
-      &.#{$class} {
+    @each $name, $color in $label-palette {
+      &.#{$name} {
         background: $color;
         color: color-pick-contrast($color, ($label-color, $label-color-alt));
       }