@astralform/ui 0.0.0-stage → 0.3.7-next.0

package/src/styles/fonts.css

@@ -0,0 +1,25 @@
+/* ==============================================
+   Self-hosted brand fonts — Outfit + Plus Jakarta Sans
+   ==============================================
+
+   Import this INSTEAD of the Google Fonts CDN `@import`. Font files are
+   bundled from the @fontsource packages (deps of this package), so there's
+   no third-party request, no render-blocking CDN round-trip, and no CSP
+   allowance for fonts.googleapis.com / fonts.gstatic.com.
+
+   Usage (consumer index.css):
+     @import "@astralform/ui/styles/fonts.css";
+   ============================================== */
+
+/* Outfit — headings (--font-heading). Weights 400–800. */
+@import "@fontsource/outfit/400.css";
+@import "@fontsource/outfit/500.css";
+@import "@fontsource/outfit/600.css";
+@import "@fontsource/outfit/700.css";
+@import "@fontsource/outfit/800.css";
+
+/* Plus Jakarta Sans — body (--font-body). Weights 400–700. */
+@import "@fontsource/plus-jakarta-sans/400.css";
+@import "@fontsource/plus-jakarta-sans/500.css";
+@import "@fontsource/plus-jakarta-sans/600.css";
+@import "@fontsource/plus-jakarta-sans/700.css";

package/src/styles/theme-default.css

