@spunto/design-system 0.1.0

package/README.md

@@ -0,0 +1,47 @@
+# @spunto/design-system
+
+Spunto's shared design system — the warm/flame **tokens**, JS **color constants**,
+and the base **UI primitives** used across Spunto apps (the dashboard and Spunto
+Lite). One source of truth so replicated features stay visually consistent.
+
+## Usage
+
+Import the tokens once in your app's entry CSS, right after Tailwind:
+
+```css
+@import "tailwindcss";
+@import "@spunto/design-system/styles.css";
+@custom-variant dark (&:is(.dark *));
+```
+
+Then use the primitives and helpers:
+
+```tsx
+import { Button, Card, Badge, cn } from "@spunto/design-system"
+import { chartColors } from "@spunto/design-system/colors"
+
+<Button variant="outline" size="sm">Deploy</Button>
+```
+
+In a Next.js app, add the package to `transpilePackages` (it ships TypeScript source):
+
+```ts
+// next.config.ts
+const nextConfig = { transpilePackages: ["@spunto/design-system"] }
+```
+
+## What's inside
+
+- **`./styles.css`** — oklch token scale (light + warm dark), the `@theme inline`
+  → Tailwind color/radius mapping, a minimal base layer, and the `dot-grid` /
+  `grid-lines` background utilities. Brand color is **flame** (`--primary` ≈ `#ea5400`);
+  radius base is `0.25rem`; `Build`/`Ship`/`Run` are semantic (`bg-build`, `text-run`…).
+- **`cn`** — `clsx` + `tailwind-merge`.
+- **`./colors`** — `cssVar`, `chartColors`, `chartRamp`, `segColors` for JS/chart contexts.
+- **Primitives** — `Button` (+`buttonVariants`), `Card` (+parts), `Input`, `Textarea`,
+  `Label`, `Badge` (+`badgeVariants`), `Switch`. Dependency-light (cva + clsx +
+  tailwind-merge), no component framework required.
+
+## Peer requirements
+
+- React 19+, and a **Tailwind CSS v4** pipeline in the consuming app.

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@spunto/design-system",
+  "version": "0.1.0",
+  "description": "Spunto's shared design system — warm/flame tokens, color constants, and UI primitives.",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://design.spunto.net",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/coderhammer/spunto.git",
+    "directory": "packages/design-system"
+  },
+  "keywords": [
+    "design-system",
+    "react",
+    "tailwind",
+    "ui",
+    "spunto"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./colors": {
+      "types": "./src/colors.ts",
+      "import": "./src/colors.ts"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "src",
+    "styles.css",
+    "README.md"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "typescript": "^5"
+  }
+}

package/src/colors.ts

@@ -0,0 +1,45 @@
+/**
+ * Color constants for JS contexts (charts, canvas, inline styles) where CSS
+ * classes don't reach. Prefer the Tailwind utilities (`text-primary`, `bg-build`…)
+ * in markup; use these only when you must pass a raw color to JS.
+ */
+
+/** CSS variable references — resolve to the current (light/dark) theme value. */
+export const cssVar = {
+  background: "var(--background)",
+  foreground: "var(--foreground)",
+  border: "var(--border)",
+  card: "var(--card)",
+  muted: "var(--muted)",
+  mutedForeground: "var(--muted-foreground)",
+  primary: "var(--primary)",
+  destructive: "var(--destructive)",
+  flame: "var(--flame)",
+  build: "var(--build)",
+  ship: "var(--ship)",
+  run: "var(--run)",
+} as const
+
+/** Fixed oklch line colors for time-series charts (recharts strokes, etc.). */
+export const chartColors = {
+  cpu: "oklch(0.70 0.20 43)", // run / flame
+  memory: "oklch(0.83 0.15 72)", // build (amber)
+  ship: "oklch(0.76 0.18 53)",
+} as const
+
+/** Sequential warm ramp (Build → flame). Matches --chart-1..5. */
+export const chartRamp = [
+  "oklch(0.79 0.155 70)",
+  "oklch(0.72 0.185 52)",
+  "oklch(0.66 0.205 42)",
+  "oklch(0.58 0.205 35)",
+  "oklch(0.52 0.19 28)",
+] as const
+
+/** Categorical, CVD-validated slots for disk/segment breakdowns. */
+export const segColors = {
+  workers: "var(--seg-workers)",
+  deployments: "var(--seg-deployments)",
+  images: "var(--seg-images)",
+  buildcache: "var(--seg-buildcache)",
+} as const

