fomantic-ui 2.9.1-beta.2 → 2.9.1-beta.21

package/src/themes/default/globals/site.variables

@@ -5,136 +5,134 @@
 @import "variation.variables";
 @supportIE: true;
 
-/*-------------------
+/* -------------------
        Fonts
---------------------*/
+-------------------- */
 
-@fontName          : 'Lato';
+@fontName : 'Lato';
 @fontFileNameLatin : 'LatoLatin';
 @fontFileNameSupplement: 'Lato';
 
 // based on https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_variables.scss#L577 list
-@fallbackFonts     : system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+@fallbackFonts : system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
-@headerFont        : @fontName, @fallbackFonts;
-@pageFont          : @fontName, @fallbackFonts;
+@headerFont : @fontName, @fallbackFonts;
+@pageFont : @fontName, @fallbackFonts;
 
-@fontDisplay            : swap;
-@textRendering          : optimizeLegibility;
-@unicodeRangeLatin      : U+0000, U+000D, U+0020-007E, U+00A0-017F, U+0192, U+0218-021B, U+0237, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A3-20A4, U+20A7, U+20AC, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04;
+@fontDisplay : swap;
+@textRendering : optimizeLegibility;
+@unicodeRangeLatin : U+0000, U+000D, U+0020-007E, U+00A0-017F, U+0192, U+0218-021B, U+0237, U+02C6-02C7, U+02C9, U+02D8-02DD, U+0394, U+03A9, U+03BC, U+03C0, U+1E80-1E85, U+2010, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20A3-20A4, U+20A7, U+20AC, U+2113, U+2122, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+F8FF, U+FB00-FB04;
 @unicodeRangeSupplement : U+0180-0191, U+0193-0217, U+021C-0236, U+0238-02C5, U+02C8, U+02CA-02D7, U+02DE-036F, U+0374-0375, U+037A-037E, U+0384-038A, U+038C, U+038E-0393, U+0395-03A1, U+03A3-03A8, U+03AA-03BB, U+03BD-03BF, U+03C1-03CE, U+03D0-0486, U+0488-0513, U+1D00-1DCA, U+1DFE-1E7F, U+1E86-1E9B, U+1E9E, U+1EA0-1EF9, U+1F00-1F15, U+1F18-1F1D, U+1F20-1F45, U+1F48-1F4D, U+1F50-1F57, U+1F59, U+1F5B, U+1F5D, U+1F5F-1F7D, U+1F80-1FB4, U+1FB6-1FC4, U+1FC6-1FD3, U+1FD6-1FDB, U+1FDD-1FEF, U+1FF2-1FF4, U+1FF6-1FFE, U+2000-200F, U+2012, U+2015-2017, U+201B, U+201F, U+202F, U+2034, U+203C-203E, U+205E-205F, U+2070-2071, U+2074-2094, U+20A0-20A2, U+20A5-20A6, U+20A8-20AB, U+20AD-20B5, U+20B8-20BA, U+20DD, U+2105, U+2116-2117, U+2120, U+2132, U+214D-214E, U+2153-215F, U+2183-2184, U+2190-2199, U+21A8, U+221F, U+2229, U+2261, U+2302, U+2310, U+2320-2321, U+2460-2473, U+24EA-24F4, U+24FF-2500, U+2502, U+250C, U+2510, U+2514, U+2518, U+2C60-2C6C, U+2C74-2C77;
 
-@importFonts            : true;
+@importFonts : true;
 @fonts: {
-        @regularLatin: {
-                font-family: @fontName;
-                src: url("@{fontPath}/@{fontFileNameLatin}-Regular.woff2") format('woff2')
-                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-Regular.woff") format('woff'));
-                font-style     : normal;
-                font-weight    : @normal;
-                font-display   : @fontDisplay;
-                text-rendering : @textRendering;
-                unicode-range  : @unicodeRangeLatin;
-        };
-        @boldLatin: {
-                font-family: @fontName;
-                src: url("@{fontPath}/@{fontFileNameLatin}-Bold.woff2") format('woff2')
-                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-Bold.woff") format('woff'));
-                font-style     : normal;
-                font-weight    : @bold;
-                font-display   : @fontDisplay;
-                text-rendering : @textRendering;
-                unicode-range  : @unicodeRangeLatin;
-        };
-        @italicLatin: {
-                font-family: @fontName;
-                src: url("@{fontPath}/@{fontFileNameLatin}-Italic.woff2") format('woff2')
-                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-Italic.woff") format('woff'));
-                font-style     : italic;
-                font-weight    : @normal;
-                font-display   : @fontDisplay;
-                text-rendering : @textRendering;
-                unicode-range  : @unicodeRangeLatin;
-        };
-        @boldItalicLatin: {
-                font-family: @fontName;
-                src: url("@{fontPath}/@{fontFileNameLatin}-BoldItalic.woff2") format('woff2')
-                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-BoldItalic.woff") format('woff'));
-                font-style     : italic;
-                font-weight    : @bold;
-                font-display   : @fontDisplay;
-                text-rendering : @textRendering;
-                unicode-range  : @unicodeRangeLatin;
-        };
-        @regularSupplement: {
-                font-family: @fontName;
-                src: url("@{fontPath}/@{fontFileNameSupplement}-Regular.woff2") format('woff2')
-                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-Regular.woff") format('woff'));
-                font-style     : normal;
-                font-weight    : @normal;
-                font-display   : @fontDisplay;
-                text-rendering : @textRendering;
-                unicode-range  : @unicodeRangeSupplement;
-        };
-        @boldSupplement: {
-                font-family: @fontName;
-                src: url("@{fontPath}/@{fontFileNameSupplement}-Bold.woff2") format('woff2')
-                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-Bold.woff") format('woff'));
-                font-style     : normal;
-                font-weight    : @bold;
-                font-display   : @fontDisplay;
-                text-rendering : @textRendering;
-                unicode-range  : @unicodeRangeSupplement;
-        };
-        @italicSupplement: {
-                font-family: @fontName;
-                src: url("@{fontPath}/@{fontFileNameSupplement}-Italic.woff2") format('woff2')
-                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-Italic.woff") format('woff'));
-                font-style     : italic;
-                font-weight    : @normal;
-                font-display   : @fontDisplay;
-                text-rendering : @textRendering;
-                unicode-range  : @unicodeRangeSupplement;
-        };
-        @boldItalicSupplement: {
-                font-family: @fontName;
-                src: url("@{fontPath}/@{fontFileNameSupplement}-BoldItalic.woff2") format('woff2')
-                     if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-BoldItalic.woff") format('woff'));
-                font-style     : italic;
-                font-weight    : @bold;
-                font-display   : @fontDisplay;
-                text-rendering : @textRendering;
-                unicode-range  : @unicodeRangeSupplement;
-        };
+    @regularLatin: {
+        font-family: @fontName;
+        src: url("@{fontPath}/@{fontFileNameLatin}-Regular.woff2") format('woff2')
+            if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-Regular.woff") format('woff'));
+        font-style     : normal;
+        font-weight    : @normal;
+        font-display   : @fontDisplay;
+        text-rendering : @textRendering;
+        unicode-range  : @unicodeRangeLatin;
+    };
+    @boldLatin: {
+        font-family: @fontName;
+        src: url("@{fontPath}/@{fontFileNameLatin}-Bold.woff2") format('woff2')
+            if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-Bold.woff") format('woff'));
+        font-style     : normal;
+        font-weight    : @bold;
+        font-display   : @fontDisplay;
+        text-rendering : @textRendering;
+        unicode-range  : @unicodeRangeLatin;
+    };
+    @italicLatin: {
+        font-family: @fontName;
+        src: url("@{fontPath}/@{fontFileNameLatin}-Italic.woff2") format('woff2')
+            if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-Italic.woff") format('woff'));
+        font-style     : italic;
+        font-weight    : @normal;
+        font-display   : @fontDisplay;
+        text-rendering : @textRendering;
+        unicode-range  : @unicodeRangeLatin;
+    };
+    @boldItalicLatin: {
+        font-family: @fontName;
+        src: url("@{fontPath}/@{fontFileNameLatin}-BoldItalic.woff2") format('woff2')
+            if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameLatin}-BoldItalic.woff") format('woff'));
+        font-style     : italic;
+        font-weight    : @bold;
+        font-display   : @fontDisplay;
+        text-rendering : @textRendering;
+        unicode-range  : @unicodeRangeLatin;
+    };
+    @regularSupplement: {
+        font-family: @fontName;
+        src: url("@{fontPath}/@{fontFileNameSupplement}-Regular.woff2") format('woff2')
+            if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-Regular.woff") format('woff'));
+        font-style     : normal;
+        font-weight    : @normal;
+        font-display   : @fontDisplay;
+        text-rendering : @textRendering;
+        unicode-range  : @unicodeRangeSupplement;
+    };
+    @boldSupplement: {
+        font-family: @fontName;
+        src: url("@{fontPath}/@{fontFileNameSupplement}-Bold.woff2") format('woff2')
+            if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-Bold.woff") format('woff'));
+        font-style     : normal;
+        font-weight    : @bold;
+        font-display   : @fontDisplay;
+        text-rendering : @textRendering;
+        unicode-range  : @unicodeRangeSupplement;
+    };
+    @italicSupplement: {
+        font-family: @fontName;
+        src: url("@{fontPath}/@{fontFileNameSupplement}-Italic.woff2") format('woff2')
+            if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-Italic.woff") format('woff'));
+        font-style     : italic;
+        font-weight    : @normal;
+        font-display   : @fontDisplay;
+        text-rendering : @textRendering;
+        unicode-range  : @unicodeRangeSupplement;
+    };
+    @boldItalicSupplement: {
+        font-family: @fontName;
+        src: url("@{fontPath}/@{fontFileNameSupplement}-BoldItalic.woff2") format('woff2')
+            if(@supportIE, e(',') url("@{fontPath}/@{fontFileNameSupplement}-BoldItalic.woff") format('woff'));
+        font-style     : italic;
+        font-weight    : @bold;
+        font-display   : @fontDisplay;
+        text-rendering : @textRendering;
+        unicode-range  : @unicodeRangeSupplement;
+    };
 };
 
