@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/app/tokens/themes/dark.json ADDED
@@ -0,0 +1,937 @@
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
+ "button": {
101
+ "basic": {
102
+ "color": {
103
+ "primary": {
104
+ "background": {
105
+ "default": {
106
+ "value": "{click.global.color.accent.default}",
107
+ "type": "color"
108
+ },
109
+ "hover": {
110
+ "value": "{palette.brand.300}",
111
+ "type": "color",
112
+ "$extensions": {
113
+ "studio.tokens": {
114
+ "modify": {
115
+ "type": "lighten",
116
+ "value": "0.3",
117
+ "space": "lch"
118
+ }
119
+ }
120
+ }
121
+ },
122
+ "active": {
123
+ "value": "{palette.brand.300}",
124
+ "type": "color",
125
+ "$extensions": {
126
+ "studio.tokens": {
127
+ "modify": {
128
+ "type": "darken",
129
+ "value": "0.075",
130
+ "space": "lch"
131
+ }
132
+ }
133
+ }
134
+ }
135
+ },
136
+ "text": {
137
+ "default": {
138
+ "value": "{click.global.color.background.default}",
139
+ "type": "color"
140
+ }
141
+ },
142
+ "stroke": {
143
+ "default": {
144
+ "value": "{click.global.color.accent.default}",
145
+ "type": "color"
146
+ },
147
+ "hover": {
148
+ "value": "{palette.brand.300}",
149
+ "type": "color"
150
+ },
151
+ "active": {
152
+ "value": "{click.button.split.primary.background.main.active}",
153
+ "type": "color"
154
+ }
155
+ }
156
+ },
157
+ "secondary": {
158
+ "background": {
159
+ "default": {
160
+ "value": "{click.global.color.background.default}",
161
+ "type": "color"
162
+ },
163
+ "hover": {
164
+ "value": "{click.global.color.background.muted}",
165
+ "type": "color"
166
+ },
167
+ "active": {
168
+ "value": "{click.button.basic.color.secondary.background.hover}",
169
+ "type": "color",
170
+ "$extensions": {
171
+ "studio.tokens": {
172
+ "modify": {
173
+ "type": "lighten",
174
+ "value": "0.05",
175
+ "space": "lch"
176
+ }
177
+ }
178
+ }
179
+ }
180
+ },
181
+ "stroke": {
182
+ "default": {
183
+ "value": "{palette.neutral.700}",
184
+ "type": "color"
185
+ },
186
+ "hover": {
187
+ "value": "{palette.slate.500}",
188
+ "type": "color"
189
+ },
190
+ "active": {
191
+ "value": "{palette.slate.800}",
192
+ "type": "color",
193
+ "$extensions": {
194
+ "studio.tokens": {
195
+ "modify": {
196
+ "type": "lighten",
197
+ "value": "0.05",
198
+ "space": "lch"
199
+ }
200
+ }
201
+ }
202
+ }
203
+ },
204
+ "text": {
205
+ "default": {
206
+ "value": "{click.global.color.text.default}",
207
+ "type": "color"
208
+ }
209
+ }
210
+ },
211
+ "disabled": {
212
+ "background": {
213
+ "default": {
214
+ "value": "{click.field.color.background.disabled}",
215
+ "type": "color"
216
+ }
217
+ },
218
+ "text": {
219
+ "default": {
220
+ "value": "{click.field.color.text.disabled}",
221
+ "type": "color"
222
+ }
223
+ }
224
+ },
225
+ "danger": {
226
+ "background": {
227
+ "default": {
228
+ "value": "{click.feedback.color.danger.background}",
229
+ "type": "color"
230
+ },
231
+ "hover": {
232
+ "value": "{palette.danger.700}",
233
+ "type": "color"
234
+ },
235
+ "active": {
236
+ "value": "{click.button.basic.color.danger.background.hover}",
237
+ "type": "color"
238
+ }
239
+ },
240
+ "text": {
241
+ "default": {
242
+ "value": "{click.feedback.color.danger.foreground}",
243
+ "type": "color"
244
+ }
245
+ }
246
+ }
247
+ }
248
+ },
249
+ "group": {
250
+ "color": {
251
+ "background": {
252
+ "default": {
253
+ "value": "{click.global.color.background.muted}",
254
+ "type": "color"
255
+ },
256
+ "hover": {
257
+ "value": "{palette.neutral.700}",
258
+ "type": "color",
259
+ "$extensions": {
260
+ "studio.tokens": {
261
+ "modify": {
262
+ "type": "darken",
263
+ "value": "0.30",
264
+ "space": "lch"
265
+ }
266
+ }
267
+ }
268
+ },
269
+ "active": {
270
+ "value": "{palette.neutral.700}",
271
+ "type": "color",
272
+ "$extensions": {
273
+ "studio.tokens": {
274
+ "modify": {
275
+ "type": "darken",
276
+ "value": "0.15",
277
+ "space": "lch"
278
+ }
279
+ }
280
+ }
281
+ },
282
+ "panel": {
283
+ "value": "{click.button.group.color.background.default}",
284
+ "type": "color"
285
+ }
286
+ },
287
+ "text": {
288
+ "default": {
289
+ "value": "{click.global.color.text.default}",
290
+ "type": "color"
291
+ },
292
+ "hover": {
293
+ "value": "{click.button.group.color.text.default}",
294
+ "type": "color"
295
+ },
296
+ "active": {
297
+ "value": "{palette.neutral.0}",
298
+ "type": "color"
299
+ }
300
+ },
301
+ "stroke": {
302
+ "panel": {
303
+ "value": "{click.global.color.stroke.default}",
304
+ "type": "color"
305
+ }
306
+ }
307
+ }
308
+ },
309
+ "split": {
310
+ "primary": {
311
+ "stroke": {
312
+ "default": {
313
+ "value": "{click.button.basic.color.primary.background.default}",
314
+ "type": "color",
315
+ "$extensions": {
316
+ "studio.tokens": {
317
+ "modify": {
318
+ "type": "lighten",
319
+ "value": "0.05",
320
+ "space": "lch"
321
+ }
322
+ }
323
+ }
324
+ },
325
+ "active": {
326
+ "value": "{click.button.basic.color.primary.background.default}",
327
+ "type": "color",
328
+ "$extensions": {
329
+ "studio.tokens": {
330
+ "modify": {
331
+ "type": "darken",
332
+ "value": "0.15",
333
+ "space": "lch"
334
+ }
335
+ }
336
+ }
337
+ },
338
+ "hover": {
339
+ "value": "{click.button.split.primary.background.action.hover}",
340
+ "type": "color",
341
+ "$extensions": {
342
+ "studio.tokens": {
343
+ "modify": {
344
+ "type": "lighten",
345
+ "value": "0.1",
346
+ "space": "lch"
347
+ }
348
+ }
349
+ }
350
+ }
351
+ },
352
+ "background": {
353
+ "main": {
354
+ "default": {
355
+ "value": "{click.button.basic.color.primary.background.default}",
356
+ "type": "color"
357
+ },
358
+ "hover": {
359
+ "value": "{click.button.basic.color.primary.background.hover}",
360
+ "type": "color"
361
+ },
362
+ "active": {
363
+ "value": "{click.button.basic.color.primary.background.active}",
364
+ "type": "color",
365
+ "$extensions": {
366
+ "studio.tokens": {
367
+ "modify": {
368
+ "type": "darken",
369
+ "value": "0.085",
370
+ "space": "lch"
371
+ }
372
+ }
373
+ }
374
+ }
375
+ },
376
+ "action": {
377
+ "default": {
378
+ "value": "{palette.brand.300}",
379
+ "type": "color",
380
+ "$extensions": {
381
+ "studio.tokens": {
382
+ "modify": {
383
+ "type": "darken",
384
+ "value": "0.085",
385
+ "space": "lch"
386
+ }
387
+ }
388
+ }
389
+ },
390
+ "hover": {
391
+ "value": "{click.button.split.primary.background.main.hover}",
392
+ "type": "color",
393
+ "$extensions": {
394
+ "studio.tokens": {
395
+ "modify": {
396
+ "type": "darken",
397
+ "value": "0.08",
398
+ "space": "lch"
399
+ }
400
+ }
401
+ }
402
+ },
403
+ "active": {
404
+ "value": "{click.button.split.primary.background.main.active}",
405
+ "type": "color",
406
+ "$extensions": {
407
+ "studio.tokens": {
408
+ "modify": {
409
+ "type": "darken",
410
+ "value": "0.12",
411
+ "space": "lch"
412
+ }
413
+ }
414
+ }
415
+ }
416
+ }
417
+ },
418
+ "text": {
419
+ "default": {
420
+ "value": "{click.button.basic.color.primary.text.default}",
421
+ "type": "color"
422
+ }
423
+ }
424
+ }
425
+ }
426
+ },
427
+ "checkbox": {
428
+ "color": {
429
+ "background": {
430
+ "default": {
431
+ "value": "{click.field.color.background.default}",
432
+ "type": "color"
433
+ },
434
+ "active": {
435
+ "value": "{palette.brand.300}",
436
+ "type": "color"
437
+ },
438
+ "disabled-checked": {
439
+ "value": "{palette.neutral.700}",
440
+ "type": "color"
441
+ }
442
+ },
443
+ "stroke": {
444
+ "default": {
445
+ "value": "{click.global.color.stroke.intense}",
446
+ "type": "color"
447
+ },
448
+ "active": {
449
+ "value": "{click.checkbox.color.background.active}",
450
+ "type": "color"
451
+ },
452
+ "disabled": {
453
+ "value": "{palette.neutral.600}",
454
+ "type": "color"
455
+ }
456
+ },
457
+ "check": {
458
+ "default": {
459
+ "value": "{palette.neutral.0}",
460
+ "type": "color"
461
+ },
462
+ "active": {
463
+ "value": "{palette.neutral.900}",
464
+ "type": "color"
465
+ },
466
+ "disabled": {
467
+ "value": "#c0c0c0",
468
+ "type": "color"
469
+ }
470
+ },
471
+ "label": {
472
+ "default": {
473
+ "value": "{click.global.color.text.default}",
474
+ "type": "color"
475
+ },
476
+ "off": {
477
+ "value": "#696e79",
478
+ "type": "color"
479
+ },
480
+ "disabled": {
481
+ "value": "#a0a0a0",
482
+ "type": "color"
483
+ }
484
+ }
485
+ }
486
+ },
487
+ "codeblock": {
488
+ "color": {
489
+ "background": {
490
+ "default": {
491
+ "value": "{palette.neutral.725}",
492
+ "type": "color"
493
+ },
494
+ "inline": {
495
+ "value": "{click.global.color.background.muted}",
496
+ "type": "color"
497
+ }
498
+ },
499
+ "text": {
500
+ "default": {
501
+ "value": "{palette.neutral.0}",
502
+ "type": "color"
503
+ }
504
+ },
505
+ "button": {
506
+ "default": {
507
+ "value": "{palette.neutral.800}",
508
+ "type": "color"
509
+ },
510
+ "hover": {
511
+ "value": "{palette.neutral.0}",
512
+ "type": "color"
513
+ }
514
+ },
515
+ "stroke": {
516
+ "default": {
517
+ "value": "{palette.neutral.725}",
518
+ "type": "color",
519
+ "$extensions": {
520
+ "studio.tokens": {
521
+ "modify": {
522
+ "type": "lighten",
523
+ "value": "0.2",
524
+ "space": "lch"
525
+ }
526
+ }
527
+ }
528
+ },
529
+ "inline": {
530
+ "value": "{palette.neutral.725}",
531
+ "type": "color",
532
+ "$extensions": {
533
+ "studio.tokens": {
534
+ "modify": {
535
+ "type": "lighten",
536
+ "value": "0.2",
537
+ "space": "lch"
538
+ }
539
+ }
540
+ }
541
+ }
542
+ }
543
+ }
544
+ },
545
+ "context-menu": {
546
+ "color": {
547
+ "text": {
548
+ "default": {
549
+ "value": "{click.global.color.text.default}",
550
+ "type": "color"
551
+ },
552
+ "disabled": {
553
+ "value": "{palette.neutral.300}",
554
+ "type": "color"
555
+ },
556
+ "muted": {
557
+ "value": "{click.global.color.text.muted}",
558
+ "type": "color"
559
+ }
560
+ },
561
+ "background": {
562
+ "default": {
563
+ "value": "{click.popover.color.background.default}",
564
+ "type": "color"
565
+ },
566
+ "hover": {
567
+ "value": "{click.global.color.background.muted}",
568
+ "type": "color",
569
+ "$extensions": {
570
+ "studio.tokens": {
571
+ "modify": {
572
+ "type": "lighten",
573
+ "value": "0.0875",
574
+ "space": "lch"
575
+ }
576
+ }
577
+ }
578
+ },
579
+ "active": {
580
+ "value": "{click.context-menu.color.background.hover}",
581
+ "type": "color"
582
+ }
583
+ }
584
+ },
585
+ "stroke": {
586
+ "default": {
587
+ "value": "{click.global.color.stroke.default}",
588
+ "type": "color"
589
+ }
590
+ }
591
+ },
592
+ "feedback": {
593
+ "color": {
594
+ "info": {
595
+ "background": {
596
+ "value": "{palette.info.600}",
597
+ "type": "color"
598
+ },
599
+ "foreground": {
600
+ "value": "{palette.info.200}",
601
+ "type": "color"
602
+ }
603
+ },
604
+ "success": {
605
+ "background": {
606
+ "value": "{palette.success.800}",
607
+ "type": "color"
608
+ },
609
+ "foreground": {
610
+ "value": "{palette.success.300}",
611
+ "type": "color"
612
+ }
613
+ },
614
+ "warning": {
615
+ "background": {
616
+ "value": "{palette.warning.800}",
617
+ "type": "color"
618
+ },
619
+ "foreground": {
620
+ "value": "{palette.warning.400}",
621
+ "type": "color"
622
+ }
623
+ },
624
+ "danger": {
625
+ "background": {
626
+ "value": "{palette.danger.800}",
627
+ "type": "color"
628
+ },
629
+ "foreground": {
630
+ "value": "{palette.danger.300}",
631
+ "type": "color"
632
+ }
633
+ },
634
+ "neutral": {
635
+ "background": {
636
+ "value": "{palette.neutral.700}",
637
+ "type": "color"
638
+ },
639
+ "foreground": {
640
+ "value": "{palette.neutral.300}",
641
+ "type": "color"
642
+ },
643
+ "stroke": {
644
+ "value": "{click.global.color.stroke.default}",
645
+ "type": "color"
646
+ }
647
+ }
648
+ }
649
+ },
650
+ "field": {
651
+ "color": {
652
+ "background": {
653
+ "default": {
654
+ "value": "{palette.neutral.725}",
655
+ "type": "color"
656
+ },
657
+ "active": {
658
+ "value": "{click.global.color.background.default}",
659
+ "type": "color"
660
+ },
661
+ "disabled": {
662
+ "value": "{palette.neutral.700}",
663
+ "type": "color"
664
+ }
665
+ },
666
+ "text": {
667
+ "default": {
668
+ "value": "{palette.slate.100}",
669
+ "type": "color"
670
+ },
671
+ "active": {
672
+ "value": "{click.global.color.text.default}",
673
+ "type": "color"
674
+ },
675
+ "disabled": {
676
+ "value": "{palette.neutral.500}",
677
+ "type": "color"
678
+ }
679
+ },
680
+ "stroke": {
681
+ "default": {
682
+ "value": "{click.global.color.stroke.default}",
683
+ "type": "color",
684
+ "$extensions": {
685
+ "studio.tokens": {
686
+ "modify": {
687
+ "type": "lighten",
688
+ "value": "0.05",
689
+ "space": "lch"
690
+ }
691
+ }
692
+ }
693
+ },
694
+ "active": {
695
+ "value": "{click.global.color.accent.default}",
696
+ "type": "color"
697
+ },
698
+ "disabled": {
699
+ "value": "{palette.neutral.700}",
700
+ "type": "color"
701
+ },
702
+ "hover": {
703
+ "value": "{click.field.color.stroke.default}",
704
+ "type": "color",
705
+ "$extensions": {
706
+ "studio.tokens": {
707
+ "modify": {
708
+ "type": "lighten",
709
+ "value": "0.05",
710
+ "space": "lch"
711
+ }
712
+ }
713
+ }
714
+ }
715
+ },
716
+ "label": {
717
+ "default": {
718
+ "value": "{click.global.color.text.muted}",
719
+ "type": "color"
720
+ },
721
+ "active": {
722
+ "value": "{click.global.color.text.default}",
723
+ "type": "color"
724
+ },
725
+ "disabled": {
726
+ "value": "{palette.neutral.400}",
727
+ "type": "color"
728
+ }
729
+ }
730
+ }
731
+ },
732
+ "grid": {
733
+ "color": {
734
+ "background": {
735
+ "header": {
736
+ "default": {
737
+ "value": "{click.global.color.background.muted}",
738
+ "type": "color"
739
+ }
740
+ },
741
+ "row": {
742
+ "default": {
743
+ "value": "{click.global.color.background.default}",
744
+ "type": "color"
745
+ }
746
+ }
747
+ },
748
+ "text": {
749
+ "header": {
750
+ "default": {
751
+ "value": "{click.global.color.text.muted}",
752
+ "type": "color"
753
+ }
754
+ },
755
+ "row": {
756
+ "default": {
757
+ "value": "{click.global.color.text.default}",
758
+ "type": "color"
759
+ }
760
+ }
761
+ },
762
+ "stroke": {
763
+ "cell": {
764
+ "stroke": {
765
+ "value": "{click.global.color.stroke.default}",
766
+ "type": "color"
767
+ }
768
+ }
769
+ }
770
+ }
771
+ },
772
+ "switch": {
773
+ "color": {
774
+ "background": {
775
+ "default": {
776
+ "value": "{palette.slate.800}",
777
+ "type": "color"
778
+ },
779
+ "active": {
780
+ "value": "{palette.brand.300}",
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.intense}",
791
+ "type": "color"
792
+ },
793
+ "active": {
794
+ "value": "{click.checkbox.color.background.active}",
795
+ "type": "color"
796
+ },
797
+ "disabled": {
798
+ "value": "{palette.neutral.400}",
799
+ "type": "color"
800
+ }
801
+ },
802
+ "indicator": {
803
+ "default": {
804
+ "value": "{palette.neutral.400}",
805
+ "type": "color"
806
+ },
807
+ "active": {
808
+ "value": "{palette.slate.900}",
809
+ "type": "color"
810
+ },
811
+ "disabled": {
812
+ "value": "{palette.neutral.600}",
813
+ "type": "color"
814
+ }
815
+ }
816
+ }
817
+ },
818
+ "sidebar": {
819
+ "main": {
820
+ "color": {
821
+ "background": {
822
+ "default": {
823
+ "value": "{click.global.color.background.default}",
824
+ "type": "color"
825
+ }
826
+ },
827
+ "item": {
828
+ "background": {
829
+ "default": {
830
+ "value": "{palette.utility.transparent}",
831
+ "type": "color"
832
+ },
833
+ "active": {
834
+ "value": "{palette.neutral.700}",
835
+ "type": "color",
836
+ "$extensions": {
837
+ "studio.tokens": {
838
+ "modify": {
839
+ "type": "alpha",
840
+ "value": "0.6",
841
+ "space": "lch"
842
+ }
843
+ }
844
+ }
845
+ },
846
+ "hover": {
847
+ "value": "{click.global.color.background.muted}",
848
+ "type": "color",
849
+ "$extensions": {
850
+ "studio.tokens": {
851
+ "modify": {
852
+ "type": "lighten",
853
+ "value": "0.035",
854
+ "space": "lch"
855
+ }
856
+ }
857
+ }
858
+ }
859
+ },
860
+ "text": {
861
+ "default": {
862
+ "value": "{click.global.color.text.default}",
863
+ "type": "color"
864
+ },
865
+ "muted": {
866
+ "value": "{click.global.color.text.muted}",
867
+ "type": "color"
868
+ }
869
+ }
870
+ },
871
+ "text": {
872
+ "default": {
873
+ "value": "{click.global.color.text.default}",
874
+ "type": "color"
875
+ },
876
+ "muted": {
877
+ "value": "{click.global.color.text.muted}",
878
+ "type": "color"
879
+ }
880
+ },
881
+ "stroke": {
882
+ "default": {
883
+ "value": "{click.global.color.stroke.default}",
884
+ "type": "color"
885
+ }
886
+ }
887
+ }
888
+ },
889
+ "sql-sidebar": {
890
+ "color": {
891
+ "background": {
892
+ "default": {
893
+ "value": "{click.global.color.background.muted}",
894
+ "type": "color"
895
+ }
896
+ },
897
+ "stroke": {
898
+ "default": {
899
+ "value": "{click.global.color.stroke.default}",
900
+ "type": "color"
901
+ }
902
+ }
903
+ }
904
+ }
905
+ },
906
+ "table": {
907
+ "color": {
908
+ "header": {
909
+ "background": {
910
+ "value": "{click.global.color.background.muted}",
911
+ "type": "color"
912
+ },
913
+ "text": {
914
+ "value": "{click.global.color.text.default}",
915
+ "type": "color"
916
+ }
917
+ },
918
+ "row": {
919
+ "background": {
920
+ "value": "{click.global.color.background.default}",
921
+ "type": "color"
922
+ },
923
+ "text": {
924
+ "value": "{click.global.color.text.default}",
925
+ "type": "color"
926
+ }
927
+ },
928
+ "cell": {
929
+ "stroke": {
930
+ "value": "{click.global.color.stroke.default}",
931
+ "type": "color"
932
+ }
933
+ }
934
+ }
935
+ }
936
+ }
937
+ }