replace all instances of foreground() with pick-best-color()

diff --git a/docs/pages/badge.md b/docs/pages/badge.md
index 0ed430cd4fd8a92d0934f0b20c84897bd59949d6..0b321daaced6c0042d58dc71ed52f996ede3ef4c 100644 (file)
--- 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/scss/_global.scss b/scss/_global.scss
index d3256993f48e1c44455e855c9ecb82e810ea4b78..cb975302364139a81d4fc2b60cbb4b7634a1b7ac 100644 (file)
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -23,7 +23,7 @@ $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: #1a7cbd,
+  primary: #1779ba,
   secondary: #767676,
   success: #3adb76,
   warning: #ffae00,

diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss
index 3678f66075ded60a1b768e3f35ea555064a4cb3b..efa252ffced202688871967aaa23c92ebfeeda3d 100644 (file)
--- 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: pick-best-color($accordion-background, ($primary-color, $white)) !default;
 
 /// Default background color on hover for items in a Menu.
 /// @type Color
@@ -40,7 +40,7 @@ $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: pick-best-color($accordion-content-background, ($body-font-color, $white)) !default;
 
 /// Default padding for tab content.
 /// @type Number | List

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

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index e8f19005ba004f90a9b6115aaed0053bcd285fc3..a8388f8328334b192ca70b084c3cb13391b20271 100644 (file)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -28,11 +28,7 @@ $button-background-hover: scale-color($button-background, $lightness: -15%) !def
 
 /// Font color for buttons.
 /// @type List
-$button-color: $white !default;
-
-/// Font color for buttons, if the background is light.
-/// @type List
-$button-color-alt: $black !default;
+$button-color: pick-best-color($button-background) !default;
 
 /// Border radius for buttons, defaulted to global-radius.
 /// @type Number
@@ -114,7 +110,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: pick-best-color($base: $background, $colors: ($button-color, $button-color-alt));
+    $color: pick-best-color($base: $background, $colors: ($white, $black));
   }
 
   @if $background-hover == auto {

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

diff --git a/scss/components/_orbit.scss b/scss/components/_orbit.scss
index 1ff7001860b0a4d6d53ade690507a791be890e76..9b43fcdd45121e847099f611e73fda167d66673d 100644 (file)
--- 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
index 288041f708f03e4ed872d663e5b128014c2435fa..e4187e45bfe8e0e60e63c56effabc3f4616c3ce7 100644 (file)
--- 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: pick-best-color($pagination-item-background-current) !default;
 
 /// Text color of a disabled pagination item.
 /// @type Color

diff --git a/scss/components/_tabs.scss b/scss/components/_tabs.scss
index c79928491d57f639dd9795957e42ce824506c0a6..75148d7ee796dbc67912a7d90d918a537d671bdb 100644 (file)
--- a/scss/components/_tabs.scss
+++ b/scss/components/_tabs.scss
@@ -14,10 +14,18 @@ $tab-margin: 0 !default;
 /// @type Color
 $tab-background: $white !default;
 
-/// active background color of a tab bar.
+/// Font color of tab item.
+/// @type Color
+$tab-color: pick-best-color($tab-background, ($primary-color, $white)) !default;
+
+/// Active background color of a tab bar.
 /// @type Color
 $tab-background-active: $light-gray !default;
 
+/// Active font color of tab item.
+/// @type Color
+$tab-background-active-color: pick-best-color($tab-background-active, ($primary-color, $white)) !default;
+
 /// Font size of tab items.
 /// @type Number
 $tab-item-font-size: rem-calc(12) !default;
@@ -43,7 +51,7 @@ $tab-content-border: $light-gray !default;
 
 /// Default text color of tab content.
 /// @type Color
-$tab-content-color: foreground($tab-background, $primary-color) !default;
+$tab-content-color: pick-best-color($tab-content-background) !default;
 
 /// Default padding for tab content.
 /// @type Number | List
@@ -68,14 +76,22 @@ $tab-content-padding: 1rem !default;
 }
 
 /// Adds styles for the links within a tab container. Apply this to the `<li>` elements inside a tab container.
