-
-
Notifications
You must be signed in to change notification settings - Fork 209
/
modularScale.js
96 lines (88 loc) · 2.17 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
86
87
88
89
90
91
92
93
94
95
96
// @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
* 'fontSize': modularScale(2)
* }
*
* // styled-components usage
* const div = styled.div`
* // Increment two steps up the default scale
* fontSize: ${modularScale(2)}
* `
*
* // CSS in JS Output
*
* element {
* 'fontSize': '1.77689em'
* }
*/
function modularScale(
steps: number,
base?: number | string = '1em',
ratio?: Ratio = 'perfectFourth',
): string {
if (typeof steps !== 'number') {
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