reflex 0.3.2a1__py3-none-any.whl → 0.3.3a1__py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.


This version of reflex might be problematic. Click here for more details.

Files changed (56) hide show
  1. reflex/.templates/jinja/web/pages/custom_component.js.jinja2 +20 -3
  2. reflex/.templates/web/next.config.js +1 -0
  3. reflex/.templates/web/utils/helpers/range.js +43 -0
  4. reflex/.templates/web/utils/state.js +10 -6
  5. reflex/__init__.py +312 -40
  6. reflex/__init__.pyi +477 -0
  7. reflex/compiler/compiler.py +3 -0
  8. reflex/components/__init__.py +138 -138
  9. reflex/components/component.py +29 -22
  10. reflex/components/datadisplay/__init__.py +3 -1
  11. reflex/components/datadisplay/code.py +388 -14
  12. reflex/components/datadisplay/code.pyi +1146 -10
  13. reflex/components/forms/button.py +3 -0
  14. reflex/components/forms/checkbox.py +3 -0
  15. reflex/components/forms/form.py +90 -27
  16. reflex/components/forms/input.py +3 -0
  17. reflex/components/forms/numberinput.py +3 -0
  18. reflex/components/forms/pininput.py +77 -21
  19. reflex/components/forms/radio.py +3 -0
  20. reflex/components/forms/rangeslider.py +3 -0
  21. reflex/components/forms/select.py +3 -0
  22. reflex/components/forms/slider.py +3 -0
  23. reflex/components/forms/switch.py +3 -0
  24. reflex/components/forms/textarea.py +3 -0
  25. reflex/components/layout/foreach.py +12 -6
  26. reflex/components/libs/chakra.py +2 -0
  27. reflex/components/libs/chakra.pyi +323 -24
  28. reflex/components/tags/iter_tag.py +18 -18
  29. reflex/components/tags/tag.py +3 -2
  30. reflex/components/typography/markdown.py +10 -0
  31. reflex/config.py +12 -0
  32. reflex/constants/installer.py +4 -4
  33. reflex/event.py +4 -0
  34. reflex/page.py +3 -4
  35. reflex/page.pyi +17 -0
  36. reflex/reflex.py +3 -0
  37. reflex/state.py +31 -12
  38. reflex/testing.py +1 -1
  39. reflex/utils/build.py +24 -19
  40. reflex/utils/console.py +5 -1
  41. reflex/utils/format.py +26 -9
  42. reflex/utils/prerequisites.py +27 -28
  43. reflex/utils/processes.py +5 -4
  44. reflex/vars.py +80 -12
  45. reflex/vars.pyi +7 -0
  46. {reflex-0.3.2a1.dist-info → reflex-0.3.3a1.dist-info}/METADATA +3 -2
  47. {reflex-0.3.2a1.dist-info → reflex-0.3.3a1.dist-info}/RECORD +50 -53
  48. reflex/.templates/web/.pytest_cache/.gitignore +0 -2
  49. reflex/.templates/web/.pytest_cache/CACHEDIR.TAG +0 -4
  50. reflex/.templates/web/.pytest_cache/README.md +0 -8
  51. reflex/.templates/web/.pytest_cache/v/cache/nodeids +0 -1
  52. reflex/.templates/web/.pytest_cache/v/cache/stepwise +0 -1
  53. reflex/.templates/web/styles/code/prism.js +0 -1015
  54. {reflex-0.3.2a1.dist-info → reflex-0.3.3a1.dist-info}/LICENSE +0 -0
  55. {reflex-0.3.2a1.dist-info → reflex-0.3.3a1.dist-info}/WHEEL +0 -0
  56. {reflex-0.3.2a1.dist-info → reflex-0.3.3a1.dist-info}/entry_points.txt +0 -0
