@etus/tokens 0.3.0 → 1.0.1
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/dist/tokens.css +3 -7
- package/dist/tokens.js +3 -7
- package/dist/tokens.meta.json +22 -50
- package/package.json +1 -1
package/dist/tokens.css
CHANGED
|
@@ -666,18 +666,14 @@
|
|
|
666
666
|
--duration-slow: 300ms;
|
|
667
667
|
--duration-slower: 500ms;
|
|
668
668
|
--duration-slowest: 700ms;
|
|
669
|
+
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
669
670
|
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
|
|
670
671
|
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
|
|
672
|
+
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
671
673
|
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
672
674
|
--ease-linear: cubic-bezier(0, 0, 1, 1);
|
|
673
675
|
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
674
|
-
--ease-spring: cubic-bezier(0.
|
|
675
|
-
--easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
676
|
-
--easing-default: cubic-bezier(0.4, 0, 0.2, 1);
|
|
677
|
-
--easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
678
|
-
--easing-in: cubic-bezier(0.4, 0, 1, 1);
|
|
679
|
-
--easing-out: cubic-bezier(0, 0, 0.2, 1);
|
|
680
|
-
--easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
676
|
+
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
681
677
|
--empty-state-media-icon-bg: oklch(97.02% 0.0000 0);
|
|
682
678
|
--empty-state-media-icon-fg: oklch(14.48% 0.0000 0);
|
|
683
679
|
--empty-state-media-icon-icon-size: 24px;
|
package/dist/tokens.js
CHANGED
|
@@ -777,18 +777,14 @@ export const tokens = {
|
|
|
777
777
|
"duration-slow": "300ms",
|
|
778
778
|
"duration-slower": "500ms",
|
|
779
779
|
"duration-slowest": "700ms",
|
|
780
|
+
"ease-bounce": "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
|
|
780
781
|
"ease-default": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
781
782
|
"ease-emphasized": "cubic-bezier(0.2, 0, 0, 1)",
|
|
782
783
|
"ease-in": "cubic-bezier(0.4, 0, 1, 1)",
|
|
784
|
+
"ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
783
785
|
"ease-linear": "cubic-bezier(0, 0, 1, 1)",
|
|
784
786
|
"ease-out": "cubic-bezier(0, 0, 0.2, 1)",
|
|
785
|
-
"ease-spring": "cubic-bezier(0.
|
|
786
|
-
"easing-bounce": "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
|
|
787
|
-
"easing-default": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
788
|
-
"easing-in": "cubic-bezier(0.4, 0, 1, 1)",
|
|
789
|
-
"easing-in-out": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
790
|
-
"easing-out": "cubic-bezier(0, 0, 0.2, 1)",
|
|
791
|
-
"easing-spring": "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
|
|
787
|
+
"ease-spring": "cubic-bezier(0.34, 1.56, 0.64, 1)",
|
|
792
788
|
"empty-state-media-icon-bg": "oklch(97.02% 0.0000 0)",
|
|
793
789
|
"empty-state-media-icon-fg": "oklch(14.48% 0.0000 0)",
|
|
794
790
|
"empty-state-media-icon-icon-size": "24px",
|
package/dist/tokens.meta.json
CHANGED
|
@@ -3499,7 +3499,7 @@
|
|
|
3499
3499
|
"name": "duration-slow",
|
|
3500
3500
|
"cssVar": "--duration-slow",
|
|
3501
3501
|
"type": "duration",
|
|
3502
|
-
"description": "
|
|
3502
|
+
"description": "Alias de duration-moderate. Mantido por compatibilidade com consumidores legados.",
|
|
3503
3503
|
"value": "300ms"
|
|
3504
3504
|
},
|
|
3505
3505
|
{
|
|
@@ -3516,89 +3516,61 @@
|
|
|
3516
3516
|
"description": "Splash screens, transições de página, animações de destaque.",
|
|
3517
3517
|
"value": "700ms"
|
|
3518
3518
|
},
|
|
3519
|
+
{
|
|
3520
|
+
"name": "ease-bounce",
|
|
3521
|
+
"cssVar": "--ease-bounce",
|
|
3522
|
+
"type": "cubicBezier",
|
|
3523
|
+
"description": "Pendente — Wagner publicará no Figma. Curva exagerada com overshoot duplo.",
|
|
3524
|
+
"value": "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
|
|
3525
|
+
},
|
|
3519
3526
|
{
|
|
3520
3527
|
"name": "ease-default",
|
|
3521
3528
|
"cssVar": "--ease-default",
|
|
3522
3529
|
"type": "cubicBezier",
|
|
3523
|
-
"description": "Padrão do sistema — sai devagar, chega devagar.
|
|
3530
|
+
"description": "Padrão do sistema — sai devagar, chega devagar. Movimentos que ocorrem no mesmo plano: tabs, sliders, reordenação de listas.",
|
|
3524
3531
|
"value": "cubic-bezier(0.4, 0, 0.2, 1)"
|
|
3525
3532
|
},
|
|
3526
3533
|
{
|
|
3527
3534
|
"name": "ease-emphasized",
|
|
3528
3535
|
"cssVar": "--ease-emphasized",
|
|
3529
3536
|
"type": "cubicBezier",
|
|
3530
|
-
"description": "M3 Emphasized — desaceleração dramática. Modais grandes, drawers, transições de página.",
|
|
3537
|
+
"description": "M3 Emphasized — desaceleração dramática no final. Modais grandes, drawers, transições de página. Comunica peso e importância.",
|
|
3531
3538
|
"value": "cubic-bezier(0.2, 0, 0, 1)"
|
|
3532
3539
|
},
|
|
3533
3540
|
{
|
|
3534
3541
|
"name": "ease-in",
|
|
3535
3542
|
"cssVar": "--ease-in",
|
|
3536
3543
|
"type": "cubicBezier",
|
|
3537
|
-
"description": "Começa devagar, termina rápido.
|
|
3544
|
+
"description": "Começa devagar, termina rápido. Exclusivo para saídas: elemento que SAI da tela. Transmite que o elemento 'vai embora'.",
|
|
3538
3545
|
"value": "cubic-bezier(0.4, 0, 1, 1)"
|
|
3539
3546
|
},
|
|
3547
|
+
{
|
|
3548
|
+
"name": "ease-in-out",
|
|
3549
|
+
"cssVar": "--ease-in-out",
|
|
3550
|
+
"type": "cubicBezier",
|
|
3551
|
+
"description": "Pendente — Wagner publicará no Figma. Usado provisoriamente como alias de --ease-default.",
|
|
3552
|
+
"value": "cubic-bezier(0.4, 0, 0.2, 1)"
|
|
3553
|
+
},
|
|
3540
3554
|
{
|
|
3541
3555
|
"name": "ease-linear",
|
|
3542
3556
|
"cssVar": "--ease-linear",
|
|
3543
3557
|
"type": "cubicBezier",
|
|
3544
|
-
"description": "Velocidade constante. Loaders rotativos, progress bars de duração fixa.",
|
|
3558
|
+
"description": "Velocidade constante do início ao fim. Loaders rotativos, progress bars de duração fixa. Nunca use para entradas/saídas de elementos.",
|
|
3545
3559
|
"value": "cubic-bezier(0, 0, 1, 1)"
|
|
3546
3560
|
},
|
|
3547
3561
|
{
|
|
3548
3562
|
"name": "ease-out",
|
|
3549
3563
|
"cssVar": "--ease-out",
|
|
3550
3564
|
"type": "cubicBezier",
|
|
3551
|
-
"description": "Começa rápido, desacelera ao chegar.
|
|
3565
|
+
"description": "Começa rápido, desacelera ao chegar. Exclusivo para entradas: elemento que ENTRA na tela. Transmite que o elemento 'chegou'.",
|
|
3552
3566
|
"value": "cubic-bezier(0, 0, 0.2, 1)"
|
|
3553
3567
|
},
|
|
3554
3568
|
{
|
|
3555
3569
|
"name": "ease-spring",
|
|
3556
3570
|
"cssVar": "--ease-spring",
|
|
3557
3571
|
"type": "cubicBezier",
|
|
3558
|
-
"description": "Ultrapassa levemente o destino e volta (bounce). Menus, cards de destaque.",
|
|
3559
|
-
"value": "cubic-bezier(0.
|
|
3560
|
-
},
|
|
3561
|
-
{
|
|
3562
|
-
"name": "easing-bounce",
|
|
3563
|
-
"cssVar": "--easing-bounce",
|
|
3564
|
-
"type": "cubicBezier",
|
|
3565
|
-
"description": "(Legacy) Sem equivalente Figma — usar ease-spring.",
|
|
3566
|
-
"value": "cubic-bezier(0.68, -0.55, 0.265, 1.55)"
|
|
3567
|
-
},
|
|
3568
|
-
{
|
|
3569
|
-
"name": "easing-default",
|
|
3570
|
-
"cssVar": "--easing-default",
|
|
3571
|
-
"type": "cubicBezier",
|
|
3572
|
-
"description": "(Legacy alias of --ease-default)",
|
|
3573
|
-
"value": "cubic-bezier(0.4, 0, 0.2, 1)"
|
|
3574
|
-
},
|
|
3575
|
-
{
|
|
3576
|
-
"name": "easing-in",
|
|
3577
|
-
"cssVar": "--easing-in",
|
|
3578
|
-
"type": "cubicBezier",
|
|
3579
|
-
"description": "(Legacy alias of --ease-in)",
|
|
3580
|
-
"value": "cubic-bezier(0.4, 0, 1, 1)"
|
|
3581
|
-
},
|
|
3582
|
-
{
|
|
3583
|
-
"name": "easing-in-out",
|
|
3584
|
-
"cssVar": "--easing-in-out",
|
|
3585
|
-
"type": "cubicBezier",
|
|
3586
|
-
"description": "(Legacy) Sem equivalente Figma direto.",
|
|
3587
|
-
"value": "cubic-bezier(0.4, 0, 0.2, 1)"
|
|
3588
|
-
},
|
|
3589
|
-
{
|
|
3590
|
-
"name": "easing-out",
|
|
3591
|
-
"cssVar": "--easing-out",
|
|
3592
|
-
"type": "cubicBezier",
|
|
3593
|
-
"description": "(Legacy alias of --ease-out)",
|
|
3594
|
-
"value": "cubic-bezier(0, 0, 0.2, 1)"
|
|
3595
|
-
},
|
|
3596
|
-
{
|
|
3597
|
-
"name": "easing-spring",
|
|
3598
|
-
"cssVar": "--easing-spring",
|
|
3599
|
-
"type": "cubicBezier",
|
|
3600
|
-
"description": "(Legacy) Spring effect — Figma usa cubic-bezier(0.36, 1.56, 0.64, 1).",
|
|
3601
|
-
"value": "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
|
|
3572
|
+
"description": "Ultrapassa levemente o destino e volta (bounce). Menus, cards de destaque, interações lúdicas. Não use em interfaces densas ou corporativas.",
|
|
3573
|
+
"value": "cubic-bezier(0.34, 1.56, 0.64, 1)"
|
|
3602
3574
|
}
|
|
3603
3575
|
]
|
|
3604
3576
|
},
|