@psnext/design-system 1.0.0 → 1.1.0

package/dist/styles/base.css

@@ -0,0 +1,43 @@
+/* ============================================================
+   Base layer — opinionated defaults so every app in the suite
+   shares the same baseline (border color, focus outline, page
+   surface). Lives in @layer base, so component/app utilities still
+   override it per-element.
+   ============================================================ */
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* ── Skeleton shimmer (used by the Skeleton primitive) ────── */
+@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);
+  }
+}

package/dist/styles/glass.css

@@ -0,0 +1,75 @@
+/* ============================================================
+   Glass-morphism surface tints — ported from the previous DS
+   (not in the Figma export). Used app-wide for glass panels and by
+   the Sheet `glass` overlay variant. Base in :root/.dark; brand
+   overrides per theme. Pair with `backdrop-blur-*`.
+   ============================================================ */
+
+:root {
+  --glass-heavy: rgba(255, 255, 255, 0.6);
+  --glass-strong: rgba(255, 255, 255, 0.6);
+  --glass-subtle: rgba(255, 255, 255, 0.2);
+  --glass-light: rgba(255, 255, 255, 0.4);
+  --glass-medium: rgba(255, 255, 255, 0.5);
+  /* Backdrop blur radius for glass surfaces (GlassSurface primitive). */
+  --glass-blur: 45px;
+}
+
+.dark {
+  --glass-heavy: rgba(31, 40, 50, 0.8);
+  --glass-strong: rgba(31, 40, 50, 0.8);
+  --glass-subtle: rgba(31, 40, 50, 0.3);
+  --glass-light: rgba(31, 40, 50, 0.5);
+  --glass-medium: rgba(55, 65, 81, 0.5);
+}
+
+/* ── Slingshot (white tint — matches base) ────────────────── */
+.theme-slingshot {
+  --glass-heavy: rgba(255, 255, 255, 0.6);
+  --glass-strong: rgba(255, 255, 255, 0.6);
+  --glass-subtle: rgba(255, 255, 255, 0.2);
+  --glass-light: rgba(255, 255, 255, 0.4);
+  --glass-medium: rgba(255, 255, 255, 0.5);
+}
+
+.theme-slingshot.dark {
+  --glass-heavy: rgba(31, 40, 50, 0.8);
+  --glass-strong: rgba(31, 40, 50, 0.8);
+  --glass-subtle: rgba(31, 40, 50, 0.3);
+  --glass-light: rgba(31, 40, 50, 0.5);
+  --glass-medium: rgba(55, 65, 81, 0.5);
+}
+
+/* ── Bodhi (slate tint) ───────────────────────────────────── */
+.theme-bodhi {
+  --glass-heavy: rgba(248, 250, 252, 0.8);
+  --glass-strong: rgba(248, 250, 252, 0.8);
+  --glass-subtle: rgba(248, 250, 252, 0.3);
+  --glass-light: rgba(248, 250, 252, 0.5);
+  --glass-medium: rgba(226, 232, 240, 0.5);
+}
+
+.theme-bodhi.dark {
+  --glass-heavy: rgba(30, 41, 59, 0.8);
+  --glass-strong: rgba(30, 41, 59, 0.8);
+  --glass-subtle: rgba(30, 41, 59, 0.3);
+  --glass-light: rgba(30, 41, 59, 0.5);
+  --glass-medium: rgba(51, 65, 85, 0.5);
+}
+
+/* ── Sustain (white tint — matches base) ──────────────────── */
+.theme-sustain {
+  --glass-heavy: rgba(255, 255, 255, 0.6);
+  --glass-strong: rgba(255, 255, 255, 0.6);
+  --glass-subtle: rgba(255, 255, 255, 0.2);
+  --glass-light: rgba(255, 255, 255, 0.4);
+  --glass-medium: rgba(255, 255, 255, 0.5);
+}
+
+.theme-sustain.dark {
+  --glass-heavy: rgba(31, 40, 50, 0.8);
+  --glass-strong: rgba(31, 40, 50, 0.8);
+  --glass-subtle: rgba(31, 40, 50, 0.3);
+  --glass-light: rgba(31, 40, 50, 0.5);
+  --glass-medium: rgba(55, 65, 81, 0.5);
+}