@@ -0,0 +1,164 @@
+/* ==============================================
+   Theme: Astralform Dashboard (default) — orange on near-black
+   ==============================================
+
+   The BRAND layer. Everything here is product-specific: font families,
+   the color source scales, and the @theme inline color mappings that
+   Tailwind turns into utilities (bg-accent, text-text-primary, ...).
+
+   This file is the canonical hand-authored artifact for the dashboard
+   brand and the reference output of `npm run design:gen` (which derives
+   the same values from DESIGN.md). To re-skin a product, ship a sibling
+   theme file (see themes/chat.DESIGN.md → theme-chat.css) instead of
+   editing components.
+
+   Pairs with styles/base.css (brand-agnostic structure + utilities).
+   ============================================== */
+
+:root {
+  /* ---- Font Families ---- */
+  --font-heading: 'Outfit', system-ui, sans-serif;
+  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
+
+  /* ---- Color Source Scales (7-tier) ----
+     hover → lightest (hover text)        bold  → filled controls
+     default → primary (text/icons)       dim   → borders
+     muted → focus rings / dots           subtle → badge/alert bg
+                                          surface → deep bg panels      */
+
+  /* Accent (orange) */
+  --_accent-hover:   #fdba74;  /* orange-300 */
+  --_accent:         #fb923c;  /* orange-400 */
+  --_accent-muted:   #f97316;  /* orange-500 */
+  --_accent-bold:    #ea580c;  /* orange-600 */
+  --_accent-dim:     #c2410c;  /* orange-700 */
+  --_accent-subtle:  #7c2d12;  /* orange-900 */
+  --_accent-surface: #431407;  /* orange-950 */
+
+  /* Success (emerald) */
+  --_success-hover:   #6ee7b7;
+  --_success:         #34d399;
+  --_success-muted:   #10b981;
+  --_success-bold:    #059669;
+  --_success-dim:     #047857;
+  --_success-subtle:  #064e3b;
+  --_success-surface: #022c22;
+
+  /* Warning (amber) */
+  --_warning-hover:   #fcd34d;
+  --_warning:         #fbbf24;
+  --_warning-muted:   #f59e0b;
+  --_warning-bold:    #d97706;
+  --_warning-dim:     #b45309;
+  --_warning-subtle:  #78350f;
+  --_warning-surface: #451a03;
+
+  /* Danger (red) */
+  --_danger-hover:   #fca5a5;
+  --_danger:         #f87171;
+  --_danger-muted:   #ef4444;
+  --_danger-bold:    #dc2626;
+  --_danger-dim:     #b91c1c;
+  --_danger-subtle:  #7f1d1d;
+  --_danger-surface: #450a0a;
+
+  /* Info (blue) */
+  --_info-hover:   #93c5fd;
+  --_info:         #60a5fa;
+  --_info-muted:   #3b82f6;
+  --_info-bold:    #2563eb;
+  --_info-dim:     #1d4ed8;
+  --_info-subtle:  #1e3a5f;
+  --_info-surface: #0c1929;
+
+  /* Sonner toast colors */
+  --_toast-success-bg:     #052e16;
+  --_toast-success-border: #14532d;
+  --_toast-success-text:   #bbf7d0;
+  --_toast-error-bg:       var(--_danger-surface);
+  --_toast-error-border:   var(--_danger-subtle);
+  --_toast-error-text:     #fecaca;
+  --_toast-warning-bg:     #291800;
+  --_toast-warning-border: var(--_warning-subtle);
+  --_toast-warning-text:   #fde68a;
+  --_toast-info-bg:        var(--_info-surface);
+  --_toast-info-border:    var(--_info-subtle);
+  --_toast-info-text:      #bfdbfe;
+}
+
+@theme inline {
+  /* Surfaces */
+  --color-surface-base: #000000;
+  --color-surface-primary: #09090b;
+  --color-surface-secondary: #18181b;
+  --color-surface-tertiary: #27272a;
+  --color-surface-inset: #3f3f46;
+  --color-surface-overlay: rgba(0, 0, 0, 0.8);
+
+  /* Borders */
+  --color-border-primary: #27272a;
+  --color-border-secondary: #3f3f46;
+  --color-border-focus: #52525b;
+
+  /* Text */
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #d4d4d8;
+  --color-text-tertiary: #a1a1aa;
+  --color-text-muted: #71717a;
+  --color-text-disabled: #52525b;
+  --color-text-inverse: #000000;
+
+  /* Status */
+  --color-status-error: #f87171;
+
+  /* Buttons */
+  --color-btn-primary-bg: #ffffff;
+  --color-btn-primary-hover: #f4f4f5;
+  --color-btn-danger-bg: #dc2626;
+  --color-btn-danger-hover: #b91c1c;
+
+  /* Accent scale → source vars */
+  --color-accent-hover:   var(--_accent-hover);
+  --color-accent:         var(--_accent);
+  --color-accent-muted:   var(--_accent-muted);
+  --color-accent-bold:    var(--_accent-bold);
+  --color-accent-dim:     var(--_accent-dim);
+  --color-accent-subtle:  var(--_accent-subtle);
+  --color-accent-surface: var(--_accent-surface);
+
+  /* Success scale */
+  --color-success-hover:   var(--_success-hover);
+  --color-success:         var(--_success);
+  --color-success-muted:   var(--_success-muted);
+  --color-success-bold:    var(--_success-bold);
+  --color-success-dim:     var(--_success-dim);
+  --color-success-subtle:  var(--_success-subtle);
+  --color-success-surface: var(--_success-surface);
+
+  /* Warning scale */
+  --color-warning-hover:   var(--_warning-hover);
+  --color-warning:         var(--_warning);
+  --color-warning-muted:   var(--_warning-muted);
+  --color-warning-bold:    var(--_warning-bold);
+  --color-warning-dim:     var(--_warning-dim);
+  --color-warning-subtle:  var(--_warning-subtle);
+  --color-warning-surface: var(--_warning-surface);
+
+  /* Danger scale */
+  --color-danger-hover:   var(--_danger-hover);
+  --color-danger:         var(--_danger);
+  --color-danger-muted:   var(--_danger-muted);
+  --color-danger-bold:    var(--_danger-bold);
+  --color-danger-dim:     var(--_danger-dim);
+  --color-danger-subtle:  var(--_danger-subtle);
+  --color-danger-surface: var(--_danger-surface);
+
+  /* Info scale */
+  --color-info-hover:   var(--_info-hover);
+  --color-info:         var(--_info);
+  --color-info-muted:   var(--_info-muted);
+  --color-info-bold:    var(--_info-bold);
+  --color-info-dim:     var(--_info-dim);
+  --color-info-subtle:  var(--_info-subtle);
+  --color-info-surface: var(--_info-surface);
+}

package/src/styles/theme-default.generated.css

