less-rails-semantic_ui 1.12.3.0 → 2.0.0.0

data/assets/stylesheets/semantic_ui/themes/default/globals/site.variables

@@ -6,12 +6,14 @@
        Fonts
 --------------------*/
 
-@headerFont        : 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
-@pageFont          : 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+@fontName          : 'Lato';
 @fontSmoothing     : antialiased;
 
+@headerFont        : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+@pageFont          : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
+
+@googleFontName    : @fontName;
 @importGoogleFonts : true;
-@googleFontName    : 'Lato';
 @googleFontSizes   : '400,700,400italic,700italic';
 @googleSubset      : 'latin';
 
@@ -22,56 +24,23 @@
       Base Sizes
 --------------------*/
 
+/* This is the single variable that controls them all */
 @emSize   : 14px;
-@fontSize : 14px;
-
-/*--------------
-  Page Heading
----------------*/
 
-@headerFontWeight : bold;
-@headerLineHeight : 1.33em;
-
-@h1               : 2rem;
-@h2               : 1.714rem;
-@h3               : 1.28rem;
-@h4               : 1.071rem;
-@h5               : 1rem;
+/* The size of page text  */
+@fontSize : 14px;
 
 /*-------------------
-      Site Colors
+    Border Radius
 --------------------*/
 
-/*---  Colors  ---*/
-@black            : #1B1C1D;
-@blue             : #3B83C0;
-@green            : #5BBD72;
-@grey             : #CCCCCC;
-@orange           : #E07B53;
-@pink             : #D9499A;
-@purple           : #564F8A;
-@red              : #D95C5C;
-@teal             : #00B5AD;
-@yellow           : #F2C61F;
-
-/*---  Light Colors  ---*/
-@lightBlack       : #333333;
-@lightBlue        : #54C8FF;
-@lightGreen       : #2ECC40;
-@lightOrange      : #FF851B;
-@lightPink        : #FF8EDF;
-@lightPurple      : #CDC6FF;
-@lightRed         : #FF695E;
-@lightTeal        : #6DFFFF;
-@lightYellow      : #FFE21F;
+/* See Power-user section below
+   for explanation of @px variables
+*/
+@relativeBorderRadius: @relative4px;
+@absoluteBorderRadius: @4px;
 
-/*---   Neutrals  ---*/
-@fullBlack        : #000000;
-@darkGrey         : #AAAAAA;
-@lightGrey        : #DCDDDE;
-@offWhite         : #FAFAFA;
-@darkWhite        : #F0F0F0;
-@white            : #FFFFFF;
+@defaultBorderRadius: @absoluteBorderRadius;
 
 /*-------------------
     Brand Colors
@@ -83,34 +52,60 @@
 @lightPrimaryColor   : @lightBlue;
 @lightSecondaryColor : @lightBlack;
 
+/*--------------
+  Page Heading
+---------------*/
+
+@headerFontWeight : bold;
+@headerLineHeight : 1.2857em;
+
+@h1 : 2rem;
+@h2 : 1.714rem;
+@h3 : 1.28rem;
+@h4 : 1.071rem;
+@h5 : 1rem;
+
+/*--------------
+   Form Input
+---------------*/
+
+/* This adjusts the default form input across all elements */
+@inputBackground        : @white;
+@inputVerticalPadding   : @relative11px;
+@inputHorizontalPadding : @relative14px;
+@inputPadding           : @inputVerticalPadding @inputHorizontalPadding;
+
+/* Line Height Default For Inputs in Browser */
+@inputLineHeight: 1.2142em;
+
 /*-------------------
         Sizes
 --------------------*/
 
 /*
-  To have sizing resolve to a specified pixel values adjust
-  the numerator to the desired font size and the denominator
-  to the base em size
+  This ensures all relative sizes are exact pixels
+  expressed in em
 */
 
-@miniSize        : (10 / 14);
-@tinySize        : (12 / 14);
-@smallSize       : (13 / 14);
-@mediumSize      : (14 / 14);
-@largeSize       : (16 / 14);
-@bigSize         : (18 / 14);
-@hugeSize        : (20 / 14);
-@massiveSize     : (24 / 14);
+@miniSize        : (10 / unit(@emSize));
+@tinySize        : (12 / unit(@emSize));
+@smallSize       : (13 / unit(@emSize));
+@mediumSize      : (14 / unit(@emSize));
+@largeSize       : (16 / unit(@emSize));
+@bigSize         : (18 / unit(@emSize));
+@hugeSize        : (20 / unit(@emSize));
+@massiveSize     : (24 / unit(@emSize));
+
 
 /*-------------------
         Page
 --------------------*/
 
-@pageBackground      : #F7F7F7;
+@pageBackground      : #FFFFFF;
 @pageOverflowX       : hidden;
 
-@lineHeight          : 1.33;
-@textColor           : rgba(0, 0, 0, 0.8);
+@lineHeight          : 1.4285em;
+@textColor           : rgba(0, 0, 0, 0.87);
 
 /*-------------------
       Paragraph
@@ -123,9 +118,10 @@
        Links
 --------------------*/
 
-@linkColor           : #009FDA;
+@linkColor           : #4183C4;
 @linkUnderline       : none;
-@linkHoverColor      : lighten(@linkColor, 5);
+@linkHoverColor      : darken(saturate(@linkColor, 20), 15, relative);
+@linkHoverUnderline  : @linkUnderline;
 
 /*-------------------
   Highlighted Text
@@ -137,17 +133,19 @@
 @inputHighlightBackground : rgba(100, 100, 100, 0.4);
 @inputHighlightColor      : @textColor;
 
+
 /*-------------------
        Loader
 --------------------*/
 