package/dist/styles/index.css

@@ -1,32 +1,52 @@
 /* ============================================================
-   @psnext/design-system — main CSS entry
-   Import order matters: tokens before aliases before components.
+   @psnext/design-system — single CSS entry (shipped RAW as
+   `@psnext/design-system/styles`).
 
-   Brand themes are NOT imported here — import them separately:
-     @import "@psnext/design-system/styles/themes/slingshot";
-     @import "@psnext/design-system/styles/themes/bodhi";
-     @import "@psnext/design-system/styles/themes/sustain";
+   We do NOT compile Tailwind here. The consuming app owns Tailwind
+   and compiles this together with its own build — one preflight,
+   one :root, no duplication:
+
+     @import "tailwindcss";
+     @import "@psnext/design-system/styles";  // this file (single import)
+
+   This file carries `@source` (below) so the app's Tailwind scans
+   our components automatically — no extra config on their side.
+
+   Token CSS is generated from Figma — see styles/tokens/ and
+   `pnpm tokens:css`.
    ============================================================ */
 
-/* 1. Generated color tokens (requires `pnpm tokens:build` first) */
-@import "./generated/light.css";
-@import "./generated/dark.css";
+/* ── Primitive scales ─────────────────────────────────────── */
+@import "./tokens/colors.css";
+@import "./tokens/alpha.css";
+@import "./tokens/spacing.css";
+@import "./tokens/border-radius.css";
+@import "./tokens/shadows.css";
+@import "./tokens/typography.css";
+@import "./tokens/chart-colors-light.css";
+@import "./tokens/chart-colors-dark.css";
+
+/* ── Mode (light / dark) ──────────────────────────────────── */
+@import "./tokens/mode-light.css";
+@import "./tokens/mode-dark.css";
+
+/* ── Brand themes (scoped to .theme-*) ────────────────────── */
+@import "./tokens/theme-slingshot.css";
+@import "./tokens/theme-bodhi.css";
+@import "./tokens/theme-sustain.css";
 
-/* 2. Semantic aliases — maps --bg-* / --content-* to --background / --foreground etc. */
-@import "./base/semantic-aliases.css";
+/* ── Glass-morphism surface tints (per brand + mode) ──────── */
+@import "./glass.css";
 
-/* 3. Raw color scale — full palette referenced by component tokens */
-@import "./base/colors.css";
+/* ── Semantic role aliases (shadcn/Radix names) ───────────── */
+@import "./semantic.css";
 
-/* 4. Base tokens */
-@import "./base/fonts.css";
-@import "./base/typography.css";
-@import "./base/spacing.css";
-@import "./base/radius.css";
-@import "./base/elevation.css";
+/* ── Tailwind theme bridge (@custom-variant + @theme inline) ─ */
+@import "./theme.css";
 
-/* 5. Component tokens — badges, toasts, tabs, glass, etc. */
-@import "./base/component-tokens.css";
+/* ── Base layer (suite-wide defaults) ─────────────────────── */
+@import "./base.css";
 
-/* 6. Base reset + keyframes */
-@import "./base/global.css";
+/* Scan the design-system component source so the utility classes
+   they use are emitted into the compiled stylesheet. */
+@source "../";

package/dist/styles/semantic.css

