@usetheo/ui 0.1.0-next.0

package/dist/styles.css

@@ -0,0 +1,88 @@
+@import "./fonts.css";
+@import "./tokens.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    border-color: hsl(var(--border));
+  }
+
+  html {
+    font-family: var(--font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    background-color: hsl(var(--background));
+    color: hsl(var(--foreground));
+    /* OpenType ligatures globally — Geist's "liga" feature is structural
+     * and gives the Vercel-tight glyph combinations. */
+    font-feature-settings: "liga" 1, "ss01" 1;
+  }
+
+  /* Display headings inherit theme display font (Geist by default).
+   * Per-size tracking is set in tailwind.config.ts; this is the safety net. */
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-family: var(--font-display);
+    font-weight: 600;
+  }
+
+  /* Code surfaces: use the mono token + tabular numerals so columns of
+   * numbers line up in tables/logs/metrics. */
+  code,
+  pre,
+  kbd,
+  samp {
+    font-family: var(--font-mono);
+    font-feature-settings: "tnum" 1, "liga" 1;
+  }
+
+  /* Focus ring — violet (signature) */
+  :focus-visible {
+    outline: 2px solid hsl(var(--ring));
+    outline-offset: 2px;
+  }
+
+  /* Selection — soft violet */
+  ::selection {
+    background-color: hsl(var(--primary) / 0.25);
+    color: hsl(var(--foreground));
+  }
+
+  /* Native scrollbar fallback (Violet Forge).
+   * Used for native browser scroll on elements that don't wrap in <ScrollArea>.
+   * Components that DO use <ScrollArea> hide the native scrollbar via Radix.
+   */
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--primary) / 0.25);
+    border: 2px solid transparent;
+    background-clip: content-box;
+    border-radius: 9999px;
+    transition: background-color var(--duration-fast) var(--ease-out-soft);
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: hsl(var(--primary) / 0.5);
+  }
+  *::-webkit-scrollbar-thumb:active {
+    background-color: hsl(var(--primary) / 0.75);
+  }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--primary) / 0.3) transparent;
+  }
+}

package/dist/tokens.css

