@fabrica_communications/design-system 0.1.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 (59) hide show
  1. package/README.md +54 -0
  2. package/package.json +91 -0
  3. package/src/app/components/page.tsx +19 -0
  4. package/src/app/favicon.ico +0 -0
  5. package/src/app/foundations/colors/page.tsx +11 -0
  6. package/src/app/foundations/page.tsx +11 -0
  7. package/src/app/foundations/typography/page.tsx +11 -0
  8. package/src/app/getting-started/page.tsx +11 -0
  9. package/src/app/globals.css +3 -0
  10. package/src/app/layout.tsx +61 -0
  11. package/src/app/page.tsx +994 -0
  12. package/src/components/shared/gap.tsx +103 -0
  13. package/src/components/shared/page-header.tsx +11 -0
  14. package/src/components/shared/page-top-button.tsx +27 -0
  15. package/src/components/ui/accordion.tsx +66 -0
  16. package/src/components/ui/alert-dialog.tsx +157 -0
  17. package/src/components/ui/aspect-ratio.tsx +11 -0
  18. package/src/components/ui/badge.tsx +46 -0
  19. package/src/components/ui/breadcrumb.tsx +109 -0
  20. package/src/components/ui/button.mdx +39 -0
  21. package/src/components/ui/button.stories.tsx +88 -0
  22. package/src/components/ui/button.tsx +53 -0
  23. package/src/components/ui/card.tsx +92 -0
  24. package/src/components/ui/carousel.tsx +241 -0
  25. package/src/components/ui/checkbox.tsx +32 -0
  26. package/src/components/ui/dialog.tsx +143 -0
  27. package/src/components/ui/field.tsx +248 -0
  28. package/src/components/ui/heading.tsx +51 -0
  29. package/src/components/ui/icon-definitions.ts +532 -0
  30. package/src/components/ui/icon.tsx +115 -0
  31. package/src/components/ui/input-group.tsx +170 -0
  32. package/src/components/ui/input.tsx +21 -0
  33. package/src/components/ui/label.tsx +24 -0
  34. package/src/components/ui/native-select.tsx +48 -0
  35. package/src/components/ui/pagination.tsx +127 -0
  36. package/src/components/ui/radio-group.tsx +45 -0
  37. package/src/components/ui/scroll-area.tsx +58 -0
  38. package/src/components/ui/section-container.tsx +24 -0
  39. package/src/components/ui/select.tsx +187 -0
  40. package/src/components/ui/separator.tsx +28 -0
  41. package/src/components/ui/skeleton.tsx +13 -0
  42. package/src/components/ui/sonner.tsx +40 -0
  43. package/src/components/ui/switch.mdx +20 -0
  44. package/src/components/ui/switch.stories.tsx +54 -0
  45. package/src/components/ui/switch.tsx +66 -0
  46. package/src/components/ui/table.tsx +119 -0
  47. package/src/components/ui/tabs.tsx +66 -0
  48. package/src/components/ui/text-link.tsx +72 -0
  49. package/src/components/ui/text.tsx +54 -0
  50. package/src/components/ui/textarea.tsx +18 -0
  51. package/src/components/ui/toggle.tsx +47 -0
  52. package/src/components/ui/tooltip.tsx +61 -0
  53. package/src/index.ts +37 -0
  54. package/src/lib/utils.ts +6 -0
  55. package/src/styles/globals.css +162 -0
  56. package/src/styles/variables.css +261 -0
  57. package/tokens/design-tokens.tokens.json +1652 -0
  58. package/tokens/design-tokens.tokens/344/270/213/345/261/244.json +1659 -0
  59. package/tokens//345/205/250/343/203/227/343/203/255/343/202/270/343/202/247/343/202/257/343/203/210/345/205/261/351/200/232_design-tokens.tokens.json +572 -0
