From: Martin Westin <martin@eimermusic.com>
Date: Fri, 6 Dec 2013 10:36:05 +0000 (+0100)
Subject: Replaced darken() with scale-color()
X-Git-Tag: 5.0.3~71^2~25^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F3827%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

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 6e64844c5..653ee85dd 100644
--- 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 4e7f8c5d6..e064aa597 100644
--- 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 4dedb6b30..d1c9aa796 100644
--- 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 a76f871dd..7d051ace4 100644
--- 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 06cf3c1d1..3f602ea58 100644
--- 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 66a55bd1e..813a87a72 100644
--- 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 638caeb61..2cdff4400 100644
--- 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 1a44aa79f..adbff77b8 100644
--- 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 5702eee7a..8fe2491a3 100644
--- 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 e95108224..340ae7886 100644
--- 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 1a934f330..b47481b13 100644
--- 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 fe28a39e8..d33358f55 100644
--- 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 ce539f811..fc3127746 100644
--- 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 ac52a42f0..535e531b6 100644
--- 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 9b421a326..517a50737 100644
--- 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 b91db6e66..8b6f69330 100644
--- 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 1d32405f6..dffec802f 100644
--- 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 5e020f26a..acc1ce978 100644
--- 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 a37b86f99..35b85441b 100644
--- 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 56551c713..cccf5ab2b 100644
--- 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 4c91c342d..740c7d035 100644
--- 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 d9e9206ad..eefbda33c 100644
--- 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 8d230bc3b..3889f7b34 100644
--- 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 572dc5cb2..276f0b231 100644
--- 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 285f99b6d..6f7d5dd7b 100644
--- 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 3d542990c..dc80811b0 100644
--- 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 5dcf5f870..621716550 100644
--- 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 600b96606..fce9a797a 100755
--- 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 8395cc75b..eac0d21a8 100644
--- 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 f497098cd..f8de32a90 100644
--- 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 eb417bef5..7093e536e 100644
--- 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 11ce97d90..b84cd45cf 100644
--- 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 15269919a..1348f5541 100644
--- 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 8f14979b3..46569e460 100644
--- 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 4578574d0..976e9e878 100644
--- 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 dd0f5b902..23aae500b 100644
--- 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 e3bb0df85..927a24e1f 100644
--- 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 a33f7353f..97cc56785 100755
--- 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;