@zyncat/ui 0.8.0

package/src/tokens/motion.css

@@ -0,0 +1,49 @@
+/* Motion system - durations, brand curves, and pre-composed transitions; smooths every layout shift by default. */
+
+:root {
+  --duration-fast: 140ms;
+  --duration-base: 200ms;
+  --duration-slow: 300ms;
+  --duration-slower: 450ms; /* large-surface movement - dialog, sheet, page-scale reveals */
+  --duration-slowest: 900ms; /* hero-scale movement - card expansion, container transforms; the scale's ceiling */
+  --duration-spin: 600ms; /* continuous loaders only; deliberately outside the UI-transition scale */
+  --duration-pulse: 1600ms; /* ambient live/processing breathing; not collapsed under reduced motion */
+
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
+  --ease-glide: cubic-bezier(
+    0.55,
+    0,
+    0.15,
+    1
+  ); /* in-out travel - persistent element gliding between siblings; not for enter/exit */
+
+  --transition-control:
+    color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard),
+    border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
+  --transition-colors:
+    color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard),
+    border-color var(--duration-fast) var(--ease-standard);
+  --transition-opacity: opacity var(--duration-base) var(--ease-standard);
+  --transition-transform: transform var(--duration-base) var(--ease-standard);
+
+  /* Layout transition - animatable stand-ins for width/height; apply wherever size may change. */
+  --transition-layout:
+    grid-template-rows var(--duration-slow) var(--ease-entrance),
+    grid-template-columns var(--duration-slow) var(--ease-entrance),
+    max-height var(--duration-slow) var(--ease-entrance), max-width var(--duration-slow) var(--ease-entrance);
+}
+
+/* Accessibility: honor reduced-motion globally - every consumer gets it free. */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-fast: 1ms;
+    --duration-base: 1ms;
+    --duration-slow: 1ms;
+    --duration-slower: 1ms;
+    --duration-slowest: 1ms;
+    --duration-spin: 1200ms; /* slow the loader, never freeze it (1ms = blur) */
+  }
+}

package/src/tokens/radius.css

@@ -0,0 +1,11 @@
+/* Corner radii - a restrained set; --radius-md (6px) is the control default. */
+
+:root {
+  --radius-0: 0;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-full: 624.9375rem;
+}

package/src/tokens/semantic.css

@@ -0,0 +1,65 @@
+/* Semantic layer - the intent-named aliases components consume; repoint these to re-theme. */
+
+:root {
+  --bg-app: var(--gray-25);
+  --bg-surface: var(--gray-0);
+  --bg-surface-raised: var(--gray-0);
+  --bg-subtle: var(--gray-50);
+  --bg-muted: var(--gray-100);
+  --bg-inset: var(--gray-50);
+  --bg-overlay: oklch(0.225 0.01 264 / 0.44);
+
+  --text-strong: var(--gray-950);
+  --text-body: var(--gray-800);
+  --text-secondary: var(--gray-700);
+  --text-muted: var(--gray-600);
+  --text-subtle: var(--gray-500);
+  --text-disabled: var(--gray-400);
+  --text-accent: var(--teal-700);
+  --text-on-accent: var(--gray-0);
+  --text-inverse: var(--gray-0);
+
+  --border-subtle: var(--gray-150);
+  --border-default: var(--gray-200);
+  --border-strong: var(--gray-300);
+
+  --accent-lift: var(--teal-400);
+  --accent: var(--teal-500);
+  --accent-hover: var(--teal-600);
+  --accent-active: var(--teal-700);
+  --accent-subtle: var(--teal-50);
+  --accent-border: var(--teal-200);
+  --accent-disabled: var(--teal-300);
+
+  --success-subtle: var(--green-50);
+  --success: var(--green-600);
+  --success-text: var(--green-700);
+  --warning-subtle: var(--amber-50);
+  --warning: var(--amber-600);
+  --warning-text: var(--amber-700);
+  --danger-subtle: var(--red-50);
+  --danger: var(--red-600);
+  --danger-text: var(--red-700);
+  --info-subtle: var(--teal-50);
+  --info: var(--teal-600);
+  --info-text: var(--teal-700);
+  --danger-disabled: var(--red-300);
+
+  /* State layer: interactive hover/press fills are translucent washes, never opaque
+     near-whites - opaque --bg-subtle patches vanish on tinted/app surfaces. Press > hover. */
+  --neutral-wash: var(--gray-wash);
+  --neutral-wash-press: var(--gray-wash-strong);
+  --accent-wash: var(--teal-wash);
+  --success-wash: var(--green-wash);
+  --warning-wash: var(--amber-wash);
+  --danger-wash: var(--red-wash);
+
+  /* Glass tints - per-tone translucent fills derived from the status hues; alpha kept low so the frost reads through. */
+  --glass-tint-neutral: color-mix(in oklab, var(--gray-600) 13%, transparent);
+  --glass-tint-info: color-mix(in oklab, var(--info) 17%, transparent);
+  --glass-tint-success: color-mix(in oklab, var(--success) 17%, transparent);
+  --glass-tint-warning: color-mix(in oklab, var(--warning) 21%, transparent);
+  --glass-tint-danger: color-mix(in oklab, var(--danger) 17%, transparent);
+
+  --focus-ring: var(--ring-accent);
+}

