@moshevents/tokens 0.1.0

package/README.md

@@ -0,0 +1,87 @@
+# mosh-tokens
+
+**Single source of truth for the Mosh Design System.** Edit tokens in one place
+(`tokens.json`), regenerate, and every platform consumes the same values.
+
+```
+tokens.json              ← the ONLY file you hand-edit (colors, surfaces, type, spacing, radii, …)
+build.mjs                ← dependency-free generator (run with plain node)
+dist/                    → npm package @moshevents/tokens (web/admin)
+  tokens.css             → website (Next.js): CSS custom properties
+  theme.css              → admin (Tailwind v4): an @theme block, mapped into Tailwind namespaces
+Sources/MoshTokens/      → SwiftPM package MoshTokens (iOS)
+  MoshTokens.swift       → UIColor / SwiftUI Color + CGFloat / UIFont.Weight constants
+Package.swift            ← SwiftPM manifest
+showcase/                → the human-facing bundle synced to the claude.ai "Mosh Design System"
+```
+
+## Usage
+
+```bash
+npm run build      # regenerate dist/ from tokens.json
+npm run check      # build + fail if dist/ is out of date (use in CI)
+```
+
+No install required — `build.mjs` has zero dependencies and runs on Node ≥ 18.
+Commit the regenerated `dist/` so every output is reviewable in diffs.
+
+## Consuming as a package (the supported path)
+
+**Web / admin — `@moshevents/tokens` (public on npmjs).** No `.npmrc`, no token — just install:
+
+```bash
+npm i @moshevents/tokens
+```
+
+Then import the CSS once:
+
+```css
+/* website */            @import "@moshevents/tokens/tokens.css";
+/* admin (Tailwind v4) */ @import "@moshevents/tokens/theme.css";
+```
+
+`npm update @moshevents/tokens` pulls new token values — no vendored copy to sync.
+
+**iOS — SwiftPM `MoshTokens`.** Xcode → Add Package Dependencies →
+`https://github.com/moshorg/mosh-tokens`, pin a version, then:
+
+```swift
+import MoshTokens
+view.backgroundColor = MoshColor.brand
+label.font = .systemFont(ofSize: MoshFontSize.textBase, weight: MoshWeight.semibold)
+```
+
+SwiftPM resolves straight from the git tag — no registry/publish needed.
+
+## Releasing
+
+Publishing is **Trusted Publishing (OIDC)** — no token or secret. One-time setup:
+
+1. Create the `moshevents` org on npmjs (claims the `@moshevents` scope).
+2. **First publish manually** (Trusted Publishing is configured on an existing package):
+   `npm login && npm publish` from this repo.
+3. On npmjs → the package → **Settings → Trusted Publisher** → add GitHub Actions:
+   repo `moshorg/mosh-tokens`, workflow `publish.yml`.
+
+After that, bump `version` and cut a **GitHub Release** (or run the `Publish` workflow) — it
+publishes to npmjs via OIDC, with provenance, no secret. The same tag is what iOS pins to.
+
+## Designer / human-facing view
+
+The browsable showcase lives in the **claude.ai "Mosh Design System" project**
+(`projectId 8d424b74-…`), kept in sync via the `/design-sync` skill. That hosted project
+is where a designer views the palette, type scale, and — as we add them — component
+galleries, without checking out code. `tokens.json` is the machine source; the claude.ai
+project is the rendered view of the same values. **One source, two audiences.**
+
+## Notes / open decisions
+
+- **Dark-only today.** Every token is a single dark-mode value (matches web). iOS supports
+  light + dark; when we wire iOS fully (Phase 3), either add light/dark variants to the
+  schema (`{ "$value": { "light": …, "dark": … } }`) or commit iOS to dark-only.
+- **iOS dimension conversion** is `px → pt` 1:1 and `rem × 16`; revisit if the iOS type
+  scale should differ from web.
+- **Gradients/shadows** generate for web (CSS) and admin (Tailwind) but are omitted from
+  Swift for now — iOS expresses these per-component; revisit in Phase 3 if needed.
+- Swap `build.mjs` for **Style Dictionary** later if you want its plugin ecosystem;
+  `tokens.json` stays the source either way.

package/dist/theme.css

