Replaced darken() with scale-color()

Left doc/assets/scss/docs.scss alone. Only framework sass and their docs have changed.

diff --git a/doc/includes/accordion/examples_accordion_variables.html b/doc/includes/accordion/examples_accordion_variables.html
index 6e64844c54b70abc64e215de0ceffdadf2b59eb0..653ee85dd949efb0114e0ae303de0f89af76d8ac 100644 (file)
--- a/doc/includes/accordion/examples_accordion_variables.html
+++ b/doc/includes/accordion/examples_accordion_variables.html
@@ -2,8 +2,8 @@
 ```scss
 $accordion-navigation-padding: rem-calc(16);
 $accordion-navigation-bg-color: #efefef;
-$accordion-navigation-hover-bg-color: darken($accordion-navigation-bg-color, 5%);
-$accordion-navigation-active-bg-color: darken($accordion-navigation-bg-color, 3%);
+$accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%);
+$accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%);
 $accordion-navigation-font-color: #222;
 $accordion-navigation-font-size: rem-calc(16);
 $accordion-navigation-font-family: $body-font-family;

diff --git a/doc/includes/alert/examples_alert_variables.html b/doc/includes/alert/examples_alert_variables.html
index 4e7f8c5d663ff420bd5bf64c2dba9a6eb894763b..e064aa597762f9d28c39babd15ca0671da605395 100644 (file)
--- a/doc/includes/alert/examples_alert_variables.html
+++ b/doc/includes/alert/examples_alert_variables.html
@@ -12,15 +12,15 @@ $alert-padding-bottom: $alert-padding-top + rem-calc(1);
 $alert-font-weight: bold;
 $alert-font-size: rem-calc(14);
 $alert-font-color: #fff;
-$alert-font-color-alt: darken($secondary-color, 60%);
+$alert-font-color-alt: scale-color($secondary-color, $lightness: -66%);
 
 /* We use this for close hover effect. */
-$alert-function-factor: 10%;
+$alert-function-factor: -14%;
 
 /* We use these to control border styles. */
 $alert-border-style: solid;
 $alert-border-width: 1px;
-$alert-border-color: darken($primary-color, $alert-function-factor);
+$alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor);
 $alert-bottom-margin: rem-calc(20);
 
 /* We use these to style the close buttons */

diff --git a/doc/includes/breadcrumbs/examples_breadcrumbs_variables.html b/doc/includes/breadcrumbs/examples_breadcrumbs_variables.html
index 4dedb6b30290a678179d902cae1acfc8e0501ddd..d1c9aa7965c1993cd31fc173d1921e8af2aadbae 100644 (file)
--- a/doc/includes/breadcrumbs/examples_breadcrumbs_variables.html
+++ b/doc/includes/breadcrumbs/examples_breadcrumbs_variables.html
@@ -10,10 +10,10 @@ $crumb-padding: rem-calc(9 14 9);
 $crumb-side-padding: rem-calc(12);
 
 // We use these to control border styles.
-$crumb-function-factor: 10%;
+$crumb-function-factor: -10%;
 $crumb-border-size: 1px;
 $crumb-border-style: solid;
-$crumb-border-color: darken($crumb-bg, $crumb-function-factor);
+$crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor);
 $crumb-radius: $global-radius;
 
 // We use these to set various text styles for breadcrumbs.

diff --git a/doc/includes/dropdown/examples_dropdown_variables.html b/doc/includes/dropdown/examples_dropdown_variables.html
index a76f871dd878afd52d0313cc512c1eaf79fe6059..7d051ace403de1f9bd3feaa02c226a54da8593e6 100644 (file)
--- a/doc/includes/dropdown/examples_dropdown_variables.html
+++ b/doc/includes/dropdown/examples_dropdown_variables.html
@@ -14,7 +14,7 @@ $f-dropdown-bg: #fff;
 /* We use this to set the border styles for dropdowns. */
 $f-dropdown-border-style: solid;
 $f-dropdown-border-width: 1px;
-$f-dropdown-border-color: darken(#fff, 20%);
+$f-dropdown-border-color: scale-color(#fff, $lightness: -20%);
 
 /* We use these to style the triangle pip. */
 $f-dropdown-triangle-size: 6px;

diff --git a/doc/includes/examples_keystrokes_variables.html b/doc/includes/examples_keystrokes_variables.html
index 06cf3c1d1f49b8e33df0467fe715eb194ac3f5b9..3f602ea58f2c2f1f94b1de2c337b162cd73a760e 100644 (file)
--- a/doc/includes/examples_keystrokes_variables.html
+++ b/doc/includes/examples_keystrokes_variables.html
@@ -7,16 +7,16 @@ $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
 $keystroke-font-size: rem-calc(14);
 $keystroke-font-color: #222;
 $keystroke-font-color-alt: #fff;
-$keystroke-function-factor: 7%;
+$keystroke-function-factor: -7%;
 
 // We use this to control keystroke padding.
 $keystroke-padding: rem-calc(2 4 0);
 
 // We use these to control background and border styles.
-$keystroke-bg: darken(#fff, $keystroke-function-factor);
+$keystroke-bg: scale-color(#fff, $lightness: $keystroke-function-factor);
 $keystroke-border-style: solid;
 $keystroke-border-width: 1px;
-$keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor);
+$keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor);
 $keystroke-radius: $global-radius;
 ```
 {{/markdown}}
\ No newline at end of file

diff --git a/doc/includes/examples_progress_variables.html b/doc/includes/examples_progress_variables.html
index 66a55bd1edd9bcd13b4cd397343b669803a19c0e..813a87a72385f666044efeb3a043ed6dad4620af 100644 (file)
--- a/doc/includes/examples_progress_variables.html
+++ b/doc/includes/examples_progress_variables.html
@@ -7,7 +7,7 @@ $progress-bar-height: rem-calc(25);
 $progress-bar-color: transparent;
 
 // We use these to control the border styles
