From 13b8d93193feac6fd78ca1d16369b6579575958f Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Thu, 23 Jan 2014 16:30:06 -0500
Subject: [PATCH] Adds input, divider variables. Recoded header and segment
 variables

---
 src/collections/menu.less                     |  27 ++-
 src/elements/button.less                      | 101 ++++++-----
 src/elements/divider.less                     |  68 +++----
 src/elements/header.less                      | 106 +++++------
 src/elements/image.less                       |   6 +-
 src/elements/input.less                       | 169 +++++++-----------
 src/elements/segment.less                     |  61 ++++---
 src/themes/default/collections/menu.variables |  22 ++-
 src/themes/default/elements/button.variables  |  55 +++++-
 src/themes/default/elements/divider.overrides |   3 +
 src/themes/default/elements/divider.variables |  48 +++++
 src/themes/default/elements/header.variables  |  78 +++++++-
 src/themes/default/elements/image.variables   |  30 ++--
 src/themes/default/elements/input.overrides   |   3 +
 src/themes/default/elements/input.variables   | 102 +++++++++++
 src/themes/default/elements/segment.variables |  53 ++++--
 src/themes/github/collections/menu.variables  |  36 +++-
 src/themes/github/elements/button.variables   |   2 +
 src/themes/user/elements/divider.overrides    |   3 +
 src/themes/user/elements/divider.variables    |   3 +
 src/themes/user/elements/input.overrides      |   3 +
 src/themes/user/elements/input.variables      |   3 +
 22 files changed, 660 insertions(+), 322 deletions(-)
 create mode 100755 src/themes/default/elements/divider.overrides
 create mode 100755 src/themes/default/elements/divider.variables
 create mode 100755 src/themes/default/elements/input.overrides
 create mode 100755 src/themes/default/elements/input.variables
 create mode 100755 src/themes/user/elements/divider.overrides
 create mode 100755 src/themes/user/elements/divider.variables
 create mode 100755 src/themes/user/elements/input.overrides
 create mode 100755 src/themes/user/elements/input.variables

diff --git a/src/collections/menu.less b/src/collections/menu.less
index febd52691..7a487ed3d 100755
--- a/src/collections/menu.less
+++ b/src/collections/menu.less
@@ -56,14 +56,16 @@
   border-radius: 0px @borderRadius @borderRadius 0px;
 }
 .ui.menu .item {
+  background: @itemBackground;
   user-select: none;
-  -webkit-tap-highlight-color: transparent;
-  vertical-align: middle;
 
+  vertical-align: middle;
   line-height: 1;
   text-decoration: none;
   box-sizing: border-box;
   transition: @transition;
+
+  -webkit-tap-highlight-color: transparent;
 }
 
 /*--------------
@@ -196,6 +198,9 @@
 
   width: 100%;
 }
+.ui.menu:not(.vertical) .item > .icon.input .icon {
+  top: @inputIconOffset;
+}
 .ui.menu .item > .input input {
   padding-top: @inputVerticalPadding;
   padding-bottom: @inputVerticalPadding;
@@ -259,8 +264,9 @@
 ---------------*/
 
 .ui.menu .dropdown.item .menu {
+  background: @dropdownBackground;
   left: 1px;
-  margin: 0px;
+  margin: @dropdownMenuOffset 0px 0px;
   min-width: calc(100% - 1px);
   box-shadow: @dropdownBoxShadow;
 }
@@ -363,6 +369,7 @@
   box-shadow: 0em @activeBorderSize 0em inset;
 }
 .ui.vertical.menu .active.item {
+  background: @activeBackground;
   border-radius: 0em;
   box-shadow: @activeBorderSize 0em 0em inset;
 }
@@ -376,7 +383,6 @@
   border-radius: 0em @borderRadius @borderRadius 0em;
 }
 
-
 .ui.vertical.menu .active.item .menu .active.item {
   border-left: none;
 }
@@ -392,6 +398,7 @@
   Active Hover
 ---------------*/
 
+.ui.vertical.menu .active.item:hover,
 .ui.menu .active.item:hover {
   background-color: @activeHoverBackground;
 }
@@ -437,7 +444,12 @@
     Vertical
 ---------------*/
 
