{"_id":"@arup-ri/narrows-tokens","_rev":"3-1477e8ffe6cbab9f7735fd161805b322","name":"@arup-ri/narrows-tokens","dist-tags":{"latest":"0.2.0"},"versions":{"0.0.1":{"name":"@arup-ri/narrows-tokens","version":"0.0.1","license":"MIT","_id":"@arup-ri/narrows-tokens@0.0.1","maintainers":[{"name":"aai-platform","email":"aai-platform@aruplab.com"},{"name":"raylinfordarup","email":"ray.linford@aruplab.com"},{"name":"arup-ri-aai","email":"aai-admin@aruplab.com"},{"name":"mark-dewey-arup","email":"mark.dewey@aruplab.com"}],"homepage":"https://github.com/ARUP-Research-and-Innovation/Narrows-Tokens#readme","bugs":{"url":"https://github.com/ARUP-Research-and-Innovation/Narrows-Tokens/issues"},"dist":{"shasum":"381a35e168ec646bf5db8a2c5ee60446d412e69d","tarball":"https://registry.npmjs.org/@arup-ri/narrows-tokens/-/narrows-tokens-0.0.1.tgz","fileCount":11,"integrity":"sha512-mUvbxyOr+0fvtnPtt0xOOCy0kgans6gJik9n/NL8r2yT0oBvW5UlTYFcvlQgibyuSM1N8+kT02YOx6RhLDAudg==","signatures":[{"sig":"MEUCIB+q73tsnFBPQZQ5Wm+wpfwR/AmLP13S2kCnCTkdAO6uAiEAz9TGPbuduphr/evWBKabjTGuAiv42sw1gGf8HmX1ti4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":106905},"main":"./dist/tokens.cjs","type":"module","types":"./dist/tokens.d.ts","module":"./dist/tokens.js","engines":{"node":">=22.13.0"},"exports":{".":{"types":"./dist/tokens.d.ts","import":"./dist/tokens.js","require":"./dist/tokens.cjs"},"./tokens.css":"./dist/tokens.css","./tokens.json":"./dist/tokens.json","./tokens.scss":"./dist/tokens.scss","./tokens.figma.json":"./dist/tokens.figma.json"},"gitHead":"9a40bce7f061c027d8f847b053383db00032b083","scripts":{"dev":"tsup --watch","build":"tsup && tsx build/generate.ts","typecheck":"tsc --noEmit"},"_npmUser":{"name":"aai-platform","email":"aai-platform@aruplab.com"},"repository":{"url":"git+https://github.com/ARUP-Research-and-Innovation/Narrows-Tokens.git","type":"git"},"_npmVersion":"11.17.0","description":"Narrows design tokens — CSS, SCSS, JSON, and JS/TS","directories":{},"sideEffects":false,"_nodeVersion":"26.5.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"pnpm@11.20.0","devDependencies":{"tsx":"^4.0.0","tsup":"^8.0.0","typescript":"^5.0.0","@types/node":"^22.0.0"},"_npmOperationalInternal":{"tmp":"tmp/narrows-tokens_0.0.1_1785868742398_0.49048267155157","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@arup-ri/narrows-tokens","version":"0.0.2","license":"MIT","_id":"@arup-ri/narrows-tokens@0.0.2","maintainers":[{"name":"aai-platform","email":"aai-platform@aruplab.com"},{"name":"raylinfordarup","email":"ray.linford@aruplab.com"},{"name":"arup-ri-aai","email":"aai-admin@aruplab.com"},{"name":"mark-dewey-arup","email":"mark.dewey@aruplab.com"}],"homepage":"https://github.com/ARUP-Research-and-Innovation/Narrows-Tokens#readme","bugs":{"url":"https://github.com/ARUP-Research-and-Innovation/Narrows-Tokens/issues"},"dist":{"shasum":"a452123dce10c33a2a8e9ff8f5f1d81477b57c89","tarball":"https://registry.npmjs.org/@arup-ri/narrows-tokens/-/narrows-tokens-0.0.2.tgz","fileCount":11,"integrity":"sha512-g317X6v1oZd5fpsCnCv1yb2eaYK7k10n0ZAsQu8XqzP6AJY+jP3LJkYlC8aeQfFX4ui5GDz16qsKWlT6Ea2zyw==","signatures":[{"sig":"MEUCIDnkcj+NMICLqq783iSQH8BWSdRf6FdreZpt9SqLxkGeAiEAg5wUKgNvryxOkX3Lk1k+JKpqgIpi2teeB8/tzzn3zfM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":106905},"main":"./dist/tokens.cjs","type":"module","types":"./dist/tokens.d.ts","module":"./dist/tokens.js","engines":{"node":">=22.13.0"},"exports":{".":{"types":"./dist/tokens.d.ts","import":"./dist/tokens.js","require":"./dist/tokens.cjs"},"./tokens.css":"./dist/tokens.css","./tokens.json":"./dist/tokens.json","./tokens.scss":"./dist/tokens.scss","./tokens.figma.json":"./dist/tokens.figma.json"},"gitHead":"c4587f14f4c2320414e337befdeebf5efec31344","scripts":{"dev":"tsup --watch","build":"tsup && tsx build/generate.ts","typecheck":"tsc --noEmit"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:c2207d7c-3a9e-4024-af8e-25cc55b46444"}},"repository":{"url":"git+https://github.com/ARUP-Research-and-Innovation/Narrows-Tokens.git","type":"git"},"_npmVersion":"11.19.0","description":"Narrows design tokens — CSS, SCSS, JSON, and JS/TS","directories":{},"sideEffects":false,"_nodeVersion":"24.18.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"packageManager":"pnpm@11.20.0","devDependencies":{"tsx":"^4.0.0","tsup":"^8.0.0","typescript":"^5.0.0","@types/node":"^22.0.0"},"_npmOperationalInternal":{"tmp":"tmp/narrows-tokens_0.0.2_1785869254510_0.4276383956446297","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@arup-ri/narrows-tokens","version":"0.2.0","description":"Narrows design tokens — CSS, SCSS, JSON, and JS/TS","license":"MIT","repository":{"type":"git","url":"git+https://github.com/ARUP-Research-and-Innovation/Narrows-Tokens.git"},"packageManager":"pnpm@11.20.0","engines":{"node":">=22.13.0"},"type":"module","main":"./dist/tokens.cjs","module":"./dist/tokens.js","types":"./dist/tokens.d.ts","exports":{".":{"types":"./dist/tokens.d.ts","import":"./dist/tokens.js","require":"./dist/tokens.cjs"},"./tokens.css":"./dist/tokens.css","./tokens.scss":"./dist/tokens.scss","./tokens.json":"./dist/tokens.json","./tokens.figma.json":"./dist/tokens.figma.json"},"sideEffects":false,"publishConfig":{"access":"public"},"scripts":{"build":"tsup && tsx build/generate.ts","dev":"tsup --watch","typecheck":"tsc --noEmit"},"devDependencies":{"@types/node":"^22.0.0","tsup":"^8.0.0","tsx":"^4.0.0","typescript":"^5.0.0"},"gitHead":"11955e4429475d7c6f758912c6b41827774293a5","_id":"@arup-ri/narrows-tokens@0.2.0","bugs":{"url":"https://github.com/ARUP-Research-and-Innovation/Narrows-Tokens/issues"},"homepage":"https://github.com/ARUP-Research-and-Innovation/Narrows-Tokens#readme","_nodeVersion":"24.21.0","_npmVersion":"11.19.1","dist":{"integrity":"sha512-z3nClNrUcW31Qptf/pD5nARCgL/EUxjF09haHUTqHhH+NI6Z1LsLoUW2bz+XJGLy8pWA00E9uAqheoKFRtr7Ug==","shasum":"8972819f860ffc36d90667c8514c9d09cbe871e0","tarball":"https://registry.npmjs.org/@arup-ri/narrows-tokens/-/narrows-tokens-0.2.0.tgz","fileCount":11,"unpackedSize":107700,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHrJF60XOL3HtDunzGgf+4E7jCTM6YnZjGJ0nJVNuVoDAiBPAMiZExOx7Xe1xc4I2XG9wHPd80O8W6gaCINkbWOlVg=="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:c2207d7c-3a9e-4024-af8e-25cc55b46444"}},"directories":{},"maintainers":[{"name":"aai-platform","email":"aai-platform@aruplab.com"},{"name":"raylinfordarup","email":"ray.linford@aruplab.com"},{"name":"arup-ri-aai","email":"aai-admin@aruplab.com"},{"name":"mark-dewey-arup","email":"mark.dewey@aruplab.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/narrows-tokens_0.2.0_1789072194151_0.2967228005964424"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-04T18:39:02.232Z","modified":"2026-09-10T20:29:54.458Z","0.0.1":"2026-08-04T18:39:02.540Z","0.0.2":"2026-08-04T18:47:34.650Z","0.2.0":"2026-09-10T20:29:54.298Z"},"bugs":{"url":"https://github.com/ARUP-Research-and-Innovation/Narrows-Tokens/issues"},"license":"MIT","homepage":"https://github.com/ARUP-Research-and-Innovation/Narrows-Tokens#readme","repository":{"type":"git","url":"git+https://github.com/ARUP-Research-and-Innovation/Narrows-Tokens.git"},"description":"Narrows design tokens — CSS, SCSS, JSON, and JS/TS","maintainers":[{"name":"aai-platform","email":"aai-platform@aruplab.com"},{"name":"raylinfordarup","email":"ray.linford@aruplab.com"},{"name":"arup-ri-aai","email":"aai-admin@aruplab.com"},{"name":"mark-dewey-arup","email":"mark.dewey@aruplab.com"}],"readme":"# @narrows/tokens\n\nNarrows design tokens — CSS, SCSS, JSON, and JS/TS. Zero runtime dependencies. Works in any JS/TS project, SCSS build, Python script, or plain HTML page.\n\nThis package was extracted from the [Narrows](https://github.com/ARUP-Research-and-Innovation/Narrows) monorepo, which contains the companion [`@narrows/react`](https://github.com/ARUP-Research-and-Innovation/Narrows) component library.\n\n## Install\n\n```bash\nnpm install @narrows/tokens\n# or\npnpm add @narrows/tokens\n```\n\n## Usage\n\n### JavaScript / TypeScript\n\n```ts\nimport { tokens } from '@narrows/tokens'\n\nconst primary = tokens.arup.brand.arupRed    // '#AE132A'\nconst blue    = tokens.colors.base.blue[600] // '#2563EB'\nconst gap     = tokens.spacing[4]            // '1rem'\nconst radius  = tokens.radii.md              // '0.375rem'\n```\n\n### CSS custom properties\n\n```css\n/* Import once at the root of your app */\n@import '@narrows/tokens/tokens.css';\n\n.button {\n  background: var(--narrows-arup-brand-arupRed);\n  border-radius: var(--narrows-radii-md);\n  padding: var(--narrows-spacing-2) var(--narrows-spacing-4);\n}\n```\n\n### SCSS variables\n\n```scss\n@use '@narrows/tokens/tokens.scss' as t;\n\n.button {\n  background: t.$narrows-arup-brand-arupRed;\n  border-radius: t.$narrows-radii-md;\n}\n```\n\n### JSON (Python, Ruby, etc.)\n\n```python\nimport json, pathlib\n\ntokens = json.loads(\n    pathlib.Path(\"node_modules/@narrows/tokens/dist/tokens.json\").read_text()\n)\n\nprimary = tokens[\"arup\"][\"brand\"][\"arupRed\"]      # '#AE132A'\nblue    = tokens[\"colors\"][\"base\"][\"blue\"][\"600\"] # '#2563EB'\n```\n\n## Design tokens\n\nAll tokens are defined once in `src/` and emitted in multiple formats on every build:\n\n| File | Use case |\n|---|---|\n| `dist/tokens.css` | Any HTML/CSS project — `var(--narrows-arup-brand-arupRed)` |\n| `dist/tokens.scss` | SCSS projects — `$narrows-arup-brand-arupRed` |\n| `dist/tokens.json` | Python, Ruby, Style Dictionary, generic JSON consumers |\n| `dist/tokens.figma.json` | Tokens Studio ↔ Figma sync (W3C DTCG format, committed to git) |\n| `dist/tokens.js` / `.cjs` | JS/TS projects |\n\nCSS variables follow the `--narrows-*` prefix to avoid collisions with other libraries.\n\n### Typography — composite text styles\n\nTypography is organized around named **roles** (`body`, `heading`, `caption`, `label`, `code`) with four **size steps** each (`small`, `medium`, `large`, `xlarge`). Each `role-size` token is a composite that sets font family, size, weight, and line height together.\n\n```ts\nimport { tokens } from '@narrows/tokens'\n\ntokens.textStyles['body-medium']\n// { fontFamily: '...', fontSize: '1rem', fontWeight: '500', lineHeight: '1.5' }\n```\n\nLower-level primitives (`fontSizes`, `fontWeights`, `lineHeights`, `fonts`) are still exported for one-off sizing needs (e.g. icon dimensions), but `textStyles` should be preferred for actual typographic content.\n\n## Figma integration\n\nThis repo syncs design tokens to Figma via the [Tokens Studio plugin](https://www.figma.com/community/plugin/843461159747178978/tokens-studio-for-figma) (free tier).\n\n`dist/tokens.figma.json` is the sync file — it is committed to the repo and read directly from GitHub by the plugin. Composite `textStyles` tokens (e.g. `body-medium`) are exported using the [W3C DTCG `typography` composite type](https://tr.designtokens.org/format/#typography), so Tokens Studio/Figma variables surface them as a single typography style rather than separate size/weight/line-height variables.\n\n**When you update a token value:**\n\n```bash\n# 1. Edit src/*.ts (e.g. typography.ts)\npnpm build\n\n# 2. Commit and push tokens.figma.json\ngit add dist/tokens.figma.json\ngit commit -m \"chore: update tokens\"\ngit push\n\n# 3. In Figma → Tokens Studio plugin → Pull\n```\n\n## Local development\n\n### Requirements\n\n- Node.js 20+\n- [pnpm](https://pnpm.io/)\n\n### Setup\n\n```bash\npnpm install\n```\n\n### Build\n\n```bash\npnpm build\n```\n\n### Typecheck\n\n```bash\npnpm typecheck\n```\n\n### Watch mode\n\n```bash\npnpm dev\n```\n\n## Repository structure\n\n```\nnarrows-tokens/\n├── src/\n│   ├── arup/           # ARUP corporate identity colors: brand, neutral,\n│   │                   # accent, secondary, status (tokens.arup.*)\n│   ├── colors/         # Non-ARUP default palette: base (tokens.colors.base)\n│   ├── typography.ts   # fonts, fontSizes, fontWeights, lineHeights,\n│   │                   # letterSpacings, and composite textStyles\n│   │                   # (e.g. `body-medium`)\n│   └── index.ts        # Aggregates all token categories\n├── build/\n│   └── generate.ts     # Emits CSS, SCSS, JSON, and tokens.figma.json\n└── dist/\n    ├── tokens.js / .cjs / .d.ts\n    ├── tokens.css\n    ├── tokens.scss\n    ├── tokens.json\n    └── tokens.figma.json  # Committed — used by Tokens Studio ↔ Figma sync\n```\n\n## Releasing\n\nVersions are managed manually by bumping the `version` field in `package.json` and publishing with pnpm.\n\n```bash\npnpm typecheck\npnpm build\npnpm publish --access public\n```\n\n| Change type | Example | Version bump |\n|---|---|---|\n| Bug fix, internal refactor | Fix a token value | `patch` — `0.0.1 → 0.0.2` |\n| New token category | Add a new spacing scale | `minor` — `0.0.1 → 0.1.0` |\n| Breaking API change | Rename a token key | `major` — `0.0.1 → 1.0.0` |\n\n## Contributing\n\n1. Fork the repo and create a branch from `main`\n2. Make your changes\n3. Run `pnpm typecheck && pnpm build` to verify nothing is broken\n4. Open a pull request\n\n## License\n\nMIT\n","readmeFilename":"README.md"}