-@googleFontName    : @fontName;
+@googleFontName : @fontName;
 @importGoogleFonts : false;
-@googleFontSizes   : 'ital,wght@0,400%3B0,700%3B1,400%3B1,700';
-@googleSubset      : 'latin';
+@googleFontSizes : 'ital,wght@0,400%3B0,700%3B1,400%3B1,700';
+@googleSubset : 'latin';
 @googleFontDisplay : 'swap';
 
-@googleProtocol    : 'https://';
+@googleProtocol : 'https://';
 @googleFontRequest : '@{googleFontName}:@{googleFontSizes}&subset=@{googleSubset}&display=@{googleFontDisplay}';
 
+@bold : bold;
+@normal : normal;
 
-@bold              : bold;
-@normal            : normal;
-
-/*-------------------
+/* -------------------
       Base Sizes
---------------------*/
+-------------------- */
 
 /* This is the single variable that controls them all */
-@emSize   : 14px;
+@emSize : 14px;
 
 /* The size of page text  */
 @fontSize : 14px;
 
-
-/*-------------------
+/* -------------------
     Border Radius
---------------------*/
+-------------------- */
 
 /* See Power-user section below
    for explanation of @px variables
@@ -144,22 +142,22 @@
 
 @defaultBorderRadius: @absoluteBorderRadius;
 
-/*-------------------
+/* -------------------
     Brand Colors
---------------------*/
+-------------------- */
 
-@primaryColor        : @blue;
-@secondaryColor      : @black;
+@primaryColor : @blue;
+@secondaryColor : @black;
 
-@lightPrimaryColor   : @lightBlue;
+@lightPrimaryColor : @lightBlue;
 @lightSecondaryColor : @lightBlack;
 
 /* Whenever a color needs to get calculated (screen()/multiply()) out of a base color */
 @blendingBaseColor: #cccccc;
 
-/*--------------
+/* --------------
   Page Heading
----------------*/
+--------------- */
 
 @headerFontWeight : @bold;
 @headerLineHeight : unit((18 / 14), em);
@@ -171,15 +169,15 @@
 @h5 : unit((14 / 14), rem);
 @h6 : unit((12 / 14), rem);
 
-/*--------------
+/* --------------
    Form Input
----------------*/
+--------------- */
 
 /* This adjusts the default form input across all elements */
-@inputBackground        : @white;
-@inputVerticalPadding   : @relative11px;
+@inputBackground : @white;
+@inputVerticalPadding : @relative11px;
 @inputHorizontalPadding : @relative14px;
-@inputPadding           : @inputVerticalPadding @inputHorizontalPadding;
+@inputPadding : @inputVerticalPadding @inputHorizontalPadding;
 
 /* Input Text Color */
 @inputColor: @textColor;
@@ -189,9 +187,9 @@
 /* Line Height Default For Inputs in Browser (Descenders are 17px at 14px base em) */
 @inputLineHeight: unit((17 / 14), em);
 
-/*-------------------
+/* -------------------
     Focused Input
---------------------*/
+-------------------- */
 
 /* Used on inputs, textarea etc */
 @focusedFormBorderColor: #85B7D9;
@@ -199,54 +197,53 @@
 /* Used on dropdowns, other larger blocks */
 @focusedFormMutedBorderColor: #96C8DA;
 
-/*-------------------
+/* -------------------
         Sizes
---------------------*/
+-------------------- */
 
 /*
   Sizes are all expressed in terms of 14px/em (default em)
   This ensures these "ratios" remain constant despite changes in EM
 */
 
-@miniSize        : (11 / 14);
-@tinySize        : (12 / 14);
-@smallSize       : (13 / 14);
-@mediumSize      : (14 / 14);
-@largeSize       : (16 / 14);
-@bigSize         : (18 / 14);
-@hugeSize        : (20 / 14);
-@massiveSize     : (24 / 14);
+@miniSize : (11 / 14);
+@tinySize : (12 / 14);
+@smallSize : (13 / 14);
+@mediumSize : (14 / 14);
+@largeSize : (16 / 14);
+@bigSize : (18 / 14);
+@hugeSize : (20 / 14);
+@massiveSize : (24 / 14);
 
-
-/*-------------------
+/* -------------------
         Page
---------------------*/
+-------------------- */
 
-@pageBackground      : #FFFFFF;
-@pageOverflowX       : hidden;
+@pageBackground : #FFFFFF;
+@pageOverflowX : hidden;
 
-@lineHeight          : 1.4285em;
-@textColor           : rgba(0, 0, 0, 0.87);
+@lineHeight : 1.4285em;
+@textColor : rgba(0, 0, 0, 0.87);
 
-/*-------------------
+/* -------------------
       Paragraph
---------------------*/
+-------------------- */
 
-@paragraphMargin     : 0 0 1em;
+@paragraphMargin : 0 0 1em;
 @paragraphLineHeight : @lineHeight;
 
-/*-------------------
+/* -------------------
        Links
---------------------*/
+-------------------- */
 
-@linkColor           : #4183C4;
-@linkUnderline       : none;
-@linkHoverColor      : darken(saturate(@linkColor, 20), 15, relative);
-@linkHoverUnderline  : @linkUnderline;
+@linkColor : #4183C4;
+@linkUnderline : none;
+@linkHoverColor : darken(saturate(@linkColor, 20), 15, relative);
+@linkHoverUnderline : @linkUnderline;
 
-/*-------------------
+/* -------------------
     Scroll Bars
---------------------*/
+-------------------- */
 
 @useCustomScrollbars: true;
 
@@ -275,201 +272,205 @@
 @trackInvertedBackgroundHex: #323232;
 @thumbInvertedBackgroundHex: #656565;
 
-/*-------------------
+/* Scrolling */
+@scrollingMobileMaxHeight: 15em;
+@scrollingTabletMaxHeight: 18em;
+@scrollingComputerMaxHeight: 24em;
+@scrollingWidescreenMaxHeight: 30em;
+@overscrollBehavior: none;
+
+/* -------------------
   Highlighted Text
---------------------*/
+-------------------- */
 
-@highlightBackground      : #CCE2FF;
-@highlightColor           : @textColor;
+@highlightBackground : #CCE2FF;
+@highlightColor : @textColor;
 
 @inputHighlightBackground : rgba(100, 100, 100, 0.4);
-@inputHighlightColor      : @textColor;
+@inputHighlightColor : @textColor;
 
-
-/*-------------------
+/* -------------------
        Loader
---------------------*/
+-------------------- */
 
-@loaderSize              : @relativeBig;
-@loaderSpeedFast         : 0.3s;
-@loaderSpeed             : 0.6s;
-@loaderSpeedSlow         : 0.9s;
-@loaderLineWidth         : 0.2em;
-@loaderFillColor         : rgba(0, 0, 0, 0.1);
-@loaderLineColor         : @grey;
+@loaderSize : @relativeBig;
+@loaderSpeedFast : 0.3s;
+@loaderSpeed : 0.6s;
+@loaderSpeedSlow : 0.9s;
+@loaderLineWidth : 0.2em;
+@loaderFillColor : rgba(0, 0, 0, 0.1);
+@loaderLineColor : @grey;
 
 @invertedLoaderFillColor : rgba(255, 255, 255, 0.15);
 @invertedLoaderLineColor : @white;
 
-/*-------------------
+/* -------------------
         Grid
---------------------*/
+-------------------- */
 
 @columnCount: 16;
 
-/*-------------------
+/* -------------------
      Transitions
---------------------*/
+-------------------- */
 
 @defaultDuration : 0.1s;
-@defaultEasing   : ease;
+@defaultEasing : ease;
 
-/*-------------------
+/* -------------------
      Breakpoints
---------------------*/
+-------------------- */
 