-@loaderSpeed: 0.6s;
-@loaderLineWidth: 0.2em;
-@loaderFillColor: rgba(0, 0, 0, 0.1);
-@loaderLineColor: @darkGrey;
+@loaderSize              : @relativeBig;
+@loaderSpeed             : 0.6s;
+@loaderLineWidth         : 0.2em;
+@loaderFillColor         : rgba(0, 0, 0, 0.1);
+@loaderLineColor         : @grey;
 
-@invertedLoaderFillColor: rgba(255, 255, 255, 0.15);
-@invertedLoaderLineColor: @white;
+@invertedLoaderFillColor : rgba(255, 255, 255, 0.15);
+@invertedLoaderLineColor : @white;
 
 /*-------------------
         Grid
@@ -155,6 +153,13 @@
 
 @columnCount: 16;
 
+/*-------------------
+     Transitions
+--------------------*/
+
+@defaultDuration : 0.1s;
+@defaultEasing   : ease;
+
 /*-------------------
      Breakpoints
 --------------------*/
@@ -162,41 +167,157 @@
 @mobileBreakpoint            : 320px;
 @tabletBreakpoint            : 768px;
 @computerBreakpoint          : 992px;
-@largeMonitorBreakpoint      : 1400px;
+@largeMonitorBreakpoint      : 1200px;
 @widescreenMonitorBreakpoint : 1920px;
 
+/*-------------------
+      Site Colors
+--------------------*/
+
+/*---  Colors  ---*/
+@red              : #DB2828;
+@orange           : #F2711C;
+@yellow           : #FBBD08;
+@olive            : #B5CC18;
+@green            : #21BA45;
+@teal             : #00B5AD;
+@blue             : #2185D0;
+@violet           : #6435C9;
+@purple           : #A333C8;
+@pink             : #E03997;
+@brown            : #A5673F;
+@grey             : #767676;
+@black            : #1B1C1D;
+
+/*---  Light Colors  ---*/
+@lightRed         : #FF695E;
+@lightOrange      : #FF851B;
+@lightYellow      : #FFE21F;
+@lightOlive       : #D9E778;
+@lightGreen       : #2ECC40;
+@lightTeal        : #6DFFFF;
+@lightBlue        : #54C8FF;
+@lightViolet      : #A291FB;
+@lightPurple      : #DC73FF;
+@lightPink        : #FF8EDF;
+@lightBrown       : #D67C1C;
+@lightGrey        : #DCDDDE;
+@lightBlack       : #545454;
+
+/*---   Neutrals  ---*/
+@fullBlack        : #000000;
+@offWhite         : #F9FAFB;
+@darkWhite        : #F3F4F5;
+@midWhite         : #DCDDDE;
+@white            : #FFFFFF;
+
+/*--- Colored Backgrounds ---*/
+@redBackground    : #FFE8E6;
+@orangeBackground : #FFEDDE;
+@yellowBackground : #FFF8DB;
+@oliveBackground  : #FBFDEF;
+@greenBackground  : #E5F9E7;
+@tealBackground   : #E1F7F7;
+@blueBackground   : #DFF0FF;
+@violetBackground : #EAE7FF;
+@purpleBackground : #F6E7FF;
+@pinkBackground   : #FFE3FB;
+@brownBackground  : #F1E2D3;
+
+/*--- Colored Headers ---*/
+@redHeaderColor    : darken(@redTextColor, 5);
+@oliveHeaderColor  : darken(@oliveTextColor, 5);
+@greenHeaderColor  : darken(@greenTextColor, 5);
+@yellowHeaderColor : darken(@yellowTextColor, 5);
+@blueHeaderColor   : darken(@blueTextColor, 5);
+@tealHeaderColor   : darken(@tealTextColor, 5);
+@pinkHeaderColor   : darken(@pinkTextColor, 5);
+@violetHeaderColor : darken(@violetTextColor, 5);
+@purpleHeaderColor : darken(@purpleTextColor, 5);
+@orangeHeaderColor : darken(@orangeTextColor, 5);
+@brownHeaderColor  : darken(@brownTextColor, 5);
+
+/*--- Colored Text ---*/
+@redTextColor    : @red;
+@orangeTextColor : @orange;
+@yellowTextColor : #B58105; // Yellow text is difficult to read
+@oliveTextColor  : #8ABC1E; // Olive is difficult to read
+@greenTextColor  : #1EBC30; // Green is difficult to read
+@tealTextColor   : #10A3A3; // Teal text is difficult to read
+@blueTextColor   : @blue;
+@violetTextColor : @violet;
+@purpleTextColor : @purple;
+@pinkTextColor   : @pink;
+@brownTextColor  : @brown;
+
+
+
 /*-------------------
      Alpha Colors
 --------------------*/
 
-@subtleTransparentBlack : rgba(0, 0, 0, 0.03);
-@transparentBlack       : rgba(0, 0, 0, 0.05);
-@strongTransparentBlack : rgba(0, 0, 0, 0.10);
+@subtleTransparentBlack     : rgba(0, 0, 0, 0.03);
+@transparentBlack           : rgba(0, 0, 0, 0.05);
+@strongTransparentBlack     : rgba(0, 0, 0, 0.10);
+@veryStrongTransparentBlack : rgba(0, 0, 0, 0.15);
 
