@bitrise/bitkit 12.105.0 → 12.107.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 (42) hide show
  1. package/package.json +17 -14
  2. package/src/Components/Avatar/Avatar.tsx +0 -2
  3. package/src/Components/Badge/Badge.theme.ts +2 -6
  4. package/src/Components/Card/Card.tsx +0 -2
  5. package/src/Components/ColorButton/ColorButton.theme.ts +1 -1
  6. package/src/Components/ColorButton/ColorButton.tsx +1 -1
  7. package/src/Components/Dialog/Dialog.tsx +1 -1
  8. package/src/Components/Filter/Filter.theme.ts +1 -1
  9. package/src/Components/Form/Form.theme.ts +3 -6
  10. package/src/Components/Form/Input/Input.tsx +1 -1
  11. package/src/Components/Link/Link.theme.ts +2 -2
  12. package/src/Components/Link/Link.tsx +1 -1
  13. package/src/Components/Menu/MenuItem.tsx +1 -1
  14. package/src/Components/Notification/Notification.tsx +1 -1
  15. package/src/Components/Ribbon/Ribbon.tsx +1 -1
  16. package/src/Components/SegmentedControl/SegmentedControl.theme.ts +1 -1
  17. package/src/Components/Sidebar/SidebarItem.theme.ts +1 -1
  18. package/src/Components/Tabs/ContainedTab.tsx +3 -3
  19. package/src/Components/Tabs/Tabs.theme.ts +1 -3
  20. package/src/Components/Tag/Tag.theme.ts +18 -12
  21. package/src/Components/Tag/Tag.tsx +1 -1
  22. package/src/Components/Text/Text.theme.ts +45 -2
  23. package/src/Components/Text/Text.tsx +4 -17
  24. package/src/Components/components.theme.ts +103 -0
  25. package/src/Foundations/Colors/Colors.tsx +30 -4
  26. package/src/Foundations/Themes/Alert.theme.ts +3 -4
  27. package/src/Foundations/Typography/Typography.tsx +25 -0
  28. package/src/Foundations/docComponents/DocTitle.tsx +11 -0
  29. package/src/Foundations/docComponents/TokenTable.tsx +42 -13
  30. package/src/index.ts +1 -2
  31. package/src/theme.ts +13 -112
  32. package/src/tokens/tokensToTheme.json +977 -0
  33. package/src/types/bitkit.ts +37 -0
  34. package/src/utils/utils.ts +14 -0
  35. package/src/Foundations/Colors/CommonTokens.tsx +0 -21
  36. package/src/Foundations/Colors/SystemTokens.tsx +0 -27
  37. package/src/Foundations/Radii/Radii.ts +0 -10
  38. package/src/Foundations/Sizes/Sizes.ts +0 -18
  39. package/src/Foundations/Typography/Typography.ts +0 -69
  40. package/src/tokens/tokens.json +0 -3275
  41. package/src/tokens/tokens.ts +0 -49
  42. package/src/tokens/tokensUtils.ts +0 -20
