Add a couple more themes for fun

build/less/themes/packages/flat/globals/site.overrides

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

build/less/themes/packages/flat/globals/site.variables

@@ -0,0 +1,484 @@
+/*******************************
+         Site Settings
+*******************************/
+
+/*-------------------
+        Paths
+--------------------*/
+
+@imagePath : "../../themes/packages/default/assets/images";
+@fontPath  : "../../themes/packages/default/assets/fonts";
+
+/*-------------------
+       Fonts
+--------------------*/
+
+@headerFont    : "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@pageFont      : "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@fontSmoothing : antialiased;
+
+/*-------------------
+      Site Colors
+--------------------*/
+
+/*---  Colors  ---*/
+@blue             : #0074D9;
+@green            : #2ECC40;
+@orange           : #FF851B;
+@pink             : #D9499A;
+@purple           : #A24096;
+@red              : #FF4136;
+@teal             : #39CCCC;
+@yellow           : #FFCB08;
+
+@black            : #191919;
+@grey             : #CCCCCC;
+@white            : #FFFFFF;
+
+/*---  Light Colors  ---*/
+@lightBlue        : #54C8FF;
+@lightGreen       : #2ECC40;
+@lightOrange      : #FF851B;
+@lightPink        : #FF8EDF;
+@lightPurple      : #CDC6FF;
+@lightRed         : #FF695E;
+@lightTeal        : #6DFFFF;
+@lightYellow      : #FFE21F;
+
+@primaryColor     : @blue;
+@secondaryColor   : @black;
+
+
+/*-------------------
+        Page
+--------------------*/
+
+@bodyBackground      : #FCFCFC;
+@fontSize            : 14px;
+@textColor           : rgba(0, 0, 0, 0.8);
+
+@headerMargin        : 1em 0em 1rem;
+@paragraphMargin     : 0em 0em 1em;
+
+@linkColor           : #009FDA;
+@linkUnderline       : none;
+@linkHoverColor      : lighten( @linkColor, 5);
+
+@highlightBackground : #FFFFCC;
+@highlightColor      : @textColor;
+
+
+
+/*-------------------
+  Background Colors
+--------------------*/
+
+@subtleTransparentBlack : rgba(0, 0, 0, 0.03);
+@transparentBlack       : rgba(0, 0, 0, 0.05);
+@strongTransparentBlack : rgba(0, 0, 0, 0.10);
+
+@subtleTransparentWhite : rgba(255, 255, 255, 0.01);
+@transparentWhite       : rgba(255, 255, 255, 0.05);
+@strongTransparentWhite : rgba(255, 255, 255, 0.01);
+
+/* Used for differentiating neutrals */
+@subtleGradient: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
+
+/* Used for differentiating layers */
+@subtleShadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+
+/*-------------------
+        Grid
+--------------------*/
+
+@columnCount: 16;
+
+/*-------------------
+     Breakpoints
+--------------------*/
+
+@mobileBreakpoint            : 320px;
+@tabletBreakpoint            : 768px;
+@computerBreakpoint          : 992px;
+@largeMonitorBreakpoint      : 1400px;
+@widescreenMonitorBreakpoint : 1900px;
+
+
+/*******************************
+           Power-User
+*******************************/
+
+/*-------------------
+       Icons
+--------------------*/
+
+/* Max Width of Icon */
+@iconWidth : 1.23em;
+
+/*-------------------
+       Easing
+--------------------*/
+
+@defaultEasing: ease;
+
+
+/*---   Neutrals  ---*/
+@fullBlack        : #000000;
+@lightBlack       : #333333;
+@darkGrey         : #AAAAAA;
+@lightGrey        : #DCDDDE;
+@offWhite         : #FAFAFA;
+@darkWhite        : #F0F0F0;
+
+/*--- Colored Backgrounds ---*/
+@blueBackground   : #D3E4F3;
+@greenBackground  : #DEF2E0;
+@orangeBackground : #F7E5D6;
+@pinkBackground   : #F9CEE6;
+@purpleBackground : #E0DDF5;
+@redBackground    : #F8D5D3;
+@tealBackground   : #D2F5F5;
+@yellowBackground : #FCF5D8;
+
+/*--- Colored Text ---*/
+@blueTextColor    : @blue;
+@orangeTextColor  : @orange;
+@pinkTextColor    : @pink;
+@purpleTextColor  : @purple;
+@redTextColor     : @red;
+@greenTextColor   : #1EBC30; // Green is difficult to read
+@tealTextColor    : #10A3A3; // Teal text is difficult to read
+@yellowTextColor  : #B58105; // Yellow text is difficult to read
+
+/*--- Colored Headers ---*/
+@blueHeaderColor   : darken(@blueTextColor, 5);
+@greenHeaderColor  : darken(@greenTextColor, 5);
+@orangeHeaderColor : darken(@orangeTextColor, 5);
+@pinkHeaderColor   : darken(@pinkTextColor, 5);
+@purpleHeaderColor : darken(@purpleTextColor, 5);
+@redHeaderColor    : darken(@redTextColor, 5);
+@tealHeaderColor   : darken(@tealTextColor, 5);
+@yellowHeaderColor : darken(@yellowTextColor, 5);
+
+
+
+/*-------------------
+    Emotive Colors
+--------------------*/
+
+/* Mood */
+@positiveBackgroundColor : #E4F5DD;
+@negativeBackgroundColor : #FAE8E8;
+
+@positiveBorderColor     : #B7CAA7;
+@negativeBorderColor     : #DBB1B1;
+
+/* Solid Background Color */
+@positiveColor           : @green;
+@negativeColor           : @red;
+
+@positiveTextColor       : #3C763D;
+@negativeTextColor       : #A94442;
+
+
+/* Status */
+@infoBackgroundColor    : #E5F6FB;
+@warningBackgroundColor : #FCF8E3;
+@successBackgroundColor : @positiveBackgroundColor;
+@errorBackgroundColor   : @negativeBackgroundColor;
+
+@infoBorderColor        : #AAD6DF;
+@warningBorderColor     : #D3C4A5;
+@successBorderColor     : @positiveBorderColor;
+@errorBorderColor       : @negativeBorderColor;
+
+@infoTextColor          : #337B92;
+@warningTextColor       : #8A6D3B;
+@successTextColor       : @positiveTextColor;
+@errorTextColor         : @negativeTextColor;
+
+/* Darkened Headers */
+@positiveHeaderColor : darken(@positiveTextColor, 5);
+@negativeHeaderColor : darken(@negativeTextColor, 5);
+@infoHeaderColor     : darken(@infoTextColor, 5);
+@warningHeaderColor  : darken(@warningTextColor, 5);
+@successHeaderColor  : darken(@successTextColor, 5);
+@errorHeaderColor    : darken(@errorTextColor, 5);
+
+/*-------------------
+     Neutral Text
+--------------------*/
+
+@darkTextColor               : rgba(0, 0, 0, 0.85);
+@lightTextColor              : rgba(0, 0, 0, 0.4);
+
+@invertedTextColor           : rgba(255, 255, 255, 1);
+@invertedLightTextColor      : rgba(255, 255, 255, 0.8);
+@invertedUnselectedTextColor : rgba(255, 255, 255, 0.5);
+@invertedSelectedTextColor   : rgba(255, 255, 255, 1);
+@invertedDisabledTextColor   : rgba(255, 255, 255, 0.3);
+
+@unselectedTextColor         : rgba(0, 0, 0, 0.4);
+@selectedTextColor           : rgba(0, 0, 0, 0.8);
+@disabledTextColor           : rgba(0, 0, 0, 0.2);
+
+/*-------------------
+     Brand Colors
+--------------------*/
+
+@facebookColor   : #3B579D;
+@twitterColor    : #4092CC;
+@googlePlusColor : #D34836;
+@linkedInColor   : #1F88BE;
+@youtubeColor    : #CC181E;
+@instagramColor  : #49769C;
+@pinterestColor  : #00ACED;
+@vkColor         : #4D7198;
+
+/*-------------------
+    Grid 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%);
+@thirteenColumn : (1 / 13 * 100%);
+@fourteenColumn : (1 / 14 * 100%);
+@fifteenColumn  : (1 / 15 * 100%);
+@sixteenColumn  : (1 / 16 * 100%);
+
+/*-------------------
+      Borders
+--------------------*/
+
+@circularRadius                : 500rem;
+
+@borderColor                   : rgba(0, 0, 0, 0.1);
+@selectedBorderColor           : rgba(0, 0, 0, 0.2);
+
+@solidBorderColor              : #DDDDDD;
+@solidSelectedBorderColor      : #B0B0B0;
+
+@whiteBorderColor              : rgba(255, 255, 255, 0.2);
+@selectedWhiteBorderColor      : rgba(255, 255, 255, 0.8);
+
+@solidWhiteBorderColor         : #555555;
+@selectedSolidWhiteBorderColor : #999999;
+
+/*-------------------
+        Sizes
+--------------------*/
+
+@mini        : 0.7em;
+@tiny        : 0.8em;
+@small       : 0.875em;
+@medium      : 1em;
+@large       : 1.125em;
+@big         : 1.25em;
+@huge        : 1.375em;
+@massive     : 1.5em;
+
+
+/*-------------------
+     Transitions
+--------------------*/
+
+@transitionDuration : 0.25s;
+@transitionEasing   : ease;
+
+
+/*******************************
+           States
+*******************************/
+
+/*-------------------
+      Disabled
+--------------------*/
+
+@disabledOpacity: 0.3;
+
+/*-------------------
+        Hover
+--------------------*/
+
+/*---  Colors  ---*/
+@primaryColorHover    : lighten( @primaryColor, 7);
+@secondaryColorHover  : lighten( @secondaryColor, 7);
+
+@blueHover            : lighten( @blue, 7);
+@greenHover           : lighten( @green, 7);
+@orangeHover          : lighten( @orange, 7);
+@pinkHover            : lighten( @pink, 7);
+@purpleHover          : lighten( @purple, 7);
+@redHover             : lighten( @red, 7);
+@tealHover            : lighten( @teal, 7);
+@yellowHover          : lighten( @yellow, 7);
+
+@lightBlueHover       : lighten( @lightBlue, 7);
+@lightGreenHover      : lighten( @lightGreen, 7);
+@lightOrangeHover     : lighten( @lightOrange, 7);
+@lightPinkHover       : lighten( @lightPink, 7);
+@lightPurpleHover     : lighten( @lightPurple, 7);
+@lightRedHover        : lighten( @lightRed, 7);
+@lightTealHover       : lighten( @lightTeal, 7);
+@lightYellowHover     : lighten( @lightYellow, 7);
+
+/*---  Emotive  ---*/
+@positiveColorHover   : lighten( @positiveColor, 7);
+@negativeColorHover   : lighten( @negativeColor, 7);
+
+/*---  Neutrals  ---*/
+@fullBlackHover       : lighten( @fullBlack, 7);
+@blackHover           : lighten( @black, 7);
+@lightBlackHover      : lighten( @lightBlack, 7);
+
+@lightGreyHover       : lighten( @lightGrey, 7);
+@greyHover            : lighten( @grey, 7);
+@darkGreyHover        : lighten( @darkGrey, 7);
+
+@whiteHover           : lighten( @white, 7);
+@offWhiteHover        : lighten( @offWhite, 7);
+@darkWhiteHover       : lighten( @darkWhite, 7);
+
+@facebookHoverColor   : lighten( @facebookColor, 7);
+@twitterHoverColor    : lighten( @twitterColor, 7);
+@googlePlusHoverColor : lighten( @googlePlusColor, 7);
+@linkedInHoverColor   : lighten( @linkedInColor, 7);
+@youtubeHoverColor    : lighten( @youtubeColor, 7);
+@instagramHoverColor  : lighten( @instagramColor, 7);
+@pinterestHoverColor  : lighten( @pinterestColor, 7);
+@vkHoverColor         : lighten( @vkColor, 7);
+
+
+/*-------------------
+    Down (:active)
+--------------------*/
+
+
+/*---  Colors  ---*/
+@primaryColorDown    : darken(@primaryColor, 7);
+@secondaryColorDown  : darken(@secondaryColor, 7);
+
+@blueDown            : darken(@blue, 7);
+@greenDown           : darken(@green, 7);
+@orangeDown          : darken(@orange, 7);
+@pinkDown            : darken(@pink, 7);
+@purpleDown          : darken(@purple, 7);
+@redDown             : darken(@red, 7);
+@tealDown            : darken(@teal, 7);
+@yellowDown          : darken(@yellow, 7);
+
+@lightBlueDown       : darken(@lightBlue, 7);
+@lightGreenDown      : darken(@lightGreen, 7);
+@lightOrangeDown     : darken(@lightOrange, 7);
+@lightPinkDown       : darken(@lightPink, 7);
+@lightPurpleDown     : darken(@lightPurple, 7);
+@lightRedDown        : darken(@lightRed, 7);
+@lightTealDown       : darken(@lightTeal, 7);
+@lightYellowDown     : darken(@lightYellow, 7);
+
+/*---  Emotive  ---*/
+@positiveColorDown   : darken(@positiveColor, 7);
+@negativeColorDown   : darken(@negativeColor, 7);
+
+/*---  Neutrals  ---*/
+@fullBlackDown       : darken(@fullBlack, 7);
+@blackDown           : darken(@black, 7);
+@lightBlackDown      : darken(@lightBlack, 7);
+
+@lightGreyDown       : darken(@lightGrey, 7);
+@greyDown            : darken(@grey, 7);
+@darkGreyDown        : darken(@darkGrey, 7);
+
+@whiteDown           : darken(@white, 7);
+@offWhiteDown        : darken(@offWhite, 7);
+@darkWhiteDown       : darken(@darkWhite, 7);
+
+@facebookDownColor   : darken(@facebookColor, 7);
+@twitterDownColor    : darken(@twitterColor, 7);
+@googlePlusDownColor : darken(@googlePlusColor, 7);
+@linkedInDownColor   : darken(@linkedInColor, 7);
+@youtubeDownColor    : darken(@youtubeColor, 7);
+@instagramDownColor  : darken(@instagramColor, 7);
+@pinterestDownColor  : darken(@pinterestColor, 7);
+@vkDownColor         : darken(@vkColor, 7);
+
+
+/*-------------------
+        Active
+--------------------*/
+
+/*---  Standard  ---*/
+@primaryColorActive    : darken(@primaryColor, 5);
+@secondaryColorActive  : darken(@secondaryColor, 5);
+
+@blueActive            : darken(@blue, 5);
+@greenActive           : darken(@green, 5);
+@orangeActive          : darken(@orange, 5);
+@pinkActive            : darken(@pink, 5);
+@purpleActive          : darken(@purple, 5);
+@redActive             : darken(@red, 5);
+@tealActive            : darken(@teal, 5);
+@yellowActive          : darken(@yellow, 5);
+
+@lightBlueActive       : darken(@lightBlue, 5);
+@lightGreenActive      : darken(@lightGreen, 5);
+@lightOrangeActive     : darken(@lightOrange, 5);
+@lightPinkActive       : darken(@lightPink, 5);
+@lightPurpleActive     : darken(@lightPurple, 5);
+@lightRedActive        : darken(@lightRed, 5);
+@lightTealActive       : darken(@lightTeal, 5);
+@lightYellowActive     : darken(@lightYellow, 5);
+
+/*---  Emotive  ---*/
+@positiveColorActive   : darken(@positiveColor, 5);
+@negativeColorActive   : darken(@negativeColor, 5);
+
+/*---  Neutrals  ---*/
+@fullBlackActive       : darken(@fullBlack, 5);
+@blackActive           : darken(@black, 5);
+@lightBlackActive      : darken(@lightBlack, 5);
+
+@lightGreyActive       : darken(@lightGrey, 5);
+@greyActive            : darken(@grey, 5);
+@darkGreyActive        : darken(@darkGrey, 5);
+
+@whiteActive           : darken(@white, 5);
+@offWhiteActive        : darken(@offWhite, 5);
+@darkWhiteActive       : darken(@darkWhite, 5);
+
+@facebookActiveColor   : darken(@facebookColor, 5);
+@twitterActiveColor    : darken(@twitterColor, 5);
+@googlePlusActiveColor : darken(@googlePlusColor, 5);
+@linkedInActiveColor   : darken(@linkedInColor, 5);
+@youtubeActiveColor    : darken(@youtubeColor, 5);
+@instagramActiveColor  : darken(@instagramColor, 5);
+@pinterestActiveColor  : darken(@pinterestColor, 5);
+@vkActiveColor         : darken(@vkColor, 5);