-@mobileBreakpoint            : 320px;
-@tabletBreakpoint            : 768px;
-@computerBreakpoint          : 992px;
-@largeMonitorBreakpoint      : 1200px;
+@mobileBreakpoint : 320px;
+@tabletBreakpoint : 768px;
+@computerBreakpoint : 992px;
+@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 ---*/
-@primaryBackground   : #DFF0FF;
+-------------------- */
+
+/* ---  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 --- */
+@primaryBackground : #DFF0FF;
 @secondaryBackground : #F4F4F4;
-@redBackground    : #FFE8E6;
+@redBackground : #FFE8E6;
 @orangeBackground : #FFEDDE;
 @yellowBackground : #FFF8DB;
-@oliveBackground  : #FBFDEF;
-@greenBackground  : #E5F9E7;
-@tealBackground   : #E1F7F7;
-@blueBackground   : #DFF0FF;
+@oliveBackground : #FBFDEF;
+@greenBackground : #E5F9E7;
+@tealBackground : #E1F7F7;
+@blueBackground : #DFF0FF;
 @violetBackground : #EAE7FF;
 @purpleBackground : #F6E7FF;
-@pinkBackground   : #FFE3FB;
-@brownBackground  : #F1E2D3;
-@greyBackground   : #F4F4F4;
-@blackBackground  : #F4F4F4;
+@pinkBackground : #FFE3FB;
+@brownBackground : #F1E2D3;
+@greyBackground : #F4F4F4;
+@blackBackground : #F4F4F4;
 
-/*--- Colored Headers ---*/
-@primaryHeaderColor   : darken(@primaryTextColor, 5);
+/* --- Colored Headers --- */
+@primaryHeaderColor : darken(@primaryTextColor, 5);
 @secondaryHeaderColor : darken(@secondaryTextColor, 5);
-@redHeaderColor    : darken(@redTextColor, 5);
-@oliveHeaderColor  : darken(@oliveTextColor, 5);
-@greenHeaderColor  : darken(@greenTextColor, 5);
+@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);
+@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);
-@greyHeaderColor  : darken(@greyTextColor, 5);
-@blackHeaderColor  : darken(@blackTextColor, 5);
+@brownHeaderColor : darken(@brownTextColor, 5);
+@greyHeaderColor : darken(@greyTextColor, 5);
+@blackHeaderColor : darken(@blackTextColor, 5);
 
-/*--- Colored Text ---*/
-@primaryTextColor   : @invertedTextColor;
+/* --- Colored Text --- */
+@primaryTextColor : @invertedTextColor;
 @secondaryTextColor : @invertedTextColor;
-@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;
-@greyTextColor      : @grey;
-@blackTextColor     : @black;
-
-/*--- Light Colored Text ---*/
-@lightPrimaryTextColor   : @invertedTextColor;
+@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;
+@greyTextColor : @grey;
+@blackTextColor : @black;
+
+/* --- Light Colored Text --- */
+@lightPrimaryTextColor : @invertedTextColor;
 @lightSecondaryTextColor : @invertedTextColor;
-@lightRedTextColor       : @lightRed;
-@lightOrangeTextColor    : @lightOrange;
-@lightYellowTextColor    : #B58105; // Yellow text is difficult to read
-@lightOliveTextColor     : #8ABC1E; // Olive is difficult to read
-@lightGreenTextColor     : #1EBC30; // Green is difficult to read
-@lightTealTextColor      : #10A3A3; // Teal text is difficult to read
-@lightBlueTextColor      : @lightBlue;
-@lightVioletTextColor    : @lightViolet;
-@lightPurpleTextColor    : @lightPurple;
-@lightPinkTextColor      : @lightPink;
-@lightBrownTextColor     : @lightBrown;
-@lightGreyTextColor      : @lightGrey;
-@lightBlackTextColor     : @lightBlack;
-
-
-/*--- Hovered Colored Text ---*/
-@primaryHoverTextColor   : @primaryTextColor;
+@lightRedTextColor : @lightRed;
+@lightOrangeTextColor : @lightOrange;
+@lightYellowTextColor : #B58105; // Yellow text is difficult to read
+@lightOliveTextColor : #8ABC1E; // Olive is difficult to read
+@lightGreenTextColor : #1EBC30; // Green is difficult to read
+@lightTealTextColor : #10A3A3; // Teal text is difficult to read
+@lightBlueTextColor : @lightBlue;
+@lightVioletTextColor : @lightViolet;
+@lightPurpleTextColor : @lightPurple;
+@lightPinkTextColor : @lightPink;
+@lightBrownTextColor : @lightBrown;
+@lightGreyTextColor : @lightGrey;
+@lightBlackTextColor : @lightBlack;
+
+/* --- Hovered Colored Text --- */
+@primaryHoverTextColor : @primaryTextColor;
 @secondaryHoverTextColor : @secondaryTextColor;
-@redHoverTextColor       : @redTextColor;
-@orangeHoverTextColor    : @orangeTextColor;
-@yellowHoverTextColor    : @yellowTextColor;
-@oliveHoverTextColor     : @oliveTextColor;
-@greenHoverTextColor     : @greenTextColor;
-@tealHoverTextColor      : @tealTextColor;
-@blueHoverTextColor      : @blueTextColor;
-@violetHoverTextColor    : @violetTextColor;
-@purpleHoverTextColor    : @purpleTextColor;
-@pinkHoverTextColor      : @pinkTextColor;
-@brownHoverTextColor     : @brownTextColor;
-@greyHoverTextColor      : @greyTextColor;
-@blackHoverTextColor     : @blackTextColor;
-
-
-/*--- Colored Border ---*/
-@primaryBorderColor   : @primaryColor;
+@redHoverTextColor : @redTextColor;
+@orangeHoverTextColor : @orangeTextColor;
+@yellowHoverTextColor : @yellowTextColor;
+@oliveHoverTextColor : @oliveTextColor;
+@greenHoverTextColor : @greenTextColor;
+@tealHoverTextColor : @tealTextColor;
+@blueHoverTextColor : @blueTextColor;
+@violetHoverTextColor : @violetTextColor;
+@purpleHoverTextColor : @purpleTextColor;
+@pinkHoverTextColor : @pinkTextColor;
+@brownHoverTextColor : @brownTextColor;
+@greyHoverTextColor : @greyTextColor;
+@blackHoverTextColor : @blackTextColor;
+
+/* --- Colored Border --- */
+@primaryBorderColor : @primaryColor;
 @secondaryBorderColor : @secondaryColor;
-@redBorderColor       : @redTextColor;
-@orangeBorderColor    : @orangeTextColor;
-@yellowBorderColor    : @yellowTextColor;
-@oliveBorderColor     : @oliveTextColor;
-@greenBorderColor     : @greenTextColor;
-@tealBorderColor      : @tealTextColor;
-@blueBorderColor      : @blueTextColor;
-@violetBorderColor    : @violetTextColor;
-@purpleBorderColor    : @purpleTextColor;
-@pinkBorderColor      : @pinkTextColor;
-@brownBorderColor     : @brownTextColor;
-@greyBorderColor      : @greyTextColor;
-@blackBorderColor     : @blackTextColor;
-
-/*--- Shadows ---*/
+@redBorderColor : @redTextColor;
+@orangeBorderColor : @orangeTextColor;
+@yellowBorderColor : @yellowTextColor;
+@oliveBorderColor : @oliveTextColor;
+@greenBorderColor : @greenTextColor;
+@tealBorderColor : @tealTextColor;
+@blueBorderColor : @blueTextColor;
+@violetBorderColor : @violetTextColor;
+@purpleBorderColor : @purpleTextColor;
+@pinkBorderColor : @pinkTextColor;
+@brownBorderColor : @brownTextColor;
+@greyBorderColor : @greyTextColor;
+@blackBorderColor : @blackTextColor;
+
+/* --- Shadows --- */
 @primaryRibbonShadow: darken(@primaryColor, 10);
 @secondaryRibbonShadow: darken(@secondaryColor, 10);
 @redRibbonShadow: darken(@red, 10);
@@ -544,316 +545,314 @@
 @borderWidth: 1px;
 
 @primaryBoxShadow:
-        0 0 0 @borderWidth @primaryBorderColor inset,
-        @shadowShadow
+    0 0 0 @borderWidth @primaryBorderColor inset,
+    @shadowShadow
 ;
 @primaryBoxFloatingShadow:
-        0 0 0 @borderWidth @primaryBorderColor inset,
-        @floatingShadow
+    0 0 0 @borderWidth @primaryBorderColor inset,
+    @floatingShadow
 ;
 @secondaryBoxShadow:
-        0 0 0 @borderWidth @secondaryBorderColor inset,
-        @shadowShadow
+    0 0 0 @borderWidth @secondaryBorderColor inset,
+    @shadowShadow
 ;
 @secondaryBoxFloatingShadow:
-        0 0 0 @borderWidth @secondaryBorderColor inset,
-        @floatingShadow
+    0 0 0 @borderWidth @secondaryBorderColor inset,
+    @floatingShadow
 ;
 @redBoxShadow:
