-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy paththemes.ts
More file actions
338 lines (336 loc) · 10.3 KB
/
themes.ts
File metadata and controls
338 lines (336 loc) · 10.3 KB
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
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
export const themes = {
default: {
light: {
colors: {
background: '248 250 252',
surface: '255 255 255',
'text-primary': '2 6 23',
'text-secondary': '71 85 105',
'border-default': '226 232 240',
'primary-start': '6 182 212',
'primary-end': '99 102 241',
'btn-secondary-bg': '241 245 249',
'btn-secondary-hover-bg': '226 232 240',
'severity-critical': '244 63 94',
'severity-warning': '249 115 22',
'severity-suggestion': '34 197 94',
},
gradients: {
'gradient-1': '#8BC6EC',
'gradient-2': '#9599E2',
'gradient-3': '#23a6d5',
'gradient-4': '#23d5ab',
}
},
dark: {
colors: {
background: '15 23 42',
surface: '30 41 59',
'text-primary': '248 250 252',
'text-secondary': '148 163 184',
'border-default': '51 65 85',
'primary-start': '34 211 238',
'primary-end': '129 140 248',
'btn-secondary-bg': '51 65 85',
'btn-secondary-hover-bg': '71 85 105',
'severity-critical': '251 113 133',
'severity-warning': '251 146 60',
'severity-suggestion': '74 222 128',
},
gradients: {
'gradient-1': '#023047',
'gradient-2': '#219EBC',
'gradient-3': '#8ECAE6',
'gradient-4': '#23d5ab',
}
}
},
oceanic: {
light: {
colors: {
background: '240 249 255',
surface: '255 255 255',
'text-primary': '12 74 110',
'text-secondary': '56 127 165',
'border-default': '224 242 254',
'primary-start': '14 165 233',
'primary-end': '2 132 199',
'btn-secondary-bg': '224 242 254',
'btn-secondary-hover-bg': '186 230 253',
'severity-critical': '239 68 68',
'severity-warning': '245 158 11',
'severity-suggestion': '22 163 74',
},
gradients: {
'gradient-1': '#00C9FF',
'gradient-2': '#92FE9D',
'gradient-3': '#23a6d5',
'gradient-4': '#23d5ab',
}
},
dark: {
colors: {
background: '12 42 64',
surface: '16 60 88',
'text-primary': '240 249 255',
'text-secondary': '151 200 224',
'border-default': '8 47 73',
'primary-start': '56 189 248',
'primary-end': '6 182 212',
'btn-secondary-bg': '8 47 73',
'btn-secondary-hover-bg': '7 89 133',
'severity-critical': '251 113 133',
'severity-warning': '251 146 60',
'severity-suggestion': '74 222 128',
},
gradients: {
'gradient-1': '#070F2B',
'gradient-2': '#1B1A55',
'gradient-3': '#535C91',
'gradient-4': '#9290C3',
}
}
},
sunset: {
light: {
colors: {
background: '255 247 237',
surface: '255 255 255',
'text-primary': '124 45 18',
'text-secondary': '154 52 18',
'border-default': '254 226 226',
'primary-start': '249 115 22',
'primary-end': '239 68 68',
'btn-secondary-bg': '255 237 213',
'btn-secondary-hover-bg': '254 215 170',
'severity-critical': '220 38 38',
'severity-warning': '217 119 6',
'severity-suggestion': '22 163 74',
},
gradients: {
'gradient-1': '#ff9a8b',
'gradient-2': '#ff6a88',
'gradient-3': '#ff99ac',
'gradient-4': '#f4c4f3',
}
},
dark: {
colors: {
background: '68 28 0',
surface: '92 38 4',
'text-primary': '255 237 213',
'text-secondary': '254 215 170',
'border-default': '124 45 18',
'primary-start': '251 146 60',
'primary-end': '251 113 133',
'btn-secondary-bg': '124 45 18',
'btn-secondary-hover-bg': '154 52 18',
'severity-critical': '252 165 165',
'severity-warning': '253 186 116',
'severity-suggestion': '134 239 172',
},
gradients: {
'gradient-1': '#2d0f02',
'gradient-2': '#562B08',
'gradient-3': '#934a1a',
'gradient-4': '#C77D2E',
}
}
},
forest: {
light: {
colors: {
background: '240 253 244',
surface: '255 255 255',
'text-primary': '21 94 53',
'text-secondary': '22 101 52',
'border-default': '220 252 231',
'primary-start': '34 197 94',
'primary-end': '22 163 74',
'btn-secondary-bg': '220 252 231',
'btn-secondary-hover-bg': '187 247 208',
'severity-critical': '220 38 38',
'severity-warning': '217 119 6',
'severity-suggestion': '21 128 61',
},
gradients: {
'gradient-1': '#D4E7C5',
'gradient-2': '#BFD8AF',
'gradient-3': '#99BC85',
'gradient-4': '#E1F0DA',
}
},
dark: {
colors: {
background: '18 42 22',
surface: '20 64 28',
'text-primary': '220 252 231',
'text-secondary': '187 247 208',
'border-default': '22 101 52',
'primary-start': '74 222 128',
'primary-end': '34 197 94',
'btn-secondary-bg': '22 101 52',
'btn-secondary-hover-bg': '21 128 61',
'severity-critical': '252 165 165',
'severity-warning': '253 186 116',
'severity-suggestion': '134 239 172',
},
gradients: {
'gradient-1': '#043927',
'gradient-2': '#011F13',
'gradient-3': '#2E5C48',
'gradient-4': '#537a68',
}
}
},
cosmic: {
light: {
colors: {
background: '245 243 255',
surface: '255 255 255',
'text-primary': '59 7 100',
'text-secondary': '86 19 145',
'border-default': '233 213 255',
'primary-start': '168 85 247',
'primary-end': '219 39 119',
'btn-secondary-bg': '243 232 255',
'btn-secondary-hover-bg': '233 213 255',
'severity-critical': '225 29 72',
'severity-warning': '234 88 12',
'severity-suggestion': '21 128 61',
},
gradients: {
'gradient-1': '#a8c0ff',
'gradient-2': '#3f2b96',
'gradient-3': '#d9a7c7',
'gradient-4': '#fffcdc',
}
},
dark: {
colors: {
background: '28 10 44',
surface: '46 20 68',
'text-primary': '243 232 255',
'text-secondary': '224 204 250',
'border-default': '86 19 145',
'primary-start': '192 132 252',
'primary-end': '244 114 182',
'btn-secondary-bg': '86 19 145',
'btn-secondary-hover-bg': '107 33 168',
'severity-critical': '251 113 133',
'severity-warning': '251 146 60',
'severity-suggestion': '110 231 183',
},
gradients: {
'gradient-1': '#090723',
'gradient-2': '#27104b',
'gradient-3': '#5a2a8a',
'gradient-4': '#854ca8',
}
}
},
ruby: {
light: {
colors: {
background: '255 241 242',
surface: '255 255 255',
'text-primary': '136 19 55',
'text-secondary': '159 18 57',
'border-default': '254 226 226',
'primary-start': '225 29 72',
'primary-end': '190 24 93',
'btn-secondary-bg': '255 228 230',
'btn-secondary-hover-bg': '254 202 202',
'severity-critical': '220 38 38',
'severity-warning': '217 119 6',
'severity-suggestion': '22 163 74',
},
gradients: {
'gradient-1': '#ffdde1',
'gradient-2': '#ee9ca7',
'gradient-3': '#e9a8a6',
'gradient-4': '#e4e2dd',
}
},
dark: {
colors: {
background: '60 9 32',
surface: '88 12 46',
'text-primary': '255 228 230',
'text-secondary': '254 202 202',
'border-default': '136 19 55',
'primary-start': '244 63 94',
'primary-end': '219 39 119',
'btn-secondary-bg': '136 19 55',
'btn-secondary-hover-bg': '159 18 57',
'severity-critical': '252 165 165',
'severity-warning': '253 186 116',
'severity-suggestion': '134 239 172',
},
gradients: {
'gradient-1': '#3a001e',
'gradient-2': '#6a0f49',
'gradient-3': '#9f1c65',
'gradient-4': '#d42881',
}
}
},
monochrome: {
light: {
colors: {
background: '248 250 252',
surface: '255 255 255',
'text-primary': '15 23 42',
'text-secondary': '71 85 105',
'border-default': '226 232 240',
'primary-start': '51 65 85',
'primary-end': '15 23 42',
'btn-secondary-bg': '241 245 249',
'btn-secondary-hover-bg': '226 232 240',
'severity-critical': '220 38 38',
'severity-warning': '217 119 6',
'severity-suggestion': '22 163 74',
},
gradients: {
'gradient-1': '#d4d4d4',
'gradient-2': '#f5f5f5',
'gradient-3': '#e5e5e5',
'gradient-4': '#fafafa',
}
},
dark: {
colors: {
background: '2 6 23',
surface: '15 23 42',
'text-primary': '241 245 249',
'text-secondary': '148 163 184',
'border-default': '51 65 85',
'primary-start': '148 163 184',
'primary-end': '203 213 225',
'btn-secondary-bg': '51 65 85',
'btn-secondary-hover-bg': '71 85 105',
'severity-critical': '251 113 133',
'severity-warning': '251 146 60',
'severity-suggestion': '74 222 128',
},
gradients: {
'gradient-1': '#111827',
'gradient-2': '#1f2937',
'gradient-3': '#374151',
'gradient-4': '#4b5563',
}
}
},
};
export type ThemeName = keyof typeof themes;
export type Theme = typeof themes[ThemeName]['light'] | typeof themes[ThemeName]['dark'];
export function generateThemeCSS(theme: Theme): string {
let css = '';
for (const [key, value] of Object.entries(theme.colors)) {
css += `--color-${key}: ${value};\n`;
}
for (const [key, value] of Object.entries(theme.gradients)) {
css += `--${key}: ${value};\n`;
}
return css;
}