@@ -1,1015 +0,0 @@
1
- export const light = {
2
- 'code[class*="language-"]': {
3
- background: "hsl(230, 1%, 98%)",
4
- color: "hsl(230, 8%, 24%)",
5
- fontFamily:
6
- '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
7
- direction: "ltr",
8
- textAlign: "left",
9
- whiteSpace: "pre",
10
- wordSpacing: "normal",
11
- wordBreak: "normal",
12
- lineHeight: "1.5",
13
- MozTabSize: "2",
14
- OTabSize: "2",
15
- tabSize: "2",
16
- WebkitHyphens: "none",
17
- MozHyphens: "none",
18
- msHyphens: "none",
19
- hyphens: "none",
20
- },
21
- 'pre[class*="language-"]': {
22
- background: "hsl(230, 1%, 98%)",
23
- color: "hsl(230, 8%, 24%)",
24
- fontFamily:
25
- '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
26
- direction: "ltr",
27
- textAlign: "left",
28
- whiteSpace: "pre",
29
- wordSpacing: "normal",
30
- wordBreak: "normal",
31
- lineHeight: "1.5",
32
- MozTabSize: "2",
33
- OTabSize: "2",
34
- tabSize: "2",
35
- WebkitHyphens: "none",
36
- MozHyphens: "none",
37
- msHyphens: "none",
38
- hyphens: "none",
39
- padding: "1em",
40
- margin: "0.5em 0",
41
- overflow: "auto",
42
- borderRadius: "0.3em",
43
- },
44
- 'code[class*="language-"]::-moz-selection': {
45
- background: "hsl(230, 1%, 90%)",
46
- color: "inherit",
47
- },
48
- 'code[class*="language-"] *::-moz-selection': {
49
- background: "hsl(230, 1%, 90%)",
50
- color: "inherit",
51
- },
52
- 'pre[class*="language-"] *::-moz-selection': {
53
- background: "hsl(230, 1%, 90%)",
54
- color: "inherit",
55
- },
56
- 'code[class*="language-"]::selection': {
57
- background: "hsl(230, 1%, 90%)",
58
- color: "inherit",
59
- },
60
- 'code[class*="language-"] *::selection': {
61
- background: "hsl(230, 1%, 90%)",
62
- color: "inherit",
63
- },
64
- 'pre[class*="language-"] *::selection': {
65
- background: "hsl(230, 1%, 90%)",
66
- color: "inherit",
67
- },
68
- ':not(pre) > code[class*="language-"]': {
69
- padding: "0.2em 0.3em",
70
- borderRadius: "0.3em",
71
- whiteSpace: "normal",
72
- },
73
- comment: {
74
- color: "hsl(230, 4%, 64%)",
75
- fontStyle: "italic",
76
- },
77
- prolog: {
78
- color: "hsl(230, 4%, 64%)",
79
- },
80
- cdata: {
81
- color: "hsl(230, 4%, 64%)",
82
- },
83
- doctype: {
84
- color: "hsl(230, 8%, 24%)",
85
- },
86
- punctuation: {
87
- color: "hsl(230, 8%, 24%)",
88
- },
89
- entity: {
90
- color: "hsl(230, 8%, 24%)",
91
- cursor: "help",
92
- },
93
- "attr-name": {
94
- color: "hsl(35, 99%, 36%)",
95
- },
96
- "class-name": {
97
- color: "hsl(35, 99%, 36%)",
98
- },
99
- boolean: {
100
- color: "hsl(35, 99%, 36%)",
101
- },
102
- constant: {
103
- color: "hsl(35, 99%, 36%)",
104
- },
105
- number: {
106
- color: "hsl(35, 99%, 36%)",
107
- },
108
- atrule: {
109
- color: "hsl(35, 99%, 36%)",
110
- },
111
- keyword: {
112
- color: "hsl(301, 63%, 40%)",
113
- },
114
- property: {
115
- color: "hsl(5, 74%, 59%)",
116
- },
117
- tag: {
118
- color: "hsl(5, 74%, 59%)",
119
- },
120
- symbol: {
121
- color: "hsl(5, 74%, 59%)",
122
- },
123
- deleted: {
124
- color: "hsl(5, 74%, 59%)",
125
- },
126
- important: {
127
- color: "hsl(5, 74%, 59%)",
128
- },
129
- selector: {
130
- color: "hsl(119, 34%, 47%)",
131
- },
132
- string: {
133
- color: "hsl(119, 34%, 47%)",
134
- },
135
- char: {
136
- color: "hsl(119, 34%, 47%)",
137
- },
138
- builtin: {
139
- color: "hsl(119, 34%, 47%)",
140
- },
141
- inserted: {
142
- color: "hsl(119, 34%, 47%)",
143
- },
144
- regex: {
145
- color: "hsl(119, 34%, 47%)",
146
- },
147
- "attr-value": {
148
- color: "hsl(119, 34%, 47%)",
149
- },
150
- "attr-value > .token.punctuation": {
151
- color: "hsl(119, 34%, 47%)",
152
- },
153
- variable: {
154
- color: "hsl(221, 87%, 60%)",
155
- },
156
- operator: {
157
- color: "hsl(221, 87%, 60%)",
158
- },
159
- function: {
160
- color: "hsl(221, 87%, 60%)",
161
- },
162
- url: {
163
- color: "hsl(198, 99%, 37%)",
164
- },
165
- "attr-value > .token.punctuation.attr-equals": {
166
- color: "hsl(230, 8%, 24%)",
167
- },
168
- "special-attr > .token.attr-value > .token.value.css": {
169
- color: "hsl(230, 8%, 24%)",
170
- },
171
- ".language-css .token.selector": {
172
- color: "hsl(5, 74%, 59%)",
173
- },
174
- ".language-css .token.property": {
175
- color: "hsl(230, 8%, 24%)",
176
- },
177
- ".language-css .token.function": {
178
- color: "hsl(198, 99%, 37%)",
179
- },
180
- ".language-css .token.url > .token.function": {
181
- color: "hsl(198, 99%, 37%)",
182
- },
183
- ".language-css .token.url > .token.string.url": {
184
- color: "hsl(119, 34%, 47%)",
185
- },
186
- ".language-css .token.important": {
187
- color: "hsl(301, 63%, 40%)",
188
- },
189
- ".language-css .token.atrule .token.rule": {
190
- color: "hsl(301, 63%, 40%)",
191
- },
192
- ".language-javascript .token.operator": {
193
- color: "hsl(301, 63%, 40%)",
194
- },
195
- ".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation":
196
- {
197
- color: "hsl(344, 84%, 43%)",
198
- },
199
- ".language-json .token.operator": {
200
- color: "hsl(230, 8%, 24%)",
201
- },
202
- ".language-json .token.null.keyword": {
203
- color: "hsl(35, 99%, 36%)",
204
- },
205
- ".language-markdown .token.url": {
206
- color: "hsl(230, 8%, 24%)",
207
- },
208
- ".language-markdown .token.url > .token.operator": {
209
- color: "hsl(230, 8%, 24%)",
210
- },
211
- ".language-markdown .token.url-reference.url > .token.string": {
212
- color: "hsl(230, 8%, 24%)",
213
- },
214
- ".language-markdown .token.url > .token.content": {
215
- color: "hsl(221, 87%, 60%)",
216
- },
217
- ".language-markdown .token.url > .token.url": {
218
- color: "hsl(198, 99%, 37%)",
219
- },
220
- ".language-markdown .token.url-reference.url": {
221
- color: "hsl(198, 99%, 37%)",
222
- },
223
- ".language-markdown .token.blockquote.punctuation": {
224
- color: "hsl(230, 4%, 64%)",
225
- fontStyle: "italic",
226
- },
227
- ".language-markdown .token.hr.punctuation": {
228
- color: "hsl(230, 4%, 64%)",
229
- fontStyle: "italic",
230
- },
231
- ".language-markdown .token.code-snippet": {
232
- color: "hsl(119, 34%, 47%)",
233
- },
234
- ".language-markdown .token.bold .token.content": {
235
- color: "hsl(35, 99%, 36%)",
236
- },
237
- ".language-markdown .token.italic .token.content": {
238
- color: "hsl(301, 63%, 40%)",
239
- },
240
- ".language-markdown .token.strike .token.content": {
241
- color: "hsl(5, 74%, 59%)",
242
- },
243
- ".language-markdown .token.strike .token.punctuation": {
244
- color: "hsl(5, 74%, 59%)",
245
- },
246
- ".language-markdown .token.list.punctuation": {
247
- color: "hsl(5, 74%, 59%)",
248
- },
249
- ".language-markdown .token.title.important > .token.punctuation": {
250
- color: "hsl(5, 74%, 59%)",
251
- },
252
- bold: {
253
- fontWeight: "bold",
254
- },
255
- italic: {
256
- fontStyle: "italic",
257
- },
258
- namespace: {
259
- Opacity: "0.8",
260
- },
261
- "token.tab:not(:empty):before": {
262
- color: "hsla(230, 8%, 24%, 0.2)",
263
- },
264
- "token.cr:before": {
265
- color: "hsla(230, 8%, 24%, 0.2)",
266
- },
267
- "token.lf:before": {
268
- color: "hsla(230, 8%, 24%, 0.2)",
269
- },
270
- "token.space:before": {
271
- color: "hsla(230, 8%, 24%, 0.2)",
272
- },
273
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item": {
274
- marginRight: "0.4em",
275
- },
276
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
277
- background: "hsl(230, 1%, 90%)",
278
- color: "hsl(230, 6%, 44%)",
279
- padding: "0.1em 0.4em",
280
- borderRadius: "0.3em",
281
- },
282
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
283
- background: "hsl(230, 1%, 90%)",
284
- color: "hsl(230, 6%, 44%)",
285
- padding: "0.1em 0.4em",
286
- borderRadius: "0.3em",
287
- },
288
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
289
- background: "hsl(230, 1%, 90%)",
290
- color: "hsl(230, 6%, 44%)",
291
- padding: "0.1em 0.4em",
292
- borderRadius: "0.3em",
293
- },
294
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
295
- background: "hsl(230, 1%, 78%)",
296
- color: "hsl(230, 8%, 24%)",
297
- },
298
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
299
- background: "hsl(230, 1%, 78%)",
300
- color: "hsl(230, 8%, 24%)",
301
- },
302
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
303
- background: "hsl(230, 1%, 78%)",
304
- color: "hsl(230, 8%, 24%)",
305
- },
306
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
307
- background: "hsl(230, 1%, 78%)",
308
- color: "hsl(230, 8%, 24%)",
309
- },
310
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
311
- background: "hsl(230, 1%, 78%)",
312
- color: "hsl(230, 8%, 24%)",
313
- },
314
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
315
- background: "hsl(230, 1%, 78%)",
316
- color: "hsl(230, 8%, 24%)",
317
- },
318
- ".line-highlight.line-highlight": {
319
- background: "hsla(230, 8%, 24%, 0.05)",
320
- },
321
- ".line-highlight.line-highlight:before": {
322
- background: "hsl(230, 1%, 90%)",
323
- color: "hsl(230, 8%, 24%)",
324
- padding: "0.1em 0.6em",
325
- borderRadius: "0.3em",
326
- boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)",
327
- },
328
- ".line-highlight.line-highlight[data-end]:after": {
329
- background: "hsl(230, 1%, 90%)",
330
- color: "hsl(230, 8%, 24%)",
331
- padding: "0.1em 0.6em",
332
- borderRadius: "0.3em",
333
- boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)",
334
- },
335
- "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before":
336
- {
337
- backgroundColor: "hsla(230, 8%, 24%, 0.05)",
338
- },
339
- ".line-numbers.line-numbers .line-numbers-rows": {
340
- borderRightColor: "hsla(230, 8%, 24%, 0.2)",
341
- },
342
- ".command-line .command-line-prompt": {
343
- borderRightColor: "hsla(230, 8%, 24%, 0.2)",
344
- },
345
- ".line-numbers .line-numbers-rows > span:before": {
346
- color: "hsl(230, 1%, 62%)",
347
- },
348
- ".command-line .command-line-prompt > span:before": {
349
- color: "hsl(230, 1%, 62%)",
350
- },
351
- ".rainbow-braces .token.token.punctuation.brace-level-1": {
352
- color: "hsl(5, 74%, 59%)",
353
- },
354
- ".rainbow-braces .token.token.punctuation.brace-level-5": {
355
- color: "hsl(5, 74%, 59%)",
356
- },
357
- ".rainbow-braces .token.token.punctuation.brace-level-9": {
358
- color: "hsl(5, 74%, 59%)",
359
- },
360
- ".rainbow-braces .token.token.punctuation.brace-level-2": {
361
- color: "hsl(119, 34%, 47%)",
362
- },
363
- ".rainbow-braces .token.token.punctuation.brace-level-6": {
364
- color: "hsl(119, 34%, 47%)",
365
- },
366
- ".rainbow-braces .token.token.punctuation.brace-level-10": {
367
- color: "hsl(119, 34%, 47%)",
368
- },
369
- ".rainbow-braces .token.token.punctuation.brace-level-3": {
370
- color: "hsl(221, 87%, 60%)",
371
- },
372
- ".rainbow-braces .token.token.punctuation.brace-level-7": {
373
- color: "hsl(221, 87%, 60%)",
374
- },
375
- ".rainbow-braces .token.token.punctuation.brace-level-11": {
376
- color: "hsl(221, 87%, 60%)",
377
- },
378
- ".rainbow-braces .token.token.punctuation.brace-level-4": {
379
- color: "hsl(301, 63%, 40%)",
380
- },
381
- ".rainbow-braces .token.token.punctuation.brace-level-8": {
382
- color: "hsl(301, 63%, 40%)",
383
- },
384
- ".rainbow-braces .token.token.punctuation.brace-level-12": {
385
- color: "hsl(301, 63%, 40%)",
386
- },
387
- "pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
388
- backgroundColor: "hsla(353, 100%, 66%, 0.15)",
389
- },
390
- "pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
391
- backgroundColor: "hsla(353, 100%, 66%, 0.15)",
392
- },
393
- "pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection":
394
- {
395
- backgroundColor: "hsla(353, 95%, 66%, 0.25)",
396
- },
397
- "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection":
398
- {
399
- backgroundColor: "hsla(353, 95%, 66%, 0.25)",
400
- },
401
- "pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection":
402
- {
403
- backgroundColor: "hsla(353, 95%, 66%, 0.25)",
404
- },
405
- "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection":
406
- {
407
- backgroundColor: "hsla(353, 95%, 66%, 0.25)",
408
- },
409
- "pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": {
410
- backgroundColor: "hsla(353, 95%, 66%, 0.25)",
411
- },
412
- "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": {
413
- backgroundColor: "hsla(353, 95%, 66%, 0.25)",
414
- },
415
- "pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": {
416
- backgroundColor: "hsla(353, 95%, 66%, 0.25)",
417
- },
418
- "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": {
419
- backgroundColor: "hsla(353, 95%, 66%, 0.25)",
420
- },
421
- "pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
422
- backgroundColor: "hsla(137, 100%, 55%, 0.15)",
423
- },
424
- "pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
425
- backgroundColor: "hsla(137, 100%, 55%, 0.15)",
426
- },
427
- "pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection":
428
- {
429
- backgroundColor: "hsla(135, 73%, 55%, 0.25)",
430
- },
431
- "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection":
432
- {
433
- backgroundColor: "hsla(135, 73%, 55%, 0.25)",
434
- },
435
- "pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection":
436
- {
437
- backgroundColor: "hsla(135, 73%, 55%, 0.25)",
438
- },
439
- "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection":
440
- {
441
- backgroundColor: "hsla(135, 73%, 55%, 0.25)",
442
- },
443
- "pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": {
444
- backgroundColor: "hsla(135, 73%, 55%, 0.25)",
445
- },
446
- "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": {
447
- backgroundColor: "hsla(135, 73%, 55%, 0.25)",
448
- },
449
- "pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": {
450
- backgroundColor: "hsla(135, 73%, 55%, 0.25)",
451
- },
452
- "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": {
453
- backgroundColor: "hsla(135, 73%, 55%, 0.25)",
454
- },
455
- ".prism-previewer.prism-previewer:before": {
456
- borderColor: "hsl(0, 0, 95%)",
457
- },
458
- ".prism-previewer-gradient.prism-previewer-gradient div": {
459
- borderColor: "hsl(0, 0, 95%)",
460
- borderRadius: "0.3em",
461
- },
462
- ".prism-previewer-color.prism-previewer-color:before": {
463
- borderRadius: "0.3em",
464
- },
465
- ".prism-previewer-easing.prism-previewer-easing:before": {
466
- borderRadius: "0.3em",
467
- },
468
- ".prism-previewer.prism-previewer:after": {
469
- borderTopColor: "hsl(0, 0, 95%)",
470
- },
471
- ".prism-previewer-flipped.prism-previewer-flipped.after": {
472
- borderBottomColor: "hsl(0, 0, 95%)",
473
- },
474
- ".prism-previewer-angle.prism-previewer-angle:before": {
475
- background: "hsl(0, 0%, 100%)",
476
- },
477
- ".prism-previewer-time.prism-previewer-time:before": {
478
- background: "hsl(0, 0%, 100%)",
479
- },
480
- ".prism-previewer-easing.prism-previewer-easing": {
481
- background: "hsl(0, 0%, 100%)",
482
- },
483
- ".prism-previewer-angle.prism-previewer-angle circle": {
484
- stroke: "hsl(230, 8%, 24%)",
485
- strokeOpacity: "1",
486
- },
487
- ".prism-previewer-time.prism-previewer-time circle": {
488
- stroke: "hsl(230, 8%, 24%)",
489
- strokeOpacity: "1",
490
- },
491
- ".prism-previewer-easing.prism-previewer-easing circle": {
492
- stroke: "hsl(230, 8%, 24%)",
493
- fill: "transparent",
494
- },
495
- ".prism-previewer-easing.prism-previewer-easing path": {
496
- stroke: "hsl(230, 8%, 24%)",
497
- },
498
- ".prism-previewer-easing.prism-previewer-easing line": {
499
- stroke: "hsl(230, 8%, 24%)",
500
- },
501
- };
502
-
503
- export const dark = {
504
- 'code[class*="language-"]': {
505
- background: "hsl(220, 13%, 18%)",
506
- color: "hsl(220, 14%, 71%)",
507
- textShadow: "0 1px rgba(0, 0, 0, 0.3)",
508
- fontFamily:
509
- '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
510
- direction: "ltr",
511
- textAlign: "left",
512
- whiteSpace: "pre",
513
- wordSpacing: "normal",
514
- wordBreak: "normal",
515
- lineHeight: "1.5",
516
- MozTabSize: "2",
517
- OTabSize: "2",
518
- tabSize: "2",
519
- WebkitHyphens: "none",
520
- MozHyphens: "none",
521
- msHyphens: "none",
522
- hyphens: "none",
523
- },
524
- 'pre[class*="language-"]': {
525
- background: "hsl(220, 13%, 18%)",
526
- color: "hsl(220, 14%, 71%)",
527
- textShadow: "0 1px rgba(0, 0, 0, 0.3)",
528
- fontFamily:
529
- '"Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace',
530
- direction: "ltr",
531
- textAlign: "left",
532
- whiteSpace: "pre",
533
- wordSpacing: "normal",
534
- wordBreak: "normal",
535
- lineHeight: "1.5",
536
- MozTabSize: "2",
537
- OTabSize: "2",
538
- tabSize: "2",
539
- WebkitHyphens: "none",
540
- MozHyphens: "none",
541
- msHyphens: "none",
542
- hyphens: "none",
543
- padding: "1em",
544
- margin: "0.5em 0",
545
- overflow: "auto",
546
- borderRadius: "0.3em",
547
- },
548
- 'code[class*="language-"]::-moz-selection': {
549
- background: "hsl(220, 13%, 28%)",
550
- color: "inherit",
551
- textShadow: "none",
552
- },
553
- 'code[class*="language-"] *::-moz-selection': {
554
- background: "hsl(220, 13%, 28%)",
555
- color: "inherit",
556
- textShadow: "none",
557
- },
558
- 'pre[class*="language-"] *::-moz-selection': {
559
- background: "hsl(220, 13%, 28%)",
560
- color: "inherit",
561
- textShadow: "none",
562
- },
563
- 'code[class*="language-"]::selection': {
564
- background: "hsl(220, 13%, 28%)",
565
- color: "inherit",
566
- textShadow: "none",
567
- },
568
- 'code[class*="language-"] *::selection': {
569
- background: "hsl(220, 13%, 28%)",
570
- color: "inherit",
571
- textShadow: "none",
572
- },
573
- 'pre[class*="language-"] *::selection': {
574
- background: "hsl(220, 13%, 28%)",
575
- color: "inherit",
576
- textShadow: "none",
577
- },
578
- ':not(pre) > code[class*="language-"]': {
579
- padding: "0.2em 0.3em",
580
- borderRadius: "0.3em",
581
- whiteSpace: "normal",
582
- },
583
- comment: {
584
- color: "hsl(220, 10%, 40%)",
585
- fontStyle: "italic",
586
- },
587
- prolog: {
588
- color: "hsl(220, 10%, 40%)",
589
- },
590
- cdata: {
591
- color: "hsl(220, 10%, 40%)",
592
- },
593
- doctype: {
594
- color: "hsl(220, 14%, 71%)",
595
- },
596
- punctuation: {
597
- color: "hsl(220, 14%, 71%)",
598
- },
599
- entity: {
600
- color: "hsl(220, 14%, 71%)",
601
- cursor: "help",
602
- },
603
- "attr-name": {
604
- color: "hsl(29, 54%, 61%)",
605
- },
606
- "class-name": {
607
- color: "hsl(29, 54%, 61%)",
608
- },
609
- boolean: {
610
- color: "hsl(29, 54%, 61%)",
611
- },
612
- constant: {
613
- color: "hsl(29, 54%, 61%)",
614
- },
615
- number: {
616
- color: "hsl(29, 54%, 61%)",
617
- },
618
- atrule: {
619
- color: "hsl(29, 54%, 61%)",
620
- },
621
- keyword: {
622
- color: "hsl(286, 60%, 67%)",
623
- },
624
- property: {
625
- color: "hsl(355, 65%, 65%)",
626
- },
627
- tag: {
628
- color: "hsl(355, 65%, 65%)",
629
- },
630
- symbol: {
631
- color: "hsl(355, 65%, 65%)",
632
- },
633
- deleted: {
634
- color: "hsl(355, 65%, 65%)",
635
- },
636
- important: {
637
- color: "hsl(355, 65%, 65%)",
638
- },
639
- selector: {
640
- color: "hsl(95, 38%, 62%)",
641
- },
642
- string: {
643
- color: "hsl(95, 38%, 62%)",
644
- },
645
- char: {
646
- color: "hsl(95, 38%, 62%)",
647
- },
648
- builtin: {
649
- color: "hsl(95, 38%, 62%)",
650
- },
651
- inserted: {
652
- color: "hsl(95, 38%, 62%)",
653
- },
654
- regex: {
655
- color: "hsl(95, 38%, 62%)",
656
- },
657
- "attr-value": {
658
- color: "hsl(95, 38%, 62%)",
659
- },
660
- "attr-value > .token.punctuation": {
661
- color: "hsl(95, 38%, 62%)",
662
- },
663
- variable: {
664
- color: "hsl(207, 82%, 66%)",
665
- },
666
- operator: {
667
- color: "hsl(207, 82%, 66%)",
668
- },
669
- function: {
670
- color: "hsl(207, 82%, 66%)",
671
- },
672
- url: {
673
- color: "hsl(187, 47%, 55%)",
674
- },
675
- "attr-value > .token.punctuation.attr-equals": {
676
- color: "hsl(220, 14%, 71%)",
677
- },
678
- "special-attr > .token.attr-value > .token.value.css": {
679
- color: "hsl(220, 14%, 71%)",
680
- },
681
- ".language-css .token.selector": {
682
- color: "hsl(355, 65%, 65%)",
683
- },
684
- ".language-css .token.property": {
685
- color: "hsl(220, 14%, 71%)",
686
- },
687
- ".language-css .token.function": {
688
- color: "hsl(187, 47%, 55%)",
689
- },
690
- ".language-css .token.url > .token.function": {
691
- color: "hsl(187, 47%, 55%)",
692
- },
693
- ".language-css .token.url > .token.string.url": {
694
- color: "hsl(95, 38%, 62%)",
695
- },
696
- ".language-css .token.important": {
697
- color: "hsl(286, 60%, 67%)",
698
- },
699
- ".language-css .token.atrule .token.rule": {
700
- color: "hsl(286, 60%, 67%)",
701
- },
702
- ".language-javascript .token.operator": {
703
- color: "hsl(286, 60%, 67%)",
704
- },
705
- ".language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation":
706
- {
707
- color: "hsl(5, 48%, 51%)",
708
- },
709
- ".language-json .token.operator": {
710
- color: "hsl(220, 14%, 71%)",
711
- },
712
- ".language-json .token.null.keyword": {
713
- color: "hsl(29, 54%, 61%)",
714
- },
715
- ".language-markdown .token.url": {
716
- color: "hsl(220, 14%, 71%)",
717
- },
718
- ".language-markdown .token.url > .token.operator": {
719
- color: "hsl(220, 14%, 71%)",
720
- },
721
- ".language-markdown .token.url-reference.url > .token.string": {
722
- color: "hsl(220, 14%, 71%)",
723
- },
724
- ".language-markdown .token.url > .token.content": {
725
- color: "hsl(207, 82%, 66%)",
726
- },
727
- ".language-markdown .token.url > .token.url": {
728
- color: "hsl(187, 47%, 55%)",
729
- },
730
- ".language-markdown .token.url-reference.url": {
731
- color: "hsl(187, 47%, 55%)",
732
- },
733
- ".language-markdown .token.blockquote.punctuation": {
734
- color: "hsl(220, 10%, 40%)",
735
- fontStyle: "italic",
736
- },
737
- ".language-markdown .token.hr.punctuation": {
738
- color: "hsl(220, 10%, 40%)",
739
- fontStyle: "italic",
740
- },
741
- ".language-markdown .token.code-snippet": {
742
- color: "hsl(95, 38%, 62%)",
743
- },
744
- ".language-markdown .token.bold .token.content": {
745
- color: "hsl(29, 54%, 61%)",
746
- },
747
- ".language-markdown .token.italic .token.content": {
748
- color: "hsl(286, 60%, 67%)",
749
- },
750
- ".language-markdown .token.strike .token.content": {
751
- color: "hsl(355, 65%, 65%)",
752
- },
753
- ".language-markdown .token.strike .token.punctuation": {
754
- color: "hsl(355, 65%, 65%)",
755
- },
756
- ".language-markdown .token.list.punctuation": {
757
- color: "hsl(355, 65%, 65%)",
758
- },
759
- ".language-markdown .token.title.important > .token.punctuation": {
760
- color: "hsl(355, 65%, 65%)",
761
- },
762
- bold: {
763
- fontWeight: "bold",
764
- },
765
- italic: {
766
- fontStyle: "italic",
767
- },
768
- namespace: {
769
- Opacity: "0.8",
770
- },
771
- "token.tab:not(:empty):before": {
772
- color: "hsla(220, 14%, 71%, 0.15)",
773
- textShadow: "none",
774
- },
775
- "token.cr:before": {
776
- color: "hsla(220, 14%, 71%, 0.15)",
777
- textShadow: "none",
778
- },
779
- "token.lf:before": {
780
- color: "hsla(220, 14%, 71%, 0.15)",
781
- textShadow: "none",
782
- },
783
- "token.space:before": {
784
- color: "hsla(220, 14%, 71%, 0.15)",
785
- textShadow: "none",
786
- },
787
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item": {
788
- marginRight: "0.4em",
789
- },
790
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button": {
791
- background: "hsl(220, 13%, 26%)",
792
- color: "hsl(220, 9%, 55%)",
793
- padding: "0.1em 0.4em",
794
- borderRadius: "0.3em",
795
- },
796
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a": {
797
- background: "hsl(220, 13%, 26%)",
798
- color: "hsl(220, 9%, 55%)",
799
- padding: "0.1em 0.4em",
800
- borderRadius: "0.3em",
801
- },
802
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span": {
803
- background: "hsl(220, 13%, 26%)",
804
- color: "hsl(220, 9%, 55%)",
805
- padding: "0.1em 0.4em",
806
- borderRadius: "0.3em",
807
- },
808
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover": {
809
- background: "hsl(220, 13%, 28%)",
810
- color: "hsl(220, 14%, 71%)",
811
- },
812
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus": {
813
- background: "hsl(220, 13%, 28%)",
814
- color: "hsl(220, 14%, 71%)",
815
- },
816
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover": {
817
- background: "hsl(220, 13%, 28%)",
818
- color: "hsl(220, 14%, 71%)",
819
- },
820
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus": {
821
- background: "hsl(220, 13%, 28%)",
822
- color: "hsl(220, 14%, 71%)",
823
- },
824
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover": {
825
- background: "hsl(220, 13%, 28%)",
826
- color: "hsl(220, 14%, 71%)",
827
- },
828
- "div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus": {
829
- background: "hsl(220, 13%, 28%)",
830
- color: "hsl(220, 14%, 71%)",
831
- },
832
- ".line-highlight.line-highlight": {
833
- background: "hsla(220, 100%, 80%, 0.04)",
834
- },
835
- ".line-highlight.line-highlight:before": {
836
- background: "hsl(220, 13%, 26%)",
837
- color: "hsl(220, 14%, 71%)",
838
- padding: "0.1em 0.6em",
839
- borderRadius: "0.3em",
840
- boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)",
841
- },
842
- ".line-highlight.line-highlight[data-end]:after": {
843
- background: "hsl(220, 13%, 26%)",
844
- color: "hsl(220, 14%, 71%)",
845
- padding: "0.1em 0.6em",
846
- borderRadius: "0.3em",
847
- boxShadow: "0 2px 0 0 rgba(0, 0, 0, 0.2)",
848
- },
849
- "pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before":
850
- {
851
- backgroundColor: "hsla(220, 100%, 80%, 0.04)",
852
- },
853
- ".line-numbers.line-numbers .line-numbers-rows": {
854
- borderRightColor: "hsla(220, 14%, 71%, 0.15)",
855
- },
856
- ".command-line .command-line-prompt": {
857
- borderRightColor: "hsla(220, 14%, 71%, 0.15)",
858
- },
859
- ".line-numbers .line-numbers-rows > span:before": {
860
- color: "hsl(220, 14%, 45%)",
861
- },
862
- ".command-line .command-line-prompt > span:before": {
863
- color: "hsl(220, 14%, 45%)",
864
- },
865
- ".rainbow-braces .token.token.punctuation.brace-level-1": {
866
- color: "hsl(355, 65%, 65%)",
867
- },
868
- ".rainbow-braces .token.token.punctuation.brace-level-5": {
869
- color: "hsl(355, 65%, 65%)",
870
- },
871
- ".rainbow-braces .token.token.punctuation.brace-level-9": {
872
- color: "hsl(355, 65%, 65%)",
873
- },
874
- ".rainbow-braces .token.token.punctuation.brace-level-2": {
875
- color: "hsl(95, 38%, 62%)",
876
- },
877
- ".rainbow-braces .token.token.punctuation.brace-level-6": {
878
- color: "hsl(95, 38%, 62%)",
879
- },
880
- ".rainbow-braces .token.token.punctuation.brace-level-10": {
881
- color: "hsl(95, 38%, 62%)",
882
- },
883
- ".rainbow-braces .token.token.punctuation.brace-level-3": {
884
- color: "hsl(207, 82%, 66%)",
885
- },
886
- ".rainbow-braces .token.token.punctuation.brace-level-7": {
887
- color: "hsl(207, 82%, 66%)",
888
- },
889
- ".rainbow-braces .token.token.punctuation.brace-level-11": {
890
- color: "hsl(207, 82%, 66%)",
891
- },
892
- ".rainbow-braces .token.token.punctuation.brace-level-4": {
893
- color: "hsl(286, 60%, 67%)",
894
- },
895
- ".rainbow-braces .token.token.punctuation.brace-level-8": {
896
- color: "hsl(286, 60%, 67%)",
897
- },
898
- ".rainbow-braces .token.token.punctuation.brace-level-12": {
899
- color: "hsl(286, 60%, 67%)",
900
- },
901
- "pre.diff-highlight > code .token.token.deleted:not(.prefix)": {
902
- backgroundColor: "hsla(353, 100%, 66%, 0.15)",
903
- },
904
- "pre > code.diff-highlight .token.token.deleted:not(.prefix)": {
905
- backgroundColor: "hsla(353, 100%, 66%, 0.15)",
906
- },
907
- "pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection":
908
- {
909
- backgroundColor: "hsla(353, 95%, 66%, 0.25)",
910
- },
911
- "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection":
912
- {
913
- backgroundColor: "hsla(353, 95%, 66%, 0.25)",
914
- },
915
- "pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection":
916
- {
917
- backgroundColor: "hsla(353, 95%, 66%, 0.25)",
918
- },
919
- "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection":
920
- {
921
- backgroundColor: "hsla(353, 95%, 66%, 0.25)",
922
- },
923
- "pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection": {
924
- backgroundColor: "hsla(353, 95%, 66%, 0.25)",
925
- },
926
- "pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection": {
927
- backgroundColor: "hsla(353, 95%, 66%, 0.25)",
928
- },
929
- "pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection": {
930
- backgroundColor: "hsla(353, 95%, 66%, 0.25)",
931
- },
932
- "pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection": {
933
- backgroundColor: "hsla(353, 95%, 66%, 0.25)",
934
- },
935
- "pre.diff-highlight > code .token.token.inserted:not(.prefix)": {
936
- backgroundColor: "hsla(137, 100%, 55%, 0.15)",
937
- },
938
- "pre > code.diff-highlight .token.token.inserted:not(.prefix)": {
939
- backgroundColor: "hsla(137, 100%, 55%, 0.15)",
940
- },
941
- "pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection":
942
- {
943
- backgroundColor: "hsla(135, 73%, 55%, 0.25)",
944
- },
945
- "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection":
946
- {
947
- backgroundColor: "hsla(135, 73%, 55%, 0.25)",
948
- },
949
- "pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection":
950
- {
951
- backgroundColor: "hsla(135, 73%, 55%, 0.25)",
952
- },
953
- "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection":
954
- {
955
- backgroundColor: "hsla(135, 73%, 55%, 0.25)",
956
- },
957
- "pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection": {
958
- backgroundColor: "hsla(135, 73%, 55%, 0.25)",
959
- },
960
- "pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection": {
961
- backgroundColor: "hsla(135, 73%, 55%, 0.25)",
962
- },
963
- "pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection": {
964
- backgroundColor: "hsla(135, 73%, 55%, 0.25)",
965
- },
966
- "pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection": {
967
- backgroundColor: "hsla(135, 73%, 55%, 0.25)",
968
- },
969
- ".prism-previewer.prism-previewer:before": {
970
- borderColor: "hsl(224, 13%, 17%)",
971
- },
972
- ".prism-previewer-gradient.prism-previewer-gradient div": {
973
- borderColor: "hsl(224, 13%, 17%)",
974
- borderRadius: "0.3em",
975
- },
976
- ".prism-previewer-color.prism-previewer-color:before": {
977
- borderRadius: "0.3em",
978
- },
979
- ".prism-previewer-easing.prism-previewer-easing:before": {
980
- borderRadius: "0.3em",
981
- },
982
- ".prism-previewer.prism-previewer:after": {
983
- borderTopColor: "hsl(224, 13%, 17%)",
984
- },
985
- ".prism-previewer-flipped.prism-previewer-flipped.after": {
986
- borderBottomColor: "hsl(224, 13%, 17%)",
987
- },
988
- ".prism-previewer-angle.prism-previewer-angle:before": {
989
- background: "hsl(219, 13%, 22%)",
990
- },
991
- ".prism-previewer-time.prism-previewer-time:before": {
992
- background: "hsl(219, 13%, 22%)",
993
- },
994
- ".prism-previewer-easing.prism-previewer-easing": {
995
- background: "hsl(219, 13%, 22%)",
996
- },
997
- ".prism-previewer-angle.prism-previewer-angle circle": {
998
- stroke: "hsl(220, 14%, 71%)",
999
- strokeOpacity: "1",
1000
- },
1001
- ".prism-previewer-time.prism-previewer-time circle": {
1002
- stroke: "hsl(220, 14%, 71%)",
1003
- strokeOpacity: "1",
1004
- },
1005
- ".prism-previewer-easing.prism-previewer-easing circle": {
1006
- stroke: "hsl(220, 14%, 71%)",
1007
- fill: "transparent",
1008
- },
1009
- ".prism-previewer-easing.prism-previewer-easing path": {
1010
- stroke: "hsl(220, 14%, 71%)",
1011
- },
1012
- ".prism-previewer-easing.prism-previewer-easing line": {
1013
- stroke: "hsl(220, 14%, 71%)",
1014
- },
1015
- };