Started to build out the app. Its got a basic set of features and it should really be in VC

client/semantic/src/themes/material/elements/button.variables

@@ -0,0 +1,97 @@
+/*******************************
+            Button
+*******************************/
+
+/*-------------------
+       Element
+--------------------*/
+
+@googleFontName : 'Roboto';
+@pageFont       : 'Roboto', Arial, sans-serif;
+
+@medium: 13px;
+
+@verticalPadding   : 0.8em;
+@horizontalPadding : 0.8em;
+@borderRadius      : @relative3px;
+@color             : #222222;
+@fontWeight        : normal;
+@textTransform     : none;
+
+@backgroundColor      : @white;
+@backgroundImage      : linear-gradient(transparent, rgba(0, 0, 0, 0.02));
+
+@solidBorderColor: #DDDDDD;
+
+@borderBoxShadowColor: @solidBorderColor;
+@borderBoxShadow: 0px 0px 0px 1px @solidBorderColor inset;
+@shadowBoxShadow: 0px 0px 0px 0px transparent;
+
+@transition:
+  opacity 0.3s @defaultEasing,
+  background-color 0.3s @defaultEasing,
+  color 0.3s @defaultEasing,
+  box-shadow 0.3s @defaultEasing,
+  background 0.3s @defaultEasing
+;
+/*-------------------
+        State
+--------------------*/
+
+@hoverBackgroundColor: @white;
+@hoverBoxShadow:
+  @borderBoxShadow,
+  0px 2px 3px 0px rgba(0, 0, 0, 0.2) !important
+;
+
+@downBackgroundColor: @white;
+@downBackgroundImage: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.04));
+@downTextColor: #222222;
+@downBoxShadow: @borderBoxShadow;
+
+@activeBackgroundColor: #F0F0F0;
+@activeBoxShadow: 0px 0px 0px 1px #DDDDDD;
+
+/*-------------------
+      Variations
+--------------------*/
+
+/* Basic */
+@basicBorderSize: 0px;
+@basicBorderRadius: 4px;
+@basicColoredBorderSize: 1px;
+@basicHoverBackground: @white;
+@basicHoverBoxShadow: @hoverBoxShadow;
+@basicDownBackground: @white;
+@basicDownBoxShadow: @downBoxShadow;
+
+@basicActiveBackground: #FFFFFF;
+@basicActiveBoxShadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+
+/* Labeled */
+@labeledIconBackgroundColor: transparent;
+@labeledIconWidth: 2em;
+
+@labeledLabelBorderOffset: 0px;
+
+/* Colored */
+@coloredBackgroundImage : @subtleGradient;
+@coloredBoxShadow       : 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
+
+/* Primary */
+@primaryColor       : #4184F3;
+@primaryBoxShadow   : 0px 0px 0px 1px #0157E4 inset;
+
+/* Secondary */
+@secondaryColor           : #EEEEEE;
+@secondaryBackgroundImage : @backgroundImage;
+@secondaryTextColor       : @textColor;
+@secondaryBoxShadow       : @borderBoxShadow;
+
+/* Emotive */
+@positiveColor: #3D9400;
+@negativeColor: #D34836;
+
+/* Inverted */
+@invertedBorderSize: 1px;
+