-@subtleTransparentWhite : rgba(255, 255, 255, 0.02);
-@transparentWhite       : rgba(255, 255, 255, 0.05);
-@strongTransparentWhite : rgba(255, 255, 255, 0.07);
+@subtleTransparentWhite     : rgba(255, 255, 255, 0.02);
+@transparentWhite           : rgba(255, 255, 255, 0.08);
+@strongTransparentWhite     : rgba(255, 255, 255, 0.15);
 
 /*-------------------
        Accents
 --------------------*/
 
-/* 4px @ default em */
-@relativeBorderRadius: 0.2857em;
-@absoluteBorderRadius: 0.2857rem;
-@defaultBorderRadius: @absoluteBorderRadius;
-
 /* Differentiating Neutrals */
 @subtleGradient: linear-gradient(transparent, @transparentBlack);
 
 /* Differentiating Layers */
-@subtleShadow: 0px 1px 2px 0 @transparentBlack;
-
+@subtleShadow:
+  0px 1px 2px 0 @borderColor
+;
+@floatingShadow:
+  0px 2px 4px 0px rgba(34, 36, 38, 0.12),
+  0px 2px 10px 0px rgba(34, 36, 38, 0.08)
+;
 
 /*******************************
            Power-User
 *******************************/
 
+
+/*-------------------
+    Emotive Colors
+--------------------*/
+
+/* Positive */
+@positiveColor           : @green;
+@positiveBackgroundColor : #FCFFF5;
+@positiveBorderColor     : #A3C293;
+@positiveHeaderColor     : #1A531B;
+@positiveTextColor       : #2C662D;
+
+/* Negative */
+@negativeColor           : @red;
+@negativeBackgroundColor : #FFF6F6;
+@negativeBorderColor     : #E0B4B4;
+@negativeHeaderColor     : #912D2B;
+@negativeTextColor       : #9F3A38;
+
+/* Info */
+@infoColor              : #31CCEC;
+@infoBackgroundColor    : #F8FFFF;
+@infoBorderColor        : #A9D5DE;
+@infoHeaderColor        : #0E566C;
+@infoTextColor          : #276F86;
+
+/* Warning */
+@warningColor           : #F2C037;
+@warningBorderColor     : #C9BA9B;
+@warningBackgroundColor : #FFFAF3;
+@warningHeaderColor     : #794B02;
+@warningTextColor       : #573A08;
+
 /*-------------------
         Paths
 --------------------*/
@@ -228,102 +349,73 @@
 @relativeHuge    : unit( round(@hugeSize * @emSize) / @emSize, em);
 @relativeMassive : unit( round(@massiveSize * @emSize) / @emSize, em);
 
-/*-------------------
-       Icons
---------------------*/
-
-/* Maximum Glyph Width of Icon */
-@iconWidth : 1.18em;
-
-/*-------------------
-       Easing
---------------------*/
-
-@defaultEasing: ease;
 
 /*-------------------
-     All Colors
+  Exact Pixel Values
 --------------------*/
+/*
+  These are used to specify exact pixel values in em
+  for things like borders
 
-/*--- Colored Backgrounds ---*/
-@blueBackground   : #DFF0FF;
-@greenBackground  : #EBFFED;
-@orangeBackground : #FFEDDE;
-@pinkBackground   : #FFE3FB;
-@purpleBackground : #EAE7FF;
-@redBackground    : #FFE8E6;
-@tealBackground   : #E9FFFF;
-@yellowBackground : #FFF8DB;
-
-/*--- Colored Text ---*/
-@blueTextColor    : @blue;
-@orangeTextColor  : @orange;
-@pinkTextColor    : @pink;
-@purpleTextColor  : @purple;
-@redTextColor     : @red;
-@greenTextColor   : #1EBC30; // Green is difficult to read
-@tealTextColor    : #10A3A3; // Teal text is difficult to read
-@yellowTextColor  : #B58105; // Yellow text is difficult to read
+  Since there are many more sizes than names for sizes,
+  these are named by their original pixel values.
 
-/*--- Colored Headers ---*/
-@blueHeaderColor   : darken(@blueTextColor, 5);
-@greenHeaderColor  : darken(@greenTextColor, 5);
-@orangeHeaderColor : darken(@orangeTextColor, 5);
-@pinkHeaderColor   : darken(@pinkTextColor, 5);
-@purpleHeaderColor : darken(@purpleTextColor, 5);
-@redHeaderColor    : darken(@redTextColor, 5);
-@tealHeaderColor   : darken(@tealTextColor, 5);
-@yellowHeaderColor : darken(@yellowTextColor, 5);
+*/
 
+@1px          : unit( (1 / @emSize), rem);
+@2px          : unit( (2 / @emSize), rem);
+@3px          : unit( (3 / @emSize), rem);
+@4px          : unit( (4 / @emSize), rem);
+@5px          : unit( (5 / @emSize), rem);
+@6px          : unit( (6 / @emSize), rem);
+@7px          : unit( (7 / @emSize), rem);
+@8px          : unit( (8 / @emSize), rem);
+@9px          : unit( (9 / @emSize), rem);
+@10px         : unit( (10 / @emSize), rem);
+@11px         : unit( (11 / @emSize), rem);
+@12px         : unit( (12 / @emSize), rem);
+@13px         : unit( (13 / @emSize), rem);
+@14px         : unit( (14 / @emSize), rem);
+
+@relative1px  : unit( (1 / @emSize), em);
+@relative2px  : unit( (2 / @emSize), em);
+@relative3px  : unit( (3 / @emSize), em);
+@relative4px  : unit( (4 / @emSize), em);
+@relative5px  : unit( (5 / @emSize), em);
+@relative6px  : unit( (6 / @emSize), em);
+@relative7px  : unit( (7 / @emSize), em);
+@relative8px  : unit( (8 / @emSize), em);
+@relative9px  : unit( (9 / @emSize), em);
+@relative10px : unit( (10 / @emSize), em);
+@relative11px : unit( (11 / @emSize), em);
+@relative12px : unit( (12 / @emSize), em);
+@relative13px : unit( (13 / @emSize), em);
+@relative14px : unit( (14 / @emSize), em);
 
 /*-------------------
-    Emotive Colors
+       Icons
 --------------------*/
 
