@clickhouse/click-ui 0.0.0

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.
Files changed (151) hide show
  1. package/.eslintrc.cjs +32 -0
  2. package/.github/workflows/deployment.yml +34 -0
  3. package/.storybook/main.ts +18 -0
  4. package/.storybook/preview-head.html +4 -0
  5. package/.storybook/preview.tsx +67 -0
  6. package/README.md +11 -0
  7. package/app/.babelrc +27 -0
  8. package/app/.eslintrc.json +6 -0
  9. package/app/.storybook/main.ts +17 -0
  10. package/app/.storybook/preview.tsx +26 -0
  11. package/app/README.md +38 -0
  12. package/app/next.config.js +6 -0
  13. package/app/package-lock.json +28711 -0
  14. package/app/package.json +44 -0
  15. package/app/public/favicon.ico +0 -0
  16. package/app/public/next.svg +1 -0
  17. package/app/public/vercel.svg +1 -0
  18. package/app/src/assets/RightArrow/right-arrow.tsx +17 -0
  19. package/app/src/assets/S3Logo/s3-logo.tsx +31 -0
  20. package/app/src/assets/amazon_s3.svg +9 -0
  21. package/app/src/assets/arrow.svg +3 -0
  22. package/app/src/globals.d.ts +4 -0
  23. package/app/src/pages/_app.tsx +8 -0
  24. package/app/src/pages/_document.tsx +17 -0
  25. package/app/src/pages/api/hello.ts +13 -0
  26. package/app/src/pages/index.tsx +141 -0
  27. package/app/src/pages/label.tsx +27 -0
  28. package/app/src/stories/assets/code-brackets.svg +1 -0
  29. package/app/src/stories/assets/colors.svg +1 -0
  30. package/app/src/stories/assets/comments.svg +1 -0
  31. package/app/src/stories/assets/direction.svg +1 -0
  32. package/app/src/stories/assets/flow.svg +1 -0
  33. package/app/src/stories/assets/plugin.svg +1 -0
  34. package/app/src/stories/assets/repo.svg +1 -0
  35. package/app/src/stories/assets/stackalt.svg +1 -0
  36. package/app/src/styles/Home.module.css +235 -0
  37. package/app/src/styles/globals.css +111 -0
  38. package/app/src/styles/types.ts +1031 -0
  39. package/app/src/styles/variables.classic.css +16 -0
  40. package/app/src/styles/variables.classic.json +31 -0
  41. package/app/src/styles/variables.css +763 -0
  42. package/app/src/styles/variables.dark.css +135 -0
  43. package/app/src/styles/variables.dark.json +339 -0
  44. package/app/src/styles/variables.json +1029 -0
  45. package/app/src/styles/variables.light.css +203 -0
  46. package/app/src/styles/variables.light.json +478 -0
  47. package/app/tokens/themes/$metadata.json +9 -0
  48. package/app/tokens/themes/$themes.json +1 -0
  49. package/app/tokens/themes/classic.json +58 -0
  50. package/app/tokens/themes/component.json +868 -0
  51. package/app/tokens/themes/dark.json +937 -0
  52. package/app/tokens/themes/light.json +1380 -0
  53. package/app/tokens/themes/primitives.json +859 -0
  54. package/app/tsconfig.json +23 -0
  55. package/build-tokens.js +131 -0
  56. package/index.html +17 -0
  57. package/jest.config.ts +11 -0
  58. package/package.json +77 -0
  59. package/public/vite.svg +1 -0
  60. package/src/App.css +1 -0
  61. package/src/App.module.css +235 -0
  62. package/src/App.tsx +154 -0
  63. package/src/assets/RightArrow/RightArrow.tsx +17 -0
  64. package/src/assets/S3Logo/S3Logo.tsx +31 -0
  65. package/src/assets/react.svg +1 -0
  66. package/src/components/Accordion/Accordion.stories.tsx +78 -0
  67. package/src/components/Accordion/Accordion.test.tsx +46 -0
  68. package/src/components/Accordion/Accordion.tsx +118 -0
  69. package/src/components/Badge/Badge.stories.ts +14 -0
  70. package/src/components/Badge/Badge.test.tsx +11 -0
  71. package/src/components/Badge/Badge.tsx +24 -0
  72. package/src/components/BigStat/BigStat.stories.ts +15 -0
  73. package/src/components/BigStat/BigStat.tsx +37 -0
  74. package/src/components/Button/Button.stories.ts +82 -0
  75. package/src/components/Button/Button.test.tsx +32 -0
  76. package/src/components/Button/Button.tsx +97 -0
  77. package/src/components/ButtonGroup/ButtonGroup.stories.ts +14 -0
  78. package/src/components/ButtonGroup/ButtonGroup.tsx +78 -0
  79. package/src/components/Card/Card.stories.ts +19 -0
  80. package/src/components/Card/Card.tsx +107 -0
  81. package/src/components/FormField/FormField.stories.ts +14 -0
  82. package/src/components/FormField/FormField.tsx +22 -0
  83. package/src/components/Icon/Icon.stories.ts +46 -0
  84. package/src/components/Icon/Icon.tsx +90 -0
  85. package/src/components/Icon/types.ts +18 -0
  86. package/src/components/IconButton/IconButton.stories.ts +16 -0
  87. package/src/components/IconButton/IconButton.tsx +94 -0
  88. package/src/components/SidebarNavigationItem/SidebarNavigationItem.stories.tsx +28 -0
  89. package/src/components/SidebarNavigationItem/SidebarNavigationItem.tsx +112 -0
  90. package/src/components/Switch/Switch.stories.ts +14 -0
  91. package/src/components/Switch/Switch.tsx +106 -0
  92. package/src/components/Tabs/Tabs.stories.tsx +71 -0
  93. package/src/components/Tabs/Tabs.test.tsx +86 -0
  94. package/src/components/Tabs/Tabs.tsx +82 -0
  95. package/src/components/icons/ChatIcon.tsx +22 -0
  96. package/src/components/icons/ChevronDown.tsx +6 -0
  97. package/src/components/icons/ChevronRight.tsx +20 -0
  98. package/src/components/icons/DatabaseIcon.tsx +33 -0
  99. package/src/components/icons/FilterIcon.tsx +24 -0
  100. package/src/components/icons/Flags/EuropeanUnion.tsx +174 -0
  101. package/src/components/icons/Flags/Germany.tsx +25 -0
  102. package/src/components/icons/Flags/India.tsx +48 -0
  103. package/src/components/icons/Flags/Ireland.tsx +32 -0
  104. package/src/components/icons/Flags/Netherlands.tsx +29 -0
  105. package/src/components/icons/Flags/Singapore.tsx +43 -0
  106. package/src/components/icons/Flags/UnitedKingdom.tsx +32 -0
  107. package/src/components/icons/Flags/UnitedStates.tsx +26 -0
  108. package/src/components/icons/Flags/index.tsx +46 -0
  109. package/src/components/icons/HistoryIcon.tsx +28 -0
  110. package/src/components/icons/Icons.mdx +36 -0
  111. package/src/components/icons/InsertRowIcon.tsx +36 -0
  112. package/src/components/icons/SortAltIcon.tsx +24 -0
  113. package/src/components/icons/UserIcon.tsx +17 -0
  114. package/src/components/icons/UsersIcon.tsx +43 -0
  115. package/src/components/index.ts +14 -0
  116. package/src/components/types.ts +1 -0
  117. package/src/index.css +9 -0
  118. package/src/index.ts +2 -0
  119. package/src/main.tsx +11 -0
  120. package/src/stories/assets/code-brackets.svg +1 -0
  121. package/src/stories/assets/colors.svg +1 -0
  122. package/src/stories/assets/comments.svg +1 -0
  123. package/src/stories/assets/direction.svg +1 -0
  124. package/src/stories/assets/flow.svg +1 -0
  125. package/src/stories/assets/plugin.svg +1 -0
  126. package/src/stories/assets/repo.svg +1 -0
  127. package/src/stories/assets/stackalt.svg +1 -0
  128. package/src/styles/Home.module.css +235 -0
  129. package/src/styles/globals.css +111 -0
  130. package/src/styles/types.ts +1669 -0
  131. package/src/styles/variables.classic.css +16 -0
  132. package/src/styles/variables.classic.json +31 -0
  133. package/src/styles/variables.css +763 -0
  134. package/src/styles/variables.dark.css +135 -0
  135. package/src/styles/variables.dark.json +576 -0
  136. package/src/styles/variables.json +1667 -0
  137. package/src/styles/variables.light.css +203 -0
  138. package/src/styles/variables.light.json +789 -0
  139. package/src/theme/index.ts +22 -0
  140. package/src/theme/theme.tsx +28 -0
  141. package/src/vite-env.d.ts +1 -0
  142. package/tokens/themes/$metadata.json +9 -0
  143. package/tokens/themes/$themes.json +1 -0
  144. package/tokens/themes/classic.json +58 -0
  145. package/tokens/themes/component.json +1567 -0
  146. package/tokens/themes/dark.json +1450 -0
  147. package/tokens/themes/light.json +2059 -0
  148. package/tokens/themes/primitives.json +863 -0
  149. package/tsconfig.json +27 -0
  150. package/tsconfig.node.json +10 -0
  151. package/vite.config.ts +38 -0
