@putdotio/design 1.5.1 → 2.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.
- package/DESIGN.md +9 -1
- package/dist/css/tokens.css +26 -0
- package/dist/figma/putio.tokens.json +114 -0
- package/dist/tokens.d.ts +1 -1
- package/dist/tokens.dtcg.json +291 -0
- package/dist/tokens.flat.json +208 -0
- package/dist/tokens.js +208 -0
- package/package.json +4 -2
- package/system/assets/logo-retro-dark.svg +11 -1
- package/system/assets/logo-retro-light.svg +11 -1
- package/system/assets/logo.svg +7 -1
- package/system/components.css +440 -0
- package/tokens/components.tokens.json +291 -0
|
@@ -98,6 +98,28 @@
|
|
|
98
98
|
"mode": "dark"
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
|
+
},
|
|
102
|
+
"backgroundHover": {
|
|
103
|
+
"$type": "color",
|
|
104
|
+
"$value": "{color.neutral.light.componentBgHover}",
|
|
105
|
+
"$description": "Secondary quiet-fill hover in light mode.",
|
|
106
|
+
"$extensions": {
|
|
107
|
+
"putio": {
|
|
108
|
+
"cssName": "button-secondary-bg-hover",
|
|
109
|
+
"mode": "light"
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
},
|
|
113
|
+
"backgroundHoverDark": {
|
|
114
|
+
"$type": "color",
|
|
115
|
+
"$value": "{color.neutral.dark.componentBgHover}",
|
|
116
|
+
"$description": "Secondary quiet-fill hover in dark mode.",
|
|
117
|
+
"$extensions": {
|
|
118
|
+
"putio": {
|
|
119
|
+
"cssName": "button-secondary-bg-hover",
|
|
120
|
+
"mode": "dark"
|
|
121
|
+
}
|
|
122
|
+
}
|
|
101
123
|
}
|
|
102
124
|
},
|
|
103
125
|
"success": {
|
|
@@ -349,6 +371,275 @@
|
|
|
349
371
|
}
|
|
350
372
|
}
|
|
351
373
|
}
|
|
374
|
+
},
|
|
375
|
+
"ghost": {
|
|
376
|
+
"background": {
|
|
377
|
+
"$type": "color",
|
|
378
|
+
"$value": "hsla(0, 0%, 0%, 0)",
|
|
379
|
+
"$description": "Ghost tier rests with no fill and no border.",
|
|
380
|
+
"$extensions": {
|
|
381
|
+
"putio": {
|
|
382
|
+
"cssName": "button-ghost-bg",
|
|
383
|
+
"mode": "global"
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
},
|
|
387
|
+
"foreground": {
|
|
388
|
+
"$type": "color",
|
|
389
|
+
"$value": "{color.neutral.light.textSecondary}",
|
|
390
|
+
"$description": "Ghost label at rest in light mode.",
|
|
391
|
+
"$extensions": {
|
|
392
|
+
"putio": {
|
|
393
|
+
"cssName": "button-ghost-fg",
|
|
394
|
+
"mode": "light"
|
|
395
|
+
}
|
|
396
|
+
}
|
|
397
|
+
},
|
|
398
|
+
"foregroundDark": {
|
|
399
|
+
"$type": "color",
|
|
400
|
+
"$value": "{color.neutral.dark.textSecondary}",
|
|
401
|
+
"$description": "Ghost label at rest in dark mode.",
|
|
402
|
+
"$extensions": {
|
|
403
|
+
"putio": {
|
|
404
|
+
"cssName": "button-ghost-fg",
|
|
405
|
+
"mode": "dark"
|
|
406
|
+
}
|
|
407
|
+
}
|
|
408
|
+
},
|
|
409
|
+
"foregroundHover": {
|
|
410
|
+
"$type": "color",
|
|
411
|
+
"$value": "{color.neutral.light.text}",
|
|
412
|
+
"$description": "Ghost label on hover in light mode. The lift is mandatory.",
|
|
413
|
+
"$extensions": {
|
|
414
|
+
"putio": {
|
|
415
|
+
"cssName": "button-ghost-fg-hover",
|
|
416
|
+
"mode": "light"
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
},
|
|
420
|
+
"foregroundHoverDark": {
|
|
421
|
+
"$type": "color",
|
|
422
|
+
"$value": "{color.neutral.dark.text}",
|
|
423
|
+
"$description": "Ghost label on hover in dark mode. The lift is mandatory.",
|
|
424
|
+
"$extensions": {
|
|
425
|
+
"putio": {
|
|
426
|
+
"cssName": "button-ghost-fg-hover",
|
|
427
|
+
"mode": "dark"
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
},
|
|
431
|
+
"backgroundHover": {
|
|
432
|
+
"$type": "color",
|
|
433
|
+
"$value": "{color.neutral.light.componentBgHover}",
|
|
434
|
+
"$description": "Shared quiet-fill hover step in light mode.",
|
|
435
|
+
"$extensions": {
|
|
436
|
+
"putio": {
|
|
437
|
+
"cssName": "button-ghost-bg-hover",
|
|
438
|
+
"mode": "light"
|
|
439
|
+
}
|
|
440
|
+
}
|
|
441
|
+
},
|
|
442
|
+
"backgroundHoverDark": {
|
|
443
|
+
"$type": "color",
|
|
444
|
+
"$value": "{color.neutral.dark.componentBgHover}",
|
|
445
|
+
"$description": "Shared quiet-fill hover step in dark mode.",
|
|
446
|
+
"$extensions": {
|
|
447
|
+
"putio": {
|
|
448
|
+
"cssName": "button-ghost-bg-hover",
|
|
449
|
+
"mode": "dark"
|
|
450
|
+
}
|
|
451
|
+
}
|
|
452
|
+
}
|
|
453
|
+
},
|
|
454
|
+
"height": {
|
|
455
|
+
"$type": "dimension",
|
|
456
|
+
"$value": "36px",
|
|
457
|
+
"$description": "Default (lg) button box.",
|
|
458
|
+
"$extensions": {
|
|
459
|
+
"putio": {
|
|
460
|
+
"cssName": "button-height",
|
|
461
|
+
"mode": "global"
|
|
462
|
+
}
|
|
463
|
+
}
|
|
464
|
+
},
|
|
465
|
+
"heightMd": {
|
|
466
|
+
"$type": "dimension",
|
|
467
|
+
"$value": "32px",
|
|
468
|
+
"$description": "Medium button box. The site top-bar CTA size.",
|
|
469
|
+
"$extensions": {
|
|
470
|
+
"putio": {
|
|
471
|
+
"cssName": "button-height-md",
|
|
472
|
+
"mode": "global"
|
|
473
|
+
}
|
|
474
|
+
}
|
|
475
|
+
},
|
|
476
|
+
"heightSm": {
|
|
477
|
+
"$type": "dimension",
|
|
478
|
+
"$value": "28px",
|
|
479
|
+
"$description": "Small button box.",
|
|
480
|
+
"$extensions": {
|
|
481
|
+
"putio": {
|
|
482
|
+
"cssName": "button-height-sm",
|
|
483
|
+
"mode": "global"
|
|
484
|
+
}
|
|
485
|
+
}
|
|
486
|
+
},
|
|
487
|
+
"heightXs": {
|
|
488
|
+
"$type": "dimension",
|
|
489
|
+
"$value": "24px",
|
|
490
|
+
"$description": "Extra-small button box.",
|
|
491
|
+
"$extensions": {
|
|
492
|
+
"putio": {
|
|
493
|
+
"cssName": "button-height-xs",
|
|
494
|
+
"mode": "global"
|
|
495
|
+
}
|
|
496
|
+
}
|
|
497
|
+
},
|
|
498
|
+
"paddingX": {
|
|
499
|
+
"$type": "dimension",
|
|
500
|
+
"$value": "12px",
|
|
501
|
+
"$description": "Horizontal padding for lg, md and sm.",
|
|
502
|
+
"$extensions": {
|
|
503
|
+
"putio": {
|
|
504
|
+
"cssName": "button-padding-x",
|
|
505
|
+
"mode": "global"
|
|
506
|
+
}
|
|
507
|
+
}
|
|
508
|
+
},
|
|
509
|
+
"paddingXXs": {
|
|
510
|
+
"$type": "dimension",
|
|
511
|
+
"$value": "8px",
|
|
512
|
+
"$description": "Horizontal padding at xs.",
|
|
513
|
+
"$extensions": {
|
|
514
|
+
"putio": {
|
|
515
|
+
"cssName": "button-padding-x-xs",
|
|
516
|
+
"mode": "global"
|
|
517
|
+
}
|
|
518
|
+
}
|
|
519
|
+
},
|
|
520
|
+
"labelSize": {
|
|
521
|
+
"$type": "dimension",
|
|
522
|
+
"$value": "{typography.fontSize.sm}",
|
|
523
|
+
"$description": "Uppercase label size.",
|
|
524
|
+
"$extensions": {
|
|
525
|
+
"putio": {
|
|
526
|
+
"cssName": "button-label-size",
|
|
527
|
+
"mode": "global"
|
|
528
|
+
}
|
|
529
|
+
}
|
|
530
|
+
},
|
|
531
|
+
"labelSizeXs": {
|
|
532
|
+
"$type": "dimension",
|
|
533
|
+
"$value": "{typography.fontSize.xs}",
|
|
534
|
+
"$description": "Uppercase label size at xs.",
|
|
535
|
+
"$extensions": {
|
|
536
|
+
"putio": {
|
|
537
|
+
"cssName": "button-label-size-xs",
|
|
538
|
+
"mode": "global"
|
|
539
|
+
}
|
|
540
|
+
}
|
|
541
|
+
},
|
|
542
|
+
"tracking": {
|
|
543
|
+
"$type": "dimension",
|
|
544
|
+
"$value": "1px",
|
|
545
|
+
"$description": "Letter-spacing at lg.",
|
|
546
|
+
"$extensions": {
|
|
547
|
+
"putio": {
|
|
548
|
+
"cssName": "button-tracking",
|
|
549
|
+
"mode": "global"
|
|
550
|
+
}
|
|
551
|
+
}
|
|
552
|
+
},
|
|
553
|
+
"trackingMd": {
|
|
554
|
+
"$type": "dimension",
|
|
555
|
+
"$value": "0.8px",
|
|
556
|
+
"$description": "Letter-spacing at md.",
|
|
557
|
+
"$extensions": {
|
|
558
|
+
"putio": {
|
|
559
|
+
"cssName": "button-tracking-md",
|
|
560
|
+
"mode": "global"
|
|
561
|
+
}
|
|
562
|
+
}
|
|
563
|
+
},
|
|
564
|
+
"trackingSm": {
|
|
565
|
+
"$type": "dimension",
|
|
566
|
+
"$value": "0.6px",
|
|
567
|
+
"$description": "Letter-spacing at sm.",
|
|
568
|
+
"$extensions": {
|
|
569
|
+
"putio": {
|
|
570
|
+
"cssName": "button-tracking-sm",
|
|
571
|
+
"mode": "global"
|
|
572
|
+
}
|
|
573
|
+
}
|
|
574
|
+
},
|
|
575
|
+
"trackingXs": {
|
|
576
|
+
"$type": "dimension",
|
|
577
|
+
"$value": "0.3px",
|
|
578
|
+
"$description": "Letter-spacing at xs.",
|
|
579
|
+
"$extensions": {
|
|
580
|
+
"putio": {
|
|
581
|
+
"cssName": "button-tracking-xs",
|
|
582
|
+
"mode": "global"
|
|
583
|
+
}
|
|
584
|
+
}
|
|
585
|
+
},
|
|
586
|
+
"iconSize": {
|
|
587
|
+
"$type": "dimension",
|
|
588
|
+
"$value": "14px",
|
|
589
|
+
"$description": "Glyph size inside a button.",
|
|
590
|
+
"$extensions": {
|
|
591
|
+
"putio": {
|
|
592
|
+
"cssName": "button-icon-size",
|
|
593
|
+
"mode": "global"
|
|
594
|
+
}
|
|
595
|
+
}
|
|
596
|
+
},
|
|
597
|
+
"gap": {
|
|
598
|
+
"$type": "dimension",
|
|
599
|
+
"$value": "8px",
|
|
600
|
+
"$description": "Gap between glyph and label.",
|
|
601
|
+
"$extensions": {
|
|
602
|
+
"putio": {
|
|
603
|
+
"cssName": "button-gap",
|
|
604
|
+
"mode": "global"
|
|
605
|
+
}
|
|
606
|
+
}
|
|
607
|
+
}
|
|
608
|
+
},
|
|
609
|
+
"nav": {
|
|
610
|
+
"$description": "Sticky site/marketing top bar. Colours live in semantic surface.*.nav*.",
|
|
611
|
+
"height": {
|
|
612
|
+
"$type": "dimension",
|
|
613
|
+
"$value": "56px",
|
|
614
|
+
"$description": "Sticky top bar height.",
|
|
615
|
+
"$extensions": {
|
|
616
|
+
"putio": {
|
|
617
|
+
"cssName": "nav-height",
|
|
618
|
+
"mode": "global"
|
|
619
|
+
}
|
|
620
|
+
}
|
|
621
|
+
},
|
|
622
|
+
"heightCompact": {
|
|
623
|
+
"$type": "dimension",
|
|
624
|
+
"$value": "52px",
|
|
625
|
+
"$description": "Sticky top bar height on narrow viewports.",
|
|
626
|
+
"$extensions": {
|
|
627
|
+
"putio": {
|
|
628
|
+
"cssName": "nav-height-compact",
|
|
629
|
+
"mode": "global"
|
|
630
|
+
}
|
|
631
|
+
}
|
|
632
|
+
},
|
|
633
|
+
"ctaHeight": {
|
|
634
|
+
"$type": "dimension",
|
|
635
|
+
"$value": "{component.button.heightMd}",
|
|
636
|
+
"$description": "The top-bar CTA box. Always the md button.",
|
|
637
|
+
"$extensions": {
|
|
638
|
+
"putio": {
|
|
639
|
+
"cssName": "nav-cta-height",
|
|
640
|
+
"mode": "global"
|
|
641
|
+
}
|
|
642
|
+
}
|
|
352
643
|
}
|
|
353
644
|
},
|
|
354
645
|
"input": {
|