package/src/components/badge.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../utils"
+
+export const badgeVariants = cva(
+  "inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary/12 text-primary",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        outline: "border-border text-foreground",
+        success: "border-transparent bg-emerald-500/12 text-emerald-600 dark:text-emerald-400",
+        warning: "border-transparent bg-amber-500/15 text-amber-600 dark:text-amber-400",
+        destructive: "border-transparent bg-destructive/12 text-destructive",
+        muted: "border-transparent bg-muted text-muted-foreground",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+)
+
+export function Badge({
+  className,
+  variant,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants>) {
+  return <span className={cn(badgeVariants({ variant }), className)} {...props} />
+}

package/src/components/button.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../utils"
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:opacity-90",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        destructive: "bg-destructive text-white hover:opacity-90",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 px-3 text-xs",
+        lg: "h-10 px-6",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <button ref={ref} className={cn(buttonVariants({ variant, size }), className)} {...props} />
+  ),
+)
+Button.displayName = "Button"

package/src/components/card.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import { cn } from "../utils"
+
+export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("rounded-xl border border-border bg-card text-card-foreground", className)} {...props} />
+}
+
+export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col gap-1.5 p-5", className)} {...props} />
+}
+
+export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn("font-semibold leading-none tracking-tight", className)} {...props} />
+}
+
+export function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("text-sm text-muted-foreground", className)} {...props} />
+}
+
+export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("p-5 pt-0", className)} {...props} />
+}
+
+export function CardFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex items-center p-5 pt-0", className)} {...props} />
+}

package/src/components/input.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+import { cn } from "../utils"
+
+export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
+  ({ className, ...props }, ref) => (
+    <input
+      ref={ref}
+      className={cn(
+        "flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-none transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+Input.displayName = "Input"

package/src/components/label.tsx

@@ -0,0 +1,9 @@
+import * as React from "react"
+import { cn } from "../utils"
+
+export const Label = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
+  ({ className, ...props }, ref) => (
+    <label ref={ref} className={cn("text-sm font-medium leading-none", className)} {...props} />
+  ),
+)
+Label.displayName = "Label"

package/src/components/switch.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../utils"
+
+export function Switch({
+  checked,
+  onCheckedChange,
+  className,
+  id,
+  disabled,
+}: {
+  checked: boolean
+  onCheckedChange: (v: boolean) => void
+  className?: string
+  id?: string
+  disabled?: boolean
+}) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      id={id}
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={() => onCheckedChange(!checked)}
+      className={cn(
+        "relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50",
+        checked ? "bg-primary" : "bg-input",
+        className,
+      )}
+    >
+      <span
+        className={cn(
+          "inline-block size-4 rounded-full bg-white shadow-sm transition-transform",
+          checked ? "translate-x-4" : "translate-x-0.5",
+        )}
+      />
+    </button>
+  )
+}