-/* Positive */
-@positiveColor           : @green;
-@positiveBackgroundColor : #EEFFE7;
-@positiveBorderColor     : #B7CAA7;
-@positiveHeaderColor     : #356E36;
-@positiveTextColor       : #3C763D;
-
-/* Negative */
-@negativeColor           : @red;
-@negativeBackgroundColor : #FFF0F0;
-@negativeBorderColor     : #DBB1B1;
-@negativeHeaderColor     : #912D2B;
-@negativeTextColor       : #A94442;
-
-/* Info */
-@infoColor              : #31CCEC;
-@infoBackgroundColor    : #E9FAFF;
-@infoBorderColor        : #AAD6DF;
-@infoHeaderColor        : #297187;
-@infoTextColor          : #337B92;
-
-/* Warning */
-@warningColor           : #F2C037;
-@warningBorderColor     : #D9CAAB;
-@warningBackgroundColor : #FFFBE6;
-@warningHeaderColor     : #825C01;
-@warningTextColor       : #876A38;
-
+/* Maximum Glyph Width of Icon */
+@iconWidth : 1.18em;
 
 /*-------------------
      Neutral Text
 --------------------*/
 
 @darkTextColor               : rgba(0, 0, 0, 0.85);
+@mutedTextColor              : rgba(0, 0, 0, 0.6);
 @lightTextColor              : rgba(0, 0, 0, 0.4);
 
 @unselectedTextColor         : rgba(0, 0, 0, 0.4);
 @hoveredTextColor            : rgba(0, 0, 0, 0.8);
-@pressedTextColor            : rgba(0, 0, 0, 0.8);
-@selectedTextColor           : rgba(0, 0, 0, 0.8);
+@pressedTextColor            : rgba(0, 0, 0, 0.9);
+@selectedTextColor           : rgba(0, 0, 0, 0.95);
 @disabledTextColor           : rgba(0, 0, 0, 0.2);
 
-@invertedTextColor           : rgba(255, 255, 255, 1);
-@invertedLightTextColor      : rgba(255, 255, 255, 0.8);
+@invertedTextColor           : rgba(255, 255, 255, 0.9);
+@invertedMutedTextColor      : rgba(255, 255, 255, 0.8);
+@invertedLightTextColor      : rgba(255, 255, 255, 0.7);
 @invertedUnselectedTextColor : rgba(255, 255, 255, 0.5);
 @invertedHoveredTextColor    : rgba(255, 255, 255, 1);
 @invertedPressedTextColor    : rgba(255, 255, 255, 1);
@@ -334,9 +426,9 @@
      Brand Colors
 --------------------*/
 
-@facebookColor   : #3B579D;
-@twitterColor    : #4092CC;
-@googlePlusColor : #D34836;
+@facebookColor   : #3B5998;
+@twitterColor    : #0084B4;
+@googlePlusColor : #DC4A38;
 @linkedInColor   : #1F88BE;
 @youtubeColor    : #CC181E;
 @instagramColor  : #49769C;
@@ -349,33 +441,36 @@
 
 @circularRadius                : 500rem;
 
-@borderColor                   : rgba(39, 41, 43, 0.15);
-@selectedBorderColor           : rgba(39, 41, 43, 0.3);
-@disabledBorderColor           : rgba(39, 41, 43, 0.5);
+@borderColor                   : rgba(34, 36, 38, 0.15);
+@strongBorderColor             : rgba(34, 36, 38, 0.22);
+@internalBorderColor           : rgba(34, 36, 38, 0.1);
+@selectedBorderColor           : rgba(34, 36, 38, 0.35);
+@disabledBorderColor           : rgba(34, 36, 38, 0.5);
 
+@solidInternalBorderColor      : #FAFAFA;
 @solidBorderColor              : #D4D4D5;
-@solidSelectedBorderColor      : #BEBEBF;
+@solidSelectedBorderColor      : #BCBDBD;
 
-@whiteBorderColor              : rgba(255, 255, 255, 0.2);
+@whiteBorderColor              : rgba(255, 255, 255, 0.1);
 @selectedWhiteBorderColor      : rgba(255, 255, 255, 0.8);
 
 @solidWhiteBorderColor         : #555555;
 @selectedSolidWhiteBorderColor : #999999;
 
 
-/*-------------------
-     Transitions
---------------------*/
-
-@transitionDuration : 0.2s;
-@transitionEasing   : ease;
-
 /*-------------------
     Derived Values
 --------------------*/
 
+/* Loaders Position Offset */
+@loaderOffset : -(@loaderSize / 2);
+@loaderMargin : @loaderOffset 0em 0em @loaderOffset;
+
 /* Rendered Scrollbar Width */
-@scrollbarWidth: 15px;
+@scrollbarWidth: 17px;
+
+/* Maximum Single Character Glyph Width, aka Capital "W" */
+@glyphWidth: 1.1em;
 
 /* Used to match floats with text */
 @lineHeightOffset       : ((@lineHeight - 1em) / 2);