@@ -0,0 +1,79 @@
+/* AUTO-GENERATED from DESIGN.md via `npm run design:gen`.
+   Reference only — the hand-authored theme-default.css is the shipped artifact. */
+
+@theme {
+  --color-primary: #fb923c;
+  --color-accent-hover: #fdba74;
+  --color-accent: #fb923c;
+  --color-accent-muted: #f97316;
+  --color-accent-bold: #ea580c;
+  --color-accent-dim: #c2410c;
+  --color-accent-subtle: #7c2d12;
+  --color-accent-surface: #431407;
+  --color-surface-base: #000000;
+  --color-surface-primary: #09090b;
+  --color-surface-secondary: #18181b;
+  --color-surface-tertiary: #27272a;
+  --color-surface-inset: #3f3f46;
+  --color-border-primary: #27272a;
+  --color-border-secondary: #3f3f46;
+  --color-border-focus: #52525b;
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #d4d4d8;
+  --color-text-tertiary: #a1a1aa;
+  --color-text-muted: #71717a;
+  --color-text-disabled: #52525b;
+  --color-text-inverse: #000000;
+  --color-btn-primary-bg: #ffffff;
+  --color-btn-primary-hover: #f4f4f5;
+  --color-btn-danger-bg: #dc2626;
+  --color-btn-danger-hover: #b91c1c;
+  --color-success: #34d399;
+  --color-success-subtle: #064e3b;
+  --color-success-dim: #047857;
+  --color-warning: #fbbf24;
+  --color-warning-subtle: #78350f;
+  --color-warning-dim: #b45309;
+  --color-danger: #f87171;
+  --color-danger-subtle: #7f1d1d;
+  --color-danger-dim: #b91c1c;
+  --color-info: #60a5fa;
+  --color-info-subtle: #1e3a5f;
+  --color-info-dim: #1d4ed8;
+  --font-page-title: "Outfit";
+  --font-section-heading: "Outfit";
+  --font-card-title: "Outfit";
+  --font-body: "Plus Jakarta Sans";
+  --font-label: "Plus Jakarta Sans";
+  --font-caption: "Plus Jakarta Sans";
+  --font-overline: "Plus Jakarta Sans";
+  --text-page-title: 24px;
+  --text-section-heading: 18px;
+  --text-card-title: 18px;
+  --text-body: 14px;
+  --text-label: 14px;
+  --text-caption: 12px;
+  --text-overline: 12px;
+  --tracking-card-title: -0.025em;
+  --tracking-overline: 0.05em;
+  --font-weight-page-title: 700;
+  --font-weight-section-heading: 600;
+  --font-weight-card-title: 600;
+  --font-weight-body: 400;
+  --font-weight-label: 500;
+  --font-weight-caption: 400;
+  --font-weight-overline: 600;
+  --radius-input: 8px;
+  --radius-button: 8px;
+  --radius-alert: 8px;
+  --radius-modal: 12px;
+  --radius-card: 20px;
+  --radius-badge: 9999px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-xxl: 48px;
+}
+

package/src/styles/tokens/_foundations.css

@@ -0,0 +1,28 @@
+/* ==============================================
+   Layer 1: Foundation Primitives — brand-agnostic
+   ==============================================
+
+   Raw, non-color primitive scales shared by every Astralform
+   product regardless of brand. Color primitives and font families
+   are brand-specific and live in the active theme file
+   (e.g. theme-default.css), NOT here.
+
+   Never reference these directly in components — use the semantic
+   tokens (_semantics.css) or Tailwind utilities instead.
+   ============================================== */
+
+:root {
+  /* ---- Durations ---- */
+  --duration-fast: 100ms;
+  --duration-normal: 200ms;
+  --duration-moderate: 300ms;
+  --duration-slow: 500ms;
+
+  /* ---- Easings ---- */
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
+}

package/src/styles/tokens/_semantics.css