@@ -0,0 +1,230 @@
+/* Theo UI — Design System "Violet Forge" tokens.
+ *
+ * Tokens normativos. Não edite valores aqui sem revisão do design system.
+ * Referência: docs/design-system.md
+ *
+ * Estratégia:
+ *   - CSS custom properties para todas as cores, scales e durations.
+ *   - Default é light. Dark é ativado via [data-theme="dark"] ou .dark.
+ *   - HSL split (h s l) em vez de hex permite alpha via color-mix() ou hsl(var(--x) / .5).
+ *
+ * Roxo Theo: #7C3AED  →  hsl(262 83% 58%)
+ * Burnt sienna:  #C96442  →  hsl(15 54% 53%)
+ */
+
+/* `:root` and `[data-theme="dark"]` declarations are intentionally NOT wrapped
+ * in `@layer base` so they apply at the document level regardless of whether
+ * the consumer's CSS pipeline runs Tailwind's preflight. The texture utilities
+ * below remain in `@layer utilities` because that layer affects ordering only,
+ * not the cascade root.
+ */
+:root {
+  /* Base palette ------------------------------------------------------- *
+     * Neutrals are 100% desaturated (Vercel-style). Color comes from the
+     * primary (violet) + accent (burnt sienna) tokens below — never from
+     * surface tints.
+     */
+  --background: 0 0% 100%; /* #FFFFFF */
+  --foreground: 0 0% 4%; /* #0A0A0A */
+
+  --card: 0 0% 100%; /* #FFFFFF */
+  --card-foreground: 0 0% 4%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 4%;
+
+  /* Primary — Theo violet (equity) ------------------------------------- */
+  --primary: 262 83% 58%; /* #7C3AED */
+  --primary-deep: 263 70% 42%; /* #5B21B6 — pressed */
+  --primary-glow: 263 90% 76%; /* #A78BFA — hover halo */
+  --primary-foreground: 0 0% 100%;
+
+  /* Secondary — neutral muted ----------------------------------------- */
+  --secondary: 0 0% 96%; /* #F5F5F5 */
+  --secondary-foreground: 0 0% 4%;
+
+  /* Accent — burnt sienna --------------------------------------------- */
+  --accent: 15 54% 53%; /* #C96442 */
+  --accent-deep: 15 55% 40%; /* #9C4A2E */
+  --accent-foreground: 0 0% 100%;
+
+  /* Muted ------------------------------------------------------------- */
+  --muted: 0 0% 96%;
+  --muted-foreground: 0 0% 45%; /* #737373 */
+
+  /* Surfaces, borders, inputs ----------------------------------------- */
+  --border: 0 0% 91%; /* #E8E8E8 — Vercel-style hairline */
+  --input: 0 0% 91%;
+  --ring: 262 83% 58%; /* matches primary */
+
+  /* Semantics --------------------------------------------------------- */
+  --success: 142 71% 36%; /* #16A34A */
+  --success-foreground: 0 0% 100%;
+  --warning: 33 92% 44%; /* #D97706 */
+  --warning-foreground: 0 0% 100%;
+  --destructive: 0 72% 51%; /* #DC2626 */
+  --destructive-foreground: 0 0% 100%;
+  --info: 217 91% 60%; /* #3B82F6 */
+  --info-foreground: 0 0% 100%;
+
+  /* Radii ------------------------------------------------------------- */
+  --radius-none: 0px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+  --radius-2xl: 20px;
+  --radius-full: 9999px;
+  /* shadcn compat */
+  --radius: 14px;
+
+  /* Spacing scale (4px base) ------------------------------------------ */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-10: 40px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-20: 80px;
+  --space-24: 96px;
+  --space-32: 128px;
+
+  /* Elevation — theme-aware (uses --foreground for shadow ink,
+     * --primary for the signature glow, so swapping themes recolors them).
+     */
+  --shadow-sm: 0 1px 2px 0 hsl(var(--foreground) / 0.06);
+  --shadow-md: 0 2px 8px -2px hsl(var(--foreground) / 0.08), 0 1px 3px hsl(var(--foreground) / 0.06);
+  --shadow-lg: 0 12px 32px -8px hsl(var(--foreground) / 0.12), 0 4px 12px
+    hsl(var(--foreground) / 0.08);
+  --shadow-glow: 0 0 24px hsl(var(--primary) / 0.25);
+  --shadow-glow-strong: 0 0 32px hsl(var(--primary) / 0.4);
+
+  /* Motion ------------------------------------------------------------ */
+  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --ease-snap: cubic-bezier(0.85, 0, 0.15, 1);
+  --duration-fast: 120ms;
+  --duration-base: 200ms;
+  --duration-slow: 360ms;
+  --stagger: 60ms;
+
+  /* Typography (Geist family — Vercel-inspired Violet Forge) ---------- */
+  --font-display: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+/* Dark mode — dominante --------------------------------------------- *
+   * Vercel-aligned grayscale: pure neutrals (0% saturation) for every
+   * surface and text layer. Color only in primary (violet), accent (burnt
+   * sienna), and semantic tokens (success/warning/destructive/info).
+   *
+   * Activated exclusively via the `.dark` class on `<html>` (set by
+   * `ThemeProvider`, `ThemeScript`, or consumers manually). The previous
+   * `[data-theme="dark"]` companion selector was dead — `data-theme` holds
+   * the theme NAME, never the literal `"dark"`.
+   */
+.dark {
+  --background: 0 0% 4%; /* #0A0A0A */
+  --foreground: 0 0% 96%; /* #F5F5F5 */
+
+  --card: 0 0% 7%; /* #121212 */
+  --card-foreground: 0 0% 96%;
+
+  --popover: 0 0% 9%; /* #171717 */
+  --popover-foreground: 0 0% 96%;
+
+  --primary: 262 83% 58%;
+  --primary-deep: 263 70% 42%;
+  --primary-glow: 263 90% 76%;
+  --primary-foreground: 0 0% 100%;
+
+  --secondary: 0 0% 11%; /* #1C1C1C */
+  --secondary-foreground: 0 0% 96%;
+
+  --accent: 15 54% 53%;
+  --accent-deep: 15 55% 40%;
+  --accent-foreground: 0 0% 100%;
+
+  --muted: 0 0% 11%;
+  --muted-foreground: 0 0% 60%; /* #999 — Vercel gray-500 */
+
+  --border: 0 0% 16%; /* #292929 */
+  --input: 0 0% 11%;
+  --ring: 262 83% 58%;
+
+  --success: 152 79% 52%; /* #22E58C */
+  --success-foreground: 0 0% 4%;
+  --warning: 38 92% 50%; /* #F59E0B */
+  --warning-foreground: 0 0% 4%;
+  --destructive: 350 100% 65%; /* #FF4F6D */
+  --destructive-foreground: 0 0% 4%;
+  --info: 213 100% 70%; /* #5FB3FF */
+  --info-foreground: 0 0% 4%;
+
+  /* In dark mode, shadows are heavier ink (against the dark surface) and
+     * the glow brightens. Both still derive from theme tokens.
+     */
+  --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.4);
+  --shadow-md: 0 2px 8px -2px hsl(0 0% 0% / 0.5), 0 1px 3px hsl(0 0% 0% / 0.4);
+  --shadow-lg: 0 12px 32px -8px hsl(0 0% 0% / 0.6), 0 4px 12px hsl(0 0% 0% / 0.4);
+  --shadow-glow: 0 0 24px hsl(var(--primary-glow) / 0.4);
+  --shadow-glow-strong: 0 0 36px hsl(var(--primary-glow) / 0.6);
+}
+
+/* Reduced motion — neutralizes durations and transitions for users who
+ * request prefers-reduced-motion: reduce. Components that use animation as
+ * semantic state (e.g. a spinner on a running step) can opt back in with
+ * Tailwind's `motion-safe:` prefix.
+ *
+ * Reference: WCAG 2.3.3 Animation from Interactions (Level AAA).
+ */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-fast: 0ms;
+    --duration-base: 0ms;
+    --duration-slow: 0ms;
+    --stagger: 0ms;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* Texture utilities (signature) ---------------------------------------- */
+@layer utilities {
+  .bg-dotted-violet {
+    background-image: radial-gradient(hsl(var(--primary) / 0.08) 1px, transparent 1px);
+    background-size: 20px 20px;
+  }
+
+  .bg-dotted-violet-strong {
+    background-image: radial-gradient(hsl(var(--primary) / 0.16) 1px, transparent 1px);
+    background-size: 20px 20px;
+  }
+
+  .bg-hero-glow {
+    background-image: radial-gradient(
+      ellipse 60% 50% at 70% 0%,
+      hsl(var(--primary) / 0.18) 0%,
+      transparent 60%
+    );
+  }
+
+  .bg-paper-grain {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.04 0 0 0 0 0.08 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
+  }
+
+  .text-balance {
+    text-wrap: balance;
+  }
+}