-
Notifications
You must be signed in to change notification settings - Fork 181
/
index.js
94 lines (85 loc) · 2.57 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
// @flow
import objectAssign from 'object-assign'
import verticalRhythm from 'compass-vertical-rhythm'
import ms from 'modularscale'
import createStyles from './utils/createStyles'
import compileStyles from './utils/compileStyles'
import type { OptionsType } from 'Types'
const typography = function (opts: OptionsType) {
const defaults: OptionsType = {
baseFontSize: '16px',
baseLineHeight: 1.5,
scaleRatio: 2,
googleFonts: [],
headerFontFamily: [
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI',
'Roboto',
'Oxygen',
'Ubuntu',
'Cantarell',
'Fira Sans',
'Droid Sans',
'Helvetica Neue',
'sans-serif',
],
bodyFontFamily: ['georgia', 'serif'],
headerGray: 20,
headerGrayHue: 0,
bodyGray: 20,
bodyGrayHue: 0,
headerWeight: 'bold',
bodyWeight: 'normal',
boldWeight: 'bold',
includeNormalize: true,
blockMarginBottom: 1,
}
const options = objectAssign({}, defaults, opts)
const vr = verticalRhythm(options)
// Add this function to the vertical rhythm object so it'll be passed around
// as well and be available. Not related really but this is the easiest
// way to pass around extra utility functions atm... :-\
vr.scale = (value: number) => {
// This doesn't pick the right scale ratio if a theme has more than one ratio.
// Perhaps add optional parameter for a width and it'll get the ratio
// for this width. Tricky part is maxWidth could be set in non-pixels.
const baseFont = options.baseFontSize.slice(0, -2)
const newFontSize = `${ms(value, options.scaleRatio) * baseFont}px`
return vr.adjustFontSizeTo(newFontSize)
}
return ({
options,
...vr,
createStyles () { return this.toString() }, // TODO remove in next breaking release.
toJSON () {
return createStyles(vr, options)
},
toString () {
return compileStyles(vr, options, this.toJSON())
},
injectStyles () {
if (typeof document !== 'undefined') {
// Replace existing
if (document.getElementById('typography.js')) {
const styleNode = document.getElementById('typography.js')
styleNode.innerHTML = this.toString()
} else {
const node = document.createElement('style')
node.id = 'typography.js'
node.innerHTML = this.toString()
document.head.appendChild(node)
}
}
},
})
}
module.exports = typography
/*
const test = typography({
baseFontSize: '16px',
includeNormalize: false,
})
console.log(test.toJSON())
console.log(test.toString())
*/