@@ -390,20 +485,23 @@
 @pageMinWidth       : 320px;
 
 /* Positive / Negative Dupes */
-@successColor           : @positiveColor;
-@errorColor             : @negativeColor;
 @successBackgroundColor : @positiveBackgroundColor;
-@errorBackgroundColor   : @negativeBackgroundColor;
-@successTextColor       : @positiveTextColor;
-@errorTextColor         : @negativeTextColor;
+@successColor           : @positiveColor;
 @successBorderColor     : @positiveBorderColor;
-@errorBorderColor       : @negativeBorderColor;
 @successHeaderColor     : @positiveHeaderColor;
+@successTextColor       : @positiveTextColor;
+
+@errorBackgroundColor   : @negativeBackgroundColor;
+@errorColor             : @negativeColor;
+@errorBorderColor       : @negativeBorderColor;
 @errorHeaderColor       : @negativeHeaderColor;
+@errorTextColor         : @negativeTextColor;
+
 
 /* Responsive */
 @largestMobileScreen : (@tabletBreakpoint - 1px);
 @largestTabletScreen : (@computerBreakpoint - 1px);
+@largestSmallMonitor : (@largeMonitorBreakpoint - 1px);
 @largestLargeMonitor : (@widescreenMonitorBreakpoint - 1px);
 
 /* Columns */
@@ -443,14 +541,14 @@
 
 
 /*******************************
-           States
+             States
 *******************************/
 
 /*-------------------
       Disabled
 --------------------*/
 
-@disabledOpacity: 0.3;
+@disabledOpacity: 0.45;
 @disabledTextColor: rgba(40, 40, 40, 0.3);
 @invertedDisabledTextColor: rgba(225, 225, 225, 0.3);
 
@@ -459,155 +557,231 @@
 --------------------*/
 
 /*---  Colors  ---*/
-@primaryColorHover    : lighten(@primaryColor, 3);
-@secondaryColorHover  : lighten(@secondaryColor, 3);
-
-@blueHover            : lighten(@blue, 3);
-@greenHover           : lighten(@green, 3);
-@orangeHover          : lighten(@orange, 3);
-@pinkHover            : lighten(@pink, 3);
-@purpleHover          : lighten(@purple, 3);
-@redHover             : lighten(@red, 3);
-@tealHover            : lighten(@teal, 3);
-@yellowHover          : lighten(@yellow, 3);
-
-@lightBlueHover       : lighten(@lightBlue, 3);
-@lightGreenHover      : lighten(@lightGreen, 3);
-@lightOrangeHover     : lighten(@lightOrange, 3);
-@lightPinkHover       : lighten(@lightPink, 3);
-@lightPurpleHover     : lighten(@lightPurple, 3);
-@lightRedHover        : lighten(@lightRed, 3);
-@lightTealHover       : lighten(@lightTeal, 3);
-@lightYellowHover     : lighten(@lightYellow, 3);
+@primaryColorHover    : saturate(darken(@primaryColor, 5), 10, relative);
+@secondaryColorHover  : saturate(lighten(@secondaryColor, 5), 10, relative);
+
+@redHover             : saturate(darken(@red, 5), 10, relative);
+@orangeHover          : saturate(darken(@orange, 5), 10, relative);
+@yellowHover          : saturate(darken(@yellow, 5), 10, relative);
+@oliveHover           : saturate(darken(@olive, 5), 10, relative);
+@greenHover           : saturate(darken(@green, 5), 10, relative);
+@tealHover            : saturate(darken(@teal, 5), 10, relative);
+@blueHover            : saturate(darken(@blue, 5), 10, relative);
+@violetHover          : saturate(darken(@violet, 5), 10, relative);
+@purpleHover          : saturate(darken(@purple, 5), 10, relative);
+@pinkHover            : saturate(darken(@pink, 5), 10, relative);
+@brownHover           : saturate(darken(@brown, 5), 10, relative);
+
+@lightRedHover        : saturate(darken(@lightRed, 5), 10, relative);
+@lightOrangeHover     : saturate(darken(@lightOrange, 5), 10, relative);
+@lightYellowHover     : saturate(darken(@lightYellow, 5), 10, relative);
+@lightOliveHover      : saturate(darken(@lightOlive, 5), 10, relative);
+@lightGreenHover      : saturate(darken(@lightGreen, 5), 10, relative);
+@lightTealHover       : saturate(darken(@lightTeal, 5), 10, relative);
+@lightBlueHover       : saturate(darken(@lightBlue, 5), 10, relative);
+@lightVioletHover     : saturate(darken(@lightViolet, 5), 10, relative);
+@lightPurpleHover     : saturate(darken(@lightPurple, 5), 10, relative);
+@lightPinkHover       : saturate(darken(@lightPink, 5), 10, relative);
+@lightBrownHover      : saturate(darken(@lightBrown, 5), 10, relative);
+@lightGreyHover       : saturate(darken(@lightGrey, 5), 10, relative);
+@lightBlackHover      : saturate(darken(@fullBlack, 5), 10, relative);
 
 /*---  Emotive  ---*/
