Merge pull request #71 from ctaepper/feature/refactor-spacings

remove different scale logic for spacings

Author: johno

config.js

@@ -2,11 +2,7 @@ module.exports = {
   "typeScale": [
     3, 2.25, 1.5, 1.25, 1, 0.875, 0.75
   ],
-  "spacing": {
-    "root": 8,
-    "ratio": 2,
-    "steps": 7
-  },
+  "spacing": [2, 4, 6, 8, 10, 12, 14],
   "customMedia": [
     { "m": 48 },
     { "l": 64 }

lib/spacing.js

@@ -1,6 +1,7 @@
 const directions = require('./directions')
 const decls = require('./declarations')
 const { step, mqSteps } = require('./docs-helper')
+const withUnits = require('./units').withUnits
 
 const docs = (spacing, mqs) => `
 /*
@@ -23,45 +24,26 @@ const docs = (spacing, mqs) => `
     b = bottom
     l = left
 
-    ${
-      Array.from({ length: spacing.steps + 1 })
-        .map((_, idx) => step({ zeroth: '/none', nth: 'spacing scale' }, idx)).join('\n    ')
-    }
+    ${ [].concat(0, spacing).map((_, idx) => step({ zeroth: '/none', nth: 'spacing scale' }, idx )).join('\n    ') }
 
   Media Query Extensions:
     ${mqSteps(mqs)}
 
 */`
 
-const css = (spacing, mediaQueries) => {
-  const steps = []
+const css = spacing =>
+  [].concat(0, spacing).map((spacing, idx) =>
+    Object.keys(directions).map(d =>
+      [
+        `.p${directions[d]}${idx} { ${fullDecl(d, spacing, 'padding')} }`,
+        `.m${directions[d]}${idx} { ${fullDecl(d, spacing, 'margin')} }`,
+        `.n${directions[d]}${idx} { ${fullDecl(d, `-${spacing}`, 'margin')} }`
+      ].join('\n')
+    ).join('\n')
+  )
 
-  for (let i = 0; i <= spacing.steps; i++) {
-    steps.push(spacingDecls(i, spacing.ratio))
-  }
 
-  return steps.join('\n')
-}
-
-const spacingDecls = (step, baseScale, opts) => {
-  opts = opts || {}
-
-  const postfix = opts.postfix || ''
-  const spacing = []
-  const paddingClass = 'p' // TODO: Make configurable
-  const marginClass = 'm'
-  const negativeMarginClass = 'n'
-  const size = step * baseScale
-
-  // TODO: Don't create negative margin classes for horiz/vert directions
-  return Object.keys(directions).map(d => `
-    .${paddingClass}${directions[d]}${step}${postfix} { ${fullDecl(d, size, 'padding')} }
-    .${marginClass}${directions[d]}${step}${postfix} { ${fullDecl(d, size, 'margin')} }
-    .${negativeMarginClass}${directions[d]}${step}${postfix} { ${fullDecl(d, -size, 'margin')} }
-  `).join('\n')
-}
-
-const fullDecl = (d, size, prop) => decls[d].map(dir => `${prop}${dir}: ${size}rem;`).join('\n')
+const fullDecl = (d, size, prop) => decls[d].map(dir => `${prop}${dir}: ${withUnits(size, 'rem')};`).join('\n')
 
 module.exports = {
   css,