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
|
// @ts-nocheck
export const unit = 12
export const PRIMARY_COLOR = "#211E1E"
export const TEXT_COLOR = "#656363"
export const LINK_COLOR = "#007AFF"
export const LINK_BACKGROUND_COLOR = "#F9F8F8"
export const BACKGROUND_COLOR = "#F0F0F1"
export const SURFACE_DIVIDER_COLOR = "#D5D5D9"
export const body = {
background: BACKGROUND_COLOR,
}
export const container = {
minWidth: "600px",
padding: "64px 0px",
}
export const frame = {
padding: `${unit * 2}px`,
border: `1px solid ${SURFACE_DIVIDER_COLOR}`,
background: "#FFF",
borderRadius: "6px",
boxShadow: `0 1px 2px rgba(0,0,0,0.03),
0 2px 4px rgba(0,0,0,0.03),
0 2px 6px rgba(0,0,0,0.03)`,
}
export const baseText = {
fontFamily: "JetBrains Mono, monospace",
}
export const headingText = {
color: PRIMARY_COLOR,
fontSize: "16px",
fontStyle: "normal",
fontWeight: 500,
lineHeight: "normal",
}
export const contentText = {
color: TEXT_COLOR,
fontSize: "14px",
fontStyle: "normal",
fontWeight: 400,
lineHeight: "180%",
}
export const buttonText = {
color: "#FDFCFC",
fontSize: "16px",
fontWeight: 500,
margin: 0,
padding: 0,
display: "inline-flex",
alignItems: "center",
gap: "12px",
}
export const linkText = {
color: LINK_COLOR,
fontSize: "14px",
fontStyle: "normal",
fontWeight: 400,
lineHeight: "150%",
textDecorationLine: "underline",
textDecorationStyle: "solid" as const,
textDecorationSkipInk: "auto" as const,
textDecorationThickness: "auto",
textUnderlineOffset: "auto",
textUnderlinePosition: "from-font",
borderRadius: "4px",
background: LINK_BACKGROUND_COLOR,
padding: "8px 12px",
textAlign: "center" as const,
}
export const contentHighlightText = {
color: PRIMARY_COLOR,
}
export const button = {
display: "inline-grid",
padding: "8px 12px 8px 20px",
justifyContent: "center",
alignItems: "center",
gap: "8px",
flexShrink: "0",
borderRadius: "4px",
backgroundColor: PRIMARY_COLOR,
}
|