@tensor_1/tokens 2.45.1 → 2.46.0

package/styles/motion.css

@@ -1,12 +1,23 @@
-/* uix motion — shared keyframes, enter/exit helpers, and the reduced-motion guard.
-   Components reference these tokens/keyframes; overlays pair the helpers with @starting-style. */
+/* uix motion — shared keyframes, enter/exit helpers, the instant-surface rule and the reduced-motion policy.
+   Components reference these tokens/keyframes; overlays pair the helpers with @starting-style.
+   The contract (docs → Foundations → Motion) is checked by packages/tokens/scripts/check-motion.mjs. */
 
-/* Reduced-motion guard — UNLAYERED so its !important beats every component transition. */
+/* Reduced-motion policy — UNLAYERED. `prefers-reduced-motion: reduce` removes MOVEMENT, not feedback:
+   - Transitions keep only fades and colour changes. Transform, translate, scale, rotate and any layout
+     glide drop out of every transition list, so a popover or drawer still fades but no longer travels.
+     allow-discrete keeps display/overlay exits painted while their fade runs.
+   - Keyframe animations end at once (we cannot tell a product's keyframes from a fade). UIx's own
+     still-working indicators (Spinner, Button loading, skeleton, indeterminate progress, SaveStatus,
+     a running flow node, Heartbeat) opt back in from their component layer with a slow opacity pulse
+     (`uix-pulse`, --uix-loop-pulse) declared !important — a layered !important beats this unlayered one —
+     so the status stays visibly alive instead of freezing. */
 @media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
+    transition-property: opacity, color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, visibility, overlay, display !important;
+    transition-behavior: allow-discrete !important;
+    /* motion-allow: ends product keyframes at once while still firing animationend (a 0s duration is skipped by some engines' event paths) */
     animation-duration: .001ms !important;
     animation-iteration-count: 1 !important;
-    transition-duration: .001ms !important;
     scroll-behavior: auto !important;
   }
 }
@@ -21,15 +32,27 @@
 @keyframes uix-slide-in-up    { from { opacity: 0; transform: translateY(8px); }   to { opacity: 1; transform: none; } }
 @keyframes uix-spin { to { transform: rotate(1turn); } }
 @keyframes uix-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+/* The reduced-motion stand-in for every looping indicator: no movement, a slow breath of opacity. */
+@keyframes uix-pulse { 50% { opacity: .35; } }
 
 @layer uix.motion {
   .uix-anim-fade { animation: uix-fade-in var(--uix-dur) var(--uix-ease-out); }
   .uix-anim-pop  { animation: uix-pop-in var(--uix-dur-fast) var(--uix-ease-out); }
   .uix-anim-up   { animation: uix-slide-in-up var(--uix-dur) var(--uix-ease-out); }
+  @media (prefers-reduced-motion: reduce) {
+    /* the entrance helpers keep their fade and lose their travel */
+    .uix-anim-fade, .uix-anim-pop, .uix-anim-up { animation: uix-fade-in var(--uix-dur) var(--uix-ease-out) !important; }
+  }
 
-  /* Hover-lift affordance for interactive cards/tiles. Gated so touch devices don't get a stuck hover. */
-  .uix-lift-hover { transition: transform var(--uix-dur-fast) var(--uix-ease-out), box-shadow var(--uix-dur-fast) var(--uix-ease-out); }
+  /* Hover-lift affordance for interactive cards/tiles. Gated so touch devices don't get a stuck hover.
+     The shadow steps; only the lift animates (box-shadow is never animated). */
+  .uix-lift-hover { transition: transform var(--uix-dur-fast) var(--uix-ease-out); }
   @media (hover: hover) and (pointer: fine) {
     .uix-lift-hover:hover { transform: translateY(calc(-1 * var(--uix-lift))); box-shadow: var(--uix-shadow-popover); }
   }
+
+  /* Instant surfaces. Keyboard-initiated and 100×-a-day surfaces (the command palette, an overlay opened
+     from the keyboard) open and close with no animation — the frequency budget is "none". Overlays set
+     [data-uix-instant] themselves (Modal `instant`, CommandPalette, keyboard-opened menus and selects). */
+  [data-uix-instant], [data-uix-instant]::backdrop { transition: none !important; animation: none !important; }
 }

