@web-my-money/tokens 1.0.0

package/dist/themes/palette.mjs

@@ -0,0 +1,121 @@
+// Single source of truth for WMM's 3 themes — light, dark, wmm.
+//
+// Each theme is a flat set of SEMANTIC keys (vocabulary-neutral). The generator
+// (scripts/gen-theme-css.mjs) maps these to TWO CSS files so apps on either
+// variable vocabulary stay in sync from this one palette:
+//   - app-theme.css     → wmm-native names  (--bg/--surface/--fg/--muted/…)   [wmm-tasks vocab]
+//   - shadcn-theme.css  → shadcn names       (--background/--card/--muted/…)   [wmm-os / DS vocab]
+//
+// Edit values HERE, then `npm run build` (runs the generator). Never hand-edit
+// the generated *.css.
+//
+// light/dark = the tuned app OKLCH set (from wmm-tasks/wmm-os).
+// wmm        = the marketing/dark brand palette on deep navy.
+//
+// BRAND (2026-07, aligned to production wmm-os + wmm-tasks + wmm-website):
+//   Pearl Aqua  #8fccb6  = primary (was teal #00c4b4)
+//   Periwinkle  #869ce2  = accent  (was violet #7c3aed); blue-lift #7388cf
+//   Space Cadet #1f2d56  = logo ink on light (no longer the light-mode primary)
+// dark + wmm run aqua-on-navy (app + marketing); light runs Pearl-Aqua-darkened-for-AA
+// (#4f8a72, confirmed canonical by Fran 2026-07-13 — matches wmm-tasks' light primary).
+
+export const themes = {
+  light: {
+    scheme: "light",
+    bg: "oklch(0.985 0.003 250)",
+    surface: "oklch(1 0 0)",
+    card: "oklch(1 0 0)",
+    overlay: "oklch(0.965 0.004 250)",
+    fg: "oklch(0.22 0.012 260)",
+    mutedText: "oklch(0.42 0.012 260)",
+    faint: "oklch(0.58 0.01 260)",
+    border: "oklch(0 0 0 / 8%)",
+    borderStrong: "oklch(0 0 0 / 14%)",
+    primary: "#4f8a72",
+    primaryDim: "rgba(79, 138, 114, 0.10)",
+    primaryFg: "#ffffff",
+    accent: "#4a5fb0",
+    accentFg: "#ffffff",
+    danger: "oklch(0.56 0.22 25)",
+    warn: "oklch(0.62 0.16 65)",
+    ok: "oklch(0.55 0.16 150)",
+    ring: "#4f8a72",
+    input: "oklch(0 0 0 / 14%)",
+    // Categorical chart/badge palette (8-way, AA-darkened) — exact parity with
+    // wmm-tasks' light theme (reports-charts.tsx, capacity-grid.tsx).
+    chart1: "#0284c7", chart2: "#16a34a", chart3: "#b45309", chart4: "#7c3aed",
+    chart5: "#dc2626", chart6: "#0d9488", chart7: "#db2777", chart8: "#475569",
+  },
+  dark: {
+    scheme: "dark",
+    bg: "oklch(0.13 0.005 260)",
+    surface: "oklch(0.16 0.006 260)",
+    card: "oklch(0.18 0.006 260)",
+    overlay: "oklch(0.21 0.008 260)",
+    fg: "oklch(0.97 0 0)",
+    mutedText: "oklch(0.74 0.012 260)",
+    faint: "oklch(0.58 0.011 260)",
+    border: "oklch(1 0 0 / 9%)",
+    borderStrong: "oklch(1 0 0 / 16%)",
+    primary: "#8fccb6",
+    primaryDim: "rgba(143, 204, 182, 0.16)",
+    primaryFg: "#04201c",
+    accent: "#869ce2",
+    accentFg: "#0a1222",
+    danger: "oklch(0.66 0.22 25)",
+    warn: "oklch(0.80 0.16 75)",
+    ok: "oklch(0.78 0.17 150)",
+    ring: "#8fccb6",
+    input: "oklch(1 0 0 / 16%)",
+    // Categorical chart/badge palette (8-way) — exact parity with wmm-tasks' dark theme.
+    chart1: "#38bdf8", chart2: "#4ade80", chart3: "#fbbf24", chart4: "#a78bfa",
+    chart5: "#f87171", chart6: "#2dd4bf", chart7: "#f472b6", chart8: "#94a3b8",
+  },
+  wmm: {
+    scheme: "dark",
+    bg: "#080b14",
+    surface: "#0b1322",
+    card: "#0f172a",
+    overlay: "#16203a",
+    fg: "#f8fafc",
+    mutedText: "#94a3b8",
+    faint: "#64748b",
+    border: "rgba(255, 255, 255, 0.08)",
+    borderStrong: "rgba(255, 255, 255, 0.14)",
+    primary: "#8fccb6",
+    primaryDim: "rgba(143, 204, 182, 0.16)",
+    primaryFg: "#04201c",
+    accent: "#869ce2",
+    accentFg: "#0a1222",
+    danger: "#ef4444",
+    warn: "#f59e0b",
+    ok: "#22c55e",
+    ring: "#8fccb6",
+    input: "rgba(255, 255, 255, 0.14)",
+    // Same categorical set as `dark` — reused for consistency on marketing pages.
+    chart1: "#38bdf8", chart2: "#4ade80", chart3: "#fbbf24", chart4: "#a78bfa",
+    chart5: "#f87171", chart6: "#2dd4bf", chart7: "#f472b6", chart8: "#94a3b8",
+  },
+};
+
+// Brand accents — always available regardless of active theme.
+// Aligned 2026-07 to production (aqua/periwinkle/navy). Legacy teal/violet/sky
+// keys retained as aliases pointing at the new palette so existing --wmm-* refs work.
+export const brand = {
+  "wmm-aqua": "#8fccb6",
+  "wmm-periwinkle": "#869ce2",
+  "wmm-blue-lift": "#7388cf",
+  "wmm-navy": "#1f2d56",
+  "wmm-glow": "rgba(143, 204, 182, 0.15)",
+  // legacy aliases (deprecated — map to the current brand)
+  "wmm-teal": "#8fccb6",
+  "wmm-violet": "#869ce2",
+  "wmm-sky": "#7388cf",
+};
+
+// Per-theme metadata — lets the OS / app shells label + offer the switcher.
+export const themeMeta = {
+  light: { name: "light", label: "Light", channel: "app", platforms: ["desktop", "mobile"] },
+  dark: { name: "dark", label: "Dark", channel: "app", platforms: ["desktop", "mobile"] },
+  wmm: { name: "wmm", label: "WMM", channel: "landing", platforms: ["desktop", "mobile"] },
+};

