-
Notifications
You must be signed in to change notification settings - Fork 1
/
stitches.config.js
73 lines (70 loc) · 1.54 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
import { createCss } from '@stitches/react'
export const { css, styled, global, getCssString } = createCss({
theme: {
colors: {
hiContrast: 'hsl(206,10%,5%)',
loContrast: 'white',
gray100: 'hsl(206,22%,99%)',
gray200: 'hsl(206,12%,97%)',
gray300: 'hsl(206,11%,92%)',
gray400: 'hsl(206,10%,84%)',
gray500: 'hsl(206,10%,76%)',
gray600: 'hsl(206,10%,44%)',
purple100: 'hsl(252,100%,99%)',
purple200: 'hsl(252,100%,98%)',
purple300: 'hsl(252,100%,94%)',
purple400: 'hsl(252,75%,84%)',
purple500: 'hsl(252,78%,60%)',
purple600: 'hsl(252,80%,53%)',
},
space: {
1: '5px',
2: '10px',
3: '15px',
4: '20px',
5: '25px',
6: '35px',
},
sizes: {
1: '5px',
2: '10px',
3: '15px',
4: '20px',
5: '25px',
6: '35px',
},
fontSizes: {
1: '14px',
2: '18px',
3: '20px',
4: '24px',
5: '36px',
6: '48px',
},
fonts: {
system: 'system-ui',
},
},
utils: {
marginX: (config) => (value) => ({
marginLeft: value,
marginRight: value,
}),
marginY: (config) => (value) => ({
marginTop: value,
marginBottom: value,
}),
paddingX: (config) => (value) => ({
paddingLeft: value,
paddingRight: value,
}),
paddingY: (config) => (value) => ({
paddingTop: value,
paddingBottom: value,
}),
},
media: {
bp1: '@media (min-width: 520px)',
bp2: '@media (min-width: 900px)',
},
})