package/tokens/themes/dark.json ADDED
@@ -0,0 +1,1450 @@
1
+ {
2
+ "click": {
3
+ "global": {
4
+ "color": {
5
+ "background": {
6
+ "default": {
7
+ "value": "{palette.neutral.750}",
8
+ "type": "color"
9
+ },
10
+ "muted": {
11
+ "value": "{palette.neutral.725}",
12
+ "type": "color"
13
+ }
14
+ },
15
+ "text": {
16
+ "default": {
17
+ "value": "{palette.neutral.0}",
18
+ "type": "color"
19
+ },
20
+ "muted": {
21
+ "value": "{palette.slate.300}",
22
+ "type": "color"
23
+ },
24
+ "link": {
25
+ "default": {
26
+ "value": "{palette.brand.300}",
27
+ "type": "color"
28
+ },
29
+ "hover": {
30
+ "value": "{palette.brand.100}",
31
+ "type": "color"
32
+ }
33
+ }
34
+ },
35
+ "stroke": {
36
+ "default": {
37
+ "value": "{palette.neutral.700}",
38
+ "type": "color",
39
+ "$extensions": {
40
+ "studio.tokens": {
41
+ "modify": {
42
+ "type": "alpha",
43
+ "value": "0.3",
44
+ "space": "lch"
45
+ }
46
+ }
47
+ }
48
+ },
49
+ "muted": {
50
+ "value": "{palette.neutral.700}",
51
+ "type": "color",
52
+ "$extensions": {
53
+ "studio.tokens": {
54
+ "modify": {
55
+ "type": "alpha",
56
+ "value": "0.3",
57
+ "space": "lch"
58
+ }
59
+ }
60
+ }
61
+ },
62
+ "intense": {
63
+ "value": "{palette.neutral.700}",
64
+ "type": "color"
65
+ }
66
+ },
67
+ "accent": {
68
+ "default": {
69
+ "value": "{palette.brand.300}",
70
+ "type": "color"
71
+ }
72
+ },
73
+ "outline": {
74
+ "default": {
75
+ "value": "{palette.brand.300}",
76
+ "type": "color"
77
+ }
78
+ }
79
+ }
80
+ },
81
+ "popover": {
82
+ "color": {
83
+ "background": {
84
+ "default": {
85
+ "value": "{palette.neutral.725}",
86
+ "type": "color",
87
+ "$extensions": {
88
+ "studio.tokens": {
89
+ "modify": {
90
+ "type": "lighten",
91
+ "value": "0.02",
92
+ "space": "lch"
93
+ }
94
+ }
95
+ }
96
+ }
97
+ }
98
+ }
99
+ },
100
+ "accordion": {
101
+ "color": {
102
+ "label": {
103
+ "default": {
104
+ "value": "{click.global.color.text.default}",
105
+ "type": "color"
106
+ },
107
+ "hover": {
108
+ "value": "{click.global.color.text.default}",
109
+ "type": "color",
110
+ "$extensions": {
111
+ "studio.tokens": {
112
+ "modify": {
113
+ "type": "lighten",
114
+ "value": "0.075",
115
+ "space": "lch"
116
+ }
117
+ }
118
+ }
119
+ },
120
+ "active": {
121
+ "value": "{click.global.color.text.default}",
122
+ "type": "color"
123
+ }
124
+ },
125
+ "icon": {
126
+ "default": {
127
+ "value": "{click.accordion.color.label.default}",
128
+ "type": "color"
129
+ },
130
+ "hover": {
131
+ "value": "{click.accordion.color.label.default}",
132
+ "type": "color",
133
+ "$extensions": {
134
+ "studio.tokens": {
135
+ "modify": {
136
+ "type": "lighten",
137
+ "value": "0.075",
138
+ "space": "lch"
139
+ }
140
+ }
141
+ }
142
+ },
143
+ "active": {
144
+ "value": "{click.accordion.color.label.default}",
145
+ "type": "color"
146
+ }
147
+ }
148
+ }
149
+ },
150
+ "button": {
151
+ "basic": {
152
+ "color": {
153
+ "primary": {
154
+ "background": {
155
+ "default": {
156
+ "value": "{click.global.color.accent.default}",
157
+ "type": "color"
158
+ },
159
+ "hover": {
160
+ "value": "{palette.brand.300}",
161
+ "type": "color",
162
+ "$extensions": {
163
+ "studio.tokens": {
164
+ "modify": {
165
+ "type": "lighten",
166
+ "value": "0.3",
167
+ "space": "lch"
168
+ }
169
+ }
170
+ }
171
+ },
172
+ "active": {
173
+ "value": "{palette.brand.300}",
174
+ "type": "color",
175
+ "$extensions": {
176
+ "studio.tokens": {
177
+ "modify": {
178
+ "type": "darken",
179
+ "value": "0.075",
180
+ "space": "lch"
181
+ }
182
+ }
183
+ }
184
+ }
185
+ },
186
+ "text": {
187
+ "default": {
188
+ "value": "{click.global.color.background.default}",
189
+ "type": "color"
190
+ }
191
+ },
192
+ "stroke": {
193
+ "default": {
194
+ "value": "{click.global.color.accent.default}",
195
+ "type": "color"
196
+ },
197
+ "hover": {
198
+ "value": "{palette.brand.300}",
199
+ "type": "color"
200
+ },
201
+ "active": {
202
+ "value": "{click.button.split.primary.background.main.active}",
203
+ "type": "color"
204
+ }
205
+ }
206
+ },
207
+ "secondary": {
208
+ "background": {
209
+ "default": {
210
+ "value": "{click.global.color.background.default}",
211
+ "type": "color"
212
+ },
213
+ "hover": {
214
+ "value": "{click.global.color.background.muted}",
215
+ "type": "color"
216
+ },
217
+ "active": {
218
+ "value": "{click.button.basic.color.secondary.background.hover}",
219
+ "type": "color",
220
+ "$extensions": {
221
+ "studio.tokens": {
222
+ "modify": {
223
+ "type": "lighten",
224
+ "value": "0.05",
225
+ "space": "lch"
226
+ }
227
+ }
228
+ }
229
+ }
230
+ },
231
+ "stroke": {
232
+ "default": {
233
+ "value": "{palette.neutral.700}",
234
+ "type": "color"
235
+ },
236
+ "hover": {
237
+ "value": "{palette.slate.500}",
238
+ "type": "color"
239
+ },
240
+ "active": {
241
+ "value": "{palette.slate.800}",
242
+ "type": "color",
243
+ "$extensions": {
244
+ "studio.tokens": {
245
+ "modify": {
246
+ "type": "lighten",
247
+ "value": "0.05",
248
+ "space": "lch"
249
+ }
250
+ }
251
+ }
252
+ }
253
+ },
254
+ "text": {
255
+ "default": {
256
+ "value": "{click.global.color.text.default}",
257
+ "type": "color"
258
+ }
259
+ }
260
+ },
261
+ "disabled": {
262
+ "background": {
263
+ "default": {
264
+ "value": "{click.field.color.background.disabled}",
265
+ "type": "color"
266
+ }
267
+ },
268
+ "text": {
269
+ "default": {
270
+ "value": "{click.field.color.text.disabled}",
271
+ "type": "color"
272
+ }
273
+ }
274
+ },
275
+ "danger": {
276
+ "background": {
277
+ "default": {
278
+ "value": "{click.feedback.color.danger.background}",
279
+ "type": "color"
280
+ },
281
+ "hover": {
282
+ "value": "{palette.danger.700}",
283
+ "type": "color"
284
+ },
285
+ "active": {
286
+ "value": "{click.button.basic.color.danger.background.hover}",
287
+ "type": "color"
288
+ }
289
+ },
290
+ "text": {
291
+ "default": {
292
+ "value": "{click.feedback.color.danger.foreground}",
293
+ "type": "color"
294
+ }
295
+ }
296
+ }
297
+ }
298
+ },
299
+ "group": {
300
+ "color": {
301
+ "background": {
302
+ "default": {
303
+ "value": "{click.global.color.background.muted}",
304
+ "type": "color"
305
+ },
306
+ "hover": {
307
+ "value": "{palette.neutral.700}",
308
+ "type": "color",
309
+ "$extensions": {
310
+ "studio.tokens": {
311
+ "modify": {
312
+ "type": "darken",
313
+ "value": "0.30",
314
+ "space": "lch"
315
+ }
316
+ }
317
+ }
318
+ },
319
+ "active": {
320
+ "value": "{palette.neutral.700}",
321
+ "type": "color",
322
+ "$extensions": {
323
+ "studio.tokens": {
324
+ "modify": {
325
+ "type": "darken",
326
+ "value": "0.15",
327
+ "space": "lch"
328
+ }
329
+ }
330
+ }
331
+ },
332
+ "panel": {
333
+ "value": "{click.button.group.color.background.default}",
334
+ "type": "color"
335
+ }
336
+ },
337
+ "text": {
338
+ "default": {
339
+ "value": "{click.global.color.text.default}",
340
+ "type": "color"
341
+ },
342
+ "hover": {
343
+ "value": "{click.button.group.color.text.default}",
344
+ "type": "color"
345
+ },
346
+ "active": {
347
+ "value": "{palette.neutral.0}",
348
+ "type": "color"
349
+ }
350
+ },
351
+ "stroke": {
352
+ "panel": {
353
+ "value": "{click.global.color.stroke.default}",
354
+ "type": "color"
355
+ }
356
+ }
357
+ }
358
+ },
359
+ "split": {
360
+ "primary": {
361
+ "stroke": {
362
+ "default": {
363
+ "value": "{click.button.basic.color.primary.background.default}",
364
+ "type": "color",
365
+ "$extensions": {
366
+ "studio.tokens": {
367
+ "modify": {
368
+ "type": "lighten",
369
+ "value": "0.05",
370
+ "space": "lch"
371
+ }
372
+ }
373
+ }
374
+ },
375
+ "active": {
376
+ "value": "{click.button.basic.color.primary.background.default}",
377
+ "type": "color",
378
+ "$extensions": {
379
+ "studio.tokens": {
380
+ "modify": {
381
+ "type": "darken",
382
+ "value": "0.15",
383
+ "space": "lch"
384
+ }
385
+ }
386
+ }
387
+ },
388
+ "hover": {
389
+ "value": "{click.button.split.primary.background.action.hover}",
390
+ "type": "color",
391
+ "$extensions": {
392
+ "studio.tokens": {
393
+ "modify": {
394
+ "type": "lighten",
395
+ "value": "0.1",
396
+ "space": "lch"
397
+ }
398
+ }
399
+ }
400
+ }
401
+ },
402
+ "background": {
403
+ "main": {
404
+ "default": {
405
+ "value": "{click.button.basic.color.primary.background.default}",
406
+ "type": "color"
407
+ },
408
+ "hover": {
409
+ "value": "{click.button.basic.color.primary.background.hover}",
410
+ "type": "color"
411
+ },
412
+ "active": {
413
+ "value": "{click.button.basic.color.primary.background.active}",
414
+ "type": "color",
415
+ "$extensions": {
416
+ "studio.tokens": {
417
+ "modify": {
418
+ "type": "darken",
419
+ "value": "0.085",
420
+ "space": "lch"
421
+ }
422
+ }
423
+ }
424
+ }
425
+ },
426
+ "action": {
427
+ "default": {
428
+ "value": "{palette.brand.300}",
429
+ "type": "color",
430
+ "$extensions": {
431
+ "studio.tokens": {
432
+ "modify": {
433
+ "type": "darken",
434
+ "value": "0.085",
435
+ "space": "lch"
436
+ }
437
+ }
438
+ }
439
+ },
440
+ "hover": {
441
+ "value": "{click.button.split.primary.background.main.hover}",
442
+ "type": "color",
443
+ "$extensions": {
444
+ "studio.tokens": {
445
+ "modify": {
446
+ "type": "darken",
447
+ "value": "0.08",
448
+ "space": "lch"
449
+ }
450
+ }
451
+ }
452
+ },
453
+ "active": {
454
+ "value": "{click.button.split.primary.background.main.active}",
455
+ "type": "color",
456
+ "$extensions": {
457
+ "studio.tokens": {
458
+ "modify": {
459
+ "type": "darken",
460
+ "value": "0.12",
461
+ "space": "lch"
462
+ }
463
+ }
464
+ }
465
+ }
466
+ }
467
+ },
468
+ "text": {
469
+ "default": {
470
+ "value": "{click.button.basic.color.primary.text.default}",
471
+ "type": "color"
472
+ }
473
+ }
474
+ }
475
+ }
476
+ },
477
+ "checkbox": {
478
+ "color": {
479
+ "background": {
480
+ "default": {
481
+ "value": "{click.field.color.background.default}",
482
+ "type": "color"
483
+ },
484
+ "active": {
485
+ "value": "{palette.brand.300}",
486
+ "type": "color"
487
+ },
488
+ "disabled-checked": {
489
+ "value": "{palette.neutral.700}",
490
+ "type": "color"
491
+ }
492
+ },
493
+ "stroke": {
494
+ "default": {
495
+ "value": "{click.global.color.stroke.intense}",
496
+ "type": "color"
497
+ },
498
+ "active": {
499
+ "value": "{click.checkbox.color.background.active}",
500
+ "type": "color"
501
+ },
502
+ "disabled": {
503
+ "value": "{palette.neutral.600}",
504
+ "type": "color"
505
+ }
506
+ },
507
+ "check": {
508
+ "default": {
509
+ "value": "{palette.neutral.0}",
510
+ "type": "color"
511
+ },
512
+ "active": {
513
+ "value": "{palette.neutral.900}",
514
+ "type": "color"
515
+ },
516
+ "disabled": {
517
+ "value": "#c0c0c0",
518
+ "type": "color"
519
+ }
520
+ },
521
+ "label": {
522
+ "default": {
523
+ "value": "{click.global.color.text.default}",
524
+ "type": "color"
525
+ },
526
+ "off": {
527
+ "value": "#696e79",
528
+ "type": "color"
529
+ },
530
+ "disabled": {
531
+ "value": "#a0a0a0",
532
+ "type": "color"
533
+ }
534
+ }
535
+ }
536
+ },
537
+ "codeblock": {
538
+ "darkMode": {
539
+ "color": {
540
+ "background": {
541
+ "default": {
542
+ "value": "{palette.neutral.725}",
543
+ "type": "color"
544
+ }
545
+ },
546
+ "text": {
547
+ "default": {
548
+ "value": "{palette.neutral.0}",
549
+ "type": "color"
550
+ }
551
+ },
552
+ "numbers": {
553
+ "default": {
554
+ "value": "{palette.neutral.300}",
555
+ "type": "color"
556
+ }
557
+ },
558
+ "button": {
559
+ "background": {
560
+ "default": {
561
+ "value": "{click.codeblock.darkMode.color.background.default}",
562
+ "type": "color"
563
+ },
564
+ "hover": {
565
+ "value": "{palette.slate.700}",
566
+ "type": "color"
567
+ }
568
+ },
569
+ "foreground": {
570
+ "default": {
571
+ "value": "{palette.neutral.0}",
572
+ "type": "color"
573
+ }
574
+ }
575
+ },
576
+ "stroke": {
577
+ "default": {
578
+ "value": "{click.codeblock.darkMode.color.background.default}",
579
+ "type": "color"
580
+ }
581
+ }
582
+ }
583
+ },
584
+ "lightMode": {
585
+ "color": {
586
+ "background": {
587
+ "default": {
588
+ "value": "{palette.slate.50}",
589
+ "type": "color"
590
+ }
591
+ },
592
+ "text": {
593
+ "default": {
594
+ "value": "{palette.neutral.725}",
595
+ "type": "color"
596
+ }
597
+ },
598
+ "numbers": {
599
+ "default": {
600
+ "value": "{palette.neutral.500}",
601
+ "type": "color"
602
+ }
603
+ },
604
+ "button": {
605
+ "background": {
606
+ "default": {
607
+ "value": "{click.codeblock.lightMode.color.background.default}",
608
+ "type": "color"
609
+ },
610
+ "hover": {
611
+ "value": "{palette.slate.700}",
612
+ "type": "color"
613
+ }
614
+ },
615
+ "foreground": {
616
+ "default": {
617
+ "value": "{palette.neutral.400}",
618
+ "type": "color"
619
+ }
620
+ }
621
+ },
622
+ "stroke": {
623
+ "default": {
624
+ "value": "{click.codeblock.darkMode.color.background.default}",
625
+ "type": "color"
626
+ }
627
+ }
628
+ }
629
+ }
630
+ },
631
+ "codeInline": {
632
+ "color": {
633
+ "background": {
634
+ "default": {
635
+ "value": "{click.global.color.background.muted}",
636
+ "type": "color"
637
+ }
638
+ },
639
+ "text": {
640
+ "default": {
641
+ "value": "{click.global.color.text.default}",
642
+ "type": "color"
643
+ }
644
+ },
645
+ "stroke": {
646
+ "default": {
647
+ "value": "{click.global.color.stroke.default}",
648
+ "type": "color"
649
+ }
650
+ }
651
+ }
652
+ },
653
+ "contextMenu": {
654
+ "color": {
655
+ "text": {
656
+ "default": {
657
+ "value": "{click.global.color.text.default}",
658
+ "type": "color"
659
+ },
660
+ "disabled": {
661
+ "value": "{palette.neutral.300}",
662
+ "type": "color"
663
+ },
664
+ "muted": {
665
+ "value": "{click.global.color.text.muted}",
666
+ "type": "color"
667
+ }
668
+ },
669
+ "background": {
670
+ "default": {
671
+ "value": "{click.popover.color.background.default}",
672
+ "type": "color"
673
+ },
674
+ "hover": {
675
+ "value": "{click.global.color.background.muted}",
676
+ "type": "color",
677
+ "$extensions": {
678
+ "studio.tokens": {
679
+ "modify": {
680
+ "type": "lighten",
681
+ "value": "0.0875",
682
+ "space": "lch"
683
+ }
684
+ }
685
+ }
686
+ },
687
+ "active": {
688
+ "value": "{click.contextMenu.color.background.hover}",
689
+ "type": "color"
690
+ }
691
+ }
692
+ },
693
+ "stroke": {
694
+ "default": {
695
+ "value": "{click.global.color.stroke.default}",
696
+ "type": "color"
697
+ }
698
+ }
699
+ },
700
+ "feedback": {
701
+ "color": {
702
+ "info": {
703
+ "background": {
704
+ "value": "{palette.info.600}",
705
+ "type": "color"
706
+ },
707
+ "foreground": {
708
+ "value": "{palette.info.200}",
709
+ "type": "color"
710
+ }
711
+ },
712
+ "success": {
713
+ "background": {
714
+ "value": "{palette.success.800}",
715
+ "type": "color"
716
+ },
717
+ "foreground": {
718
+ "value": "{palette.success.300}",
719
+ "type": "color"
720
+ }
721
+ },
722
+ "warning": {
723
+ "background": {
724
+ "value": "{palette.warning.800}",
725
+ "type": "color"
726
+ },
727
+ "foreground": {
728
+ "value": "{palette.warning.400}",
729
+ "type": "color"
730
+ }
731
+ },
732
+ "danger": {
733
+ "background": {
734
+ "value": "{palette.danger.800}",
735
+ "type": "color"
736
+ },
737
+ "foreground": {
738
+ "value": "{palette.danger.300}",
739
+ "type": "color"
740
+ }
741
+ },
742
+ "neutral": {
743
+ "background": {
744
+ "value": "{palette.neutral.700}",
745
+ "type": "color"
746
+ },
747
+ "foreground": {
748
+ "value": "{palette.neutral.300}",
749
+ "type": "color"
750
+ },
751
+ "stroke": {
752
+ "value": "{click.global.color.stroke.default}",
753
+ "type": "color"
754
+ }
755
+ }
756
+ }
757
+ },
758
+ "field": {
759
+ "color": {
760
+ "background": {
761
+ "default": {
762
+ "value": "{palette.neutral.725}",
763
+ "type": "color"
764
+ },
765
+ "active": {
766
+ "value": "{click.global.color.background.default}",
767
+ "type": "color"
768
+ },
769
+ "disabled": {
770
+ "value": "{palette.neutral.700}",
771
+ "type": "color"
772
+ }
773
+ },
774
+ "text": {
775
+ "default": {
776
+ "value": "{palette.slate.100}",
777
+ "type": "color"
778
+ },
779
+ "active": {
780
+ "value": "{click.global.color.text.default}",
781
+ "type": "color"
782
+ },
783
+ "disabled": {
784
+ "value": "{palette.neutral.500}",
785
+ "type": "color"
786
+ }
787
+ },
788
+ "stroke": {
789
+ "default": {
790
+ "value": "{click.global.color.stroke.default}",
791
+ "type": "color",
792
+ "$extensions": {
793
+ "studio.tokens": {
794
+ "modify": {
795
+ "type": "lighten",
796
+ "value": "0.05",
797
+ "space": "lch"
798
+ }
799
+ }
800
+ }
801
+ },
802
+ "active": {
803
+ "value": "{click.global.color.accent.default}",
804
+ "type": "color"
805
+ },
806
+ "disabled": {
807
+ "value": "{palette.neutral.700}",
808
+ "type": "color"
809
+ },
810
+ "hover": {
811
+ "value": "{click.field.color.stroke.default}",
812
+ "type": "color",
813
+ "$extensions": {
814
+ "studio.tokens": {
815
+ "modify": {
816
+ "type": "lighten",
817
+ "value": "0.05",
818
+ "space": "lch"
819
+ }
820
+ }
821
+ }
822
+ }
823
+ },
824
+ "label": {
825
+ "default": {
826
+ "value": "{click.global.color.text.muted}",
827
+ "type": "color"
828
+ },
829
+ "active": {
830
+ "value": "{click.global.color.text.default}",
831
+ "type": "color"
832
+ },
833
+ "disabled": {
834
+ "value": "{palette.neutral.400}",
835
+ "type": "color"
836
+ }
837
+ },
838
+ "format": {
839
+ "default": {
840
+ "value": "{click.field.color.placeholder.default}",
841
+ "type": "color",
842
+ "$extensions": {
843
+ "studio.tokens": {
844
+ "modify": {
845
+ "type": "lighten",
846
+ "value": "0.2",
847
+ "space": "lch"
848
+ }
849
+ }
850
+ }
851
+ },
852
+ "hover": {
853
+ "value": "{click.field.color.format.default}",
854
+ "type": "color",
855
+ "$extensions": {}
856
+ },
857
+ "active": {
858
+ "value": "{click.field.color.format.default}",
859
+ "type": "color",
860
+ "$extensions": {}
861
+ },
862
+ "disabled": {
863
+ "value": "{click.field.color.text.disabled}",
864
+ "type": "color",
865
+ "$extensions": {}
866
+ },
867
+ "error": {
868
+ "value": "{click.field.color.format.default}",
869
+ "type": "color",
870
+ "$extensions": {}
871
+ }
872
+ }
873
+ }
874
+ },
875
+ "grid": {
876
+ "color": {
877
+ "background": {
878
+ "header": {
879
+ "default": {
880
+ "value": "{click.global.color.background.muted}",
881
+ "type": "color"
882
+ }
883
+ },
884
+ "row": {
885
+ "default": {
886
+ "value": "{click.global.color.background.default}",
887
+ "type": "color"
888
+ }
889
+ }
890
+ },
891
+ "text": {
892
+ "header": {
893
+ "default": {
894
+ "value": "{click.global.color.text.muted}",
895
+ "type": "color"
896
+ }
897
+ },
898
+ "row": {
899
+ "default": {
900
+ "value": "{click.global.color.text.default}",
901
+ "type": "color"
902
+ }
903
+ }
904
+ },
905
+ "stroke": {
906
+ "cell": {
907
+ "stroke": {
908
+ "value": "{click.global.color.stroke.default}",
909
+ "type": "color"
910
+ }
911
+ }
912
+ }
913
+ }
914
+ },
915
+ "switch": {
916
+ "color": {
917
+ "background": {
918
+ "default": {
919
+ "value": "{palette.neutral.600}",
920
+ "type": "color"
921
+ },
922
+ "active": {
923
+ "value": "{palette.brand.300}",
924
+ "type": "color"
925
+ },
926
+ "disabled": {
927
+ "value": "{palette.neutral.500}",
928
+ "type": "color"
929
+ }
930
+ },
931
+ "stroke": {
932
+ "default": {
933
+ "value": "{click.switch.color.background.default}",
934
+ "type": "color"
935
+ },
936
+ "active": {
937
+ "value": "{click.checkbox.color.background.active}",
938
+ "type": "color"
939
+ },
940
+ "disabled": {
941
+ "value": "{click.switch.color.background.disabled}",
942
+ "type": "color"
943
+ }
944
+ },
945
+ "indicator": {
946
+ "default": {
947
+ "value": "{palette.neutral.900}",
948
+ "type": "color"
949
+ },
950
+ "active": {
951
+ "value": "{palette.slate.900}",
952
+ "type": "color"
953
+ },
954
+ "disabled": {
955
+ "value": "{palette.neutral.600}",
956
+ "type": "color"
957
+ }
958
+ }
959
+ }
960
+ },
961
+ "sidebar": {
962
+ "main": {
963
+ "color": {
964
+ "background": {
965
+ "default": {
966
+ "value": "{click.global.color.background.default}",
967
+ "type": "color"
968
+ }
969
+ },
970
+ "text": {
971
+ "default": {
972
+ "value": "{click.global.color.text.default}",
973
+ "type": "color"
974
+ },
975
+ "muted": {
976
+ "value": "{click.global.color.text.muted}",
977
+ "type": "color"
978
+ }
979
+ },
980
+ "stroke": {
981
+ "default": {
982
+ "value": "{click.global.color.stroke.default}",
983
+ "type": "color"
984
+ }
985
+ }
986
+ }
987
+ },
988
+ "navigation": {
989
+ "item": {
990
+ "color": {
991
+ "background": {
992
+ "active": {
993
+ "value": "{palette.neutral.700}",
994
+ "type": "color",
995
+ "$extensions": {
996
+ "studio.tokens": {
997
+ "modify": {
998
+ "type": "alpha",
999
+ "value": "0.6",
1000
+ "space": "lch"
1001
+ }
1002
+ }
1003
+ }
1004
+ },
1005
+ "hover": {
1006
+ "value": "{click.global.color.background.muted}",
1007
+ "type": "color",
1008
+ "$extensions": {
1009
+ "studio.tokens": {
1010
+ "modify": {
1011
+ "type": "lighten",
1012
+ "value": "0.035",
1013
+ "space": "lch"
1014
+ }
1015
+ }
1016
+ }
1017
+ },
1018
+ "default": {
1019
+ "value": "{palette.utility.transparent}",
1020
+ "type": "color"
1021
+ }
1022
+ },
1023
+ "text": {
1024
+ "default": {
1025
+ "value": "{click.global.color.text.default}",
1026
+ "type": "color"
1027
+ },
1028
+ "hover": {
1029
+ "value": "{click.global.color.text.default}",
1030
+ "type": "color"
1031
+ },
1032
+ "active": {
1033
+ "value": "{click.global.color.text.default}",
1034
+ "type": "color"
1035
+ },
1036
+ "muted": {
1037
+ "value": "{click.global.color.text.muted}",
1038
+ "type": "color"
1039
+ }
1040
+ },
1041
+ "icon": {
1042
+ "default": {
1043
+ "value": "{click.global.color.text.muted}",
1044
+ "type": "color"
1045
+ }
1046
+ }
1047
+ }
1048
+ },
1049
+ "title": {
1050
+ "color": {
1051
+ "default": {
1052
+ "value": "{click.global.color.text.muted}",
1053
+ "type": "color"
1054
+ },
1055
+ "hover": {
1056
+ "value": "{click.global.color.text.muted}",
1057
+ "type": "color"
1058
+ },
1059
+ "active": {
1060
+ "value": "{click.global.color.text.muted}",
1061
+ "type": "color"
1062
+ }
1063
+ }
1064
+ },
1065
+ "subItem": {
1066
+ "color": {
1067
+ "text": {
1068
+ "default": {
1069
+ "value": "{click.global.color.text.muted}",
1070
+ "type": "color"
1071
+ },
1072
+ "hover": {
1073
+ "value": "{click.sidebar.navigation.subItem.color.text.active}",
1074
+ "type": "color"
1075
+ },
1076
+ "active": {
1077
+ "value": "{click.global.color.text.default}",
1078
+ "type": "color"
1079
+ }
1080
+ },
1081
+ "background": {
1082
+ "default": {
1083
+ "value": "{palette.utility.transparent}",
1084
+ "type": "color"
1085
+ },
1086
+ "hover": {
1087
+ "value": "{click.sidebar.navigation.item.color.background.hover}",
1088
+ "type": "color"
1089
+ },
1090
+ "active": {
1091
+ "value": "{palette.utility.transparent}",
1092
+ "type": "color"
1093
+ }
1094
+ }
1095
+ }
1096
+ }
1097
+ },
1098
+ "sql-sidebar": {
1099
+ "color": {
1100
+ "background": {
1101
+ "default": {
1102
+ "value": "{click.global.color.background.muted}",
1103
+ "type": "color"
1104
+ }
1105
+ },
1106
+ "stroke": {
1107
+ "default": {
1108
+ "value": "{click.global.color.stroke.default}",
1109
+ "type": "color"
1110
+ }
1111
+ }
1112
+ }
1113
+ }
1114
+ },
1115
+ "tooltip": {
1116
+ "color": {
1117
+ "background": {
1118
+ "default": {
1119
+ "value": "{palette.neutral.0}",
1120
+ "type": "color",
1121
+ "$extensions": {
1122
+ "studio.tokens": {
1123
+ "modify": {
1124
+ "type": "alpha",
1125
+ "value": "0.15",
1126
+ "space": "lch"
1127
+ }
1128
+ }
1129
+ }
1130
+ }
1131
+ },
1132
+ "label": {
1133
+ "default": {
1134
+ "value": "{click.global.color.text.default}",
1135
+ "type": "color"
1136
+ }
1137
+ }
1138
+ }
1139
+ },
1140
+ "stepperVertical": {
1141
+ "icon": {
1142
+ "background": {
1143
+ "default": {
1144
+ "value": "{palette.neutral.700}",
1145
+ "type": "color"
1146
+ },
1147
+ "incomplete": {
1148
+ "value": "{palette.neutral.700}",
1149
+ "type": "color",
1150
+ "$extensions": {
1151
+ "studio.tokens": {
1152
+ "modify": {
1153
+ "type": "lighten",
1154
+ "value": "0.25",
1155
+ "space": "lch"
1156
+ }
1157
+ }
1158
+ }
1159
+ },
1160
+ "complete": {
1161
+ "value": "{click.stepperVertical.connector.background.default}",
1162
+ "type": "color"
1163
+ }
1164
+ },
1165
+ "foreground": {
1166
+ "default": {
1167
+ "value": "{palette.neutral.0}",
1168
+ "type": "color"
1169
+ },
1170
+ "incomplete": {
1171
+ "value": "{click.stepperVertical.icon.foreground.default}",
1172
+ "type": "color"
1173
+ },
1174
+ "complete": {
1175
+ "value": "{click.stepperVertical.icon.foreground.default}",
1176
+ "type": "color"
1177
+ }
1178
+ },
1179
+ "stroke": {
1180
+ "default": {
1181
+ "value": "{click.stepperVertical.icon.foreground.default}",
1182
+ "type": "color"
1183
+ },
1184
+ "incomplete": {
1185
+ "value": "{palette.utility.transparent}",
1186
+ "type": "color"
1187
+ },
1188
+ "complete": {
1189
+ "value": "{palette.utility.transparent}",
1190
+ "type": "color"
1191
+ }
1192
+ }
1193
+ },
1194
+ "connector": {
1195
+ "background": {
1196
+ "default": {
1197
+ "value": "{click.stepperVertical.icon.background.default}",
1198
+ "type": "color"
1199
+ },
1200
+ "incomplete": {
1201
+ "value": "{click.stepperVertical.icon.background.incomplete}",
1202
+ "type": "color"
1203
+ },
1204
+ "complete": {
1205
+ "value": "{click.stepperVertical.icon.background.default}",
1206
+ "type": "color"
1207
+ }
1208
+ }
1209
+ }
1210
+ },
1211
+ "table": {
1212
+ "header": {
1213
+ "color": {
1214
+ "background": {
1215
+ "default": {
1216
+ "value": "{click.global.color.background.muted}",
1217
+ "type": "color"
1218
+ }
1219
+ },
1220
+ "title": {
1221
+ "default": {
1222
+ "value": "{click.global.color.text.default}",
1223
+ "type": "color"
1224
+ }
1225
+ },
1226
+ "icon": {
1227
+ "default": {
1228
+ "value": "{click.image.color.stroke}",
1229
+ "type": "color"
1230
+ }
1231
+ },
1232
+ "checkbox": {
1233
+ "background": {
1234
+ "default": {
1235
+ "value": "{palette.slate.200}",
1236
+ "type": "color"
1237
+ }
1238
+ },
1239
+ "border": {
1240
+ "default": {
1241
+ "value": "{palette.slate.500}",
1242
+ "type": "color"
1243
+ }
1244
+ }
1245
+ }
1246
+ }
1247
+ },
1248
+ "row": {
1249
+ "color": {
1250
+ "background": {
1251
+ "default": {
1252
+ "value": "{click.global.color.background.default}",
1253
+ "type": "color"
1254
+ },
1255
+ "hover": {
1256
+ "value": "{palette.info.50}",
1257
+ "type": "color"
1258
+ },
1259
+ "active": {
1260
+ "value": "{click.table.row.color.background.hover}",
1261
+ "type": "color"
1262
+ }
1263
+ },
1264
+ "stroke": {
1265
+ "default": {
1266
+ "value": "{click.global.color.stroke.default}",
1267
+ "type": "color"
1268
+ }
1269
+ },
1270
+ "text": {
1271
+ "default": {
1272
+ "value": "{click.global.color.text.default}",
1273
+ "type": "color"
1274
+ }
1275
+ },
1276
+ "link": {
1277
+ "default": {
1278
+ "value": "{click.global.color.text.link.default}",
1279
+ "type": "color"
1280
+ }
1281
+ },
1282
+ "label": {
1283
+ "default": {
1284
+ "value": "{click.field.color.label.default}",
1285
+ "type": "color"
1286
+ }
1287
+ }
1288
+ }
1289
+ },
1290
+ "global": {
1291
+ "color": {
1292
+ "stroke": {
1293
+ "default": {
1294
+ "value": "{click.table.row.color.stroke.default}",
1295
+ "type": "color"
1296
+ }
1297
+ },
1298
+ "background": {
1299
+ "default": {
1300
+ "value": "{click.global.color.background.default}",
1301
+ "type": "color"
1302
+ }
1303
+ }
1304
+ }
1305
+ }
1306
+ },
1307
+ "tabs": {
1308
+ "basic": {
1309
+ "color": {
1310
+ "background": {
1311
+ "default": {
1312
+ "value": "{palette.utility.transparent}",
1313
+ "type": "color"
1314
+ },
1315
+ "hover": {
1316
+ "value": "{click.global.color.background.muted}",
1317
+ "type": "color"
1318
+ },
1319
+ "active": {
1320
+ "value": "{palette.utility.transparent}",
1321
+ "type": "color"
1322
+ }
1323
+ },
1324
+ "text": {
1325
+ "default": {
1326
+ "value": "{click.global.color.text.muted}",
1327
+ "type": "color"
1328
+ },
1329
+ "hover": {
1330
+ "value": "{click.global.color.text.default}",
1331
+ "type": "color"
1332
+ },
1333
+ "active": {
1334
+ "value": "{click.tabs.basic.color.text.hover}",
1335
+ "type": "color"
1336
+ }
1337
+ },
1338
+ "stroke": {
1339
+ "default": {
1340
+ "value": "{click.tabs.basic.color.background.default}",
1341
+ "type": "color"
1342
+ },
1343
+ "hover": {
1344
+ "value": "{palette.utility.transparent}",
1345
+ "type": "color"
1346
+ },
1347
+ "active": {
1348
+ "value": "{click.global.color.accent.default}",
1349
+ "type": "color"
1350
+ }
1351
+ },
1352
+ "global": {
1353
+ "default": {
1354
+ "value": "{click.global.color.stroke.default}",
1355
+ "type": "color"
1356
+ }
1357
+ }
1358
+ }
1359
+ },
1360
+ "file-tabs": {
1361
+ "color": {
1362
+ "background": {
1363
+ "default": {
1364
+ "value": "{click.global.color.background.muted}",
1365
+ "type": "color"
1366
+ },
1367
+ "hover": {
1368
+ "value": "{click.global.color.background.default}",
1369
+ "type": "color"
1370
+ },
1371
+ "active": {
1372
+ "value": "{click.tabs.file-tabs.color.background.hover}",
1373
+ "type": "color"
1374
+ }
1375
+ },
1376
+ "text": {
1377
+ "default": {
1378
+ "value": "{click.global.color.text.muted}",
1379
+ "type": "color"
1380
+ },
1381
+ "hover": {
1382
+ "value": "{click.global.color.text.default}",
1383
+ "type": "color"
1384
+ },
1385
+ "active": {
1386
+ "value": "{click.global.color.text.default}",
1387
+ "type": "color"
1388
+ }
1389
+ },
1390
+ "stroke": {
1391
+ "default": {
1392
+ "value": "{click.global.color.stroke.default}",
1393
+ "type": "color"
1394
+ },
1395
+ "hover": {
1396
+ "value": "{click.global.color.stroke.default}",
1397
+ "type": "color"
1398
+ },
1399
+ "active": {
1400
+ "value": "{click.global.color.stroke.default}",
1401
+ "type": "color"
1402
+ }
1403
+ }
1404
+ }
1405
+ }
1406
+ },
1407
+ "separator": {
1408
+ "color": {
1409
+ "stroke": {
1410
+ "default": {
1411
+ "value": "{click.global.color.stroke.default}",
1412
+ "type": "color"
1413
+ }
1414
+ }
1415
+ }
1416
+ },
1417
+ "avatar": {
1418
+ "color": {
1419
+ "background": {
1420
+ "default": {
1421
+ "value": "{palette.slate.700}",
1422
+ "type": "color"
1423
+ },
1424
+ "hover": {
1425
+ "value": "{palette.slate.600}",
1426
+ "type": "color"
1427
+ },
1428
+ "active": {
1429
+ "value": "{click.avatar.color.background.hover}",
1430
+ "type": "color"
1431
+ }
1432
+ },
1433
+ "text": {
1434
+ "default": {
1435
+ "value": "{click.sidebar.main.color.background.default}",
1436
+ "type": "color"
1437
+ },
1438
+ "hover": {
1439
+ "value": "{click.avatar.color.text.default}",
1440
+ "type": "color"
1441
+ },
1442
+ "active": {
1443
+ "value": "{click.avatar.color.text.default}",
1444
+ "type": "color"
1445
+ }
1446
+ }
1447
+ }
1448
+ }
1449
+ }
1450
+ }