@@ -0,0 +1,977 @@
1
+ {
2
+ "colors": {
3
+ "pal": {
4
+ "neutral": {
5
+ "10": "#201b22",
6
+ "20": "#362d39",
7
+ "30": "#49404f",
8
+ "40": "#6b6071",
9
+ "50": "#7d7184",
10
+ "60": "#94879b",
11
+ "70": "#afa4b4",
12
+ "80": "#c9c1cd",
13
+ "90": "#dfdae1",
14
+ "93": "#efebef",
15
+ "95": "#f6f4f6",
16
+ "100": "#ffffff"
17
+ },
18
+ "purple": {
19
+ "10": "#2b0e3f",
20
+ "20": "#421560",
21
+ "30": "#5c2a7e",
22
+ "40": "#7b3ba5",
23
+ "50": "#9247c2",
24
+ "60": "#ae63de",
25
+ "70": "#c289e6",
26
+ "80": "#d5adeb",
27
+ "90": "#ead4f2",
28
+ "93": "#f3e7f9",
29
+ "95": "#f9f2fd"
30
+ },
31
+ "red": {
32
+ "10": "#47060c",
33
+ "20": "#630811",
34
+ "30": "#78111c",
35
+ "40": "#a91e2e",
36
+ "50": "#d72d40",
37
+ "60": "#f7596c",
38
+ "70": "#ff8091",
39
+ "80": "#ffa8b5",
40
+ "90": "#ffccd5",
41
+ "93": "#ffe5eb",
42
+ "95": "#fff0f3"
43
+ },
44
+ "orange": {
45
+ "10": "#421000",
46
+ "20": "#661900",
47
+ "30": "#7a2200",
48
+ "40": "#a33500",
49
+ "50": "#d45202",
50
+ "60": "#ed720c",
51
+ "70": "#fd9730",
52
+ "80": "#ffb766",
53
+ "90": "#ffd5a3",
54
+ "93": "#ffe9cf",
55
+ "95": "#fff4e5"
56
+ },
57
+ "yellow": {
58
+ "10": "#2e1c00",
59
+ "20": "#4d2f00",
60
+ "30": "#613e00",
61
+ "40": "#875b00",
62
+ "50": "#b27e00",
63
+ "60": "#d6a200",
64
+ "70": "#ebba00",
65
+ "80": "#f9cc15",
66
+ "90": "#fbe074",
67
+ "93": "#ffefad",
68
+ "95": "#fff6d1"
69
+ },
70
+ "green": {
71
+ "10": "#042a0f",
72
+ "20": "#064217",
73
+ "30": "#0b5620",
74
+ "40": "#167231",
75
+ "50": "#2a9d4c",
76
+ "60": "#4eb76c",
77
+ "70": "#77cf8f",
78
+ "80": "#a1deb2",
79
+ "90": "#c3eace",
80
+ "93": "#e1f4e7",
81
+ "95": "#eef9f1"
82
+ },
83
+ "turquoise": {
84
+ "10": "#002924",
85
+ "20": "#003d36",
86
+ "30": "#005248",
87
+ "40": "#007366",
88
+ "50": "#009e8e",
89
+ "60": "#11bba9",
90
+ "70": "#55cec3",
91
+ "80": "#8ae0d7",
92
+ "90": "#aeefe8",
93
+ "93": "#d8f8f4",
94
+ "95": "#e9fbf9"
95
+ },
96
+ "blue": {
97
+ "10": "#002442",
98
+ "20": "#00315c",
99
+ "30": "#044781",
100
+ "40": "#1066ac",
101
+ "50": "#2582d0",
102
+ "60": "#4f9bde",
103
+ "70": "#71b8ef",
104
+ "80": "#99d1f5",
105
+ "90": "#c2e7fa",
106
+ "93": "#def2fc",
107
+ "95": "#ecf8fd"
108
+ }
109
+ },
110
+ "neutral": {
111
+ "10": "#201b22",
112
+ "20": "#362d39",
113
+ "30": "#49404f",
114
+ "40": "#6b6071",
115
+ "50": "#7d7184",
116
+ "60": "#94879b",
117
+ "70": "#afa4b4",
118
+ "80": "#c9c1cd",
119
+ "90": "#dfdae1",
120
+ "93": "#efebef",
121
+ "95": "#f6f4f6",
122
+ "100": "#ffffff"
123
+ },
124
+ "purple": {
125
+ "10": "#2b0e3f",
126
+ "20": "#421560",
127
+ "30": "#5c2a7e",
128
+ "40": "#7b3ba5",
129
+ "50": "#9247c2",
130
+ "60": "#ae63de",
131
+ "70": "#c289e6",
132
+ "80": "#d5adeb",
133
+ "90": "#ead4f2",
134
+ "93": "#f3e7f9",
135
+ "95": "#f9f2fd"
136
+ },
137
+ "red": {
138
+ "10": "#47060c",
139
+ "20": "#630811",
140
+ "30": "#78111c",
141
+ "40": "#a91e2e",
142
+ "50": "#d72d40",
143
+ "60": "#f7596c",
144
+ "70": "#ff8091",
145
+ "80": "#ffa8b5",
146
+ "90": "#ffccd5",
147
+ "93": "#ffe5eb",
148
+ "95": "#fff0f3"
149
+ },
150
+ "orange": {
151
+ "10": "#421000",
152
+ "20": "#661900",
153
+ "30": "#7a2200",
154
+ "40": "#a33500",
155
+ "50": "#d45202",
156
+ "60": "#ed720c",
157
+ "70": "#fd9730",
158
+ "80": "#ffb766",
159
+ "90": "#ffd5a3",
160
+ "93": "#ffe9cf",
161
+ "95": "#fff4e5"
162
+ },
163
+ "yellow": {
164
+ "10": "#2e1c00",
165
+ "20": "#4d2f00",
166
+ "30": "#613e00",
167
+ "40": "#875b00",
168
+ "50": "#b27e00",
169
+ "60": "#d6a200",
170
+ "70": "#ebba00",
171
+ "80": "#f9cc15",
172
+ "90": "#fbe074",
173
+ "93": "#ffefad",
174
+ "95": "#fff6d1"
175
+ },
176
+ "green": {
177
+ "10": "#042a0f",
178
+ "20": "#064217",
179
+ "30": "#0b5620",
180
+ "40": "#167231",
181
+ "50": "#2a9d4c",
182
+ "60": "#4eb76c",
183
+ "70": "#77cf8f",
184
+ "80": "#a1deb2",
185
+ "90": "#c3eace",
186
+ "93": "#e1f4e7",
187
+ "95": "#eef9f1"
188
+ },
189
+ "turquoise": {
190
+ "10": "#002924",
191
+ "20": "#003d36",
192
+ "30": "#005248",
193
+ "40": "#007366",
194
+ "50": "#009e8e",
195
+ "60": "#11bba9",
196
+ "70": "#55cec3",
197
+ "80": "#8ae0d7",
198
+ "90": "#aeefe8",
199
+ "93": "#d8f8f4",
200
+ "95": "#e9fbf9"
201
+ },
202
+ "blue": {
203
+ "10": "#002442",
204
+ "20": "#00315c",
205
+ "30": "#044781",
206
+ "40": "#1066ac",
207
+ "50": "#2582d0",
208
+ "60": "#4f9bde",
209
+ "70": "#71b8ef",
210
+ "80": "#99d1f5",
211
+ "90": "#c2e7fa",
212
+ "93": "#def2fc",
213
+ "95": "#ecf8fd"
214
+ }
215
+ },
216
+ "fonts": {
217
+ "body": "\"Figtree\", sans-serif",
218
+ "mono": "\"Source Code Pro\", monospace"
219
+ },
220
+ "fontSizes": {
221
+ "1": "0.75rem",
222
+ "2": "0.875rem",
223
+ "3": "1rem",
224
+ "4": "1.1875rem",
225
+ "5": "1.5rem",
226
+ "6": "1.875rem",
227
+ "7": "2.25rem",
228
+ "8": "3rem",
229
+ "base": "1rem"
230
+ },
231
+ "fontWeights": {
232
+ "bold": 700,
233
+ "demiBold": 600,
234
+ "normal": 400,
235
+ "semibold": 600
236
+ },
237
+ "letterSpacings": {
238
+ "0": "0",
239
+ "1": "0.00625rem",
240
+ "2": "0.009375rem",
241
+ "3": "0.0175rem",
242
+ "code": "-0.009375rem"
243
+ },
244
+ "lineHeights": {
245
+ "size-1": "1rem",
246
+ "size-2": "1.25rem",
247
+ "size-3": "1.5rem",
248
+ "size-4": "1.75rem",
249
+ "size-5": "2.25rem",
250
+ "size-6": "2.5rem",
251
+ "size-7": "3rem",
252
+ "size-8": "3.75rem"
253
+ },
254
+ "radii": {
255
+ "2": "0.125rem",
256
+ "4": "0.25rem",
257
+ "8": "0.5rem",
258
+ "12": "0.75rem",
259
+ "16": "1rem",
260
+ "24": "1.5rem"
261
+ },
262
+ "semanticTokens": {
263
+ "colors": {
264
+ "brand": {
265
+ "primary": "pal.purple.30"
266
+ },
267
+ "separator": {
268
+ "primary": "pal.neutral.90"
269
+ },
270
+ "sys": {
271
+ "fg": {
272
+ "base": "pal.neutral.10",
273
+ "primary": "pal.purple.10",
274
+ "secondary": "pal.neutral.40",
275
+ "tertiary": "pal.neutral.60",
276
+ "subtle": "pal.neutral.70",
277
+ "minimal": "pal.neutral.80",
278
+ "positive": "pal.green.50",
279
+ "negative": "pal.red.50",
280
+ "on-color": "pal.neutral.100",
281
+ "on-contrast": "pal.neutral.95",
282
+ "on-disabled": "pal.neutral.70",
283
+ "disabled": "pal.neutral.80"
284
+ },
285
+ "bg": {
286
+ "surface": "pal.neutral.100",
287
+ "contrast": "pal.neutral.10",
288
+ "moderate": "pal.neutral.90",
289
+ "subtle": "pal.neutral.93",
290
+ "minimal": "pal.neutral.95",
291
+ "disabled": "pal.neutral.95",
292
+ "transparent": "pal.neutral.100 0%"
293
+ },
294
+ "border": {
295
+ "minimal": "pal.neutral.93",
296
+ "subtle": "pal.neutral.90",
297
+ "strong": "pal.neutral.80",
298
+ "emphasized": "pal.neutral.70",
299
+ "critical": "pal.red.50",
300
+ "inverse": "pal.neutral.100",
301
+ "on-contrast": "pal.neutral.95",
302
+ "disabled": "pal.neutral.90"
303
+ },
304
+ "primary": {
305
+ "base": "pal.purple.40",
306
+ "emphasized": "pal.purple.30",
307
+ "contrast": "pal.purple.10",
308
+ "muted": "pal.purple.80",
309
+ "subtle": "pal.purple.93",
310
+ "disabled": "pal.neutral.90"
311
+ },
312
+ "interactive": {
313
+ "base": "pal.purple.50",
314
+ "strong": "pal.purple.40",
315
+ "bold": "pal.purple.60",
316
+ "highlight": "pal.purple.70",
317
+ "muted": "pal.purple.80",
318
+ "moderate": "pal.purple.90",
319
+ "subtle": "pal.purple.93",
320
+ "minimal": "pal.purple.95",
321
+ "disabled": "pal.neutral.90"
322
+ },
323
+ "info": {
324
+ "base": "pal.blue.50",
325
+ "strong": "pal.blue.40",
326
+ "bold": "pal.blue.60",
327
+ "muted": "pal.blue.80",
328
+ "moderate": "pal.blue.90",
329
+ "subtle": "pal.blue.93",
330
+ "minimal": "pal.blue.95"
331
+ },
332
+ "success": {
333
+ "base": "pal.green.50",
334
+ "strong": "pal.green.40",
335
+ "bold": "pal.green.60",
336
+ "muted": "pal.green.80",
337
+ "moderate": "pal.green.90",
338
+ "subtle": "pal.green.93",
339
+ "minimal": "pal.green.95"
340
+ },
341
+ "warning": {
342
+ "base": "pal.yellow.50",
343
+ "strong": "pal.yellow.40",
344
+ "bold": "pal.yellow.60",
345
+ "muted": "pal.yellow.80",
346
+ "moderate": "pal.yellow.90",
347
+ "subtle": "pal.yellow.93",
348
+ "minimal": "pal.yellow.95"
349
+ },
350
+ "critical": {
351
+ "base": "pal.red.50",
352
+ "dark": "pal.red.20",
353
+ "strong": "pal.red.40",
354
+ "bold": "pal.red.60",
355
+ "muted": "pal.red.80",
356
+ "moderate": "pal.red.90",
357
+ "subtle": "pal.red.93",
358
+ "minimal": "pal.red.95"
359
+ },
360
+ "neutral": {
361
+ "base": "pal.neutral.50",
362
+ "strong": "pal.neutral.40",
363
+ "bold": "pal.neutral.60",
364
+ "muted": "pal.neutral.80",
365
+ "moderate": "pal.neutral.90",
366
+ "subtle": "pal.neutral.93",
367
+ "minimal": "pal.neutral.95"
368
+ },
369
+ "orange": {
370
+ "base": "pal.orange.50",
371
+ "strong": "pal.orange.40",
372
+ "bold": "pal.orange.60",
373
+ "muted": "pal.orange.80",
374
+ "moderate": "pal.orange.90",
375
+ "subtle": "pal.orange.93",
376
+ "minimal": "pal.orange.95"
377
+ },
378
+ "turquoise": {
379
+ "base": "pal.turquoise.50",
380
+ "strong": "pal.turquoise.40",
381
+ "bold": "pal.turquoise.60",
382
+ "muted": "pal.turquoise.80",
383
+ "moderate": "pal.turquoise.90",
384
+ "subtle": "pal.turquoise.93",
385
+ "minimal": "pal.turquoise.95"
386
+ }
387
+ },
388
+ "background": {
389
+ "primary": "sys.bg.surface",
390
+ "secondary": "sys.bg.minimal",
391
+ "tertiary": "sys.bg.subtle",
392
+ "hover": "sys.bg.subtle",
393
+ "active": "sys.bg.moderate",
394
+ "selected": "sys.interactive.minimal",
395
+ "selected-hover": "sys.interactive.subtle",
396
+ "contrast": "sys.bg.contrast",
397
+ "disabled": "sys.bg.disabled"
398
+ },
399
+ "border": {
400
+ "regular": "sys.border.subtle",
401
+ "minimal": "sys.border.minimal",
402
+ "strong": "sys.border.strong",
403
+ "hover": "sys.border.emphasized",
404
+ "focus": "sys.interactive.highlight",
405
+ "selected": "sys.interactive.base",
406
+ "error": "sys.border.critical",
407
+ "inverse": "sys.border.inverse",
408
+ "on-contrast": "sys.border.on-contrast",
409
+ "disabled": "sys.border.disabled"
410
+ },
411
+ "text": {
412
+ "primary": "sys.fg.primary",
413
+ "secondary": "sys.fg.secondary",
414
+ "tertiary": "sys.fg.tertiary",
415
+ "body": "sys.fg.base",
416
+ "link": "sys.interactive.base",
417
+ "link-hover": "sys.interactive.strong",
418
+ "selected": "sys.interactive.base",
419
+ "positive": "sys.fg.positive",
420
+ "negative": "sys.fg.negative",
421
+ "on-color": "sys.fg.on-color",
422
+ "on-contrast": "sys.fg.on-contrast",
423
+ "on-disabled": "sys.fg.on-disabled",
424
+ "disabled": "sys.fg.disabled"
425
+ },
426
+ "icon": {
427
+ "primary": "sys.fg.primary",
428
+ "secondary": "sys.fg.secondary",
429
+ "tertiary": "sys.fg.tertiary",
430
+ "interactive": "sys.interactive.base",
431
+ "interactive-hover": "sys.interactive.strong",
432
+ "positive": "sys.fg.positive",
433
+ "negative": "sys.fg.negative",
434
+ "on-color": "sys.fg.on-color",
435
+ "on-contrast": "sys.fg.on-contrast",
436
+ "on-disabled": "sys.fg.on-disabled",
437
+ "disabled": "sys.fg.disabled"
438
+ },
439
+ "button": {
440
+ "primary": {
441
+ "bg": "sys.primary.base",
442
+ "bg-hover": "sys.primary.emphasized",
443
+ "bg-active": "sys.fg.primary",
444
+ "bg-disabled": "sys.primary.disabled",
445
+ "fg": "sys.fg.on-color",
446
+ "fg-hover": "sys.fg.on-color",
447
+ "fg-active": "sys.fg.on-color",
448
+ "fg-disabled": "sys.fg.on-disabled"
449
+ },
450
+ "secondary": {
451
+ "bg": "sys.bg.surface",
452
+ "bg-hover": "sys.bg.subtle",
453
+ "bg-active": "sys.bg.moderate",
454
+ "bg-disabled": "sys.bg.minimal",
455
+ "fg": "sys.fg.primary",
456
+ "fg-hover": "sys.fg.primary",
457
+ "fg-active": "sys.fg.primary",
458
+ "fg-disabled": "sys.fg.disabled",
459
+ "border": "sys.border.strong",
460
+ "border-hover": "sys.border.emphasized",
461
+ "border-active": "sys.border.emphasized",
462
+ "border-disabled": "sys.border.disabled"
463
+ },
464
+ "tertiary": {
465
+ "bg": "sys.bg.transparent",
466
+ "bg-hover": "sys.bg.subtle",
467
+ "bg-active": "sys.bg.moderate",
468
+ "bg-disabled": "sys.bg.transparent",
469
+ "fg": "sys.interactive.base",
470
+ "fg-hover": "sys.interactive.strong",
471
+ "fg-active": "sys.fg.primary",
472
+ "fg-disabled": "sys.fg.disabled"
473
+ },
474
+ "danger-primary": {
475
+ "bg": "sys.critical.base",
476
+ "bg-hover": "sys.critical.strong",
477
+ "bg-active": "sys.critical.dark",
478
+ "bg-disabled": "sys.primary.disabled",
479
+ "fg": "sys.fg.on-color",
480
+ "fg-hover": "sys.fg.on-color",
481
+ "fg-active": "sys.fg.on-color",
482
+ "fg-disabled": "sys.fg.on-disabled"
483
+ },
484
+ "danger-secondary": {
485
+ "bg": "sys.bg.surface",
486
+ "bg-hover": "sys.critical.minimal",
487
+ "bg-active": "sys.critical.moderate",
488
+ "bg-disabled": "sys.bg.minimal",
489
+ "fg": "sys.critical.base",
490
+ "fg-hover": "sys.critical.base",
491
+ "fg-active": "sys.critical.strong",
492
+ "fg-disabled": "sys.fg.disabled",
493
+ "border": "sys.critical.muted",
494
+ "border-hover": "sys.critical.muted",
495
+ "border-active": "sys.critical.base",
496
+ "border-disabled": "sys.border.disabled"
497
+ },
498
+ "danger-tertiary": {
499
+ "bg": "sys.bg.transparent",
500
+ "bg-hover": "sys.critical.minimal",
501
+ "bg-active": "sys.critical.moderate",
502
+ "bg-disabled": "sys.bg.transparent",
503
+ "fg": "sys.critical.base",
504
+ "fg-hover": "sys.critical.base",
505
+ "fg-active": "sys.critical.strong",
506
+ "fg-disabled": "sys.fg.disabled"
507
+ }
508
+ },
509
+ "input": {
510
+ "text": {
511
+ "label": "sys.fg.primary",
512
+ "inputValue": "sys.fg.base",
513
+ "placeholder": "sys.fg.subtle",
514
+ "helper": "sys.fg.secondary",
515
+ "error": "sys.fg.negative"
516
+ },
517
+ "checkbox": {
518
+ "selection": "sys.interactive.base",
519
+ "selection-disabled": "sys.interactive.disabled"
520
+ },
521
+ "toggle": {
522
+ "frameOn": "sys.success.bold",
523
+ "frameOn-disabled": "rgba(sys.success.bold,0.5)",
524
+ "frameOff": "sys.neutral.bold",
525
+ "frameOff-disabled": "rgba(sys.neutral.bold,0.5)",
526
+ "slideOn": "sys.bg.surface",
527
+ "slideOn-disabled": "sys.bg.surface",
528
+ "slideOff": "sys.bg.surface",
529
+ "slideOff-disabled": "sys.bg.surface"
530
+ }
531
+ },
532
+ "status": {
533
+ "info": {
534
+ "bg": "sys.info.minimal",
535
+ "bg-hover": "sys.info.subtle",
536
+ "bg-active": "sys.info.moderate",
537
+ "border": "sys.info.muted",
538
+ "icon": "sys.info.strong",
539
+ "text": "sys.info.strong"
540
+ },
541
+ "success": {
542
+ "bg": "sys.success.minimal",
543
+ "bg-hover": "sys.success.subtle",
544
+ "bg-active": "sys.success.moderate",
545
+ "border": "sys.success.muted",
546
+ "icon": "sys.success.strong",
547
+ "text": "sys.success.strong"
548
+ },
549
+ "warning": {
550
+ "bg": "sys.warning.minimal",
551
+ "bg-hover": "sys.warning.subtle",
552
+ "bg-active": "sys.warning.moderate",
553
+ "border": "sys.warning.muted",
554
+ "icon": "sys.warning.strong",
555
+ "text": "sys.warning.strong"
556
+ },
557
+ "critical": {
558
+ "bg": "sys.critical.minimal",
559
+ "bg-hover": "sys.critical.subtle",
560
+ "bg-active": "sys.critical.moderate",
561
+ "border": "sys.critical.muted",
562
+ "icon": "sys.critical.strong",
563
+ "text": "sys.critical.strong"
564
+ },
565
+ "progress": {
566
+ "bg": "sys.interactive.minimal",
567
+ "bg-hover": "sys.interactive.subtle",
568
+ "bg-active": "sys.interactive.moderate",
569
+ "border": "sys.interactive.muted",
570
+ "icon": "sys.interactive.strong",
571
+ "text": "sys.interactive.strong"
572
+ },
573
+ "neutral": {
574
+ "bg": "sys.neutral.minimal",
575
+ "bg-hover": "sys.neutral.subtle",
576
+ "bg-active": "sys.neutral.moderate",
577
+ "border": "sys.neutral.muted",
578
+ "icon": "sys.neutral.strong",
579
+ "text": "sys.neutral.strong"
580
+ }
581
+ },
582
+ "utilities": {
583
+ "overlay": "rgba(sys.bg.contrast, 0.8)",
584
+ "overlay-light": "rgba(sys.bg.contrast, 0.16)",
585
+ "skeleton": "sys.bg.subtle",
586
+ "skeleton-strong": "sys.fg.minimal"
587
+ }
588
+ }
589
+ },
590
+ "sizes": {
591
+ "4": "0.25rem",
592
+ "8": "0.5rem",
593
+ "12": "0.75rem",
594
+ "16": "1rem",
595
+ "20": "1.25rem",
596
+ "24": "1.5rem",
597
+ "32": "2rem",
598
+ "40": "2.5rem",
599
+ "48": "3rem",
600
+ "64": "4rem",
601
+ "96": "6rem",
602
+ "128": "8rem"
603
+ },
604
+ "textStyles": {
605
+ "mono/code-2": {
606
+ "fontFamily": "mono",
607
+ "fontSize": "1",
608
+ "lineHeight": "size-1",
609
+ "letterSpacing": "code"
610
+ },
611
+ "mono/code-3": {
612
+ "fontFamily": "mono",
613
+ "fontSize": "2",
614
+ "lineHeight": "size-2",
615
+ "letterSpacing": "code"
616
+ },
617
+ "sans/size-1/normal": {
618
+ "lineHeight": "size-1",
619
+ "fontSize": "1",
620
+ "letterSpacing": "2"
621
+ },
622
+ "sans/size-1/semibold": {
623
+ "fontWeight": "semibold",
624
+ "lineHeight": "size-1",
625
+ "fontSize": "1",
626
+ "letterSpacing": "2"
627
+ },
628
+ "sans/size-1/bold": {
629
+ "fontWeight": "bold",
630
+ "lineHeight": "size-1",
631
+ "fontSize": "1",
632
+ "letterSpacing": "2"
633
+ },
634
+ "sans/size-1/uppercase-bold": {
635
+ "fontWeight": "bold",
636
+ "lineHeight": "size-1",
637
+ "fontSize": "1",
638
+ "letterSpacing": "2",
639
+ "textTransform": "uppercase"
640
+ },
641
+ "sans/size-2/normal": {
642
+ "lineHeight": "size-2",
643
+ "fontSize": "2"
644
+ },
645
+ "sans/size-2/normal-underline": {
646
+ "lineHeight": "size-2",
647
+ "fontSize": "2",
648
+ "textDecoration": "underline"
649
+ },
650
+ "sans/size-2/semibold": {
651
+ "fontWeight": "semibold",
652
+ "lineHeight": "size-2",
653
+ "fontSize": "2"
654
+ },
655
+ "sans/size-2/semibold-underline": {
656
+ "fontWeight": "semibold",
657
+ "lineHeight": "size-2",
658
+ "fontSize": "2",
659
+ "textDecoration": "underline"
660
+ },
661
+ "sans/size-2/bold": {
662
+ "fontWeight": "bold",
663
+ "lineHeight": "size-2",
664
+ "fontSize": "2"
665
+ },
666
+ "sans/size-2/uppercase-normal": {
667
+ "lineHeight": "size-2",
668
+ "fontSize": "2",
669
+ "letterSpacing": "2",
670
+ "textTransform": "uppercase"
671
+ },
672
+ "sans/size-2/uppercase-semibold": {
673
+ "fontWeight": "semibold",
674
+ "lineHeight": "size-2",
675
+ "fontSize": "2",
676
+ "letterSpacing": "2",
677
+ "textTransform": "uppercase"
678
+ },
679
+ "sans/size-3/normal": {
680
+ "lineHeight": "size-3",
681
+ "fontSize": "3"
682
+ },
683
+ "sans/size-3/normal-underline": {
684
+ "lineHeight": "size-3",
685
+ "fontSize": "3",
686
+ "textDecoration": "underline"
687
+ },
688
+ "sans/size-3/semibold": {
689
+ "fontWeight": "semibold",
690
+ "lineHeight": "size-3",
691
+ "fontSize": "3"
692
+ },
693
+ "sans/size-3/semibold-underline": {
694
+ "fontWeight": "semibold",
695
+ "lineHeight": "size-3",
696
+ "fontSize": "3",
697
+ "textDecoration": "underline"
698
+ },
699
+ "sans/size-3/bold": {
700
+ "fontWeight": "bold",
701
+ "lineHeight": "size-3",
702
+ "fontSize": "3"
703
+ },
704
+ "sans/size-3/italic": {
705
+ "fontWeight": "italic",
706
+ "lineHeight": "size-3",
707
+ "fontSize": "3"
708
+ },
709
+ "sans/size-4/normal": {
710
+ "lineHeight": "size-4",
711
+ "fontSize": "4"
712
+ },
713
+ "sans/size-4/semibold": {
714
+ "fontWeight": "semibold",
715
+ "lineHeight": "size-4",
716
+ "fontSize": "4"
717
+ },
718
+ "sans/size-4/bold": {
719
+ "fontWeight": "bold",
720
+ "lineHeight": "size-4",
721
+ "fontSize": "4"
722
+ },
723
+ "sans/size-5/normal": {
724
+ "lineHeight": "size-5",
725
+ "fontSize": "5"
726
+ },
727
+ "sans/size-5/semibold": {
728
+ "fontWeight": "semibold",
729
+ "lineHeight": "size-5",
730
+ "fontSize": "5"
731
+ },
732
+ "sans/size-5/bold": {
733
+ "fontWeight": "bold",
734
+ "lineHeight": "size-5",
735
+ "fontSize": "5"
736
+ },
737
+ "sans/size-6/normal": {
738
+ "lineHeight": "size-6",
739
+ "fontSize": "6"
740
+ },
741
+ "sans/size-6/semibold": {
742
+ "fontWeight": "semibold",
743
+ "lineHeight": "size-6",
744
+ "fontSize": "6"
745
+ },
746
+ "sans/size-6/bold": {
747
+ "fontWeight": "bold",
748
+ "lineHeight": "size-6",
749
+ "fontSize": "6"
750
+ },
751
+ "sans/size-7/semibold": {
752
+ "fontWeight": "semibold",
753
+ "lineHeight": "size-7",
754
+ "fontSize": "7"
755
+ },
756
+ "sans/size-7/bold": {
757
+ "fontWeight": "bold",
758
+ "lineHeight": "size-7",
759
+ "fontSize": "7"
760
+ },
761
+ "sans/size-8/semibold": {
762
+ "fontWeight": "semibold",
763
+ "lineHeight": "size-8",
764
+ "fontSize": "8"
765
+ },
766
+ "sans/size-8/bold": {
767
+ "fontWeight": "bold",
768
+ "lineHeight": "size-8",
769
+ "fontSize": "8"
770
+ },
771
+ "display/lg": {
772
+ "fontWeight": "bold",
773
+ "lineHeight": "size-8",
774
+ "fontSize": "8"
775
+ },
776
+ "display/sm": {
777
+ "fontWeight": "bold",
778
+ "lineHeight": "size-7",
779
+ "fontSize": "7"
780
+ },
781
+ "heading/h1": {
782
+ "fontWeight": "bold",
783
+ "lineHeight": "size-6",
784
+ "fontSize": "6"
785
+ },
786
+ "heading/h2": {
787
+ "fontWeight": "bold",
788
+ "lineHeight": "size-5",
789
+ "fontSize": "5"
790
+ },
791
+ "heading/h3": {
792
+ "fontWeight": "bold",
793
+ "lineHeight": "size-4",
794
+ "fontSize": "4"
795
+ },
796
+ "heading/h4": {
797
+ "fontWeight": "bold",
798
+ "lineHeight": "size-3",
799
+ "fontSize": "3"
800
+ },
801
+ "heading/h5": {
802
+ "fontWeight": "bold",
803
+ "lineHeight": "size-2",
804
+ "fontSize": "2"
805
+ },
806
+ "heading/h6": {
807
+ "fontWeight": "bold",
808
+ "lineHeight": "size-1",
809
+ "fontSize": "1",
810
+ "letterSpacing": "2",
811
+ "textTransform": "uppercase"
812
+ },
813
+ "body/sm/regular": {
814
+ "lineHeight": "size-1",
815
+ "fontSize": "1",
816
+ "letterSpacing": "2"
817
+ },
818
+ "body/sm/semibold": {
819
+ "fontWeight": "semibold",
820
+ "lineHeight": "size-1",
821
+ "fontSize": "1",
822
+ "letterSpacing": "2"
823
+ },
824
+ "body/md/regular": {
825
+ "lineHeight": "size-2",
826
+ "fontSize": "2"
827
+ },
828
+ "body/md/semibold": {
829
+ "fontWeight": "semibold",
830
+ "lineHeight": "size-2",
831
+ "fontSize": "2"
832
+ },
833
+ "body/md/underline": {
834
+ "lineHeight": "size-2",
835
+ "fontSize": "2",
836
+ "textDecoration": "underline"
837
+ },
838
+ "body/lg/regular": {
839
+ "lineHeight": "size-3",
840
+ "fontSize": "3"
841
+ },
842
+ "body/lg/semibold": {
843
+ "fontWeight": "semibold",
844
+ "lineHeight": "size-3",
845
+ "fontSize": "3"
846
+ },
847
+ "body/lg/underline": {
848
+ "lineHeight": "size-3",
849
+ "fontSize": "3",
850
+ "textDecoration": "underline"
851
+ },
852
+ "code/md": {
853
+ "fontFamily": "mono",
854
+ "fontSize": "1",
855
+ "lineHeight": "size-1",
856
+ "letterSpacing": "code"
857
+ },
858
+ "code/lg": {
859
+ "fontFamily": "mono",
860
+ "fontSize": "2",
861
+ "lineHeight": "size-2",
862
+ "letterSpacing": "code"
863
+ },
864
+ "comp/button/sm": {
865
+ "fontWeight": "semibold",
866
+ "lineHeight": "size-2",
867
+ "fontSize": "2"
868
+ },
869
+ "comp/button/md": {
870
+ "fontWeight": "semibold",
871
+ "lineHeight": "size-2",
872
+ "fontSize": "2"
873
+ },
874
+ "comp/button/lg": {
875
+ "fontWeight": "semibold",
876
+ "lineHeight": "size-3",
877
+ "fontSize": "3"
878
+ },
879
+ "comp/notification/title": {
880
+ "fontWeight": "bold",
881
+ "lineHeight": "size-3",
882
+ "fontSize": "3"
883
+ },
884
+ "comp/notification/message": {
885
+ "lineHeight": "size-3",
886
+ "fontSize": "3"
887
+ },
888
+ "comp/notification/button": {
889
+ "lineHeight": "size-2",
890
+ "fontSize": "2"
891
+ },
892
+ "comp/input/label": {
893
+ "fontWeight": "semibold",
894
+ "lineHeight": "size-2",
895
+ "fontSize": "2"
896
+ },
897
+ "comp/input/helperText": {
898
+ "lineHeight": "size-1",
899
+ "fontSize": "1",
900
+ "letterSpacing": "2"
901
+ },
902
+ "comp/link/md": {
903
+ "lineHeight": "size-2",
904
+ "fontSize": "2"
905
+ },
906
+ "comp/link/md-hover": {
907
+ "lineHeight": "size-2",
908
+ "fontSize": "2",
909
+ "textDecoration": "underline"
910
+ },
911
+ "comp/link/lg": {
912
+ "lineHeight": "size-3",
913
+ "fontSize": "3"
914
+ },
915
+ "comp/link/lg-hover": {
916
+ "lineHeight": "size-3",
917
+ "fontSize": "3",
918
+ "textDecoration": "underline"
919
+ },
920
+ "comp/stat/sm": {
921
+ "lineHeight": "size-3",
922
+ "fontSize": "3"
923
+ },
924
+ "comp/stat/md": {
925
+ "fontWeight": "semibold",
926
+ "lineHeight": "size-5",
927
+ "fontSize": "5"
928
+ },
929
+ "comp/stat/lg": {
930
+ "fontWeight": "semibold",
931
+ "lineHeight": "size-6",
932
+ "fontSize": "6"
933
+ },
934
+ "comp/tabs/line": {
935
+ "fontWeight": "bold",
936
+ "lineHeight": "size-3",
937
+ "fontSize": "3"
938
+ },
939
+ "comp/tabs/contained": {
940
+ "fontWeight": "bold",
941
+ "lineHeight": "size-3",
942
+ "fontSize": "3"
943
+ },
944
+ "comp/tabs/contained-secondary": {
945
+ "lineHeight": "size-2",
946
+ "fontSize": "2"
947
+ },
948
+ "comp/tag/sm": {
949
+ "lineHeight": "size-1",
950
+ "fontSize": "1",
951
+ "letterSpacing": "2"
952
+ },
953
+ "comp/tag/md": {
954
+ "lineHeight": "size-2",
955
+ "fontSize": "2"
956
+ },
957
+ "comp/badge/sm": {
958
+ "fontWeight": "bold",
959
+ "lineHeight": "size-1",
960
+ "fontSize": "1",
961
+ "letterSpacing": "2",
962
+ "textTransform": "uppercase"
963
+ },
964
+ "comp/dialog/title": {
965
+ "fontWeight": "bold",
966
+ "lineHeight": "size-5",
967
+ "fontSize": "5"
968
+ },
969
+ "comp/dialog/label": {
970
+ "fontWeight": "semibold",
971
+ "lineHeight": "size-2",
972
+ "fontSize": "2",
973
+ "letterSpacing": "2",
974
+ "textTransform": "uppercase"
975
+ }
976
+ }
977
+ }