{"_id":"@ds-starter/tokens","_rev":"1-b35fd60553beb55617f6a1cb09ba1b7c","name":"@ds-starter/tokens","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@ds-starter/tokens","version":"0.1.0","author":{"url":"https://github.com/XOP","name":"Evgeny Khoroshilov"},"license":"MIT","_id":"@ds-starter/tokens@0.1.0","maintainers":[{"name":"xop","email":"stewiekillsloiss@gmail.com"}],"dist":{"shasum":"0e06dac029d84a209eb0af2e872f6bc96f4456b0","tarball":"https://registry.npmjs.org/@ds-starter/tokens/-/tokens-0.1.0.tgz","fileCount":19,"integrity":"sha512-z2L/0SNl1qxm8ethlQ3DdAGIuXOac4SYFc0mhZQihwhWWaMNm3Aieuk9dWuqXS8/jFChQF2GUynQ/+sKWl2BDA==","signatures":[{"sig":"MEUCIGPnBz/7BRmYYSkhTRdL52aHStqRjWblWiYgOw5G9H+AAiEAsFwD5p7cJQL3cqdbZ1pEPvCYTqEHxZphq/Kqpmf/MMw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":86117},"type":"module","_from":"file:ds-starter-tokens-0.1.0.tgz","exports":{".":{"types":"./dist/lib/tokens/tokens.d.ts","import":"./dist/tokens.esm.js","require":"./dist/tokens.cjs.js"},"./css/*":{"import":"./dist/css/*","require":"./dist/css/*"}},"scripts":{"gen":"pnpm gen:palette && pnpm gen:vars && pnpm format:fix","lint":"biome lint","build":"pnpm gen && vite build && tsc --project tsconfig.build.json","format":"biome format","gen:vars":"tsx ./scripts/generateVars.ts","format:fix":"pnpm format --write","gen:palette":"unicornix"},"_npmUser":{"name":"xop","email":"stewiekillsloiss@gmail.com"},"_resolved":"/tmp/c22aabc6e73963b059626e10e60fb2e1/ds-starter-tokens-0.1.0.tgz","_integrity":"sha512-z2L/0SNl1qxm8ethlQ3DdAGIuXOac4SYFc0mhZQihwhWWaMNm3Aieuk9dWuqXS8/jFChQF2GUynQ/+sKWl2BDA==","_npmVersion":"10.7.0","description":"## Overview","directories":{},"_nodeVersion":"18.20.4","dependencies":{"unicornix":"0.6.0-beta.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.3.4","polished":"^4.2.2","typescript":"^5.5.4","@babel/core":"^7.24.9","@types/react":"^18.2.74","@storybook/blocks":"^8.2.4","@ds-starter/tsconfig":"0.1.0","@vanilla-extract/css":"^1.15.3"},"_npmOperationalInternal":{"tmp":"tmp/tokens_0.1.0_1722165886732_0.5284278853314743","host":"s3://npm-registry-packages"}},"0.2.0":{"name":"@ds-starter/tokens","version":"0.2.0","author":{"name":"Evgeny Khoroshilov","url":"https://github.com/XOP"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/XOP/design-system-starter.git"},"type":"module","exports":{".":{"types":"./dist/lib/tokens/tokens.d.ts","import":"./dist/tokens.esm.js","require":"./dist/tokens.cjs.js"},"./css/*":{"import":"./dist/css/*","require":"./dist/css/*"}},"devDependencies":{"@babel/core":"^7.24.9","@storybook/blocks":"^8.2.4","@types/react":"^18.2.74","@vanilla-extract/css":"^1.15.3","typescript":"^5.5.4","vite":"^5.3.4","@ds-starter/tsconfig":"0.2.0"},"dependencies":{"unicornix":"0.6.0-beta.0"},"scripts":{"lint":"biome lint","format":"biome format","format:fix":"pnpm format --write","build":"pnpm gen && vite build && tsc --project tsconfig.build.json","gen":"pnpm gen:palette && pnpm gen:vars && pnpm format:fix","gen:vars":"tsx ./scripts/generateVars.ts","gen:palette":"unicornix"},"_id":"@ds-starter/tokens@0.2.0","description":"> **@ds-starter/tokens** is the part of the [Design System Starter (DSS) Template](https://github.com/XOP/design-system-starter)   > The package is created for demo purposes and is not intended for production usage   > See it in action:   > - [DSS Storybo","bugs":{"url":"https://github.com/XOP/design-system-starter/issues"},"homepage":"https://github.com/XOP/design-system-starter#readme","_integrity":"sha512-BAsHFn4NZvh0GWrx9lPhOMcTjyV18ooaUDZUdx9dWwX4lH4nwT7EUfqsO5RExsNd9i+j6ErwgKimF0CZntSxNw==","_resolved":"/tmp/22550908b7c642f3e7cc505b41df76f9/ds-starter-tokens-0.2.0.tgz","_from":"file:ds-starter-tokens-0.2.0.tgz","_nodeVersion":"18.20.4","_npmVersion":"10.7.0","dist":{"integrity":"sha512-BAsHFn4NZvh0GWrx9lPhOMcTjyV18ooaUDZUdx9dWwX4lH4nwT7EUfqsO5RExsNd9i+j6ErwgKimF0CZntSxNw==","shasum":"447fc0406202337121196400c6bbd5da2123d7ce","tarball":"https://registry.npmjs.org/@ds-starter/tokens/-/tokens-0.2.0.tgz","fileCount":19,"unpackedSize":86477,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEAI9yH7CZVpJczHqEVA9JMTJerEyfDQ2RQN5ISwoVhhAiEA3Y/n+hmAsRuCtzLqzpIB/OU2xEHI0KYKptLa/L/fc5c="}]},"_npmUser":{"name":"xop","email":"stewiekillsloiss@gmail.com"},"directories":{},"maintainers":[{"name":"xop","email":"stewiekillsloiss@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tokens_0.2.0_1722272103898_0.1026136227451866"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-28T11:24:46.600Z","modified":"2024-07-29T16:55:04.295Z","0.1.0":"2024-07-28T11:24:46.909Z","0.2.0":"2024-07-29T16:55:04.109Z"},"author":{"name":"Evgeny Khoroshilov","url":"https://github.com/XOP"},"license":"MIT","description":"> **@ds-starter/tokens** is the part of the [Design System Starter (DSS) Template](https://github.com/XOP/design-system-starter)   > The package is created for demo purposes and is not intended for production usage   > See it in action:   > - [DSS Storybo","maintainers":[{"name":"xop","email":"stewiekillsloiss@gmail.com"}],"readme":"# DSS Tokens @ Design System Starter Template\n\n> **@ds-starter/tokens** is the part of the [Design System Starter (DSS) Template](https://github.com/XOP/design-system-starter)  \n> The package is created for demo purposes and is not intended for production usage  \n> See it in action:  \n> - [DSS Storybook](https://ds-starter-storybook.vercel.app/)\n> - [DSS Documentation](https://ds-starter-docs.vercel.app/)\n> - [Example App](https://ds-starter-app-vite.vercel.app/)\n\n## Overview\n\nDesign tokens package is the core dependency for `@ds-starter/ui`  \nand very important for consistent design in the apps.\n\nDesign tokens are available in 2 formats - CSS custom properties (variables) and JS objects.\n\n### Palette\n\nJS export allows using color tokens as **plain** color values for respective themes, i.e. `rgb(91, 96, 98)`,  \nand **references** to CSS variables, which is a more flexible approach to theming, i.e. `var(--awsm-color-neutral-base)`.\n\nNaturally, in the latter case project should also import the corresponding CSS files.\n\n### Configuration\n\nPalette is generated with [Unicornix](https://www.npmjs.com/package/unicornix), a one-stop solution for the themeable accessible palettes.  \n`unicornix.config.ts` contains a reasonable config that allows to easily modify base and supporting colors in multiple formats.\n\n## Installation\n\n```sh\nnpm i @ds-starter/tokens\n```\n\n## Usage\n\nAs mentioned, there are different scenarios of how tokens can be utilized.\n\n### CSS\n\n```css\n@import '@ds-starter/tokens/css/tokens.css';\n\n/* ... */\n\nbody {\n  font-size: var(--awsm-font-size-n);\n  line-height: var(--awsm-line-height-normal);\n  color: var(--awsm-color-content-regular);\n}\n```\n\n### JS with CSS references\n\n> Note that CSS references only apply to colors.\n\n```tsx\nimport { tokens } from '@ds-starter/tokens';\n\n// note, this import can be alternatively done via CSS\nimport '@ds-starter/tokens/css/tokens.css';\n\n// ...\n\nconst AccentDiv = () => (\n  <div style={{ background: tokens.color.accent.strong }}></div> // background: var(--awsm-color-accent-strong)\n);\n```\n\n## JS with plain values\n\nThere is almost no changes in implementation,  \nthe only difference is named import.\n\nThere are 2 themes exported - **light** and **dark**.\n\n```tsx\nimport { tokensLight as tokens } from '@ds-starter/tokens';\n\n// ...\n\nconst AccentDiv = () => (\n  <div style={{ background: tokens.color.accent.strong }}></div> // background: rgb(18, 103, 228)\n);\n```\n\n## Development\n\nAfter any tokens changes simply run build command:\n\n```sh\npnpm build\n```\n\nIf you want to preview changes without compilation, run generation script:\n\n```sh\npnpm gen\n```\n\n## References\n\n- Palette is generated with [Unicornix](https://www.npmjs.com/package/unicornix)\n- Design tokens schema is inspired by [Design Tokens Generator](https://www.design-tokens.dev/)\n- Build is powered by [Vite](https://vitejs.dev/)\n","readmeFilename":"README.md","homepage":"https://github.com/XOP/design-system-starter#readme","repository":{"type":"git","url":"git+https://github.com/XOP/design-system-starter.git"},"bugs":{"url":"https://github.com/XOP/design-system-starter/issues"}}