-        0 0 0 @borderWidth @redBorderColor inset,
-        @shadowShadow
+    0 0 0 @borderWidth @redBorderColor inset,
+    @shadowShadow
 ;
 @redBoxFloatingShadow:
-        0 0 0 @borderWidth @redBorderColor inset,
-        @floatingShadow
+    0 0 0 @borderWidth @redBorderColor inset,
+    @floatingShadow
 ;
 @orangeBoxShadow:
-        0 0 0 @borderWidth @orangeBorderColor inset,
-        @shadowShadow
+    0 0 0 @borderWidth @orangeBorderColor inset,
+    @shadowShadow
 ;
 @orangeBoxFloatingShadow:
-        0 0 0 @borderWidth @orangeBorderColor inset,
-        @floatingShadow
+    0 0 0 @borderWidth @orangeBorderColor inset,
+    @floatingShadow
 ;
 @yellowBoxShadow:
-        0 0 0 @borderWidth @yellowBorderColor inset,
-        @shadowShadow
+    0 0 0 @borderWidth @yellowBorderColor inset,
+    @shadowShadow
 ;
 @yellowBoxFloatingShadow:
-        0 0 0 @borderWidth @yellowBorderColor inset,
-        @floatingShadow
+    0 0 0 @borderWidth @yellowBorderColor inset,
+    @floatingShadow
 ;
 @oliveBoxShadow:
-        0 0 0 @borderWidth @oliveBorderColor inset,
-        @shadowShadow
+    0 0 0 @borderWidth @oliveBorderColor inset,
+    @shadowShadow
 ;
 @oliveBoxFloatingShadow:
-        0 0 0 @borderWidth @oliveBorderColor inset,
-        @floatingShadow
+    0 0 0 @borderWidth @oliveBorderColor inset,
+    @floatingShadow
 ;
 @greenBoxShadow:
-        0 0 0 @borderWidth @greenBorderColor inset,
-        @shadowShadow
+    0 0 0 @borderWidth @greenBorderColor inset,
+    @shadowShadow
 ;
 @greenBoxFloatingShadow:
-        0 0 0 @borderWidth @greenBorderColor inset,
-        @floatingShadow
+    0 0 0 @borderWidth @greenBorderColor inset,
+    @floatingShadow
 ;
 @tealBoxShadow:
-        0 0 0 @borderWidth @tealBorderColor inset,
-        @shadowShadow
+    0 0 0 @borderWidth @tealBorderColor inset,
+    @shadowShadow
 ;
 @tealBoxFloatingShadow:
-        0 0 0 @borderWidth @tealBorderColor inset,
-        @floatingShadow
+    0 0 0 @borderWidth @tealBorderColor inset,
+    @floatingShadow
 ;
 @blueBoxShadow:
-        0 0 0 @borderWidth @blueBorderColor inset,
-        @shadowShadow
+    0 0 0 @borderWidth @blueBorderColor inset,
+    @shadowShadow
 ;
 @blueBoxFloatingShadow:
-        0 0 0 @borderWidth @blueBorderColor inset,
-        @floatingShadow
+    0 0 0 @borderWidth @blueBorderColor inset,
+    @floatingShadow
 ;
 @violetBoxShadow:
-        0 0 0 @borderWidth @violetBorderColor inset,
-        @shadowShadow
+    0 0 0 @borderWidth @violetBorderColor inset,
+    @shadowShadow
 ;
 @violetBoxFloatingShadow:
-        0 0 0 @borderWidth @violetBorderColor inset,
-        @floatingShadow
+    0 0 0 @borderWidth @violetBorderColor inset,
+    @floatingShadow
 ;
 @purpleBoxShadow:
-        0 0 0 @borderWidth @purpleBorderColor inset,
-        @shadowShadow
+    0 0 0 @borderWidth @purpleBorderColor inset,
+    @shadowShadow
 ;
 @purpleBoxFloatingShadow:
-        0 0 0 @borderWidth @purpleBorderColor inset,
-        @floatingShadow
+    0 0 0 @borderWidth @purpleBorderColor inset,
+    @floatingShadow
 ;
 @pinkBoxShadow:
-        0 0 0 @borderWidth @pinkBorderColor inset,
-        @shadowShadow
+    0 0 0 @borderWidth @pinkBorderColor inset,
+    @shadowShadow
 ;
 @pinkBoxFloatingShadow:
-        0 0 0 @borderWidth @pinkBorderColor inset,
-        @floatingShadow
+    0 0 0 @borderWidth @pinkBorderColor inset,
+    @floatingShadow
 ;
 @brownBoxShadow:
-        0 0 0 @borderWidth @brownBorderColor inset,
-        @shadowShadow
+    0 0 0 @borderWidth @brownBorderColor inset,
+    @shadowShadow
 ;
 @brownBoxFloatingShadow:
-        0 0 0 @borderWidth @brownBorderColor inset,
-        @floatingShadow
+    0 0 0 @borderWidth @brownBorderColor inset,
+    @floatingShadow
 ;
 @greyBoxShadow:
-        0 0 0 @borderWidth @greyBorderColor inset,
-        @shadowShadow
+    0 0 0 @borderWidth @greyBorderColor inset,
+    @shadowShadow
 ;
 @greyBoxFloatingShadow:
-        0 0 0 @borderWidth @greyBorderColor inset,
-        @floatingShadow
+    0 0 0 @borderWidth @greyBorderColor inset,
+    @floatingShadow
 ;
 @blackBoxShadow:
-        0 0 0 @borderWidth @blackBorderColor inset,
-        @shadowShadow
+    0 0 0 @borderWidth @blackBorderColor inset,
+    @shadowShadow
 ;
 @blackBoxFloatingShadow:
-        0 0 0 @borderWidth @blackBorderColor inset,
-        @floatingShadow
+    0 0 0 @borderWidth @blackBorderColor inset,
+    @floatingShadow
 ;
 
-/*-------------------
+/* -------------------
      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.08);
-@strongTransparentWhite     : rgba(255, 255, 255, 0.15);
+@subtleTransparentWhite : rgba(255, 255, 255, 0.02);
+@transparentWhite : rgba(255, 255, 255, 0.08);
+@strongTransparentWhite : rgba(255, 255, 255, 0.15);
 
-/*-------------------
+/* -------------------
        Accents
---------------------*/
+-------------------- */
 
 /* Differentiating Neutrals */
 @subtleGradient: linear-gradient(transparent, @transparentBlack);
 
 /* Differentiating Layers */
 @subtleShadow:
-  0 1px 2px 0 @borderColor
+    0 1px 2px 0 @borderColor
 ;
 @floatingShadow:
-  0 2px 4px 0 rgba(34, 36, 38, 0.12),
-  0 2px 10px 0 rgba(34, 36, 38, 0.15)
+    0 2px 4px 0 rgba(34, 36, 38, 0.12),
+    0 2px 10px 0 rgba(34, 36, 38, 0.15)
 ;
 
 /*******************************
            Power-User
 *******************************/
 
-
-/*-------------------
+/* -------------------
     Emotive Colors
---------------------*/
+-------------------- */
 
 /* Positive */
-@positiveColor           : @green;
+@positiveColor : @green;
 @positiveBackgroundColor : #FCFFF5;
-@positiveBorderColor     : #A3C293;
-@positiveHeaderColor     : #1A531B;
-@positiveTextColor       : #2C662D;
+@positiveBorderColor : #A3C293;
+@positiveHeaderColor : #1A531B;
+@positiveTextColor : #2C662D;
 
 /* Negative */
-@negativeColor           : @red;
+@negativeColor : @red;
 @negativeBackgroundColor : #FFF6F6;
-@negativeBorderColor     : #E0B4B4;
-@negativeHeaderColor     : #912D2B;
-@negativeTextColor       : #9F3A38;
+@negativeBorderColor : #E0B4B4;
+@negativeHeaderColor : #912D2B;
+@negativeTextColor : #9F3A38;
 
 /* Info */
-@infoColor              : #31CCEC;
-@infoBackgroundColor    : #F8FFFF;
-@infoBorderColor        : #A9D5DE;
-@infoHeaderColor        : #0E566C;
-@infoTextColor          : #276F86;
+@infoColor : #31CCEC;
+@infoBackgroundColor : #F8FFFF;
+@infoBorderColor : #A9D5DE;
+@infoHeaderColor : #0E566C;
+@infoTextColor : #276F86;
 
 /* Warning */
-@warningColor           : #F2C037;
-@warningBorderColor     : #C9BA9B;
+@warningColor : #F2C037;
+@warningBorderColor : #C9BA9B;
 @warningBackgroundColor : #FFFAF3;
-@warningHeaderColor     : #794B02;
-@warningTextColor       : #573A08;
+@warningHeaderColor : #794B02;
+@warningTextColor : #573A08;
 
-/*-------------------
+/* -------------------
         Paths
---------------------*/
+-------------------- */
 
 /* For source only. Modified in gulp for dist */
 @imagePath : '../../themes/default/assets/images';
