{"_id":"@meddleware/design-tokens","_rev":"8-02d17672a6a7ba7cd614b8a87b911b56","name":"@meddleware/design-tokens","dist-tags":{"latest":"0.1.5"},"versions":{"0.1.1":{"name":"@meddleware/design-tokens","version":"0.1.1","license":"0BSD","_id":"@meddleware/design-tokens@0.1.1","maintainers":[{"name":"primitivelineworks","email":"meddleware@proton.me"}],"dist":{"shasum":"25a54b1523f70dd04ee3bb5187451eaec001774e","tarball":"https://registry.npmjs.org/@meddleware/design-tokens/-/design-tokens-0.1.1.tgz","fileCount":6,"integrity":"sha512-hBwxx9n34fCHGF2yNUEJL7AHGVezY8/HdLdcWpsdgXNi7Q1jhSbMEWuxPqfLalftWsMs/tfmS0iEA1GVg3/aYw==","signatures":[{"sig":"MEUCIEpoHZQ+EDHYTYjS8baDAZuFBG/TEi+oTIHEH4FniOliAiEAowJBzProCtzLG8fOVzPYx0ipUGL1UBhTTHshaCoJsNU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31534},"type":"module","exports":{".":{"types":"./src/index.ts","default":"./src/index.ts"},"./tokens.css":"./src/tokens.css","./tokens.json":"./src/tokens.json"},"_npmUser":{"name":"primitivelineworks","email":"meddleware@proton.me"},"_npmVersion":"11.12.1","description":"Framework-agnostic design tokens (Oxblood/Indigo palette) for @meddleware UIs — CSS custom properties + JS/JSON exports.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.15.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.1.1_1787833406611_0.09318061417844214","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@meddleware/design-tokens","version":"0.1.2","license":"0BSD","_id":"@meddleware/design-tokens@0.1.2","maintainers":[{"name":"primitivelineworks","email":"meddleware@proton.me"}],"dist":{"shasum":"4df7a3b00249cbe8c604513bf8716cff49cad424","tarball":"https://registry.npmjs.org/@meddleware/design-tokens/-/design-tokens-0.1.2.tgz","fileCount":6,"integrity":"sha512-BRNI+wV+KSbUwvTxYWFdzMxxDBk80qfbCEsHM9VFykmttlosiJ7ayq1Q3nB0u6B8CHqnaN/ne7hkfKc1yzDEUw==","signatures":[{"sig":"MEUCIQCUI3CLmADM7I4f1sdlPx7IbSFXl/h2V4rSkqXC8t5llQIgefFI7UanPZxsPr9lvA0YDw0u7Uyhzrq4MhdnmkCuxYw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31644},"type":"module","exports":{".":{"types":"./src/index.ts","default":"./src/index.ts"},"./tokens.css":"./src/tokens.css","./tokens.json":"./src/tokens.json"},"gitHead":"9f02ecc9638ed9eec057d8d71dcfc70f36bfd141","scripts":{"type-check":"tsc --noEmit"},"_npmUser":{"name":"primitivelineworks","email":"meddleware@proton.me"},"_npmVersion":"11.12.1","description":"Framework-agnostic design tokens (Oxblood/Indigo palette) for @meddleware UIs — CSS custom properties + JS/JSON exports.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.15.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.7.3"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.1.2_1788014264128_0.29019955864583147","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@meddleware/design-tokens","version":"0.1.3","license":"0BSD","_id":"@meddleware/design-tokens@0.1.3","maintainers":[{"name":"primitivelineworks","email":"meddleware@proton.me"}],"dist":{"shasum":"6736c1e691b58107805dd7bbbf1717d87f7377f7","tarball":"https://registry.npmjs.org/@meddleware/design-tokens/-/design-tokens-0.1.3.tgz","fileCount":7,"integrity":"sha512-yQ7aAxBayUpZR/UPW5uY6rYrEUGM7RbUyD8x5LtwIv2vG6BaKikrgV2/77vbGciRXEcRCco3P7NepfR8eeyztA==","signatures":[{"sig":"MEYCIQDMN8iEn2A3beQr+xC94mTKKY5c6mDqzwmcrVDOeYQN/gIhAMULg4djzAw84TQNIXKVdwrIhJOTwV0QH4iO+u3ryROk","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEQCIE2Y7ESHZ8fgr33zb8ki13rjg3uokChIMooeTi0Pr47gAiAPpMrYgwHYOKiEoQyFc81Z2GIBvSsz45oKcekeolTTsw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":39497},"type":"module","exports":{".":{"types":"./src/index.ts","default":"./src/index.ts"},"./tokens.css":"./src/tokens.css","./seasons.css":"./src/seasons.css","./tokens.json":"./src/tokens.json"},"gitHead":"19428ceac00aeb838b8307e79dd33cdfbeab4629","scripts":{"check:sync":"node scripts/check-token-sync.mjs","type-check":"tsc --noEmit"},"_npmUser":{"name":"primitivelineworks","email":"meddleware@proton.me"},"_npmVersion":"12.0.2","description":"Framework-agnostic design tokens (Oxblood/Indigo palette) for @meddleware UIs — CSS custom properties + JS/JSON exports.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.15.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"~6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.1.3_1789921527145_0.8040595206494878","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@meddleware/design-tokens","version":"0.1.4","license":"0BSD","_id":"@meddleware/design-tokens@0.1.4","maintainers":[{"name":"primitivelineworks","email":"meddleware@proton.me"}],"dist":{"shasum":"b799f345792331f05af5cde84266d0b34ff319db","tarball":"https://registry.npmjs.org/@meddleware/design-tokens/-/design-tokens-0.1.4.tgz","fileCount":7,"integrity":"sha512-1OYT/aaxyfiftq5GlI3CKxnpy4AGfffAWe4AHbK6CXh4emMDF6bTb/Q94ds4piTLCep4iLC09pmfck7Y7j3r3w==","signatures":[{"sig":"MEUCIQCz6PTu2HAJAoqFpTM72fqmL5RK5MPYvtuWHaE8IazmFAIgbW/CPJU6d2CedNQ/ITuLkF38Hb9GtxUvcGv8nCZBlE4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEYCIQDKkiHp6HvF4TxEsrr58W4Qq7Xhu+T7sH6aDYqJCoFNJAIhAI/QRZQZVToTAyZRujMEvxOnupv4TA+hTljN2sIp0GHm","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":41270},"type":"module","exports":{".":{"types":"./src/index.ts","default":"./src/index.ts"},"./tokens.css":"./src/tokens.css","./seasons.css":"./src/seasons.css","./tokens.json":"./src/tokens.json"},"gitHead":"ce6bb77d2015984a1e9dc80a75f142581cfb874b","scripts":{"check:sync":"node scripts/check-token-sync.mjs","type-check":"tsc --noEmit"},"_npmUser":{"name":"primitivelineworks","email":"meddleware@proton.me"},"_npmVersion":"12.0.2","description":"Framework-agnostic design tokens (Oxblood/Indigo palette) for @meddleware UIs — CSS custom properties + JS/JSON exports.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"24.15.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"~6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.1.4_1789956780899_0.4473601770176059","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"_id":"@meddleware/design-tokens@0.1.5","dist":{"shasum":"f45dbc357e295bb01993235a7deedd6da49cc101","tarball":"https://registry.npmjs.org/@meddleware/design-tokens/-/design-tokens-0.1.5.tgz","fileCount":7,"integrity":"sha512-0UApyta3iojHEP2qbqMGPlHWMDVWmzsDqRHp7QwF7I0+zb3joHK+97rQtcPkUE097EfZc5AzoJjHy/krRp2UNg==","signatures":[{"sig":"MEUCIDFv2zOLniODQvF2KtdM3utRCQl0jocynnnibhvd8K+lAiEA8lTH89dwSL5yBqv9gERen11sLNvMExZPy6dDuiCRXck=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIG+PaWS3l5/Mu2aT+KacP6Ot+qGJLea6rMR3KjReb8wwAiASO4w4o9iyq9La/wMQOyzcTTWMULAlRhRvWHDFIWbhMg=="}],"unpackedSize":41277},"name":"@meddleware/design-tokens","type":"module","exports":{".":{"types":"./src/index.ts","default":"./src/index.ts"},"./tokens.css":"./src/tokens.css","./seasons.css":"./src/seasons.css","./tokens.json":"./src/tokens.json"},"gitHead":"2e71f1595c06b42516f64c2f59fcea4d8b679a8a","license":"0BSD","scripts":{"check:sync":"node scripts/check-token-sync.mjs","type-check":"tsc --noEmit"},"version":"0.1.5","_npmUser":{"name":"primitivelineworks","email":"meddleware@proton.me"},"_npmVersion":"12.0.2","description":"Framework-agnostic design tokens (Oxblood/Indigo palette) for @meddleware UIs — CSS custom properties + JS/JSON exports.","directories":{},"maintainers":[{"name":"primitivelineworks","email":"meddleware@proton.me"}],"sideEffects":["*.css"],"_nodeVersion":"24.15.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"~6.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-tokens_0.1.5_1790007563572_0.37973719729357547"}}},"time":{"created":"2026-08-27T12:23:26.450Z","modified":"2026-09-21T16:19:23.844Z","0.1.0":"2026-08-27T11:28:27.154Z","0.1.1":"2026-08-27T12:23:26.766Z","0.1.2":"2026-08-29T14:37:44.276Z","0.1.3":"2026-09-20T16:25:27.224Z","0.1.4":"2026-09-21T02:13:00.999Z","0.1.5":"2026-09-21T16:19:23.657Z"},"license":"0BSD","description":"Framework-agnostic design tokens (Oxblood/Indigo palette) for @meddleware UIs — CSS custom properties + JS/JSON exports.","maintainers":[{"name":"primitivelineworks","email":"meddleware@proton.me"}],"readme":"# @meddleware/design-tokens\n\nFramework-agnostic design tokens for the `@meddleware` UIs — a **warm-neutral canvas with\nfunctional primary/rainbow accents**, sacred-geometry spacing/type scales, and optional seasonal\ntheming. Delivered as CSS custom properties plus TypeScript/JSON exports.\n\n## Philosophy (brief, non-dogmatic)\n\nDesign recedes; content dominates. A few principles shape the tokens — you never have to think about\nthem to use the package, but they explain the choices:\n\n- **Sacred geometry as invisible structure.** The type and spacing scales derive from the golden\n  ratio (φ ≈ 1.618) and Fibonacci. The maths governs rhythm; it is never drawn as ornament.\n- **Colour is a warm-neutral canvas + functional accents.** Primary/rainbow hues (red, blue, yellow,\n  green, orange) are used *functionally* — accents, status, focus — as human universals, not as a\n  brand identity. We avoid royalty/priesthood signalling: **no gold, no purple, no black+gold**.\n- **Controlled imperfection over corporate polish.** Subtle noise and intentional (not broken)\n  asymmetry are available as opt-in utilities.\n- **Open and transparent.** CSS-native, no build step, no external dependencies, `0BSD`.\n\n## Two-layer naming discipline\n\n- **Palette / ramp layer** — colour-**named** (`--mw-red-500`). A ramp legitimately names a hue. The\n  palette is *expandable*; older brand ramps (`--mw-oxblood-*`, `--mw-gold-*`, …) remain as available\n  swatches but are **not** referenced by any role.\n- **Semantic / role layer** — colour-**agnostic** (`--accent`, `--warning`, `--focus-ring`,\n  `--space-md`). **Components use only these.** Revaluing a role later never forces a rename — never\n  name a role after a colour.\n\n## Installation\n\n```sh\nnpm install @meddleware/design-tokens\n```\n\n## Quick start\n\nImport the CSS once at your app entry. Seasons are optional.\n\n```ts\nimport '@meddleware/design-tokens/tokens.css'    // required — base light/dark theme\nimport '@meddleware/design-tokens/seasons.css'   // optional — enables data-season overrides\n```\n\nThen use the semantic roles and scale tokens in your styles:\n\n```css\n.card {\n  background: var(--surface);\n  border: 1px solid var(--border);\n  border-radius: var(--radius);\n  color: var(--text);\n  padding: var(--space-md);          /* Fibonacci spacing scale */\n  font-size: var(--font-size-base);  /* φ type scale */\n}\n.button-primary { background: var(--primary); color: var(--primary-contrast); }\n\n.status-ok   { color: var(--ok); }\n.status-warn { color: var(--warning); }   /* functional yellow — not gold */\n.status-err  { color: var(--danger); }\n.status-info { color: var(--info); }\n```\n\n## Theme hierarchy\n\n```text\nSeasonal tokens (optional, highest priority)   [data-season=\"spring|summer|autumn|winter\"]\n        ↓  silent fallback\nPrimary light / dark tokens (required, always present)   data-theme=\"dark\"\n        ↓\nComponent-level overrides (in your components)\n```\n\nEach interactive/status role reads a seasonal override first, then falls back silently:\n\n```css\n--accent: var(--season-accent, var(--mw-red-500));\n```\n\nIf no season is active, `--season-accent` is simply undefined and the primary fallback is used —\n**silently, with no console errors and no broken layout** (we deliberately do not register these with\n`@property`, so an undefined seasonal var fails silent).\n\n## Seasonal theming\n\n### 1. Light/dark only (no seasonal code)\n\nDo nothing. Import `tokens.css`, optionally toggle `data-theme=\"dark\"`. Every role uses its primary\nfallback. You never need `seasons.css`.\n\n### 2. Enable a season\n\nImport `seasons.css` and set the attribute on `<html>` (or any ancestor):\n\n```html\n<html data-season=\"autumn\">          <!-- autumn accents on the light canvas -->\n<html data-theme=\"dark\" data-season=\"winter\">  <!-- winter accents on the dark canvas -->\n```\n\nSeasons set only the **accent/status** roles; `data-theme` still owns the neutral canvas, so the two\ncompose. Remove the attribute (or don't import `seasons.css`) to opt out — silently.\n\n### 3. Override one token while keeping the seasonal fallback\n\nBecause roles read `var(--season-*, <fallback>)`, you can set your own `--season-*` value (globally or\nscoped) without importing `seasons.css` at all:\n\n```css\n/* Brand-tune just the accent; everything else keeps its fallback. */\n:root { --season-accent: #0aa1dd; }\n```\n\nOr scope it to a subtree:\n\n```css\n.promo { --season-accent: var(--mw-green-500); }  /* accents inside .promo only */\n```\n\n## Token reference\n\n### Semantic roles (use these in components)\n\nValues swap automatically between light and dark, and are overridable per season.\n\n| Token | Light fallback | Dark fallback | Role |\n| --- | --- | --- | --- |\n| `--bg` | `#f7f4f1` | `#120e10` | Page / window background |\n| `--surface` | `#ffffff` | `#1c1618` | Card, modal, elevated panel |\n| `--lift` | `#efeae6` | `#241c1f` | Hover / raised surface |\n| `--border` | `#ded6cf` | `#372b2e` | Dividers, outlines, borders |\n| `--text` | `#201b19` | `#f2eae6` | Primary body text |\n| `--muted` | `#6e635c` | `#b7a9a3` | Secondary / helper text |\n| `--accent` / `--primary` | red `#d92d20` | red `#ef5a4c` | Primary interactive (links, CTAs, badges) |\n| `--accent-contrast` / `--primary-contrast` | `#ffffff` | `#201b19` | Text on accent |\n| `--secondary` | blue `#1d6fe0` | blue `#6ea8fe` | Secondary interactive |\n| `--secondary-contrast` | `#ffffff` | `#0b0809` | Text on secondary |\n| `--danger` | `#b3261e` | `#f08a7e` | Error / destructive |\n| `--warning` | yellow `#e0a500` | yellow `#f4d84f` | Caution / degraded |\n| `--ok` | green `#1f9254` | green `#5bb392` | Success / healthy |\n| `--info` | blue `#1d6fe0` | blue `#6ea8fe` | Informational |\n| `--highlight` | yellow `#f2c744` | yellow `#f4d84f` | Emphasis (the old \"premium\" role) |\n| `--focus-ring` | blue `#1d6fe0` | blue `#6ea8fe` | Visible focus outline (distinct from accent) |\n| `--radius` / `--radius-sm` / `--radius-lg` | `10 / 6 / 16px` | — | Corner radius |\n\n### Functional primary + rainbow ramps\n\nThe accents the roles resolve to. Values are **derived and tunable** — nudge to taste; the roles do\nnot change name when you do.\n\n| Ramp | Stops |\n| --- | --- |\n| `--mw-red-*` | `300 #ef5a4c` · `500 #d92d20` · `600 #a81d13` |\n| `--mw-orange-*` | `400 #f08a3c` · `500 #e06d10` · `600 #b0530c` |\n| `--mw-yellow-*` | `300 #f4d84f` · `400 #f2c744` · `500 #e0a500` · `600 #a87c00` |\n| `--mw-green-*` | `300 #5bb392` · `500 #1f9254` · `600 #16713f` |\n| `--mw-blue-*` | `300 #6ea8fe` · `500 #1d6fe0` · `600 #1657b0` |\n\n### Sacred-geometry scales\n\nColour-agnostic, `calc()`-derived from ratio constants (no magic numbers).\n\n| Group | Tokens |\n| --- | --- |\n| Ratios | `--ratio-phi` (1.618) · `--ratio-phi-inv` (0.618) · `--ratio-phi-root` (√φ 1.272) · `--split-major` (61.8%) · `--split-minor` (38.2%) |\n| Type scale | `--font-size-xs … --font-size-3xl` (base 1rem, climbing by √φ; two steps = one φ octave) |\n| Leading / tracking | `--leading-tight/normal/loose` · `--tracking-tight/normal/wide` |\n| Spacing | `--space-3xs … --space-3xl` (Fibonacci ×0.25rem: 0.25·0.5·0.75·1.25·2·3.25·5.25·8.5·13.75) |\n\n### Chaos / motion tokens\n\n| Token | Role |\n| --- | --- |\n| `--noise-overlay` / `--noise-opacity` | Subtle CSS-native SVG turbulence for backgrounds (see `.mw-noise` in `@meddleware/ui`) |\n| `--hero-offset` / `--gap-irregular` | φ-derived intentional-asymmetry hooks |\n| `--transition-base` / `--transition-slow` | Human easing (deliberately not \"slick\") |\n\n### Legacy brand ramps + secondary palette (available swatches, not used by roles)\n\n`--mw-oxblood-*`, `--mw-indigo-*`, `--mw-gold-*`, `--mw-pine-*`, `--mw-plum-*`, `--mw-copper-*` remain\ndefined so the palette stays rich and nothing breaks, but **no semantic role references them** — the\ndesign philosophy avoids gold/purple as identity. Prefer the functional primaries + roles above.\n\n### Warm neutrals, panel palettes, shape/type constants\n\n`--mw-neutral-000…950`, `--mw-panel-{dark,light}-*` (theme-independent, for `variant`-aware layout\nshell components), `--mw-radius*`, `--mw-font-sans/mono`, `--mw-header-height`, `--mw-sidebar-width`\nare unchanged.\n\n## Colour mode\n\nLight is the default; add `data-theme=\"dark\"` to `<html>` for dark mode. `@meddleware/ui` ships a\n`ColorModeControl` + `useColorMode()` that manage the attribute and persist to `localStorage`.\n\n## JavaScript / TypeScript API\n\n```ts\nimport tokens, { brand, primary, semantic, neutral, ratio, space, designTokens }\n  from '@meddleware/design-tokens'\n\nprimary.blue['500']   // '#1d6fe0'\nsemantic.light.accent // '#d92d20'  (no-season default)\nratio.phi             // 1.618\nspace.md              // '2rem'\nneutral['800']        // '#201b19'\n```\n\n| Export | Description |\n| --- | --- |\n| `primary` | Functional primary ramps: `red`, `orange`, `yellow`, `green`, `blue` |\n| `brand` | Legacy brand ramps (`oxblood`, `indigo`, `gold`) — retained swatches |\n| `semantic` | No-season resolved values per theme (`light`, `dark`) |\n| `neutral` | Warm neutral scale `000`–`950` |\n| `ratio` | φ ratio constants |\n| `space` | Fibonacci spacing scale |\n| `designTokens` / `default` | The complete token tree |\n| `ColorMode` | type `'light' \\| 'dark' \\| 'system'` |\n\n## Migration note (internal)\n\nNo published external consumers, so no backwards-compat shims and no version bump is required — just\nkeep everything in lockstep:\n\n- `--gold` (semantic) is **removed**; use `--warning` (caution) or `--highlight` (emphasis).\n- `--accent`/`--primary` are now **red**, `--secondary` is **blue** (were oxblood/indigo).\n- New: `--warning`, `--info`, `--highlight`, `--focus-ring`, the `--space-*`/`--font-size-*` scales,\n  `--noise-*`, `--transition-*`, and the functional primary ramps.\n- Legacy `--mw-oxblood/indigo/gold/plum/copper-*` ramps still resolve (kept as swatches) but should\n  not be referenced by new code.\n\n## Bundler notes\n\n`\"sideEffects\": [\"*.css\"]` keeps CSS imports from being tree-shaken. The package ships `src/`\ndirectly (no build step); consumers' bundlers process the CSS/TS/JSON. `check:sync`\n(`scripts/check-token-sync.mjs`, run in CI) guards that `tokens.css` ↔ `tokens.json` ↔ `index.ts`\nstay in sync and that every season overrides the same role set.\n\n## Publishing\n\nCI publishes on `v*` git tags via `.github/workflows/publish.yml` using **npm trusted publishing**\n(OIDC) — no long-lived tokens. Bump `version`, add a `CHANGELOG.md` entry, tag, and push.\n\n## License\n\n[0BSD](./LICENSE) — BSD Zero Clause License.\n","readmeFilename":"README.md"}