LT-249: Fixing issue with multiple duplicated CSS imports

Packages/design/app.styl

@@ -1,7 +1,3 @@
-@import "{design}/styles/webfonts"
-@import "{design}/styles/variables"
-@import "{design}/styles/mixins"
-@import "{design}/styles/spacings"
-@import "{design}/styles/responsive"
-
-@import "{design}/styles/global"
+@import "{design}/styles/imports/mixins"
+@import "{design}/styles/imports/spacings"
+@import "{design}/styles/imports/variables"

Packages/design/components/roundedButtonGroup/roundedButtonGroup.styl

@@ -5,7 +5,6 @@ $borderColorActive = #3C8074
 $textColorActive = #2D2D2D
 
 .roundedButtonGroup
-  font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
 
   .roundedButtonWrapper
     cursor: pointer

Packages/design/package.js

@@ -15,16 +15,20 @@ Package.onUse(function(api) {
     // Importable colors / typography settings
     api.addFiles([
         'app.styl',
-        'styles/global.styl',
-        'styles/mixins.styl',
-        'styles/responsive.styl',
-        'styles/spacings.styl',
-        'styles/variables.styl',
-        'styles/webfonts.styl'
+        'styles/imports/mixins.styl',
+        'styles/imports/spacings.styl',
+        'styles/imports/variables.styl'
     ], 'client', {
         isImport: true
     });
 
+    // Common styles
+    api.addFiles([
+        'styles/common/webfonts.styl',
+        'styles/common/global.styl',
+        'styles/common/spacings.styl'
+    ], 'client');
+
     // Rounded Button Group
     api.addFiles([
         'components/roundedButtonGroup/roundedButtonGroup.html',

Packages/design/styles/common/global.styl

@@ -1,7 +1,9 @@
-html *
-    font-family: 'Roboto', sans-serif
+@import "{design}/app.styl"
 
-hr
+html body
+  font-family: 'Roboto', 'OpenSans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif
+
+html hr
   border-top: 1px solid $uiBorderColor
 
 .center-table

Packages/design/styles/common/spacings.styl

@@ -1,5 +1,10 @@
-@import "./spacings"
+@import "{design}/app.styl"
 
+generateSpacings('', $spacer-x, $spacer-y)
+
+.m-x-auto
+  margin-left: auto !important
+  margin-right: auto !important
 
 // MIN WIDTH 1920
 generateSpacings('r', $spacer-x, $spacer-y)

Packages/design/styles/imports/spacings.styl

@@ -34,9 +34,3 @@ generateSpacings($prefix, $spacerX, $spacerY)
         .{$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
-
-generateSpacings('', $spacer-x, $spacer-y)
-
-.m-x-auto
-  margin-left: auto !important
-  margin-right: auto !important