@@ -0,0 +1,94 @@
+/* AUTO-GENERATED from tokens.json by build.mjs — do not edit by hand. */
+/* Mosh Design System — Tailwind v4 theme (admin). Import once: @import "./theme.css";
+   Names are mapped into Tailwind namespaces so utilities generate
+   (bg-brand, text-text-primary, p-4, rounded-pill, shadow-glow-brand, ...). */
+@theme {
+  --color-brand: #ff2929;
+  --color-brand-bright: #ff4d4d;
+  --color-brand-light: #ff6b6b;
+  --color-brand-soft: #ff3d3d;
+  --color-brand-deep: #b30000;
+  --color-accent-deep: #b30000;
+  --color-bg: #000000;
+  --color-surface-0: #0a0a0a;
+  --color-surface-1: #121212;
+  --color-surface-2: #151515;
+  --color-surface-3: #1a1a1a;
+  --color-surface-4: #1f1f1f;
+  --color-surface-5: #252525;
+  --color-surface-6: #2a2a2a;
+  --color-surface-7: #3a3a3a;
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #cccccc;
+  --color-text-tertiary: #aaaaaa;
+  --color-text-muted: #888888;
+  --color-text-faint: #666666;
+  --color-text-disabled: #555555;
+  --color-border-subtle: rgba(255, 255, 255, 0.06);
+  --color-border-default: rgba(255, 255, 255, 0.10);
+  --color-border-strong: rgba(255, 255, 255, 0.15);
+  --color-border-brand: rgba(255, 41, 41, 0.50);
+  --color-fill-ghost: rgba(255, 255, 255, 0.04);
+  --color-fill-hover: rgba(255, 255, 255, 0.08);
+  --color-fill-active: rgba(255, 255, 255, 0.12);
+  --color-scrim: rgba(0, 0, 0, 0.50);
+  --color-scrim-strong: rgba(0, 0, 0, 0.70);
+  --color-success: #22c55e;
+  --color-success-bright: #4ade80;
+  --color-danger: #ef4444;
+  --color-danger-bright: #f87171;
+  --color-warning: #facc15;
+  --color-warning-orange: #f97316;
+  --gradient-brand: linear-gradient(135deg, #ff2929, #b30000);
+  --gradient-red: linear-gradient(to top, #ff3d3d, #ff4d4d);
+  --gradient-warm: linear-gradient(135deg, #ff6b6b, #ff2929);
+  --gradient-surface: linear-gradient(145deg, #2a2a2a, #1a1a1a);
+  --gradient-shimmer: linear-gradient(90deg, transparent, #ff4d4d, transparent);
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-pill: 999px;
+  --radius-circle: 50%;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --font-sans: var(--font-geist-sans, "Geist"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: var(--font-geist-mono, "Geist Mono"), ui-monospace, SFMono-Regular, Menlo, monospace;
+  --text-xs: 0.7rem;
+  --text-sm: 0.8rem;
+  --text-base: 0.85rem;
+  --text-md: 0.9rem;
+  --text-lg: 1rem;
+  --text-xl: 1.1rem;
+  --text-2xl: 1.25rem;
+  --text-3xl: 1.5rem;
+  --text-4xl: 1.75rem;
+  --text-5xl: 2.5rem;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-black: 900;
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
+  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
+  --shadow-glow-brand: 0 0 20px rgba(255, 41, 41, 0.5), 0 0 40px rgba(255, 41, 41, 0.2);
+  --shadow-glow-brand-soft: 0 0 24px rgba(255, 77, 77, 0.3);
+}
+
+/* Channel vars (rgba(var(--…), <alpha>)) — outside @theme on purpose. */
+:root {
+  --color-brand-rgb: 255, 41, 41;
+  --color-danger-rgb: 239, 68, 68;
+  --color-danger-bright-rgb: 248, 113, 113;
+}

package/dist/tokens.css

@@ -0,0 +1,88 @@
+/* AUTO-GENERATED from tokens.json by build.mjs — do not edit by hand. */
+/* Mosh Design System — CSS custom properties (website). */
+:root {
+  --color-brand: #ff2929; /* primary brand red */
+  --color-brand-bright: #ff4d4d; /* brighter accent / hover */
+  --color-brand-light: #ff6b6b; /* light red, best for text on dark */
+  --color-brand-soft: #ff3d3d;
+  --color-brand-deep: #b30000; /* pressed / deep */
+  --color-accent-deep: #b30000; /* secondary accent, pairs with red */
+  --color-brand-rgb: 255, 41, 41; /* brand red channels — for rgba(var(--color-brand-rgb), <alpha>) */
+  --color-bg: #000000; /* app background */
+  --surface-0: #0a0a0a;
+  --surface-1: #121212;
+  --surface-2: #151515;
+  --surface-3: #1a1a1a;
+  --surface-4: #1f1f1f;
+  --surface-5: #252525;
+  --surface-6: #2a2a2a;
+  --surface-7: #3a3a3a;
+  --text-primary: #ffffff;
+  --text-secondary: #cccccc;
+  --text-tertiary: #aaaaaa;
+  --text-muted: #888888;
+  --text-faint: #666666;
+  --text-disabled: #555555;
+  --border-subtle: rgba(255, 255, 255, 0.06);
+  --border-default: rgba(255, 255, 255, 0.10);
+  --border-strong: rgba(255, 255, 255, 0.15);
+  --border-brand: rgba(255, 41, 41, 0.50);
+  --fill-ghost: rgba(255, 255, 255, 0.04);
+  --fill-hover: rgba(255, 255, 255, 0.08);
+  --fill-active: rgba(255, 255, 255, 0.12);
+  --scrim: rgba(0, 0, 0, 0.50);
+  --scrim-strong: rgba(0, 0, 0, 0.70);
+  --color-success: #22c55e;
+  --color-success-bright: #4ade80;
+  --color-danger: #ef4444;
+  --color-danger-bright: #f87171;
+  --color-danger-rgb: 239, 68, 68; /* danger channels — for rgba(var(--color-danger-rgb), <alpha>) */
+  --color-danger-bright-rgb: 248, 113, 113; /* danger-bright channels */
+  --color-warning: #facc15;
+  --color-warning-orange: #f97316;
+  --gradient-brand: linear-gradient(135deg, #ff2929, #b30000); /* red → deep red */
+  --gradient-red: linear-gradient(to top, #ff3d3d, #ff4d4d);
+  --gradient-warm: linear-gradient(135deg, #ff6b6b, #ff2929);
+  --gradient-surface: linear-gradient(145deg, #2a2a2a, #1a1a1a);
+  --gradient-shimmer: linear-gradient(90deg, transparent, #ff4d4d, transparent);
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-pill: 999px; /* buttons/badges are pill-shaped */
+  --radius-circle: 50%;
+  --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;
+  --font-sans: var(--font-geist-sans, "Geist"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: var(--font-geist-mono, "Geist Mono"), ui-monospace, SFMono-Regular, Menlo, monospace;
+  --text-xs: 0.7rem;
+  --text-sm: 0.8rem;
+  --text-base: 0.85rem; /* most common body size */
+  --text-md: 0.9rem;
+  --text-lg: 1rem;
+  --text-xl: 1.1rem;
+  --text-2xl: 1.25rem;
+  --text-3xl: 1.5rem;
+  --text-4xl: 1.75rem;
+  --text-5xl: 2.5rem;
+  --weight-light: 300;
+  --weight-regular: 400;
+  --weight-medium: 500;
+  --weight-semibold: 600; /* most common UI weight */
+  --weight-bold: 700;
+  --weight-black: 900;
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
+  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
+  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);
+  --glow-brand: 0 0 20px rgba(255, 41, 41, 0.5), 0 0 40px rgba(255, 41, 41, 0.2); /* signature red glow — primary actions */
+  --glow-brand-soft: 0 0 24px rgba(255, 77, 77, 0.3);
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@moshevents/tokens",
+  "version": "0.1.0",
+  "description": "Mosh Design System — design tokens (CSS variables + Tailwind theme) for web/admin; iOS consumes the SwiftPM target.",
+  "type": "module",
+  "files": [
+    "dist/tokens.css",
+    "dist/theme.css"
+  ],
+  "exports": {
+    "./tokens.css": "./dist/tokens.css",
+    "./theme.css": "./dist/theme.css"
+  },
+  "scripts": {
+    "build": "node build.mjs",
+    "prepublishOnly": "node build.mjs",
+    "check": "node build.mjs && git --no-pager diff --exit-code dist Sources || (echo '\\noutputs are stale — run npm run build and commit' && exit 1)"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/moshorg/mosh-tokens.git"
+  }
+}