package/dist/themes/shadcn-theme.css

@@ -0,0 +1,169 @@
+/* GENERATED by scripts/gen-theme-css.mjs — DO NOT EDIT.
+   Source of truth: src/themes/palette.mjs · variant: shadcn vocab
+   Themes: light (default), dark, wmm — switch via [data-theme]. */
+
+@theme inline {
+  --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);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-danger: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --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);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-3xl: var(--radius-3xl);
+  --radius-4xl: var(--radius-4xl);
+}
+
+:root {
+  --radius: 0.625rem;
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --wmm-aqua: #8fccb6;
+  --wmm-periwinkle: #869ce2;
+  --wmm-blue-lift: #7388cf;
+  --wmm-navy: #1f2d56;
+  --wmm-glow: rgba(143, 204, 182, 0.15);
+  --wmm-teal: #8fccb6;
+  --wmm-violet: #869ce2;
+  --wmm-sky: #7388cf;
+}
+
+:root, [data-theme="light"] {
+  color-scheme: light;
+  --background: oklch(0.985 0.003 250);
+  --foreground: oklch(0.22 0.012 260);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.22 0.012 260);
+  --popover: oklch(0.965 0.004 250);
+  --popover-foreground: oklch(0.22 0.012 260);
+  --primary: #4f8a72;
+  --primary-foreground: #ffffff;
+  --secondary: oklch(1 0 0);
+  --secondary-foreground: oklch(0.22 0.012 260);
+  --muted: oklch(1 0 0);
+  --muted-foreground: oklch(0.42 0.012 260);
+  --accent: oklch(0.965 0.004 250);
+  --accent-foreground: oklch(0.22 0.012 260);
+  --destructive: oklch(0.56 0.22 25);
+  --border: oklch(0 0 0 / 8%);
+  --input: oklch(0 0 0 / 14%);
+  --ring: #4f8a72;
+  --chart-1: #4f8a72;
+  --chart-2: #4a5fb0;
+  --chart-3: #7388cf;
+  --chart-4: oklch(0.62 0.16 65);
+  --chart-5: oklch(0.55 0.16 150);
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.22 0.012 260);
+  --sidebar-primary: #4f8a72;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: oklch(0.965 0.004 250);
+  --sidebar-accent-foreground: oklch(0.22 0.012 260);
+  --sidebar-border: oklch(0 0 0 / 8%);
+  --sidebar-ring: #4f8a72;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+  --background: oklch(0.13 0.005 260);
+  --foreground: oklch(0.97 0 0);
+  --card: oklch(0.18 0.006 260);
+  --card-foreground: oklch(0.97 0 0);
+  --popover: oklch(0.21 0.008 260);
+  --popover-foreground: oklch(0.97 0 0);
+  --primary: #8fccb6;
+  --primary-foreground: #04201c;
+  --secondary: oklch(0.16 0.006 260);
+  --secondary-foreground: oklch(0.97 0 0);
+  --muted: oklch(0.16 0.006 260);
+  --muted-foreground: oklch(0.74 0.012 260);
+  --accent: oklch(0.21 0.008 260);
+  --accent-foreground: oklch(0.97 0 0);
+  --destructive: oklch(0.66 0.22 25);
+  --border: oklch(1 0 0 / 9%);
+  --input: oklch(1 0 0 / 16%);
+  --ring: #8fccb6;
+  --chart-1: #8fccb6;
+  --chart-2: #869ce2;
+  --chart-3: #7388cf;
+  --chart-4: oklch(0.80 0.16 75);
+  --chart-5: oklch(0.78 0.17 150);
+  --sidebar: oklch(0.16 0.006 260);
+  --sidebar-foreground: oklch(0.97 0 0);
+  --sidebar-primary: #8fccb6;
+  --sidebar-primary-foreground: #04201c;
+  --sidebar-accent: oklch(0.21 0.008 260);
+  --sidebar-accent-foreground: oklch(0.97 0 0);
+  --sidebar-border: oklch(1 0 0 / 9%);
+  --sidebar-ring: #8fccb6;
+}
+
+[data-theme="wmm"] {
+  color-scheme: dark;
+  --background: #080b14;
+  --foreground: #f8fafc;
+  --card: #0f172a;
+  --card-foreground: #f8fafc;
+  --popover: #16203a;
+  --popover-foreground: #f8fafc;
+  --primary: #8fccb6;
+  --primary-foreground: #04201c;
+  --secondary: #0b1322;
+  --secondary-foreground: #f8fafc;
+  --muted: #0b1322;
+  --muted-foreground: #94a3b8;
+  --accent: #16203a;
+  --accent-foreground: #f8fafc;
+  --destructive: #ef4444;
+  --border: rgba(255, 255, 255, 0.08);
+  --input: rgba(255, 255, 255, 0.14);
+  --ring: #8fccb6;
+  --chart-1: #8fccb6;
+  --chart-2: #869ce2;
+  --chart-3: #7388cf;
+  --chart-4: #f59e0b;
+  --chart-5: #22c55e;
+  --sidebar: #0b1322;
+  --sidebar-foreground: #f8fafc;
+  --sidebar-primary: #8fccb6;
+  --sidebar-primary-foreground: #04201c;
+  --sidebar-accent: #16203a;
+  --sidebar-accent-foreground: #f8fafc;
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+  --sidebar-ring: #8fccb6;
+}

