-
Notifications
You must be signed in to change notification settings - Fork 0
/
stitches.config.js
95 lines (92 loc) · 2.11 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
91
92
93
94
95
import { createCss } from "@stitches/react";
export const { styled, getCssString, global, theme } = createCss({
theme: {
fonts: {
system: "system-ui",
suisse: "Suisse",
suisseMono: "Suisse Mono",
},
colors: {
gray000: "#FFFFFF",
gray100: "#e9e9e9",
gray200: "#d9d9d9",
gray300: "#c4c4c4",
gray400: "#9d9d9d",
gray500: "#7b7b7b",
gray600: "#555555",
gray700: "#434343",
gray800: "#262626",
gray900: "#101010",
gray1000: "#000000",
accent: "#EB593A",
},
space: {
space000: "4px",
space100: "8px",
space200: "12px",
space300: "16px",
space400: "24px",
space500: "32px",
space600: "40px",
space700: "64px",
space800: "96px",
space800: "128px",
space900: "192px",
},
transitions: {
default: "all 0.3s ease-out",
},
},
media: {
small: "(min-width: 640px)",
lessThanMedium: "(max-width: 768px)",
medium: "(min-width: 768px)",
lessThanLarge: "(max-width: 1024px)", // all devices below 'desktop'
large: "(min-width: 1024px)",
xLarge: "(min-width: 1200px)",
xXLarge: "(min-width: 1536px)",
},
utils: {
gapVertical: (config) => (value) => ({
"& > * + *": {
margin: `${value} 0 0 0`,
},
}),
gapHorizontal: (config) => (value) => ({
"& > * + *": {
margin: `0 0 0 ${value}`,
},
}),
},
});
export const lightTheme = theme("light-theme", {
colors: {
gray000: "#000000",
gray100: "#101010",
gray200: "#262626",
gray300: "#434343",
gray400: "#555555",
gray500: "#7b7b7b",
gray600: "#9d9d9d",
gray700: "#c4c4c4",
gray800: "#d9d9d9",
gray900: "#e9e9e9",
gray1000: "#FFFFFF",
accent: "#AF52DE",
},
space: {},
fonts: {},
});
export const globalStyles = global({
html: {
// "scroll-behavior": "smooth",
fontFamily: "'Suisse', -apple-system",
"-webkit-font-smoothing": "antialiased",
"-moz-osx-font-smoothing": "grayscale",
},
body: {
overflow: "auto",
backgroundColor: "$gray1000",
margin: 0,
},
});