@@ -0,0 +1,107 @@
+/* ============================================================
+   Semantic role aliases — map the Figma mode tokens to the
+   shadcn/Radix role names that components consume.
+
+   Declared ONCE in :root. They reference the underlying mode
+   tokens (--bg-*, --content-*, …), so they automatically follow
+   `.dark` and brand `.theme-*` — those selectors redefine the
+   referenced vars, and CSS resolves var() at use time.
+   ============================================================ */
+
+:root {
+  /* ── Surfaces ─────────────────────────────────────────── */
+  --background: var(--bg-background);
+  --foreground: var(--content-foreground);
+  --card: var(--card-card-100);
+  --card-foreground: var(--card-card-foreground);
+  --popover: var(--popover-popover);
+  --popover-foreground: var(--popover-popover-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-foreground);
+
+  /* ── UI structure ─────────────────────────────────────── */
+  --border: var(--border-border-2);
+  /* Field border must be visible against the white field fill (Figma), so it
+     resolves to a grey from the border ramp rather than the fill color. */
+  --input: var(--border-border-3);
+  --input-background: var(--bg-input);
+  --switch-background: var(--gray-200);
+  --overlay: var(--bg-backdrop);
+  --ring: var(--focus-ring);
+
+  /* ── Sidebar ──────────────────────────────────────────── */
+  --sidebar: var(--sidebar-sidebar);
+  --sidebar-foreground: var(--sidebar-sidebar-foreground);
+  --sidebar-primary: var(--sidebar-sidebar-primary);
+  --sidebar-primary-foreground: var(--sidebar-sidebar-primary-foreground);
+  --sidebar-accent: var(--sidebar-sidebar-accent);
+  --sidebar-accent-foreground: var(--sidebar-sidebar-accent-foreground);
+  --sidebar-border: var(--sidebar-sidebar-border);
+  --sidebar-ring: var(--sidebar-sidebar-ring);
+
+  /* ── Charts ───────────────────────────────────────────── */
+  --chart-1: var(--categorical-chart-1);
+  --chart-2: var(--categorical-chart-2);
+  --chart-3: var(--categorical-chart-3);
+  --chart-4: var(--categorical-chart-4);
+  --chart-5: var(--categorical-chart-5);
+
+  /* ── Component tokens ─────────────────────────────────── */
+  --progress-analyzing: var(--sky-200);
+  --progress-ingesting: var(--orange-200);
+  --logo-accent: var(--white);
+
+  /* Gradient heading fill (Heading `gradient` variant). */
+  --gradient-heading-from: var(--sky-600);
+  --gradient-heading-to: var(--red-500);
+
+  /* Page background ambient gradient stops (PageBackground layout). The middle
+     stop is the brand tint, overridden per `.theme-*` + mode; edges are neutral.
+     The PageBackground component composes the radial-gradient from these so the
+     vars resolve in the element's theme scope (composing here in :root would
+     freeze the value and break theme overrides via inheritance). */
+  --page-gradient-edge: var(--slate-200);
+  --page-gradient-mid: var(--red-200);
+}
+
+.dark {
+  --progress-analyzing: var(--sky-800);
+  --progress-ingesting: var(--orange-800);
+  --logo-accent: var(--gray-200);
+
+  --page-gradient-edge: var(--gray-950);
+  --page-gradient-mid: var(--red-950);
+}
+
+/* Brand-aware page gradient: the middle stop is each brand's secondary tint. */
+.theme-slingshot {
+  --page-gradient-mid: var(--red-200);
+}
+.theme-bodhi {
+  --page-gradient-mid: var(--blue-300);
+}
+.theme-sustain {
+  --page-gradient-mid: var(--indigo-300);
+}
+
+.theme-slingshot.dark {
+  --page-gradient-mid: var(--red-950);
+}
+.theme-bodhi.dark {
+  --page-gradient-mid: var(--blue-950);
+}
+.theme-sustain.dark {
+  --page-gradient-mid: var(--indigo-950);
+}

package/dist/styles/theme.css