package/src/components/textarea.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+import { cn } from "../utils"
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      ref={ref}
+      className={cn(
+        "flex min-h-[72px] w-full rounded-lg border border-input bg-background px-3 py-2 text-sm font-mono placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  ),
+)
+Textarea.displayName = "Textarea"

package/src/index.ts

@@ -0,0 +1,13 @@
+// @spunto/design-system — shared UI primitives, helpers, and color constants.
+// Tokens ship as a CSS file: `import "@spunto/design-system/styles.css"`.
+
+export { cn } from "./utils"
+export * from "./colors"
+
+export { Button, buttonVariants, type ButtonProps } from "./components/button"
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "./components/card"
+export { Input } from "./components/input"
+export { Textarea } from "./components/textarea"
+export { Label } from "./components/label"
+export { Badge, badgeVariants } from "./components/badge"
+export { Switch } from "./components/switch"

package/src/utils.ts

@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+/** Merge Tailwind class names, de-duplicating conflicting utilities. */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/styles.css

@@ -0,0 +1,186 @@
+/*
+ * @spunto/design-system — design tokens (warm / Mistral-inspired, brand: flame).
+ *
+ * Import AFTER `@import "tailwindcss"` in your app's entry CSS:
+ *   @import "tailwindcss";
+ *   @import "@spunto/design-system/styles.css";
+ *
+ * Provides the oklch token scale, the `@theme inline` → Tailwind color/radius
+ * mapping, a minimal base layer, and the warm dot-grid / blueprint-grid utilities.
+ * `@custom-variant dark` stays in the app (or add it there once).
+ */
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+  --font-syne: var(--font-syne);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  /* Brand warm palette — Build / Ship / Run + signature flame */
+  --color-build: var(--build);
+  --color-ship: var(--ship);
+  --color-run: var(--run);
+  --color-flame: var(--flame);
+  /* Square-leaning radius scale — driven by --radius (4px base) */
+  --radius-sm: calc(var(--radius) * 0.5);
+  --radius-md: calc(var(--radius) * 0.75);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.5);
+  --radius-2xl: calc(var(--radius) * 2);
+  --radius-3xl: calc(var(--radius) * 2.75);
+  --radius-4xl: calc(var(--radius) * 3.5);
+}
+
+/* ─── Light mode — Warm cream, Mistral-inspired ─────────────────────────── */
+:root {
+  --background: oklch(0.975 0.012 82);
+  --foreground: oklch(0.20 0.018 55);
+  --card: oklch(0.995 0.006 86);
+  --card-foreground: oklch(0.20 0.018 55);
+  --popover: oklch(0.995 0.006 86);
+  --popover-foreground: oklch(0.20 0.018 55);
+  --primary: oklch(0.64 0.205 41);
+  --primary-foreground: oklch(0.99 0.012 86);
+  --secondary: oklch(0.93 0.015 78);
+  --secondary-foreground: oklch(0.34 0.045 52);
+  --muted: oklch(0.955 0.012 80);
+  --muted-foreground: oklch(0.51 0.032 60);
+  --accent: oklch(0.935 0.024 72);
+  --accent-foreground: oklch(0.34 0.045 52);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.89 0.016 76);
+  --input: oklch(0.89 0.016 76);
+  --ring: oklch(0.64 0.205 41);
+  /* Brand warm scale — Build (amber) → Ship (orange) → Run (flame) */
+  --build: oklch(0.79 0.155 70);
+  --ship: oklch(0.72 0.185 52);
+  --run: oklch(0.66 0.205 42);
+  --flame: oklch(0.64 0.205 41);
+  --chart-1: oklch(0.79 0.155 70);
+  --chart-2: oklch(0.72 0.185 52);
+  --chart-3: oklch(0.66 0.205 42);
+  --chart-4: oklch(0.58 0.205 35);
+  --chart-5: oklch(0.52 0.19 28);
+  --seg-workers: #eb6834;
+  --seg-deployments: #256abf;
+  --seg-images: #1baf7a;
+  --seg-buildcache: #eda100;
+  --radius: 0.25rem;
+  --sidebar: oklch(0.96 0.014 80);
+  --sidebar-foreground: oklch(0.20 0.018 55);
+  --sidebar-primary: oklch(0.64 0.205 41);
+  --sidebar-primary-foreground: oklch(0.99 0.012 86);
+  --sidebar-accent: oklch(0.93 0.022 74);
+  --sidebar-accent-foreground: oklch(0.30 0.04 52);
+  --sidebar-border: oklch(0.89 0.016 76);
+  --sidebar-ring: oklch(0.64 0.205 41);
+}
+
+/* ─── Dark mode — Warm charcoal, golden undertone ───────────────────────── */
+.dark {
+  --background: oklch(0.155 0.011 52);
+  --foreground: oklch(0.95 0.009 78);
+  --card: oklch(0.195 0.012 52);
+  --card-foreground: oklch(0.95 0.009 78);
+  --popover: oklch(0.195 0.012 52);
+  --popover-foreground: oklch(0.95 0.009 78);
+  --primary: oklch(0.70 0.20 43);
+  --primary-foreground: oklch(0.16 0.012 52);
+  --secondary: oklch(0.26 0.016 52);
+  --secondary-foreground: oklch(0.95 0.009 78);
+  --muted: oklch(0.23 0.014 52);
+  --muted-foreground: oklch(0.67 0.022 66);
+  --accent: oklch(0.28 0.018 54);
+  --accent-foreground: oklch(0.95 0.009 78);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(0.92 0.03 70 / 11%);
+  --input: oklch(0.92 0.03 70 / 14%);
+  --ring: oklch(0.70 0.20 43);
+  --build: oklch(0.83 0.15 72);
+  --ship: oklch(0.76 0.18 53);
+  --run: oklch(0.71 0.20 43);
+  --flame: oklch(0.71 0.20 43);
+  --chart-1: oklch(0.83 0.15 72);
+  --chart-2: oklch(0.76 0.18 53);
+  --chart-3: oklch(0.71 0.20 43);
+  --chart-4: oklch(0.64 0.20 36);
+  --chart-5: oklch(0.57 0.19 29);
+  --seg-workers: #d95926;
+  --seg-deployments: #3987e5;
+  --seg-images: #199e70;
+  --seg-buildcache: #c98500;
+  --sidebar: oklch(0.18 0.012 52);
+  --sidebar-foreground: oklch(0.95 0.009 78);
+  --sidebar-primary: oklch(0.70 0.20 43);
+  --sidebar-primary-foreground: oklch(0.16 0.012 52);
+  --sidebar-accent: oklch(0.26 0.016 52);
+  --sidebar-accent-foreground: oklch(0.95 0.009 78);
+  --sidebar-border: oklch(0.92 0.03 70 / 11%);
+  --sidebar-ring: oklch(0.70 0.20 43);
+}
+
+/* ─── Base layer ─────────────────────────────────────────────────────────── */
+@layer base {
+  * {
+    border-color: var(--border);
+    outline-color: color-mix(in oklch, var(--ring) 50%, transparent);
+  }
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+  }
+  ::-webkit-scrollbar { width: 6px; height: 6px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 9999px; }
+  ::-webkit-scrollbar-thumb:hover { background: color-mix(in oklch, var(--muted-foreground) 30%, transparent); }
+}
+
+/* ─── Warm background utilities ──────────────────────────────────────────── */
+.dot-grid {
+  background-image: radial-gradient(circle, oklch(0.45 0.05 50 / 0.08) 1px, transparent 1px);
+  background-size: 32px 32px;
+}
+.dark .dot-grid {
+  background-image: radial-gradient(circle, oklch(0.92 0.04 70 / 0.045) 1px, transparent 1px);
+}
+.grid-lines {
+  background-image:
+    linear-gradient(to right, oklch(0.45 0.05 50 / 0.055) 1px, transparent 1px),
+    linear-gradient(to bottom, oklch(0.45 0.05 50 / 0.055) 1px, transparent 1px);
+  background-size: 56px 56px;
+}
+.dark .grid-lines {
+  background-image:
+    linear-gradient(to right, oklch(0.92 0.04 70 / 0.04) 1px, transparent 1px),
+    linear-gradient(to bottom, oklch(0.92 0.04 70 / 0.04) 1px, transparent 1px);
+}