-
Notifications
You must be signed in to change notification settings - Fork 0
/
stitches.config.ts
80 lines (75 loc) · 1.61 KB
/
stitches.config.ts
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
import {
grayDark,
sky,
green,
yellow,
red,
blue,
} from "@radix-ui/colors";
import { createStitches, ScaleValue } from "@stitches/react";
import { Roboto } from "@next/font/google";
const roboto = Roboto({
weight: "400",
subsets: ["latin"],
});
export const { styled, getCssText, globalCss } = createStitches({
theme: {
colors: {
primary: sky.sky3,
primaryLight: sky.sky4,
primaryDark: sky.sky9,
active: sky.sky5,
border: sky.sky6,
borderLight: sky.sky8,
background: grayDark.gray2,
title: grayDark.gray12,
text: grayDark.gray11,
success: green.green1,
warning: yellow.yellow1,
danger: red.red1,
info: blue.blue1,
},
space: {
"0": "0rem",
"1": "0.0625rem",
"4": "0.25rem",
"8": "0.5rem",
"12": "0.75rem",
"16": "1rem",
"20": "1.25rem",
"24": "1.5rem",
"32": "2rem",
"64": "4rem",
},
radii: {
full: "6250rem",
default: "0.3125rem",
},
fonts: {
default: roboto.style.fontFamily,
},
},
utils: {
paddingX: (value: ScaleValue<"space">) => ({
paddingLeft: value,
paddingRight: value,
}),
paddingY: (value: ScaleValue<"space">) => ({
paddingTop: value,
paddingBottom: value,
}),
maxSize: (value: ScaleValue<"space">) => ({
maxHeight: value,
maxWidth: value,
}),
minSize: (value: ScaleValue<"space">) => ({
minHeight: value,
minWidth: value,
}),
},
media: {
bp1: "(min-width: 640px)",
bp2: "(min-width: 768px)",
bp3: "(min-width: 1024px)",
},
});