-@fontPath  : '../../themes/default/assets/fonts';
+@fontPath : '../../themes/default/assets/fonts';
 
-/*-------------------
+/* -------------------
        Em Sizes
---------------------*/
+-------------------- */
 
 /*
   This rounds @size values to the closest pixel then expresses that value in (r)em.
   This ensures all size values round to exact pixels
 */
-@miniRaw         : unit( (round(@miniSize * @emSize) / @emSize ));
-@tinyRaw         : unit( (round(@tinySize * @emSize) / @emSize ));
-@smallRaw        : unit( (round(@smallSize * @emSize) / @emSize ));
-@mediumRaw       : unit( (round(@mediumSize * @emSize) / @emSize ));
-@largeRaw        : unit( (round(@largeSize * @emSize) / @emSize ));
-@bigRaw          : unit( (round(@bigSize * @emSize) / @emSize ));
-@hugeRaw         : unit( (round(@hugeSize * @emSize) / @emSize ));
-@massiveRaw      : unit( (round(@massiveSize * @emSize) / @emSize ));
-
-@mini            : unit( @miniRaw, rem);
-@tiny            : unit( @tinyRaw, rem);
-@small           : unit( @smallRaw, rem);
-@medium          : unit( @mediumRaw, rem);
-@large           : unit( @largeRaw, rem);
-@big             : unit( @bigRaw, rem);
-@huge            : unit( @hugeRaw, rem);
-@massive         : unit( @massiveRaw, rem);
+@miniRaw : unit( (round(@miniSize * @emSize) / @emSize ));
+@tinyRaw : unit( (round(@tinySize * @emSize) / @emSize ));
+@smallRaw : unit( (round(@smallSize * @emSize) / @emSize ));
+@mediumRaw : unit( (round(@mediumSize * @emSize) / @emSize ));
+@largeRaw : unit( (round(@largeSize * @emSize) / @emSize ));
+@bigRaw : unit( (round(@bigSize * @emSize) / @emSize ));
+@hugeRaw : unit( (round(@hugeSize * @emSize) / @emSize ));
+@massiveRaw : unit( (round(@massiveSize * @emSize) / @emSize ));
+
+@mini : unit( @miniRaw, rem);
+@tiny : unit( @tinyRaw, rem);
+@small : unit( @smallRaw, rem);
+@medium : unit( @mediumRaw, rem);
+@large : unit( @largeRaw, rem);
+@big : unit( @bigRaw, rem);
+@huge : unit( @hugeRaw, rem);
+@massive : unit( @massiveRaw, rem);
 
 /* em */
-@relativeMini    : unit( @miniRaw, em);
-@relativeTiny    : unit( @tinyRaw, em);
-@relativeSmall   : unit( @smallRaw, em);
-@relativeMedium  : unit( @mediumRaw, em);
-@relativeLarge   : unit( @largeRaw, em);
-@relativeBig     : unit( @bigRaw, em);
-@relativeHuge    : unit( @hugeRaw, em);
+@relativeMini : unit( @miniRaw, em);
+@relativeTiny : unit( @tinyRaw, em);
+@relativeSmall : unit( @smallRaw, em);
+@relativeMedium : unit( @mediumRaw, em);
+@relativeLarge : unit( @largeRaw, em);
+@relativeBig : unit( @bigRaw, em);
+@relativeHuge : unit( @hugeRaw, em);
 @relativeMassive : unit( @massiveRaw, em);
 
 /* rem */
-@absoluteMini    : unit( @miniRaw, rem);
-@absoluteTiny    : unit( @tinyRaw, rem);
-@absoluteSmall   : unit( @smallRaw, rem);
-@absoluteMedium  : unit( @mediumRaw, rem);
-@absoluteLarge   : unit( @largeRaw, rem);
-@absoluteBig     : unit( @bigRaw, rem);
-@absoluteHuge    : unit( @hugeRaw, rem);
+@absoluteMini : unit( @miniRaw, rem);
+@absoluteTiny : unit( @tinyRaw, rem);
+@absoluteSmall : unit( @smallRaw, rem);
+@absoluteMedium : unit( @mediumRaw, rem);
+@absoluteLarge : unit( @largeRaw, rem);
+@absoluteBig : unit( @bigRaw, rem);
+@absoluteHuge : unit( @hugeRaw, rem);
 @absoluteMassive : unit( @massiveRaw, rem);
 
-/*-------------------
+/* -------------------
        Icons
---------------------*/
+-------------------- */
 
 /* 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);
+@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.9);
-@selectedTextColor           : rgba(0, 0, 0, 0.95);
+@unselectedTextColor : rgba(0, 0, 0, 0.4);
+@hoveredTextColor : rgba(0, 0, 0, 0.8);
+@pressedTextColor : rgba(0, 0, 0, 0.9);
+@selectedTextColor : rgba(0, 0, 0, 0.95);
 
-@invertedTextColor           : rgba(255, 255, 255, 0.9);
-@invertedMutedTextColor      : rgba(255, 255, 255, 0.8);
-@invertedLightTextColor      : rgba(255, 255, 255, 0.7);
+@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);
+@invertedHoveredTextColor : rgba(255, 255, 255, 1);
+@invertedPressedTextColor : rgba(255, 255, 255, 1);
+@invertedSelectedTextColor : rgba(255, 255, 255, 1);
 
-/*-------------------
+/* -------------------
      Brand Colors
---------------------*/
+-------------------- */
 
-@facebookColor   : #3B5998;
-@twitterColor    : #1DA1F2;
+@facebookColor : #3B5998;
+@twitterColor : #1DA1F2;
 @googlePlusColor : #DD4B39;
-@linkedInColor   : #0077B5;
-@youtubeColor    : #FF0000;
-@pinterestColor  : #BD081C;
-@vkColor         : #45668E;
-@instagramColor  : #49769C;
-@telegramColor   : #0088CC;
-@whatsAppColor   : #25D366;
-
-/*-------------------
+@linkedInColor : #0077B5;
+@youtubeColor : #FF0000;
+@pinterestColor : #BD081C;
+@vkColor : #45668E;
+@instagramColor : #49769C;
+@telegramColor : #0088CC;
+@whatsAppColor : #25D366;
+
+/* -------------------
       Borders
---------------------*/
+-------------------- */
 
-@circularRadius                : 500rem;
+@circularRadius : 500rem;
 
-@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);
+@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);
 @strongSelectedBorderColor : rgba(34, 36, 38, 0.5);
-@disabledBorderColor       : rgba(34, 36, 38, 0.5);
+@disabledBorderColor : rgba(34, 36, 38, 0.5);
 
-@solidInternalBorderColor  : #FAFAFA;
-@solidBorderColor          : #D4D4D5;
-@solidSelectedBorderColor  : #BCBDBD;
+@solidInternalBorderColor : #FAFAFA;
+@solidBorderColor : #D4D4D5;
+@solidSelectedBorderColor : #BCBDBD;
 
-@whiteBorderColor              : rgba(255, 255, 255, 0.1);
-@selectedWhiteBorderColor      : rgba(255, 255, 255, 0.8);
+@whiteBorderColor : rgba(255, 255, 255, 0.1);
+@selectedWhiteBorderColor : rgba(255, 255, 255, 0.8);
 
-@solidWhiteBorderColor         : #555555;
+@solidWhiteBorderColor : #555555;
 @selectedSolidWhiteBorderColor : #999999;
 
-
-/*-------------------
+/* -------------------
     Derived Values
---------------------*/
+-------------------- */
 
 /* Loaders Position Offset */
 @loaderOffset : -(@loaderSize / 2);
@@ -866,30 +865,29 @@
 @glyphWidth: 1.1em;
 
 /* Used to match floats with text */
-@lineHeightOffset       : ((@lineHeight - 1em) / 2);
+@lineHeightOffset : ((@lineHeight - 1em) / 2);
 @headerLineHeightOffset : ((@headerLineHeight - 1em) / 2);
 
 /* Header Spacing */
-@headerTopMargin    : e(%("calc(2rem - %d)", @headerLineHeightOffset));
+@headerTopMargin : e(%("calc(2rem - %d)", @headerLineHeightOffset));
 @headerBottomMargin : 1rem;
-@headerMargin       : @headerTopMargin 0 @headerBottomMargin;
+@headerMargin : @headerTopMargin 0 @headerBottomMargin;
 
 /* Minimum Mobile Width */
-@pageMinWidth       : 320px;
+@pageMinWidth : 320px;
 
 /* Positive / Negative Dupes */
 @successBackgroundColor : @positiveBackgroundColor;
-@successColor           : @positiveColor;
-@successBorderColor     : @positiveBorderColor;
-@successHeaderColor     : @positiveHeaderColor;
-@successTextColor       : @positiveTextColor;
-
-@errorBackgroundColor   : @negativeBackgroundColor;
-@errorColor             : @negativeColor;
-@errorBorderColor       : @negativeBorderColor;
-@errorHeaderColor       : @negativeHeaderColor;
-@errorTextColor         : @negativeTextColor;
+@successColor : @positiveColor;
+@successBorderColor : @positiveBorderColor;
+@successHeaderColor : @positiveHeaderColor;
+@successTextColor : @positiveTextColor;
 
