-
-
Notifications
You must be signed in to change notification settings - Fork 209
/
modularScale.js
85 lines (77 loc) · 2.08 KB
/
modularScale.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
// @flow
import stripUnit from './stripUnit'
const ratioNames = {
minorSecond: 1.067,
majorSecond: 1.125,
minorThird: 1.2,
majorThird: 1.25,
perfectFourth: 1.333,
augFourth: 1.414,
perfectFifth: 1.5,
minorSixth: 1.6,
goldenSection: 1.618,
majorSixth: 1.667,
minorSeventh: 1.778,
majorSeventh: 1.875,
octave: 2,
majorTenth: 2.5,
majorEleventh: 2.667,
majorTwelfth: 3,
doubleOctave: 4,
}
type Ratio =
| number
| 'minorSecond'
| 'majorSecond'
| 'minorThird'
| 'majorThird'
| 'perfectFourth'
| 'augFourth'
| 'perfectFifth'
| 'minorSixth'
| 'goldenSection'
| 'majorSixth'
| 'minorSeventh'
| 'majorSeventh'
| 'octave'
| 'majorTenth'
| 'majorEleventh'
| 'majorTwelfth'
| 'doubleOctave'
/**
* Establish consistent measurements and spacial relationships throughout your projects by incrementing up or down a defined scale. We provide a list of commonly used scales as pre-defined variables, see below.
* @example
* // Styles as object usage
* const styles = {
* // Increment two steps up the default scale
* 'font-size': modularScale(2)
* }
*
* // styled-components usage
* const div = styled.div`
* // Increment two steps up the default scale
* font-size: ${modularScale(2)}
* `
*
* // CSS in JS Output
*
* element {
* 'font-size': '1.77689em'
* }
*/
function modularScale(steps: number, base?: number|string = '1em', ratio?: Ratio = 'perfectFourth') {
if (!steps) {
throw new Error('Please provide a number of steps to the modularScale helper.')
}
if (typeof ratio === 'string' && !ratioNames[ratio]) {
throw new Error('Please pass a number or one of the predefined scales to the modularScale helper as the ratio.')
}
const realBase = typeof base === 'string' ? stripUnit(base) : base
const realRatio = typeof ratio === 'string' ? ratioNames[ratio] : ratio
if (typeof realBase === 'string') {
throw new Error(`Invalid value passed as base to modularScale, expected number or em string but got "${base}"`)
}
return `${realBase * realRatio * steps}em`
}
export { ratioNames }
export default modularScale