@@ -0,0 +1,72 @@
+/* ==============================================
+   Layer 2: Semantic Structure Tokens — brand-agnostic
+   ==============================================
+
+   Purpose-mapped aliases for STRUCTURE (shadows, motion, focus,
+   typography rhythm). These describe HOW the system behaves, not
+   WHICH brand colors it uses — so they are shared across products.
+
+   Typography roles reference --font-heading / --font-body, which are
+   supplied by the active theme file. Colors referenced here resolve
+   at runtime from the theme.
+   ============================================== */
+
+:root {
+  /* ---- Component Shadows (built on Tailwind v4's --shadow-* scale) ---- */
+  --shadow-card: var(--shadow-sm);
+  --shadow-modal: var(--shadow-xl);
+  --shadow-dropdown: var(--shadow-lg);
+  --shadow-input: var(--shadow-xs);
+  --shadow-button-hover: var(--shadow-md);
+
+  /* ---- Motion Roles ---- */
+  --duration-hover: var(--duration-normal);   /* 200ms */
+  --duration-enter: var(--duration-moderate); /* 300ms */
+
+  /* ---- Focus Ring ---- */
+  --focus-ring-width: 2px;
+  --focus-ring-color: rgba(255, 255, 255, 0.3);
+  --focus-ring-offset: 2px;
+
+  /* ---- Typography Roles ---- */
+
+  /* Page Title (h1) */
+  --type-page-title-size: 1.5rem;       /* 24px */
+  --type-page-title-weight: 700;
+  --type-page-title-leading: 1.25;
+  --type-page-title-family: var(--font-heading);
+
+  /* Section Heading */
+  --type-section-heading-size: 1.125rem; /* 18px */
+  --type-section-heading-weight: 600;
+  --type-section-heading-leading: 1.25;
+  --type-section-heading-family: var(--font-heading);
+
+  /* Card Title */
+  --type-card-title-size: 1.125rem;      /* 18px */
+  --type-card-title-weight: 600;
+  --type-card-title-leading: 1;
+  --type-card-title-tracking: -0.025em;
+  --type-card-title-family: var(--font-heading);
+
+  /* Body */
+  --type-body-size: 0.875rem;            /* 14px */
+  --type-body-weight: 400;
+  --type-body-leading: 1.5;
+
+  /* Label */
+  --type-label-size: 0.875rem;           /* 14px */
+  --type-label-weight: 500;
+  --type-label-leading: 1.5;
+
+  /* Caption */
+  --type-caption-size: 0.75rem;          /* 12px */
+  --type-caption-weight: 400;
+  --type-caption-leading: 1.5;
+
+  /* Overline */
+  --type-overline-size: 0.75rem;         /* 12px */
+  --type-overline-weight: 600;
+  --type-overline-tracking: 0.05em;
+  --type-overline-transform: uppercase;
+}

package/themes/chat.DESIGN.md

