diff --git a/config.js b/config.js index cc4ab4c..ff79df3 100644 --- a/config.js +++ b/config.js @@ -1,6 +1,9 @@ module.exports = { "typeScale": [ - 3, 2.25, 1.5, 1.25, 1, 0.875, 0.75 + {value: 3, alias: "title"}, + {value: 2.25, alias: "sub"}, + {value: 1.5, alias: ["copy", "error"]}, + 1.25, 1, 0.875, 0.75 ], "spacing": { "root": 8, diff --git a/lib/docs-helper.js b/lib/docs-helper.js index 65deb12..f7ff97f 100644 --- a/lib/docs-helper.js +++ b/lib/docs-helper.js @@ -10,10 +10,11 @@ const suffix = (idx) => { } } -function step({ zeroth = '', nth = '' }, idx) { +function step({ zeroth = '', nth = '' }, idx, alias) { if (idx === 0) { return `0 = 0${zeroth}` } const last = Math.abs(idx).toString().split('').reverse()[0] + if (alias) return `${idx} = ${alias}` return `${idx} = ${idx}${suffix(last)} step in ${nth}` } diff --git a/lib/type-scale.js b/lib/type-scale.js index 44d1be0..1967238 100644 --- a/lib/type-scale.js +++ b/lib/type-scale.js @@ -1,4 +1,5 @@ const { step, mqSteps } = require('./docs-helper') +const isObject = require('isobject') const docs = (steps, mqs) => ` /* @@ -9,7 +10,7 @@ const docs = (steps, mqs) => ` f = font-size Modifiers: - ${ steps.map((_, idx) => step({ nth: 'size scale' }, idx + 1)).join('\n ') } + ${ steps.map((s, idx) => step({ nth: 'size scale' }, idx + 1, s.alias)).join('\n ') } Media Query Extensions: ${mqSteps(mqs)} @@ -25,7 +26,16 @@ const css = typeScale => { return steps.join('\n') } -const decl = (step, size) => `.f${step} { font-size: ${size}rem; }` +const decl = (step, size) => { + + let classNames = [step] + + if (isObject(size)) { + classNames = classNames.concat(size.alias) + size = size.value + } + return `.f${classNames.join(', .f')} { font-size: ${size}rem; }` +} module.exports = { css,