premium-ds 0.1.0

package/src/tokens/motion-tokens.ts

@@ -0,0 +1,72 @@
+/* motion-tokens.ts - the JSandCSS motion bridge; Motion code reads these token values, never hardcodes them. */
+
+import type { Transition } from 'motion/react';
+
+export type Bezier = [number, number, number, number];
+
+export interface MotionTokens {
+  /** seconds - fast 0.12 - base 0.18 - slow 0.26 */
+  dur: { fast: number; base: number; slow: number };
+  ease: { standard: Bezier; entrance: Bezier; exit: Bezier; spring: Bezier; glide: Bezier };
+  /** ready-made Motion transitions */
+  t: { enter: Transition; exit: Transition; layout: Transition; settle: Transition };
+  reduced: boolean;
+}
+
+const DEFAULT_DUR: MotionTokens['dur'] = { fast: 0.12, base: 0.18, slow: 0.26 };
+const DEFAULT_EASE: MotionTokens['ease'] = {
+  standard: [0.2, 0, 0, 1],
+  entrance: [0.16, 1, 0.3, 1],
+  exit: [0.4, 0, 1, 1],
+  spring: [0.34, 1.4, 0.5, 1],
+  glide: [0.55, 0, 0.15, 1],
+};
+
+function build(dur: MotionTokens['dur'], ease: MotionTokens['ease']): MotionTokens {
+  const reduced = dur.base <= 0.005; // reduced motion collapses durations to ~1ms
+  return {
+    dur,
+    ease,
+    reduced,
+    t: {
+      enter: { duration: dur.base, ease: ease.entrance },
+      exit: { duration: dur.fast, ease: ease.exit },
+      layout: { duration: dur.slow, ease: ease.entrance },
+      settle: reduced
+        ? { duration: 0 }
+        : { type: 'spring', visualDuration: dur.base, bounce: 0.22 },
+    },
+  };
+}
+
+function readFromDom(): MotionTokens {
+  const cs = getComputedStyle(document.documentElement);
+  const seconds = (name: string, fallback: number): number => {
+    const v = cs.getPropertyValue(name).trim();
+    const n = v.slice(-2) === 'ms' ? parseFloat(v) / 1000 : parseFloat(v);
+    return isNaN(n) ? fallback : n;
+  };
+  const bezier = (name: string, fallback: Bezier): Bezier => {
+    const m = cs.getPropertyValue(name).match(/-?[\d.]+/g);
+    return m && m.length === 4 ? (m.map(Number) as Bezier) : fallback;
+  };
+  return build(
+    {
+      fast: seconds('--duration-fast', DEFAULT_DUR.fast),
+      base: seconds('--duration-base', DEFAULT_DUR.base),
+      slow: seconds('--duration-slow', DEFAULT_DUR.slow),
+    },
+    {
+      standard: bezier('--ease-standard', DEFAULT_EASE.standard),
+      entrance: bezier('--ease-entrance', DEFAULT_EASE.entrance),
+      exit: bezier('--ease-exit', DEFAULT_EASE.exit),
+      spring: bezier('--ease-spring', DEFAULT_EASE.spring),
+      glide: bezier('--ease-glide', DEFAULT_EASE.glide),
+    },
+  );
+}
+
+export const UIMotion: MotionTokens =
+  typeof document !== 'undefined' ? readFromDom() : build(DEFAULT_DUR, DEFAULT_EASE);
+
+export default UIMotion;

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: 120ms;
+  --duration-base: 180ms;
+  --duration-slow: 260ms;
+  --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-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,75 @@
+/* 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-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: 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);
+
+  --neutral-wash: var(--gray-wash);
+  --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);
+}
+
+/* -- Dark theme - scaffold (light-first; build this next pass) --------------
+[data-theme="dark"] {
+  --bg-app:            var(--gray-950);
+  --bg-surface:        var(--gray-900);
+  --bg-subtle:         var(--gray-800);
+  --text-strong:       var(--gray-25);
+  --text-body:         var(--gray-200);
+  --text-muted:        var(--gray-400);
+  --border-default:    var(--gray-800);
+  --accent:            var(--teal-400);
+  --text-accent:       var(--teal-300);
+  ...
+}
+*/

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,54 @@
+/* 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);
+}