-@mixin tabs-title {
+@mixin tabs-title (
+  $padding: $tab-item-padding,
+  $font-size: $tab-item-font-size,
+  $color: $tab-color,
+  $color-active: $tab-background-active-color,
+  $background-hover: $tab-item-background-hover,
+  $background-active: $tab-background-active
+) {
   float: #{$global-left};
 
   > a {
     display: block;
-    padding: $tab-item-padding;
-    font-size: $tab-item-font-size;
+    padding: $padding;
+    font-size: $font-size;
     line-height: 1;
+    color: $color;
 
     &:hover {
       background: $tab-item-background-hover;
@@ -84,15 +100,21 @@ $tab-content-padding: 1rem !default;
     &:focus,
     &[aria-selected='true'] {
       background: $tab-background-active;
+      color: $tab-background-active-color;
     }
   }
 }
 
 /// Adds styles for the wrapper that surrounds a tab group's content panes.
-@mixin tabs-content {
-  border: 1px solid $tab-content-border;
+@mixin tabs-content (
+  $background: $tab-content-background,
+  $color: $tab-content-color,
+  $border-color: $tab-content-border
+) {
+  border: 1px solid $border-color;
   border-top: 0;
-  background: $tab-content-background;
+  background: $background;
+  color: $color;
   transition: all 0.5s ease;
 }
 
@@ -138,7 +160,7 @@ $tab-content-padding: 1rem !default;
     background: $primary-color;
 
     > li > a {
-      color: foreground($primary-color);
+      color: pick-best-color($primary-color);
 
       &:hover,
       &:focus {

diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss
index 80d783f0bc75d694e2860792377e0762dfa62562..5090677115a639e2b41ee11cf2e98d90a8d610e1 100644 (file)
--- a/scss/settings/_settings.scss
+++ b/scss/settings/_settings.scss
@@ -49,7 +49,7 @@ $global-font-size: 100%;
 $global-width: rem-calc(1200);
 $global-lineheight: 1.5;
 $foundation-palette: (
-  primary: #1a7cbd,
+  primary: #1779ba,
   secondary: #767676,
   success: #3adb76,
   warning: #ffae00,
@@ -197,12 +197,12 @@ $input-error-font-weight: $global-weight-bold;
 $accordion-background: $white;
 $accordion-plusminus: true;
 $accordion-title-font-size: rem-calc(12);
-$accordion-item-color: foreground($accordion-background, $primary-color);
+$accordion-item-color: pick-best-color($accordion-background, ($primary-color, $white));
 $accordion-item-background-hover: $light-gray;
 $accordion-item-padding: 1.25rem 1rem;
 $accordion-content-background: $white;
 $accordion-content-border: 1px solid $light-gray;
-$accordion-content-color: foreground($accordion-content-background, $body-font-color);
+$accordion-content-color: pick-best-color($accordion-content-background, ($body-font-color, $white));
 $accordion-content-padding: 1rem;
 
 // 8. Accordion Menu
@@ -215,7 +215,7 @@ $accordionmenu-arrow-color: $primary-color;
 // --------
 
 $badge-background: $primary-color;
-$badge-color: foreground($badge-background);
+$badge-color: pick-best-color($badge-background);
 $badge-padding: 0.3em;
 $badge-minwidth: 2.1em;
 $badge-font-size: 0.6rem;
@@ -240,8 +240,7 @@ $button-margin: 0 0 $global-margin 0;
 $button-fill: solid;
 $button-background: $primary-color;
 $button-background-hover: scale-color($button-background, $lightness: -15%);
-$button-color: $white;
-$button-color-alt: $black;
+$button-color: pick-best-color($button-background);
 $button-radius: $global-radius;
 $button-sizes: (
   tiny: 0.6rem,
@@ -371,7 +370,7 @@ $form-button-radius: $global-radius;
 // ---------
 
 $label-background: $primary-color;
-$label-color: foreground($label-background);
+$label-color: pick-best-color($label-background);
 $label-font-size: 0.8rem;
 $label-padding: 0.33333rem 0.5rem;
 $label-radius: $global-radius;
@@ -443,7 +442,7 @@ $pagination-item-spacing: rem-calc(1);
 $pagination-radius: $global-radius;
 $pagination-item-background-hover: $light-gray;
 $pagination-item-background-current: $primary-color;
-$pagination-item-color-current: foreground($pagination-item-background-current);
+$pagination-item-color-current: pick-best-color($pagination-item-background-current);
 $pagination-item-color-disabled: $medium-gray;
 $pagination-ellipsis-color: $black;
 $pagination-mobile-items: false;
@@ -534,14 +533,16 @@ $show-header-for-stacked: false;
 
 $tab-margin: 0;
 $tab-background: $white;
+$tab-color: pick-best-color($tab-background, ($primary-color, $white));
 $tab-background-active: $light-gray;
+$tab-background-active-color: pick-best-color($tab-background-active, ($primary-color, $white));
 $tab-item-font-size: rem-calc(12);
 $tab-item-background-hover: $white;
 $tab-item-padding: 1.25rem 1.5rem;
 $tab-expand-max: 6;
 $tab-content-background: $white;
 $tab-content-border: $light-gray;
-$tab-content-color: foreground($tab-background, $primary-color);
+$tab-content-color: pick-best-color($tab-content-background);
 $tab-content-padding: 1rem;
 
 // 33. Thumbnail

diff --git a/scss/util/_color.scss b/scss/util/_color.scss
index 2f5853b3f3d9b7060a8e52f685f72ece251afe3a..07a4cff96e1aa56f9a58f50ad7638d79995e58e6 100644 (file)
--- a/scss/util/_color.scss
+++ b/scss/util/_color.scss
@@ -57,7 +57,7 @@
 /// @param {Color} $color2 - Second color to compare.
 ///
 /// @returns {Number} The contrast ratio of the compared colors.
-@function pick-best-color($base, $colors: ($button-color, $button-color-alt), $tolerance: 0) {
+@function pick-best-color($base, $colors: ($white, $black), $tolerance: 0) {
   $contrast: color-contrast($base, nth($colors, 1));
   $best: nth($colors, 1);
 

diff --git a/test/sass/_color.scss b/test/sass/_color.scss
index 3ae970bf54087b5659b949b218a772392a6fa6fc..b069ec1505c3c6cafd41911abae963a54e4e94b5 100755 (executable)
--- a/test/sass/_color.scss
+++ b/test/sass/_color.scss
@@ -6,7 +6,7 @@
 @include test-module('Color') {
 
   @include test('Foreground (Black) [function]') {
-    $test: foreground($white);
+    $test: pick-best-color($white);
     $expect: $black;
 
     @include assert-equal($test, $expect,
@@ -14,7 +14,7 @@
   }
 
   @include test('Foreground (White) [function]') {
-    $test: foreground($black);
+    $test: pick-best-color($black);
     $expect: $white;
 
     @include assert-equal($test, $expect,