Merge pull request #9319 from andycochran/allypalette

Ally-compliant color palette & functions
foundation · Nov 28, 2016 · 86ebf14 · 86ebf14
2 parents 2fb5963 + 8f12ab5
commit 86ebf14
Show file tree

Hide file tree

Showing 15 changed files with 286 additions and 95 deletions.
diff --git a/docs/pages/badge.md b/docs/pages/badge.md
@@ -47,7 +47,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="info badge"><i class="fi-share"></i></span>
+<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>
 ```
diff --git a/docs/pages/button.md b/docs/pages/button.md
@@ -53,11 +53,12 @@ Give a button additional meaning by adding a coloring class, or `.disabled` to c
 </div>
 
 ```html_example
-<a class="secondary button" href="#">Secondary Color</a>
-<a class="success button" href="#">Success Color</a>
-<a class="alert button" href="#">Alert Color</a>
-<a class="warning button" href="#">Warning Color</a>
-<a class="disabled button" href="#">Disabled Button</a>
+<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>
 ```
 
 ---

diff --git a/scss/_global.scss b/scss/_global.scss
@@ -23,11 +23,11 @@ $global-lineheight: 1.5 !default;
 /// Colors used for buttons, callouts, links, etc. There must always be a color called `primary`.
 /// @type Map
 $foundation-palette: (
-  primary: #2199e8,
-  secondary: #777,
+  primary: #1779ba,
+  secondary: #767676,
   success: #3adb76,
   warning: #ffae00,
-  alert: #ec5840,
+  alert: #cc4b37,
 ) !default;
 
 /// Color used for light gray UI items.

diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss
@@ -20,7 +20,7 @@ $accordion-title-font-size: rem-calc(12) !default;
 
 /// Default text color for items in a Menu.
 /// @type Color
-$accordion-item-color: foreground($accordion-background, $primary-color) !default;
+$accordion-item-color: $primary-color !default;
 
 /// Default background color on hover for items in a Menu.
 /// @type Color
@@ -40,16 +40,18 @@ $accordion-content-border: 1px solid $light-gray !default;
 
 /// Default text color of tab content.
 /// @type Color
-$accordion-content-color: foreground($accordion-content-background, $body-font-color) !default;
+$accordion-content-color: $body-font-color !default;
 
 /// Default padding for tab content.
 /// @type Number | List
 $accordion-content-padding: 1rem !default;
 
 /// Adds styles for an accordion container. Apply this to the same element that gets `data-accordion`.
-@mixin accordion-container {
+@mixin accordion-container (
+  $background: $accordion-background
+) {
   margin-#{$global-left}: 0;
-  background: $accordion-background;
+  background: $background;
   list-style-type: none;
 }
 
@@ -65,26 +67,32 @@ $accordion-content-padding: 1rem !default;
 }
 
 /// Adds styles for the title of an accordion item. Apply this to the link within an accordion item.
-@mixin accordion-title {
+@mixin accordion-title (
+  $padding: $accordion-item-padding,
+  $font-size: $accordion-title-font-size,
+  $color: $accordion-item-color,
+  $border: $accordion-content-border,
+  $background-hover: $accordion-item-background-hover
+) {
   position: relative;
   display: block;
-  padding: $accordion-item-padding;
+  padding: $padding;
 
-  border: $accordion-content-border;
+  border: $border;
   border-bottom: 0;
 
-  font-size: $accordion-title-font-size;
+  font-size: $font-size;
   line-height: 1;
-  color: $accordion-item-color;
+  color: $color;
 
   :last-child:not(.is-active) > & {
-    border-bottom: $accordion-content-border;
+    border-bottom: $border;
     border-radius: 0 0 $global-radius $global-radius;
   }
 
   &:hover,
   &:focus {
-    background-color: $accordion-item-background-hover;
+    background-color: $background-hover;
   }
 
   @if $accordion-plusminus {
@@ -103,18 +111,23 @@ $accordion-content-padding: 1rem !default;
 }
 
 /// Adds styles for accordion content. Apply this to the content pane below an accordion item's title.
-@mixin accordion-content {
+@mixin accordion-content (
+  $padding: $accordion-content-padding,
+  $border: $accordion-content-border,
+  $background: $accordion-content-background,
+  $color: $accordion-content-color
+) {
   display: none;
-  padding: $accordion-content-padding;
+  padding: $padding;
 
-  border: $accordion-content-border;
+  border: $border;
   border-bottom: 0;
-  background-color: $accordion-content-background;
+  background-color: $background;
 
-  color: $accordion-content-color;
+  color: $color;
 
   :last-child > &:last-child {
-    border-bottom: $accordion-content-border;
+    border-bottom: $border;
   }
 }
 

diff --git a/scss/components/_badge.scss b/scss/components/_badge.scss
@@ -12,7 +12,11 @@ $badge-background: $primary-color !default;
 
 /// Default text color for badges.
 /// @type Color
-$badge-color: foreground($badge-background) !default;
+$badge-color: $white !default;
+
+/// Alternate text color for badges.
+/// @type Color
+$badge-color-alt: $black !default;
 
 /// Default padding inside badges.
 /// @type Number
@@ -49,7 +53,7 @@ $badge-font-size: 0.6rem !default;
       @if $name != primary {
         &.#{$name} {
           background: $color;
-          color: foreground($color);
+          color: color-pick-contrast($color, ($badge-color, $badge-color-alt));
         }
       }
     }

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
@@ -30,7 +30,7 @@ $button-background-hover: scale-color($button-background, $lightness: -15%) !def
 /// @type List
 $button-color: $white !default;
 
-/// Font color for buttons, if the background is light.
+/// Alternative font color for buttons.
 /// @type List
 $button-color-alt: $black !default;
 
@@ -114,7 +114,7 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
   $background-hover-lightness: $button-background-hover-lightness
 ) {
   @if $color == auto {
-    $color: foreground($background, $button-color-alt, $button-color);
+    $color: color-pick-contrast($background, ($button-color, $button-color-alt));
   }
 
   @if $background-hover == auto {

diff --git a/scss/components/_label.scss b/scss/components/_label.scss
@@ -12,7 +12,11 @@ $label-background: $primary-color !default;
 
 /// Default text color for labels.
 /// @type Color
-$label-color: foreground($label-background) !default;
+$label-color: $white !default;
+
+/// Alternate text color for labels.
+/// @type Color
+$label-color-alt: $black !default;
 
 /// Default font size for labels.
 /// @type Number
@@ -50,7 +54,7 @@ $label-radius: $global-radius !default;
       @if $name != primary {
         &.#{$name} {
           background: $color;
-          color: foreground($color);
+          color: color-pick-contrast($color, ($label-color, $label-color-alt));
         }
       }
     }

diff --git a/scss/components/_orbit.scss b/scss/components/_orbit.scss
@@ -96,7 +96,7 @@ $orbit-control-zindex: 10 !default;
   padding: $orbit-caption-padding;
 
   background-color: $orbit-caption-background;
-  color: foreground($orbit-caption-background);
+  color: color-pick-contrast($orbit-caption-background);
 }
 
 /// Adds base styles for the next/previous buttons in an Orbit slider. These styles are shared between the `.orbit-next` and `.orbit-previous` classes in the default CSS.

diff --git a/scss/components/_pagination.scss b/scss/components/_pagination.scss
@@ -40,7 +40,7 @@ $pagination-item-background-current: $primary-color !default;
 
 /// Text color of the pagination item for the current page.
 /// @type Color
-$pagination-item-color-current: foreground($pagination-item-background-current) !default;
+$pagination-item-color-current: $white !default;
 
 /// Text color of a disabled pagination item.
 /// @type Color
@@ -66,16 +66,24 @@ $pagination-mobile-current-item: false !default;
 $pagination-arrows: true !default;
 
 /// Adds styles for a pagination container. Apply this to a `<ul>`.
-@mixin pagination-container {
+@mixin pagination-container (
+  $margin-bottom: $pagination-margin-bottom,
+  $font-size: $pagination-font-size,
+  $spacing: $pagination-item-spacing,
+  $radius: $pagination-radius,
+  $color: $pagination-item-color,
+  $padding: $pagination-item-padding,
+  $background-hover: $pagination-item-background-hover
+) {
   @include clearfix;
   margin-#{$global-left}: 0;
-  margin-bottom: $pagination-margin-bottom;
+  margin-bottom: $margin-bottom;
 
   // List item
   li {
-    margin-#{$global-right}: $pagination-item-spacing;
-    border-radius: $pagination-radius;
-    font-size: $pagination-font-size;
+    margin-#{$global-right}: $spacing;
+    border-radius: $radius;
+    font-size: $font-size;
 
     @if $pagination-mobile-items {
       display: inline-block;
@@ -104,28 +112,35 @@ $pagination-arrows: true !default;
   a,
   button {
     display: block;
-    padding: $pagination-item-padding;
+    padding: $padding;
     border-radius: $global-radius;
-    color: $pagination-item-color;
+    color: $color;
 
     &:hover {
-      background: $pagination-item-background-hover;
+      background: $background-hover;
     }
   }
 }
 
 /// Adds styles for the current pagination item. Apply this to an `<a>`.
-@mixin pagination-item-current {
-  padding: $pagination-item-padding;
-  background: $pagination-item-background-current;
-  color: $pagination-item-color-current;
+@mixin pagination-item-current (
+  $padding: $pagination-item-padding,
+  $background-current: $pagination-item-background-current,
+  $color-current: $pagination-item-color-current
+) {
+  padding: $padding;
+  background: $background-current;
+  color: $color-current;
   cursor: default;
 }
 
 /// Adds styles for a disabled pagination item. Apply this to an `<a>`.
-@mixin pagination-item-disabled {
-  padding: $pagination-item-padding;
-  color: $pagination-item-color-disabled;
+@mixin pagination-item-disabled (
+  $padding: $pagination-item-padding,
+  $color: $pagination-item-color-disabled
+) {
+  padding: $padding;
+  color: $color;
   cursor: not-allowed;
 
   &:hover {
@@ -134,10 +149,13 @@ $pagination-arrows: true !default;
 }
 
 /// Adds styles for an ellipsis for use in a pagination list.
-@mixin pagination-ellipsis {
-  padding: $pagination-item-padding;
+@mixin pagination-ellipsis (
+  $padding: $pagination-item-padding,
+  $color: $pagination-ellipsis-color
+) {
+  padding: $padding;
   content: '\2026';
-  color: $pagination-ellipsis-color;
+  color: $color;
 }
 
 @mixin foundation-pagination {