LT-249: Fixing issue with multiple duplicated CSS imports

Packages/design/styles/imports/mixins.styl

@@ -0,0 +1,27 @@
+transition(t)
+  transition: t
+  -webkit-transition: t
+  -ms-transition: t
+  -o-transition: t
+  -moz-transition: t
+
+transition-delay(d)
+  transition-delay: d
+  -webkit-transition-delay: d
+  -ms-transition-delay: d
+  -o-transition-delay: d
+  -moz-transition-delay: d
+
+transform(t)
+  transform: t
+  -webkit-transform: t
+  -ms-transform: t
+  -o-transform: t
+  -moz-transform: t
+
+transform-origin(o)
+  transform-origin: o
+  -webkit-transform-origin: o
+  -ms-transform-origin: o
+  -o-transform-origin: o
+  -moz-transform-origin: o

Packages/design/styles/imports/spacings.styl

@@ -0,0 +1,36 @@
+$spacer = 1rem
+
+$spacer-x = $spacer
+$spacer-y = $spacer
+
+generateSpacings($prefix, $spacerX, $spacerY)
+  $spacerAxis = $spacerX,
+                $spacerY
+
+  $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
+      .{$prefix}{$property[0]}-a-{$spacing[0]}
+        {$property[1]} $spacing[1]*$spacer !important
+      for $side in $sides
+        .{$prefix}{$property[0]}-{$side[0]}-{$spacing[0]}
+          {$property[1]}-{$side[1]} $spacing[1]*$spacerAxis[$side[2]] !important
+      for $axis in $axes
+        .{$prefix}{$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

Packages/design/styles/imports/variables.styl

@@ -0,0 +1,44 @@
+// Common pallete
+$uiYellow = #E29E4A
+$uiSkyBlue = #6FBDE2
+
+$uiGray = #263340
+$uiGrayDark = #16202B
+$uiGrayDarker = #151A1F
+$uiGrayDarkest = #14191E
+
+// Interface UI Colors
+$defaultColor = #94A8B3
+$hoverColor = #ffffff
+$activeColor = #40D9B8
+$uiBorderColor = #436270
+$uiBorderColorDark = #3C5D80
+$primaryBackgroundColor = #000000
+$boxBackgroundColor = #3E5975
+$boxBackgroundColorDark = #22374D
+
+// Text Colors
+$textPrimaryColor = #ffffff
+$textSecondaryColor = #91B9CD
+
+// Other Colors
+$menuBackgroundColor = #F2F2F2
+
+// Sizes
+$topBarHeight = 40px
+$toolbarHeight = 78px
+$toolbarDrawerHeight = 62px
+
+// Thicknesses
+$uiBorderThickness = 1px
+
+// Fonts
+$logoFontFamily = "Sanchez"
+$logoFontWeight = 300
+
+// Transitions
+$transitionDuration = 0.3s
+$transitionEffect = ease
+$sidebarTransition = all $transitionDuration $transitionEffect
+$studiesSidebarMenuWidth = 307px
+$lesionsSidebarMenuWidth = 323px