assets/stylesheets/semantic_ui/themes/default/globals/site.variables in less-rails-semantic_ui-1.12.3.0 vs assets/stylesheets/semantic_ui/themes/default/globals/site.variables in less-rails-semantic_ui-2.0.0.0
- old
+ new
@@ -4,115 +4,110 @@
/*-------------------
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';
@googleProtocol : 'https://';
@googleFontRequest : '@{googleFontName}:@{googleFontSizes}&subset=@{googleSubset}';
/*-------------------
Base Sizes
--------------------*/
+/* This is the single variable that controls them all */
@emSize : 14px;
+
+/* The size of page text */
@fontSize : 14px;
-/*--------------
- Page Heading
----------------*/
-
-@headerFontWeight : bold;
-@headerLineHeight : 1.33em;
-
-@h1 : 2rem;
-@h2 : 1.714rem;
-@h3 : 1.28rem;
-@h4 : 1.071rem;
-@h5 : 1rem;
-
/*-------------------
- 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;
+/* See Power-user section below
+ for explanation of @px variables
+*/
+@relativeBorderRadius: @relative4px;
+@absoluteBorderRadius: @4px;
-/*--- Light Colors ---*/
-@lightBlack : #333333;
-@lightBlue : #54C8FF;
-@lightGreen : #2ECC40;
-@lightOrange : #FF851B;
-@lightPink : #FF8EDF;
-@lightPurple : #CDC6FF;
-@lightRed : #FF695E;
-@lightTeal : #6DFFFF;
-@lightYellow : #FFE21F;
+@defaultBorderRadius: @absoluteBorderRadius;
-/*--- Neutrals ---*/
-@fullBlack : #000000;
-@darkGrey : #AAAAAA;
-@lightGrey : #DCDDDE;
-@offWhite : #FAFAFA;
-@darkWhite : #F0F0F0;
-@white : #FFFFFF;
-
/*-------------------
Brand Colors
--------------------*/
@primaryColor : @blue;
@secondaryColor : @black;
@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
--------------------*/
@@ -121,13 +116,14 @@
/*-------------------
Links
--------------------*/
-@linkColor : #009FDA;
+@linkColor : #4183C4;
@linkUnderline : none;
-@linkHoverColor : lighten(@linkColor, 5);
+@linkHoverColor : darken(saturate(@linkColor, 20), 15, relative);
+@linkHoverUnderline : @linkUnderline;
/*-------------------
Highlighted Text
--------------------*/
@@ -135,71 +131,196 @@
@highlightColor : @textColor;
@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
--------------------*/
@columnCount: 16;
/*-------------------
+ Transitions
+--------------------*/
+
+@defaultDuration : 0.1s;
+@defaultEasing : ease;
+
+/*-------------------
Breakpoints
--------------------*/
@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
--------------------*/
/* For source only. Modified in gulp for dist */
@imagePath : 'semantic_ui/themes/default/assets/images';
@@ -226,119 +347,90 @@
@relativeLarge : unit( round(@largeSize * @emSize) / @emSize, em);
@relativeBig : unit( round(@bigSize * @emSize) / @emSize, em);
@relativeHuge : unit( round(@hugeSize * @emSize) / @emSize, em);
@relativeMassive : unit( round(@massiveSize * @emSize) / @emSize, em);
-/*-------------------
- Icons
---------------------*/
-/* Maximum Glyph Width of Icon */
-@iconWidth : 1.18em;
-
/*-------------------
- Easing
+ Exact Pixel Values
--------------------*/
+/*
+ These are used to specify exact pixel values in em
+ for things like borders
-@defaultEasing: ease;
+ Since there are many more sizes than names for sizes,
+ these are named by their original pixel values.
-/*-------------------
- All Colors
---------------------*/
+*/
-/*--- Colored Backgrounds ---*/
-@blueBackground : #DFF0FF;
-@greenBackground : #EBFFED;
-@orangeBackground : #FFEDDE;
-@pinkBackground : #FFE3FB;
-@purpleBackground : #EAE7FF;
-@redBackground : #FFE8E6;
-@tealBackground : #E9FFFF;
-@yellowBackground : #FFF8DB;
+@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);
-/*--- 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
+@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);
-/*--- 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);
-
-
/*-------------------
- Emotive Colors
+ Icons
--------------------*/
-/* Positive */
-@positiveColor : @green;
-@positiveBackgroundColor : #EEFFE7;
-@positiveBorderColor : #B7CAA7;
-@positiveHeaderColor : #356E36;
-@positiveTextColor : #3C763D;
+/* Maximum Glyph Width of Icon */
+@iconWidth : 1.18em;
-/* 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;
-
-
/*-------------------
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);
@invertedSelectedTextColor : rgba(255, 255, 255, 1);
@invertedDisabledTextColor : rgba(255, 255, 255, 0.2);
/*-------------------
Brand Colors
--------------------*/
-@facebookColor : #3B579D;
-@twitterColor : #4092CC;
-@googlePlusColor : #D34836;
+@facebookColor : #3B5998;
+@twitterColor : #0084B4;
+@googlePlusColor : #DC4A38;
@linkedInColor : #1F88BE;
@youtubeColor : #CC181E;
@instagramColor : #49769C;
@pinterestColor : #00ACED;
@vkColor : #4D7198;
@@ -347,38 +439,41 @@
Borders
--------------------*/
@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);
@headerLineHeightOffset : (@headerLineHeight - 1em) / 2;
/* Header Spacing */
@@ -388,24 +483,27 @@
/* Minimum Mobile Width */
@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 */
@oneWide : (1 / @columnCount * 100%);
@twoWide : (2 / @columnCount * 100%);
@@ -441,173 +539,249 @@
@fifteenColumn : (1 / 15 * 100%);
@sixteenColumn : (1 / 16 * 100%);
/*******************************
- States
+ States
*******************************/
/*-------------------
Disabled
--------------------*/
-@disabledOpacity: 0.3;
+@disabledOpacity: 0.45;
@disabledTextColor: rgba(40, 40, 40, 0.3);
@invertedDisabledTextColor: rgba(225, 225, 225, 0.3);
/*-------------------
Hover
--------------------*/
/*--- Colors ---*/
-@primaryColorHover : lighten(@primaryColor, 3);
-@secondaryColorHover : lighten(@secondaryColor, 3);
+@primaryColorHover : saturate(darken(@primaryColor, 5), 10, relative);
+@secondaryColorHover : saturate(lighten(@secondaryColor, 5), 10, relative);
-@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);
+@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);
-@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);
+@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);
+@positiveColorHover : saturate(darken(@positiveColor, 5), 10, relative);
+@negativeColorHover : saturate(darken(@negativeColor, 5), 10, relative);
-/*--- Neutrals ---*/
-@fullBlackHover : lighten(@fullBlack, 3);
-@blackHover : @black;
+/*--- 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);
-@lightGreyHover : lighten(@lightGrey, 3);
-@greyHover : lighten(@grey, 3);
-@darkGreyHover : lighten(@darkGrey, 3);
+/*--- Dark Tones ---*/
+@fullBlackHover : lighten(@fullBlack, 5);
+@blackHover : lighten(@black, 5);
+@greyHover : lighten(@grey, 5);
-@whiteHover : lighten(@white, 3);
-@offWhiteHover : lighten(@offWhite, 3);
-@darkWhiteHover : lighten(@darkWhite, 3);
+/*--- Light Tones ---*/
+@whiteHover : darken(@white, 5);
+@offWhiteHover : darken(@offWhite, 5);
+@darkWhiteHover : darken(@darkWhite, 5);
-@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);
+/*-------------------
+ Focus
+--------------------*/
+/*--- 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);
+
+/*--- 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);
+@primaryColorDown : darken(@primaryColor, 10);
+@secondaryColorDown : lighten(@secondaryColor, 10);
-@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);
+@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);
-@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);
+@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);
+@positiveColorDown : darken(@positiveColor, 10);
+@negativeColorDown : darken(@negativeColor, 10);
-/*--- Neutrals ---*/
-@fullBlackDown : darken(@fullBlack, 7);
-@blackDown : darken(@black, 7);
-@lightBlackDown : darken(@lightBlack, 7);
+/*--- 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);
-@lightGreyDown : darken(@lightGrey, 7);
-@greyDown : darken(@grey, 7);
-@darkGreyDown : darken(@darkGrey, 7);
+/*--- Dark Tones ---*/
+@fullBlackDown : lighten(@fullBlack, 10);
+@blackDown : lighten(@black, 10);
+@greyDown : lighten(@grey, 10);
-@whiteDown : darken(@white, 7);
-@offWhiteDown : darken(@offWhite, 7);
-@darkWhiteDown : darken(@darkWhite, 7);
+/*--- Light Tones ---*/
+@whiteDown : darken(@white, 10);
+@offWhiteDown : darken(@offWhite, 10);
+@darkWhiteDown : darken(@darkWhite, 10);
-@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);
-
/*-------------------
Active
--------------------*/
-/*--- Standard ---*/
-@primaryColorActive : darken(@primaryColor, 5);
-@secondaryColorActive : darken(@secondaryColor, 5);
+/*--- Colors ---*/
+@primaryColorActive : saturate(darken(@primaryColor, 5), 15, relative);
+@secondaryColorActive : saturate(lighten(@secondaryColor, 5), 15, relative);
-@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);
+@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);
-@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);
+@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);
+@positiveColorActive : saturate(darken(@positiveColor, 5), 15, relative);
+@negativeColorActive : saturate(darken(@negativeColor, 5), 15, relative);
-/*--- Neutrals ---*/
+/*--- 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);