@@ -1,29 +1,30 @@
 /* ============================================================
-   @psnext/design-system — Tailwind v4 theme bridge
-   Maps design-system token CSS vars to Tailwind utility names so
-   semantic utilities (bg-primary, text-muted-foreground, ring-ring,
-   border-input, …) resolve to our tokens and react to theme/brand.
+   @psnext/design-system — Tailwind v4 theme bridge.
 
-   Usage in a consuming app (or Storybook):
-     @import "tailwindcss";
-     @import "@psnext/design-system/styles";        // token vars
-     @import "@psnext/design-system/styles/theme";   // this bridge
-     @source "../node_modules/@psnext/design-system"; // scan DS classes
+   Maps design-system vars to Tailwind utility namespaces so
+   semantic utilities (bg-primary, text-muted-foreground,
+   border-border, rounded-lg, shadow-md, …) resolve to our tokens
+   and react to light/dark + brand switching.
 
-   `inline` is required because the values reference other CSS vars
-   that are reassigned at runtime by theme/brand switching.
+   `inline` is required: the values reference other CSS vars that
+   are reassigned at runtime by .dark / .theme-* selectors.
+
+   Imported by a consuming app AFTER `@import "tailwindcss"` and the
+   token/semantic vars (see styles/index.css).
    ============================================================ */
 
+/* Class-based dark mode (.dark) instead of OS prefers-color-scheme, so the
+   `.dark` selector our mode tokens use also drives `dark:` utilities. */
+@custom-variant dark (&:where(.dark, .dark *));
+
 @theme inline {
-  /* ── Surfaces ─────────────────────────────────────────── */
+  /* ── Semantic colors (→ bg-*, text-*, border-*, ring-*) ── */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
-
-  /* ── Interactive ──────────────────────────────────────── */
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
   --color-secondary: var(--secondary);
@@ -32,17 +33,15 @@
   --color-muted-foreground: var(--muted-foreground);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
-
-  /* ── States ───────────────────────────────────────────── */
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
-
-  /* ── UI structure ─────────────────────────────────────── */
   --color-border: var(--border);
   --color-input: var(--input);
+  --color-switch-background: var(--switch-background);
+  --color-input-background: var(--input-background);
   --color-ring: var(--ring);
 
-  /* ── Sidebar / navigation ─────────────────────────────── */
+  /* ── Sidebar ──────────────────────────────────────────── */
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
@@ -52,14 +51,33 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  /* ── Radius (derived from --radius token) ─────────────── */
+  /* ── Charts ───────────────────────────────────────────── */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* ── Radius (→ rounded-* utilities) ───────────────────── */
+  --radius-xs: var(--rounded-xs);
   --radius-sm: var(--rounded-sm);
   --radius-md: var(--rounded-md);
   --radius-lg: var(--rounded-lg);
   --radius-xl: var(--rounded-xl);
+  --radius-2xl: var(--rounded-2xl);
+  --radius-3xl: var(--rounded-3xl);
+
+  /* ── Shadows (→ shadow-* utilities) ───────────────────── */
+  --shadow-2xs: var(--shadow-2xs);
+  --shadow-xs: var(--shadow-xs);
+  --shadow-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-xl: var(--shadow-xl);
+  --shadow-2xl: var(--shadow-2xl);
 
-  /* ── Animations (generate animate-* utilities; keyframes in global.css) ── */
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
-  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
+  /* ── Font families (→ font-sans / font-heading / font-mono) ── */
+  --font-sans: var(--font-definitions-font-family-body);
+  --font-heading: var(--font-definitions-font-family-headings);
+  --font-mono: var(--font-definitions-font-family-monospace);
 }

package/dist/styles/tokens/alpha.css