package/dist/themes/theme.css

@@ -0,0 +1,12 @@
+/* @web-my-money/tokens/theme — default full theme bundle.
+   Import this once in globals.css — gives you light, dark, and wmm themes,
+   plus the WMM brand accent constants (--wmm-teal, --wmm-violet, --wmm-sky).
+
+   @import "@web-my-money/tokens/theme";
+
+   CSS vocab: shadcn-compatible (--background, --foreground, --primary …).
+   For apps using wmm-native vocab (--bg, --fg …) use ./app-theme.css instead.
+   For brand logo ink, also add: @import "@web-my-money/brand/brand.css"; */
+
+@import "./shadcn-theme.css";
+@import "./extended.css";

package/dist/themes/themes.json

@@ -0,0 +1,31 @@
+{
+  "themes": [
+    {
+      "name": "light",
+      "label": "Light",
+      "channel": "app",
+      "platforms": [
+        "desktop",
+        "mobile"
+      ]
+    },
+    {
+      "name": "dark",
+      "label": "Dark",
+      "channel": "app",
+      "platforms": [
+        "desktop",
+        "mobile"
+      ]
+    },
+    {
+      "name": "wmm",
+      "label": "WMM",
+      "channel": "landing",
+      "platforms": [
+        "desktop",
+        "mobile"
+      ]
+    }
+  ]
+}

