update button,badge,label docs for new a11y palette

diff --git a/docs/pages/badge.md b/docs/pages/badge.md
index 0b321daaced6c0042d58dc71ed52f996ede3ef4c..f5ed60e3e876ec11178a1f0cc04403fdbf74ee9e 100644 (file)
--- a/docs/pages/badge.md
+++ b/docs/pages/badge.md
@@ -31,13 +31,18 @@ Finally, the content itself might need more context for users that use screen re
 
 ## Coloring
 
-Badges can be colored with the same classes used for buttons and other components.
+Add color classes to give badges additional meaning. These classes are generated by the keys in the `$foundation-palette` map in your settings file. Each badge's text color is determined by either `$badge-color` or `$badge-color-alt`, whichever settings variable has more contrast.
+
+<div class="primary callout">
+  <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 badges the same color text, set `$badge-color` and `$badge-color-alt` to the same value &mdash; but know that doing so may decrease accessibility.</p>
+</div>
 
 ```html_example
-<span class="secondary badge">2</span>
-<span class="success badge">3</span>
-<span class="alert badge">A</span>
-<span class="warning badge">B</span>
+<span class="badge">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>
 ```
 
 ---
@@ -47,7 +52,7 @@ Badges can be colored with the same classes used for buttons and other component
 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.
 
 ```html_example
-<span class="secondary badge"><i class="fi-share"></i></span>
-<span class="success badge"><i class="fi-check"></i></span>
-<span class="warning badge"><i class="fi-wrench"></i></span>
+<span class="badge secondary"><i class="fi-share"></i></span>
+<span class="badge success"><i class="fi-check"></i></span>
+<span class="badge warning"><i class="fi-wrench"></i></span>
 ```

diff --git a/docs/pages/button.md b/docs/pages/button.md
index 1b5fc15dcc2c3c159a300433677323c18c1e7d7a..4db45df2a03395922d47538a54dc47822b845ddd 100644 (file)
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@ -34,19 +34,25 @@ A basic button can be created with minimal markup. Because buttons can be used f
 Additional classes can be added to your button to change its size and shape.
 
 ```html_example
-<a class="tiny button" href="#">So Tiny</a>
-<a class="small button" href="#">So Small</a>
+<a class="button tiny" href="#">So Tiny</a>
+<a class="button small" href="#">So Small</a>
 <a class="button" href="#">So Basic</a>
-<a class="large button" href="#">So Large</a>
-<a class="expanded button" href="#">Such Expand</a>
-<a class="small expanded button" href="#">Wow, Small Expand</a>
+<a class="button large" href="#">So Large</a>
+<a class="button expanded" href="#">Such Expand</a>
+<a class="button small expanded" href="#">Wow, Small Expand</a>
 ```
 
 ---
 
 ## Coloring
 
-Give a button additional meaning by adding a coloring class, or `.disabled` to create a faded appearance.
+Add color classes to give buttons additional meaning. These classes are generated by the keys in the `$foundation-palette` map in your settings file. Each button's text color is determined by either `$button-color` or `$button-color-alt`, whichever settings variable has more contrast.
+
+<div class="primary callout">
+  <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>
+
+The `.disabled` class will give buttons a faded appearance.
 
 <div class="primary callout">
   <p>The <code>.disabled</code> class is a purely visual style, and won't actually disable a control. For <code>&lt;button&gt;</code> elements, you can add the <code>disabled</code> attribute to disable it. If you want to disable a link, you should add the `aria-disabled` attribute to mark it as disabled for assistive technology.</p>
@@ -54,11 +60,11 @@ Give a button additional meaning by adding a coloring class, or `.disabled` to c
 
 ```html_example
 <a class="button" href="#">Primary</a>
-<a class="secondary button" href="#">Secondary</a>
-<a class="success button" href="#">Success</a>
-<a class="alert button" href="#">Alert</a>
-<a class="warning button" href="#">Warning</a>
-<a class="disabled button" href="#">Disabled</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>
 ```
 
 ---
@@ -68,11 +74,12 @@ Give a button additional meaning by adding a coloring class, or `.disabled` to c
 Add the `.hollow` class to a button to give it a hollow style. Change the `$button-fill` variable in your settings file to `hollow` to make this the default style. Changing this setting will remove the `.hollow` class from your CSS.
 
 ```html_example
-<button class="hollow button" href="#">Primary Color</button>
-<button class="secondary hollow button" href="#">Secondary Color</button>
-<button class="success hollow button" href="#">Success Color</button>
-<button class="alert hollow button" href="#">Alert Color</button>
-<button class="warning hollow button" href="#">Warning Color</button>
+<button class="hollow button" href="#">Primary</button>
+<button class="hollow button secondary" href="#">Secondary</button>
+<button class="hollow button success" href="#">Success</button>
+<button class="hollow button alert" href="#">Alert</button>
+<button class="hollow button warning" href="#">Warning</button>
+<button class="hollow button" href="#" disabled>Disabled</button>
 ```
 
 ---
@@ -86,11 +93,11 @@ Add a dropdown arrow to your button with the `.dropdown` class.
 </div>
 
 ```html_example
-<button class="tiny dropdown button">Dropdown Button</button>
-<button class="small dropdown button">Dropdown Button</button>
+<button class="dropdown button tiny ">Dropdown Button</button>
+<button class="dropdown button small ">Dropdown Button</button>
 <button class="dropdown button">Dropdown Button</button>
-<button class="large dropdown button">Dropdown Button</button>
-<button class="expanded dropdown button">Dropdown Button</button>
+<button class="dropdown button large ">Dropdown Button</button>
+<button class="dropdown button expanded ">Dropdown Button</button>
 ```
 
 ---

diff --git a/docs/pages/label.md b/docs/pages/label.md
index fd55a3003998276f5502c8f39e25f9484e823c98..56bcf450758dc969cdff8837297443f711cb84a9 100644 (file)
--- a/docs/pages/label.md
+++ b/docs/pages/label.md
@@ -33,13 +33,18 @@ If an element is described by multiple labels, place multiple IDs inside of `ari
 
 ## Coloring
 
-Labels can be colored with the same classes used for buttons and other components.
+Add color classes to give labels additional meaning. These classes are generated by the keys in the `$foundation-palette` map in your settings file. Each label's text color is determined by either `$label-color` or `$label-color-alt`, whichever settings variable has more contrast.
+
+<div class="primary callout">
+  <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 labels the same color text, set `$label-color` and `$label-color-alt` to the same value &mdash; but know that doing so may decrease accessibility.</p>
+</div>
 
 ```html_example
-<span class="secondary label">Secondary Label</span>
-<span class="success label">Success Label</span>
-<span class="alert label">Alert Label</span>
-<span class="warning label">Warning Label</span>
+<span class="label">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>
 ```
 
 ---
@@ -49,7 +54,7 @@ Labels can be colored with the same classes used for buttons and other component
 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.
 
 ```html_example
-<span class="alert label"><i class="fi-x-circle"></i> Alert Label</span>
-<span class="warning label"><i class="fi-x"></i> Warning Label</span>
-<span class="info label"><i class="fi-widget"></i> Info Label</span>
+<span class="label alert"><i class="fi-x-circle"></i> Alert Label</span>
+<span class="label warning"><i class="fi-x"></i> Warning Label</span>
+<span class="label info"><i class="fi-widget"></i> Info Label</span>
 ```