+@errorBackgroundColor : @negativeBackgroundColor;
+@errorColor : @negativeColor;
+@errorBorderColor : @negativeBorderColor;
+@errorHeaderColor : @negativeHeaderColor;
+@errorTextColor : @negativeTextColor;
 
 /* Responsive */
 @largestMobileScreen : (@tabletBreakpoint - 0.02px);
@@ -897,10 +895,10 @@
 @largestSmallMonitor : (@largeMonitorBreakpoint - 0.02px);
 @largestLargeMonitor : (@widescreenMonitorBreakpoint - 0.02px);
 
-
-/*-------------------
+/* -------------------
   Exact Pixel Values
---------------------*/
+-------------------- */
+
 /*
   These are used to specify exact pixel values in em
   for things like borders that remain constantly
@@ -911,15 +909,15 @@
 
 */
 
-@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);
+@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);
@@ -976,15 +974,15 @@
 @63px : unit( (63 / @emSize), rem);
 @64px : unit( (64 / @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);
+@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);
@@ -1042,408 +1040,407 @@
 @relative64px : unit( (64 / @emSize), em);
 
 /* Columns */
-@oneWide        : (1 / @columnCount * 100%);
-@twoWide        : (2 / @columnCount * 100%);
-@threeWide      : (3 / @columnCount * 100%);
-@fourWide       : (4 / @columnCount * 100%);
-@fiveWide       : (5 / @columnCount * 100%);
-@sixWide        : (6 / @columnCount * 100%);
-@sevenWide      : (7 / @columnCount * 100%);
-@eightWide      : (8 / @columnCount * 100%);
-@nineWide       : (9 / @columnCount * 100%);
-@tenWide        : (10 / @columnCount * 100%);
-@elevenWide     : (11 / @columnCount * 100%);
-@twelveWide     : (12 / @columnCount * 100%);
-@thirteenWide   : (13 / @columnCount * 100%);
-@fourteenWide   : (14 / @columnCount * 100%);
-@fifteenWide    : (15 / @columnCount * 100%);
-@sixteenWide    : (16 / @columnCount * 100%);
-
-@oneColumn      : (1 / 1 * 100%);
-@twoColumn      : (1 / 2 * 100%);
-@threeColumn    : (1 / 3 * 100%);
-@fourColumn     : (1 / 4 * 100%);
-@fiveColumn     : (1 / 5 * 100%);
-@sixColumn      : (1 / 6 * 100%);
-@sevenColumn    : (1 / 7 * 100%);
-@eightColumn    : (1 / 8 * 100%);
-@nineColumn     : (1 / 9 * 100%);
-@tenColumn      : (1 / 10 * 100%);
-@elevenColumn   : (1 / 11 * 100%);
-@twelveColumn   : (1 / 12 * 100%);
+@oneWide : (1 / @columnCount * 100%);
+@twoWide : (2 / @columnCount * 100%);
+@threeWide : (3 / @columnCount * 100%);
+@fourWide : (4 / @columnCount * 100%);
+@fiveWide : (5 / @columnCount * 100%);
+@sixWide : (6 / @columnCount * 100%);
+@sevenWide : (7 / @columnCount * 100%);
+@eightWide : (8 / @columnCount * 100%);
+@nineWide : (9 / @columnCount * 100%);
+@tenWide : (10 / @columnCount * 100%);
+@elevenWide : (11 / @columnCount * 100%);
+@twelveWide : (12 / @columnCount * 100%);
+@thirteenWide : (13 / @columnCount * 100%);
+@fourteenWide : (14 / @columnCount * 100%);
+@fifteenWide : (15 / @columnCount * 100%);
+@sixteenWide : (16 / @columnCount * 100%);
+
+@oneColumn : (1 / 1 * 100%);
+@twoColumn : (1 / 2 * 100%);
+@threeColumn : (1 / 3 * 100%);
+@fourColumn : (1 / 4 * 100%);
+@fiveColumn : (1 / 5 * 100%);
+@sixColumn : (1 / 6 * 100%);
+@sevenColumn : (1 / 7 * 100%);
+@eightColumn : (1 / 8 * 100%);
+@nineColumn : (1 / 9 * 100%);
+@tenColumn : (1 / 10 * 100%);
+@elevenColumn : (1 / 11 * 100%);
+@twelveColumn : (1 / 12 * 100%);
 @thirteenColumn : (1 / 13 * 100%);
 @fourteenColumn : (1 / 14 * 100%);
-@fifteenColumn  : (1 / 15 * 100%);
-@sixteenColumn  : (1 / 16 * 100%);
-
+@fifteenColumn : (1 / 15 * 100%);
+@sixteenColumn : (1 / 16 * 100%);
 
 /*******************************
              States
 *******************************/
 
-/*-------------------
+/* -------------------
       Disabled
---------------------*/
+-------------------- */
 
 @disabledOpacity: 0.45;
+@disabledPointerEvents: none;
 @disabledTextColor: rgba(40, 40, 40, 0.3);
 @invertedDisabledTextColor: rgba(225, 225, 225, 0.3);
 
-/*-------------------
+/* -------------------
         Hover
---------------------*/
+-------------------- */
 
-/*---  Shadows  ---*/
+/* ---  Shadows  --- */
 @floatingShadowHover:
-  0 2px 4px 0 rgba(34, 36, 38, 0.15),
-  0 2px 10px 0 rgba(34, 36, 38, 0.25)
+    0 2px 4px 0 rgba(34, 36, 38, 0.15),
+    0 2px 10px 0 rgba(34, 36, 38, 0.25)
 ;
 
-/*---  Colors  ---*/
-@primaryColorHover        : saturate(darken(@primaryColor, 5), 10, relative);
-@secondaryColorHover      : saturate(lighten(@secondaryColor, 5), 10, relative);
-@lightPrimaryColorHover   : saturate(darken(@lightPrimaryColor, 10), 10, relative);
+/* ---  Colors  --- */
+@primaryColorHover : saturate(darken(@primaryColor, 5), 10, relative);
+@secondaryColorHover : saturate(lighten(@secondaryColor, 5), 10, relative);
+@lightPrimaryColorHover : saturate(darken(@lightPrimaryColor, 10), 10, relative);
 @lightSecondaryColorHover : saturate(lighten(@lightSecondaryColor, 10), 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, 10), 10, relative);