+.ui.vertical.menu {
+  background: @verticalBackground;
+}
+
 .ui.vertical.menu .item {
+  background: @verticalItemBackground;
   display: block;
   height: auto !important;
   border-top: none;
@@ -1076,6 +1088,9 @@
 .ui.labeled.icon.menu {
   text-align: center;
 }
+.ui.labeled.icon.menu > .item {
+  min-width: @labeledIconMinWidth;
+}
 .ui.labeled.icon.menu > .item > .icon {
   display: block;
   font-size: @labeledIconSize !important;
@@ -1547,10 +1562,10 @@
   background-color: @arrowActiveColor;
 }
 
-.ui.pointing.menu a.active.item:active:after {
+.ui.vertical.pointing.menu .item:hover:after {
   background-color: @arrowVerticalHoverColor;
 }
-.ui.vertical.pointing.menu .menu .active.item:after {
+.ui.vertical.pointing.menu .active.item:after {
   background-color: @arrowVerticalActiveColor;
 }
 
diff --git a/src/elements/button.less b/src/elements/button.less
index a9ee3ae10..f75edf3b8 100755
--- a/src/elements/button.less
+++ b/src/elements/button.less
@@ -53,13 +53,7 @@
 
   user-select: none;
   box-sizing: border-box;
-  transition:
-    opacity @transitionDuration @transitionEasing,
-    background-color @transitionDuration @transitionEasing,
-    color @transitionDuration @transitionEasing,
-    background @transitionDuration @transitionEasing,
-    box-shadow @transitionDuration @transitionEasing
-  ;
+  transition: @transition;
 }
 
 
@@ -134,7 +128,7 @@
   width: 100%;
   height: 100%;
   content: '';
-  background: transparent url("@{imagePath}/loader-mini.gif") no-repeat 50% 50%;
+  background: transparent url(@loaderPath) no-repeat 50% 50%;
 }
 .ui.labeled.icon.loading.button .icon {
   background-color: transparent;
@@ -265,6 +259,7 @@
   background-color: @primaryColor;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.primary.buttons .button:hover,
@@ -295,6 +290,7 @@
   background-color: @secondaryColor;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.secondary.buttons .button:hover,
@@ -325,6 +321,7 @@
   background-color: @facebookColor;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.facebook.button:hover {
@@ -343,6 +340,7 @@
   background-color: @twitterColor;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.twitter.button:hover {
@@ -361,6 +359,7 @@
   background-color: @googlePlusColor;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.google.plus.button:hover {
@@ -396,6 +395,7 @@
   background-color: @youtubeColor;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.youtube.button:hover {
@@ -414,6 +414,7 @@
   background-color: @instagramColor;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.instagram.button:hover {
@@ -432,6 +433,7 @@
   background-color: @pinterestColor;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.pinterest.button:hover {
@@ -449,6 +451,7 @@
 .ui.vk.button {
   background-color: #4D7198;
   color: @white;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.vk.button:hover {
@@ -521,8 +524,6 @@
   padding: @compactVerticalPadding @compactVerticalPadding ( @compactHorizontalPadding + @shadowOffset );
 }
 
-
-
 /*-------------------
         Sizes
 --------------------*/
@@ -581,20 +582,10 @@
   height: 1.45em;
 }
 
-/* loading */
-.ui.huge.loading.button:after {
-  background-image: url("@{imagePath}/loader-small.gif");
-}
-.ui.massive.buttons .loading.button:after,
-.ui.gigantic.buttons .loading.button:after,
-.ui.massive.loading.button:after,
-.ui.gigantic.loading.button:after {
-  background-image: url("@{imagePath}/loader-medium.gif");
-}
-
+/* Loading Resize */
 .ui.huge.loading.button:after,
 .ui.huge.loading.button.active:after {
-  background-image: url("@{imagePath}/loader-small.gif");
+  background-image: url(@hugeLoaderPath);
 }
 .ui.massive.buttons .loading.button:after,
 .ui.gigantic.buttons .loading.button:after,
@@ -604,7 +595,7 @@
 .ui.gigantic.buttons .loading.button.active:after,
 .ui.massive.loading.button.active:after,
 .ui.gigantic.loading.button.active:after {
-  background-image: url("@{imagePath}/loader-medium.gif");
+  background-image: url(@massiveLoaderPath);
 }
 
 /*--------------
@@ -814,7 +805,7 @@
 .ui.attached.button {
   display: block;
   margin: 0em;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
+  box-shadow: @attachedBoxShadow !important;
 }
 .ui.attached.top.button {
   border-radius: @borderRadius @borderRadius 0em 0em;
@@ -826,13 +817,13 @@
   display: inline-block;
   border-left: none;
 
-  padding-right: 0.75em;
+  padding-right: @attachedHorizontalPadding;
   text-align: right;
   border-radius: @borderRadius 0em 0em @borderRadius;
 }
 .ui.attached.right.button {
   display: inline-block;
-  padding-left: 0.75em;
+  padding-left: @attachedHorizontalPadding;
   text-align: left;
   border-radius: 0em @borderRadius @borderRadius 0em;
 }
@@ -846,8 +837,8 @@
 .ui.buttons .or {
   position: relative;
   float: left;
-  width: 0.3em;
-  height: 1.1em;
+  width: @orWidth;
+  height: @orHeight;
   z-index: 3;
 }
 .ui.buttons .or:before {
@@ -858,22 +849,21 @@
   background-color: @white;
   text-shadow: @invertedTextShadow;
 
-  margin-top: -0.1em;
-  margin-left: -0.9em;
+  margin-top: @orVerticalOffset;
+  margin-left: @orHorizontalOffset;
 
-  width: 1.8em;
-  height: 1.8em;
+  width: @orCircleSize;
+  height: @orCircleSize;
 
-  line-height: 1.55;
+  line-height: @orLineHeight;
   color: @lightTextColor;
-  font-style: normal;
-  font-weight: normal;
+
+  font-style: @orTextStyle;
+  font-weight: @orTextWeight;
   text-align: center;
 
   border-radius: 500em;
-
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
-
+  box-shadow: @orBoxShadow;
   box-sizing: border-box;
 }
 .ui.buttons .or:after {
@@ -881,14 +871,12 @@
   top: 0em;
   left: 0em;
   content: ' ';
-
-  width: 0.3em;
-  height: 1.7em;
-
   background-color: transparent;
-  border-top: 0.5em solid @white;
-  border-bottom: 0.5em solid @white;
 
+  width: @orWidth;
+  height: (@orHeight + (@orSpacerHeight * 2));
+  border-top: @orSpacerHeight solid @orSpacerColor;
+  border-bottom: @orSpacerHeight solid @orSpacerColor;
 }
 
 /* Fluid Or */
@@ -918,7 +906,7 @@
 
 /* Bottom Side */
 .bottom.attached.ui.buttons {
-  margin-top: -1px;
+  margin-top: @attachedOffset;
   border-radius: 0em 0em @borderRadius @borderRadius;
 }
 .bottom.attached.ui.buttons .button:first-child {
@@ -930,29 +918,29 @@
 
 /* Left Side */
 .left.attached.ui.buttons {
-  margin-left: -1px;
+  margin-left: @attachedOffset;
   border-radius: 0em @borderRadius @borderRadius 0em;
 }
 .left.attached.ui.buttons .button:first-child {
-  margin-left: -1px;
+  margin-left: @attachedOffset;
   border-radius: 0em @borderRadius 0em 0em;
 }
 .left.attached.ui.buttons .button:last-child {
-  margin-left: -1px;
+  margin-left: @attachedOffset;
   border-radius: 0em 0em @borderRadius 0em;
 }
 /* Right Side */
 .right.attached.ui.buttons,
 .right.attached.ui.buttons .button {
-  margin-right: -1px;
+  margin-right: @attachedOffset;
   border-radius: @borderRadius 0em 0em @borderRadius;
 }
 .right.attached.ui.buttons .button:first-child {
-  margin-left: -1px;
+  margin-left: @attachedOffset;
   border-radius: @borderRadius 0em 0em 0em;
 }
 .right.attached.ui.buttons .button:last-child {
-  margin-left: -1px;
+  margin-left: @attachedOffset;
   border-radius: 0em 0em 0em @borderRadius;
 }
 
@@ -1074,6 +1062,7 @@
   background-color: @black;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.black.buttons .button:hover,
@@ -1103,6 +1092,7 @@
   background-color: @blue;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.blue.buttons .button:hover,
@@ -1132,6 +1122,7 @@
   background-color: @green;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.green.buttons .button:hover,
@@ -1161,6 +1152,7 @@
   background-color: @orange;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.orange.buttons .button:hover,
@@ -1190,6 +1182,7 @@
   background-color: @pink;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.pink.buttons .button:hover,
@@ -1219,6 +1212,7 @@
   background-color: @purple;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.purple.buttons .button:hover,
@@ -1248,6 +1242,7 @@
   background-color: @red;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.red.buttons .button:hover,
@@ -1277,6 +1272,7 @@
   background-color: @teal;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.teal.buttons .button:hover,
@@ -1306,6 +1302,7 @@
   background-color: @yellow;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.yellow.buttons .button:hover,
@@ -1338,6 +1335,7 @@
   background-color: @positiveColor !important;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.positive.buttons .button:hover,
@@ -1372,6 +1370,7 @@
   background-color: @negativeColor !important;
   color: @invertedTextColor;
   text-shadow: @invertedTextShadow;
+  background-image: @coloredBackgroundImage;
   box-shadow: @coloredBoxShadow;
 }
 .ui.negative.buttons .button:hover,
diff --git a/src/elements/divider.less b/src/elements/divider.less
index 45d27b01c..1a2c5cb28 100755
--- a/src/elements/divider.less
+++ b/src/elements/divider.less
@@ -9,6 +9,15 @@
  *
  */
 
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'divider';
+
+@import '../semantic.config';
+
 
 /*******************************
             Divider
@@ -17,20 +26,14 @@
 .ui.divider {
   margin: 1rem 0rem;
 
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
+  border-top: @shadowWidth solid @shadowColor;
+  border-bottom: @highlightWidth solid @highlightColor;
 
   line-height: 1;
   height: 0em;
 
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
   box-sizing: border-box;
 
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
@@ -44,12 +47,12 @@
   margin: 0em;
   background-color: transparent;
 
-  font-size: 0.875rem;
+  font-size: @medium;
   font-weight: bold;
   text-align: center;
   text-transform: uppercase;
 
-  color: rgba(0, 0, 0, 0.8);
+  color: @dividerTextColor;
 }
 
 
@@ -63,9 +66,9 @@
   top: 50%;
   left: 50%;
 
-  margin: 0% 0% 0% -3%;
+  margin: 0% 0% 0% (@verticalDividerWidth / 2);
 
-  width: 6%;
+  width: @verticalDividerWidth;
   height: 50%;
 
   line-height: 0;
@@ -79,8 +82,8 @@
   content: " ";
   z-index: 3;
 
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  border-right: 1px solid rgba(255, 255, 255, 0.8);
+  border-left: @shadowWidth solid @shadowColor;
+  border-right: @highlightWidth solid @highlightColor;
 
   width: 0%;
   height: 80%;
@@ -89,7 +92,6 @@
 .ui.vertical.divider:before {
   top: -100%;
 }
-
 .ui.vertical.divider:after {
   top: auto;
   bottom: 0px;
@@ -104,7 +106,7 @@
   top: 0%;
   left: 0%;
 
-  margin: 1rem 1.5rem;
+  margin: @horizontalDividerVerticalMargin @horizontalDividerHorizontalMargin;
   height: auto;
   padding: 0em;
 
@@ -115,25 +117,25 @@
 .ui.horizontal.divider:after {
   position: absolute;
   top: 50%;
-  content: " ";
+  content: '';
   z-index: 3;
 
   width: 50%;
   top: 50%;
   height: 0%;
 
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.8);
+  border-top: @shadowWidth solid @shadowColor;
+  border-bottom: @highlightWidth solid @highlightColor;
 }
 
 .ui.horizontal.divider:before {
   left: 0%;
-  margin-left: -1.5rem;
+  margin-left: -@horizontalDividerHorizontalMargin;
 }
 .ui.horizontal.divider:after {
   left: auto;
   right: 0%;
-  margin-right: -1.5rem;
+  margin-right: -@horizontalDividerHorizontalMargin;
 }
 
 /*--------------
@@ -141,17 +143,15 @@
 ---------------*/
 
 .ui.divider > .icon {
-  margin: 0em;
-  font-size: 1rem;
+  margin: @dividerIconMargin;
+  font-size: @dividerIconSize;
   vertical-align: middle;
 }
 
-
 /*******************************
           Variations
 *******************************/
 
-
 /*--------------
     Hidden
 ---------------*/
@@ -165,20 +165,20 @@
 ---------------*/
 
 .ui.divider.inverted {
-  color: rgba(255, 255, 255, 1);
+  color: @invertedTextColor;
 }
 .ui.vertical.inverted.divider,
 .ui.horizontal.inverted.divider {
-  color: rgba(255, 255, 255, 0.9);
+  color: @directionalTextColor;
 }
 .ui.divider.inverted,
 .ui.divider.inverted:after,
 .ui.divider.inverted:before {
-  border-top-color: rgba(0, 0, 0, 0.15);
-  border-bottom-color: rgba(255, 255, 255, 0.15);
+  border-top-color: @invertedShadowColor;
+  border-bottom-color: @invertedHighlightColor;
 
-  border-left-color: rgba(0, 0, 0, 0.15);
-  border-right-color: rgba(255, 255, 255, 0.15);
+  border-left-color: @invertedShadowColor;
+  border-right-color: @invertedHighlightColor;
 }
 
 /*--------------
@@ -202,6 +202,8 @@
 ---------------*/
 
 .ui.section.divider {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+  margin-top: @sectionMargin;
+  margin-bottom: @sectionMargin;
 }
+
+.loadUIOverrides() !important;
diff --git a/src/elements/header.less b/src/elements/header.less
index 13f995145..5964efee4 100755
--- a/src/elements/header.less
+++ b/src/elements/header.less
@@ -26,12 +26,10 @@
 .ui.header {
   border: none;
   font-family: @fontFamily;
-  margin: 1em 0em 1rem;
-  padding: 0em;
-
-  font-size: 1.33em;
+  margin: @topMargin 0em @bottomMargin;
+  padding: @verticalPadding @horizontalPadding;
   font-weight: bold;
-  line-height: 1.33;
+  line-height: @lineHeight;
 }
 
 .ui.header .sub.header {
@@ -40,26 +38,26 @@
   margin: 0em;
   padding: 0em;
 
-  line-height: 1.2;
-  color: rgba(0, 0, 0, 0.5);
+  line-height: @subHeaderLineHeight;
+  color: @subHeaderColor;
 }
 
 .ui.header .icon {
   display: table-cell;
   vertical-align: middle;
-  padding-right: 0.5em;
+  padding-right: (@iconMargin / 2);
 }
 .ui.header .icon:only-child {
   display: inline-block;
-  vertical-align: baseline;
+  vertical-align: @iconAlignment;
 }
 
 .ui.header .content {
   display: inline-block;
-  vertical-align: top;
+  vertical-align: @contentAlignment;
 }
 .ui.header .icon + .content {
-  padding-left: 0.5em;
+  padding-left: (@iconMargin / 2);
   display: table-cell;
 }
 
@@ -71,7 +69,7 @@
   margin-bottom: 0em;
 }
 .ui.header + p {
-  margin-top: 0em;
+  margin-top: @precedingParagraphMargin;
 }
 
 
@@ -81,45 +79,40 @@
 
 h1.ui.header {
   min-height: 1rem;
-  line-height: 1.33;
-  font-size: 2rem;
+  font-size: @h1;
 }
 h2.ui.header {
-  line-height: 1.33;
-  font-size: 1.75rem;
+  font-size: @h2;
 }
 h3.ui.header {
-  line-height: 1.33;
-  font-size: 1.33rem;
+  font-size: @h3;
 }
 h4.ui.header {
-  line-height: 1.33;
-  font-size: 1.1rem;
+  font-size: @h4;
 }
 h5.ui.header {
-  line-height: 1.2;
-  font-size: 1rem;
+  font-size: @h5;
 }
 
 /*--------------
  Content Heading
 ---------------*/
 
-.ui.huge.header {
-  min-height: 1em;
-  font-size: 2em;
+.ui.tiny.header {
+  font-size: @tiny;
 }
-.ui.large.header {
-  font-size: 1.75em;
+.ui.small.header {
+  font-size: @small;
 }
 .ui.medium.header {
-  font-size: 1.33em;
+  font-size: @medium;
 }
-.ui.small.header {
-  font-size: 1.1em;
+.ui.large.header {
+  font-size: @large;
 }
-.ui.tiny.header {
-  font-size: 1em;
+.ui.huge.header {
+  min-height: 1em;
+  font-size: @huge;
 }
 
 
@@ -127,7 +120,6 @@ h5.ui.header {
             Types
 *******************************/
 
-
 /*-------------------
         Icon
 --------------------*/
@@ -139,16 +131,18 @@ h5.ui.header {
 .ui.icon.header .icon {
   float: none;
   display: block;
-  font-size: 3em;
-  margin: 0em auto 0.2em;
+  font-size: @iconHeaderSize;
+  margin: 0em auto @iconHeaderMargin;
   padding: 0em;
 }
 .ui.icon.header .content {
   display: block;
 }
-.ui.icon.header .circular.icon,
+.ui.icon.header .circular.icon {
+  font-size: @circularHeaderIconSize;
+}
 .ui.icon.header .square.icon {
-  font-size: 2em;
+  font-size: @squareHeaderIconSize;
 }
 .ui.block.icon.header .icon {
   margin-bottom: 0em;
@@ -220,10 +214,10 @@ h5.ui.header {
 --------------------*/
 
 .ui.inverted.header {
-  color: @white;
+  color: @invertedColor;
 }
 .ui.inverted.header .sub.header {
-  color: rgba(255, 255, 255, 0.85);
+  color: @invertedSubHeaderColor;
 }
 
 
@@ -290,12 +284,12 @@ h5.ui.header {
 .ui.left.floated.header {
   float: left;
   margin-top: 0em;
-  margin-right: 0.5em;
+  margin-right: @floatedMargin;
 }
 .ui.right.floated.header {
   float: right;
   margin-top: 0em;
-  margin-left: 0.5em;
+  margin-left: @floatedMargin;
 }
 
 /*-------------------
@@ -312,14 +306,14 @@ h5.ui.header {
 --------------------*/
 
 .ui.dividing.header {
-  padding-bottom: 0.2rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding-bottom: @dividedBorderPadding;
+  border-bottom: @dividedBorder;
 }
 .ui.dividing.header .sub.header {
-  padding-bottom: 0.5em;
+  padding-bottom: @dividedSubHeaderPadding;
 }
 .ui.dividing.header .icon {
-  margin-bottom: 0.2em;
+  margin-bottom: @dividedIconPadding;
 }
 
 
@@ -328,8 +322,8 @@ h5.ui.header {
 --------------------*/
 
 .ui.block.header {
-  background-color: rgba(0, 0, 0, 0.05);
-  padding: 0.5em 1em;
+  background: @blockBackground;
+  padding: @blockVerticalPadding @blockHorizontalPadding;
 }
 
 /*-------------------
@@ -337,21 +331,29 @@ h5.ui.header {
 --------------------*/
 
 .ui.attached.header {
-  background-color: #F0F0F0;
+  background: @attachedColor;
   margin: 0em;
-  padding: 0.75rem 1rem;
-  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+  padding: @attachedVerticalPadding @attachedVerticalPadding;
+  box-shadow: @attachedBoxShadow;
 }
 .ui.attached:not(.top, .bottom) {
   margin: 0em;
 }
 .ui.top.attached.header {
   margin-bottom: 0em;
-  border-radius: 0.3125em 0.3125em 0em 0em;
+  border-radius: @attachedBorderRadius @attachedBorderRadius 0em 0em;
 }
 .ui.bottom.attached.header {
   margin-top: 0em;
-  border-radius: 0em 0em 0.3125em 0.3125em;
+  border-radius: 0em 0em @attachedBorderRadius @attachedBorderRadius;
+}
+
+/*-------------------
+        Sizing
+--------------------*/
+
+.ui.header {
+  font-size: @medium;
 }
 
 .loadUIOverrides() !important;
\ No newline at end of file
diff --git a/src/elements/image.less b/src/elements/image.less
index 482542138..2dc1ab2e5 100755
--- a/src/elements/image.less
+++ b/src/elements/image.less
@@ -103,7 +103,7 @@ img.ui.image {
 .ui.avatar.images img,
 .ui.avatar.image img,
 .ui.avatar.image {
-  margin-right: @imageSpacing;
+  margin-right: @avatarMargin;
 
   display: inline-block;
   width: @avatarSize;
@@ -193,13 +193,13 @@ img.ui.image {
 
 .ui.images {
   font-size: 0em;
-  margin: 0em -@imageSpacing 0rem;
+  margin: 0em -@imageHorizontalMargin 0rem;
 }
 
 .ui.images .image,
 .ui.images img {
   display: inline-block;
-  margin: 0em @imageSpacing (@imageSpacing * 2);
+  margin: 0em @imageHorizontalMargin @imageVerticalMargin;
 }
 
 .loadUIOverrides() !important;
\ No newline at end of file
diff --git a/src/elements/input.less b/src/elements/input.less
index d8ca339a7..0c973c956 100755
--- a/src/elements/input.less
+++ b/src/elements/input.less
@@ -9,6 +9,15 @@
  *
  */
 
+/*******************************
+            Theme
+*******************************/
+
+@type    : 'element';
+@element : 'input';
+
+@import '../semantic.config';
+
 
 /*******************************
            Standard
@@ -22,59 +31,26 @@
 .ui.input {
   display: inline-block;
   position: relative;
-
-  color: rgba(0, 0, 0, 0.7);
+  color: @inputColor;
 }
 .ui.input input {
   width: 100%;
-  font-family: "Helvetica Neue", "Helvetica", Arial;
+  font-family: @fontFamily;
 
   margin: 0em;
-  padding: 0.85em 1.2em;
-  font-size: 0.875em;
+  padding: @verticalPadding @horizontalPadding;
 
-  background-color: #FFFFFF;
-  border: 1px solid rgba(0, 0, 0, 0.15);
+  background: @background;
+  border: @border;
   outline: none;
+  color: @inputColor;
+  border-radius: @borderRadius;
+  transition: @transition;
 
-  color: rgba(0, 0, 0, 0.7);
-
-  -webkit-border-radius: 0.3125em;
-  -moz-border-radius: 0.3125em;
-  border-radius: 0.3125em;
-
-  -webkit-transition:
-    background-color 0.3s ease-out,
-    box-shadow 0.2s ease,
-    border-color 0.2s ease
-  ;
-  -moz-transition:
-    background-color 0.3s ease-out,
-    box-shadow 0.2s ease,
-    border-color 0.2s ease
-  ;
-  -o-transition:
-    background-color 0.3s ease-out,
-    box-shadow 0.2s ease,
-    border-color 0.2s ease
-  ;
-  -ms-transition:
-    background-color 0.3s ease-out,
-    box-shadow 0.2s ease,
-    border-color 0.2s ease
-  ;
-  transition:
-    background-color 0.3s ease-out,
-    box-shadow 0.2s ease,
-    border-color 0.2s ease
-  ;
-
-  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
+  box-shadow: @boxShadow;
 
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
   box-sizing: border-box;
+  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);
 }
 
 
@@ -84,10 +60,10 @@
 
 /* browsers require these rules separate */
 .ui.input::-webkit-input-placeholder {
-  color: #BBBBBB;
+  color: @placeholderColor;
 }
 .ui.input::-moz-placeholder {
-  color: #BBBBBB;
+  color: @placeholderColor;
 }
 
 
@@ -101,8 +77,10 @@
 
 .ui.input input:active,
 .ui.input.down input {
-  border-color: rgba(0, 0, 0, 0.3);
-  background-color: #FAFAFA;
+  border-color: @downBorderColor;
+  background: @downBackground;
+  color: @downColor;
+  box-shadow: @downBoxShadow;
 }
 
 /*--------------------
@@ -110,7 +88,7 @@
 ---------------------*/
 
 .ui.loading.input > .icon {
-  background: url(../images/loader-mini.gif) no-repeat 50% 50%;
+  background: url(@loadingImage) no-repeat 50% 50%;
 }
 .ui.loading.input > .icon:before,
 .ui.loading.input > .icon:after {
@@ -123,16 +101,18 @@
 
 .ui.input.focus input,
 .ui.input input:focus  {
-  border-color: rgba(0, 0, 0, 0.2);
-  color: rgba(0, 0, 0, 0.85);
+  border-color: @focusBorderColor;
+  background: @focusBackground;
+  color: @focusColor;
+  box-shadow: @focusBoxShadow;
 }
 .ui.input.focus input input::-webkit-input-placeholder,
 .ui.input input:focus input::-webkit-input-placeholder {
-  color: #AAAAAA;
+  color: @placeholderFocusColor;
 }
 .ui.input.focus input input::-moz-placeholder,
 .ui.input input:focus input::-moz-placeholder {
-  color: #AAAAAA;
+  color: @placeholderFocusColor;
 }
 
 
@@ -141,30 +121,32 @@
 ---------------------*/
 
 .ui.input.error input {
-  background-color: #FFFAFA;
-  border-color: #E7BEBE;
-  color: #D95C5C;
+  background-color: @errorBackground;
+  border-color: @errorBorder;
+  color: @errorColor;
+  box-shadow: @errorBoxShadow;
 }
 
 /* Error Placeholder */
 .ui.input.error input ::-webkit-input-placeholder {
-  color: rgba(255, 80, 80, 0.4);
+  color: @placeholderErrorColor;
 }
 .ui.input.error input ::-moz-placeholder {
-  color: rgba(255, 80, 80, 0.4);
+  color: @placeholderErrorColor;
 }
+
+/* Focused Error Placeholder */
 .ui.input.error input :focus::-webkit-input-placeholder {
-  color: rgba(255, 80, 80, 0.7);
+  color: @placeholderErrorFocusColor;
 }
 .ui.input.error input :focus::-moz-placeholder {
-  color: rgba(255, 80, 80, 0.7);
+  color: @placeholderErrorFocusColor;
 }
 
 /*******************************
            Variations
 *******************************/
 
-
 /*--------------------
       Transparent
 ---------------------*/
@@ -172,9 +154,10 @@
 .ui.transparent.input input {
   border: none;
   background-color: transparent;
+  padding-left: 0em;
+  padding-right: 0em;
 }
 
-
 /*--------------------
          Icon
 ---------------------*/
@@ -182,60 +165,45 @@
 .ui.icon.input > .icon {
   cursor: default;
   position: absolute;
-  opacity: 0.5;
+  opacity: @iconOpacity;
   top: 0px;
   right: 0px;
 
   margin: 0em;
-
-  width: 2.6em;
+  width: @inputHeight;
   height: 100%;
-  padding-top: 0.82em;
+  padding-top: @iconOffset;
 
   text-align: center;
 
-  -webkit-border-radius: 0em 0.3125em 0.3125em 0em;
-  -moz-border-radius: 0em 0.3125em 0.3125em 0em;
-  border-radius: 0em 0.3125em 0.3125em 0em;
-
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
+  border-radius: 0em @borderRadius @borderRadius 0em;
   box-sizing: border-box;
-
-  -webkit-transition: opacity 0.3s ease-out;
-  -moz-transition: opacity 0.3s ease-out;
-  -o-transition: opacity 0.3s ease-out;
-  -ms-transition: opacity 0.3s ease-out;
-  transition: opacity 0.3s ease-out;
+  transition: @iconTransition;
 }
 .ui.icon.input > .link.icon {
   cursor: pointer;
 }
 .ui.icon.input input {
-  padding-right: 3em !important;
+  padding-right: @iconMargin !important;
 }
 .ui.icon.input > .circular.icon {
-  top: 0.35em;
-  right: 0.5em;
+  top: @circularIconVerticalOffset;
+  right: @circularIconHorizontalOffset;
 }
 
-/* Left Side */
+/* Left Icon Input */
 .ui.left.icon.input > .icon {
   right: auto;
-  left: 1px;
-
-  -webkit-border-radius: 0.3125em 0em 0em 0.3125em;
-  -moz-border-radius: 0.3125em 0em 0em 0.3125em;
-  border-radius: 0.3125em 0em 0em 0.3125em;
+  left: @borderWidth;
+  border-radius: @borderRadius 0em 0em @borderRadius;
 }
 .ui.left.icon.input > .circular.icon {
   right: auto;
-  left: 0.5em;
+  left: @circularIconHorizontalOffset;
 }
 .ui.left.icon.input > input {
-  padding-left: 3em !important;
-  padding-right: 1.2em !important;
+  padding-left: @iconMargin !important;
+  padding-right: @horizontalPadding !important;
 }
 
 /* Focus */
@@ -248,16 +216,13 @@
 ---------------------*/
 
 .ui.labeled.input .corner.label {
-  top: 1px;
-  right: 1px;
-  font-size: 0.55em;
-
-  -webkit-border-top-right-radius: 0.3125em;
-  -moz-border-top-right-radius: 0.3125em;
-  border-top-right-radius: 0.3125em;
+  top: @borderWidth;
+  right: @borderWidth;
+  font-size: @labelSize;
+  border-top-right-radius: @borderRadius;
 }
 .ui.labeled.input .corner.label > .icon {
-  margin: 0.4em 0em 0em 2em;
+  margin: @labelIconPosition;
 }
 .ui.labeled.input input {
   padding-right: 2.5em !important;
@@ -265,10 +230,10 @@
 
 /* Spacing with corner label */
 .ui.labeled.icon.input:not(.left) > input {
-  padding-right: 3.25em !important;
+  padding-right: @labelMargin !important;
 }
 .ui.labeled.icon.input:not(.left) > .icon {
-  margin-right: 1.25em;
+  margin-right: @labelIconMargin;
 }
 
 
@@ -341,4 +306,6 @@
 }
 .ui.massive.input {
   font-size: 1.5rem;
-}
\ No newline at end of file
+}
+
+.loadUIOverrides() !important;
\ No newline at end of file
diff --git a/src/elements/segment.less b/src/elements/segment.less
index e6bd09b1f..b0718461a 100755
--- a/src/elements/segment.less
+++ b/src/elements/segment.less
@@ -25,9 +25,9 @@
 
 .ui.segment {
   position: relative;
-  background-color: #FFFFFF;
+  background-color: @white;
 
-  box-shadow: 0px 0px 0px 1px @borderColor;
+  box-shadow: @boxShadow;
 
   margin: @margin 0em;
   padding: @verticalPadding @horizontalPadding;
@@ -117,8 +117,8 @@
 --------------------*/
 
 .ui.piled.segment {
-  margin: (2 * @margin) 0em;
-  box-shadow: 0px 0px 1px 1px @borderColor;
+  margin: @piledMargin 0em;
+  box-shadow: @piledBoxShadow
 }
 .ui.piled.segment:first-child {
   margin-top: 0em;
@@ -128,7 +128,7 @@
 }
 .ui.piled.segment:after,
 .ui.piled.segment:before {
-  background-color: #FFFFFF;
+  background-color: @white;
   visibility: visible;
   content: "";
   display: block;
@@ -136,15 +136,15 @@
   left: -1px;
   position: absolute;
   width: 100%;
-  box-shadow: 0px 0px 1px 1px @borderColor;
+  box-shadow: @piledBoxShadow
 }
 .ui.piled.segment:after {
-  transform: rotate(1.2deg);
+  transform: rotate(@piledDegrees);
   top: 0;
   z-index: -1;
 }
 .ui.piled.segment:before {
-  transform: rotate(-1.2deg);
+  transform: rotate(-@piledDegrees);
   top: 0;
   z-index: -2;
 }
@@ -154,7 +154,7 @@
 --------------------*/
 
 .ui.stacked.segment {
-  padding-bottom: @verticalPadding + (0.7em);
+  padding-bottom: @stackedPadding;
 }
 .ui.stacked.segment:after,
 .ui.stacked.segment:before {
@@ -167,7 +167,7 @@
   background-color: @subtleTransparentBlack;
 
   width: 100%;
-  height: 5px;
+  height: @stackedHeight;
   visibility: visible;
 }
 .ui.stacked.segment:before {
@@ -187,7 +187,7 @@
 
 .ui.circular.segment {
   display: table-cell;
-  padding: 2em;
+  padding: @circularPadding;
   text-align: center;
   vertical-align: middle;
   border-radius: 500em;
@@ -198,7 +198,7 @@
 --------------------*/
 
 .ui.raised.segment {
-  box-shadow: 0px 1px 2px 1px @borderColor;
+  box-shadow: @raisedBoxShadow;
 }
 
 
@@ -244,7 +244,6 @@
   padding: 0em;
 }
 
-
 /*-------------------
        Colors
 --------------------*/
@@ -284,39 +283,39 @@
 .ui.inverted.segment,
 .ui.inverted.black.segment {
   background-color: @black !important;
-  color: #FFFFFF !important;
+  color: @white !important;
 }
 .ui.inverted.blue.segment {
   background-color: @blue !important;
-  color: #FFFFFF !important;
+  color: @white !important;
 }
 .ui.inverted.green.segment {
   background-color: @green !important;
-  color: #FFFFFF !important;
+  color: @white !important;
 }
 .ui.inverted.orange.segment {
   background-color: @orange !important;
-  color: #FFFFFF !important;
+  color: @white !important;
 }
 .ui.inverted.pink.segment {
   background-color: @pink !important;
-  color: #FFFFFF !important;
+  color: @white !important;
 }
 .ui.inverted.purple.segment {
   background-color: @purple !important;
-  color: #FFFFFF !important;
+  color: @white !important;
 }
 .ui.inverted.red.segment {
   background-color: @red !important;
-  color: #FFFFFF !important;
+  color: @white !important;
 }
 .ui.inverted.teal.segment {
   background-color: @teal !important;
-  color: #FFFFFF !important;
+  color: @white !important;
 }
 .ui.inverted.yellow.segment {
   background-color: @yellow !important;
-  color: #FFFFFF !important;
+  color: @white !important;
 }
 
 /*-------------------
@@ -361,15 +360,15 @@
   box-shadow: none;
 }
 .ui.inverted.segment .segment {
-  color: rgba(0, 0, 0, 0.7);
+  color: @textColor;
 }
 .ui.inverted.segment .inverted.segment {
-  color: #FFFFFF;
+  color: @white;
 }
 .ui.inverted.segment,
 .ui.primary.inverted.segment {
   background-color: @black;
-  color: #FFFFFF;
+  color: @white;
 }
 
 /*-------------------
@@ -377,24 +376,24 @@
 --------------------*/
 
 .ui.secondary.segment {
-  background-color: @secondaryColor;
+  background-color: @secondaryBackground;
   color: @textColor;
 }
 
 .ui.tertiary.segment {
-  background-color: @tertiaryColor;
+  background-color: @tertiaryBackground;
   color: @lightTextColor;
 }
 
 .ui.secondary.inverted.segment {
   background-color: @black;
- background-image: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
-  color: @offWhite;
+  background-image: @secondaryInvertedBackground;
+  color: @secondaryInvertedColor;
 }
 .ui.tertiary.inverted.segment {
   background-color: @black;
-  background-image: linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
-  color: @darkWhite;
+  background-image: @tertiaryInvertedColor;
+  color: @tertiaryInvertedColor;
 }
 
 
diff --git a/src/themes/default/collections/menu.variables b/src/themes/default/collections/menu.variables
index 7c41d258a..ad40e4778 100755
--- a/src/themes/default/collections/menu.variables
+++ b/src/themes/default/collections/menu.variables
@@ -15,6 +15,8 @@
 @horizontalPadding: 0.95em;
 
 @background: #FFFFFF;
+@itemBackground: none;
+
 @fontWeight: normal;
 @boxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 
@@ -33,11 +35,6 @@
   rgba(0, 0, 0, 0.1) 50%,
   rgba(0, 0, 0, 0.05) 100%)
 ;
-@verticalDividerBackground: linear-gradient(to right,
-  rgba(0, 0, 0, 0.03) 0%,
-  rgba(0, 0, 0, 0.1) 1.5em,
-  rgba(0, 0, 0, 0.03) 100%)
-;
 
 @headerBackground: rgba(0, 0, 0, 0.04);
 @headerWeight: bold;
@@ -90,7 +87,7 @@
 @inputVerticalMargin: -0.8em;
 @inputOffset: -0.05em;
 @inputVerticalPadding: 0.5em;
-@inputIconOffset: 0.25em;
+@inputIconOffset: -0.3em;
 
 @smallInputOffset: 0em;
 @smallInputVerticalPadding: 0.4em;
@@ -108,6 +105,7 @@
 @labelHorizontalPadding: 0.8em;
 
 /* Dropdown */
+@dropdownBackground: #FFFFFF;
 @dropdownMenuOffset: 1px;
 @dropdownPointingDistance: 0.75em;
 @dropdownTextColor: @textColor;
@@ -152,6 +150,17 @@
      Types
 ---------------*/
 
+/* Vertical */
+@verticalBackground: #FFFFFF;
+@verticalItemBackground: none;
+
+@verticalDividerBackground: linear-gradient(to right,
+  rgba(0, 0, 0, 0.03) 0%,
+  rgba(0, 0, 0, 0.1) 1.5em,
+  rgba(0, 0, 0, 0.03) 100%)
+;
+
+
 /* Secondary */
 @secondaryBackground: none;
 @secondaryTransition: color 0.2s ease;
@@ -221,6 +230,7 @@
 
 /* Labeled Icon */
 @labeledIconSize: 1.5em;
+@labeledIconMinWidth: 6em;
 @labeledIconTextMargin: 0.3em;
 
 /* Text */
diff --git a/src/themes/default/elements/button.variables b/src/themes/default/elements/button.variables
index 03220a0b9..26a244cdc 100755
--- a/src/themes/default/elements/button.variables
+++ b/src/themes/default/elements/button.variables
@@ -27,30 +27,44 @@
 
 @backgroundColor: #FAFAFA;
 @backgroundImage: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
-
 @boxShadow:
   0px 0px 0px 1px rgba(0, 0, 0, 0.08) inset,
   0px -@shadowDistance 0px 0px rgba(0, 0, 0, 0.1) inset
 ;
-@coloredBoxShadow: none;
+
+/* transitions */
+@transition: 
+  opacity @transitionDuration @transitionEasing,
+  background-color @transitionDuration @transitionEasing,
+  color @transitionDuration @transitionEasing,
+  background @transitionDuration @transitionEasing,
+  box-shadow @transitionDuration @transitionEasing
+;
 
 /* Padding */
 @verticalPadding: 0.8em;
 @horizontalPadding: 1.5em;
 
-@compactVerticalPadding: (@verticalPadding * 0.75);
-@compactHorizontalPadding: (@horizontalPadding * 0.75);
 
 /* Shadow */
 @shadowDistance: 0em;
 @shadowOffset: (@shadowDistance / 2);
 
+/* Icon */
+@iconMargin: 0.6em;
+
+/* Loader */
+@loaderPath: "@{imagePath}/loader-mini.gif";
+@hugeLoaderPath: "@{imagePath}/loader-small.gif";
+@massiveLoaderPath: "@{imagePath}/loader-medium.gif";
+
 /*-------------------
-       Group
+        Group
 --------------------*/
 
 @verticalBoxShadow: 0px 0px 0px 1px @borderColor inset;
 
+
 /*-------------------
         States
 --------------------*/
@@ -73,8 +87,24 @@
         Types
 --------------------*/
 
+/* Or */
+@orWidth: 0.3em;
+@orHeight: 1.1em;
+
+@orVerticalOffset: -0.1em;
+@orHorizontalOffset: -0.9em;
+
+@orTextStyle: normal;
+@orTextWeight: bold;
+
+@orCircleSize: 1.8em;
+@orLineHeight: 1.55;
+@orBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+
+@orSpacerHeight: 0.5em;
+@orSpacerColor: @white;
+
 /* Icon */
-@iconMargin: 0.6em;
 @iconHoverOpacity: 0.85;
 @iconButtonOpacity: 0.9;
 
@@ -108,6 +138,19 @@
       Variations
 --------------------*/
 
+/* Colors */
+@coloredBackgroundImage: none;
+@coloredBoxShadow: none;
+
+/* Compact */
+@compactVerticalPadding: (@verticalPadding * 0.75);
+@compactHorizontalPadding: (@horizontalPadding * 0.75);
+
+/* Attached */
+@attachedOffset: -1px;
+@attachedBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+@attachedHorizontalPadding: 0.75em;
+
 /* Floated */
 @floatedMargin: 0.25em;
 
diff --git a/src/themes/default/elements/divider.overrides b/src/themes/default/elements/divider.overrides
new file mode 100755
index 000000000..c5c53367f
--- /dev/null
+++ b/src/themes/default/elements/divider.overrides
@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/
diff --git a/src/themes/default/elements/divider.variables b/src/themes/default/elements/divider.variables
new file mode 100755
index 000000000..5c90f5f3d
--- /dev/null
+++ b/src/themes/default/elements/divider.variables
@@ -0,0 +1,48 @@
+/*******************************
+            Standard
+*******************************/
+
+/*-------------------
+       Divider 
+--------------------*/
+
+@highlightWidth: 1px;
+@highlightColor: rgba(255, 255, 255, 0.8);
+
+@shadowWidth: 1px;
+@shadowColor: rgba(0, 0, 0, 0.1);
+
+@dividerTextColor: @textColor;
+
+/*-------------------
+       Coupling 
+--------------------*/
+
+/* Icon */
+
+@dividerIconSize: 1rem;
+@dividerIconMargin: 0rem;
+
+
+/*******************************
+         Variations
+*******************************/
+
+/* Horizontal / Vertical */
+@directionalFontSize: 0.875rem;
+@directionalTextColor: @invertedLightTextColor;
+
+@horizontalDividerVerticalMargin: 1rem;
+@horizontalDividerHorizontalMargin: 1.5rem;
+
+@verticalDividerWidth: 6%;
+
+/* Inverted */
+@invertedTextColor: @white;
+
+@invertedHighlightColor: rgba(255, 255, 255, 0.15);
+@invertedShadowColor: rgba(0, 0, 0, 0.15);
+
+/* Section */
+@sectionMargin: 2rem;
+
diff --git a/src/themes/default/elements/header.variables b/src/themes/default/elements/header.variables
index b9fd122eb..4769b2eb0 100755
--- a/src/themes/default/elements/header.variables
+++ b/src/themes/default/elements/header.variables
@@ -10,18 +10,86 @@
 // @teal
 // @black
 
+/*******************************
+            Standard
+*******************************/
+
 /*-------------------
-   Modified Globals
+       Header 
 --------------------*/
 
 @fontFamily : Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;
 
+@topMargin: 1em;
+@bottomMargin: 1rem;
+
+@horizontalPadding: 0em;
+@verticalPadding: 0em;
+@lineHeight: 1.33;
+
+/* HTML Headings */
+@h1: 2rem;
+@h2: 1.75rem;
+@h3: 1.33rem;
+@h4: 1.1rem;
+@h5: 1rem;
+
+/* Sub Header */
+@subHeaderLineHeight: 1.2;
+@subHeaderColor: rgba(0, 0, 0, 0.5);
+
+
+/*-------------------
+       Coupling 
+--------------------*/
+
+@iconMargin: 1em;
+@iconAlignment: baseline;
+
+@contentAlignment: top;
+
+@precedingParagraphMargin: 0em;
+
+
+/*******************************
+           Variations
+*******************************/
+
+/* Icon Header */
+@iconHeaderSize: 3em;
+@iconHeaderMargin: 0.2em;
+@circularHeaderIconSize: 2em;
+@squareHeaderIconSize: 2em;
+
+/* Inverted */
+@invertedColor: @white;
+@invertedSubHeaderColor: rgba(255, 255, 255, 0.85);
+
+/* Divided */
+@dividedBorder: 1px solid rgba(0, 0, 0, 0.1);
+
+@dividedBorderPadding: 0.2rem;
+@dividedSubHeaderPadding: 0.5rem;
+@dividedIconPadding: 0.2em;
+
+/* Block */
+@blockBackground: rgba(0, 0, 0, 0.05);
+@blockHorizontalPadding: 1em;
+@blockVerticalPadding: 0.5em;
+
+/* Attached */
+@attachedColor: #F0F0F0;
+@attachedVerticalPadding: 0.75rem;
+@attachedHorizontalPadding: 1rem;
+@attachedBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
+@attachedBorderRadius: 0.3125em;
+
+/* Floated */
+@floatedMargin: 0.5em;
+
+/* Sizing */
 @tiny: 1em;
 @small: 1.1em;
 @medium: 1.33em;
 @large: 1.75em;
 @huge: 2em;
-
-/*-------------------
-   Header Variables
---------------------*/
\ No newline at end of file
diff --git a/src/themes/default/elements/image.variables b/src/themes/default/elements/image.variables
index 0860d400f..b5776c385 100755
--- a/src/themes/default/elements/image.variables
+++ b/src/themes/default/elements/image.variables
@@ -1,26 +1,35 @@
-/*-------------------
-    Globals Used
---------------------*/
-
-/*
-@borderColor
-
-*/
+/*******************************
+            Standard
+*******************************/
 
 /*-------------------
-      Variables
+       Image 
 --------------------*/
 
 @placeholderColor: rgba(0, 0, 0, 0.05);
 @roundedBorderRadius: 0.3125em;
 
-@imageSpacing: 0.25rem;
+@imageHorizontalMargin: 0.25rem;
+@imageVerticalMargin: 0.5em;
 
+/*******************************
+              Types
+*******************************/
+
+/* Avatar */
 @avatarSize: 2em;
+@avatarMargin: @imageHorizontalMargin;
+
+
+/*******************************
+           Variations
+*******************************/
 
+/* Floated */
 @floatedHorizontalMargin: 1em;
 @floatedVerticalMargin: 1em;
 
+/* Sizing */
 @mini: 0.7em;
 @tiny: 0.8em;
 @small: 0.875em;
@@ -30,6 +39,7 @@
 @huge: 1.375em;
 @massive: 1.5em;
 
+/* Size */
 @miniWidth: 20px;
 @tinyWidth: 80px;
 @smallWidth: 150px;
diff --git a/src/themes/default/elements/input.overrides b/src/themes/default/elements/input.overrides
new file mode 100755
index 000000000..c5c53367f
--- /dev/null
+++ b/src/themes/default/elements/input.overrides
@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/
diff --git a/src/themes/default/elements/input.variables b/src/themes/default/elements/input.variables
new file mode 100755
index 000000000..202e790b9
--- /dev/null
+++ b/src/themes/default/elements/input.variables
@@ -0,0 +1,102 @@
+/*-------------------
+    Globals Used
+--------------------*/
+
+// (Color Variables)
+// @transitionDuration
+// @transitionEasing
+// @iconWidth
+// @borderColor
+// @textColor, @invertedTextColor
+
+/*-------------------
+      Element
+--------------------*/
+
+@fontFamily: "Helvetica Neue", "Helvetica", Arial;
+
+@verticalPadding: 0.65em;
+@horizontalPadding: 1em;
+@inputHeight: (@verticalPadding * 2) + 1.5;
+
+@background: #FFFFFF;
+@borderWidth: 1px;
+@border: @borderWidth solid rgba(0, 0, 0, 0.15);
+@boxShadow: none;
+
+@borderRadius: 0.3125em;
+@transition: 
+  background-color 0.3s ease-out,
+  box-shadow 0.2s ease,
+  border-color 0.2s ease
+;
+
+@inputColor: @textColor;
+
+/*-------------------
+        Types
+--------------------*/
+
+/* Icon */
+@iconOpacity: 0.5;
+@iconOffset: 0.82em;
+@iconFocusOpacity: 1;
+@iconMargin: 2.75em;
+@iconTransition: opacity 0.3s ease-out;
+
+/* Circular Icon Input */
+@circularIconVerticalOffset: 0.35em;
+@circularIconHorizontalOffset: 0.5em;
+
+/* Labeled */
+@labelSize: 0.55em;
+@labelIconPosition: 0.4em 0em 0em 2em;
+
+@labelMargin: 3.25em;
+@labelIconMargin: 1.25em;
+
+/*-------------------
+        States
+--------------------*/
+
+/* Placeholder */
+@placeholderColor: @unselectedTextColor;
+@placeholderFocusColor: @textColor;
+
+@placeholderErrorColor: rgba(255, 80, 80, 0.4);
+@placeholderErrorFocusColor: rgba(255, 80, 80, 0.7);
+
+/* Down */
+@downBorderColor: rgba(0, 0, 0, 0.3);
+@downBackground: #FAFAFA;
+@downColor: @textColor;
+@downBoxShadow: none;
+
+/* Focus */
+@focusBorderColor: @selectedBorderColor;
+@focusBackground: '';
+@focusColor: @selectedTextColor;
+@focusBoxShadow: none;
+
+/* Error */
+@errorBackground: #FFFAFA;
+@errorBorder: #E7BEBE;
+@errorColor: #D95C5C;
+@errorBoxShadow: none;
+
+/* Loading */
+@loadingImage: "../images/loader-mini.gif";
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Sizing */
+@mini: 0.8125rem;
+@small: 0.875rem;
+@medium: 1rem;
+@large: 1.125rem;
+@big: 1.25rem;
+@huge: 1.375rem;
+@massive: 1.5rem;
+
diff --git a/src/themes/default/elements/segment.variables b/src/themes/default/elements/segment.variables
index 6993072fc..f33332814 100755
--- a/src/themes/default/elements/segment.variables
+++ b/src/themes/default/elements/segment.variables
@@ -1,16 +1,12 @@
+/*******************************
+            Standard
+*******************************/
 
 /*-------------------
-    Globals Used
+       Segment 
 --------------------*/
 
-/*
-@borderColor
-
-*/
-
-/*-------------------
-   Segment Variables
---------------------*/
+@boxShadow: 0px 0px 0px 1px @borderColor;
 
 @verticalPadding: 1em;
 @horizontalPadding: 1em;
@@ -18,10 +14,45 @@
 @margin: 1em;
 @borderRadius: 5px;
 
+/*-------------------
+       Coupling 
+--------------------*/
+
+/* Page Grid Segment */
 @pageGridMargin: 2 * @verticalPadding;
 
+
+/*******************************
+            Variations
+*******************************/
+
+/* Piled */
+@piledMargin: 2em;
+@piledBoxShadow: 0px 0px 1px 1px @borderColor;
+@piledDegrees: 1.2deg;
+
+/* Circular */
+@circularPadding: 2em;
+
+/* Stacked */
+@stackedPadding: @verticalPadding + (0.7em);
+@stackedHeight: 5px;
+
+/* Raised */
+@raisedBoxShadow: 0px 1px 2px 1px @borderColor;
+
+/* Colors */
 @coloredBorderSize: 0.2em;
 
-@secondaryColor: #FAF9FA;
-@tertiaryColor:  #EBEBEB;
+/* Ordinality */
+@secondaryBackground: #FAF9FA;
+@secondaryColor: @textColor;
+
+@tertiaryBackground:  #EBEBEB;
+@tertiaryColor: @lightTextColor;
+
+@secondaryInvertedBackground: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
+@secondaryInvertedColor: @offWhite;
 
+@tertiaryInvertedBackground: linear-gradient(rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.6) 100%);
+@tertiaryInvertedColor: @darkWhite;
diff --git a/src/themes/github/collections/menu.variables b/src/themes/github/collections/menu.variables
index 17f1930fe..7f291a44b 100755
--- a/src/themes/github/collections/menu.variables
+++ b/src/themes/github/collections/menu.variables
@@ -10,35 +10,57 @@
 
 @activeBorderSize      : 0em;
 
-@hoverBackground       : rgba(0, 0, 0, 0.01);
-@downBackground        : rgba(0, 0, 0, 0.05);
+@hoverBackground       : rgba(0, 0, 0, 0.02);
+@downBackground        : rgba(0, 0, 0, 0.06);
 
-@activeBackground      : rgba(0, 0, 0, 0.03);
-@activeHoverBackground : rgba(0, 0, 0, 0.03);
+@activeBackground      : rgba(0, 0, 0, 0.04);
+@activeHoverBackground : rgba(0, 0, 0, 0.04);
 
 @boxShadow             :
   0px 1px 2px 0px rgba(0, 0, 0, 0.15),
   0px 0px 0px 1px rgba(0, 0, 0, 0.05)
 ;
 
+@headerBackground: rgba(0, 0, 0, 0.08);
+
 @subMenuMargin: 1em;
 @subMenuFontSize: 0.9rem;
 @subMenuHorizontalPadding: 0.7em;
 
+@arrowHoverColor: #EEEEEE;
+@arrowActiveColor: #EEEEEE;
+@arrowVerticalHoverColor: #F4F4F4;
+@arrowVerticalActiveColor: #F4F4F4;
+
 /*-------------------
       Elements
 --------------------*/
 
-
 @inputVerticalPadding: 0.65em;
-@inputIconOffset: 0em;
-
+@inputIconOffset: -0.1em;
 
 @buttonOffset: -0.15em;
 @buttonVerticalPadding: 0.75em;
 
+/*-------------------
+        Types
+--------------------*/
+
+@paginationMinWidth: 3.5em;
+
+@tieredActiveItemBackground: #F5F5F5;
+@tieredActiveMenuBackground: #F5F5F5;
+
 /*-------------------
       Variations
 --------------------*/
 
+@verticalBackground: #FFFFFF;
+@verticalItemBackground: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.02));
+
+@invertedBackground: #333333 linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.15));
+@invertedBoxShadow             :
+  0px 1px 2px 0px rgba(0, 0, 0, 0.15),
+  0px 0px 0px 1px rgba(255, 255, 255, 0.15)
+;
 @secondaryVerticalPadding: 0.75em;
\ No newline at end of file
diff --git a/src/themes/github/elements/button.variables b/src/themes/github/elements/button.variables
index 53f07f626..e283abdff 100755
--- a/src/themes/github/elements/button.variables
+++ b/src/themes/github/elements/button.variables
@@ -23,6 +23,8 @@
   0 0 0 1px rgba(0, 0, 0, 0.13) inset,
   0 1px 3px rgba(0, 0, 0, 0.05)
 ;
+
+@coloredBackgroundImage: linear-gradient(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
 @coloredBoxShadow:
   0 -1px 0 0 rgba(0, 0, 0, 0.05) inset,
   0 0 0 1px rgba(0, 0, 0, 0.1) inset,
diff --git a/src/themes/user/elements/divider.overrides b/src/themes/user/elements/divider.overrides
new file mode 100755
index 000000000..c5c53367f
--- /dev/null
+++ b/src/themes/user/elements/divider.overrides
@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/
diff --git a/src/themes/user/elements/divider.variables b/src/themes/user/elements/divider.variables
new file mode 100755
index 000000000..6f085f935
--- /dev/null
+++ b/src/themes/user/elements/divider.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/src/themes/user/elements/input.overrides b/src/themes/user/elements/input.overrides
new file mode 100755
index 000000000..c5c53367f
--- /dev/null
+++ b/src/themes/user/elements/input.overrides
@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/
diff --git a/src/themes/user/elements/input.variables b/src/themes/user/elements/input.variables
new file mode 100755
index 000000000..6f085f935
--- /dev/null
+++ b/src/themes/user/elements/input.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/