package/dist/themes/wmm.css

@@ -0,0 +1,29 @@
+/**
+ * WMM Brand Theme CSS — import this in dark-mode marketing sites.
+ * Usage: @import "@web-my-money/tokens/themes/wmm.css";
+ */
+
+:root {
+  --background: #080b14;
+  --foreground: #f8fafc;
+  --muted: #94a3b8;
+  --card: #0f172a;
+  --border: rgba(255, 255, 255, 0.08);
+  --teal: #8fccb6;
+  --violet: #869ce2;
+  --sky: #7388cf;
+  --glow: rgba(143, 204, 182, 0.15);
+}
+
+body {
+  background:
+    radial-gradient(circle at 50% -2%, rgba(115, 136, 207, 0.10), transparent 30%),
+    radial-gradient(circle at 84% 6%, rgba(31, 45, 86, 0.45), transparent 36%),
+    linear-gradient(180deg, #070b13 0%, #080c14 46%, #0a1220 100%);
+  color: var(--foreground);
+}
+
+::selection {
+  background: rgba(143, 204, 182, 0.25);
+  color: var(--foreground);
+}

package/dist/tokens.css

@@ -0,0 +1,82 @@
+/**
+ * Core design tokens as CSS custom properties.
+ * Usage: @import "@web-my-money/tokens/css";
+ *
+ * Then apply a theme CSS on top for brand colors.
+ */
+
+:root {
+  /* ── Semantic Colors (light) ─────────────────────── */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  /* ── Charts ──────────────────────────────────────── */
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+
+  /* ── Sidebar ─────────────────────────────────────── */
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* ── Radius ──────────────────────────────────────── */
+  --radius: 0.625rem;
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@web-my-money/tokens",
+  "version": "1.0.0",
+  "description": "Design tokens for WMM Design System — colors, typography, spacing, shadows, themes, fonts, React theme helpers",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./theme": "./dist/themes/theme.css",
+    "./css": "./dist/tokens.css",
+    "./themes/*": "./dist/themes/*.css",
+    "./themes.json": "./dist/themes/themes.json",
+    "./fonts.css": "./dist/fonts.css",
+    "./fonts/*": "./dist/fonts/*",
+    "./tailwind-preset": {
+      "types": "./dist/tailwind-preset.d.ts",
+      "import": "./dist/tailwind-preset.mjs",
+      "require": "./dist/tailwind-preset.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.mjs",
+      "require": "./dist/react.js"
+    }
+  },
+  "files": [
+    "dist",
+    "bin"
+  ],
+  "bin": {
+    "wmm-doctor": "./bin/doctor.mjs"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "scripts": {
+    "gen:themes": "node scripts/gen-theme-css.mjs",
+    "gen:client-theme": "node scripts/gen-client-theme.mjs",
+    "build": "node scripts/gen-theme-css.mjs && tsup src/index.ts src/tailwind-preset.ts src/react.tsx --format cjs,esm --dts --external react --external react-dom && node scripts/copy-assets.mjs",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tailwindcss": "^3.4.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.0"
+  },
+  "license": "UNLICENSED"
+}