generated from Redocly/developer-portal-starter
/
theme.ts
184 lines (181 loc) · 5.83 KB
/
theme.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
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
import { lighten, darken, readableColor } from 'polished';
export const theme = {
// spacing: {
// unit: 5,
// sectionHorizontal: ({ spacing }) => spacing.unit * 8,
// sectionVertical: ({ spacing }) => spacing.unit * 8,
// },
// breakpoints: {
// xs: 0,
// small: '550px',
// medium: '900px',
// large: '1200px',
// },
colors: {
// tonalOffset: 0.2,
primary: {
main: '#227a88',
// light: ({ colors }) => lighten(colors.tonalOffset, colors.primary.main),
// dark: ({ colors }) => darken(colors.tonalOffset, colors.primary.main),
// contrastText: ({ colors }) => readableColor(colors.primary.main),
},
// success: {
// main: '#00aa13',
// light: ({ colors }) => lighten(colors.tonalOffset * 3, colors.success.main),
// dark: ({ colors }) => darken(colors.tonalOffset, colors.success.main),
// contrastText: ({ colors }) => readableColor(colors.success.main),
// },
// error: {
// main: '#e53935',
// light: ({ colors }) => lighten(colors.tonalOffset * 2, colors.error.main),
// dark: ({ colors }) => darken(colors.tonalOffset, colors.error.main),
// contrastText: ({ colors }) => readableColor(colors.error.main),
// },
// warning: {
// main: '#d4ad03',
// light: ({ colors }) => lighten(colors.tonalOffset * 2, colors.warning.main),
// dark: ({ colors }) => darken(colors.tonalOffset, colors.warning.main),
// contrastText: ({ colors }) => readableColor(colors.warning.main),
// },
// info: {
// main: '#4782cb',
// light: ({ colors }) => lighten(colors.tonalOffset * 2, colors.info.main),
// dark: ({ colors }) => darken(colors.tonalOffset, colors.info.main),
// contrastText: ({ colors }) => readableColor(colors.info.main),
// },
text: {
primary: '#424242',
// secondary: '#4e566d',
},
// border: {
// dark: 'rgba(0,0,0, 0.15)',
// light: '#ffffff',
// },
// responses: {
// success: {
// color: ({ colors }) => colors.success.main,
// backgroundColor: ({ colors }) => transparentize(0.9, colors.success.main),
// },
// error: {
// color: ({ colors }) => colors.error.main,
// backgroundColor: ({ colors }) => transparentize(0.9, colors.error.main),
// },
// redirect: {
// color: ({ colors }) => colors.warning.main,
// backgroundColor: ({ colors }) => transparentize(0.9, colors.responses.redirect.color),
// },
// info: {
// color: ({ colors }) => colors.info.main,
// backgroundColor: ({ colors }) => transparentize(0.9, colors.responses.info.color),
// },
// },
http: {
get: '#6bbd5b',
post: '#248fb2',
put: '#9b708b',
options: '#d3ca12',
patch: '#e09d43',
delete: '#e27a7a',
basic: '#999',
link: '#31bbb6',
head: '#c167e4',
},
// navbar: {
// main: ({ colors }) => colors.primary.main,
// gradient: ({ colors }) => darken(colors.tonalOffset / 2, colors.navbar.main),
// contrastText: 'white'
// },
// footer: {
// main: ({ colors }) => colors.primary.main,
// contrastText: 'white'
// },
},
sidebar: {
backgroundColor: '#fafafa',
width: '260px',
},
// tocPanel: {
// width: '240px',
// },
typography: {
fontSize: '16px',
lineHeight: '1.5em',
fontWeightRegular: '400',
fontWeightBold: '600',
fontWeightLight: '300',
fontFamily: '"Source Sans Pro", sans-serif',
headings: {
fontFamily: '"Source Sans Pro", sans-serif',
fontWeight: '600',
},
// heading1: {
// fontSize: '1.85714em',
// fontWeight: '600',
// fontFamily: ({ typography }) => typography.headings.fontFamily,
// lineHeight: ({ typography }) => typography.lineHeight,
// color: ({ colors }) => colors.primary.main,
// capitalize: true,
// },
// heading2: {
// fontSize: '1.57143em',
// fontWeight: '600',
// color: ({ colors }) => colors.text.primary,
// fontFamily: ({ typography }) => typography.headings.fontFamily,
// lineHeight: ({ typography }) => typography.lineHeight,
// capitalize: false,
// },
// heading3: {
// fontSize: '1.27em',
// fontWeight: '600',
// color: ({ colors }) => colors.text.primary,
// fontFamily: ({ typography }) => typography.headings.fontFamily,
// lineHeight: ({ typography }) => typography.lineHeight,
// capitalize: false,
// },
// heading4: {
// // ...
// },
// heading5: {
// // ...
// },
// heading6: {
// // ...
// },
code: {
fontSize: '14px',
fontFamily: 'Courier, monospace',
fontWeight: ({ typography }) => typography.fontWeightRegular,
color: '#e53935',
backgroundColor: 'rgba(38, 50, 56, 0.04)',
wrap: false,
},
links: {
color: ({ colors }) => colors.primary.main,
visited: ({ typography }) => typography.links.color,
hover: ({ typography }) => lighten(0.2, typography.links.color),
},
},
rightPanel: {
backgroundColor: '#263238',
width: '40%',
// textColor: '#ffffff',
},
schema: {
nestedBackground: '#fafafa',
// linesColor: theme => lighten( theme.colors.tonalOffset, desaturate(theme.colors.tonalOffset, theme.colors.primary.main) ),
// defaultDetailsWidth: '75%',
// typeNameColor: theme => theme.colors.text.secondary,
// typeTitleColor: theme => theme.schema.typeNameColor,
// requireLabelColor: theme => theme.colors.error.main,
// labelsTextSize: '0.9em',
// nestingSpacing: '1em',
// arrow: {
// size: '1.1em',
// color: theme => theme.colors.text.secondary,
// },
},
// codeBlock: {
// backgroundColor: ({ rightPanel }) => darken(0.1, rightPanel.backgroundColor),
// tokens: {},
// },
};