{"_id":"@aleph-alpha/config-tokens","_rev":"3-07e4bd130a5076e24e10b77ffd6874a0","name":"@aleph-alpha/config-tokens","dist-tags":{"latest":"0.2.0"},"versions":{"0.2.0":{"name":"@aleph-alpha/config-tokens","version":"0.2.0","author":{"name":"Aleph Alpha GmbH"},"license":"Apache-2.0","_id":"@aleph-alpha/config-tokens@0.2.0","maintainers":[{"name":"uyiaa","email":"uyiosa.enabulele@aleph-alpha.com"}],"homepage":"https://docs.aleph-alpha.com","dist":{"shasum":"81f5f5e6a511597d9f78f6d098e9af9bfcfb2185","tarball":"https://registry.npmjs.org/@aleph-alpha/config-tokens/-/config-tokens-0.2.0.tgz","fileCount":10,"integrity":"sha512-Z6vVUKdyGftH+FTiHBlfpRgxfBhbEHAbq6l/DsIgIrmBLucr77uo6fVjDDLrxUhOHCrhHBLfz1TImebF+hpdZw==","signatures":[{"sig":"MEUCICU7TGylwRL4gIbCar3ixyR11HMHQZSTstaFKwS6w2vXAiEAn4Cwc0KCtelTkczOgjVF7UU7QiCxwXDTMz0pKWdbzgI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":92701},"type":"module","_from":"file:aleph-alpha-config-tokens-0.2.0.tgz","exports":{"./sd-output/*.json":"./sd-output/*.json"},"scripts":{"build":"pnpm run transform:all && pnpm run build:sd","build:sd":"node ./sd.config.js","transform:all":"pnpm run transform:global && pnpm run transform:dark-mode && pnpm run transform:light-mode","transform:global":"npx token-transformer ./tokens.json ./transformed-tokens/global.json global,\"Spark Border Radius/Mode 1\",\"Spark Spacings/Mode 1\",\"Spark Text/Mode 1\" \"Spark Colors/Light mode/primitives\" --throwErrorWhenNotResolved","transform:dark-mode":"npx token-transformer ./tokens.json ./transformed-tokens/dark-mode.json \"Spark Colors/Dark mode\" --throwErrorWhenNotResolved","transform:light-mode":"npx token-transformer ./tokens.json ./transformed-tokens/light-mode.json \"Spark Colors/Light mode\" --throwErrorWhenNotResolved"},"_npmUser":{"name":"uyiaa","email":"uyiosa.enabulele@aleph-alpha.com"},"prettier":"@aleph-alpha/prettier-config-frontend","_resolved":"/tmp/498c1d686fd08bdebd77ebd0a031c19b/aleph-alpha-config-tokens-0.2.0.tgz","_integrity":"sha512-Z6vVUKdyGftH+FTiHBlfpRgxfBhbEHAbq6l/DsIgIrmBLucr77uo6fVjDDLrxUhOHCrhHBLfz1TImebF+hpdZw==","_npmVersion":"10.8.2","description":"_@aleph-alpha/config-tokens_","directories":{},"_nodeVersion":"20.19.0","dependencies":{"token-transformer":"0.0.33","@tokens-studio/sd-transforms":"2.0.2"},"_hasShrinkwrap":false,"devDependencies":{"style-dictionary":"^4.0.1","eslint-plugin-jsdoc":"^61.0.0","@aleph-alpha/eslint-config-frontend":"0.7.0","@aleph-alpha/prettier-config-frontend":"2.1.0"},"_npmOperationalInternal":{"tmp":"tmp/config-tokens_0.2.0_1781792423426_0.27507752300063637","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-06-18T14:20:23.217Z","modified":"2026-08-31T13:44:09.709Z","0.2.0":"2026-06-18T14:20:23.570Z"},"author":{"name":"Aleph Alpha GmbH"},"license":"Apache-2.0","homepage":"https://docs.aleph-alpha.com","description":"_@aleph-alpha/config-tokens_","maintainers":[{"email":"oleksandr.honskyi@aleph-alpha.com","name":"oleksandr.honskyi"},{"email":"marco.lauinger@aleph-alpha.com","name":"mlauinger-aa"},{"email":"uyiosa.enabulele@aleph-alpha.com","name":"uyiaa"}],"readme":"## Config Tokens\n\n_@aleph-alpha/config-tokens_\n\nDesign tokens for Aleph Alpha frontends, derived from the Figma library via Tokens Studio and Style Dictionary. Exposes the processed tokens as JSON so other packages can consume them.\n\nThe UnoCSS presets that turn these tokens into utility classes and CSS variables live in [`@aleph-alpha/config-unocss`](../config-unocss/README.md). Embedded web fonts (Raleway, Roboto, Montserrat, Inter) live in [`@aleph-alpha/config-fonts`](../config-fonts/README.md).\n\n### Installation\n\n```bash\npnpm add @aleph-alpha/config-tokens\n```\n\n### Usage\n\nImport token sets directly as JSON:\n\n```ts\nimport lightModeSet from '@aleph-alpha/config-tokens/sd-output/light-mode.json';\nimport darkModeSet from '@aleph-alpha/config-tokens/sd-output/dark-mode.json';\nimport spacingsSet from '@aleph-alpha/config-tokens/sd-output/spacings.json';\nimport boxShadowsSet from '@aleph-alpha/config-tokens/sd-output/box-shadows.json';\nimport typographySet from '@aleph-alpha/config-tokens/sd-output/typography.json';\n```\n\nFor UnoCSS consumers, use `@aleph-alpha/config-unocss` instead — it already wires these JSON files into a preset stack with CSS custom properties, theme mapping, and web fonts.\n\n## Token Pipeline\n\nThe package's purpose is to take Figma Tokens via [Tokens Studio](https://tokens.studio/) and transform them into JSON files that downstream packages (UnoCSS preset, MUI palette, …) can consume.\n\nThe build steps are:\n\n1. Designer pushes token changes from Figma to `tokens.json` and opens a MR.\n2. When the MR is merged, the pipeline runs and triggers the build process.\n3. Tokens from `tokens.json` are transformed, split into different categories, and stored in the `transformed-tokens` directory with [token-transformer](https://www.npmjs.com/package/token-transformer) so Style Dictionary can read them. Categories are `light-mode`, `dark-mode`, and `global`.\n4. The transformed tokens are processed with [Style Dictionary](https://amzn.github.io/style-dictionary/) to generate token sets in `sd-output/`.\n5. Consumers (e.g. `@aleph-alpha/config-unocss`) read the `sd-output/` JSON via subpath imports.\n\n```mermaid\ngraph TD\n    A[Designer pushes token changes from Figma to tokens.json] --> B[Open MR]\n    B --> C{MR merged?}\n    C -->|Yes| D[Pipeline runs]\n    D --> E[Trigger build process]\n    E --> F[Transform and split tokens with token-transformer]\n    F --> G[Store transformed tokens in transformed-tokens directory]\n    G --> H[Process tokens with style-dictionary]\n    H --> I[Store processed tokens in sd-output directory]\n    C -->|No| B\n    subgraph Token Categories\n        F --> F1[light-mode]\n        F --> F2[dark-mode]\n        F --> F3[global]\n    end\n```\n\n## Development\n\n```bash\npnpm install\npnpm build\n```\n\n## Config Tokens helps in UI Customization\n\n[Read more here](./customization.md)\n\n## References\n\n- [@tokens-studio/sd-transforms](https://www.npmjs.com/package/@tokens-studio/sd-transforms)\n- [token-transformer](https://www.npmjs.com/package/token-transformer)\n- [style-dictionary](https://amzn.github.io/style-dictionary/)\n","readmeFilename":"README.md"}