From 4bd3657fd794a534d6ef609706597b2b9956ba2f Mon Sep 17 00:00:00 2001 From: Andy Cochran Date: Tue, 1 Nov 2016 16:25:11 -0400 Subject: [PATCH] replace all instances of foreground() with pick-best-color() --- docs/pages/badge.md | 2 +- scss/_global.scss | 2 +- scss/components/_accordion.scss | 4 ++-- scss/components/_badge.scss | 4 ++-- scss/components/_button.scss | 8 ++----- scss/components/_label.scss | 4 ++-- scss/components/_orbit.scss | 2 +- scss/components/_pagination.scss | 2 +- scss/components/_tabs.scss | 40 +++++++++++++++++++++++++------- scss/settings/_settings.scss | 19 ++++++++------- scss/util/_color.scss | 2 +- test/sass/_color.scss | 4 ++-- 12 files changed, 56 insertions(+), 37 deletions(-) diff --git a/docs/pages/badge.md b/docs/pages/badge.md index 0ed430cd4..0b321daac 100644 --- 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 - + ``` diff --git a/scss/_global.scss b/scss/_global.scss index d3256993f..cb9753023 100644 --- 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 3678f6607..efa252ffc 100644 --- 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 487f0d769..d5a4d45e7 100644 --- 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 e8f19005b..a8388f832 100644 --- 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 28bbc0ba2..fde0ab922 100644 --- 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 1ff700186..9b43fcdd4 100644 --- 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 288041f70..e4187e45b 100644 --- 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 c79928491..75148d7ee 100644 --- 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 `
  • ` 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 80d783f0b..509067711 100644 --- 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 2f5853b3f..07a4cff96 100644 --- 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 3ae970bf5..b069ec150 100755 --- 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, -- 2.47.2