-@positiveColorHover   : lighten(@positiveColor, 3);
-@negativeColorHover   : lighten(@negativeColor, 3);
-
-/*---  Neutrals  ---*/
-@fullBlackHover       : lighten(@fullBlack, 3);
-@blackHover           : @black;
+@positiveColorHover   : saturate(darken(@positiveColor, 5), 10, relative);
+@negativeColorHover   : saturate(darken(@negativeColor, 5), 10, relative);
+
+/*---  Brand   ---*/
+@facebookHoverColor   : saturate(darken(@facebookColor, 5), 10, relative);
+@twitterHoverColor    : saturate(darken(@twitterColor, 5), 10, relative);
+@googlePlusHoverColor : saturate(darken(@googlePlusColor, 5), 10, relative);
+@linkedInHoverColor   : saturate(darken(@linkedInColor, 5), 10, relative);
+@youtubeHoverColor    : saturate(darken(@youtubeColor, 5), 10, relative);
+@instagramHoverColor  : saturate(darken(@instagramColor, 5), 10, relative);
+@pinterestHoverColor  : saturate(darken(@pinterestColor, 5), 10, relative);
+@vkHoverColor         : saturate(darken(@vkColor, 5), 10, relative);
+
+/*---  Dark Tones  ---*/
+@fullBlackHover       : lighten(@fullBlack, 5);
+@blackHover           : lighten(@black, 5);
+@greyHover            : lighten(@grey, 5);
+
+/*---  Light Tones  ---*/
+@whiteHover           : darken(@white, 5);
+@offWhiteHover        : darken(@offWhite, 5);
+@darkWhiteHover       : darken(@darkWhite, 5);
 
-@lightGreyHover       : lighten(@lightGrey, 3);
-@greyHover            : lighten(@grey, 3);
-@darkGreyHover        : lighten(@darkGrey, 3);
+/*-------------------
+        Focus
+--------------------*/
 
-@whiteHover           : lighten(@white, 3);
-@offWhiteHover        : lighten(@offWhite, 3);
-@darkWhiteHover       : lighten(@darkWhite, 3);
+/*---  Colors  ---*/
+@primaryColorFocus    : saturate(darken(@primaryColor, 8), 20, relative);
+@secondaryColorFocus  : saturate(lighten(@secondaryColor, 8), 20, relative);
+
+@redFocus             : saturate(darken(@red, 8), 20, relative);
+@orangeFocus          : saturate(darken(@orange, 8), 20, relative);
+@yellowFocus          : saturate(darken(@yellow, 8), 20, relative);
+@oliveFocus           : saturate(darken(@olive, 8), 20, relative);
+@greenFocus           : saturate(darken(@green, 8), 20, relative);
+@tealFocus            : saturate(darken(@teal, 8), 20, relative);
+@blueFocus            : saturate(darken(@blue, 8), 20, relative);
+@violetFocus          : saturate(darken(@violet, 8), 20, relative);
+@purpleFocus          : saturate(darken(@purple, 8), 20, relative);
+@pinkFocus            : saturate(darken(@pink, 8), 20, relative);
+@brownFocus           : saturate(darken(@brown, 8), 20, relative);
+
+@lightRedFocus        : saturate(darken(@lightRed, 8), 20, relative);
+@lightOrangeFocus     : saturate(darken(@lightOrange, 8), 20, relative);
+@lightYellowFocus     : saturate(darken(@lightYellow, 8), 20, relative);
+@lightOliveFocus      : saturate(darken(@lightOlive, 8), 20, relative);
+@lightGreenFocus      : saturate(darken(@lightGreen, 8), 20, relative);
+@lightTealFocus       : saturate(darken(@lightTeal, 8), 20, relative);
+@lightBlueFocus       : saturate(darken(@lightBlue, 8), 20, relative);
+@lightVioletFocus     : saturate(darken(@lightViolet, 8), 20, relative);
+@lightPurpleFocus     : saturate(darken(@lightPurple, 8), 20, relative);
+@lightPinkFocus       : saturate(darken(@lightPink, 8), 20, relative);
+@lightBrownFocus      : saturate(darken(@lightBrown, 8), 20, relative);
+@lightGreyFocus       : saturate(darken(@lightGrey, 8), 20, relative);
+@lightBlackFocus      : saturate(darken(@fullBlack, 8), 20, relative);
 
-@facebookHoverColor   : lighten(@facebookColor, 3);
-@twitterHoverColor    : lighten(@twitterColor, 3);
-@googlePlusHoverColor : lighten(@googlePlusColor, 3);
-@linkedInHoverColor   : lighten(@linkedInColor, 3);
-@youtubeHoverColor    : lighten(@youtubeColor, 3);
-@instagramHoverColor  : lighten(@instagramColor, 3);
-@pinterestHoverColor  : lighten(@pinterestColor, 3);
-@vkHoverColor         : lighten(@vkColor, 3);
+/*---  Emotive  ---*/
+@positiveColorFocus   : saturate(darken(@positiveColor, 8), 20, relative);
+@negativeColorFocus   : saturate(darken(@negativeColor, 8), 20, relative);
+
+/*---  Brand   ---*/
+@facebookFocusColor   : saturate(darken(@facebookColor, 8), 20, relative);
+@twitterFocusColor    : saturate(darken(@twitterColor, 8), 20, relative);
+@googlePlusFocusColor : saturate(darken(@googlePlusColor, 8), 20, relative);
+@linkedInFocusColor   : saturate(darken(@linkedInColor, 8), 20, relative);
+@youtubeFocusColor    : saturate(darken(@youtubeColor, 8), 20, relative);
+@instagramFocusColor  : saturate(darken(@instagramColor, 8), 20, relative);
+@pinterestFocusColor  : saturate(darken(@pinterestColor, 8), 20, relative);
+@vkFocusColor         : saturate(darken(@vkColor, 8), 20, relative);
+
+/*---  Dark Tones  ---*/
+@fullBlackFocus       : lighten(@fullBlack, 8);
+@blackFocus           : lighten(@black, 8);
+@greyFocus            : lighten(@grey, 8);
+
+/*---  Light Tones  ---*/
+@whiteFocus           : darken(@white, 8);
+@offWhiteFocus        : darken(@offWhite, 8);
+@darkWhiteFocus       : darken(@darkWhite, 8);
 
 
 /*-------------------
     Down (:active)
 --------------------*/
 
