/
theme.js
65 lines (59 loc) · 1.47 KB
/
theme.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
const breakpoints = {
// sm hits typical mobiles in landscape and up
sm: '480px',
// md hits tablets and up
md: '768px',
// lg hits full desktop-width and up
lg: '990px',
}
const divideByTen = n => {
const roundedDecimal = Number((n / 10).toFixed(1)) // avoid any JS maths stupidity
return Math.round(roundedDecimal) === roundedDecimal ? Math.round(roundedDecimal) : roundedDecimal
}
export const spaceBase = [0, 1, 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96, 112, 128, 144]
const spacingInPx = spaceBase.reduce((acc, e) => (acc[e] = `${e}px`, acc), {})
const spacingInRem = spaceBase.reduce((acc, e) => (acc[e] = `${divideByTen(e)}rem`, acc), {})
const zIndex = {
0: "0",
10: "10",
20: "20",
30: "30",
40: "40",
50: "50",
}
const lineWidth = {
0: "0",
1: "1px",
2: "2px",
4: "4px",
8: "8px",
}
const borderRadius = {
0: "0",
2: "2px",
4: "4px",
6: "6px",
8: "8px",
16: "16px",
"full": "9999px",
}
export const useTheme = (opts = {}) => {
const baseSpacing = opts.usePixels ? spacingInPx : spacingInRem
const width = { ...baseSpacing, screen: '100vw' }
const height = { ...baseSpacing, screen: '100vh' }
return {
usingPixels: !!opts.pxSpacing,
breakpoints,
borderRadius,
verticalBreakpoints: breakpoints,
spacing: baseSpacing,
zIndex,
lineWidth,
width,
height,
maxWidth: { none: 'none', ...width },
maxHeight: height,
minWidth: width,
minHeight: height
}
}