@vegastack/design-tokens 0.7.80 → 0.8.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/dist/base.css +1 -1
- package/dist/utilities.css +62 -0
- package/package.json +1 -1
package/dist/base.css
CHANGED
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
|
|
75
75
|
Text entry (FOC-3) — text inputs, textarea, and the bordered field GROUPS that frame one
|
|
76
76
|
(InputGroup, NumberField, ChipInput, the combobox chips, the panel search row) — takes NO fill
|
|
77
|
-
at all: it is excluded below, and its focus cue is a subtle darker border (`border-ring/
|
|
77
|
+
at all: it is excluded below, and its focus cue is a subtle darker border (`border-ring/50`)
|
|
78
78
|
that eases in over 150ms, written on the component that draws the border (the group, not the
|
|
79
79
|
control inside it, which has no border and no fill). An invalid field keeps its destructive
|
|
80
80
|
border in every state; focus never replaces it. The one caret-only surface is a contenteditable
|
package/dist/utilities.css
CHANGED
|
@@ -768,6 +768,68 @@
|
|
|
768
768
|
animation: vs-flash var(--duration-slow) var(--motion-ease-standard);
|
|
769
769
|
}
|
|
770
770
|
|
|
771
|
+
/* ---------------------------------------------------------------------------
|
|
772
|
+
* motion-stagger — staggered fade+rise for the children of a container
|
|
773
|
+
* (content replacing a skeleton: rows, cards, a feed).
|
|
774
|
+
*
|
|
775
|
+
* Put it on the PARENT; each direct child plays `vs-enter-up` (the same keyframes
|
|
776
|
+
* and timing as `motion-enter-up`) a step after the one before. The step is a
|
|
777
|
+
* quarter of `--duration-fast` (~37ms), overridable per call-site with
|
|
778
|
+
* `[--vs-stagger-step:60ms]`; children past the twelfth share the twelfth's
|
|
779
|
+
* delay, so a long list never waits more than ~0.4s for its tail. `both` fill
|
|
780
|
+
* keeps a waiting child hidden until its turn. Remount (a changing `key`) to
|
|
781
|
+
* replay. Reduced motion: base.css zeroes the delays as well as the durations,
|
|
782
|
+
* so the content appears at once, in its resting state.
|
|
783
|
+
* ------------------------------------------------------------------------- */
|
|
784
|
+
@utility motion-stagger {
|
|
785
|
+
& > * {
|
|
786
|
+
animation: vs-enter-up var(--duration-fast) var(--motion-ease-standard) both;
|
|
787
|
+
animation-delay: calc(
|
|
788
|
+
var(--vs-stagger-step, var(--duration-fast) / 4) * 11
|
|
789
|
+
);
|
|
790
|
+
}
|
|
791
|
+
& > :first-child {
|
|
792
|
+
animation-delay: 0s;
|
|
793
|
+
}
|
|
794
|
+
& > :nth-child(2) {
|
|
795
|
+
animation-delay: calc(var(--vs-stagger-step, var(--duration-fast) / 4) * 1);
|
|
796
|
+
}
|
|
797
|
+
& > :nth-child(3) {
|
|
798
|
+
animation-delay: calc(var(--vs-stagger-step, var(--duration-fast) / 4) * 2);
|
|
799
|
+
}
|
|
800
|
+
& > :nth-child(4) {
|
|
801
|
+
animation-delay: calc(var(--vs-stagger-step, var(--duration-fast) / 4) * 3);
|
|
802
|
+
}
|
|
803
|
+
& > :nth-child(5) {
|
|
804
|
+
animation-delay: calc(var(--vs-stagger-step, var(--duration-fast) / 4) * 4);
|
|
805
|
+
}
|
|
806
|
+
& > :nth-child(6) {
|
|
807
|
+
animation-delay: calc(var(--vs-stagger-step, var(--duration-fast) / 4) * 5);
|
|
808
|
+
}
|
|
809
|
+
& > :nth-child(7) {
|
|
810
|
+
animation-delay: calc(var(--vs-stagger-step, var(--duration-fast) / 4) * 6);
|
|
811
|
+
}
|
|
812
|
+
& > :nth-child(8) {
|
|
813
|
+
animation-delay: calc(var(--vs-stagger-step, var(--duration-fast) / 4) * 7);
|
|
814
|
+
}
|
|
815
|
+
& > :nth-child(9) {
|
|
816
|
+
animation-delay: calc(var(--vs-stagger-step, var(--duration-fast) / 4) * 8);
|
|
817
|
+
}
|
|
818
|
+
& > :nth-child(10) {
|
|
819
|
+
animation-delay: calc(var(--vs-stagger-step, var(--duration-fast) / 4) * 9);
|
|
820
|
+
}
|
|
821
|
+
& > :nth-child(11) {
|
|
822
|
+
animation-delay: calc(
|
|
823
|
+
var(--vs-stagger-step, var(--duration-fast) / 4) * 10
|
|
824
|
+
);
|
|
825
|
+
}
|
|
826
|
+
& > :nth-child(12) {
|
|
827
|
+
animation-delay: calc(
|
|
828
|
+
var(--vs-stagger-step, var(--duration-fast) / 4) * 11
|
|
829
|
+
);
|
|
830
|
+
}
|
|
831
|
+
}
|
|
832
|
+
|
|
771
833
|
@keyframes vs-indeterminate {
|
|
772
834
|
/* Indeterminate progress (audit M-06, 2026-09-07): a 35%-wide segment sweeps the
|
|
773
835
|
* track and returns. The 0% and 100% stops are IDENTICAL on purpose — the global
|