{"_id":"@artificialpoets/tokens","name":"@artificialpoets/tokens","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@artificialpoets/tokens","version":"0.1.0","license":"Apache-2.0","type":"module","description":"Poetic UI design tokens — pure CSS, zero dependencies. Works in any context: Next.js, WordPress, plain HTML.","repository":{"type":"git","url":"git+https://github.com/artificialpoets/poeticui.git","directory":"packages/tokens"},"publishConfig":{"registry":"https://registry.npmjs.org","access":"public"},"exports":{".":"./src/index.css","./palette":"./src/palette.css","./semantic":"./src/semantic.css","./typography":"./src/typography.css","./tailwind-theme":"./src/tailwind-theme.css","./themes/neutral":"./src/themes/neutral.css"},"scripts":{"build":"echo '@artificialpoets/tokens: source-only package, no build step'"},"_id":"@artificialpoets/tokens@0.1.0","gitHead":"15b2b3173c8c158c7934bb9f62017463ac3ce13a","bugs":{"url":"https://github.com/artificialpoets/poeticui/issues"},"homepage":"https://github.com/artificialpoets/poeticui#readme","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-hoB3tCDUUp5ObPiTYC7QezKPMW3E/LfQxEklAD/7/GAzNbfPd0uypNO8C5CW8xXzMjF92t3oVZeH5CEi3HQ0KQ==","shasum":"bdb29c5c0dc0262d85f3415c545267b61a66a313","tarball":"https://registry.npmjs.org/@artificialpoets/tokens/-/tokens-0.1.0.tgz","fileCount":8,"unpackedSize":37856,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFsp+uHD90Bm16ToFBT0Rg8oWRktQCnLkDpGkINFkxZLAiEAyBdQj49mtAts6lhEnuKqRb6K7Eee/tMH8itC/l9bQRE="}]},"_npmUser":{"name":"matysanchez","email":"saitam06@gmail.com"},"directories":{},"maintainers":[{"name":"matysanchez","email":"saitam06@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tokens_0.1.0_1779166008938_0.6287684654655743"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-19T04:46:48.772Z","0.1.0":"2026-05-19T04:46:49.067Z","modified":"2026-05-19T04:46:49.291Z"},"maintainers":[{"name":"matysanchez","email":"saitam06@gmail.com"}],"description":"Poetic UI design tokens — pure CSS, zero dependencies. Works in any context: Next.js, WordPress, plain HTML.","homepage":"https://github.com/artificialpoets/poeticui#readme","repository":{"type":"git","url":"git+https://github.com/artificialpoets/poeticui.git","directory":"packages/tokens"},"bugs":{"url":"https://github.com/artificialpoets/poeticui/issues"},"license":"Apache-2.0","readme":"# @artificialpoets/tokens\n\n> Pure-CSS design tokens. OKLCH palette, semantic roles, Tailwind v4 theme mapping, neutral default theme. Zero JS dependencies.\n\n```bash\nbun  add @artificialpoets/tokens\npnpm add @artificialpoets/tokens\nnpm  install @artificialpoets/tokens\nyarn add @artificialpoets/tokens\n```\n\n## What's inside\n\n- **Palette** — OKLCH-encoded base palette (26 hues × 11 shades)\n- **Semantic** — role-based CSS variables (`--primary`, `--foreground`, `--muted`, `--card`, `--destructive`, `--success`, etc.) for both `:root` and `.dark`\n- **Typography** — `<h1>`–`<h4>` base styles via `@layer base`. **No** `.type-h1` utility classes — HTML semantics carry the typography\n- **Tailwind v4 theme mapping** — `@theme inline { }` block that registers every semantic token as a Tailwind utility (`bg-primary`, `text-foreground`, `border-border`, etc.)\n- **Neutral default theme** — zinc-based, shadcn-compatible look out of the box\n\n## Setup\n\nYour app entry CSS (e.g. `globals.css`):\n\n```css\n@import \"tailwindcss\";\n@custom-variant dark (&:where(.dark, .dark *));\n@import \"@artificialpoets/tokens\";\n```\n\nThat's the whole install. Tokens are now available as Tailwind utility classes and as raw CSS variables (`var(--primary)`).\n\n## Theme contract — six slots rebrand the whole library\n\nEvery consumer (your app, a third-party brand, anyone) overlays exactly six CSS variables in both `:root` and `.dark` to rebrand:\n\n```css\n@layer base {\n  :root {\n    --primary: oklch(0.488 0.243 264);\n    --primary-foreground: oklch(0.985 0 0);\n    --ring: oklch(0.488 0.243 264);\n    --sidebar-primary: oklch(0.488 0.243 264);\n    --sidebar-primary-foreground: oklch(0.985 0 0);\n    --sidebar-ring: oklch(0.488 0.243 264);\n  }\n  .dark {\n    --primary: oklch(0.706 0.243 264);\n    --primary-foreground: oklch(0.205 0 0);\n    --ring: oklch(0.706 0.243 264);\n    --sidebar-primary: oklch(0.706 0.243 264);\n    --sidebar-primary-foreground: oklch(0.205 0 0);\n    --sidebar-ring: oklch(0.706 0.243 264);\n  }\n}\n```\n\nOptionally override `--secondary` if your brand has a second accent. Everything else (surface, semantic-role, structure tokens) inherits sensible defaults.\n\n## Subpath exports\n\nImport only the layers you need:\n\n| Subpath | What it is |\n|---|---|\n| `@artificialpoets/tokens` | Barrel — imports palette + semantic + typography + tailwind-theme in correct order |\n| `@artificialpoets/tokens/palette` | Just the OKLCH palette `--color-*` |\n| `@artificialpoets/tokens/semantic` | Just the semantic role tokens (`--primary`, `--foreground`, etc.) |\n| `@artificialpoets/tokens/typography` | Just the heading base styles |\n| `@artificialpoets/tokens/tailwind-theme` | Just the Tailwind v4 `@theme inline { }` mapping |\n| `@artificialpoets/tokens/themes/neutral` | The default neutral theme (zinc-based) |\n\n## Token categories\n\n```\nBRAND  (customizable per theme — main personalization surface)\n  --primary             --primary-foreground\n  --secondary           --secondary-foreground\n\nSEMANTIC ROLE  (meaning; theme may re-tint)\n  --destructive         --destructive-foreground\n  --success             --success-foreground\n  --warning             --warning-foreground\n  --info                --info-foreground\n\nSURFACE  (neutral; rare to override)\n  --background          --foreground\n  --card                --card-foreground\n  --popover             --popover-foreground\n  --muted               --muted-foreground\n  --accent              --accent-foreground\n\nSTRUCTURE\n  --border              --input              --ring              --radius\n\nCHART  (data viz; chromatic, not theme-brand)\n  --chart-1 … --chart-10\n\nSIDEBAR  (dark-first chrome — decoupled from theme mode)\n  --sidebar             --sidebar-foreground\n  --sidebar-primary     --sidebar-primary-foreground\n  --sidebar-accent      --sidebar-accent-foreground\n  --sidebar-border      --sidebar-ring\n```\n\nEvery token has explicit `:root` and `.dark` definitions; the design system inverts cleanly without component-level `dark:` prefixes.\n\n## Use without Tailwind\n\nTokens are pure CSS. You can consume them without Tailwind via the CSS variables directly:\n\n```css\n.my-button {\n  background: var(--primary);\n  color: var(--primary-foreground);\n}\n```\n\nOr via `@import \"@artificialpoets/tokens/semantic\"` if you only want the variables and not the Tailwind utility registration.\n\n## License\n\nApache-2.0. See [LICENSE](../../LICENSE) at the repo root.\n","readmeFilename":"README.md","_rev":"1-3763689da8368bda8a09fa98e018e594"}