Lesion Tracker Redesign so far

Packages/design/styles/global.styl

@@ -0,0 +1,10 @@
+html *
+    font-family: 'Roboto', sans-serif;
+
+hr
+  border-top: 1px solid $uiBorderColor;
+
+.center-table
+  display: table
+  margin-left: auto
+  margin-right: auto

Packages/design/styles/mixins.styl

@@ -0,0 +1,13 @@
+transition(t)
+  transition: t
+  -webkit-transition: t
+  -ms-transition: t
+  -o-transition: t
+  -moz-transition: t
+
+transform(t)
+  transform: t
+  -webkit-transform: t
+  -ms-transform: t
+  -o-transform: t
+  -moz-transform: t

Packages/design/styles/spacings.styl

@@ -0,0 +1,39 @@
+$spacer = 1rem
+
+$spacer-x = $spacer
+$spacer-y = $spacer
+
+$spacerAxis = $spacer-x,
+              $spacer-y
+
+$spacings = 0 0,
+            1 1,
+            2 1.5,
+            3 3g
+
+$properties = m margin,
+              p padding
+
+$sides = t top 1,
+         r right 0,
+         b bottom 1,
+         l left 0
+
+$axes = x left right 0,
+        y top bottom 1
+
+for $property in $properties
+  for $spacing in $spacings
+    .{$property[0]}-a-{$spacing[0]}
+      {$property[1]} $spacing[1]*$spacer !important
+    for $side in $sides
+      .{$property[0]}-{$side[0]}-{$spacing[0]}
+        {$property[1]}-{$side[1]} $spacing[1]*$spacerAxis[$side[2]] !important
+    for $axis in $axes
+      .{$property[0]}-{$axis[0]}-{$spacing[0]}
+        {$property[1]}-{$axis[1]} $spacing[1]*$spacerAxis[$axis[3]] !important
+        {$property[1]}-{$axis[2]} $spacing[1]*$spacerAxis[$axis[3]] !important
+
+.m-x-auto
+  margin-left: auto !important
+  margin-right: auto !important

Packages/design/styles/variables.styl

@@ -0,0 +1,34 @@
+// Interface UI Colors
+$defaultColor = #94A8B3
+$hoverColor = #ffffff
+$activeColor = #40D9B8
+$uiBorderColor = #436270
+$uiBorderColorDark = #3C5D80
+$darkUiColor = #16202B
+$primaryBackgroundColor = #000000
+
+// Text Colors
+$textPrimaryColor = #ffffff
+$textSecondaryColor = #91B9CD
+
+// Other Colors
+$errorColor = #E29E4A
+$menuBackgroundColor = #F2F2F2
+
+// Sizes
+$topBarHeight = 30px
+$toolbarHeight = 50px
+
+// Thicknesses
+$uiBorderThickness = 1px
+
+// Fonts
+$logoFontFamily = "Sanchez"
+$logoFontWeight = 300
+
+// Transitions
+$transitionDuration = 0.3s
+$transitionEffect = ease
+$sidebarTransition = all $transitionDuration $transitionEffect
+$studiesSidebarMenuWidth = 307px
+$lesionsSidebarMenuWidth = 317px

Packages/design/styles/webfonts.styl

@@ -0,0 +1,2 @@
+@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext)
+@import url(http://fonts.googleapis.com/css?family=Sanchez:400,700&subset=latin,latin-ext)