@nexub/themes 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/themes",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "CSS theme files for Nexub Design System — light, dark, and brand themes (Leap, Bookub, Payub, Founderub) as importable CSS.",
   "license": "MIT",
   "homepage": "https://github.com/Nexub-AI/nexub-ds#readme",
@@ -30,13 +30,14 @@
     "./light": "./src/light.css",
     "./dark": "./src/dark.css",
     "./glass": "./src/glass.css",
+    "./view-transitions": "./src/view-transitions.css",
     "./leap": "./src/leap.css",
     "./bookub": "./src/bookub.css",
     "./payub": "./src/payub.css",
     "./founderub": "./src/founderub.css"
   },
   "dependencies": {
-    "@nexub/tokens": "1.5.0"
+    "@nexub/tokens": "1.6.0"
   },
   "devDependencies": {
     "@fontsource-variable/inter": "5.3.0",

package/src/base.css

@@ -238,8 +238,10 @@ code, kbd, pre, samp {
 }
 
 /* Reduced motion */
+/* Reduced motion: everything is instant, except the designed fallbacks
+   (nx-motion, nx-reveal), which keep their crossfade with no travel. */
 @media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
+  *:not(.nx-motion, .nx-reveal), *::before, *::after {
     animation-duration: 0.01ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
@@ -274,6 +276,209 @@ code, kbd, pre, samp {
 }
 .nx-press:active:not(:disabled, [aria-disabled='true'], [data-disabled]) { transform: scale(0.97); }
 
+/* ─── Enter / exit (overlays, menus, tooltips, toasts) ───────────────────────
+   Opacity rides the effects spring; position and scale ride the spatial
+   spring, so a little overshoot reads as physical without flashing.
+   Keyframes, not transitions: Radix keeps closing content mounted until its
+   exit animation ends. Standalone translate/scale compose with the
+   component's own transform (e.g. a centred dialog's -50% offsets).
+   Modifiers set where the layer comes from: --nx-x, --nx-y, --nx-scale. */
+@keyframes nx-fade-in { from { opacity: 0; } }
+@keyframes nx-fade-out { to { opacity: 0; } }
+@keyframes nx-move-in { from { translate: var(--nx-x, 0) var(--nx-y, 0); scale: var(--nx-scale, 1); } }
+@keyframes nx-move-out { to { translate: var(--nx-x, 0) var(--nx-y, 0); scale: var(--nx-scale, 1); } }
+
+.nx-motion:is([data-state='open'], [data-state='delayed-open'], [data-state='instant-open'], [data-motion^='from-']) {
+  animation:
+    nx-fade-in var(--motion-spring-effects-default-duration) var(--motion-spring-effects-default-easing),
+    nx-move-in var(--motion-spring-spatial-default-duration) var(--motion-spring-spatial-default-easing);
+}
+/* Exit is quicker than enter and never overshoots. */
+.nx-motion:is([data-state='closed'], [data-motion^='to-']) {
+  animation:
+    nx-fade-out var(--motion-spring-effects-fast-duration) var(--motion-spring-effects-fast-easing) forwards,
+    nx-move-out var(--motion-spring-effects-fast-duration) var(--motion-spring-effects-fast-easing) forwards;
+}
+
+/* Floating layers grow from their trigger: a small scale plus a 4px nudge
+   away from the side they open on (Radix sets data-side). Components set
+   transform-origin to Radix's --radix-*-transform-origin. */
+.nx-pop { --nx-scale: 0.96; }
+.nx-pop[data-side='bottom'] { --nx-y: -4px; }
+.nx-pop[data-side='top'] { --nx-y: 4px; }
+.nx-pop[data-side='left'] { --nx-x: 4px; }
+.nx-pop[data-side='right'] { --nx-x: -4px; }
+/* Modal dialogs rise slightly as they scale in. */
+.nx-dialog { --nx-scale: 0.96; --nx-y: 8px; }
+/* NavigationMenu content slides in from the item's direction. */
+.nx-motion:is([data-motion='from-start'], [data-motion='to-start']) { --nx-x: -24px; }
+.nx-motion:is([data-motion='from-end'], [data-motion='to-end']) { --nx-x: 24px; }
+
+/* Reduced motion: a designed fallback, not a cut. Keep the crossfade, drop
+   the travel and scale. */
+@media (prefers-reduced-motion: reduce) {
+  .nx-motion { --nx-x: 0px !important; --nx-y: 0px !important; --nx-scale: 1 !important; }
+}
+
+/* ─── Cards: lift, press, sheen ──────────────────────────────────────────────
+   Lift: hover raises 2px on the spatial spring with elevation 1 → 2; leaving
+   settles faster on the effects spring (a transition uses the *destination*
+   state's timing). Press sinks to 0.99. Hover only where a real pointer
+   hovers, so touch never gets a stuck lift. */
+.nx-lift {
+  transition:
+    translate var(--motion-spring-effects-fast-duration) var(--motion-spring-effects-fast-easing),
+    scale var(--motion-spring-effects-fast-duration) var(--motion-spring-effects-fast-easing),
+    box-shadow var(--motion-spring-effects-fast-duration) var(--motion-spring-effects-fast-easing);
+}
+@media (hover: hover) {
+  .nx-lift:hover {
+    translate: 0 -2px;
+    transition:
+      translate var(--motion-spring-spatial-default-duration) var(--motion-spring-spatial-default-easing),
+      scale var(--motion-spring-spatial-fast-duration) var(--motion-spring-spatial-fast-easing),
+      box-shadow var(--motion-spring-effects-default-duration) var(--motion-spring-effects-default-easing);
+  }
+  /* Glass keeps its own shadow (it carries the specular edge). */
+  .nx-lift:not([data-material='glass']):hover { box-shadow: var(--elevation-2); }
+}
+.nx-lift:active { translate: 0 0; scale: 0.99; }
+@media (prefers-reduced-motion: reduce) {
+  .nx-lift:hover, .nx-lift:active { translate: none; scale: none; }
+}
+
+/* Sheen (opt-in): a soft light that follows the pointer across the surface,
+   plus a brighter rim where the pointer is nearest the edge. JS sets
+   --nx-mx/--nx-my through the CSSOM (CSP-safe); --nx-sheen fades it in.
+   Primary-tinted on light surfaces, white on dark and on glass. Off for touch
+   (no hover), reduced motion and reduced transparency. */
+@property --nx-sheen { syntax: '<number>'; inherits: true; initial-value: 0; }
+.nx-sheen {
+  position: relative;
+  --nx-sheen-tint: light-dark(var(--color-primary), #fff);
+  background-image: radial-gradient(
+    28rem circle at var(--nx-mx, 50%) var(--nx-my, 0%),
+    color-mix(in srgb, var(--nx-sheen-tint) calc(var(--nx-sheen) * 9%), transparent),
+    transparent 70%
+  );
+  transition: --nx-sheen var(--motion-spring-effects-fast-duration) var(--motion-spring-effects-fast-easing);
+}
+.nx-sheen::after {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  padding: 1px;
+  border-radius: inherit;
+  pointer-events: none;
+  background: radial-gradient(
+    14rem circle at var(--nx-mx, 50%) var(--nx-my, 0%),
+    color-mix(in srgb, var(--nx-sheen-tint) calc(var(--nx-sheen) * 70%), transparent),
+    transparent 70%
+  );
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+[data-material='glass'].nx-sheen { --nx-sheen-tint: #fff; }
+/* On a sheen surface the light is the hover feedback; the grey state layer
+   would wash it out. Press still darkens. */
+.nx-sheen.nx-state-layer:hover:not(:active)::before { opacity: 0; }
+@media (hover: hover) and (prefers-reduced-motion: no-preference) {
+  .nx-sheen:hover {
+    --nx-sheen: 1;
+    transition: --nx-sheen var(--motion-spring-effects-default-duration) var(--motion-spring-effects-default-easing);
+  }
+}
+@media (prefers-reduced-transparency: reduce) {
+  .nx-sheen { background-image: none; }
+  .nx-sheen::after { display: none; }
+}
+
+/* ─── AI: thinking indicator ─────────────────────────────────────────────────
+   nx-morph: a small shape that breathes between a circle and a soft squircle
+   on the expressive spring. nx-shimmer: a decorative light sweep across label
+   text (the text stays in the DOM). Reduced motion: both static. */
+@keyframes nx-morph {
+  from { border-radius: 50%; rotate: 0deg; }
+  to { border-radius: 38% 62% 38% 62% / 62% 38% 62% 38%; rotate: 90deg; }
+}
+@keyframes nx-shimmer {
+  from { background-position: 100% 0; }
+  to { background-position: -100% 0; }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .nx-morph {
+    animation: nx-morph calc(var(--motion-spring-expressive-slow-duration) * 2)
+      var(--motion-spring-expressive-slow-easing) infinite alternate;
+  }
+  .nx-shimmer {
+    background-image: linear-gradient(90deg,
+      currentColor 0%, currentColor 40%, var(--color-on-surface) 50%, currentColor 60%, currentColor 100%);
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    /* A steady sweep: linear, not a spring (a spring would pulse each loop). */
+    animation: nx-shimmer 2s linear infinite;
+  }
+}
+@media (forced-colors: active) {
+  .nx-shimmer { background: none; -webkit-text-fill-color: currentColor; }
+}
+
+/* Streaming caret: a steady blink while text is arriving. */
+@keyframes nx-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
+.nx-caret { animation: nx-caret 1s steps(1, end) infinite; }
+@media (prefers-reduced-motion: reduce) {
+  .nx-caret { animation: none; }
+}
+
+/* ─── Touch targets ─────────────────────────────────────────────────────────
+   Small controls keep their visual size but get an invisible 44×44 hit area
+   on touch screens (Apple HIG, WCAG 2.5.5). Uses ::after; the state layer
+   uses ::before. */
+@media (pointer: coarse) {
+  .nx-hit { position: relative; }
+  .nx-hit::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: max(100%, 44px);
+    height: max(100%, 44px);
+    translate: -50% -50%;
+  }
+}
+
+/* ─── Micro-moments ──────────────────────────────────────────────────────────
+   Reveal: content replacing a skeleton crossfades in (no travel). */
+.nx-reveal {
+  animation: nx-fade-in var(--motion-spring-effects-default-duration) var(--motion-spring-effects-default-easing);
+}
+/* Check draw: a checkmark path (pathLength="1") draws itself in. */
+@keyframes nx-draw { from { stroke-dashoffset: 1; } }
+.nx-check-draw {
+  stroke-dasharray: 1;
+  animation: nx-draw var(--motion-spring-effects-default-duration) var(--motion-spring-effects-default-easing);
+}
+@media (prefers-reduced-motion: reduce) {
+  .nx-check-draw { animation: none; }
+}
+/* Shake: a short horizontal "no" on the spatial-fast spring (async Button error). */
+@keyframes nx-shake {
+  0%, 100% { translate: 0; }
+  20% { translate: -4px; }
+  40% { translate: 4px; }
+  60% { translate: -3px; }
+  80% { translate: 2px; }
+}
+.nx-shake {
+  animation: nx-shake var(--motion-spring-spatial-fast-duration) var(--motion-spring-spatial-fast-easing);
+}
+@media (prefers-reduced-motion: reduce) {
+  .nx-shake { animation: none; }
+}
+
 /* ─── Density ────────────────────────────────────────────────────────────────
    Compact shifts every control one step down the ladder (md 40 → 32). */
 [data-density='compact'] {
@@ -294,6 +499,18 @@ code, kbd, pre, samp {
    One height for the fixed top header everywhere. Offset layouts with
    var(--app-header-height); AppHeader's own spacer already does in flow. */
 :root { --app-header-height: 64px; }
+/* condense: scroll-driven, no JS. The page spacer stays 64px; only the bar
+   tightens. Glass keeps its own shadow. */
+@keyframes nx-condense { to { height: 52px; } }
+@keyframes nx-condense-lift { to { height: 52px; box-shadow: var(--elevation-1); } }
+@supports (animation-timeline: scroll()) {
+  [data-condense] {
+    animation: nx-condense-lift linear both;
+    animation-timeline: scroll(root);
+    animation-range: 0 64px;
+  }
+  [data-condense][data-material='glass'] { animation-name: nx-condense; }
+}
 
 /* ─── Scroll lock (Sheet scrollLock="class") ─────────────────────────────────
    A CSP-safe page scroll lock: @nexub/react toggles these classes on <html>

package/src/view-transitions.css

@@ -0,0 +1,30 @@
+/* @nexub/themes/view-transitions — opt-in page transitions.
+   Import after base. Multi-page sites get them on navigation (@view-transition);
+   SPAs wrap their route update in startViewTransition() from @nexub/react.
+   The old page fades out fast; the new one fades in and rises 8px on the
+   spatial spring. Name an element (view-transition-name) to morph it between
+   pages instead. Reduced motion: crossfade only. */
+
+@view-transition { navigation: auto; }
+
+@keyframes nx-vt-rise { from { translate: 0 8px; } }
+
+::view-transition-old(root) {
+  animation: nx-fade-out var(--motion-spring-effects-fast-duration) var(--motion-spring-effects-fast-easing) both;
+}
+::view-transition-new(root) {
+  animation:
+    nx-fade-in var(--motion-spring-effects-default-duration) var(--motion-spring-effects-default-easing) both,
+    nx-vt-rise var(--motion-spring-spatial-default-duration) var(--motion-spring-spatial-default-easing) both;
+}
+::view-transition-group(*) {
+  animation-duration: var(--motion-spring-spatial-default-duration);
+  animation-timing-function: var(--motion-spring-spatial-default-easing);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-new(root) {
+    animation: nx-fade-in var(--motion-spring-effects-default-duration) var(--motion-spring-effects-default-easing) both;
+  }
+  ::view-transition-group(*) { animation-duration: 0s; }
+}