server/documents/collections/form.html.eco

@@ -9,7 +9,7 @@ title       : 'Form'
 description : 'A form is a collection of user input elements'
 type        : 'UI Collection'
 
-themes      : ['Default', 'GitHub']
+themes      : ['Default', 'Chubby', 'GitHub']
 ---
 <link rel="stylesheet/less" type="text/css" href="/build/less/definitions/collections/form.less" />
 <script src="/javascript/form.js"></script>

src/definitions/collections/form.less

@@ -65,6 +65,7 @@
   color: @labelColor;
   font-size: @labelFontSize;
   font-weight: @labelFontWeight;
+  text-transform: @labelTextTransform;
 }
 
 /*--------------------
@@ -109,6 +110,7 @@
   transition: @inputTransition;
 }
 
+
 .ui.textarea,
 .ui.form textarea {
   margin: 0em;

src/definitions/modules/dropdown.less

@@ -345,13 +345,13 @@ select.ui.dropdown {
 
 /* Hover */
 .ui.selection.dropdown:hover {
-  border: @selectionHoverBorder;
+  border-color: @selectionHoverBorderColor;
   box-shadow: @selectionHoverBoxShadow;
 }
 
 /* Visible Hover */
 .ui.selection.visible.dropdown:hover {
-  border: @selectionVisibleHoverBorder;
+  border-color: @selectionVisibleHoverBorderColor;
   box-shadow: @selectionVisibleHoverBoxShadow;
 }
 .ui.selection.visible.dropdown:hover .menu {
@@ -361,7 +361,7 @@ select.ui.dropdown {
 
 /* Visible */
 .ui.selection.dropdown.visible {
-  border: @selectionVisibleBorder;
+  border-color: @selectionVisibleBorderColor;
   box-shadow: @selectionVisibleBoxShadow;
 }
 .ui.visible.selection.dropdown > .dropdown.icon {

src/themes/packages/chubby/collections/form.overrides

@@ -0,0 +1,8 @@
+/*-------------------
+   Form Variables
+--------------------*/
+
+.ui.form .selection.dropdown {
+  padding: 1.1em 1.2em;
+  border-width: 2px;
+}

src/themes/packages/chubby/collections/form.variables

@@ -0,0 +1,9 @@
+/*-------------------
+   Form Variables
+--------------------*/
+
+@labelTextTransform: uppercase;
+@labelFontSize: 0.8em;
+
+@inputPadding: 1em 1.2em;
+@inputBorder: 2px solid @borderColor;

src/themes/packages/default/collections/form.variables

@@ -18,6 +18,7 @@
 @labelFontWeight: bold;
 @labelDistance: 0.3rem;
 @labelColor: @textColor;
+@labelTextTransform: none;
 
 /* Input */
 @inputWidth: 100%;

src/themes/packages/default/modules/dropdown.variables

@@ -128,17 +128,17 @@ b        Types
 ;
 
 /* Hover */
-@selectionHoverBorder: 1px solid @selectedBorderColor;
+@selectionHoverBorderColor: @selectedBorderColor;
 @selectionHoverBoxShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
 
 /* Visible */
-@selectionVisibleBorder: 1px solid @borderColor;
+@selectionVisibleBorderColor: @borderColor;
 @selectionVisibleBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
 @selectionVisibleTextFontWeight: normal;
 @selectionVisibleTextColor: @selectedTextColor;
 
 /* Visible Hover */
-@selectionVisibleHoverBorder: 1px solid @selectedBorderColor;
+@selectionVisibleHoverBorderColor: @selectedBorderColor;
 @selectionVisibleHoverBoxShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
 @selectionVisibleHoverMenuBorder: 1px solid @selectedBorderColor;
 @selectionVisibleHoverMenuBoxShadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.08);

src/themes/packages/flat/globals/site.overrides

@@ -0,0 +1,3 @@
+/*******************************
+           Overrides
+*******************************/

src/themes/packages/flat/globals/site.variables

@@ -0,0 +1,484 @@
+/*******************************
+         Site Settings
+*******************************/
+
+/*-------------------
+        Paths
+--------------------*/
+
+@imagePath : "../../themes/packages/default/assets/images";
+@fontPath  : "../../themes/packages/default/assets/fonts";
+
+/*-------------------
+       Fonts
+--------------------*/
+
+@headerFont    : "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@pageFont      : "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
+@fontSmoothing : antialiased;
+
+/*-------------------
+      Site Colors
+--------------------*/
+
+/*---  Colors  ---*/
+@blue             : #0074D9;
+@green            : #2ECC40;
+@orange           : #FF851B;
+@pink             : #D9499A;
+@purple           : #A24096;
+@red              : #FF4136;
+@teal             : #39CCCC;
+@yellow           : #FFCB08;
+
+@black            : #191919;
+@grey             : #CCCCCC;
+@white            : #FFFFFF;
+
+/*---  Light Colors  ---*/
+@lightBlue        : #54C8FF;
+@lightGreen       : #2ECC40;
+@lightOrange      : #FF851B;
+@lightPink        : #FF8EDF;
+@lightPurple      : #CDC6FF;
+@lightRed         : #FF695E;
+@lightTeal        : #6DFFFF;
+@lightYellow      : #FFE21F;
+
+@primaryColor     : @blue;
+@secondaryColor   : @black;
+
+
+/*-------------------
+        Page
+--------------------*/
+
+@bodyBackground      : #FCFCFC;
+@fontSize            : 14px;
+@textColor           : rgba(0, 0, 0, 0.8);
+
+@headerMargin        : 1em 0em 1rem;
+@paragraphMargin     : 0em 0em 1em;
+
+@linkColor           : #009FDA;
+@linkUnderline       : none;
+@linkHoverColor      : lighten( @linkColor, 5);
+
+@highlightBackground : #FFFFCC;
+@highlightColor      : @textColor;
+
+
+
+/*-------------------
+  Background Colors
+--------------------*/
+
+@subtleTransparentBlack : rgba(0, 0, 0, 0.03);
+@transparentBlack       : rgba(0, 0, 0, 0.05);
+@strongTransparentBlack : rgba(0, 0, 0, 0.10);
+
+@subtleTransparentWhite : rgba(255, 255, 255, 0.01);
+@transparentWhite       : rgba(255, 255, 255, 0.05);
+@strongTransparentWhite : rgba(255, 255, 255, 0.01);
+
+/* Used for differentiating neutrals */
+@subtleGradient: linear-gradient(transparent, rgba(0, 0, 0, 0.05));
+
+/* Used for differentiating layers */
+@subtleShadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05);
+
+
+/*-------------------
+        Grid
+--------------------*/
+
+@columnCount: 16;
+
+/*-------------------
+     Breakpoints
+--------------------*/
+
+@mobileBreakpoint            : 320px;
+@tabletBreakpoint            : 768px;
+@computerBreakpoint          : 992px;
+@largeMonitorBreakpoint      : 1400px;
+@widescreenMonitorBreakpoint : 1900px;
+
+
+/*******************************
+           Power-User
+*******************************/
+
+/*-------------------
+       Icons
+--------------------*/
+
+/* Max Width of Icon */
+@iconWidth : 1.23em;
+
+/*-------------------
+       Easing
+--------------------*/
+
+@defaultEasing: ease;
+
+
+/*---   Neutrals  ---*/
+@fullBlack        : #000000;
+@lightBlack       : #333333;
+@darkGrey         : #AAAAAA;
+@lightGrey        : #DCDDDE;
+@offWhite         : #FAFAFA;
+@darkWhite        : #F0F0F0;
+
+/*--- Colored Backgrounds ---*/
+@blueBackground   : #D3E4F3;
+@greenBackground  : #DEF2E0;
+@orangeBackground : #F7E5D6;
+@pinkBackground   : #F9CEE6;
+@purpleBackground : #E0DDF5;
+@redBackground    : #F8D5D3;
+@tealBackground   : #D2F5F5;
+@yellowBackground : #FCF5D8;
+
+/*--- Colored Text ---*/
+@blueTextColor    : @blue;
+@orangeTextColor  : @orange;
+@pinkTextColor    : @pink;
+@purpleTextColor  : @purple;
+@redTextColor     : @red;
+@greenTextColor   : #1EBC30; // Green is difficult to read
+@tealTextColor    : #10A3A3; // Teal text is difficult to read
+@yellowTextColor  : #B58105; // Yellow text is difficult to read
+
+/*--- Colored Headers ---*/
+@blueHeaderColor   : darken(@blueTextColor, 5);
+@greenHeaderColor  : darken(@greenTextColor, 5);
+@orangeHeaderColor : darken(@orangeTextColor, 5);
+@pinkHeaderColor   : darken(@pinkTextColor, 5);
+@purpleHeaderColor : darken(@purpleTextColor, 5);
+@redHeaderColor    : darken(@redTextColor, 5);
+@tealHeaderColor   : darken(@tealTextColor, 5);
+@yellowHeaderColor : darken(@yellowTextColor, 5);
+
+
+
+/*-------------------
+    Emotive Colors
+--------------------*/
+
+/* Mood */
+@positiveBackgroundColor : #E4F5DD;
+@negativeBackgroundColor : #FAE8E8;
+
+@positiveBorderColor     : #B7CAA7;
+@negativeBorderColor     : #DBB1B1;
+
+/* Solid Background Color */
+@positiveColor           : @green;
+@negativeColor           : @red;
+
+@positiveTextColor       : #3C763D;
+@negativeTextColor       : #A94442;
+
+
+/* Status */
+@infoBackgroundColor    : #E5F6FB;
+@warningBackgroundColor : #FCF8E3;
+@successBackgroundColor : @positiveBackgroundColor;
+@errorBackgroundColor   : @negativeBackgroundColor;
+
+@infoBorderColor        : #AAD6DF;
+@warningBorderColor     : #D3C4A5;
+@successBorderColor     : @positiveBorderColor;
+@errorBorderColor       : @negativeBorderColor;
+
+@infoTextColor          : #337B92;
+@warningTextColor       : #8A6D3B;
+@successTextColor       : @positiveTextColor;
+@errorTextColor         : @negativeTextColor;
+
+/* Darkened Headers */
+@positiveHeaderColor : darken(@positiveTextColor, 5);
+@negativeHeaderColor : darken(@negativeTextColor, 5);
+@infoHeaderColor     : darken(@infoTextColor, 5);
+@warningHeaderColor  : darken(@warningTextColor, 5);
+@successHeaderColor  : darken(@successTextColor, 5);
+@errorHeaderColor    : darken(@errorTextColor, 5);
+
+/*-------------------
+     Neutral Text
+--------------------*/
+
+@darkTextColor               : rgba(0, 0, 0, 0.85);
+@lightTextColor              : rgba(0, 0, 0, 0.4);
+
+@invertedTextColor           : rgba(255, 255, 255, 1);
+@invertedLightTextColor      : rgba(255, 255, 255, 0.8);
+@invertedUnselectedTextColor : rgba(255, 255, 255, 0.5);
+@invertedSelectedTextColor   : rgba(255, 255, 255, 1);
+@invertedDisabledTextColor   : rgba(255, 255, 255, 0.3);
+
+@unselectedTextColor         : rgba(0, 0, 0, 0.4);
+@selectedTextColor           : rgba(0, 0, 0, 0.8);
+@disabledTextColor           : rgba(0, 0, 0, 0.2);
+
+/*-------------------
+     Brand Colors
+--------------------*/
+
+@facebookColor   : #3B579D;
+@twitterColor    : #4092CC;
+@googlePlusColor : #D34836;
+@linkedInColor   : #1F88BE;
+@youtubeColor    : #CC181E;
+@instagramColor  : #49769C;
+@pinterestColor  : #00ACED;
+@vkColor         : #4D7198;
+
+/*-------------------
+    Grid 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%);
+@thirteenColumn : (1 / 13 * 100%);
+@fourteenColumn : (1 / 14 * 100%);
+@fifteenColumn  : (1 / 15 * 100%);
+@sixteenColumn  : (1 / 16 * 100%);
+
+/*-------------------
+      Borders
+--------------------*/
+
+@circularRadius                : 500rem;
+
+@borderColor                   : rgba(0, 0, 0, 0.1);
+@selectedBorderColor           : rgba(0, 0, 0, 0.2);
+
+@solidBorderColor              : #DDDDDD;
+@solidSelectedBorderColor      : #B0B0B0;
+
+@whiteBorderColor              : rgba(255, 255, 255, 0.2);
+@selectedWhiteBorderColor      : rgba(255, 255, 255, 0.8);
+
+@solidWhiteBorderColor         : #555555;
+@selectedSolidWhiteBorderColor : #999999;
+
+/*-------------------
+        Sizes
+--------------------*/
+
+@mini        : 0.7em;
+@tiny        : 0.8em;
+@small       : 0.875em;
+@medium      : 1em;
+@large       : 1.125em;
+@big         : 1.25em;
+@huge        : 1.375em;
+@massive     : 1.5em;
+
+
+/*-------------------
+     Transitions
+--------------------*/
+
+@transitionDuration : 0.25s;
+@transitionEasing   : ease;
+
+
+/*******************************
+           States
+*******************************/
+
+/*-------------------
+      Disabled
+--------------------*/
+
+@disabledOpacity: 0.3;
+
+/*-------------------
+        Hover
+--------------------*/
+
+/*---  Colors  ---*/
+@primaryColorHover    : lighten( @primaryColor, 7);
+@secondaryColorHover  : lighten( @secondaryColor, 7);
+
+@blueHover            : lighten( @blue, 7);
+@greenHover           : lighten( @green, 7);
+@orangeHover          : lighten( @orange, 7);
+@pinkHover            : lighten( @pink, 7);
+@purpleHover          : lighten( @purple, 7);
+@redHover             : lighten( @red, 7);
+@tealHover            : lighten( @teal, 7);
+@yellowHover          : lighten( @yellow, 7);
+
+@lightBlueHover       : lighten( @lightBlue, 7);
+@lightGreenHover      : lighten( @lightGreen, 7);
+@lightOrangeHover     : lighten( @lightOrange, 7);
+@lightPinkHover       : lighten( @lightPink, 7);
+@lightPurpleHover     : lighten( @lightPurple, 7);
+@lightRedHover        : lighten( @lightRed, 7);
+@lightTealHover       : lighten( @lightTeal, 7);
+@lightYellowHover     : lighten( @lightYellow, 7);
+
+/*---  Emotive  ---*/
+@positiveColorHover   : lighten( @positiveColor, 7);
+@negativeColorHover   : lighten( @negativeColor, 7);
+
+/*---  Neutrals  ---*/
+@fullBlackHover       : lighten( @fullBlack, 7);
+@blackHover           : lighten( @black, 7);
+@lightBlackHover      : lighten( @lightBlack, 7);
+
+@lightGreyHover       : lighten( @lightGrey, 7);
+@greyHover            : lighten( @grey, 7);
+@darkGreyHover        : lighten( @darkGrey, 7);
+
+@whiteHover           : lighten( @white, 7);
+@offWhiteHover        : lighten( @offWhite, 7);
+@darkWhiteHover       : lighten( @darkWhite, 7);
+
+@facebookHoverColor   : lighten( @facebookColor, 7);
+@twitterHoverColor    : lighten( @twitterColor, 7);
+@googlePlusHoverColor : lighten( @googlePlusColor, 7);
+@linkedInHoverColor   : lighten( @linkedInColor, 7);
+@youtubeHoverColor    : lighten( @youtubeColor, 7);
+@instagramHoverColor  : lighten( @instagramColor, 7);
+@pinterestHoverColor  : lighten( @pinterestColor, 7);
+@vkHoverColor         : lighten( @vkColor, 7);
+
+
+/*-------------------
+    Down (:active)
+--------------------*/
+
+
+/*---  Colors  ---*/
+@primaryColorDown    : darken(@primaryColor, 7);
+@secondaryColorDown  : darken(@secondaryColor, 7);
+
+@blueDown            : darken(@blue, 7);
+@greenDown           : darken(@green, 7);
+@orangeDown          : darken(@orange, 7);
+@pinkDown            : darken(@pink, 7);
+@purpleDown          : darken(@purple, 7);
+@redDown             : darken(@red, 7);
+@tealDown            : darken(@teal, 7);
+@yellowDown          : darken(@yellow, 7);
+
+@lightBlueDown       : darken(@lightBlue, 7);
+@lightGreenDown      : darken(@lightGreen, 7);
+@lightOrangeDown     : darken(@lightOrange, 7);
+@lightPinkDown       : darken(@lightPink, 7);
+@lightPurpleDown     : darken(@lightPurple, 7);
+@lightRedDown        : darken(@lightRed, 7);
+@lightTealDown       : darken(@lightTeal, 7);
+@lightYellowDown     : darken(@lightYellow, 7);
+
+/*---  Emotive  ---*/
+@positiveColorDown   : darken(@positiveColor, 7);
+@negativeColorDown   : darken(@negativeColor, 7);
+
+/*---  Neutrals  ---*/
+@fullBlackDown       : darken(@fullBlack, 7);
+@blackDown           : darken(@black, 7);
+@lightBlackDown      : darken(@lightBlack, 7);
+
+@lightGreyDown       : darken(@lightGrey, 7);
+@greyDown            : darken(@grey, 7);
+@darkGreyDown        : darken(@darkGrey, 7);
+
+@whiteDown           : darken(@white, 7);
+@offWhiteDown        : darken(@offWhite, 7);
+@darkWhiteDown       : darken(@darkWhite, 7);
+
+@facebookDownColor   : darken(@facebookColor, 7);
+@twitterDownColor    : darken(@twitterColor, 7);
+@googlePlusDownColor : darken(@googlePlusColor, 7);
+@linkedInDownColor   : darken(@linkedInColor, 7);
+@youtubeDownColor    : darken(@youtubeColor, 7);
+@instagramDownColor  : darken(@instagramColor, 7);
+@pinterestDownColor  : darken(@pinterestColor, 7);
+@vkDownColor         : darken(@vkColor, 7);
+
+
+/*-------------------
+        Active
+--------------------*/
+
+/*---  Standard  ---*/
+@primaryColorActive    : darken(@primaryColor, 5);
+@secondaryColorActive  : darken(@secondaryColor, 5);
+
+@blueActive            : darken(@blue, 5);
+@greenActive           : darken(@green, 5);
+@orangeActive          : darken(@orange, 5);
+@pinkActive            : darken(@pink, 5);
+@purpleActive          : darken(@purple, 5);
+@redActive             : darken(@red, 5);
+@tealActive            : darken(@teal, 5);
+@yellowActive          : darken(@yellow, 5);
+
+@lightBlueActive       : darken(@lightBlue, 5);
+@lightGreenActive      : darken(@lightGreen, 5);
+@lightOrangeActive     : darken(@lightOrange, 5);
+@lightPinkActive       : darken(@lightPink, 5);
+@lightPurpleActive     : darken(@lightPurple, 5);
+@lightRedActive        : darken(@lightRed, 5);
+@lightTealActive       : darken(@lightTeal, 5);
+@lightYellowActive     : darken(@lightYellow, 5);
+
+/*---  Emotive  ---*/
+@positiveColorActive   : darken(@positiveColor, 5);
+@negativeColorActive   : darken(@negativeColor, 5);
+
+/*---  Neutrals  ---*/
+@fullBlackActive       : darken(@fullBlack, 5);
+@blackActive           : darken(@black, 5);
+@lightBlackActive      : darken(@lightBlack, 5);
+
+@lightGreyActive       : darken(@lightGrey, 5);
+@greyActive            : darken(@grey, 5);
+@darkGreyActive        : darken(@darkGrey, 5);
+
+@whiteActive           : darken(@white, 5);
+@offWhiteActive        : darken(@offWhite, 5);
+@darkWhiteActive       : darken(@darkWhite, 5);
+
+@facebookActiveColor   : darken(@facebookColor, 5);
+@twitterActiveColor    : darken(@twitterColor, 5);
+@googlePlusActiveColor : darken(@googlePlusColor, 5);
+@linkedInActiveColor   : darken(@linkedInColor, 5);
+@youtubeActiveColor    : darken(@youtubeColor, 5);
+@instagramActiveColor  : darken(@instagramColor, 5);
+@pinterestActiveColor  : darken(@pinterestColor, 5);
+@vkActiveColor         : darken(@vkColor, 5);

src/themes/packages/github/collections/form.overrides

@@ -1,3 +1,16 @@
 /*******************************
            Overrides
 *******************************/
+
+.ui.selection.dropdown {
+  background-color: #FAFAFA;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset;
+  border-color: #CCCCCC;
+}
+
+.ui.selection.dropdown:focus {
+  box-shadow:
+    0px 1px 2px rgba(0, 0, 0, 0.075) inset,
+    0px 0px 5px rgba(81, 167, 232, 0.5)
+  ;
+}