{"_id":"@emilyc246/design-tokens","_rev":"6-904f25f3861c79f559c652e7840d798a","name":"@emilyc246/design-tokens","dist-tags":{"latest":"0.1.7"},"versions":{"0.1.2":{"name":"@emilyc246/design-tokens","version":"0.1.2","_id":"@emilyc246/design-tokens@0.1.2","maintainers":[{"name":"emilyc246","email":"emily@brainstormcreative.co.uk"}],"dist":{"shasum":"c3ca04c7a69596ba532b3a4d9d982c40c4fd7dcc","tarball":"https://registry.npmjs.org/@emilyc246/design-tokens/-/design-tokens-0.1.2.tgz","fileCount":10,"integrity":"sha512-UvO94G1Ant10r9SZI504beLVSEQ1Wsf+gRCUIwmMEWjrSPTcEHKDRmvmt0YQEVdfgKHfCPGQOENM60btW71yeQ==","signatures":[{"sig":"MEUCIQDBbJv8O8fnupAjIN0PIWgjcxhDbtN2keulV55ubHR2SwIgVnjTq3IDwz/WcSoCDHgDDJxRdXzGDSpVYaWaWjI0zds=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":9611},"type":"module","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./theme.css":"./src/theme.css","./modes/dark.css":"./src/modes/dark.css","./modes/light.css":"./src/modes/light.css","./brands/app-a.css":"./src/brands/app-a.css","./brands/app-b.css":"./src/brands/app-b.css"},"gitHead":"d40bd08ac1f418ef183ead0e64b8dd89878507cb","private":false,"scripts":{"build":"tsc -p tsconfig.json","typecheck":"tsc --noEmit -p tsconfig.json"},"_npmUser":{"name":"emilyc246","email":"emily@brainstormcreative.co.uk"},"_npmVersion":"10.9.2","description":"A shared design token package that provides semantic colour, typography, and layout primitives as CSS custom properties. Consuming apps import the token stylesheets to inherit a consistent design language with support for light/dark modes and per-brand co","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.6.3"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.1.2_1779554263051_0.05632600323484582","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@emilyc246/design-tokens","version":"0.1.3","_id":"@emilyc246/design-tokens@0.1.3","maintainers":[{"name":"emilyc246","email":"emily@brainstormcreative.co.uk"}],"dist":{"shasum":"cdd15ab9eb61d23000069bc48d6a889f660a231c","tarball":"https://registry.npmjs.org/@emilyc246/design-tokens/-/design-tokens-0.1.3.tgz","fileCount":10,"integrity":"sha512-3I/w4g1aTmrgHeTzMtmHtZwGb84eqpcKNSOO/hXssKH3OuY2r0dOwVXyBneAAycrYy8rU2v/hdN+8CA5fiCUVw==","signatures":[{"sig":"MEQCICQ5iCW2TiHyAESXUOgRl0nSRo3SdRPQq+IeOjiDjumuAiAESlxIRMFPJKOfedHc+dq9kQVAyxcuHK44LgUtKF1/hg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":22125},"type":"module","_from":"file:emilyc246-design-tokens-0.1.3.tgz","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./theme.css":"./src/theme.css","./modes/dark.css":"./src/modes/dark.css","./modes/light.css":"./src/modes/light.css","./brands/app-a.css":"./src/brands/app-a.css","./brands/app-b.css":"./src/brands/app-b.css"},"private":false,"scripts":{"build":"tsc -p tsconfig.json","typecheck":"tsc --noEmit -p tsconfig.json"},"_npmUser":{"name":"emilyc246","email":"emily@brainstormcreative.co.uk"},"_resolved":"C:\\Users\\emily\\AppData\\Local\\Temp\\fb5bdbf1bbdc603ea129b46cf72192d4\\emilyc246-design-tokens-0.1.3.tgz","_integrity":"sha512-3I/w4g1aTmrgHeTzMtmHtZwGb84eqpcKNSOO/hXssKH3OuY2r0dOwVXyBneAAycrYy8rU2v/hdN+8CA5fiCUVw==","_npmVersion":"10.9.2","description":"A shared design token package that provides semantic colour, typography, and layout primitives as CSS custom properties. Consuming apps import the token stylesheets to inherit a consistent design language with support for light/dark modes and per-brand co","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.6.3"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.1.3_1779656269095_0.27408063355828816","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@emilyc246/design-tokens","version":"0.1.4","_id":"@emilyc246/design-tokens@0.1.4","maintainers":[{"name":"emilyc246","email":"emily@brainstormcreative.co.uk"}],"dist":{"shasum":"16cc072c141e90a8418e53109793de9773786a59","tarball":"https://registry.npmjs.org/@emilyc246/design-tokens/-/design-tokens-0.1.4.tgz","fileCount":11,"integrity":"sha512-BAuA9YqsqW8H5k0egQsUbU/S8wP9TSMuyvmrhiYITlXeLAUx7bvCnmOVBd8C6cQ0LfxiIdbKkX+FK4K2g7HktA==","signatures":[{"sig":"MEUCIAjkZ9i2yr5ra90BtORr0ZupoMkGRV13O0PQ/omA+0O4AiEAgm84ZTQSE2Z7smaB+uEhzwhU/nZB2Zv9lVif6jwP3bQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":32515},"type":"module","_from":"file:emilyc246-design-tokens-0.1.4.tgz","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./theme.css":"./src/theme.css","./modes/dark.css":"./src/modes/dark.css","./modes/light.css":"./src/modes/light.css","./brands/app-a.css":"./src/brands/app-a.css","./brands/app-b.css":"./src/brands/app-b.css","./brands/intercom.css":"./src/brands/intercom.css"},"private":false,"scripts":{"build":"tsc -p tsconfig.json","typecheck":"tsc --noEmit -p tsconfig.json"},"_npmUser":{"name":"emilyc246","email":"emily@brainstormcreative.co.uk"},"_resolved":"C:\\Users\\emily\\AppData\\Local\\Temp\\f0e02d220a4c008c51f78f4d7b2efd24\\emilyc246-design-tokens-0.1.4.tgz","_integrity":"sha512-BAuA9YqsqW8H5k0egQsUbU/S8wP9TSMuyvmrhiYITlXeLAUx7bvCnmOVBd8C6cQ0LfxiIdbKkX+FK4K2g7HktA==","_npmVersion":"10.9.2","description":"A shared design token package that provides semantic colour, typography, and layout primitives as CSS custom properties. Consuming apps import the token stylesheets to inherit a consistent design language with support for light/dark modes and per-brand co","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.6.3"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.1.4_1779782413558_0.039493912085169836","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"@emilyc246/design-tokens","version":"0.1.5","_id":"@emilyc246/design-tokens@0.1.5","maintainers":[{"name":"emilyc246","email":"emily@brainstormcreative.co.uk"}],"dist":{"shasum":"6f2dc0a8cf7e6d926d4fd4ab18026f0d40eed83b","tarball":"https://registry.npmjs.org/@emilyc246/design-tokens/-/design-tokens-0.1.5.tgz","fileCount":11,"integrity":"sha512-PL0rs9gL1xuEQi4+BYar6En/BXaD9+doWUwqEGzBy2m1jCCPsplTUzsma0N8uFWMI2HUl3x7cGuYo0feMNwzpQ==","signatures":[{"sig":"MEQCIFTCxpXG0vrfWXKVnDS9xO4NI4tjv84jlswp2bnOhDXYAiAsCZitR00pUfzxlLqYowvR22riDy0dxxC/zMdBetGsXA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":33293},"type":"module","_from":"file:emilyc246-design-tokens-0.1.5.tgz","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./theme.css":"./src/theme.css","./modes/dark.css":"./src/modes/dark.css","./modes/light.css":"./src/modes/light.css","./brands/app-a.css":"./src/brands/app-a.css","./brands/app-b.css":"./src/brands/app-b.css","./brands/intercom.css":"./src/brands/intercom.css"},"private":false,"scripts":{"build":"tsc -p tsconfig.json","typecheck":"tsc --noEmit -p tsconfig.json"},"_npmUser":{"name":"emilyc246","email":"emily@brainstormcreative.co.uk"},"_resolved":"C:\\Users\\emily\\AppData\\Local\\Temp\\69c1ea59babbb0c0b0bfce7a2a71de41\\emilyc246-design-tokens-0.1.5.tgz","_integrity":"sha512-PL0rs9gL1xuEQi4+BYar6En/BXaD9+doWUwqEGzBy2m1jCCPsplTUzsma0N8uFWMI2HUl3x7cGuYo0feMNwzpQ==","_npmVersion":"10.9.2","description":"A shared design token package that provides semantic colour, typography, and layout primitives as CSS custom properties. Consuming apps import the token stylesheets to inherit a consistent design language with support for light/dark modes and per-brand co","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.6.3"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.1.5_1779795728406_0.6750071374904125","host":"s3://npm-registry-packages-npm-production"}},"0.1.6":{"name":"@emilyc246/design-tokens","version":"0.1.6","_id":"@emilyc246/design-tokens@0.1.6","maintainers":[{"name":"emilyc246","email":"emily@brainstormcreative.co.uk"}],"dist":{"shasum":"9d1285c32614797a524391294f56e11c1a829688","tarball":"https://registry.npmjs.org/@emilyc246/design-tokens/-/design-tokens-0.1.6.tgz","fileCount":11,"integrity":"sha512-MYMVh41fBJzyPNLTv4Ee9GSj8NVSsIXW9Voi9Oh3d5Xrb1ZlZhLeLKvJMrgsNzRFIDV32wcWaR8U4oF5dZ7ZYQ==","signatures":[{"sig":"MEQCIH8GztquQYAfAW/LWm40ti7czm9SjXKXX42s7t7YkB/UAiAKJs6JQ7KM6Pn4y+iU7s1JMgPcrWXJp546t4/ZF1MSrw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":35517},"type":"module","_from":"file:emilyc246-design-tokens-0.1.6.tgz","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./theme.css":"./src/theme.css","./modes/dark.css":"./src/modes/dark.css","./modes/light.css":"./src/modes/light.css","./brands/app-a.css":"./src/brands/app-a.css","./brands/app-b.css":"./src/brands/app-b.css","./brands/intercom.css":"./src/brands/intercom.css"},"private":false,"scripts":{"build":"tsc -p tsconfig.json","typecheck":"tsc --noEmit -p tsconfig.json"},"_npmUser":{"name":"emilyc246","email":"emily@brainstormcreative.co.uk"},"_resolved":"C:\\Users\\emily\\AppData\\Local\\Temp\\ad64d264f4175cfb6af5533da525269f\\emilyc246-design-tokens-0.1.6.tgz","_integrity":"sha512-MYMVh41fBJzyPNLTv4Ee9GSj8NVSsIXW9Voi9Oh3d5Xrb1ZlZhLeLKvJMrgsNzRFIDV32wcWaR8U4oF5dZ7ZYQ==","_npmVersion":"10.9.2","description":"A shared design token package that provides semantic colour, typography, and layout primitives as CSS custom properties. Consuming apps import the token stylesheets to inherit a consistent design language with support for light/dark modes and per-brand co","directories":{},"sideEffects":["*.css"],"_nodeVersion":"22.17.1","_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.6.3"},"_npmOperationalInternal":{"tmp":"tmp/design-tokens_0.1.6_1779802126602_0.6194801534007768","host":"s3://npm-registry-packages-npm-production"}},"0.1.7":{"name":"@emilyc246/design-tokens","version":"0.1.7","private":false,"type":"module","sideEffects":["*.css"],"exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"./theme.css":"./src/theme.css","./modes/light.css":"./src/modes/light.css","./modes/dark.css":"./src/modes/dark.css","./brands/app-a.css":"./src/brands/app-a.css","./brands/app-b.css":"./src/brands/app-b.css","./brands/intercom.css":"./src/brands/intercom.css"},"devDependencies":{"typescript":"^5.6.3"},"scripts":{"build":"tsc -p tsconfig.json","typecheck":"tsc --noEmit -p tsconfig.json"},"_id":"@emilyc246/design-tokens@0.1.7","description":"A shared design token package that provides semantic colour, typography, and layout primitives as CSS custom properties. Consuming apps import the token stylesheets to inherit a consistent design language with support for light/dark modes and per-brand co","_integrity":"sha512-1xPR1pPILriwtvRIVNLol9uFyhbi19D2oxaxjmq73UCCHV3skYMmxXNNEyc7sZDzbE6A4z77DNNHPk0Q+QY8lg==","_resolved":"C:\\Users\\emily\\AppData\\Local\\Temp\\2d892c0102ea19bb1701dc76d8502a4b\\emilyc246-design-tokens-0.1.7.tgz","_from":"file:emilyc246-design-tokens-0.1.7.tgz","_nodeVersion":"22.17.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-1xPR1pPILriwtvRIVNLol9uFyhbi19D2oxaxjmq73UCCHV3skYMmxXNNEyc7sZDzbE6A4z77DNNHPk0Q+QY8lg==","shasum":"885c2527dc661fd14316349b26c0b859c62b507e","tarball":"https://registry.npmjs.org/@emilyc246/design-tokens/-/design-tokens-0.1.7.tgz","fileCount":11,"unpackedSize":38511,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCQe+QKviKRGs0YuWVZHvVS4SyuYz80T3C2epG4ehwd9QIgebGWag2RjKX8LrWJNzOGlaUkiZelUq3cd/lpNa3IV+Y="}]},"_npmUser":{"name":"emilyc246","email":"emily@brainstormcreative.co.uk"},"directories":{},"maintainers":[{"name":"emilyc246","email":"emily@brainstormcreative.co.uk"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-tokens_0.1.7_1779807556713_0.00799584753942928"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-23T16:37:42.888Z","modified":"2026-05-26T14:59:17.002Z","0.1.2":"2026-05-23T16:37:43.193Z","0.1.3":"2026-05-24T20:57:49.238Z","0.1.4":"2026-05-26T08:00:13.681Z","0.1.5":"2026-05-26T11:42:08.534Z","0.1.6":"2026-05-26T13:28:46.735Z","0.1.7":"2026-05-26T14:59:16.882Z"},"description":"A shared design token package that provides semantic colour, typography, and layout primitives as CSS custom properties. Consuming apps import the token stylesheets to inherit a consistent design language with support for light/dark modes and per-brand co","maintainers":[{"name":"emilyc246","email":"emily@brainstormcreative.co.uk"}],"readme":"# @emilyc246/design-tokens\r\n\r\nA shared design token package that provides semantic colour, typography, and layout primitives as CSS custom properties. Consuming apps import the token stylesheets to inherit a consistent design language with support for light/dark modes and per-brand colour overrides.\r\n\r\n## What's included\r\n\r\n| Export path | Purpose |\r\n|---|---|\r\n| `@emilyc246/design-tokens` | TypeScript constants and types for token names and theme modes |\r\n| `@emilyc246/design-tokens/theme.css` | Tailwind CSS v4 `@theme` block mapping semantic tokens to runtime variables |\r\n| `@emilyc246/design-tokens/modes/light.css` | Light mode variable definitions (applied on `:root`) |\r\n| `@emilyc246/design-tokens/modes/dark.css` | Dark mode variable definitions (applied on `[data-theme=\"dark\"]`) |\r\n| `@emilyc246/design-tokens/brands/app-a.css` | Brand colour overrides for App A |\r\n| `@emilyc246/design-tokens/brands/app-b.css` | Brand colour overrides for App B |\r\n\r\n## Prerequisites\r\n\r\n- Node.js 18+\r\n- pnpm 8+\r\n\r\n## Building\r\n\r\n```bash\r\npnpm install\r\npnpm build\r\n```\r\n\r\nThis compiles `src/index.ts` to `dist/` with type declarations. CSS files are shipped from `src/` as-is.\r\n\r\n## Publishing\r\n\r\n1. Update the version in `package.json`:\r\n\r\n   ```bash\r\n   pnpm version patch   # or minor / major\r\n   ```\r\n\r\n2. Build the package:\r\n\r\n   ```bash\r\n   pnpm build\r\n   ```\r\n\r\n3. Publish to your registry:\r\n\r\n   ```bash\r\n   pnpm publish --access public\r\n   ```\r\n\r\n   > If publishing to a private registry, configure `.npmrc` with your registry URL and auth token before publishing.\r\n\r\n## Usage\r\n\r\n### Install\r\n\r\n```bash\r\npnpm add @emilyc246/design-tokens\r\n```\r\n\r\n### Import CSS tokens\r\n\r\nIn your app's global stylesheet (works with Tailwind CSS v4):\r\n\r\n```css\r\n@import \"tailwindcss\";\r\n\r\n@import \"@emilyc246/design-tokens/theme.css\";\r\n@import \"@emilyc246/design-tokens/modes/light.css\";\r\n@import \"@emilyc246/design-tokens/modes/dark.css\";\r\n\r\n/* Pick your brand */\r\n@import \"@emilyc246/design-tokens/brands/app-a.css\";\r\n```\r\n\r\nOnce imported, Tailwind utilities like `bg-background`, `text-primary`, and `text-body` resolve to the design token values automatically.\r\n\r\n### Toggle dark mode\r\n\r\nSet `data-theme=\"dark\"` on the document root to activate dark mode:\r\n\r\n```ts\r\nimport type { ThemeMode } from \"@emilyc246/design-tokens\";\r\n\r\nfunction applyTheme(mode: ThemeMode) {\r\n  const root = document.documentElement;\r\n\r\n  if (mode === \"dark\") {\r\n    root.setAttribute(\"data-theme\", \"dark\");\r\n  } else if (mode === \"light\") {\r\n    root.removeAttribute(\"data-theme\");\r\n  } else {\r\n    // system — follow OS preference\r\n    const prefersDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\r\n    prefersDark\r\n      ? root.setAttribute(\"data-theme\", \"dark\")\r\n      : root.removeAttribute(\"data-theme\");\r\n  }\r\n}\r\n```\r\n\r\nA reference implementation is available in [`examples/theme-toggle.ts`](examples/theme-toggle.ts).\r\n\r\n### Use TypeScript helpers\r\n\r\n```ts\r\nimport { themeModes, semanticColorTokens, typographyTokens } from \"@emilyc246/design-tokens\";\r\nimport type { ThemeMode, SemanticColorToken, TypographyToken } from \"@emilyc246/design-tokens\";\r\n```\r\n\r\nThese exports provide the canonical list of token names and modes for building tooling, linters, or theme selectors.\r\n\r\n### Example component\r\n\r\n```tsx\r\nexport function ExampleCard() {\r\n  return (\r\n    <div className=\"bg-background text-foreground border border-border rounded-lg p-6\">\r\n      <h2 className=\"text-h2 font-heading\">Dashboard</h2>\r\n      <p className=\"text-body text-muted-foreground mt-2\">\r\n        Shared typography, spacing, and semantic colours.\r\n      </p>\r\n      <button className=\"mt-4 rounded-md bg-primary px-4 py-2 text-primary-foreground\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## Token architecture\r\n\r\n```\r\n┌─────────────────────────────────────────────┐\r\n│  theme.css (@theme block)                   │\r\n│  Maps semantic names → runtime variables    │\r\n└──────────────────┬──────────────────────────┘\r\n                   │ reads --app-* vars\r\n       ┌───────────┴───────────┐\r\n       ▼                       ▼\r\n┌──────────────┐      ┌──────────────┐\r\n│  modes/      │      │  brands/     │\r\n│  light.css   │      │  app-a.css   │\r\n│  dark.css    │      │  app-b.css   │\r\n│  (set base   │      │  (override   │\r\n│   palette)   │      │   primary)   │\r\n└──────────────┘      └──────────────┘\r\n```\r\n\r\n## Adding a new brand\r\n\r\n1. Create `src/brands/my-brand.css` defining `--app-primary` and `--app-primary-foreground` for both `:root` and `[data-theme=\"dark\"]`.\r\n2. Add an export entry in `package.json`:\r\n\r\n   ```json\r\n   \"./brands/my-brand.css\": \"./src/brands/my-brand.css\"\r\n   ```\r\n\r\n3. Rebuild and publish.\r\n\r\n## License\r\n\r\nSee [LICENSE](LICENSE).\r\n","readmeFilename":"README.md"}