package/src/tokens/spacing.css

@@ -0,0 +1,26 @@
+/* Spacing spine - one 4px base and a short scale; every gap snaps to a step. */
+
+:root {
+  --space-px: 1px;
+  --space-0: 0;
+  --space-1: 0.25rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-5: 1.5rem;
+  --space-6: 2rem;
+  --space-7: 3rem;
+  --space-8: 4rem;
+  --space-9: 6rem;
+  --space-10: 8rem;
+
+  --container-max: 72rem;
+  --measure-prose: 38rem;
+  --sidebar-width: 16rem;
+
+  --control-height-sm: 1.75rem;
+  --control-height: 2.25rem;
+  --control-height-lg: 2.5rem;
+  --control-box: 1.125rem;
+  --control-switch: 1.25rem; /* switch track (md); the one control size off the scale - width reuses --control-height(-sm), sm height reuses --space-4 */
+}

package/src/tokens/typography.css

@@ -0,0 +1,52 @@
+/* Type system - two families, three weights, a 9-step ramp with matched leading + tracking. */
+
+:root {
+  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;
+
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600;
+
+  --size-micro: 0.75rem;
+  --size-caption: 0.8125rem;
+  --size-body: 0.875rem;
+  --size-body-lg: 1rem;
+  --size-heading: 1.125rem;
+  --size-title: 1.3125rem;
+  --size-title-lg: 1.625rem;
+  --size-display: 2rem;
+  --size-display-lg: 2.5rem;
+
+  --leading-micro: 1rem;
+  --leading-caption: 1.125rem;
+  --leading-body: 1.375rem;
+  --leading-body-lg: 1.625rem;
+  --leading-heading: 1.625rem;
+  --leading-title: 1.75rem;
+  --leading-title-lg: 2rem;
+  --leading-display: 2.375rem;
+  --leading-display-lg: 2.875rem;
+
+  /* Measure - line-length cap for floating text (tooltip, toast, popover hints) so it never runs a long ribbon. */
+  --measure-floating: 36ch;
+
+  --tracking-caps: 0.04em;
+  --tracking-normal: 0em;
+  --tracking-tight: -0.011em;
+  --tracking-tighter: -0.016em;
+  --tracking-display: -0.021em;
+
+  /* Role bundles - size + leading + weight + tracking, pre-composed; reach for these first. */
+  --type-display-lg: var(--weight-semibold) var(--size-display-lg)/var(--leading-display-lg) var(--font-sans);
+  --type-display: var(--weight-semibold) var(--size-display)/var(--leading-display) var(--font-sans);
+  --type-title-lg: var(--weight-semibold) var(--size-title-lg)/var(--leading-title-lg) var(--font-sans);
+  --type-title: var(--weight-semibold) var(--size-title)/var(--leading-title) var(--font-sans);
+  --type-heading: var(--weight-semibold) var(--size-heading)/var(--leading-heading) var(--font-sans);
+  --type-body-lg: var(--weight-regular) var(--size-body-lg)/var(--leading-body-lg) var(--font-sans);
+  --type-body: var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-sans);
+  --type-label: var(--weight-medium) var(--size-body)/var(--leading-body) var(--font-sans);
+  --type-caption: var(--weight-regular) var(--size-caption)/var(--leading-caption) var(--font-sans);
+  --type-micro: var(--weight-medium) var(--size-micro)/var(--leading-micro) var(--font-sans);
+  --type-mono: var(--weight-regular) var(--size-caption)/var(--leading-caption) var(--font-mono);
+}