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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
export const unit = 16;
export const GREY_COLOR = [
"#1A1A2E", //0
"#2F2F41", //1
"#444454", //2
"#585867", //3
"#6D6D7A", //4
"#82828D", //5
"#9797A0", //6
"#ACACB3", //7
"#C1C1C6", //8
"#D5D5D9", //9
"#EAEAEC", //10
"#FFFFFF", //11
];
export const BLUE_COLOR = "#395C6B";
export const DANGER_COLOR = "#ED322C";
export const TEXT_COLOR = GREY_COLOR[0];
export const SECONDARY_COLOR = GREY_COLOR[5];
export const DIMMED_COLOR = GREY_COLOR[7];
export const DIVIDER_COLOR = GREY_COLOR[10];
export const BACKGROUND_COLOR = "#F0F0F1";
export const SURFACE_COLOR = DIVIDER_COLOR;
export const SURFACE_DIVIDER_COLOR = GREY_COLOR[9];
export const body = {
background: BACKGROUND_COLOR,
};
export const container = {
minWidth: "600px",
};
export const medium = {
fontWeight: 500,
};
export const danger = {
color: DANGER_COLOR,
};
export const frame = {
padding: `${unit * 1.5}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 textColor = {
color: TEXT_COLOR,
};
export const code = {
fontFamily: "IBM Plex Mono, monospace",
};
export const headingHr = {
margin: `${unit}px 0`,
};
export const buttonPrimary = {
...code,
padding: "12px 18px",
color: "#FFF",
borderRadius: "4px",
background: BLUE_COLOR,
fontSize: "12px",
fontWeight: 500,
};
export const compactText = {
margin: "0 0 2px",
};
export const breadcrumb = {
fontSize: "14px",
color: SECONDARY_COLOR,
};
export const breadcrumbColonSeparator = {
padding: " 0 4px",
color: DIMMED_COLOR,
};
export const breadcrumbSeparator = {
color: DIVIDER_COLOR,
};
export const heading = {
fontSize: "22px",
fontWeight: 500,
};
export const sectionLabel = {
...code,
...compactText,
letterSpacing: "0.5px",
fontSize: "13px",
fontWeight: 500,
color: DIMMED_COLOR,
};
export const footerLink = {
fontSize: "14px",
};
|