-$progress-bar-border-color: darken(#fff, 20%);
+$progress-bar-border-color: scale-color(#fff, $lightness: 20%);
 $progress-bar-border-size: 1px;
 $progress-bar-border-style: solid;
 $progress-bar-border-radius: $global-radius;

diff --git a/doc/includes/examples_sass_variables.html b/doc/includes/examples_sass_variables.html
index 638caeb61810a5a93d017798eed7c1f475b5616c..2cdff4400326913a7d6b589c7525602c53ba6d6a 100644 (file)
--- a/doc/includes/examples_sass_variables.html
+++ b/doc/includes/examples_sass_variables.html
@@ -220,7 +220,7 @@ $paragraph-aside-font-style: italic;
 
 // <code> tags
 
-$code-color: darken($alert-color, 15%);
+$code-color: scale-color($alert-color, $lightness: -27%);
 $code-font-family: Consolas, "Liberation Mono", Courier, monospace;
 $code-font-weight: bold;
 
@@ -228,7 +228,7 @@ $code-font-weight: bold;
 
 $anchor-text-decoration: none;
 $anchor-font-color: $primary-color;
-$anchor-font-color-hover: darken($primary-color, 5%);
+$anchor-font-color-hover: scale-color($primary-color, $lightness: -14%);
 
 // <hr> element
 
@@ -307,9 +307,9 @@ $input-font-family: inherit;
 $input-font-color: rgba(0,0,0,0.75);
 $input-font-size: rem-calc(14);
 $input-bg-color: #fff;
-$input-focus-bg-color: darken(#fff, 2%);
-$input-border-color: darken(#fff, 20%);
-$input-focus-border-color: darken(#fff, 40%);
+$input-focus-bg-color: scale-color(#fff, $lightness: -2%);
+$input-border-color: scale-color(#fff, $lightness: -20%);
+$input-focus-border-color: scale-color(#fff, $lightness: -40%);
 $input-border-style: solid;
 $input-border-width: 1px;
 $input-disabled-bg: #ddd;
@@ -332,8 +332,8 @@ $legend-padding: rem-calc(0, 3);
 
 // Prefix and postfix input elements
 
-$input-prefix-bg: darken(#fff, 5%);
-$input-prefix-border-color: darken(#fff, 20%);
+$input-prefix-bg: scale-color(#fff, $lightness: -5%);
+$input-prefix-border-color: scale-color(#fff, $lightness: -20%);
 $input-prefix-border-size: 1px;
 $input-prefix-border-type: solid;
 $input-prefix-overflow: hidden;
@@ -390,7 +390,6 @@ $button-function-factor: 10%;
 
 $button-border-width: 1px;
 $button-border-style: solid;
-$button-border-color: darken($primary-color, $button-function-factor);
 
 // Radius used throughout the core.
 
@@ -504,17 +503,17 @@ $alert-padding-bottom: $alert-padding-top + rem-calc(1);
 $alert-font-weight: bold;
 $alert-font-size: rem-calc(14);
 $alert-font-color: #fff;
-$alert-font-color-alt: darken($secondary-color, 60%);
+$alert-font-color-alt: scale-color($secondary-color, $lightness: -66%);
 
 // Hover effect
 
-$alert-function-factor: 10%;
+$alert-function-factor: -14%;
 
 // Border Styles
 
 $alert-border-style: solid;
 $alert-border-width: 1px;
-$alert-border-color: darken($primary-color, $alert-function-factor);
+$alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor);
 $alert-bottom-margin: rem-calc(20);
 
 // Close Button style
@@ -544,10 +543,10 @@ $crumb-side-padding: rem-calc(12);
 
 // Border styles.
 
-$crumb-function-factor: 10%;
+$crumb-function-factor: -10%;
 $crumb-border-size: 1px;
 $crumb-border-style: solid;
-$crumb-border-color: darken($crumb-bg, $crumb-function-factor);
+$crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor);
 $crumb-radius: $global-radius;
 
 // Various text styles for breadcrumbs.
@@ -627,7 +626,7 @@ $custom-select-disabled-color: #888;
 
 $custom-dropdown-height: 200px;
 $custom-dropdown-bg: #fff;
-$custom-dropdown-border-color: darken(#fff, 20%);
+$custom-dropdown-border-color: scale-color(#fff, $lightness: -20%);
 $custom-dropdown-border-width: 1px;
 $custom-dropdown-border-style: solid;
 $custom-dropdown-font-color: #555;
@@ -659,7 +658,7 @@ $f-dropdown-bg: #fff;
 
 $f-dropdown-border-style: solid;
 $f-dropdown-border-width: 1px;
-$f-dropdown-border-color: darken(#fff, 20%);
+$f-dropdown-border-color: scale-color(#fff, $lightness: -20%);
 
 // Triangle pip.
 
@@ -766,7 +765,7 @@ $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
 $keystroke-font-size: rem-calc(15);
 $keystroke-font-color: #222;
 $keystroke-font-color-alt: #fff;
-$keystroke-function-factor: 7%;
+$keystroke-function-factor: -7%;
 
 // Keystroke padding.
 
@@ -774,10 +773,10 @@ $keystroke-padding: rem-calc(2, 4, 0);
 
 // Background and border styles.
 
-$keystroke-bg: darken(#fff, $keystroke-function-factor);
+$keystroke-bg: scale-color(#fff, $lightness: $keystroke-function-factor);
 $keystroke-border-style: solid;
 $keystroke-border-width: 1px;
-$keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor);
+$keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor);
 $keystroke-radius: $global-radius;
 
 
@@ -863,7 +862,7 @@ $pagination-li-margin: rem-calc(5);
 
 $pagination-link-pad: rem-calc(1, 7, 1);
 $pagination-link-font-color: #999;
-$pagination-link-active-bg: darken(#fff, 10%);
+$pagination-link-active-bg: scale-color(#fff, $lightness: -10%);
 
 // Disabled anchor links
 
@@ -885,14 +884,14 @@ $pagination-link-current-active-bg: $primary-color;
 
 // Background and border styles
 
-$panel-bg: darken(#fff, 5%);
+$panel-bg: scale-color(#fff, $lightness: -5%);
 $panel-border-style: solid;
 $panel-border-size: 1px;
 
 // Control how much we darken things on hover
 
-$panel-function-factor: 10%;
-$panel-border-color: darken($panel-bg, $panel-function-factor);
+$panel-function-factor: -11%;
+$panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor);
 
 // Inner padding and bottom margin
 
@@ -971,7 +970,7 @@ $progress-bar-color: transparent;
 
 // Border styles
 
-$progress-bar-border-color: darken(#fff, 20%);
+$progress-bar-border-color: scale-color(#fff, $lightness: -20%);
 $progress-bar-border-size: 1px;
 $progress-bar-border-style: solid;
 $progress-bar-border-radius: $global-radius;
@@ -1030,15 +1029,15 @@ $close-reveal-modal-class: "close-reveal-modal";
 
 $section-title-padding: rem-calc(15);
 $section-content-padding: rem-calc(15);
-$section-function-factor: 10%;
+$section-function-factor: -11%;
 
 // Titles
 
 $section-title-color: #333;
 $section-title-bg: #efefef;
-$section-title-bg-active: darken($section-title-bg, $section-function-factor);
+$section-title-bg-active: scale-color($section-title-bg, $lightness: $section-function-factor);
 $section-title-bg-active-tabs: #fff;
-$section-title-bg-hover: darken($section-title-bg, $section-function-factor/2);
+$section-title-bg-hover: scale-color($section-title-bg, $lightness: $section-function-factor/2);
 
 // Border size
 
@@ -1085,7 +1084,7 @@ $side-nav-font-weight: bold;
 
 $side-nav-divider-size: 1px;
 $side-nav-divider-style: solid;
-$side-nav-divider-color: darken(#fff, 10%);
+$side-nav-divider-color: scale-color(#fff, $lightness: -10%);
 
 
 // Sub Nav Variables
@@ -1118,7 +1117,7 @@ $sub-nav-active-cursor: $cursor-default-value;
 
 // Border styles and background colors for the switch container
 
-$switch-border-color: darken(#fff, 20%);
+$switch-border-color: scale-color(#fff, $lightness: 20%);
 $switch-border-style: solid;
 $switch-border-width: 1px;
 $switch-bg: #fff;
@@ -1142,8 +1141,8 @@ $switch-label-side-padding: 6px;
 // Switch-paddle
 
 $switch-paddle-bg: #fff;
-$switch-paddle-fade-to-color: darken($switch-paddle-bg, 10%);
-$switch-paddle-border-color: darken($switch-paddle-bg, 35%);
+$switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%);
+$switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%);
 $switch-paddle-border-width: 1px;
 $switch-paddle-border-style: solid;
 $switch-paddle-transition-speed: .1s;
@@ -1213,7 +1212,7 @@ $thumb-transition-speed: 200ms;
 $has-tip-border-bottom: dotted 1px #ccc;
 $has-tip-font-weight: bold;
 $has-tip-font-color: #333;
-$has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%);
+$has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%);
 $has-tip-font-color-hover: $primary-color;
 $has-tip-cursor-type: help;
 
@@ -1266,11 +1265,13 @@ $topbar-dropdown-toggle-alpha: 0.5;
 $topbar-link-color: #fff;
 $topbar-link-color-hover: #fff;
 $topbar-link-color-active: #fff;
-$topbar-link-weight: bold;
+$topbar-link-weight: normal;
 $topbar-link-font-size: rem-calc(13);
-$topbar-link-hover-lightness: -30%; Darken by 30%
-$topbar-link-bg-hover: darken($topbar-bg, 3%);
-$topbar-link-bg-active: darken($topbar-bg, 3%);
+$topbar-link-hover-lightness: -10%; // Darken by 10%
+$topbar-link-bg-hover: #272727  ;
+$topbar-link-bg-active: $primary-color;
+$topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
+$topbar-link-font-family: $body-font-family;
 
 $topbar-dropdown-label-color: #555;
 $topbar-dropdown-label-text-transform: uppercase;
@@ -1296,7 +1297,7 @@ $topbar-media-query: "only screen and (min-width: #{$topbar-breakpoint})";
 // Divider Styles
 
 $topbar-divider-border-bottom: solid 1px  scale-color($topbar-bg-color, $lightness: 13%);
-$topbar-divider-border-top: solid 1px darken($topbar-bg, 10%);
+$topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%);
 
 // Sticky Class
 

diff --git a/doc/includes/form/examples_form_variables.html b/doc/includes/form/examples_form_variables.html
index 1a44aa79f530395bc789026736139ac9242bf23f..adbff77b87cce48ae76c8dffaca08809350e07cc 100644 (file)
--- a/doc/includes/form/examples_form_variables.html
+++ b/doc/includes/form/examples_form_variables.html
@@ -15,9 +15,9 @@ $input-font-family: inherit;
 $input-font-color: rgba(0,0,0,0.75);
 $input-font-size: rem-calc(14);
 $input-bg-color: #fff;
-$input-focus-bg-color: darken(#fff, 2%);
-$input-border-color: darken(#fff, 20%);
-$input-focus-border-color: darken(#fff, 40%);
+$input-focus-bg-color: scale-color(#fff, $lightness: -2%);
+$input-border-color: scale-color(#fff, $lightness: -20%);
+$input-focus-border-color: scale-color(#fff, $lightness: -40%);
 $input-border-style: solid;
 $input-border-width: 1px;
 $input-disabled-bg: #ddd;
@@ -37,8 +37,8 @@ $legend-font-weight: bold;
 $legend-padding: rem-calc(0 3);
 
 // We use these to style the prefix and postfix input elements
-$input-prefix-bg: darken(#fff, 5%);
-$input-prefix-border-color: darken(#fff, 20%);
+$input-prefix-bg: scale-color(#fff, $lightness: -5%);
+$input-prefix-border-color: scale-color(#fff, $lightness: -20%);
 $input-prefix-border-size: 1px;
 $input-prefix-border-type: solid;
 $input-prefix-overflow: hidden;

diff --git a/doc/includes/off_canvas/examples_offcanvas_variables.html b/doc/includes/off_canvas/examples_offcanvas_variables.html
index 5702eee7acbc4a32339729ab3ecb3416d000f6d3..8fe2491a3ba9c806b692dd62cbe19966fba98170 100644 (file)
--- a/doc/includes/off_canvas/examples_offcanvas_variables.html
+++ b/doc/includes/off_canvas/examples_offcanvas_variables.html
@@ -10,7 +10,7 @@ $tabbar-middle-padding: 0 rem-calc(10) !default;
 
 // Off Canvas Divider Styles
 $tabbar-right-section-border: solid 1px scale-color($tabbar-bg, $lightness: 13%) !default;
-$tabbar-left-section-border: solid 1px darken($tabbar-bg, 10%) !default;
+$tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%);
 
 // Off Canvas Tab Bar Headers
 $tabbar-header-color: #FFF !default;
@@ -33,11 +33,11 @@ $off-canvas-label-border-bottom: none !default;
 $off-canvas-label-margin:0 !default;
 $off-canvas-link-padding: rem-calc(10, 15) !default;
 $off-canvas-link-color: rgba(#FFF, 0.7) !default;
-$off-canvas-link-border-bottom: 1px solid darken($off-canvas-bg, 5%) !default;
+$off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%);
 
 // Off Canvas Menu Icon Variables
 $tabbar-menu-icon-color: #FFF !default;
-$tabbar-menu-icon-hover: darken($tabbar-menu-icon-color, 30%) !default;
+$tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%);
 
 $tabbar-menu-icon-text-indent: rem-calc(35) !default;
 $tabbar-menu-icon-width: $tabbar-height !default;

diff --git a/doc/includes/pagination/examples_pagination_variables.html b/doc/includes/pagination/examples_pagination_variables.html
index e951082240d4c09a55d9148b28771503c0a88b73..340ae788633373a89d1c58e92f9a8c81815b64b1 100644 (file)
--- a/doc/includes/pagination/examples_pagination_variables.html
+++ b/doc/includes/pagination/examples_pagination_variables.html
@@ -16,7 +16,7 @@ $pagination-li-margin: rem-calc(5);
 // We use these for the pagination anchor links
 $pagination-link-pad: rem-calc(1 7 1);
 $pagination-link-font-color: #999;
-$pagination-link-active-bg: darken(#fff, 10%);
+$pagination-link-active-bg: scale-color(#fff, $lightness: -10%);
 
 // We use these for disabled anchor links
 $pagination-link-unavailable-cursor: default;

diff --git a/doc/includes/panels/examples_panels_variables.html b/doc/includes/panels/examples_panels_variables.html
index 1a934f3302c437525d96044629fd52ee45615860..b47481b1309d9dc3b43a0fb73124026f5503ff69 100644 (file)
--- a/doc/includes/panels/examples_panels_variables.html
+++ b/doc/includes/panels/examples_panels_variables.html
@@ -3,13 +3,13 @@
 $include-html-panel-classes: $include-html-classes;
 
 // We use these to control the background and border styles
-$panel-bg: darken(#fff, 5%);
+$panel-bg: scale-color(#fff, $lightness: -5%);
 $panel-border-style: solid;
 $panel-border-size: 1px;
 
 // We use this % to control how much we darken things on hover
-$panel-function-factor: 10%;
-$panel-border-color: darken($panel-bg, $panel-function-factor);
+$panel-function-factor: -11%;
+$panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor);
 
 // We use these to set default inner padding and bottom margin
 $panel-margin-bottom: rem-calc(20);

diff --git a/doc/includes/sidenav/examples_sidenav_variables.html b/doc/includes/sidenav/examples_sidenav_variables.html
index fe28a39e8be85678bd270895711c43d3c8cd2e7b..d33358f55420392efa2208b15d5785597f29047f 100644 (file)
--- a/doc/includes/sidenav/examples_sidenav_variables.html
+++ b/doc/includes/sidenav/examples_sidenav_variables.html
@@ -19,6 +19,6 @@ $side-nav-font-weight: bold;
 // We use these to control border styles
 $side-nav-divider-size: 1px;
 $side-nav-divider-style: solid;
-$side-nav-divider-color: darken(#fff, 10%);
+$side-nav-divider-color: scale-color(#fff, $lightness: -10%);
 ```
 {{/markdown}}
\ No newline at end of file

diff --git a/doc/includes/switch/examples_switch_variables.html b/doc/includes/switch/examples_switch_variables.html
index ce539f81105313fa05ac3ae213a4bc591e3315b7..fc31277464b170e1c248ee129c5382511bd3fe0f 100644 (file)
--- a/doc/includes/switch/examples_switch_variables.html
+++ b/doc/includes/switch/examples_switch_variables.html
@@ -3,7 +3,7 @@
 $include-html-form-classes: $include-html-classes;
 
 /* Controlling border styles and background colors for the switch container */
-$switch-border-color: darken(#fff, 20%);
+$switch-border-color: scale-color(#fff, $lightness: -20%);
 $switch-border-style: solid;
 $switch-border-width: 1px;
 $switch-bg: #fff;
@@ -24,8 +24,8 @@ $switch-label-side-padding: 6px;
 
 /* We use these to style the switch-paddle */
 $switch-paddle-bg: #fff;
-$switch-paddle-fade-to-color: darken($switch-paddle-bg, 10%);
-$switch-paddle-border-color: darken($switch-paddle-bg, 35%);
+$switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%);
+$switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%);
 $switch-paddle-border-width: 1px;
 $switch-paddle-border-style: solid;
 $switch-paddle-transition-speed: .1s;

diff --git a/doc/includes/tabs/examples_tabs_variables.html b/doc/includes/tabs/examples_tabs_variables.html
index ac52a42f0ae6c3746979891198ab71b796377915..535e531b6ef00d19de1e590c361e74fed46180d1 100644 (file)
--- a/doc/includes/tabs/examples_tabs_variables.html
+++ b/doc/includes/tabs/examples_tabs_variables.html
@@ -2,7 +2,7 @@
 ```scss
 $tabs-navigation-padding: rem-calc(16);
 $tabs-navigation-bg-color: #efefef;
-$tabs-navigation-hover-bg-color: darken($tabs-navigation-bg-color, 5%);
+$tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%);
 $tabs-navigation-font-color: #222;
 $tabs-navigation-font-size: rem-calc(16);
 $tabs-navigation-font-family: $body-font-family;

diff --git a/doc/includes/tooltips/examples_tooltips_variables.html b/doc/includes/tooltips/examples_tooltips_variables.html
index 9b421a3265eaa15919cee23bdf2fd2722ef7ddfb..517a507372b38bec5881287c87aba5730cb0ba1f 100644 (file)
--- a/doc/includes/tooltips/examples_tooltips_variables.html
+++ b/doc/includes/tooltips/examples_tooltips_variables.html
@@ -5,7 +5,7 @@ $include-html-tooltip-classes: $include-html-classes;
 $has-tip-border-bottom: dotted 1px #ccc;
 $has-tip-font-weight: bold;
 $has-tip-font-color: #333;
-$has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%);
+$has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%);
 $has-tip-font-color-hover: $primary-color;
 $has-tip-cursor-type: help;
 

diff --git a/doc/includes/topbar/examples_topbar_variables.html b/doc/includes/topbar/examples_topbar_variables.html
index b91db6e661dfc2ce4c7353792c3c0b99198a07d2..8b6f69330608bd697e68352c94420469dc7d37fd 100644 (file)
--- a/doc/includes/topbar/examples_topbar_variables.html
+++ b/doc/includes/topbar/examples_topbar_variables.html
@@ -28,11 +28,13 @@ $topbar-dropdown-toggle-alpha: 0.5;
 $topbar-link-color: #fff;
 $topbar-link-color-hover: #fff;
 $topbar-link-color-active: #fff;
-$topbar-link-weight: bold;
+$topbar-link-weight: normal;
 $topbar-link-font-size: rem-calc(13);
-$topbar-link-hover-lightness: -30%; /* Darken by 30% */
-$topbar-link-bg-hover: darken($topbar-bg, 3%);
-$topbar-link-bg-active: darken($topbar-bg, 3%);
+$topbar-link-hover-lightness: -10%; // Darken by 10%
+$topbar-link-bg-hover: #272727  ;
+$topbar-link-bg-active: $primary-color;
+$topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
+$topbar-link-font-family: $body-font-family;
 
 $topbar-dropdown-label-color: #555;
 $topbar-dropdown-label-text-transform: uppercase;
@@ -55,7 +57,7 @@ $topbar-media-query: $medium-up !default;
 
 /* Divider Styles */
 $topbar-divider-border-bottom: solid 1px  scale-color($topbar-bg-color, $lightness: 13%);
-$topbar-divider-border-top: solid 1px darken($topbar-bg, 10%);
+$topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%);
 
 /* Sticky Class */
 $topbar-sticky-class: ".sticky";

diff --git a/doc/includes/typography/examples_typography_variables.html b/doc/includes/typography/examples_typography_variables.html
index 1d32405f6216b2e9e9c31943f908d93f8206f6c5..dffec802ffca74d43230bdb401a14e78261815e3 100644 (file)
--- a/doc/includes/typography/examples_typography_variables.html
+++ b/doc/includes/typography/examples_typography_variables.html
@@ -43,14 +43,14 @@ $paragraph-aside-font-style: italic;
 $paragraph-text-rendering: optimizeLegibility;
 
 // We use these to style code tags
-$code-color: darken($alert-color, 15%);
+$code-color: scale-color($alert-color, $lightness: -27%);
 $code-font-family: Consolas, Liberation Mono, Courier, monospace;
 $code-font-weight: bold;
 
 // We use these to style anchors
 $anchor-text-decoration: none;
 $anchor-font-color: $primary-color;
-$anchor-font-color-hover: darken($primary-color, 5%);
+$anchor-font-color-hover: scale-color($primary-color, $lightness: -14%);
 
 // We use these to style the hr element
 $hr-border-width: 1px;

diff --git a/doc/pages/components/alert_boxes.html b/doc/pages/components/alert_boxes.html
index 5e020f26ab89cd91629667cb2f3631ab81dac332..acc1ce9786e04c4cf614f520be1c7ea7a5b2cef9 100644 (file)
--- a/doc/pages/components/alert_boxes.html
+++ b/doc/pages/components/alert_boxes.html
@@ -104,15 +104,15 @@ $alert-padding-bottom: $alert-padding-top + rem-calc(1);
 $alert-font-weight: bold;
 $alert-font-size: rem-calc(14);
 $alert-font-color: #fff;
-$alert-font-color-alt: darken($secondary-color, 60%);
+$alert-font-color-alt: scale-color($secondary-color, $lightness: -66%);
 
 // We use this for close hover effect.
-$alert-function-factor: 10%;
+$alert-function-factor: -14%;
 
 // We use these to control border styles.
 $alert-border-style: solid;
 $alert-border-width: 1px;
-$alert-border-color: darken($primary-color, $alert-function-factor);
+$alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor);
 $alert-bottom-margin: rem-calc(20);
 
 // We use these to style the close buttons

diff --git a/doc/pages/components/forms.html b/doc/pages/components/forms.html
index a37b86f99cbb2e3f5adabdeb4d9ddd33c8d64d22..35b85441b41634922effec9060258a6236e6b684 100644 (file)
--- a/doc/pages/components/forms.html
+++ b/doc/pages/components/forms.html
@@ -187,7 +187,7 @@ We use this mixin to create prefix label styles
 .custom-prefix-class {
   @include prefix-postfix-base();
   @include prefix(
-    // Control the background color, which also effect the border and font color. Default:$input-prefix-bg (darken(#fff, 5%))
+    // Control the background color, which also effect the border and font color. Default:$input-prefix-bg (scale-color(#fff, $lightness: -5%))
     $bg: $input-prefix-bg,
     // Toggle position settings if prefix is a button. Default:false
     $is-button: false

diff --git a/scss/foundation/_settings.scss b/scss/foundation/_settings.scss
index 56551c713d477c10eb0997104815ec3fb87de306..cccf5ab2bf0e91a8e18cb740b3de1da449cc463b 100644 (file)
--- a/scss/foundation/_settings.scss
+++ b/scss/foundation/_settings.scss
@@ -111,8 +111,8 @@
 
 // $accordion-navigation-padding: rem-calc(16);
 // $accordion-navigation-bg-color: #efefef  ;
-// $accordion-navigation-hover-bg-color: darken($accordion-navigation-bg-color, 5%);
-// $accordion-navigation-active-bg-color: darken($accordion-navigation-bg-color, 3%);
+// $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%);
+// $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%);
 // $accordion-navigation-font-color: #222;
 // $accordion-navigation-font-size: rem-calc(16);
 // $accordion-navigation-font-family: $body-font-family;
@@ -134,15 +134,15 @@
 // $alert-font-weight: normal;
 // $alert-font-size: rem-calc(13);
 // $alert-font-color: #fff;
-// $alert-font-color-alt: darken($secondary-color, 60%);
+// $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%);
 
 // We use this for close hover effect.
-// $alert-function-factor: 5%;
+// $alert-function-factor: -14%;
 
 // We use these to control border styles.
 // $alert-border-style: solid;
 // $alert-border-width: 1px;
-// $alert-border-color: darken($primary-color, $alert-function-factor);
+// $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor);
 // $alert-bottom-margin: rem-calc(20);
 
 // We use these to style the close buttons
@@ -180,10 +180,10 @@
 // $crumb-side-padding: rem-calc(12);
 
 // We use these to control border styles.
-// $crumb-function-factor: 10%;
+// $crumb-function-factor: -10%;
 // $crumb-border-size: 1px;
 // $crumb-border-style: solid;
-// $crumb-border-color: darken($crumb-bg, $crumb-function-factor);
+// $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor);
 // $crumb-radius: $global-radius;
 
 // We use these to set various text styles for breadcrumbs.
@@ -292,7 +292,7 @@
 // We use this to set the border styles for dropdowns.
 // $f-dropdown-border-style: solid;
 // $f-dropdown-border-width: 1px;
-// $f-dropdown-border-color: darken(#fff, 20%);
+// $f-dropdown-border-color: scale-color(#fff, $lightness: -20%);
 
 // We use these to style the triangle pip.
 // $f-dropdown-triangle-size: 6px;
@@ -377,9 +377,9 @@
 // $input-font-color: rgba(0,0,0,0.75);
 // $input-font-size: rem-calc(14);
 // $input-bg-color: #fff;
-// $input-focus-bg-color: darken(#fff, 2%);
-// $input-border-color: darken(#fff, 20%);
-// $input-focus-border-color: darken(#fff, 40%);
+// $input-focus-bg-color: scale-color(#fff, $lightness: -2%);
+// $input-border-color: scale-color(#fff, $lightness: -20%);
+// $input-focus-border-color: scale-color(#fff, $lightness: -40%);
 // $input-border-style: solid;
 // $input-border-width: 1px;
 // $input-disabled-bg: #ddd;
@@ -399,8 +399,8 @@
 // $legend-padding: rem-calc(0 3);
 
 // We use these to style the prefix and postfix input elements
-// $input-prefix-bg: darken(#fff, 5%);
-// $input-prefix-border-color: darken(#fff, 20%);
+// $input-prefix-bg: scale-color(#fff, $lightness: -5%);
+// $input-prefix-border-color: scale-color(#fff, $lightness: -20%);
 // $input-prefix-border-size: 1px;
 // $input-prefix-border-type: solid;
 // $input-prefix-overflow: hidden;
@@ -486,16 +486,16 @@
 // $keystroke-font-size: rem-calc(14);
 // $keystroke-font-color: #222;
 // $keystroke-font-color-alt: #fff;
-// $keystroke-function-factor: 7%;
+// $keystroke-function-factor: -7%;
 
 // We use this to control keystroke padding.
 // $keystroke-padding: rem-calc(2 4 0);
 
 // We use these to control background and border styles.
-// $keystroke-bg: darken(#fff, $keystroke-function-factor);
+// $keystroke-bg: scale-color(#fff, $lightness: $keystroke-function-factor);
 // $keystroke-border-style: solid;
 // $keystroke-border-width: 1px;
-// $keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor);
+// $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor);
 // $keystroke-radius: $global-radius;
 
 // Labels
@@ -530,7 +530,7 @@
 
 // Off Canvas Divider Styles
 // $tabbar-right-section-border: solid 1px scale-color($tabbar-bg, $lightness: 13%);
-// $tabbar-left-section-border: solid 1px darken($tabbar-bg, 10%);
+// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%);
 
 // Off Canvas Tab Bar Headers
 // $tabbar-header-color: #FFF;
@@ -553,11 +553,11 @@
 // $off-canvas-label-margin:0;
 // $off-canvas-link-padding: rem-calc(10, 15);
 // $off-canvas-link-color: rgba(#FFF, 0.7);
-// $off-canvas-link-border-bottom: 1px solid darken($off-canvas-bg, 5%);
+// $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%);
 
 // Off Canvas Menu Icon Variables
 // $tabbar-menu-icon-color: #FFF;
-// $tabbar-menu-icon-hover: darken($tabbar-menu-icon-color, 30%);
+// $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%);
 
 // $tabbar-menu-icon-text-indent: rem-calc(35);
 // $tabbar-menu-icon-width: $tabbar-height;
@@ -634,7 +634,7 @@
 // We use these for the pagination anchor links
 // $pagination-link-pad: rem-calc(1 10 1);
 // $pagination-link-font-color: #999;
-// $pagination-link-active-bg: darken(#fff, 10%);
+// $pagination-link-active-bg: scale-color(#fff, $lightness: -10%);
 
 // We use these for disabled anchor links
 // $pagination-link-unavailable-cursor: default;
@@ -653,13 +653,13 @@
 // $include-html-panel-classes: $include-html-classes;
 
 // We use these to control the background and border styles
-// $panel-bg: darken(#fff, 5%);
+// $panel-bg: scale-color(#fff, $lightness: -5%);
 // $panel-border-style: solid;
 // $panel-border-size: 1px;
 
 // We use this % to control how much we darken things on hover
-// $panel-function-factor: 10%;
-// $panel-border-color: darken($panel-bg, $panel-function-factor);
+// $panel-function-factor: -11%;
+// $panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor);
 
 // We use these to set default inner padding and bottom margin
 // $panel-margin-bottom: rem-calc(20);
@@ -733,7 +733,7 @@
 // $progress-bar-color: #f6f6f6  ;
 
 // We use these to control the border styles
-// $progress-bar-border-color: darken(#fff, 20%);
+// $progress-bar-border-color: scale-color(#fff, $lightness: -20%);
 // $progress-bar-border-size: 1px;
 // $progress-bar-border-style: solid;
 // $progress-bar-border-radius: $global-radius;
@@ -803,7 +803,7 @@
 // We use these to control border styles
 // $side-nav-divider-size: 1px;
 // $side-nav-divider-style: solid;
-// $side-nav-divider-color: darken(#fff, 10%);
+// $side-nav-divider-color: scale-color(#fff, $lightness: -10%);
 
 // Split Buttons
 
@@ -858,14 +858,14 @@
 // $sub-nav-font-weight: normal;
 // $sub-nav-text-decoration: none;
 // $sub-nav-border-radius: 3px;
-// $sub-nav-font-color-hover: darken($sub-nav-font-color, 15%);
+// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%);
 
 
 // We use these to control the active item styles
 
 // $sub-nav-active-font-weight: normal;
 // $sub-nav-active-bg: $primary-color;
-// $sub-nav-active-bg-hover: darken($sub-nav-active-bg, 5%);
+// $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%);
 // $sub-nav-active-color: #fff;
 // $sub-nav-active-padding: rem-calc(3 16);
 // $sub-nav-active-cursor: default;
@@ -880,7 +880,7 @@
 // $include-html-form-classes: $include-html-classes;
 
 // Controlling border styles and background colors for the switch container
-// $switch-border-color: darken(#fff, 20%);
+// $switch-border-color: scale-color(#fff, $lightness: -20%);
 // $switch-border-style: solid;
 // $switch-border-width: 1px;
 // $switch-bg: #fff;
@@ -901,8 +901,8 @@
 
 // We use these to style the switch-paddle
 // $switch-paddle-bg: #fff;
-// $switch-paddle-fade-to-color: darken($switch-paddle-bg, 10%);
-// $switch-paddle-border-color: darken($switch-paddle-bg, 35%);
+// $switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%);
+// $switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%);
 // $switch-paddle-border-width: 1px;
 // $switch-paddle-border-style: solid;
 // $switch-paddle-transition-speed: .1s;
@@ -951,7 +951,7 @@
 
 // $tabs-navigation-padding: rem-calc(16);
 // $tabs-navigation-bg-color: #efefef  ;
-// $tabs-navigation-hover-bg-color: darken($tabs-navigation-bg-color, 5%);
+// $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%);
 // $tabs-navigation-font-color: #222;
 // $tabs-navigation-font-size: rem-calc(16);
 // $tabs-navigation-font-family: $body-font-family;
@@ -987,7 +987,7 @@
 // $has-tip-border-bottom: dotted 1px #ccc;
 // $has-tip-font-weight: bold;
 // $has-tip-font-color: #333;
-// $has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%);
+// $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%);
 // $has-tip-font-color-hover: $primary-color;
 // $has-tip-cursor-type: help;
 
@@ -1041,7 +1041,7 @@
 // $topbar-link-hover-lightness: -10%; // Darken by 10%
 // $topbar-link-bg-hover: #272727  ;
 // $topbar-link-bg-active: $primary-color;
-// $topbar-link-bg-active-hover: darken($primary-color, 5%);
+// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
 // $topbar-link-font-family: $body-font-family;
 
 // $topbar-button-font-size: 0.75rem;
@@ -1069,7 +1069,7 @@
 
 // Divider Styles
 // $topbar-divider-border-bottom: solid 1px  scale-color($topbar-bg-color, $lightness: 13%);
-// $topbar-divider-border-top: solid 1px darken($topbar-bg-color, 10%);
+// $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%);
 
 // Sticky Class
 // $topbar-sticky-class: ".sticky";
@@ -1123,14 +1123,14 @@
 // $paragraph-text-rendering: optimizeLegibility;
 
 // We use these to style <code> tags
-// $code-color: darken($alert-color, 15%);
+// $code-color: scale-color($alert-color, $lightness: -27%);
 // $code-font-family: Consolas, 'Liberation Mono', Courier, monospace;
 // $code-font-weight: bold;
 
 // We use these to style anchors
 // $anchor-text-decoration: none;
 // $anchor-font-color: $primary-color;
-// $anchor-font-color-hover: darken($primary-color, 5%);
+// $anchor-font-color-hover: scale-color($primary-color, $lightness: -14%);
 
 // We use these to style the <hr> element
 // $hr-border-width: 1px;

diff --git a/scss/foundation/components/_accordion.scss b/scss/foundation/components/_accordion.scss
index 4c91c342d93340a5789a1be7a4ec487b1d279c98..740c7d0353b8babb019a9370ee50faed3f4ea2c0 100644 (file)
--- a/scss/foundation/components/_accordion.scss
+++ b/scss/foundation/components/_accordion.scss
@@ -9,8 +9,8 @@ $include-html-accordion-classes: $include-html-classes !default;
 
 $accordion-navigation-padding: rem-calc(16) !default;
 $accordion-navigation-bg-color: #efefef !default;
-$accordion-navigation-hover-bg-color: darken($accordion-navigation-bg-color, 5%) !default;
-$accordion-navigation-active-bg-color: darken($accordion-navigation-bg-color, 3%) !default;
+$accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%) !default;
+$accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%) !default;
 $accordion-navigation-font-color: #222 !default;
 $accordion-navigation-font-size: rem-calc(16) !default;
 $accordion-navigation-font-family: $body-font-family !default;
@@ -20,24 +20,24 @@ $accordion-content-active-bg-color: #fff !default;
 
 @include exports("accordion") {
   @if $include-html-accordion-classes {
-    .accordion { 
+    .accordion {
       @include clearfix; margin-bottom: 0;
-      dd { 
-        display: block; 
-        margin-bottom: 0 !important; 
+      dd {
+        display: block;
+        margin-bottom: 0 !important;
         &.active a { background: $accordion-navigation-active-bg-color; }
-        > a { 
-          background: $accordion-navigation-bg-color; 
-          color: $accordion-navigation-font-color; 
-          padding: $accordion-navigation-padding; 
-          display: block; 
-          font-family: $body-font-family; 
+        > a {
+          background: $accordion-navigation-bg-color;
+          color: $accordion-navigation-font-color;
+          padding: $accordion-navigation-padding;
+          display: block;
+          font-family: $body-font-family;
           font-size: $accordion-navigation-font-size;
           &:hover { background: $accordion-navigation-hover-bg-color; }
         }
       }
-      .content { 
-        display: none; 
+      .content {
+        display: none;
         padding: $accordion-content-padding;
         &.active {
           display: block;

diff --git a/scss/foundation/components/_alert-boxes.scss b/scss/foundation/components/_alert-boxes.scss
index d9e9206ad5f4ff119d916370fd5f0a854e6cf738..eefbda33cea3a89ad4604ebc89c22e3d08bd2c2a 100644 (file)
--- a/scss/foundation/components/_alert-boxes.scss
+++ b/scss/foundation/components/_alert-boxes.scss
@@ -15,15 +15,15 @@ $alert-padding-bottom: $alert-padding-top !default;
 $alert-font-weight: normal !default;
 $alert-font-size: rem-calc(13) !default;
 $alert-font-color: #fff !default;
-$alert-font-color-alt: darken($secondary-color, 60%) !default;
+$alert-font-color-alt: scale-color($secondary-color, $lightness: -66%) !default;
 
 // We use this for close hover effect.
-$alert-function-factor: 5% !default;
+$alert-function-factor: -14% !default;
 
 // We use these to control border styles.
 $alert-border-style: solid !default;
 $alert-border-width: 1px !default;
-$alert-border-color: darken($primary-color, $alert-function-factor) !default;
+$alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor) !default;
 $alert-bottom-margin: rem-calc(20) !default;
 
 // We use these to style the close buttons
@@ -64,7 +64,7 @@ $alert-radius: $global-radius !default;
 
   // We control which background color and border come through.
   background-color: $bg;
-  border-color: darken($bg, $alert-function-factor);
+  border-color: scale-color($bg, $lightness: $alert-function-factor);
 
   // We control the text color for you based on the background color.
   @if $bg-lightness > 70% { color: $alert-font-color-alt; }

diff --git a/scss/foundation/components/_breadcrumbs.scss b/scss/foundation/components/_breadcrumbs.scss
index 8d230bc3bada7d83bfb37f9c1910cb2d69d181cf..3889f7b34d4d878b1c94cc3a92b4d8110d3a85a2 100644 (file)
--- a/scss/foundation/components/_breadcrumbs.scss
+++ b/scss/foundation/components/_breadcrumbs.scss
@@ -13,10 +13,10 @@ $crumb-padding: rem-calc(9 14 9) !default;
 $crumb-side-padding: rem-calc(12) !default;
 
 // We use these to control border styles.
-$crumb-function-factor: 10% !default;
+$crumb-function-factor: -10% !default;
 $crumb-border-size: 1px !default;
 $crumb-border-style: solid !default;
-$crumb-border-color: darken($crumb-bg, $crumb-function-factor) !default;
+$crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor) !default;
 $crumb-radius: $global-radius !default;
 
 // We use these to set various text styles for breadcrumbs.

diff --git a/scss/foundation/components/_buttons.scss b/scss/foundation/components/_buttons.scss
index 572dc5cb29e15c8224df6ceedaf167f81ab8e165..276f0b2318b079b3e75b5d508262311df40a6acf 100644 (file)
--- a/scss/foundation/components/_buttons.scss
+++ b/scss/foundation/components/_buttons.scss
@@ -109,14 +109,14 @@ $button-disabled-opacity: 0.7 !default;
     padding-top: $is-input + rem-calc(.5);
     padding-bottom: $is-input + rem-calc(.5);
     -webkit-appearance: none;
-    border: none; 
+    border: none;
     font-weight: $button-font-weight !important;
   }
   @else if $is-input {
     padding-top: $is-input + rem-calc(1);
     padding-bottom: $is-input;
     -webkit-appearance: none;
-    border: none; 
+    border: none;
     font-weight: $button-font-weight !important;
   }
 }
@@ -137,9 +137,9 @@ $button-disabled-opacity: 0.7 !default;
     $bg-lightness: lightness($bg);
 
     background-color: $bg;
-    border-color: darken($bg, $button-function-factor);
+    border-color: scale-color($bg, $lightness: $button-function-factor);
     &:hover,
-    &:focus { background-color: darken($bg, $button-function-factor); }
+    &:focus { background-color: scale-color($bg, $lightness: $button-function-factor); }
 
     // We control the text color for you based on the background color.
     @if $bg-lightness > 70% {

diff --git a/scss/foundation/components/_dropdown.scss b/scss/foundation/components/_dropdown.scss
index 285f99b6d145b18e2ddf046d95d20faac61e9c2b..6f7d5dd7bb5752503ca1871d902204d752f9048b 100644 (file)
--- a/scss/foundation/components/_dropdown.scss
+++ b/scss/foundation/components/_dropdown.scss
@@ -17,7 +17,7 @@ $f-dropdown-bg: #fff !default;
 // We use this to set the border styles for dropdowns.
 $f-dropdown-border-style: solid !default;
 $f-dropdown-border-width: 1px !default;
-$f-dropdown-border-color: darken(#fff, 20%) !default;
+$f-dropdown-border-color: scale-color(#fff, $lightness: -20%) !default;
 
 // We use these to style the triangle pip.
 $f-dropdown-triangle-size: 6px !default;

diff --git a/scss/foundation/components/_forms.scss b/scss/foundation/components/_forms.scss
index 3d542990c821c69bd8895123929fa0d227277cec..dc80811b027751e37810e91678ee89686d8c9d38 100644 (file)
--- a/scss/foundation/components/_forms.scss
+++ b/scss/foundation/components/_forms.scss
@@ -19,9 +19,9 @@ $input-font-family: inherit !default;
 $input-font-color: rgba(0,0,0,0.75) !default;
 $input-font-size: rem-calc(14) !default;
 $input-bg-color: #fff !default;
-$input-focus-bg-color: darken(#fff, 2%) !default;
-$input-border-color: darken(#fff, 20%) !default;
-$input-focus-border-color: darken(#fff, 40%) !default;
+$input-focus-bg-color: scale-color(#fff, $lightness: -2%) !default;
+$input-border-color: scale-color(#fff, $lightness: -20%) !default;
+$input-focus-border-color: scale-color(#fff, $lightness: -40%) !default;
 $input-border-style: solid !default;
 $input-border-width: 1px !default;
 $input-disabled-bg: #ddd !default;
@@ -41,8 +41,8 @@ $legend-font-weight: bold !default;
 $legend-padding: rem-calc(0 3) !default;
 
 // We use these to style the prefix and postfix input elements
-$input-prefix-bg: darken(#fff, 5%) !default;
-$input-prefix-border-color: darken(#fff, 20%) !default;
+$input-prefix-bg: scale-color(#fff, $lightness: -5%) !default;
+$input-prefix-border-color: scale-color(#fff, $lightness: -20%) !default;
 $input-prefix-border-size: 1px !default;
 $input-prefix-border-type: solid !default;
 $input-prefix-overflow: hidden !default;
@@ -179,7 +179,7 @@ $select-bg-color: #fafafa;
 // @MIXIN
 //
 // We use this mixin to create prefix label styles
-// $bg - Default:$input-prefix-bg || darken(#fff, 5%) !default;
+// $bg - Default:$input-prefix-bg || scale-color(#fff, $lightness: -5%) !default;
 // $is-button - Toggle position settings if prefix is a button. Default:false
 //
 @mixin prefix($bg:$input-prefix-bg,$is-button:false) {
@@ -187,7 +187,7 @@ $select-bg-color: #fafafa;
   @if $bg {
     $bg-lightness: lightness($bg);
     background: $bg;
-    border-color: darken($bg, 10%);
+    border-color: scale-color($bg, $lightness: -11%);
     border-#{$opposite-direction}: none;
 
     // Control the font color based on background brightness
@@ -210,14 +210,14 @@ $select-bg-color: #fafafa;
 // @MIXIN
 //
 // We use this mixin to create postfix label styles
-// $bg - Default:$input-prefix-bg || darken(#fff, 5%) !default;
+// $bg - Default:$input-prefix-bg || scale-color(#fff, $lightness: -5%) !default;
 // $is-button - Toggle position settings if prefix is a button. Default: false
 @mixin postfix($bg:$input-prefix-bg, $is-button:false) {
 
   @if $bg {
     $bg-lightness: lightness($bg);
     background: $bg;
-    border-color: darken($bg, 15%);
+    border-color: scale-color($bg, $lightness: -16%);
     border-#{$default-float}: none;
 
     // Control the font color based on background brightness
@@ -327,7 +327,7 @@ $select-bg-color: #fafafa;
       &.radius { @include radius($global-radius); }
       &:hover {
         background:
-          darken($select-bg-color, 3%)
+          scale-color($select-bg-color, $lightness: -3%)
           url('data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==') no-repeat;
         background-position-x: 97%;
         background-position-y: center;
@@ -336,7 +336,7 @@ $select-bg-color: #fafafa;
     }
     @-moz-document url-prefix() {
       select { background: $select-bg-color; }
-      select:hover { background: darken($select-bg-color, 3%); }
+      select:hover { background: scale-color($select-bg-color, $lightness: -3%); }
     }
     /* Attach elements to the beginning or end of an input */
     .prefix,

diff --git a/scss/foundation/components/_keystrokes.scss b/scss/foundation/components/_keystrokes.scss
index 5dcf5f8709d396d98f92ee4658181e56c1234ffc..6217165500abc6223c42ef8367b375ec090d970b 100644 (file)
--- a/scss/foundation/components/_keystrokes.scss
+++ b/scss/foundation/components/_keystrokes.scss
@@ -10,29 +10,29 @@ $keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
 $keystroke-font-size: rem-calc(14) !default;
 $keystroke-font-color: #222 !default;
 $keystroke-font-color-alt: #fff !default;
-$keystroke-function-factor: 7% !default;
+$keystroke-function-factor: -7% !default;
 
 // We use this to control keystroke padding.
 $keystroke-padding: rem-calc(2 4 0) !default;
 
 // We use these to control background and border styles.
-$keystroke-bg: darken(#fff, $keystroke-function-factor) !default;
+$keystroke-bg: scale-color(#fff, $lightness: $keystroke-function-factor) !default;
 $keystroke-border-style: solid !default;
 $keystroke-border-width: 1px !default;
-$keystroke-border-color: darken($keystroke-bg, $keystroke-function-factor) !default;
+$keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor) !default;
 $keystroke-radius: $global-radius !default;
 
 //
 // @mixins
 //
 // We use this mixin to create keystroke styles.
-// $bg - Default: $keystroke-bg || darken(#fff, $keystroke-function-factor) !default;
+// $bg - Default: $keystroke-bg || scale-color(#fff, $lightness: $keystroke-function-factor) !default;
 @mixin keystroke($bg:$keystroke-bg) {
   // This find the lightness percentage of the background color.
   $bg-lightness: lightness($bg);
 
   background-color: $bg;
-  border-color: darken($bg, $keystroke-function-factor);
+  border-color: scale-color($bg, $lightness: $keystroke-function-factor);
 
   // We adjust the font color based on the brightness of the background.
   @if $bg-lightness > 70% { color: $keystroke-font-color; }

diff --git a/scss/foundation/components/_offcanvas.scss b/scss/foundation/components/_offcanvas.scss
index 600b96606b489a4eb234c03f6b7907b4fe6392d7..fce9a797a6610233ac90e12e9f0740185bbb729b 100755 (executable)
--- a/scss/foundation/components/_offcanvas.scss
+++ b/scss/foundation/components/_offcanvas.scss
@@ -13,7 +13,7 @@ $tabbar-middle-padding: 0 rem-calc(10) !default;
 
 // Off Canvas Divider Styles
 $tabbar-right-section-border: solid 1px scale-color($tabbar-bg, $lightness: 13%) !default;
-$tabbar-left-section-border: solid 1px darken($tabbar-bg, 10%) !default;
+$tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%) !default;
 
 // Off Canvas Tab Bar Headers
 $tabbar-header-color: #FFF !default;
@@ -36,11 +36,11 @@ $off-canvas-label-border-bottom: none !default;
 $off-canvas-label-margin:0 !default;
 $off-canvas-link-padding: rem-calc(10, 15) !default;
 $off-canvas-link-color: rgba(#FFF, 0.7) !default;
-$off-canvas-link-border-bottom: 1px solid darken($off-canvas-bg, 5%) !default;
+$off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%) !default;
 
 // Off Canvas Menu Icon Variables
 $tabbar-menu-icon-color: #FFF !default;
-$tabbar-menu-icon-hover: darken($tabbar-menu-icon-color, 30%) !default;
+$tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%) !default;
 
 $tabbar-menu-icon-text-indent: rem-calc(35) !default;
 $tabbar-menu-icon-width: $tabbar-height !default;
@@ -165,7 +165,7 @@ $menu-slide: "transform 500ms ease" !default;
 @mixin right-small-section {
   @include tabbar-small-section;
   border-left: $tabbar-right-section-border;
-  box-shadow: -1px 0 0 darken($tabbar-bg, 10%);
+  box-shadow: -1px 0 0 scale-color($tabbar-bg, $lightness: -50%);
   right:0;
 }
 

diff --git a/scss/foundation/components/_pagination.scss b/scss/foundation/components/_pagination.scss
index 8395cc75b96dbce20bed632ea12e0f44d9d4c311..eac0d21a815ebf12dc976388f096474f43c87f19 100644 (file)
--- a/scss/foundation/components/_pagination.scss
+++ b/scss/foundation/components/_pagination.scss
@@ -19,7 +19,7 @@ $pagination-li-margin: rem-calc(5) !default;
 // We use these for the pagination anchor links
 $pagination-link-pad: rem-calc(1 10 1) !default;
 $pagination-link-font-color: #999 !default;
-$pagination-link-active-bg: darken(#fff, 10%) !default;
+$pagination-link-active-bg: scale-color(#fff, $lightness: -10%) !default;
 
 // We use these for disabled anchor links
 $pagination-link-unavailable-cursor: default !default;

diff --git a/scss/foundation/components/_panels.scss b/scss/foundation/components/_panels.scss
index f497098cd016f6e10bfe2d2f4d7e08a26afb44a6..f8de32a90e4618ccbd16176ad931a251b21f9b7d 100644 (file)
--- a/scss/foundation/components/_panels.scss
+++ b/scss/foundation/components/_panels.scss
@@ -6,13 +6,13 @@
 $include-html-panel-classes: $include-html-classes !default;
 
 // We use these to control the background and border styles
-$panel-bg: darken(#fff, 5%) !default;
+$panel-bg: scale-color(#fff, $lightness: -5%) !default;
 $panel-border-style: solid !default;
 $panel-border-size: 1px !default;
 
 // We use this % to control how much we darken things on hover
-$panel-function-factor: 10% !default;
-$panel-border-color: darken($panel-bg, $panel-function-factor) !default;
+$panel-function-factor: -11% !default;
+$panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor) !default;
 
 // We use these to set default inner padding and bottom margin
 $panel-margin-bottom: rem-calc(20) !default;
@@ -28,7 +28,7 @@ $callout-panel-link-color: $primary-color !default;
 // @mixins
 //
 // We use this mixin to create panels.
-// $bg - Sets the panel background color. Default: $panel-pg || darken(#fff, 5%) !default
+// $bg - Sets the panel background color. Default: $panel-pg || scale-color(#fff, $lightness: -5%) !default
 // $padding - Sets the panel padding amount. Default: $panel-padding || rem-calc(20)
 // $adjust - Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust || true
 @mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust) {
@@ -38,7 +38,7 @@ $callout-panel-link-color: $primary-color !default;
 
     border-style: $panel-border-style;
     border-width: $panel-border-size;
-    border-color: darken($bg, $panel-function-factor);
+    border-color: scale-color($bg, $lightness: $panel-function-factor);
     margin-bottom: $panel-margin-bottom;
     padding: $padding;
 

diff --git a/scss/foundation/components/_progress-bars.scss b/scss/foundation/components/_progress-bars.scss
index eb417bef52a1c862dcf33f4b0b769858b9576f7d..7093e536eb2bc575749d6f86847f7a4df907851c 100644 (file)
--- a/scss/foundation/components/_progress-bars.scss
+++ b/scss/foundation/components/_progress-bars.scss
@@ -10,7 +10,7 @@ $progress-bar-height: rem-calc(25) !default;
 $progress-bar-color: #f6f6f6 !default;
 
 // We use these to control the border styles
-$progress-bar-border-color: darken(#fff, 20%) !default;
+$progress-bar-border-color: scale-color(#fff, $lightness: 20%) !default;
 $progress-bar-border-size: 1px !default;
 $progress-bar-border-style: solid !default;
 $progress-bar-border-radius: $global-radius !default;

diff --git a/scss/foundation/components/_side-nav.scss b/scss/foundation/components/_side-nav.scss
index 11ce97d90e89f5be8b7ee29b17494ce719911715..b84cd45cf2d896d2b0aa03f6c230ebe23a81805b 100644 (file)
--- a/scss/foundation/components/_side-nav.scss
+++ b/scss/foundation/components/_side-nav.scss
@@ -27,7 +27,7 @@ $side-nav-active-font-family: $side-nav-font-family !default;
 // We use these to control border styles
 $side-nav-divider-size: 1px !default;
 $side-nav-divider-style: solid !default;
-$side-nav-divider-color: darken(#fff, 10%) !default;
+$side-nav-divider-color: scale-color(#fff, $lightness: 10%) !default;
 
 
 //

diff --git a/scss/foundation/components/_sub-nav.scss b/scss/foundation/components/_sub-nav.scss
index 15269919a39ab3506d6db4ab1a661e0fffe8bb13..1348f55413830fdcbf3e8c0d576713462f71ff88 100644 (file)
--- a/scss/foundation/components/_sub-nav.scss
+++ b/scss/foundation/components/_sub-nav.scss
@@ -22,14 +22,14 @@ $sub-nav-font-color: #999 !default;
 $sub-nav-font-weight: normal !default;
 $sub-nav-text-decoration: none !default;
 $sub-nav-border-radius: 3px !default;
-$sub-nav-font-color-hover: darken($sub-nav-font-color, 15%) !default;
+$sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%) !default;
 
 
 // We use these to control the active item styles
 
 $sub-nav-active-font-weight: normal !default;
 $sub-nav-active-bg: $primary-color !default;
-$sub-nav-active-bg-hover: darken($sub-nav-active-bg, 5%) !default;
+$sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%) !default;
 $sub-nav-active-color: #fff !default;
 $sub-nav-active-padding: rem-calc(3 16) !default;
 $sub-nav-active-cursor: default !default;
@@ -51,7 +51,7 @@ $sub-nav-item-divider-margin: rem-calc(12) !default;
   $font-color:$sub-nav-font-color,
   $font-size:$sub-nav-font-size,
   $active-bg:$sub-nav-active-bg,
-  $active-bg-hover:darken($active-bg, 5%)) {
+  $active-bg-hover:scale-color(#008CBA, $lightness: 5%)) {
   display: block;
   width: auto;
   overflow: hidden;

diff --git a/scss/foundation/components/_switch.scss b/scss/foundation/components/_switch.scss
index 8f14979b333490cd13e4b571e48e04b67a6abf83..46569e460c0a5b7467845d5213ca7a681509e6e0 100644 (file)
--- a/scss/foundation/components/_switch.scss
+++ b/scss/foundation/components/_switch.scss
@@ -12,7 +12,7 @@
 $include-html-form-classes: $include-html-classes !default;
 
 // Controlling border styles and background colors for the switch container
-$switch-border-color: darken(#fff, 20%) !default;
+$switch-border-color: scale-color(#fff, $lightness: -20%) !default;
 $switch-border-style: solid !default;
 $switch-border-width: 1px !default;
 $switch-bg: #fff !default;
@@ -33,8 +33,8 @@ $switch-label-side-padding: 6px !default;
 
 // We use these to style the switch-paddle
 $switch-paddle-bg: #fff !default;
-$switch-paddle-fade-to-color: darken($switch-paddle-bg, 10%) !default;
-$switch-paddle-border-color: darken($switch-paddle-bg, 35%) !default;
+$switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%) !default;
+$switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%) !default;
 $switch-paddle-border-width: 1px !default;
 $switch-paddle-border-style: solid !default;
 $switch-paddle-transition-speed: .1s !default;
@@ -206,13 +206,13 @@ $switch-label-outline: 1px dotted #888 !default;
     border-color: $switch-border-color;
 
     span:last-child {
-      border-color: darken($paddle-bg, 30%);
+      border-color: scale-color($paddle-bg, $lightness: -30%);
       background: $paddle-bg;
       @if $experimental {
-        background: -moz-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
-        background: -webkit-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
+        background: -moz-linear-gradient(top, $paddle-bg 0%, scale-color($paddle-bg, $lightness: -5%) 100%);
+        background: -webkit-linear-gradient(top, $paddle-bg 0%, scale-color($paddle-bg, $lightness: -5%) 100%);
       }
-      background: linear-gradient(to bottom, $paddle-bg 0%, darken($paddle-bg, 5%) 100%);
+      background: linear-gradient(to bottom, $paddle-bg 0%, scale-color($paddle-bg, $lightness: -5%) 100%);
 
       // Building the alternating colored sides of the switch
       @if $experimental {
@@ -232,10 +232,10 @@ $switch-label-outline: 1px dotted #888 !default;
       span:last-child {
         background: $paddle-bg;
         @if $experimental {
-          background: -moz-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
-          background: -webkit-linear-gradient(top, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
+          background: -moz-linear-gradient(top, $paddle-bg 0%, scale-color($paddle-bg, $lightness: -10%) 100%);
+          background: -webkit-linear-gradient(top, $paddle-bg 0%, scale-color($paddle-bg, $lightness: -10%) 100%);
         }
-        background: linear-gradient(to bottom, $paddle-bg 0%, darken($paddle-bg, 10%) 100%);
+        background: linear-gradient(to bottom, $paddle-bg 0%, scale-color($paddle-bg, $lightness: -10%) 100%);
       }
     }
 

diff --git a/scss/foundation/components/_tabs.scss b/scss/foundation/components/_tabs.scss
index 4578574d0fdb5265ce9a9c7d6b0e3fb9b2433da9..976e9e878b64016c5c4e272a3abd4bd5b7623bdc 100644 (file)
--- a/scss/foundation/components/_tabs.scss
+++ b/scss/foundation/components/_tabs.scss
@@ -8,7 +8,7 @@ $include-html-tabs-classes: $include-html-classes !default;
 
 $tabs-navigation-padding: rem-calc(16) !default;
 $tabs-navigation-bg-color: #efefef !default;
-$tabs-navigation-hover-bg-color: darken($tabs-navigation-bg-color, 5%) !default;
+$tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%) !default;
 $tabs-navigation-font-color: #222 !default;
 $tabs-navigation-font-size: rem-calc(16) !default;
 $tabs-navigation-font-family: $body-font-family !default;
@@ -20,24 +20,24 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
 
 @include exports("tab") {
   @if $include-html-tabs-classes {
-    .tabs { 
-      @include clearfix; 
+    .tabs {
+      @include clearfix;
       margin-bottom: 0 !important;
-      dd { 
-        position: relative; 
+      dd {
+        position: relative;
         margin-bottom: 0 !important;
-        top: 1px; 
-        float: $default-float; 
-        > a { 
-          display: block; 
+        top: 1px;
+        float: $default-float;
+        > a {
+          display: block;
           background: $tabs-navigation-bg-color;
-          color: $tabs-navigation-font-color; 
+          color: $tabs-navigation-font-color;
           padding-top: $tabs-navigation-padding;
           padding-#{$opposite-direction}: $tabs-navigation-padding * 2;
           padding-bottom: $tabs-navigation-padding + rem-calc(1);
           padding-#{$default-float}: $tabs-navigation-padding * 2;
           font-family: $tabs-navigation-font-family;
-          font-size: $tabs-navigation-font-size; 
+          font-size: $tabs-navigation-font-size;
           &:hover { background: $tabs-navigation-hover-bg-color; }
         }
         &.active a { background: #fff; }
@@ -50,7 +50,7 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
           a { @include side-radius($opposite-direction, $global-radius); }
         }
       }
-      &.vertical { 
+      &.vertical {
         dd {
           position: inherit;
           float: none;
@@ -60,13 +60,13 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
       }
     }
 
-    .tabs-content { 
-      @include clearfix; 
+    .tabs-content {
+      @include clearfix;
       margin-bottom: $tabs-content-margin-bottom;
-      > .content { 
-        display: none; 
-        float: $default-float; 
-        padding: $tabs-content-padding 0; 
+      > .content {
+        display: none;
+        float: $default-float;
+        padding: $tabs-content-padding 0;
         &.active { display: block; }
         &.contained { padding: $tabs-content-padding; }
       }
@@ -78,15 +78,15 @@ $tabs-vertical-navigation-margin-bottom: 1.25rem !default;
     @media #{$medium-up} {
       .tabs {
         &.vertical {
-          width: 20%; 
-          float: $default-float; 
+          width: 20%;
+          float: $default-float;
           margin-bottom: $tabs-vertical-navigation-margin-bottom;
         }
       }
       .tabs-content {
         &.vertical {
-          width: 80%; 
-          float: $default-float; 
+          width: 80%;
+          float: $default-float;
           margin-#{$default-float}: -1px;
         }
       }

diff --git a/scss/foundation/components/_tooltips.scss b/scss/foundation/components/_tooltips.scss
index dd0f5b90258fdc245dbe4fb4edceae2e6256dd28..23aae500ba92a69669a32200ca81fc85285d5c0d 100644 (file)
--- a/scss/foundation/components/_tooltips.scss
+++ b/scss/foundation/components/_tooltips.scss
@@ -8,7 +8,7 @@ $include-html-tooltip-classes: $include-html-classes !default;
 $has-tip-border-bottom: dotted 1px #ccc !default;
 $has-tip-font-weight: bold !default;
 $has-tip-font-color: #333 !default;
-$has-tip-border-bottom-hover: dotted 1px darken($primary-color, 20%) !default;
+$has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%) !default;
 $has-tip-font-color-hover: $primary-color !default;
 $has-tip-cursor-type: help !default;
 

diff --git a/scss/foundation/components/_top-bar.scss b/scss/foundation/components/_top-bar.scss
index e3bb0df85ef3479e54a18b1814eb5a0f30740d44..927a24e1fb8a789d738c141ea59550f65dc19cd3 100644 (file)
--- a/scss/foundation/components/_top-bar.scss
+++ b/scss/foundation/components/_top-bar.scss
@@ -37,7 +37,7 @@ $topbar-link-font-size: rem-calc(13) !default;
 $topbar-link-hover-lightness: -10% !default; // Darken by 10%
 $topbar-link-bg-hover: #272727 !default;
 $topbar-link-bg-active: $primary-color !default;
-$topbar-link-bg-active-hover: darken($primary-color, 5%) !default;
+$topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default;
 $topbar-link-font-family: $body-font-family !default;
 
 $topbar-button-font-size: 0.75rem;
@@ -65,7 +65,7 @@ $topbar-media-query: $medium-up !default;
 
 // Divider Styles
 $topbar-divider-border-bottom: solid 1px  scale-color($topbar-bg-color, $lightness: 13%) !default;
-$topbar-divider-border-top: solid 1px darken($topbar-bg-color, 10%) !default;
+$topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%) !default;
 
 // Sticky Class
 $topbar-sticky-class: ".sticky" !default;
@@ -296,25 +296,25 @@ meta.foundation-mq-topbar {
              padding-#{$opposite-direction}: $topbar-height / 3;
              padding-#{$default-float}: $topbar-height / 3;
             &:hover {
-              background: darken($primary-color, 10%);
+              background: scale-color($primary-color, $lightness: -27%);
             }
           }
           &.button.secondary {
             background: $secondary-color;
             &:hover {
-              background: darken($secondary-color, 10%);
+              background: scale-color($secondary-color, $lightness: -11%);
             }
           }
           &.button.success {
             background: $success-color;
             &:hover {
-              background: darken($success-color, 10%);
+              background: scale-color($success-color, $lightness: -21%);
             }
           }
           &.button.alert {
             background: $alert-color;
             &:hover {
-              background: darken($alert-color, 10%);
+              background: scale-color($alert-color, $lightness: -18%);
             }
           }
 

diff --git a/scss/foundation/components/_type.scss b/scss/foundation/components/_type.scss
index a33f7353fb35af4c454424092cdeb1f1d22f975c..97cc56785d24d9e869022316a6bb850089a80517 100755 (executable)
--- a/scss/foundation/components/_type.scss
+++ b/scss/foundation/components/_type.scss
@@ -43,14 +43,14 @@ $paragraph-aside-font-style: italic !default;
 $paragraph-text-rendering: optimizeLegibility !default;
 
 // We use these to style <code> tags
-$code-color: darken($alert-color, 15%) !default;
+$code-color: scale-color($alert-color, $lightness: -27%) !default;
 $code-font-family: Consolas, 'Liberation Mono', Courier, monospace !default;
 $code-font-weight: bold !default;
 
 // We use these to style anchors
 $anchor-text-decoration: none !default;
 $anchor-font-color: $primary-color !default;
-$anchor-font-color-hover: darken($primary-color, 5%) !default;
+$anchor-font-color-hover: scale-color($primary-color, $lightness: -14%) !default;
 
 // We use these to style the <hr> element
 $hr-border-width: 1px !default;