-
 /*---  Colors  ---*/
-@primaryColorDown    : darken(@primaryColor, 7);
-@secondaryColorDown  : darken(@secondaryColor, 7);
-
-@blueDown            : darken(@blue, 7);
-@greenDown           : darken(@green, 7);
-@orangeDown          : darken(@orange, 7);
-@pinkDown            : darken(@pink, 7);
-@purpleDown          : darken(@purple, 7);
-@redDown             : darken(@red, 7);
-@tealDown            : darken(@teal, 7);
-@yellowDown          : darken(@yellow, 7);
-
-@lightBlueDown       : darken(@lightBlue, 7);
-@lightGreenDown      : darken(@lightGreen, 7);
-@lightOrangeDown     : darken(@lightOrange, 7);
-@lightPinkDown       : darken(@lightPink, 7);
-@lightPurpleDown     : darken(@lightPurple, 7);
-@lightRedDown        : darken(@lightRed, 7);
-@lightTealDown       : darken(@lightTeal, 7);
-@lightYellowDown     : darken(@lightYellow, 7);
+@primaryColorDown    : darken(@primaryColor, 10);
+@secondaryColorDown  : lighten(@secondaryColor, 10);
+
+@redDown             : darken(@red, 10);
+@orangeDown          : darken(@orange, 10);
+@yellowDown          : darken(@yellow, 10);
+@oliveDown           : darken(@olive, 10);
+@greenDown           : darken(@green, 10);
+@tealDown            : darken(@teal, 10);
+@blueDown            : darken(@blue, 10);
+@violetDown          : darken(@violet, 10);
+@purpleDown          : darken(@purple, 10);
+@pinkDown            : darken(@pink, 10);
+@brownDown           : darken(@brown, 10);
+
+@lightRedDown        : darken(@lightRed, 10);
+@lightOrangeDown     : darken(@lightOrange, 10);
+@lightYellowDown     : darken(@lightYellow, 10);
+@lightOliveDown      : darken(@lightOlive, 10);
+@lightGreenDown      : darken(@lightGreen, 10);
+@lightTealDown       : darken(@lightTeal, 10);
+@lightBlueDown       : darken(@lightBlue, 10);
+@lightVioletDown     : darken(@lightViolet, 10);
+@lightPurpleDown     : darken(@lightPurple, 10);
+@lightPinkDown       : darken(@lightPink, 10);
+@lightBrownDown      : darken(@lightBrown, 10);
+@lightGreyDown       : darken(@lightGrey, 10);
+@lightBlackDown      : darken(@fullBlack, 10);
 
 /*---  Emotive  ---*/
-@positiveColorDown   : darken(@positiveColor, 7);
-@negativeColorDown   : darken(@negativeColor, 7);
-
-/*---  Neutrals  ---*/
-@fullBlackDown       : darken(@fullBlack, 7);
-@blackDown           : darken(@black, 7);
-@lightBlackDown      : darken(@lightBlack, 7);
-
-@lightGreyDown       : darken(@lightGrey, 7);
-@greyDown            : darken(@grey, 7);
-@darkGreyDown        : darken(@darkGrey, 7);
-
-@whiteDown           : darken(@white, 7);
-@offWhiteDown        : darken(@offWhite, 7);
-@darkWhiteDown       : darken(@darkWhite, 7);
-
-@facebookDownColor   : darken(@facebookColor, 7);
-@twitterDownColor    : darken(@twitterColor, 7);
-@googlePlusDownColor : darken(@googlePlusColor, 7);
-@linkedInDownColor   : darken(@linkedInColor, 7);
-@youtubeDownColor    : darken(@youtubeColor, 7);
-@instagramDownColor  : darken(@instagramColor, 7);
-@pinterestDownColor  : darken(@pinterestColor, 7);
-@vkDownColor         : darken(@vkColor, 7);
+@positiveColorDown   : darken(@positiveColor, 10);
+@negativeColorDown   : darken(@negativeColor, 10);
+
+/*---  Brand   ---*/
+@facebookDownColor   : darken(@facebookColor, 10);
+@twitterDownColor    : darken(@twitterColor, 10);
+@googlePlusDownColor : darken(@googlePlusColor, 10);
+@linkedInDownColor   : darken(@linkedInColor, 10);
+@youtubeDownColor    : darken(@youtubeColor, 10);
+@instagramDownColor  : darken(@instagramColor, 10);
+@pinterestDownColor  : darken(@pinterestColor, 10);
+@vkDownColor         : darken(@vkColor, 10);
+
+/*---  Dark Tones  ---*/
+@fullBlackDown       : lighten(@fullBlack, 10);
+@blackDown           : lighten(@black, 10);
+@greyDown            : lighten(@grey, 10);
+
+/*---  Light Tones  ---*/
+@whiteDown           : darken(@white, 10);
+@offWhiteDown        : darken(@offWhite, 10);
+@darkWhiteDown       : darken(@darkWhite, 10);
 
 
 /*-------------------
         Active
 --------------------*/
 
