From 9f806858e2be4ec64dab39e8f3a94e4a57475e88 Mon Sep 17 00:00:00 2001 From: Andy Cochran Date: Sat, 29 Oct 2016 20:28:57 -0400 Subject: [PATCH 01/18] tweak palette to meet AA contrast req --- docs/pages/button.md | 11 ++++++----- scss/_global.scss | 8 ++++---- scss/settings/_settings.scss | 8 ++++---- 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/docs/pages/button.md b/docs/pages/button.md index 9a081d1f16..1b5fc15dcc 100644 --- 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 ```html_example -Secondary Color -Success Color -Alert Color -Warning Color -Disabled Button +Primary +Secondary +Success +Alert +Warning +Disabled ``` --- diff --git a/scss/_global.scss b/scss/_global.scss index 4ed320ab38..e36c55a0a3 100644 --- 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, - success: #3adb76, + primary: #1a7cbd, + secondary: #767676, + success: #238748, warning: #ffae00, - alert: #ec5840, + alert: #cc4b37, ) !default; /// Color used for light gray UI items. diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss index 43057cb111..294ceecba2 100644 --- a/scss/settings/_settings.scss +++ b/scss/settings/_settings.scss @@ -49,11 +49,11 @@ $global-font-size: 100%; $global-width: rem-calc(1200); $global-lineheight: 1.5; $foundation-palette: ( - primary: #2199e8, - secondary: #777, - success: #3adb76, + primary: #1a7cbd, + secondary: #767676, + success: #238748, warning: #ffae00, - alert: #ec5840, + alert: #cc4b37, ); $light-gray: #e6e6e6; $medium-gray: #cacaca; From 86acf95b5eea7d6ea20a5d2a67d78d07db19ffd5 Mon Sep 17 00:00:00 2001 From: Andy Cochran Date: Tue, 1 Nov 2016 14:49:18 -0400 Subject: [PATCH 02/18] swap lightness/forground function for luminance method --- scss/_global.scss | 2 +- scss/components/_button.scss | 2 +- scss/settings/_settings.scss | 2 +- scss/util/_color.scss | 76 ++++++++++++++++++++++++++++++------ scss/util/_util.scss | 1 + 5 files changed, 67 insertions(+), 16 deletions(-) diff --git a/scss/_global.scss b/scss/_global.scss index e36c55a0a3..d3256993f4 100644 --- a/scss/_global.scss +++ b/scss/_global.scss @@ -25,7 +25,7 @@ $global-lineheight: 1.5 !default; $foundation-palette: ( primary: #1a7cbd, secondary: #767676, - success: #238748, + success: #3adb76, warning: #ffae00, alert: #cc4b37, ) !default; diff --git a/scss/components/_button.scss b/scss/components/_button.scss index ecb0d34555..e8f19005ba 100644 --- a/scss/components/_button.scss +++ b/scss/components/_button.scss @@ -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: pick-best-color($base: $background, $colors: ($button-color, $button-color-alt)); } @if $background-hover == auto { diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss index 294ceecba2..80d783f0bc 100644 --- a/scss/settings/_settings.scss +++ b/scss/settings/_settings.scss @@ -51,7 +51,7 @@ $global-lineheight: 1.5; $foundation-palette: ( primary: #1a7cbd, secondary: #767676, - success: #238748, + success: #3adb76, warning: #ffae00, alert: #cc4b37, ); diff --git a/scss/util/_color.scss b/scss/util/_color.scss index ae23683b13..2f5853b3f3 100644 --- a/scss/util/_color.scss +++ b/scss/util/_color.scss @@ -6,24 +6,74 @@ /// @group functions //// -/// Checks the lightness of `$color`, and if it passes the `$threshold` of lightness, it returns the `$yes` color. Otherwise, it returns the `$no` color. Use this function to dynamically output a foreground color based on a given background color. +/// Checks the luminance of `$color`. /// -/// @param {Color} $color - Color to check the lightness of. -/// @param {Color} $yes [$black] - Color to return if `$color` is light. -/// @param {Color} $no [$white] - Color to return if `$color` is dark. -/// @param {Percentage} $threshold [60%] - Threshold of lightness to check against. +/// @param {Color} $color - Color to check the luminance of. /// -/// @returns {Color} The $yes color or $no color. -@function foreground($color, $yes: $black, $no: $white, $threshold: 60%) { - @if $color == transparent { - $color: $body-background; +/// @returns {Number} The luminance of `$color`. +@function color-luminance($color) { + // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js + // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef + $rgba: red($color), green($color), blue($color); + $rgba2: (); + + @for $i from 1 through 3 { + $rgb: nth($rgba, $i); + $rgb: $rgb / 255; + + $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4)); + + $rgba2: append($rgba2, $rgb); } - @if (lightness($color) > $threshold) { - @return $yes; + + @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3); +} + +/// Checks the contrast ratio of two colors. +/// +/// @param {Color} $color1 - First color to compare. +/// @param {Color} $color2 - Second color to compare. +/// +/// @returns {Number} The contrast ratio of the compared colors. +@function color-contrast($color1, $color2) { + // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js + // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef + $luminance1: color-luminance($color1) + 0.05; + $luminance2: color-luminance($color2) + 0.05; + $ratio: $luminance1 / $luminance2; + + @if $luminance2 > $luminance1 { + $ratio: 1 / $ratio; } - @else { - @return $no; + + $ratio: round($ratio * 10) / 10; + + @return $ratio; +} + +/// Checks the luminance of `$base`, and if it passes the `$threshold` of lightness, it returns the `$yes` color. Otherwise, it returns the `$no` color. Use this function to dynamically output a foreground color based on a given background color. +/// +/// @param {Color} $color1 - First color to compare. +/// @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) { + $contrast: color-contrast($base, nth($colors, 1)); + $best: nth($colors, 1); + + @for $i from 2 through length($colors) { + $current-contrast: color-contrast($base, nth($colors, $i)); + @if ($current-contrast - $contrast > $tolerance) { + $contrast: color-contrast($base, nth($colors, $i)); + $best: nth($colors, $i); + } } + + @if ($contrast < 3) { + @warn "Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}"; + } + + @return $best; } /// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness. diff --git a/scss/util/_util.scss b/scss/util/_util.scss index c38b425474..6698812f45 100644 --- a/scss/util/_util.scss +++ b/scss/util/_util.scss @@ -2,6 +2,7 @@ // foundation.zurb.com // Licensed under MIT Open Source +@import 'math'; @import 'unit'; @import 'value'; @import 'color'; From 98b8226e1b938ca7b907f2552f5844177d3f407e Mon Sep 17 00:00:00 2001 From: Andy Cochran Date: Tue, 1 Nov 2016 14:50:06 -0400 Subject: [PATCH 03/18] add math utility for luminance method --- scss/util/_math.scss | 63 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 scss/util/_math.scss diff --git a/scss/util/_math.scss b/scss/util/_math.scss new file mode 100644 index 0000000000..ec261ade39 --- /dev/null +++ b/scss/util/_math.scss @@ -0,0 +1,63 @@ +// Foundation for Sites by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +//// +/// @group functions +//// + +/// Finds the greatest common divisor of two integers. +/// +/// @param {Number} $a - First number to compare. +/// @param {Number} $b - Second number to compare. +/// +/// @returns {Number} The greatest common divisor. +@function gcd($a, $b) { + // From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript + @if ($b != 0) { + @return gcd($b, $a % $b); + } + @else { + @return abs($a); + } +} + +/// Handles decimal exponents by trying to convert them into a fraction and then use a nth-root-algorithm for parts of the calculation +/// +/// @param {Number} $base - The base number. +/// @param {Number} $exponent - The exponent. +/// +/// @returns {Number} The product of the exponentiation. +@function pow($base, $exponent, $prec: 12) { + @if (floor($exponent) != $exponent) { + $prec2 : pow(10, $prec); + $exponent: round($exponent * $prec2); + $denominator: gcd($exponent, $prec2); + @return nth-root(pow($base, $exponent / $denominator), $prec2 / $denominator, $prec); + } + + $value: $base; + @if $exponent > 1 { + @for $i from 2 through $exponent { + $value: $value * $base; + } + } + @else if $exponent < 1 { + @for $i from 0 through -$exponent { + $value: $value / $base; + } + } + + @return $value; +} + +@function nth-root($num, $n: 2, $prec: 12) { + // From: http://rosettacode.org/wiki/Nth_root#JavaScript + $x: 1; + + @for $i from 0 through $prec { + $x: 1 / $n * (($n - 1) * $x + ($num / pow($x, $n - 1))); + } + + @return $x; +} From 4bd3657fd794a534d6ef609706597b2b9956ba2f Mon Sep 17 00:00:00 2001 From: Andy Cochran Date: Tue, 1 Nov 2016 16:25:11 -0400 Subject: [PATCH 04/18] 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 0ed430cd4f..0b321daace 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 d3256993f4..cb97530236 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 3678f66075..efa252ffce 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 487f0d7696..d5a4d45e78 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 e8f19005ba..a8388f8328 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 28bbc0ba21..fde0ab9221 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 1ff7001860..9b43fcdd45 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 288041f708..e4187e45bf 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 c79928491d..75148d7ee7 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 80d783f0bc..5090677115 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 2f5853b3f3..07a4cff96e 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 3ae970bf54..b069ec1505 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, From d3b0671b5c4415106bedcf5dd6e1a595108fb8d1 Mon Sep 17 00:00:00 2001 From: Andy Cochran Date: Wed, 2 Nov 2016 15:08:46 -0400 Subject: [PATCH 05/18] bring back button-color-alt --- scss/components/_button.scss | 8 ++++++-- scss/settings/_settings.scss | 3 ++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/scss/components/_button.scss b/scss/components/_button.scss index a8388f8328..4e222cf199 100644 --- a/scss/components/_button.scss +++ b/scss/components/_button.scss @@ -28,7 +28,11 @@ $button-background-hover: scale-color($button-background, $lightness: -15%) !def /// Font color for buttons. /// @type List -$button-color: pick-best-color($button-background) !default; +$button-color: $white !default; + +/// Alternative font color for buttons. +/// @type List +$button-color-alt: $black !default; /// Border radius for buttons, defaulted to global-radius. /// @type Number @@ -110,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: pick-best-color($base: $background, $colors: ($white, $black)); + $color: pick-best-color($background, ($button-color, $button-color-alt)); } @if $background-hover == auto { diff --git a/scss/settings/_settings.scss b/scss/settings/_settings.scss index 5090677115..a7195a3859 100644 --- a/scss/settings/_settings.scss +++ b/scss/settings/_settings.scss @@ -240,7 +240,8 @@ $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: pick-best-color($button-background); +$button-color: $white; +$button-color-alt: $black; $button-radius: $global-radius; $button-sizes: ( tiny: 0.6rem, From c720183f3bcdd8813d440c6f49983f2d5174eaef Mon Sep 17 00:00:00 2001 From: Andy Cochran Date: Wed, 2 Nov 2016 16:03:01 -0400 Subject: [PATCH 06/18] ditch function for tabs content color, allow tabs mixins to pass vars --- scss/components/_tabs.scss | 37 ++++++++++++++++++++++-------------- scss/settings/_settings.scss | 6 +++--- 2 files changed, 26 insertions(+), 17 deletions(-) diff --git a/scss/components/_tabs.scss b/scss/components/_tabs.scss index 75148d7ee7..37a03a2522 100644 --- a/scss/components/_tabs.scss +++ b/scss/components/_tabs.scss @@ -16,7 +16,7 @@ $tab-background: $white !default; /// Font color of tab item. /// @type Color -$tab-color: pick-best-color($tab-background, ($primary-color, $white)) !default; +$tab-color: $primary-color !default; /// Active background color of a tab bar. /// @type Color @@ -24,7 +24,7 @@ $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; +$tab-background-active-color: $primary-color !default; /// Font size of tab items. /// @type Number @@ -51,18 +51,22 @@ $tab-content-border: $light-gray !default; /// Default text color of tab content. /// @type Color -$tab-content-color: pick-best-color($tab-content-background) !default; +$tab-content-color: $body-font-color !default; /// Default padding for tab content. /// @type Number | List $tab-content-padding: 1rem !default; /// Adds styles for a tab container. Apply this to a `