@@ -0,0 +1,197 @@
+---
+version: alpha
+name: AstralChat
+description: Conversational, focused chat surface — indigo accent on a warm-dark base. Same token contract as the dashboard, a different brand.
+
+colors:
+  # ---- Brand accent (indigo) ----
+  primary: "#818cf8"
+  accent-hover: "#a5b4fc"
+  accent: "#818cf8"
+  accent-muted: "#6366f1"
+  accent-bold: "#4f46e5"
+  accent-dim: "#4338ca"
+  accent-subtle: "#3730a3"
+  accent-surface: "#1e1b4b"
+
+  # ---- Surfaces (warm-dark brand base) ----
+  surface-base: "#272737"
+  surface-primary: "#18181b"
+  surface-secondary: "#27272a"
+  surface-tertiary: "#3f3f46"
+  surface-inset: "#52525b"
+
+  # ---- Borders ----
+  border-primary: "#27272a"
+  border-secondary: "#3f3f46"
+  border-focus: "#52525b"
+
+  # ---- Text ----
+  text-primary: "#fafafa"
+  text-secondary: "#d4d4d8"
+  text-tertiary: "#a1a1aa"
+  text-muted: "#71717a"
+  text-disabled: "#52525b"
+  text-inverse: "#09090b"
+
+  # ---- Buttons ----
+  btn-primary-bg: "#fafafa"
+  btn-primary-hover: "#e4e4e7"
+  btn-danger-bg: "#dc2626"
+  btn-danger-hover: "#b91c1c"
+
+  # ---- Status (semantic — sky-tinted info to match chat) ----
+  success: "#34d399"
+  success-subtle: "#064e3b"
+  success-dim: "#065f46"
+  warning: "#fbbf24"
+  warning-subtle: "#78350f"
+  warning-dim: "#92400e"
+  danger: "#f87171"
+  danger-subtle: "#7f1d1d"
+  danger-dim: "#991b1b"
+  info: "#38bdf8"
+  info-subtle: "#0c4a6e"
+  info-dim: "#0369a1"
+
+typography:
+  page-title:
+    fontFamily: Outfit
+    fontSize: 24px
+    fontWeight: 700
+    lineHeight: 1.25
+  section-heading:
+    fontFamily: Outfit
+    fontSize: 18px
+    fontWeight: 600
+    lineHeight: 1.25
+  card-title:
+    fontFamily: Outfit
+    fontSize: 18px
+    fontWeight: 600
+    lineHeight: 1
+    letterSpacing: -0.025em
+  body:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 14px
+    fontWeight: 400
+    lineHeight: 1.5
+  label:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 14px
+    fontWeight: 500
+    lineHeight: 1.5
+  caption:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 12px
+    fontWeight: 400
+    lineHeight: 1.5
+  overline:
+    fontFamily: Plus Jakarta Sans
+    fontSize: 12px
+    fontWeight: 600
+    letterSpacing: 0.05em
+
+spacing:
+  xs: 4px
+  sm: 8px
+  md: 16px
+  lg: 24px
+  xl: 32px
+  xxl: 48px
+
+rounded:
+  input: 8px
+  button: 8px
+  alert: 8px
+  modal: 12px
+  card: 20px
+  badge: 9999px
+
+components:
+  button-primary:
+    backgroundColor: "{colors.btn-primary-bg}"
+    textColor: "{colors.text-inverse}"
+    rounded: "{rounded.button}"
+  button-danger:
+    backgroundColor: "{colors.btn-danger-bg}"
+    textColor: "{colors.text-primary}"
+    rounded: "{rounded.button}"
+  card:
+    backgroundColor: "{colors.surface-primary}"
+    rounded: "{rounded.card}"
+  badge-accent:
+    backgroundColor: "{colors.accent-subtle}"
+    textColor: "{colors.accent-hover}"
+    rounded: "{rounded.badge}"
+  input:
+    backgroundColor: "{colors.surface-secondary}"
+    textColor: "{colors.text-primary}"
+    rounded: "{rounded.input}"
+---
+
+## Overview
+
+AstralChat is the **conversational front door** to Astralform. It shares the dashboard's
+structure, rhythm, and component set, but wears a **different brand**: a cooler **indigo
+accent** on a **warm-dark base** (`#272737`) rather than the dashboard's pure black. The
+feel is approachable and focused — a place to talk to an agent, not a control panel.
+
+This file exists to prove the contract: it changes **only token values**. The same
+`@astralform/ui` components, the same `base.css` structure, render as AstralChat purely
+because this DESIGN.md swaps the palette. No component is forked.
+
+## Colors
+
+Indigo replaces orange as the single system tint — links, the send affordance, active
+threads, focus rings. The surface stack starts from a warm near-black (`#272737`) so the
+chat canvas feels softer than the dashboard's instrument-black, then steps up through the
+same zinc greys for bubbles, inputs, and insets.
+
+Status hues stay semantic and largely shared (emerald / amber / red), with **info shifted
+to sky** (`#38bdf8`) to sit comfortably beside the indigo accent rather than competing
+with it.
+
+## Typography
+
+Identical role system to the dashboard — **Outfit** for titles, **Plus Jakarta Sans** for
+body — because legibility and hierarchy are product-wide concerns, not brand ones. A
+shared type scale keeps a message, a card title, and a label reading the same in both
+products.
+
+## Layout
+
+A **conversation-centric** layout: a thread list rail, a message canvas, and a composer
+docked at the bottom. It reuses the dashboard's `page-content` padding rhythm and 4px
+spacing scale so shared components (cards, inputs, badges) drop in without bespoke gutters.
+
+## Elevation & Depth
+
+**Flat-first**, like the dashboard. Message bubbles and cards separate via the surface
+scale rather than shadows; the composer and any popovers float with the role-named
+`shadow-dropdown` / `shadow-modal` only when they must sit above the canvas.
+
+## Shapes
+
+The same radius progression (input/button 8px → modal 12px → card 20px → badge pill).
+Chat bubbles inherit the card-scale softness, reinforcing that a message is a unit of
+grouping in the same way a card is on the dashboard.
+
+## Components
+
+Every atom is the shared `@astralform/ui` component, unchanged. The **accent-driven**
+pieces — toggles, the active-thread highlight, focus rings, primary affordances — simply
+resolve indigo here instead of orange. Badges keep their semantic status colors exactly
+as on the dashboard.
+
+## Do's and Don'ts
+
+**Do**
+- Keep indigo as the single interactive tint; let the warm base carry the calm.
+- Reuse the shared components and `base.css` verbatim — brand lives only in this file.
+- Keep status colors semantic and consistent with the dashboard.
+
+**Don't**
+- Don't fork a component to "make it chat-flavored" — change a token here instead.
+- Don't reintroduce pure black surfaces; the warm `#272737` base is part of the brand.
+- Don't let info-sky and accent-indigo blur together — keep info for genuine information.