{"_id":"@campfire-interactive/design-tokens","_rev":"9-dbc7bacc1d370dc8946977b1c808534b","name":"@campfire-interactive/design-tokens","dist-tags":{"latest":"0.4.0"},"versions":{"0.1.1":{"name":"@campfire-interactive/design-tokens","version":"0.1.1","_id":"@campfire-interactive/design-tokens@0.1.1","maintainers":[{"name":"luke-campfire","email":"lukem@cfi2.com"},{"name":"karthi37","email":"karthikk@cfi2.com"}],"dist":{"shasum":"d249787f1ce7677808ecdac44d3bd36bbf906f2b","tarball":"https://registry.npmjs.org/@campfire-interactive/design-tokens/-/design-tokens-0.1.1.tgz","fileCount":2,"integrity":"sha512-+spSHfFwpj0S8RconEl5HaEwd+2RsS1lsrDV+WWFuEs3g//uF+RiazuP6UeQ3Ui0fp1rWnksmjR5swLUXczWEA==","signatures":[{"sig":"MEQCIGeL7ijLM2LB0iVdJodOQv+TnX3YdxrwFRj/y2OKqcEQAiBiVfO33+NIeRil1hjXHiBGY/PZqQQp3rYzyvm/FqWJNw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2990},"main":"src/tokens.css","exports":{".":"./src/tokens.css","./tokens.css":"./src/tokens.css","./tokens.json":"./src/tokens.json"},"gitHead":"b5a3fe2f20ad2cfdcf6eb9b3ec7d36315a8fd783","_npmUser":{"name":"luke-campfire","email":"lukem@cfi2.com"},"_npmVersion":"11.9.0","description":"Shared design tokens for Campfire Suite","directories":{},"_nodeVersion":"24.14.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.1.1_1776285034459_0.4310069911092054","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@campfire-interactive/design-tokens","version":"0.2.0","_id":"@campfire-interactive/design-tokens@0.2.0","maintainers":[{"name":"priyacfi","email":"priya@cfi2.com"},{"name":"luke-campfire","email":"lukem@cfi2.com"},{"name":"karthi37","email":"karthikk@cfi2.com"},{"name":"udaybandaru","email":"udayb@cfi2.com"},{"name":"georgeb-campfire","email":"georgeb@cfi2.com"},{"name":"susitha","email":"ds.susitha@gmail.com"}],"dist":{"shasum":"8d6e82257deefc7f3c4c96d9fcaf271982e5781a","tarball":"https://registry.npmjs.org/@campfire-interactive/design-tokens/-/design-tokens-0.2.0.tgz","fileCount":4,"integrity":"sha512-p+2zv4IaUvFKB5lCPqqwiCXH+Hp/8tc+NaCubf+SUSXT1ATVRhPdZn1rG8ZC2duCUAzs+JHxiVS6J/0uN4WoMQ==","signatures":[{"sig":"MEYCIQDSo+Zaz+Yrt3Adh/omLLXwawK3BLvBDGx+RxpgZIA77gIhAPtI1lAyFl3GAWllpAnaLSmB4fOSEbTrKCZSSy+60MwC","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":44217},"main":"src/tokens.css","exports":{".":"./src/tokens.css","./tokens.css":"./src/tokens.css","./tokens.json":"./src/tokens.json"},"gitHead":"7cc5846a173180c9bf75f4edadc8d79201516811","scripts":{"build":"node scripts/generate.mjs","prepublishOnly":"node scripts/guard-publish.mjs && node scripts/generate.mjs"},"_npmUser":{"name":"georgeb-campfire","email":"georgeb@cfi2.com"},"_npmVersion":"11.13.0","description":"Shared design tokens for Campfire Suite — raw scales, semantic roles, per-app accent hooks, and an opt-in dark theme","directories":{},"_nodeVersion":"24.16.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.2.0_1789139912415_0.7370452604668682","host":"s3://npm-registry-packages-npm-production"}},"0.3.0":{"name":"@campfire-interactive/design-tokens","version":"0.3.0","_id":"@campfire-interactive/design-tokens@0.3.0","maintainers":[{"name":"priyacfi","email":"priya@cfi2.com"},{"name":"luke-campfire","email":"lukem@cfi2.com"},{"name":"karthi37","email":"karthikk@cfi2.com"},{"name":"udaybandaru","email":"udayb@cfi2.com"},{"name":"georgeb-campfire","email":"georgeb@cfi2.com"},{"name":"susitha","email":"ds.susitha@gmail.com"}],"dist":{"shasum":"560036dfe3b7d3d5d0610c1e1bb2e1a0745cf549","tarball":"https://registry.npmjs.org/@campfire-interactive/design-tokens/-/design-tokens-0.3.0.tgz","fileCount":4,"integrity":"sha512-gZCXtrJhL217k5p3Cqqu7Y714JqsjhNa5rha7UQXDJK9P7kQgzFIW9N0uRHmHMi8UNDwfbnd/cdjB9o7G3BREw==","signatures":[{"sig":"MEUCIF3cS64U/FXpN7lYWB2VZyOnZIanGQvqcV5lgHq6Z29FAiEA2gFfPrRq/FsdRjN6fhiFqKkx2Mu0m0tJWmNAGm38lus=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEUCIGc0h7Z0c56cwLJQKVDhxa9RJqRsvj5lkFt4aEBEUEcTAiEA3iqTh1mNaHueXpFxml3r7d2qqURAc0HhpU+/sJ8zY9w=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":56454},"main":"src/tokens.css","exports":{".":"./src/tokens.css","./tokens.css":"./src/tokens.css","./tokens.json":"./src/tokens.json"},"gitHead":"371f7d3ac9e14984a8dedddfd56308e50e452b46","scripts":{"build":"node scripts/generate.mjs","prepublishOnly":"node scripts/generate.mjs"},"_npmUser":{"name":"georgeb-campfire","email":"georgeb@cfi2.com"},"_npmVersion":"11.13.0","description":"Shared design tokens for Campfire Suite — raw scales, semantic roles, per-app accent hooks, and an opt-in dark theme","directories":{},"_nodeVersion":"24.16.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.3.0_1789659622858_0.6367627497424266","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@campfire-interactive/design-tokens","version":"0.4.0","_id":"@campfire-interactive/design-tokens@0.4.0","maintainers":[{"name":"priyacfi","email":"priya@cfi2.com"},{"name":"luke-campfire","email":"lukem@cfi2.com"},{"name":"karthi37","email":"karthikk@cfi2.com"},{"name":"udaybandaru","email":"udayb@cfi2.com"},{"name":"georgeb-campfire","email":"georgeb@cfi2.com"},{"name":"susitha","email":"ds.susitha@gmail.com"}],"dist":{"shasum":"7e0d292b17a6d93ded2c6a41b6b8a8c7836e5c3d","tarball":"https://registry.npmjs.org/@campfire-interactive/design-tokens/-/design-tokens-0.4.0.tgz","fileCount":4,"integrity":"sha512-0+9LBoiAGg4ZT2LN4OGIoYuS4BWsWRWk/CsaMxz/D7+abWV5FjoVfqkTEWE8S18goUdzrXuePrhXhilhxtLgrw==","signatures":[{"sig":"MEQCIHNTDO5Q4x8TMJbLoNAEub6PtxFmpP3k6KHCpArLBpI6AiAHWeuzAudKwM8bF26ygvFIR4Cc3a3z6Js9bCZWYuIXmQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"sig":"MEYCIQC/JhtNMYZFdBXALCzz7+9BXZRIliFBVMzo+1wP6HjPhAIhAN+q3iS/MTcmYIwSpAPKUL3rCE8tHfUWWfhQbcKWhodY","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":56995},"main":"src/tokens.css","exports":{".":"./src/tokens.css","./tokens.css":"./src/tokens.css","./tokens.json":"./src/tokens.json"},"gitHead":"e5b8f99495c086ab3c7d87d685c51df498abe5ce","scripts":{"build":"node scripts/generate.mjs","prepublishOnly":"node scripts/generate.mjs"},"_npmUser":{"name":"georgeb-campfire","email":"georgeb@cfi2.com"},"_npmVersion":"11.13.0","description":"Shared design tokens for Campfire Suite — raw scales, semantic roles, per-app accent hooks, and an opt-in dark theme","directories":{},"_nodeVersion":"24.16.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.4.0_1789677302730_0.5797193813341219","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-04-15T20:30:34.343Z","modified":"2026-10-01T17:31:12.007Z","0.1.1":"2026-04-15T20:30:34.633Z","0.2.0":"2026-09-11T15:18:32.543Z","0.3.0":"2026-09-17T15:40:22.997Z","0.4.0":"2026-09-17T20:35:02.818Z"},"description":"Shared design tokens for Campfire Suite — raw scales, semantic roles, per-app accent hooks, and an opt-in dark theme","maintainers":[{"email":"priya@cfi2.com","name":"priyacfi"},{"email":"lukem@cfi2.com","name":"luke-campfire"},{"email":"karthikk@cfi2.com","name":"karthi37"},{"email":"delphine@cfi2.com","name":"delphiner"},{"email":"udayb@cfi2.com","name":"udaybandaru"},{"email":"georgeb@cfi2.com","name":"georgeb-campfire"},{"email":"ds.susitha@gmail.com","name":"susitha"}],"readme":"# @campfire-interactive/design-tokens\n\nThe source of truth for every shared value in the Campfire Suite — colors, type,\nspacing, radii, shadows, motion, z-index, chart series and chrome dimensions —\nas CSS custom properties under a `--cfi-` prefix.\n\n`tokens.css` is the source; `tokens.json` is generated from it by\n`scripts/generate.mjs` and resolves the `var(--cfi-app-*, fallback)` chains to\nliterals for non-CSS consumers.\n\n## ⚠ 0.2.x is a rewrite, and adoption is not open yet\n\n0.1.1 had 42 tokens. 0.2.0 has 148, in three layers, with an opt-in dark theme.\nThe semantic naming is **not settled** until more than one app has migrated onto\nit, so treat these names as movable.\n\nOne name already moved: the orange ramp is `--cfi-color-orange-*`, renamed from\n`--cfi-color-primary-*`. Raw scales in this file are named by hue, so a role word\nin a palette slot read as \"the primary color\" — which is how buttons ended up\nwired to it. It is master-data's and pim's app-identity color. The color of\nanything you press is `--cfi-action`.\n\nThree published packages still reference the old name with literal fallbacks\n(`shell-header`, `side-nav`, `volume-intelligence-ui`), and that is deliberate:\nwith the token gone they keep rendering their own literals, which is exactly\nwhat they render today. No alias is provided, because an alias would resolve\n`volume-intelligence-ui`'s blue buttons to orange the moment an app imports\nthis file.\n\n`^0.1.1` does not resolve to 0.2.0 — a caret below 1.0 never crosses a minor —\nso nothing picks this up by accident. Bumping to `^0.2.0` is a deliberate act,\nand the gate for it is in the repo's `CLAUDE.md`.\n\n## Install\n\n```bash\nnpm i @campfire-interactive/design-tokens\n```\n\n```ts\n// once, at the app entry point, BEFORE the app's own stylesheets\nimport '@campfire-interactive/design-tokens/tokens.css';\n```\n\nDeclaring the dependency does nothing on its own. It was a dependency of eleven\nfrontends and imported by none of them; the `--cfi-*` variables reached those\npages only because `shell-header` and `side-nav` bundle their own use of them.\nImport the stylesheet, or the tokens are not there.\n\n## The three layers, and which one to reference\n\n1. **Raw scales** — `--cfi-color-gray-500`, `--cfi-font-size-sm`. Palette values.\n Reference these only when defining a semantic token.\n2. **Semantic roles** — `--cfi-surface`, `--cfi-content-muted`, `--cfi-border`,\n `--cfi-action`, the focus ring, the overlay. **This is what component CSS\n should use.** A component that reaches past these into a raw gray cannot be\n re-themed and breaks in dark mode.\n3. **App overrides** — `--cfi-app-primary` and friends. The app's own identity\n color, for the shell badge. Set these in the consuming app.\n\n### Two colors, two jobs\n\n`--cfi-action` is the suite-wide color for anything you press — buttons, links,\nfocus rings, selected rows. Its value is omsf's `#030213`, because omsf is the\nreference for main styles. It is identical in every app; that is the point of it.\n\n`--cfi-app-primary` is the app's identity color, and its only job is the app\nbadge in the shell header plus its tile in the app switcher. The canonical value\nper app is the `color` field in `shell-header`'s `appCatalog`.\n\n**Do not point one at the other.** Wiring buttons to the app color makes the\nsame primary button violet in one app, sky blue in another and indigo in a\nthird — the opposite of a design system.\n\n## Dark mode is opt-in\n\n```html\n \n \n```\n\nNeither happens by accident, so adding this file to an app that has never\nconsidered dark mode cannot change how it looks today.\n\n## Status colors\n\nEach semantic hue carries a `-soft` background and a `-text` foreground that\nmeets 4.5:1 against it. Use the pair. `bg-[#10B981]/10 text-[#10B981]` — the\nshape several apps had — lands near 2:1.\n","readmeFilename":"README.md"}