-/*---  Standard  ---*/
-@primaryColorActive    : darken(@primaryColor, 5);
-@secondaryColorActive  : darken(@secondaryColor, 5);
-
-@blueActive            : darken(@blue, 5);
-@greenActive           : darken(@green, 5);
-@orangeActive          : darken(@orange, 5);
-@pinkActive            : darken(@pink, 5);
-@purpleActive          : darken(@purple, 5);
-@redActive             : darken(@red, 5);
-@tealActive            : darken(@teal, 5);
-@yellowActive          : darken(@yellow, 5);
-
-@lightBlueActive       : darken(@lightBlue, 5);
-@lightGreenActive      : darken(@lightGreen, 5);
-@lightOrangeActive     : darken(@lightOrange, 5);
-@lightPinkActive       : darken(@lightPink, 5);
-@lightPurpleActive     : darken(@lightPurple, 5);
-@lightRedActive        : darken(@lightRed, 5);
-@lightTealActive       : darken(@lightTeal, 5);
-@lightYellowActive     : darken(@lightYellow, 5);
+/*---  Colors  ---*/
+@primaryColorActive    : saturate(darken(@primaryColor, 5), 15, relative);
+@secondaryColorActive  : saturate(lighten(@secondaryColor, 5), 15, relative);
+
+@redActive             : saturate(darken(@red, 5), 15, relative);
+@orangeActive          : saturate(darken(@orange, 5), 15, relative);
+@yellowActive          : saturate(darken(@yellow, 5), 15, relative);
+@oliveActive           : saturate(darken(@olive, 5), 15, relative);
+@greenActive           : saturate(darken(@green, 5), 15, relative);
+@tealActive            : saturate(darken(@teal, 5), 15, relative);
+@blueActive            : saturate(darken(@blue, 5), 15, relative);
+@violetActive          : saturate(darken(@violet, 5), 15, relative);
+@purpleActive          : saturate(darken(@purple, 5), 15, relative);
+@pinkActive            : saturate(darken(@pink, 5), 15, relative);
+@brownActive           : saturate(darken(@brown, 5), 15, relative);
+
+@lightRedActive        : saturate(darken(@lightRed, 5), 15, relative);
+@lightOrangeActive     : saturate(darken(@lightOrange, 5), 15, relative);
+@lightYellowActive     : saturate(darken(@lightYellow, 5), 15, relative);
+@lightOliveActive      : saturate(darken(@lightOlive, 5), 15, relative);
+@lightGreenActive      : saturate(darken(@lightGreen, 5), 15, relative);
+@lightTealActive       : saturate(darken(@lightTeal, 5), 15, relative);
+@lightBlueActive       : saturate(darken(@lightBlue, 5), 15, relative);
+@lightVioletActive     : saturate(darken(@lightViolet, 5), 15, relative);
+@lightPurpleActive     : saturate(darken(@lightPurple, 5), 15, relative);
+@lightPinkActive       : saturate(darken(@lightPink, 5), 15, relative);
+@lightBrownActive      : saturate(darken(@lightBrown, 5), 15, relative);
+@lightGreyActive       : saturate(darken(@lightGrey, 5), 15, relative);
+@lightBlackActive      : saturate(darken(@fullBlack, 5), 15, relative);
 
 /*---  Emotive  ---*/
-@positiveColorActive   : darken(@positiveColor, 5);
-@negativeColorActive   : darken(@negativeColor, 5);
-
-/*---  Neutrals  ---*/
+@positiveColorActive   : saturate(darken(@positiveColor, 5), 15, relative);
+@negativeColorActive   : saturate(darken(@negativeColor, 5), 15, relative);
+
+/*---  Brand   ---*/
+@facebookActiveColor   : saturate(darken(@facebookColor, 5), 15, relative);
+@twitterActiveColor    : saturate(darken(@twitterColor, 5), 15, relative);
+@googlePlusActiveColor : saturate(darken(@googlePlusColor, 5), 15, relative);
+@linkedInActiveColor   : saturate(darken(@linkedInColor, 5), 15, relative);
+@youtubeActiveColor    : saturate(darken(@youtubeColor, 5), 15, relative);
+@instagramActiveColor  : saturate(darken(@instagramColor, 5), 15, relative);
+@pinterestActiveColor  : saturate(darken(@pinterestColor, 5), 15, relative);
+@vkActiveColor         : saturate(darken(@vkColor, 5), 15, relative);
+
+/*---  Dark Tones  ---*/
 @fullBlackActive       : darken(@fullBlack, 5);
 @blackActive           : darken(@black, 5);
-@lightBlackActive      : darken(@lightBlack, 5);
-
-@lightGreyActive       : darken(@lightGrey, 5);
 @greyActive            : darken(@grey, 5);
-@darkGreyActive        : darken(@darkGrey, 5);
 
+/*---  Light Tones  ---*/
 @whiteActive           : darken(@white, 5);
 @offWhiteActive        : darken(@offWhite, 5);
 @darkWhiteActive       : darken(@darkWhite, 5);
-
-@facebookActiveColor   : darken(@facebookColor, 5);
-@twitterActiveColor    : darken(@twitterColor, 5);
-@googlePlusActiveColor : darken(@googlePlusColor, 5);
-@linkedInActiveColor   : darken(@linkedInColor, 5);
-@youtubeActiveColor    : darken(@youtubeColor, 5);
-@instagramActiveColor  : darken(@instagramColor, 5);
-@pinterestActiveColor  : darken(@pinterestColor, 5);
-@vkActiveColor         : darken(@vkColor, 5);