-@lightOrangeHover         : saturate(darken(@lightOrange, 10), 10, relative);
-@lightYellowHover         : saturate(darken(@lightYellow, 10), 10, relative);
-@lightOliveHover          : saturate(darken(@lightOlive, 10), 10, relative);
-@lightGreenHover          : saturate(darken(@lightGreen, 10), 10, relative);
-@lightTealHover           : saturate(darken(@lightTeal, 10), 10, relative);
-@lightBlueHover           : saturate(darken(@lightBlue, 10), 10, relative);
-@lightVioletHover         : saturate(darken(@lightViolet, 10), 10, relative);
-@lightPurpleHover         : saturate(darken(@lightPurple, 10), 10, relative);
-@lightPinkHover           : saturate(darken(@lightPink, 10), 10, relative);
-@lightBrownHover          : saturate(darken(@lightBrown, 10), 10, relative);
-@lightGreyHover           : saturate(darken(@lightGrey, 10), 10, relative);
-@lightBlackHover          : saturate(darken(@fullBlack, 10), 10, relative);
-
-/*---  Emotive  ---*/
-@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);
-@telegramHoverColor       : saturate(darken(@telegramColor, 5), 10, relative);
-@whatsAppHoverColor       : saturate(darken(@whatsAppColor, 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);
-
-/*-------------------
+@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, 10), 10, relative);
+@lightOrangeHover : saturate(darken(@lightOrange, 10), 10, relative);
+@lightYellowHover : saturate(darken(@lightYellow, 10), 10, relative);
+@lightOliveHover : saturate(darken(@lightOlive, 10), 10, relative);
+@lightGreenHover : saturate(darken(@lightGreen, 10), 10, relative);
+@lightTealHover : saturate(darken(@lightTeal, 10), 10, relative);
+@lightBlueHover : saturate(darken(@lightBlue, 10), 10, relative);
+@lightVioletHover : saturate(darken(@lightViolet, 10), 10, relative);
+@lightPurpleHover : saturate(darken(@lightPurple, 10), 10, relative);
+@lightPinkHover : saturate(darken(@lightPink, 10), 10, relative);
+@lightBrownHover : saturate(darken(@lightBrown, 10), 10, relative);
+@lightGreyHover : saturate(darken(@lightGrey, 10), 10, relative);
+@lightBlackHover : saturate(darken(@fullBlack, 10), 10, relative);
+
+/* ---  Emotive  --- */
+@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);
+@telegramHoverColor : saturate(darken(@telegramColor, 5), 10, relative);
+@whatsAppHoverColor : saturate(darken(@whatsAppColor, 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);
+
+/* -------------------
         Focus
---------------------*/
+-------------------- */
 
-/*---  Colors  ---*/
-@primaryColorFocus        : saturate(darken(@primaryColor, 8), 20, relative);
-@secondaryColorFocus      : saturate(lighten(@secondaryColor, 8), 20, relative);
-@lightPrimaryColorFocus   : saturate(darken(@lightPrimaryColor, 8), 20, relative);
+/* ---  Colors  --- */
+@primaryColorFocus : saturate(darken(@primaryColor, 8), 20, relative);
+@secondaryColorFocus : saturate(lighten(@secondaryColor, 8), 20, relative);
+@lightPrimaryColorFocus : saturate(darken(@lightPrimaryColor, 8), 20, relative);
 @lightSecondaryColorFocus : saturate(lighten(@lightSecondaryColor, 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);
-@telegramFocusColor       : saturate(darken(@telegramColor, 8), 20, relative);
-@whatsAppFocusColor       : saturate(darken(@whatsAppColor, 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);
-
-
-/*-------------------
+@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);
+@telegramFocusColor : saturate(darken(@telegramColor, 8), 20, relative);
+@whatsAppFocusColor : saturate(darken(@whatsAppColor, 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, 10);
-@secondaryColorDown      : lighten(@secondaryColor, 10);
-@lightPrimaryColorDown   : darken(@lightPrimaryColor, 10);
+/* ---  Colors  --- */
+@primaryColorDown : darken(@primaryColor, 10);
+@secondaryColorDown : lighten(@secondaryColor, 10);
+@lightPrimaryColorDown : darken(@lightPrimaryColor, 10);
 @lightSecondaryColorDown : lighten(@lightSecondaryColor, 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, 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);
-@telegramDownColor       : darken(@telegramColor, 10);
-@whatsAppDownColor       : darken(@whatsAppColor, 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);
-
-
-/*-------------------
+@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, 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);
+@telegramDownColor : darken(@telegramColor, 10);
+@whatsAppDownColor : darken(@whatsAppColor, 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
---------------------*/
+-------------------- */
 
-/*---  Colors  ---*/
-@primaryColorActive        : saturate(darken(@primaryColor, 5), 15, relative);
-@secondaryColorActive      : saturate(lighten(@secondaryColor, 5), 15, relative);
-@lightPrimaryColorActive   : saturate(darken(@lightPrimaryColor, 5), 15, relative);
+/* ---  Colors  --- */
+@primaryColorActive : saturate(darken(@primaryColor, 5), 15, relative);
+@secondaryColorActive : saturate(lighten(@secondaryColor, 5), 15, relative);
+@lightPrimaryColorActive : saturate(darken(@lightPrimaryColor, 5), 15, relative);
 @lightSecondaryColorActive : saturate(lighten(@lightSecondaryColor, 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       : 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);
-@telegramActiveColor       : saturate(darken(@telegramColor, 5), 15, relative);
-@whatsAppActiveColor       : saturate(darken(@whatsAppColor, 5), 15, relative);
-
-/*---  Dark Tones  ---*/
-@fullBlackActive           : darken(@fullBlack, 5);
-@blackActive               : darken(@black, 5);
-@greyActive                : darken(@grey, 5);
-
-/*---  Light Tones  ---*/
-@whiteActive               : darken(@white, 5);
-@offWhiteActive            : darken(@offWhite, 5);
-@darkWhiteActive           : darken(@darkWhite, 5);
-
-/*---  Tertiary  ---*/
-@primaryTertiaryColor        : saturate(@primaryColor, 20%);
-@primaryTertiaryColorHover   : desaturate(@primaryColorHover, 20%);
-@primaryTertiaryColorFocus   : desaturate(@primaryColorFocus, 20%);
-@primaryTertiaryColorActive  : saturate(@primaryColorActive, 20%);
-@secondaryTertiaryColor      : saturate(@secondaryColor, 20%);
+@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 : 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);
+@telegramActiveColor : saturate(darken(@telegramColor, 5), 15, relative);
+@whatsAppActiveColor : saturate(darken(@whatsAppColor, 5), 15, relative);
+
+/* ---  Dark Tones  --- */
+@fullBlackActive : darken(@fullBlack, 5);
+@blackActive : darken(@black, 5);
+@greyActive : darken(@grey, 5);
+
+/* ---  Light Tones  --- */
+@whiteActive : darken(@white, 5);
+@offWhiteActive : darken(@offWhite, 5);
+@darkWhiteActive : darken(@darkWhite, 5);
+
+/* ---  Tertiary  --- */
+@primaryTertiaryColor : saturate(@primaryColor, 20%);
+@primaryTertiaryColorHover : desaturate(@primaryColorHover, 20%);
+@primaryTertiaryColorFocus : desaturate(@primaryColorFocus, 20%);
+@primaryTertiaryColorActive : saturate(@primaryColorActive, 20%);
+@secondaryTertiaryColor : saturate(@secondaryColor, 20%);
 @secondaryTertiaryColorHover : desaturate(@secondaryColorHover, 20%);
 @secondaryTertiaryColorFocus : desaturate(@secondaryColorFocus, 20%);
 @secondaryTertiaryColorActive: saturate(@secondaryColorActive, 20%);
-@redTertiaryColor            : saturate(@red, 20%);
-@redTertiaryColorHover       : desaturate(@redHover, 20%);
-@redTertiaryColorFocus       : desaturate(@redFocus, 20%);
-@redTertiaryColorActive      : saturate(@redActive, 20%);
-@orangeTertiaryColor         : saturate(@orange, 20%);
-@orangeTertiaryColorHover    : desaturate(@orangeHover, 20%);
-@orangeTertiaryColorFocus    : desaturate(@orangeFocus, 20%);
-@orangeTertiaryColorActive   : saturate(@orangeActive, 20%);
-@yellowTertiaryColor         : saturate(@yellow, 20%);
-@yellowTertiaryColorHover    : desaturate(@yellowHover, 20%);
-@yellowTertiaryColorFocus    : desaturate(@yellowFocus, 20%);
-@yellowTertiaryColorActive   : saturate(@yellowActive, 20%);
-@oliveTertiaryColor          : saturate(@olive, 20%);
-@oliveTertiaryColorHover     : desaturate(@oliveHover, 20%);
-@oliveTertiaryColorFocus     : desaturate(@oliveFocus, 20%);
-@oliveTertiaryColorActive    : saturate(@oliveActive, 20%);
-@greenTertiaryColor          : saturate(@green, 20%);
-@greenTertiaryColorHover     : desaturate(@greenHover, 20%);
-@greenTertiaryColorFocus     : desaturate(@greenFocus, 20%);
-@greenTertiaryColorActive    : saturate(@greenActive, 20%);
-@tealTertiaryColor           : saturate(@teal, 20%);
-@tealTertiaryColorHover      : desaturate(@tealHover, 20%);
-@tealTertiaryColorFocus      : desaturate(@tealFocus, 20%);
-@tealTertiaryColorActive     : saturate(@tealActive, 20%);
-@blueTertiaryColor           : saturate(@blue, 20%);
-@blueTertiaryColorHover      : desaturate(@blueHover, 20%);
-@blueTertiaryColorFocus      : desaturate(@blueFocus, 20%);
-@blueTertiaryColorActive     : saturate(@blueActive, 20%);
-@violetTertiaryColor         : saturate(@violet, 20%);
-@violetTertiaryColorHover    : desaturate(@violetHover, 20%);
-@violetTertiaryColorFocus    : desaturate(@violetFocus, 20%);
-@violetTertiaryColorActive   : saturate(@violetActive, 20%);
-@purpleTertiaryColor         : saturate(@purple, 20%);
-@purpleTertiaryColorHover    : desaturate(@purpleHover, 20%);
-@purpleTertiaryColorFocus    : desaturate(@purpleFocus, 20%);
-@purpleTertiaryColorActive   : saturate(@purpleActive, 20%);
-@pinkTertiaryColor           : saturate(@pink, 20%);
-@pinkTertiaryColorHover      : desaturate(@pinkHover, 20%);
-@pinkTertiaryColorFocus      : desaturate(@pinkFocus, 20%);
-@pinkTertiaryColorActive     : saturate(@pinkActive, 20%);
-@brownTertiaryColor          : saturate(@brown, 20%);
-@brownTertiaryColorHover     : desaturate(@brownHover, 20%);
-@brownTertiaryColorFocus     : desaturate(@brownFocus, 20%);
-@brownTertiaryColorActive    : saturate(@brownActive, 20%);
-@greyTertiaryColor           : darken(@grey, 5%);
-@greyTertiaryColorHover      : lighten(@greyHover, 5%);
-@greyTertiaryColorFocus      : lighten(@greyFocus, 8%);
-@greyTertiaryColorActive     : darken(@greyActive, 5%);
-@blackTertiaryColor          : lighten(@black, 20%);
-@blackTertiaryColorHover     : lighten(@blackHover, 40%);
-@blackTertiaryColorFocus     : lighten(@blackFocus, 40%);
-@blackTertiaryColorActive    : lighten(@blackActive, 20%);
-
-/*---  Bright  ---*/
-@primaryBright        : screen(@lightPrimaryColor,@blendingBaseColor);
-@secondaryBright      : screen(@lightSecondaryColor,@blendingBaseColor);
-@redBright            : screen(@lightRed,@blendingBaseColor);
-@orangeBright         : screen(@lightOrange,@blendingBaseColor);
-@yellowBright         : screen(@lightYellow,@blendingBaseColor);
-@oliveBright          : screen(@lightOlive,@blendingBaseColor);
-@greenBright          : screen(@lightGreen,@blendingBaseColor);
-@tealBright           : screen(@lightTeal,@blendingBaseColor);
-@blueBright           : screen(@lightBlue,@blendingBaseColor);
-@violetBright         : screen(@lightViolet,@blendingBaseColor);
-@purpleBright         : screen(@lightPurple,@blendingBaseColor);
-@pinkBright           : screen(@lightPink,@blendingBaseColor);
-@brownBright          : screen(@lightBrown,@blendingBaseColor);
-@greyBright           : @lightGrey;
-@blackBright          : @lightBlack;
-
-@primaryBrightHover   : screen(@lightPrimaryColorHover,@blendingBaseColor);
+@redTertiaryColor : saturate(@red, 20%);
+@redTertiaryColorHover : desaturate(@redHover, 20%);
+@redTertiaryColorFocus : desaturate(@redFocus, 20%);
+@redTertiaryColorActive : saturate(@redActive, 20%);
+@orangeTertiaryColor : saturate(@orange, 20%);
+@orangeTertiaryColorHover : desaturate(@orangeHover, 20%);
+@orangeTertiaryColorFocus : desaturate(@orangeFocus, 20%);
+@orangeTertiaryColorActive : saturate(@orangeActive, 20%);
+@yellowTertiaryColor : saturate(@yellow, 20%);
+@yellowTertiaryColorHover : desaturate(@yellowHover, 20%);
+@yellowTertiaryColorFocus : desaturate(@yellowFocus, 20%);
+@yellowTertiaryColorActive : saturate(@yellowActive, 20%);
+@oliveTertiaryColor : saturate(@olive, 20%);
+@oliveTertiaryColorHover : desaturate(@oliveHover, 20%);
+@oliveTertiaryColorFocus : desaturate(@oliveFocus, 20%);
+@oliveTertiaryColorActive : saturate(@oliveActive, 20%);
+@greenTertiaryColor : saturate(@green, 20%);
+@greenTertiaryColorHover : desaturate(@greenHover, 20%);
+@greenTertiaryColorFocus : desaturate(@greenFocus, 20%);
+@greenTertiaryColorActive : saturate(@greenActive, 20%);
+@tealTertiaryColor : saturate(@teal, 20%);
+@tealTertiaryColorHover : desaturate(@tealHover, 20%);
+@tealTertiaryColorFocus : desaturate(@tealFocus, 20%);
+@tealTertiaryColorActive : saturate(@tealActive, 20%);
+@blueTertiaryColor : saturate(@blue, 20%);
+@blueTertiaryColorHover : desaturate(@blueHover, 20%);
+@blueTertiaryColorFocus : desaturate(@blueFocus, 20%);
+@blueTertiaryColorActive : saturate(@blueActive, 20%);
+@violetTertiaryColor : saturate(@violet, 20%);
+@violetTertiaryColorHover : desaturate(@violetHover, 20%);
+@violetTertiaryColorFocus : desaturate(@violetFocus, 20%);
+@violetTertiaryColorActive : saturate(@violetActive, 20%);
+@purpleTertiaryColor : saturate(@purple, 20%);
+@purpleTertiaryColorHover : desaturate(@purpleHover, 20%);
+@purpleTertiaryColorFocus : desaturate(@purpleFocus, 20%);
+@purpleTertiaryColorActive : saturate(@purpleActive, 20%);
+@pinkTertiaryColor : saturate(@pink, 20%);
+@pinkTertiaryColorHover : desaturate(@pinkHover, 20%);
+@pinkTertiaryColorFocus : desaturate(@pinkFocus, 20%);
+@pinkTertiaryColorActive : saturate(@pinkActive, 20%);
+@brownTertiaryColor : saturate(@brown, 20%);
+@brownTertiaryColorHover : desaturate(@brownHover, 20%);
+@brownTertiaryColorFocus : desaturate(@brownFocus, 20%);
+@brownTertiaryColorActive : saturate(@brownActive, 20%);
+@greyTertiaryColor : darken(@grey, 5%);
+@greyTertiaryColorHover : lighten(@greyHover, 5%);
+@greyTertiaryColorFocus : lighten(@greyFocus, 8%);
+@greyTertiaryColorActive : darken(@greyActive, 5%);
+@blackTertiaryColor : lighten(@black, 20%);
+@blackTertiaryColorHover : lighten(@blackHover, 40%);
+@blackTertiaryColorFocus : lighten(@blackFocus, 40%);
+@blackTertiaryColorActive : lighten(@blackActive, 20%);
+
+/* ---  Bright  --- */
+@primaryBright : screen(@lightPrimaryColor,@blendingBaseColor);
+@secondaryBright : screen(@lightSecondaryColor,@blendingBaseColor);
+@redBright : screen(@lightRed,@blendingBaseColor);
+@orangeBright : screen(@lightOrange,@blendingBaseColor);
+@yellowBright : screen(@lightYellow,@blendingBaseColor);
+@oliveBright : screen(@lightOlive,@blendingBaseColor);
+@greenBright : screen(@lightGreen,@blendingBaseColor);
+@tealBright : screen(@lightTeal,@blendingBaseColor);
+@blueBright : screen(@lightBlue,@blendingBaseColor);
+@violetBright : screen(@lightViolet,@blendingBaseColor);
+@purpleBright : screen(@lightPurple,@blendingBaseColor);
+@pinkBright : screen(@lightPink,@blendingBaseColor);
+@brownBright : screen(@lightBrown,@blendingBaseColor);
+@greyBright : @lightGrey;
+@blackBright : @lightBlack;
+
+@primaryBrightHover : screen(@lightPrimaryColorHover,@blendingBaseColor);
 @secondaryBrightHover : screen(@lightSecondaryColorHover,@blendingBaseColor);
-@redBrightHover       : screen(@lightRedHover,@blendingBaseColor);
-@orangeBrightHover    : screen(@lightOrangeHover,@blendingBaseColor);
-@yellowBrightHover    : screen(@lightYellowHover,@blendingBaseColor);
-@oliveBrightHover     : screen(@lightOliveHover,@blendingBaseColor);
-@greenBrightHover     : screen(@lightGreenHover,@blendingBaseColor);
-@tealBrightHover      : screen(@lightTealHover,@blendingBaseColor);
-@blueBrightHover      : screen(@lightBlueHover,@blendingBaseColor);
-@violetBrightHover    : screen(@lightVioletHover,@blendingBaseColor);
-@purpleBrightHover    : screen(@lightPurpleHover,@blendingBaseColor);
-@pinkBrightHover      : screen(@lightPinkHover,@blendingBaseColor);
-@brownBrightHover     : screen(@lightBrownHover,@blendingBaseColor);
-@greyBrightHover      : @lightGreyHover;
-@blackBrightHover     : @lightBlackHover;
+@redBrightHover : screen(@lightRedHover,@blendingBaseColor);
+@orangeBrightHover : screen(@lightOrangeHover,@blendingBaseColor);
+@yellowBrightHover : screen(@lightYellowHover,@blendingBaseColor);
+@oliveBrightHover : screen(@lightOliveHover,@blendingBaseColor);
+@greenBrightHover : screen(@lightGreenHover,@blendingBaseColor);
+@tealBrightHover : screen(@lightTealHover,@blendingBaseColor);
+@blueBrightHover : screen(@lightBlueHover,@blendingBaseColor);
+@violetBrightHover : screen(@lightVioletHover,@blendingBaseColor);
+@purpleBrightHover : screen(@lightPurpleHover,@blendingBaseColor);
+@pinkBrightHover : screen(@lightPinkHover,@blendingBaseColor);
+@brownBrightHover : screen(@lightBrownHover,@blendingBaseColor);
+@greyBrightHover : @lightGreyHover;
+@blackBrightHover : @lightBlackHover;
 
 /*******************************
  States shared in Form-related components
  *******************************/
-/* Form state*/
+
+/* Form state */
 @formErrorColor: @negativeTextColor;
 @formErrorBorder: @negativeBorderColor;
 @formErrorBackground: @negativeBackgroundColor;
@@ -1561,6 +1558,3 @@
 
 @inputWarningPlaceholderColor: lighten(@formWarningColor, 40);
 @inputWarningPlaceholderFocusColor: lighten(@formWarningColor, 30);
-
-
-