@usetheo/ui 0.35.3 → 0.36.0

package/dist/tokens.css

@@ -0,0 +1,315 @@
+/* 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: #A855F7  →  oklch(0.628 0.225 296)  (electric violet — unified 2026-06-09)
+ * 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: oklch(1 0 0); /* #FFFFFF */
+  --foreground: oklch(0.146 0 0); /* #0A0A0A */
+
+  --card: oklch(1 0 0); /* #FFFFFF */
+  --card-foreground: oklch(0.146 0 0);
+
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.146 0 0);
+
+  /* Primary — Theo violet (equity) ------------------------------------- *
+   * Post-T3.1 (ADR-0006): -deep and -glow are derived algorithmically via
+   * OKLCH relative-color syntax. Themes that need a per-token override may
+   * still declare these explicitly — the cascade resolves the override.
+   * `max()`/`min()` clamps protect dark/light themes from L overflow (EC-7).
+   */
+  --primary: oklch(0.628 0.225 296); /* #A855F7 — Theo violet electric (unified 2026-06-09) */
+  --primary-deep: oklch(from var(--primary) max(0.05, calc(l - 0.16)) c h);
+  --primary-glow: oklch(from var(--primary) min(0.95, calc(l + 0.18)) c h);
+  --primary-foreground: oklch(1 0 0);
+
+  /* Secondary — neutral muted ----------------------------------------- */
+  --secondary: oklch(0.97 0 0); /* #F5F5F5 */
+  --secondary-foreground: oklch(0.146 0 0);
+
+  /* Accent — burnt sienna --------------------------------------------- *
+   * T3.1: accent-deep derived. Override path identical to primary.
+   */
+  --accent: oklch(0.621 0.132 39); /* #C96442 */
+  --accent-deep: oklch(from var(--accent) max(0.05, calc(l - 0.13)) c h);
+  --accent-foreground: oklch(1 0 0);
+
+  /* Muted ------------------------------------------------------------- */
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.555 0 0); /* #737373 */
+
+  /* Surfaces, borders, inputs ----------------------------------------- */
+  --border: oklch(0.931 0 0); /* #E8E8E8 — Vercel-style hairline */
+  --input: oklch(0.931 0 0);
+  --ring: oklch(0.628 0.225 296); /* matches primary */
+
+  /* Semantics --------------------------------------------------------- */
+  --success: oklch(0.611 0.161 149.7); /* #16A34A */
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.67 0.154 60.6); /* #D97706 */
+  --warning-foreground: oklch(1 0 0);
+  --destructive: oklch(0.579 0.214 27.2); /* #DC2626 */
+  --destructive-foreground: oklch(1 0 0);
+  --info: oklch(0.626 0.186 259.6); /* #3B82F6 */
+  --info-foreground: oklch(1 0 0);
+
+  /* Status (D4 — operational state group) ----------------------------- *
+   * Separate from semantic group (success/destructive/warning/info, which
+   * are action-result colors). Status describes component liveness:
+   * online (alive), offline (dead), degraded (alive-but-slow), info (flag).
+   * Defaults mirror semantic counterparts; themes override for distinction.
+   */
+  --status-online: oklch(0.611 0.161 149.7);
+  --status-online-foreground: oklch(1 0 0);
+  --status-offline: oklch(0.579 0.214 27.2);
+  --status-offline-foreground: oklch(1 0 0);
+  --status-degraded: oklch(0.67 0.154 60.6);
+  --status-degraded-foreground: oklch(1 0 0);
+  --status-info: oklch(0.626 0.186 259.6);
+  --status-info-foreground: oklch(1 0 0);
+
+  /* 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).
+     * Post-T2.5: tokens are OKLCH; we compose alpha via color-mix(in oklch, ...)
+     * which is perceptually correct AND works with any color-space variable.
+     */
+  --shadow-sm: 0 1px 2px 0 color-mix(in oklch, var(--foreground) 6%, transparent);
+  --shadow-md: 0 2px 8px -2px color-mix(in oklch, var(--foreground) 8%, transparent), 0 1px 3px
+    color-mix(in oklch, var(--foreground) 6%, transparent);
+  --shadow-lg: 0 12px 32px -8px color-mix(in oklch, var(--foreground) 12%, transparent), 0 4px 12px
+    color-mix(in oklch, var(--foreground) 8%, transparent);
+  --shadow-glow: 0 0 24px color-mix(in oklch, var(--primary) 25%, transparent);
+  --shadow-glow-strong: 0 0 32px color-mix(in oklch, var(--primary) 40%, transparent);
+
+  /* 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: oklch(0.146 0 0); /* #0A0A0A */
+  --foreground: oklch(0.97 0 0); /* #F5F5F5 */
+
+  --card: oklch(0.182 0 0); /* #121212 */
+  --card-foreground: oklch(0.97 0 0);
+
+  --popover: oklch(0.204 0 0); /* #171717 */
+  --popover-foreground: oklch(0.97 0 0);
+
+  --primary: oklch(0.628 0.225 296);
+  --primary-deep: oklch(from var(--primary) max(0.05, calc(l - 0.16)) c h);
+  --primary-glow: oklch(from var(--primary) min(0.95, calc(l + 0.18)) c h);
+  --primary-foreground: oklch(1 0 0);
+
+  --secondary: oklch(0.227 0 0); /* #1C1C1C */
+  --secondary-foreground: oklch(0.97 0 0);
+
+  --accent: oklch(0.621 0.132 39);
+  --accent-deep: oklch(from var(--accent) max(0.05, calc(l - 0.13)) c h);
+  --accent-foreground: oklch(1 0 0);
+
+  --muted: oklch(0.227 0 0);
+  --muted-foreground: oklch(0.683 0 0); /* #999 — Vercel gray-500 */
+
+  --border: oklch(0.28 0 0); /* #292929 */
+  --input: oklch(0.227 0 0);
+  --ring: oklch(0.628 0.225 296);
+
+  --success: oklch(0.814 0.192 155.7); /* #22E58C */
+  --success-foreground: oklch(0.146 0 0);
+  --warning: oklch(0.77 0.165 70.6); /* #F59E0B */
+  --warning-foreground: oklch(0.146 0 0);
+  --destructive: oklch(0.677 0.213 15.6); /* #FF4F6D */
+  --destructive-foreground: oklch(0.146 0 0);
+  --info: oklch(0.732 0.142 254.4); /* #5FB3FF */
+  --info-foreground: oklch(0.146 0 0);
+
+  /* Status (D4 — dark mode mirror of light defaults) ------------------ */
+  --status-online: oklch(0.814 0.192 155.7);
+  --status-online-foreground: oklch(0.146 0 0);
+  --status-offline: oklch(0.677 0.213 15.6);
+  --status-offline-foreground: oklch(0.146 0 0);
+  --status-degraded: oklch(0.77 0.165 70.6);
+  --status-degraded-foreground: oklch(0.146 0 0);
+  --status-info: oklch(0.732 0.142 254.4);
+  --status-info-foreground: oklch(0.146 0 0);
+
+  /* In dark mode, shadows are heavier ink (against the dark surface) and
+     * the glow brightens. Both still derive from theme tokens.
+     * Post-T2.5: OKLCH-aware composition via color-mix() — black ink via
+     * the literal oklch(0 0 0) (no theme indirection needed).
+     */
+  --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.4);
+  --shadow-md: 0 2px 8px -2px oklch(0 0 0 / 0.5), 0 1px 3px oklch(0 0 0 / 0.4);
+  --shadow-lg: 0 12px 32px -8px oklch(0 0 0 / 0.6), 0 4px 12px oklch(0 0 0 / 0.4);
+  --shadow-glow: 0 0 24px color-mix(in oklch, var(--primary-glow) 40%, transparent);
+  --shadow-glow-strong: 0 0 36px color-mix(in oklch, var(--primary-glow) 60%, transparent);
+}
+
+/* Forced colors (Windows High Contrast Mode) — D7 / ADR-0008 ----------- *
+ * Maps Theo's semantic tokens to system colors so the UI remains usable
+ * (and required by WCAG 1.4.1) when the OS forces a high-contrast palette.
+ * Decorative textures opt out via `forced-color-adjust: none` (the dotted
+ * patterns and hero glow would invert into solid blocks otherwise).
+ *
+ * Reference: MDN forced-colors media query, WCAG 2.2 SC 1.4.1.
+ */
+@media (forced-colors: active) {
+  :root,
+  .dark {
+    --background: Canvas;
+    --foreground: CanvasText;
+    --card: Canvas;
+    --card-foreground: CanvasText;
+    --popover: Canvas;
+    --popover-foreground: CanvasText;
+    --primary: Highlight;
+    --primary-foreground: HighlightText;
+    --secondary: ButtonFace;
+    --secondary-foreground: ButtonText;
+    --accent: Highlight;
+    --accent-foreground: HighlightText;
+    --muted: ButtonFace;
+    --muted-foreground: GrayText;
+    --border: ButtonBorder;
+    --input: ButtonBorder;
+    --ring: Highlight;
+  }
+
+  /* Texture utilities are decorative — keep them out of the system-color map. */
+  .bg-dotted-violet,
+  .bg-dotted-violet-strong,
+  .bg-hero-glow,
+  .bg-paper-grain {
+    forced-color-adjust: none;
+  }
+}
+
+/* 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) ---------------------------------------- *
+ * Post-T2.5: tokens are OKLCH; we compose alpha via color-mix(in oklch, …),
+ * which is perceptually correct and works with any color-space variable.
+ */
+@layer utilities {
+  .bg-dotted-violet {
+    background-image: radial-gradient(
+      color-mix(in oklch, var(--primary) 8%, transparent) 1px,
+      transparent 1px
+    );
+    background-size: 20px 20px;
+  }
+
+  .bg-dotted-violet-strong {
+    background-image: radial-gradient(
+      color-mix(in oklch, var(--primary) 16%, transparent) 1px,
+      transparent 1px
+    );
+    background-size: 20px 20px;
+  }
+
+  .bg-hero-glow {
+    background-image: radial-gradient(
+      ellipse 60% 50% at 70% 0%,
+      color-mix(in oklch, var(--primary) 18%, transparent) 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;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usetheo/ui",
-  "version": "0.35.3",
+  "version": "0.36.0",
   "type": "module",
   "license": "Apache-2.0",
   "description": "Violet Forge design system — generic React components + primitives (the non-AI foundation of @theokit/ui).",
@@ -40,7 +40,16 @@
     "./preset": {
       "types": "./dist/styles/tailwind-preset.d.ts",
       "import": "./dist/tailwind-preset.js"
-    }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./styles-v3-legacy.css": "./dist/styles-v3-legacy.css",
+    "./components.css": "./dist/components.css",
+    "./tokens.css": "./dist/tokens.css",
+    "./tokens-v4.css": "./dist/tokens-v4.css",
+    "./preset.css": "./dist/preset.css",
+    "./fonts.css": "./dist/fonts.css",
+    "./fonts-cdn.css": "./dist/fonts-cdn.css",
+    "./dist/fonts/*": "./dist/fonts/*"
   },
   "engines": {
     "node": ">=20"
@@ -76,6 +85,7 @@
     "@biomejs/biome": "^1.9.4",
     "@changesets/cli": "^2.31.1",
     "@ladle/react": "^4.1.2",
+    "@tailwindcss/cli": "^4.3.3",
     "@tailwindcss/vite": "^4.3.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
@@ -104,12 +114,13 @@
     "format:check": "biome format src",
     "test": "vitest run",
     "test:run": "vitest run",
-    "build": "tsup && tsc -p tsconfig.dts.json",
+    "build": "tsup && tsc -p tsconfig.dts.json && pnpm run build:css",
     "registry:build": "tsx scripts/build-registry.ts",
     "registry:validate": "tsx scripts/validate-registry.ts",
     "changeset": "changeset",
     "version-packages": "changeset version && pnpm run sync:readme",
     "release": "pnpm run build && changeset publish",
-    "sync:readme": "tsx scripts/sync-readme.ts"
+    "sync:readme": "tsx scripts/sync-readme.ts",
+    "build:css": "tsx scripts/build-css.ts"
   }
 }