@@ -0,0 +1,39 @@
+/**
+ * GENERATED by Style Dictionary (style-dictionary.config.mjs) — do not edit by hand.
+ * Re-run `pnpm tokens:css` after re-exporting tokens from Figma.
+ */
+
+:root {
+  --white-alpha-0: rgb(255 255 255 / 0);
+  --white-alpha-001: rgb(255 255 255 / 0.0001);
+  --white-alpha-333: rgb(255 255 255 / 0.0333);
+  --white-alpha-5: rgb(255 255 255 / 0.05);
+  --white-alpha-10: rgb(255 255 255 / 0.1);
+  --white-alpha-15: rgb(255 255 255 / 0.15);
+  --white-alpha-20: rgb(255 255 255 / 0.2);
+  --white-alpha-30: rgb(255 255 255 / 0.3);
+  --white-alpha-40: rgb(255 255 255 / 0.4);
+  --white-alpha-50: rgb(255 255 255 / 0.5);
+  --white-alpha-60: rgb(255 255 255 / 0.6);
+  --white-alpha-70: rgb(255 255 255 / 0.7);
+  --white-alpha-80: rgb(255 255 255 / 0.8);
+  --white-alpha-90: rgb(255 255 255 / 0.9);
+  --white-alpha-95: rgb(255 255 255 / 0.95);
+  --white-alpha-100: #ffffff;
+  --black-alpha-0: rgb(31 40 50 / 0);
+  --black-alpha-001: rgb(31 40 50 / 0.0001);
+  --black-alpha-333: rgb(31 40 50 / 0.0333);
+  --black-alpha-5: rgb(31 40 50 / 0.05);
+  --black-alpha-10: rgb(31 40 50 / 0.1);
+  --black-alpha-15: rgb(31 40 50 / 0.15);
+  --black-alpha-20: rgb(31 40 50 / 0.2);
+  --black-alpha-30: rgb(31 40 50 / 0.3);
+  --black-alpha-40: rgb(31 40 50 / 0.4);
+  --black-alpha-50: rgb(31 40 50 / 0.5);
+  --black-alpha-60: rgb(31 40 50 / 0.6);
+  --black-alpha-70: rgb(31 40 50 / 0.7);
+  --black-alpha-80: rgb(31 40 50 / 0.8);
+  --black-alpha-90: rgb(31 40 50 / 0.9);
+  --black-alpha-95: rgb(31 40 50 / 0.95);
+  --black-alpha-100: #1f2832;
+}

package/dist/styles/tokens/border-radius.css

@@ -0,0 +1,17 @@
+/**
+ * GENERATED by Style Dictionary (style-dictionary.config.mjs) — do not edit by hand.
+ * Re-run `pnpm tokens:css` after re-exporting tokens from Figma.
+ */
+
+:root {
+  --rounded-none: 0;
+  --rounded-xs: 2px;
+  --rounded-sm: 4px;
+  --rounded-md: 6px;
+  --rounded-lg: 8px;
+  --radius: 10px;
+  --rounded-xl: 12px;
+  --rounded-2xl: 16px;
+  --rounded-3xl: 24px;
+  --rounded-full: 9999px;
+}

package/dist/styles/tokens/chart-colors-dark.css

@@ -0,0 +1,18 @@
+/**
+ * GENERATED by Style Dictionary (style-dictionary.config.mjs) — do not edit by hand.
+ * Re-run `pnpm tokens:css` after re-exporting tokens from Figma.
+ */
+
+.dark {
+  --categorical-chart-1: #1447e6;
+  --categorical-chart-2: #00bc7d;
+  --categorical-chart-3: #fd9a00;
+  --categorical-chart-4: #ad46ff;
+  --categorical-chart-5: #ff2056;
+  --sentiment-positive: #00bc7d;
+  --sentiment-negative: #ff2056;
+  --shades-fill: rgb(71 93 117 / 0.7);
+  --shades-stroke: #8ec5ff;
+  --shades-fill-2: rgb(31 65 118 / 0.7);
+  --shades-stroke-2: #3f8dff;
+}

package/dist/styles/tokens/chart-colors-light.css

@@ -0,0 +1,18 @@
+/**
+ * GENERATED by Style Dictionary (style-dictionary.config.mjs) — do not edit by hand.
+ * Re-run `pnpm tokens:css` after re-exporting tokens from Figma.
+ */
+
+:root {
+  --categorical-chart-1: #f54a00;
+  --categorical-chart-2: #009689;
+  --categorical-chart-3: #104e64;
+  --categorical-chart-4: #ffb900;
+  --categorical-chart-5: #fe9a00;
+  --sentiment-positive: #009689;
+  --sentiment-negative: #f54a00;
+  --shades-fill: rgb(191 222 255 / 0.7);
+  --shades-stroke: #8ec5ff;
+  --shades-fill-2: rgb(170 204 255 / 0.7);
+  --shades-stroke-2: #3f8dff;
+}