package/tokens//345/205/250/343/203/227/343/203/255/343/202/270/343/202/247/343/202/257/343/203/210/345/205/261/351/200/232_design-tokens.tokens.json ADDED
@@ -0,0 +1,572 @@
1
+ {
2
+ "master": {
3
+ "primitive-spacing": {
4
+ "spacing-2": {
5
+ "type": "dimension",
6
+ "value": 2,
7
+ "extensions": {
8
+ "org.lukasoppermann.figmaDesignTokens": {
9
+ "collection": "master",
10
+ "scopes": [
11
+ "ALL_SCOPES"
12
+ ],
13
+ "variableId": "VariableID:1819:831",
14
+ "exportKey": "variables"
15
+ }
16
+ }
17
+ },
18
+ "spacing-4": {
19
+ "type": "dimension",
20
+ "value": 4,
21
+ "extensions": {
22
+ "org.lukasoppermann.figmaDesignTokens": {
23
+ "collection": "master",
24
+ "scopes": [
25
+ "ALL_SCOPES"
26
+ ],
27
+ "variableId": "VariableID:1819:832",
28
+ "exportKey": "variables"
29
+ }
30
+ }
31
+ },
32
+ "spacing-6": {
33
+ "type": "dimension",
34
+ "value": 6,
35
+ "extensions": {
36
+ "org.lukasoppermann.figmaDesignTokens": {
37
+ "collection": "master",
38
+ "scopes": [
39
+ "ALL_SCOPES"
40
+ ],
41
+ "variableId": "VariableID:1819:833",
42
+ "exportKey": "variables"
43
+ }
44
+ }
45
+ },
46
+ "spacing-8": {
47
+ "type": "dimension",
48
+ "value": 8,
49
+ "extensions": {
50
+ "org.lukasoppermann.figmaDesignTokens": {
51
+ "collection": "master",
52
+ "scopes": [
53
+ "ALL_SCOPES"
54
+ ],
55
+ "variableId": "VariableID:1819:834",
56
+ "exportKey": "variables"
57
+ }
58
+ }
59
+ },
60
+ "spacing-12": {
61
+ "type": "dimension",
62
+ "value": 12,
63
+ "extensions": {
64
+ "org.lukasoppermann.figmaDesignTokens": {
65
+ "collection": "master",
66
+ "scopes": [
67
+ "ALL_SCOPES"
68
+ ],
69
+ "variableId": "VariableID:1819:835",
70
+ "exportKey": "variables"
71
+ }
72
+ }
73
+ },
74
+ "spacing-16": {
75
+ "type": "dimension",
76
+ "value": 16,
77
+ "extensions": {
78
+ "org.lukasoppermann.figmaDesignTokens": {
79
+ "collection": "master",
80
+ "scopes": [
81
+ "ALL_SCOPES"
82
+ ],
83
+ "variableId": "VariableID:1819:836",
84
+ "exportKey": "variables"
85
+ }
86
+ }
87
+ },
88
+ "spacing-24": {
89
+ "type": "dimension",
90
+ "value": 24,
91
+ "extensions": {
92
+ "org.lukasoppermann.figmaDesignTokens": {
93
+ "collection": "master",
94
+ "scopes": [
95
+ "ALL_SCOPES"
96
+ ],
97
+ "variableId": "VariableID:1819:837",
98
+ "exportKey": "variables"
99
+ }
100
+ }
101
+ },
102
+ "spacing-32": {
103
+ "type": "dimension",
104
+ "value": 32,
105
+ "extensions": {
106
+ "org.lukasoppermann.figmaDesignTokens": {
107
+ "collection": "master",
108
+ "scopes": [
109
+ "ALL_SCOPES"
110
+ ],
111
+ "variableId": "VariableID:1819:838",
112
+ "exportKey": "variables"
113
+ }
114
+ }
115
+ },
116
+ "spacing-40": {
117
+ "type": "dimension",
118
+ "value": 40,
119
+ "extensions": {
120
+ "org.lukasoppermann.figmaDesignTokens": {
121
+ "collection": "master",
122
+ "scopes": [
123
+ "ALL_SCOPES"
124
+ ],
125
+ "variableId": "VariableID:1819:839",
126
+ "exportKey": "variables"
127
+ }
128
+ }
129
+ },
130
+ "spacing-48": {
131
+ "type": "dimension",
132
+ "value": 48,
133
+ "extensions": {
134
+ "org.lukasoppermann.figmaDesignTokens": {
135
+ "collection": "master",
136
+ "scopes": [
137
+ "ALL_SCOPES"
138
+ ],
139
+ "variableId": "VariableID:1819:840",
140
+ "exportKey": "variables"
141
+ }
142
+ }
143
+ },
144
+ "spacing-56": {
145
+ "type": "dimension",
146
+ "value": 56,
147
+ "extensions": {
148
+ "org.lukasoppermann.figmaDesignTokens": {
149
+ "collection": "master",
150
+ "scopes": [
151
+ "ALL_SCOPES"
152
+ ],
153
+ "variableId": "VariableID:1819:841",
154
+ "exportKey": "variables"
155
+ }
156
+ }
157
+ },
158
+ "spacing-64": {
159
+ "type": "dimension",
160
+ "value": 64,
161
+ "extensions": {
162
+ "org.lukasoppermann.figmaDesignTokens": {
163
+ "collection": "master",
164
+ "scopes": [
165
+ "ALL_SCOPES"
166
+ ],
167
+ "variableId": "VariableID:1819:842",
168
+ "exportKey": "variables"
169
+ }
170
+ }
171
+ },
172
+ "spacing-72": {
173
+ "type": "dimension",
174
+ "value": 72,
175
+ "extensions": {
176
+ "org.lukasoppermann.figmaDesignTokens": {
177
+ "collection": "master",
178
+ "scopes": [
179
+ "ALL_SCOPES"
180
+ ],
181
+ "variableId": "VariableID:1819:843",
182
+ "exportKey": "variables"
183
+ }
184
+ }
185
+ },
186
+ "spacing-80": {
187
+ "type": "dimension",
188
+ "value": 80,
189
+ "extensions": {
190
+ "org.lukasoppermann.figmaDesignTokens": {
191
+ "collection": "master",
192
+ "scopes": [
193
+ "ALL_SCOPES"
194
+ ],
195
+ "variableId": "VariableID:1819:844",
196
+ "exportKey": "variables"
197
+ }
198
+ }
199
+ },
200
+ "spacing-96": {
201
+ "type": "dimension",
202
+ "value": 96,
203
+ "extensions": {
204
+ "org.lukasoppermann.figmaDesignTokens": {
205
+ "collection": "master",
206
+ "scopes": [
207
+ "ALL_SCOPES"
208
+ ],
209
+ "variableId": "VariableID:1819:845",
210
+ "exportKey": "variables"
211
+ }
212
+ }
213
+ },
214
+ "spacing-120": {
215
+ "type": "dimension",
216
+ "value": 120,
217
+ "extensions": {
218
+ "org.lukasoppermann.figmaDesignTokens": {
219
+ "collection": "master",
220
+ "scopes": [
221
+ "ALL_SCOPES"
222
+ ],
223
+ "variableId": "VariableID:1819:846",
224
+ "exportKey": "variables"
225
+ }
226
+ }
227
+ },
228
+ "spacing-200": {
229
+ "type": "dimension",
230
+ "value": 200,
231
+ "extensions": {
232
+ "org.lukasoppermann.figmaDesignTokens": {
233
+ "collection": "master",
234
+ "scopes": [
235
+ "WIDTH_HEIGHT",
236
+ "GAP"
237
+ ],
238
+ "variableId": "VariableID:1819:847",
239
+ "exportKey": "variables"
240
+ }
241
+ }
242
+ }
243
+ },
244
+ "primitive-radius": {
245
+ "radius-2": {
246
+ "type": "dimension",
247
+ "value": 2,
248
+ "extensions": {
249
+ "org.lukasoppermann.figmaDesignTokens": {
250
+ "collection": "master",
251
+ "scopes": [
252
+ "CORNER_RADIUS"
253
+ ],
254
+ "variableId": "VariableID:1887:387",
255
+ "exportKey": "variables"
256
+ }
257
+ }
258
+ },
259
+ "radius-4": {
260
+ "type": "dimension",
261
+ "value": 4,
262
+ "extensions": {
263
+ "org.lukasoppermann.figmaDesignTokens": {
264
+ "collection": "master",
265
+ "scopes": [
266
+ "ALL_SCOPES"
267
+ ],
268
+ "variableId": "VariableID:1887:388",
269
+ "exportKey": "variables"
270
+ }
271
+ }
272
+ },
273
+ "radius-6": {
274
+ "type": "dimension",
275
+ "value": 6,
276
+ "extensions": {
277
+ "org.lukasoppermann.figmaDesignTokens": {
278
+ "collection": "master",
279
+ "scopes": [
280
+ "ALL_SCOPES"
281
+ ],
282
+ "variableId": "VariableID:1887:389",
283
+ "exportKey": "variables"
284
+ }
285
+ }
286
+ },
287
+ "radius-12": {
288
+ "type": "dimension",
289
+ "value": 12,
290
+ "extensions": {
291
+ "org.lukasoppermann.figmaDesignTokens": {
292
+ "collection": "master",
293
+ "scopes": [
294
+ "ALL_SCOPES"
295
+ ],
296
+ "variableId": "VariableID:1887:390",
297
+ "exportKey": "variables"
298
+ }
299
+ }
300
+ },
301
+ "radius-16": {
302
+ "type": "dimension",
303
+ "value": 16,
304
+ "extensions": {
305
+ "org.lukasoppermann.figmaDesignTokens": {
306
+ "collection": "master",
307
+ "scopes": [
308
+ "ALL_SCOPES"
309
+ ],
310
+ "variableId": "VariableID:1887:391",
311
+ "exportKey": "variables"
312
+ }
313
+ }
314
+ },
315
+ "radius-999": {
316
+ "type": "dimension",
317
+ "value": 999,
318
+ "extensions": {
319
+ "org.lukasoppermann.figmaDesignTokens": {
320
+ "collection": "master",
321
+ "scopes": [
322
+ "ALL_SCOPES"
323
+ ],
324
+ "variableId": "VariableID:1887:392",
325
+ "exportKey": "variables"
326
+ }
327
+ }
328
+ },
329
+ "radius-24": {
330
+ "type": "dimension",
331
+ "value": 24,
332
+ "extensions": {
333
+ "org.lukasoppermann.figmaDesignTokens": {
334
+ "collection": "master",
335
+ "scopes": [
336
+ "ALL_SCOPES"
337
+ ],
338
+ "variableId": "VariableID:1887:393",
339
+ "exportKey": "variables"
340
+ }
341
+ }
342
+ },
343
+ "radius-32": {
344
+ "type": "dimension",
345
+ "value": 32,
346
+ "extensions": {
347
+ "org.lukasoppermann.figmaDesignTokens": {
348
+ "collection": "master",
349
+ "scopes": [
350
+ "ALL_SCOPES"
351
+ ],
352
+ "variableId": "VariableID:1887:394",
353
+ "exportKey": "variables"
354
+ }
355
+ }
356
+ },
357
+ "radius-8": {
358
+ "type": "dimension",
359
+ "value": 8,
360
+ "extensions": {
361
+ "org.lukasoppermann.figmaDesignTokens": {
362
+ "collection": "master",
363
+ "scopes": [
364
+ "ALL_SCOPES"
365
+ ],
366
+ "variableId": "VariableID:2823:534",
367
+ "exportKey": "variables"
368
+ }
369
+ }
370
+ }
371
+ },
372
+ "primitive-fontsize": {
373
+ "fontsize-8": {
374
+ "type": "dimension",
375
+ "value": 8,
376
+ "extensions": {
377
+ "org.lukasoppermann.figmaDesignTokens": {
378
+ "collection": "master",
379
+ "scopes": [
380
+ "FONT_SIZE",
381
+ "FONT_VARIATIONS"
382
+ ],
383
+ "variableId": "VariableID:2307:107",
384
+ "exportKey": "variables"
385
+ }
386
+ }
387
+ },
388
+ "fontsize-10": {
389
+ "type": "dimension",
390
+ "value": 10,
391
+ "extensions": {
392
+ "org.lukasoppermann.figmaDesignTokens": {
393
+ "collection": "master",
394
+ "scopes": [
395
+ "ALL_SCOPES"
396
+ ],
397
+ "variableId": "VariableID:2307:108",
398
+ "exportKey": "variables"
399
+ }
400
+ }
401
+ },
402
+ "fontsize -12": {
403
+ "type": "dimension",
404
+ "value": 12,
405
+ "extensions": {
406
+ "org.lukasoppermann.figmaDesignTokens": {
407
+ "collection": "master",
408
+ "scopes": [
409
+ "ALL_SCOPES"
410
+ ],
411
+ "variableId": "VariableID:2307:109",
412
+ "exportKey": "variables"
413
+ }
414
+ }
415
+ },
416
+ "fontsize-14": {
417
+ "type": "dimension",
418
+ "value": 14,
419
+ "extensions": {
420
+ "org.lukasoppermann.figmaDesignTokens": {
421
+ "collection": "master",
422
+ "scopes": [
423
+ "ALL_SCOPES"
424
+ ],
425
+ "variableId": "VariableID:2307:110",
426
+ "exportKey": "variables"
427
+ }
428
+ }
429
+ },
430
+ "fontsize-16": {
431
+ "type": "dimension",
432
+ "value": 16,
433
+ "extensions": {
434
+ "org.lukasoppermann.figmaDesignTokens": {
435
+ "collection": "master",
436
+ "scopes": [
437
+ "ALL_SCOPES"
438
+ ],
439
+ "variableId": "VariableID:2307:111",
440
+ "exportKey": "variables"
441
+ }
442
+ }
443
+ },
444
+ "fontsize-18": {
445
+ "type": "dimension",
446
+ "value": 18,
447
+ "extensions": {
448
+ "org.lukasoppermann.figmaDesignTokens": {
449
+ "collection": "master",
450
+ "scopes": [
451
+ "ALL_SCOPES"
452
+ ],
453
+ "variableId": "VariableID:2307:112",
454
+ "exportKey": "variables"
455
+ }
456
+ }
457
+ },
458
+ "fontsize-20": {
459
+ "type": "dimension",
460
+ "value": 20,
461
+ "extensions": {
462
+ "org.lukasoppermann.figmaDesignTokens": {
463
+ "collection": "master",
464
+ "scopes": [
465
+ "ALL_SCOPES"
466
+ ],
467
+ "variableId": "VariableID:2307:113",
468
+ "exportKey": "variables"
469
+ }
470
+ }
471
+ },
472
+ "fontsize-22": {
473
+ "type": "dimension",
474
+ "value": 22,
475
+ "extensions": {
476
+ "org.lukasoppermann.figmaDesignTokens": {
477
+ "collection": "master",
478
+ "scopes": [
479
+ "ALL_SCOPES"
480
+ ],
481
+ "variableId": "VariableID:2307:114",
482
+ "exportKey": "variables"
483
+ }
484
+ }
485
+ },
486
+ "fontsize-24": {
487
+ "type": "dimension",
488
+ "value": 24,
489
+ "extensions": {
490
+ "org.lukasoppermann.figmaDesignTokens": {
491
+ "collection": "master",
492
+ "scopes": [
493
+ "ALL_SCOPES"
494
+ ],
495
+ "variableId": "VariableID:2307:115",
496
+ "exportKey": "variables"
497
+ }
498
+ }
499
+ },
500
+ "fontsize-28": {
501
+ "type": "dimension",
502
+ "value": 28,
503
+ "extensions": {
504
+ "org.lukasoppermann.figmaDesignTokens": {
505
+ "collection": "master",
506
+ "scopes": [
507
+ "ALL_SCOPES"
508
+ ],
509
+ "variableId": "VariableID:2307:116",
510
+ "exportKey": "variables"
511
+ }
512
+ }
513
+ },
514
+ "fontsize-32": {
515
+ "type": "dimension",
516
+ "value": 32,
517
+ "extensions": {
518
+ "org.lukasoppermann.figmaDesignTokens": {
519
+ "collection": "master",
520
+ "scopes": [
521
+ "ALL_SCOPES"
522
+ ],
523
+ "variableId": "VariableID:2307:117",
524
+ "exportKey": "variables"
525
+ }
526
+ }
527
+ },
528
+ "fontsize-40": {
529
+ "type": "dimension",
530
+ "value": 40,
531
+ "extensions": {
532
+ "org.lukasoppermann.figmaDesignTokens": {
533
+ "collection": "master",
534
+ "scopes": [
535
+ "ALL_SCOPES"
536
+ ],
537
+ "variableId": "VariableID:2307:118",
538
+ "exportKey": "variables"
539
+ }
540
+ }
541
+ },
542
+ "fontsize-48": {
543
+ "type": "dimension",
544
+ "value": 48,
545
+ "extensions": {
546
+ "org.lukasoppermann.figmaDesignTokens": {
547
+ "collection": "master",
548
+ "scopes": [
549
+ "ALL_SCOPES"
550
+ ],
551
+ "variableId": "VariableID:2307:119",
552
+ "exportKey": "variables"
553
+ }
554
+ }
555
+ },
556
+ "fontsize-36": {
557
+ "type": "dimension",
558
+ "value": 36,
559
+ "extensions": {
560
+ "org.lukasoppermann.figmaDesignTokens": {
561
+ "collection": "master",
562
+ "scopes": [
563
+ "ALL_SCOPES"
564
+ ],
565
+ "variableId": "VariableID:3126:2804",
566
+ "exportKey": "variables"
567
+ }
568
+ }
569
+ }
570
+ }
571
+ }
572
+ }