@psnext/design-system 1.0.0

package/dist/styles/base/global.css

@@ -0,0 +1,305 @@
+/* ============================================================
+   Global Base Styles
+   ============================================================ */
+
+/* Radial gradient background (applied by themes) */
+body::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  background: var(--radial-gradient-bg);
+  pointer-events: none;
+}
+
+body {
+  position: relative;
+}
+
+/* Hide scrollbars while preserving scroll */
+* {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+*::-webkit-scrollbar {
+  display: none;
+}
+
+main,
+.content-wrapper {
+  position: relative;
+  z-index: 1;
+}
+
+/* Reduce motion */
+@media (prefers-reduced-motion: reduce) {
+  body::before {
+    animation: none;
+    transition: none;
+  }
+}
+
+/* High contrast */
+@media (prefers-contrast: high) {
+  body::before {
+    opacity: 0.3;
+  }
+}
+
+/* ── Keyframes ─────────────────────────────────────────── */
+
+@keyframes hierarchyHighlightPulse {
+  0% {
+    box-shadow: 0 0 0 0 var(--hierarchy-highlight-glow, rgba(99, 102, 241, 0.45));
+  }
+  40% {
+    box-shadow: 0 0 0 4px var(--hierarchy-highlight-glow, rgba(99, 102, 241, 0.25));
+  }
+  100% {
+    box-shadow: 0 0 0 0 var(--hierarchy-highlight-glow, rgba(99, 102, 241, 0));
+  }
+}
+
+@keyframes hierarchyExpandIn {
+  from {
+    opacity: 0;
+    max-height: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    max-height: 200px;
+    transform: translateY(0);
+  }
+}
+
+@keyframes typingDot {
+  0%,
+  60%,
+  100% {
+    opacity: 0.3;
+    transform: translateY(0);
+  }
+  30% {
+    opacity: 1;
+    transform: translateY(-3px);
+  }
+}
+
+@property --chat-border-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+@keyframes chatBorderSpin {
+  from {
+    --chat-border-angle: 0deg;
+  }
+  to {
+    --chat-border-angle: 360deg;
+  }
+}
+
+@keyframes chatBorderGlow {
+  0%,
+  100% {
+    box-shadow: 0 0 12px 1px var(--chat-glow-shadow), 0 0 24px 2px var(--chat-glow-shadow-outer);
+  }
+  50% {
+    box-shadow: 0 0 20px 4px var(--chat-glow-shadow), 0 0 40px 8px var(--chat-glow-shadow-outer);
+  }
+}
+
+.chat-input-glow-active {
+  animation: chatBorderGlow 2s ease-in-out infinite;
+}
+
+.chat-input-glow-active::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  border: 2px solid transparent;
+  background: conic-gradient(
+      from var(--chat-border-angle),
+      var(--chat-glow-1),
+      var(--chat-glow-2),
+      var(--chat-glow-3),
+      var(--chat-glow-2),
+      var(--chat-glow-1)
+    )
+    border-box;
+  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
+  mask-composite: exclude;
+  animation: chatBorderSpin 3s linear infinite;
+  pointer-events: none;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Micro-interactions — Step 1: Global transition defaults
+   Applied only when the user has not requested reduced motion.
+   All values use short durations (150ms) so they feel snappy,
+   not sluggish. Components can override via inline styles.
+───────────────────────────────────────────────────────────── */
+@media (prefers-reduced-motion: no-preference) {
+  button,
+  [role="button"],
+  a,
+  input,
+  select,
+  textarea,
+  label[for] {
+    transition:
+      background-color 150ms ease,
+      color 150ms ease,
+      border-color 150ms ease,
+      box-shadow 150ms ease,
+      opacity 150ms ease,
+      transform 150ms ease;
+  }
+
+  /* Active / press feedback — subtle scale-down on click */
+  button:active,
+  [role="button"]:active {
+    transform: scale(0.97);
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Micro-interactions — Step 3: Page transition (fade + rise)
+   Re-triggers every time .animate-page-enter is mounted.
+   Skipped when user prefers reduced motion.
+───────────────────────────────────────────────────────────── */
+@keyframes pageEnter {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .animate-page-enter {
+    animation: pageEnter 200ms ease-out both;
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Micro-interactions — Nav stagger: items appear top → bottom
+   Each item gets an index-based delay via inline style.
+   The animation is short (180ms) and subtle (8px rise + fade).
+   Skipped for reduced-motion users.
+───────────────────────────────────────────────────────────── */
+@keyframes navItemEnter {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .nav-item-enter {
+    animation: navItemEnter 180ms ease-out both;
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Micro-interactions — Step 6: Drawer panel transition
+   Replaces the generic `ease-out` on all drawer panels with a
+   spring-like cubic-bezier that starts fast and decelerates
+   naturally — more polished than the default browser ease-out.
+   Reduced-motion: falls back to no transform transition.
+───────────────────────────────────────────────────────────── */
+.drawer-panel {
+  transition-property: transform;
+  transition-duration: 280ms;
+  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .drawer-panel {
+    transition: none;
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Micro-interactions — Step 5: Skeleton shimmer
+   Replaces the default Tailwind animate-pulse with a directional
+   gradient sweep. Uses var(--muted) and var(--accent) so it
+   automatically adapts to light / dark mode.
+───────────────────────────────────────────────────────────── */
+@keyframes shimmer {
+  from {
+    background-position: -200% center;
+  }
+  to {
+    background-position: 200% center;
+  }
+}
+
+.skeleton-shimmer {
+  background: linear-gradient(90deg, var(--muted) 25%, var(--accent) 50%, var(--muted) 75%);
+  background-size: 200% 100%;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .skeleton-shimmer {
+    animation: shimmer 1.6s ease-in-out infinite;
+  }
+}
+
+/* Reduced-motion fallback — static muted block, no animation */
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-shimmer {
+    background: var(--muted);
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────
+   Radix Accordion open/close — drives `animate-accordion-down/up`
+   utilities (mapped in theme.css) used by the Accordion primitive.
+───────────────────────────────────────────────────────────── */
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* Blinking caret for the InputOTP primitive (`animate-caret-blink`). */
+@keyframes caret-blink {
+  0%,
+  70%,
+  100% {
+    opacity: 1;
+  }
+  20%,
+  50% {
+    opacity: 0;
+  }
+}

package/dist/styles/base/radius.css

@@ -0,0 +1,22 @@
+/* ============================================================
+   Border Radius Tokens
+   Source: Figma border radius variable set
+   ============================================================ */
+
+:root {
+  --rounded-none: 0px;
+  --rounded-xs: 2px;
+  --rounded-sm: 4px;
+  --rounded-md: 6px;
+  --rounded-lg: 8px;
+  --radius: 10px; /* default system radius */
+  --rounded-xl: 12px;
+  --rounded-2xl: 16px;
+  --rounded-3xl: 24px;
+  --rounded-full: 9999px;
+
+  /* Component-specific */
+  --radius-button: 8px;
+  --radius-card: 8px;
+  --radius-dialog: 10px;
+}

package/dist/styles/base/semantic-aliases.css

@@ -0,0 +1,53 @@
+/* ============================================================
+   Semantic Aliases
+   Maps Style Dictionary–generated vars (--bg-*, --content-*, etc.)
+   to the component-facing names used by primitives and patterns.
+
+   Generated vars come from styles/generated/light.css (and dark.css).
+   This file must be imported AFTER the generated files.
+   ============================================================ */
+
+:root {
+  /* ── Surfaces ─────────────────────────────────────────── */
+  --background: var(--bg-background);
+  --foreground: var(--content-foreground);
+  --card: var(--card-100);
+  --card-foreground: var(--content-foreground);
+  --popover: var(--bg-secondary);
+  --popover-foreground: var(--content-secondary-foreground);
+
+  /* ── Interactive ──────────────────────────────────────── */
+  --primary: var(--bg-primary);
+  --primary-foreground: var(--content-primary-foreground);
+  --secondary: var(--bg-secondary);
+  --secondary-foreground: var(--content-secondary-foreground);
+  --muted: var(--bg-muted);
+  --muted-foreground: var(--content-muted-foreground);
+  --accent: var(--bg-accent);
+  --accent-foreground: var(--content-accent-foreground);
+
+  /* ── States ───────────────────────────────────────────── */
+  --destructive: var(--bg-destructive);
+  --destructive-foreground: var(--content-destructive);
+
+  /* ── UI structure ─────────────────────────────────────── */
+  --border: var(--border-2);
+  --input: var(--bg-input);
+  --input-background: var(--bg-input);
+  --ring: var(--focus-ring);
+
+  /* ── Card opacity scale ───────────────────────────────── */
+  --card-90: var(--card-90);
+  --card-80: var(--card-80);
+  --card-60: var(--card-60);
+  --card-40: var(--card-40);
+  --card-20: var(--card-20);
+  --card-10: var(--card-10);
+
+  /* ── Border scale ─────────────────────────────────────── */
+  --border-0: var(--border-0);
+  --border-1: var(--border-1);
+  --border-3: var(--border-3);
+  --border-4: var(--border-4);
+  --border-5: var(--border-5);
+}

package/dist/styles/base/spacing.css

@@ -0,0 +1,33 @@
+/* ============================================================
+   Spacing Tokens
+   Source: Figma Spacing1 variable set
+   ============================================================ */
+
+:root {
+  /* Semantic scale */
+  --spacing-0: 0px;
+  --spacing-3xs: 2px;
+  --spacing-2xs: 4px;
+  --spacing-xs: 8px;
+  --spacing-sm: 12px;
+  --spacing-md: 16px;
+  --spacing-lg: 20px;
+  --spacing-xl: 24px;
+  --spacing-2xl: 32px;
+  --spacing-3xl: 40px;
+  --spacing-4xl: 48px;
+  --spacing-5xl: 64px;
+
+  /* Precision values — use sparingly when semantic tokens don't fit */
+  --spacing-3: 3px;
+  --spacing-6: 6px;
+  --spacing-7: 7px;
+  --spacing-9: 9px;
+  --spacing-10: 10px;
+  --spacing-14: 14px;
+  --spacing-5p5: 5.5px;
+  --spacing-7p5: 7.5px;
+  --spacing-8p5: 8.5px;
+  --spacing-9p5: 9.5px;
+  --spacing-15p5: 15.5px;
+}

package/dist/styles/base/typography.css

@@ -0,0 +1,48 @@
+/* ============================================================
+   Typography Tokens
+   Source: PS AI Helix - Core Figma library
+   ============================================================ */
+
+:root {
+  /* Font families */
+  --font-heading: "Outfit", sans-serif;
+  --font-body: "Inter", sans-serif;
+  --font-mono: "Geist Mono", monospace;
+
+  /* Font weights */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+
+  /* Font sizes */
+  --text-4xl: 48px; /* h1 */
+  --text-3xl: 30px; /* h2 */
+  --text-2xl: 24px; /* h3 */
+  --text-xl: 20px; /* h4 */
+  --text-lg: 18px; /* paragraph large */
+  --text-base: 16px; /* paragraph regular / h5 */
+  --text-sm: 14px; /* paragraph small / h6 / label */
+  --text-xs: 12px; /* paragraph mini / h7 / caption */
+
+  /* Line heights — headings */
+  --leading-h1: 48px;
+  --leading-h2: 30px;
+  --leading-h3: 28.8px;
+  --leading-h4: 24px;
+  --leading-h5: 24px;
+  --leading-h6: 24px;
+  --leading-h7: 24px;
+
+  /* Line heights — body */
+  --leading-body-lg: 27px;
+  --leading-body: 24px;
+  --leading-body-sm: 20px;
+  --leading-body-xs: 16px;
+
+  /* Line heights — special */
+  --leading-caption: 21px;
+  --leading-mono: 24px;
+
+  /* Letter spacing */
+  --tracking-caption: 1.5px;
+}

package/dist/styles/generated/bodhi-vars.css

@@ -0,0 +1,34 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.theme-bodhi {
+  --brand-neutrals-50: #F9FAFB;
+  --brand-neutrals-100: #F3F4F6;
+  --brand-neutrals-200: #E5E7EB;
+  --brand-neutrals-300: #D1D5DB;
+  --brand-neutrals-400: #9CA3AF;
+  --brand-neutrals-500: #6B7280;
+  --brand-neutrals-600: #4B5563;
+  --brand-neutrals-700: #374151;
+  --brand-neutrals-800: #1F2937;
+  --brand-neutrals-900: #111827;
+  --brand-neutrals-950: #030712;
+  --brand-shades-50: #EFF6FF;
+  --brand-shades-100: #DBEAFE;
+  --brand-shades-200: #BFDBFE;
+  --brand-shades-300: #93C5FD;
+  --brand-shades-400: #60A5FA;
+  --brand-shades-500: #EF4444;
+  --brand-shades-600: #2563EB;
+  --brand-shades-700: #1D4ED8;
+  --brand-shades-800: #1E40AF;
+  --brand-shades-900: #1E3A8A;
+  --brand-shades-950: #172554;
+  --brand-combinations-1-brand: #EF4444;
+  --brand-combinations-1-brand-foreground: #FFFFFF;
+  --brand-combinations-2-brand: #BFDBFE;
+  --brand-combinations-2-brand-foreground: #1E40AF;
+  --brand-combinations-3-brand: #172554;
+  --brand-combinations-3-brand-foreground: #93C5FD;
+}

package/dist/styles/generated/dark.css

@@ -0,0 +1,87 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+html.dark {
+  --bg-background: #1F2832; /** Use for general backgrounds. */
+  --bg-primary: #F3F4F6;
+  --bg-secondary: #1F2937;
+  --bg-accent: #111827; /** Level 1, official */
+  --bg-muted: #111827;
+  --bg-destructive: #7F1D1D;
+  --bg-destructive-alpha: rgba(127, 29, 29, 0.2);
+  --bg-destructive-subtle: #450A0A;
+  --bg-input: rgba(255, 255, 255, 0.05);
+  --bg-page-bg-brand: #450A0A;
+  --bg-page-bg-neutral: #030712;
+  --bg-info: #075985;
+  --bg-info-subtle: #0C4A6E;
+  --bg-success: #3F6212;
+  --bg-success-subtle: #365314;
+  --bg-warning: #9A3412;
+  --bg-warning-subtle: #431407;
+  --bg-error: #991B1B;
+  --bg-error-subtle: #7F1D1D;
+  --bg-backdrop: rgba(31, 40, 50, 0.4);
+  --content-foreground: #F9FAFB;
+  --content-primary-foreground: #030712;
+  --content-secondary-foreground: #F3F4F6;
+  --content-accent-foreground: #F3F4F6;
+  --content-muted-foreground: #9CA3AF;
+  --content-destructive-foreground: #FFFFFF;
+  --content-info: #38BDF8;
+  --content-info-bold: #7DD3FC;
+  --content-success: #84CC16;
+  --content-success-bold: #BEF264;
+  --content-warning: #F97316;
+  --content-warning-bold: #FDBA74;
+  --content-error: #EF4444;
+  --content-error-bold: #FCA5A5;
+  --content-destructive: #F87171;
+  --content-destructive-subtle: #B91C1C;
+  --card-100: #1F2832;
+  --card-90: rgba(31, 40, 50, 0.9);
+  --card-80: rgba(31, 40, 50, 0.8);
+  --card-60: rgba(31, 40, 50, 0.6);
+  --card-40: rgba(31, 40, 50, 0.4);
+  --card-20: rgba(31, 40, 50, 0.2);
+  --card-10: rgba(31, 40, 50, 0.1);
+  --card-foreground: #FFFFFF;
+  --popover: #FFFFFF;
+  --popover-foreground: #1F2832;
+  --unofficial-foreground-alt: #D1D5DB; /** Please use this for body text. */
+  --unofficial-body-background: #030712;
+  --unofficial-mid-alt: #9CA3AF;
+  --unofficial-ghost-foreground: #E5E7EB;
+  --unofficial-ghost: rgba(255, 255, 255, 0.0001);
+  --unofficial-ghost-hover: rgba(255, 255, 255, 0.1);
+  --unofficial-primary-hover: #D1D5DB;
+  --unofficial-secondary-hover: #111827;
+  --unofficial-outline: rgba(255, 255, 255, 0.05);
+  --unofficial-outline-hover: rgba(255, 255, 255, 0.1);
+  --unofficial-outline-active: rgba(255, 255, 255, 0.15);
+  --unofficial-accent-0: #030712;
+  --unofficial-accent-2: #1F2937;
+  --unofficial-accent-3: #374151;
+  --border-0: #030712;
+  --border-1: #111827;
+  --border-2: #374151; /** level 2, official. See docs. */
+  --border-3: #374151;
+  --border-4: #4B5563;
+  --border-5: #6B7280;
+  --border-destructive-border: #F87171;
+  --focus-ring: #374151; /** Focus ring */
+  --focus-ring-error: #6D2E2F; /** Focus ring error */
+  --focus-ring-success: #BEF264; /** Focus ring error */
+  --sidebar: #030712;
+  --sidebar-foreground: #D1D5DB;
+  --sidebar-accent: #111827;
+  --sidebar-accent-foreground: #F3F4F6;
+  --sidebar-primary: #F9FAFB;
+  --sidebar-primary-foreground: #111827;
+  --sidebar-border: #1F2937;
+  --sidebar-ring: #374151;
+  --sidebar-unofficial-sidebar-muted: #6B7280;
+  --obra-shadcn-docs-obra-shadcn-ui-docs-1: #111628;
+  --obra-shadcn-docs-obra-shadcn-ui-docs-2: #201D1B;
+}

package/dist/styles/generated/light.css

@@ -0,0 +1,87 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --bg-background: #FFFFFF; /** Use for general backgrounds. */
+  --bg-primary: #111827;
+  --bg-secondary: #F3F4F6;
+  --bg-accent: #F3F4F6; /** Level 1, official */
+  --bg-muted: #F3F4F6;
+  --bg-destructive: #DC2626;
+  --bg-destructive-alpha: rgba(220, 38, 38, 0.2);
+  --bg-destructive-subtle: #FEF2F2;
+  --bg-input: #FFFFFF;
+  --bg-page-bg-brand: #FECACA;
+  --bg-page-bg-neutral: #E2E8F0;
+  --bg-info: #BAE6FD;
+  --bg-info-subtle: #E0F2FE;
+  --bg-success: #D9F99D;
+  --bg-success-subtle: #ECFCCB;
+  --bg-warning: #FED7AA;
+  --bg-warning-subtle: #FFEDD5;
+  --bg-error: #FECACA;
+  --bg-error-subtle: #FFE2E2;
+  --bg-backdrop: rgba(31, 40, 50, 0.4);
+  --content-foreground: #030712;
+  --content-primary-foreground: #F9FAFB;
+  --content-secondary-foreground: #111827;
+  --content-accent-foreground: #111827;
+  --content-muted-foreground: #6B7280;
+  --content-destructive-foreground: #FFFFFF;
+  --content-info: #0284C7;
+  --content-info-bold: #075985;
+  --content-success: #65A30D;
+  --content-success-bold: #3F6212;
+  --content-warning: #EA580C;
+  --content-warning-bold: #9A3412;
+  --content-error: #DC2626;
+  --content-error-bold: #991B1B;
+  --content-destructive: #DC2626;
+  --content-destructive-subtle: #FCA5A5;
+  --card-100: #FFFFFF;
+  --card-90: rgba(255, 255, 255, 0.9);
+  --card-80: rgba(255, 255, 255, 0.8);
+  --card-60: rgba(255, 255, 255, 0.6);
+  --card-40: rgba(255, 255, 255, 0.4);
+  --card-20: rgba(255, 255, 255, 0.2);
+  --card-10: rgba(255, 255, 255, 0.1);
+  --card-foreground: #030712;
+  --popover: #1F2832;
+  --popover-foreground: #FFFFFF;
+  --unofficial-foreground-alt: #374151; /** Please use this for body text. */
+  --unofficial-body-background: #FFFFFF;
+  --unofficial-mid-alt: #4B5563;
+  --unofficial-ghost-foreground: #374151;
+  --unofficial-ghost: rgba(255, 255, 255, 0.0001);
+  --unofficial-ghost-hover: rgba(31, 40, 50, 0.05);
+  --unofficial-primary-hover: #374151;
+  --unofficial-secondary-hover: #F9FAFB;
+  --unofficial-outline: rgba(255, 255, 255, 0.1);
+  --unofficial-outline-hover: rgba(31, 40, 50, 0.0333);
+  --unofficial-outline-active: rgba(31, 40, 50, 0.05);
+  --unofficial-accent-0: #F9FAFB;
+  --unofficial-accent-2: #E5E7EB;
+  --unofficial-accent-3: #D1D5DB;
+  --border-0: #F9FAFB;
+  --border-1: #F3F4F6;
+  --border-2: #E5E7EB; /** level 2, official. See docs. */
+  --border-3: #D1D5DB;
+  --border-4: #9CA3AF;
+  --border-5: #6B7280;
+  --border-destructive-border: #DC2626;
+  --focus-ring: #D1D5DB; /** Focus ring */
+  --focus-ring-error: #FCA5A5; /** Focus ring error */
+  --focus-ring-success: #65A30D; /** Focus ring error */
+  --sidebar: #F9FAFB;
+  --sidebar-foreground: #374151;
+  --sidebar-accent: #F3F4F6;
+  --sidebar-accent-foreground: #111827;
+  --sidebar-primary: #111827;
+  --sidebar-primary-foreground: #F9FAFB;
+  --sidebar-border: #E5E7EB;
+  --sidebar-ring: #D1D5DB;
+  --sidebar-unofficial-sidebar-muted: #6B7280;
+  --obra-shadcn-docs-obra-shadcn-ui-docs-1: #BFDBFE;
+  --obra-shadcn-docs-obra-shadcn-ui-docs-2: #FEF9C3;
+}