diff --git a/config.js b/config.js index cc4ab4c..346c116 100644 --- a/config.js +++ b/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 } diff --git a/lib/spacing.js b/lib/spacing.js index 1d4a7dd..9e8dc7b 100644 --- a/lib/spacing.js +++ b/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,