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