-
Notifications
You must be signed in to change notification settings - Fork 0
/
stitches.config.js
90 lines (89 loc) · 2.08 KB
/
stitches.config.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
import { createStyled } from "@stitches/react"
export const { styled, css } = createStyled({
tokens: {
fonts: {
"@body":
'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
"@mono":
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
},
fontSizes: {
"@0": "12px",
"@1": "16px",
"@2": "24px",
"@3": "32px",
"@4": "40px",
},
space: {
"@0": "4px",
"@1": "8px",
"@2": "16px",
"@3": "24px",
"@4": "32px",
"@5": "40px",
},
colors: {
"@border": "#e4e4e7",
"@bg": "#ffffff",
"@text": "#181818",
"@textLight": "#a1a1aa",
"@cross": "#f87171",
"@check": "#34d399",
},
},
breakpoints: { bp0: (rule) => `@media (min-width: 780px) { ${rule} }` },
utils: {
m: (config) => (value) => ({
marginTop: value,
marginBottom: value,
marginLeft: value,
marginRight: value,
}),
mt: (config) => (value) => ({
marginTop: value,
}),
mr: (config) => (value) => ({
marginRight: value,
}),
mb: (config) => (value) => ({
marginBottom: value,
}),
ml: (config) => (value) => ({
marginLeft: value,
}),
mx: (config) => (value) => ({
marginLeft: value,
marginRight: value,
}),
my: (config) => (value) => ({
marginTop: value,
marginBottom: value,
}),
p: (config) => (value) => ({
paddingTop: value,
paddingBottom: value,
paddingLeft: value,
paddingRight: value,
}),
pt: (config) => (value) => ({
paddingTop: value,
}),
pr: (config) => (value) => ({
paddingRight: value,
}),
pb: (config) => (value) => ({
paddingBottom: value,
}),
pl: (config) => (value) => ({
paddingLeft: value,
}),
px: (config) => (value) => ({
paddingLeft: value,
paddingRight: value,
}),
py: (config) => (value) => ({
paddingTop: value,
paddingBottom: value,
}),
},
})