package/tokens/base/effect.json

@@ -7,8 +7,8 @@
 
   "ease-out":        { "$type": "cubicBezier", "$value": "cubic-bezier(.23,1,.32,1)" },
   "ease-out-strong": { "$type": "cubicBezier", "$value": "cubic-bezier(.2,0,0,1)" },
-  "ease-in":         { "$type": "cubicBezier", "$value": "cubic-bezier(.4,0,1,1)" },
-  "ease-in-out":     { "$type": "cubicBezier", "$value": "cubic-bezier(.77,0,.175,1)" },
+  "ease-in":         { "$type": "cubicBezier", "$value": "cubic-bezier(.4,0,1,1)", "$description": "Kept for compatibility only. An accelerating curve on something the user watches reads as lag, so exits use --uix-ease-out at a --uix-dur-exit-* duration; check-motion.mjs fails component CSS that uses ease-in." },
+  "ease-in-out":     { "$type": "cubicBezier", "$value": "cubic-bezier(.77,0,.175,1)", "$description": "Movement already on screen (a strong in-out, easeInOutQuart). The spec's older cubic-bezier(.4,0,.2,1) was never shipped; this value is canonical." },
   "ease-spring":     { "$type": "cubicBezier", "$value": "cubic-bezier(.34,1.56,.64,1)" },
 
   "dur-fast":   { "$type": "duration", "$value": "120ms" },
@@ -16,6 +16,21 @@
   "dur-slow":   { "$type": "duration", "$value": "240ms" },
   "dur-slower": { "$type": "duration", "$value": "320ms" },
 
+  "dur-exit-fast": { "$type": "duration", "$value": "80ms",  "$description": "Exit paired with --uix-dur-fast (about two-thirds of the enter). Exits are faster than enters and never ease-in." },
+  "dur-exit":      { "$type": "duration", "$value": "110ms", "$description": "Exit paired with --uix-dur (popovers, menus, select, toasts)." },
+  "dur-exit-slow": { "$type": "duration", "$value": "160ms", "$description": "Exit paired with --uix-dur-slow (modal, drawer, side peek)." },
+  "dur-highlight": { "$type": "duration", "$value": "2400ms", "$description": "How long an arrival or change tint takes to fade back to the row colour. Not a transition budget: the tint is a held signal, not movement." },
+
+  "delay-tooltip":      { "$type": "duration", "$value": "400ms", "$description": "Hover delay before a tooltip opens. Keyboard focus opens it at once." },
+  "delay-tooltip-skip": { "$type": "duration", "$value": "300ms", "$description": "Delay-group window: a neighbouring tooltip hovered within this long after one closed opens at once." },
+
+  "loop-spin":     { "$type": "duration", "$value": "600ms",  "$description": "One turn of a spinner (Spinner, Button loading, a running flow node)." },
+  "loop-progress": { "$type": "duration", "$value": "1200ms", "$description": "One sweep of indeterminate progress." },
+  "loop-shimmer":  { "$type": "duration", "$value": "1400ms", "$description": "One pass of the skeleton shimmer." },
+  "loop-ping":     { "$type": "duration", "$value": "1600ms", "$description": "One heartbeat ping." },
+  "loop-blink":    { "$type": "duration", "$value": "1100ms", "$description": "One caret blink cycle." },
+  "loop-pulse":    { "$type": "duration", "$value": "2000ms", "$description": "One cycle of the reduced-motion opacity pulse that replaces spinners, shimmer and indeterminate progress, so a still-working indicator stays visibly alive without movement." },
+
   "lift": { "$type": "dimension", "$value": "4px" },
 
   "z-raised":   { "$type": "number", "$value": "1",   "$description": "z-index ladder (semantic stacking order). raised = locally lifted within a component: a sticky table header & first column, a flow node title over its diamond, a heartbeat dot over its ping." },