{"_id":"@cirodam/ui-tokens","_rev":"6-a866b9a9010dace5750f011b3c16c03e","name":"@cirodam/ui-tokens","dist-tags":{"latest":"0.5.1"},"versions":{"0.1.0":{"name":"@cirodam/ui-tokens","version":"0.1.0","license":"MIT","_id":"@cirodam/ui-tokens@0.1.0","maintainers":[{"name":"cirodam","email":"contact@tylerdteague.com"}],"dist":{"shasum":"26bfd1385cd301058626d0c09f9cb311371081be","tarball":"https://registry.npmjs.org/@cirodam/ui-tokens/-/ui-tokens-0.1.0.tgz","fileCount":17,"integrity":"sha512-zQ7m/GFTSiQxSNN7sLT6OC/Ck8dKgv+7uqdcS9e17FG2sXx9rtC2eh2knMxI97uklvDijWEz7pTSqIrgDAOCdQ==","signatures":[{"sig":"MEUCIHsxkG5gTQ/KAFKEJ9qdRcStoSfNZ4Ubn753a9stZqIXAiEAtSjr0fD7y2YGnU84Ie/jtGP3hTuK/YxPW3SHz9zYMHQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9809},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"},"./tokens.css":"./dist/tokens.css","./package.json":"./package.json"},"gitHead":"beb980e6bb0fd3509139e5894d5ba79f930744c2","scripts":{"dev":"vite dev","build":"vite build && npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","package":"svelte-kit sync && svelte-package && publint","prepublishOnly":"npm run package"},"_npmUser":{"name":"cirodam","email":"contact@tylerdteague.com"},"_npmVersion":"10.9.2","description":"Shared design tokens and UI primitives for cirodam's small self-hosted SvelteKit apps","directories":{},"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.16","svelte":"^5.56.1","publint":"^0.3.24","typescript":"^6.0.3","svelte-check":"^4.6.0","@sveltejs/kit":"^2.63.0","@sveltejs/package":"^2.5.8","@sveltejs/adapter-auto":"^7.0.1","@sveltejs/vite-plugin-svelte":"^7.1.2"},"peerDependencies":{"svelte":"^5.0.0","@sveltejs/kit":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-tokens_0.1.0_1788822684622_0.8817594967711428","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@cirodam/ui-tokens","version":"0.3.0","license":"MIT","_id":"@cirodam/ui-tokens@0.3.0","maintainers":[{"name":"cirodam","email":"contact@tylerdteague.com"}],"dist":{"shasum":"d51a72045c31c71d0d143ed382eefdd0bbcff366","tarball":"https://registry.npmjs.org/@cirodam/ui-tokens/-/ui-tokens-0.3.0.tgz","fileCount":25,"integrity":"sha512-BJy0Gh99uCJ0Oj3XkhyTcM6BhqaCYHNea8V8s514x0WfOXJ2vIyrRZMmyf7zBQXxz6oz78mj8mFQlCXJhuwOWA==","signatures":[{"sig":"MEUCIEgAE8cEY6sD8FyGjLh4FGjHKxmnRugULzdxh6KtbQsQAiEA7qILY0sZRQk5/gbEGbeLalJY5TA+gw063Rk4glxEuoM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15063},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"},"./tokens.css":"./dist/tokens.css","./package.json":"./package.json"},"gitHead":"a86741885dbb79a240075431f24ec65ab283b1aa","scripts":{"dev":"vite dev","build":"vite build && npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","package":"svelte-kit sync && svelte-package && publint","prepublishOnly":"npm run package"},"_npmUser":{"name":"cirodam","email":"contact@tylerdteague.com"},"_npmVersion":"10.9.2","description":"Shared design tokens and UI primitives for cirodam's small self-hosted SvelteKit apps","directories":{},"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.16","svelte":"^5.56.1","publint":"^0.3.24","typescript":"^6.0.3","svelte-check":"^4.6.0","@sveltejs/kit":"^2.63.0","@sveltejs/package":"^2.5.8","@sveltejs/adapter-auto":"^7.0.1","@sveltejs/vite-plugin-svelte":"^7.1.2"},"peerDependencies":{"svelte":"^5.0.0","@sveltejs/kit":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-tokens_0.3.0_1788824743936_0.5256396802884393","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@cirodam/ui-tokens","version":"0.4.0","license":"MIT","_id":"@cirodam/ui-tokens@0.4.0","maintainers":[{"name":"cirodam","email":"contact@tylerdteague.com"}],"dist":{"shasum":"2681fca3ceb09df4ae47b04f91f545c1aa9865b3","tarball":"https://registry.npmjs.org/@cirodam/ui-tokens/-/ui-tokens-0.4.0.tgz","fileCount":35,"integrity":"sha512-p5NuaD68C5NAarLK1OX/oI5TEFqRNjHRLOqnPjucm0XuFikIHD4YMvszH3J7eTrB1ZwWBsEp/lIDA61OwCIKag==","signatures":[{"sig":"MEUCIQCMVZbMx8L2FxGCJNSRsx1+qLY8P0GYPmwLlnAqqcNkAQIgcstNxiFcAkysizJyDiIKHhMAGzmK0Jzr0f7Fwwb4fmI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19357},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"},"./tokens.css":"./dist/tokens.css","./package.json":"./package.json"},"gitHead":"4a69f5483705eba9c0061ddb3847c34975b51509","scripts":{"dev":"vite dev","build":"vite build && npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","package":"svelte-kit sync && svelte-package && publint","prepublishOnly":"npm run package"},"_npmUser":{"name":"cirodam","email":"contact@tylerdteague.com"},"_npmVersion":"10.9.2","description":"Shared design tokens and UI primitives for cirodam's small self-hosted SvelteKit apps","directories":{},"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.16","svelte":"^5.56.1","publint":"^0.3.24","typescript":"^6.0.3","svelte-check":"^4.6.0","@sveltejs/kit":"^2.63.0","@sveltejs/package":"^2.5.8","@sveltejs/adapter-auto":"^7.0.1","@sveltejs/vite-plugin-svelte":"^7.1.2"},"peerDependencies":{"svelte":"^5.0.0","@sveltejs/kit":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-tokens_0.4.0_1788825287393_0.9592310032721314","host":"s3://npm-registry-packages-npm-production"}},"0.4.1":{"name":"@cirodam/ui-tokens","version":"0.4.1","license":"MIT","_id":"@cirodam/ui-tokens@0.4.1","maintainers":[{"name":"cirodam","email":"contact@tylerdteague.com"}],"dist":{"shasum":"6b25489f6d9a89fc148940a217e819a99b328734","tarball":"https://registry.npmjs.org/@cirodam/ui-tokens/-/ui-tokens-0.4.1.tgz","fileCount":35,"integrity":"sha512-PM/tjPLkcB+mD/Ryf8JF7vAEu+DjwKhT4bOnlfiAU782EH/uscbQl2Wa4eYv/dXE/nTMI/MI8AQbiUN2PyCWnA==","signatures":[{"sig":"MEYCIQC/PZFu4P1zvfuelUvd0FYnWBPN+iTl3vN9yRA+DC2MLgIhAKFEMXnS9LiZmMR3J2h+tY78vryxDvZTnw9SlRH0tpQ8","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19421},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"},"./tokens.css":"./dist/tokens.css","./package.json":"./package.json"},"gitHead":"d7e2ccbbc2b47af65b1034046694d45d049a9eea","scripts":{"dev":"vite dev","build":"vite build && npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","package":"svelte-kit sync && svelte-package && publint","prepublishOnly":"npm run package"},"_npmUser":{"name":"cirodam","email":"contact@tylerdteague.com"},"_npmVersion":"10.9.2","description":"Shared design tokens and UI primitives for cirodam's small self-hosted SvelteKit apps","directories":{},"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.16","svelte":"^5.56.1","publint":"^0.3.24","typescript":"^6.0.3","svelte-check":"^4.6.0","@sveltejs/kit":"^2.63.0","@sveltejs/package":"^2.5.8","@sveltejs/adapter-auto":"^7.0.1","@sveltejs/vite-plugin-svelte":"^7.1.2"},"peerDependencies":{"svelte":"^5.0.0","@sveltejs/kit":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-tokens_0.4.1_1788826076350_0.8236836382386439","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"name":"@cirodam/ui-tokens","version":"0.5.0","license":"MIT","_id":"@cirodam/ui-tokens@0.5.0","maintainers":[{"name":"cirodam","email":"contact@tylerdteague.com"}],"dist":{"shasum":"8c2dbda5bd3bb1adb3e669ddb73c755b47857e2f","tarball":"https://registry.npmjs.org/@cirodam/ui-tokens/-/ui-tokens-0.5.0.tgz","fileCount":35,"integrity":"sha512-dGJ4hl0pjVGPP27cvGqqTmTM72f18yVL10Mn9760mOV5Z+lrghlM6KN3Vu01VumGhLyvHZE8vsHcwPM6mPnPsg==","signatures":[{"sig":"MEUCIAJh06GF8tKtupctxdg8XVKdxcbYjBE+eYWSXNfBQF0yAiEAgVMY5u7Ar2IRYeizCkcV5Y4v+uKFyvYwTZBUGoXvujA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":21700},"type":"module","types":"./dist/index.d.ts","svelte":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"},"./tokens.css":"./dist/tokens.css","./package.json":"./package.json"},"gitHead":"afa826547dd9a7a2920414baf941f6fb0b9d0330","scripts":{"dev":"vite dev","build":"vite build && npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json","package":"svelte-kit sync && svelte-package && publint","prepublishOnly":"npm run package"},"_npmUser":{"name":"cirodam","email":"contact@tylerdteague.com"},"_npmVersion":"10.9.2","description":"Shared design tokens and UI primitives for cirodam's small self-hosted SvelteKit apps","directories":{},"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^8.0.16","svelte":"^5.56.1","publint":"^0.3.24","typescript":"^6.0.3","svelte-check":"^4.6.0","@sveltejs/kit":"^2.63.0","@sveltejs/package":"^2.5.8","@sveltejs/adapter-auto":"^7.0.1","@sveltejs/vite-plugin-svelte":"^7.1.2"},"peerDependencies":{"svelte":"^5.0.0","@sveltejs/kit":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ui-tokens_0.5.0_1788884365975_0.998901497017801","host":"s3://npm-registry-packages-npm-production"}},"0.5.1":{"name":"@cirodam/ui-tokens","version":"0.5.1","description":"Shared design tokens and UI primitives for cirodam's small self-hosted SvelteKit apps","license":"MIT","type":"module","svelte":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","svelte":"./dist/index.js","default":"./dist/index.js"},"./tokens.css":"./dist/tokens.css","./package.json":"./package.json"},"scripts":{"dev":"vite dev","build":"vite build && npm run package","package":"svelte-kit sync && svelte-package && publint","prepublishOnly":"npm run package","check":"svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"},"peerDependencies":{"svelte":"^5.0.0","@sveltejs/kit":"^2.0.0"},"devDependencies":{"@sveltejs/adapter-auto":"^7.0.1","@sveltejs/kit":"^2.63.0","@sveltejs/package":"^2.5.8","@sveltejs/vite-plugin-svelte":"^7.1.2","publint":"^0.3.24","svelte":"^5.56.1","svelte-check":"^4.6.0","typescript":"^6.0.3","vite":"^8.0.16"},"_id":"@cirodam/ui-tokens@0.5.1","gitHead":"0ce15e2faad558f99d0eb2e0a087cd9c90a19ce7","_nodeVersion":"22.17.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-tr0B9z/iY/QTTKxkwPM62x0JEIxm+vjr46/GRBcI3Tz/dHm0m6mb2zLi67mL3XpNhHzMX9FEHJ1Zar6FwCUKFw==","shasum":"7c6489ad95b73ad27d1e5cfd8456c913fb16f89c","tarball":"https://registry.npmjs.org/@cirodam/ui-tokens/-/ui-tokens-0.5.1.tgz","fileCount":35,"unpackedSize":21733,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCQhaL+HdZbDTZI2rV+tobn7/UcXLN0/tP7N4UvlZZdGwIgNe12e6JoyU5usp+/aIeRdkAKYRuy5BxoObroXmxe1EE="}]},"_npmUser":{"name":"cirodam","email":"contact@tylerdteague.com"},"directories":{},"maintainers":[{"name":"cirodam","email":"contact@tylerdteague.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui-tokens_0.5.1_1788983793846_0.45990241129926734"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-07T23:11:24.433Z","modified":"2026-09-09T19:56:34.169Z","0.1.0":"2026-09-07T23:11:24.749Z","0.3.0":"2026-09-07T23:45:44.061Z","0.4.0":"2026-09-07T23:54:47.544Z","0.4.1":"2026-09-08T00:07:56.478Z","0.5.0":"2026-09-08T16:19:26.125Z","0.5.1":"2026-09-09T19:56:33.991Z"},"license":"MIT","description":"Shared design tokens and UI primitives for cirodam's small self-hosted SvelteKit apps","maintainers":[{"name":"cirodam","email":"contact@tylerdteague.com"}],"readme":"# @cirodam/ui-tokens\n\nShared CSS design tokens and a handful of UI primitives for cirodam's small\nself-hosted SvelteKit apps (tylerdteague_v2, Mirror, ...), extracted after\nnoticing the same `app.css` and the same per-page `<style>` boilerplate\n(page wrapper, form field layout, error/success text, empty states) getting\ncopy-pasted — and drifting — across repos.\n\n## What's here\n\n- **`@cirodam/ui-tokens/tokens.css`** — the CSS custom properties\n  (`--color-bg`, `--color-fg`, `--color-accent`, etc., with a\n  `prefers-color-scheme: dark` override) plus base element rules for\n  `body`/`h1-h3`/`a`/`button`/`input`/`select`/`textarea`/focus states.\n  Import it once, e.g. from your root `+layout.svelte`.\n- **Components** (`import { ... } from '@cirodam/ui-tokens'`):\n  - `Page` — page wrapper (`padding` + configurable `maxWidth`)\n  - `PageHeader` — title + optional `action` snippet, e.g. a page-level button\n  - `Field` — label + form control layout\n  - `FormMessage` — error/success text (`variant=\"error\" | \"success\"`)\n  - `EmptyState` — muted \"nothing here yet\" text\n  - `ConfirmForm` — a `<form>` with `use:enhance`, a `confirm()` guard on submit, and an optional `enctype` for multipart forms\n  - `SummaryStat` — bordered label/value stat card\n  - `Card` — bordered container with configurable `padding`\n  - `ListRow` — a divider-separated `<li>` for rows sharing one `Card`\n  - `Badge` — small status pill (`variant=\"neutral\" | \"success\" | \"danger\"`)\n  - `Navbar` — top bar with `brand`/`brandHref` and a `children` snippet for the right-hand side\n  - `Sidebar` — nav list (`items`), optional `brand`, and a `footer` snippet\n  - `AccountMenu` — a `<details>`-based dropdown container: pass `username` and put whatever links/forms the app needs as `children` (own account link, app-specific links, a logout form, ...). Handles the open/close affordance (click, focus-out, Escape) and styles its `children`'s `a`/`button` elements as uniform menu items; each app decides what actually goes in the menu.\n  - `Footer` — bottom bar wrapping `children`\n  - `AuthCard` — centered card shell for login/signup/setup pages\n\nAn app that doesn't want a token/primitive here is free to keep its own\ncustom CSS alongside it — this isn't meant to be exhaustive, just the pieces\nthat were actually duplicated.\n\n## What's deliberately not here\n\nAnything app-specific: no SvelteKit routes, no auth/session logic (that\nlives in each app, copied from `sveltekit-postgres-starter`), no\napp-specific color palettes (SimpleBlog's own token set is a deliberate\ndivergence, not something this package tries to unify).\n\n## Using it in a consuming app\n\n```\nnpm install @cirodam/ui-tokens\n```\n\n```svelte\n<!-- src/routes/+layout.svelte -->\n<script lang=\"ts\">\n\timport '@cirodam/ui-tokens/tokens.css';\n</script>\n```\n\n```svelte\n<script lang=\"ts\">\n\timport { Page, Field, FormMessage } from '@cirodam/ui-tokens';\n</script>\n```\n\n## Developing\n\n- `npm run dev` — runs the demo page at `src/routes/+page.svelte` (not published)\n- `npm run build` — builds the publishable package into `dist/` via `@sveltejs/package`, then lints it with `publint`\n- `npm run check` — svelte-check\n\n## Publishing\n\n```\nnpm run build\nnpm publish --access public\n```\n\nBump `version` in `package.json` first (semver — this is consumed by\nmultiple apps, so breaking changes to a component's props should be a\nmajor bump).\n","readmeFilename":"README.md"}