{"_id":"@designsystemsinternational/unocss-preset-design-tokens","name":"@designsystemsinternational/unocss-preset-design-tokens","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@designsystemsinternational/unocss-preset-design-tokens","version":"1.0.0","description":"UnoCSS preset for consuming design tokens","license":"MIT","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"}},"publishConfig":{"access":"public"},"author":{"name":"Lucas Dino Nolte","email":"lucas@designsystems.international"},"repository":{"type":"git","url":"git+https://github.com/designsystemsinternational/unocss-preset-design-tokens.git"},"bugs":{"url":"https://github.com/designsystemsinternational/unocss-preset-design-tokens/issues"},"homepage":"https://github.com/designsystemsinternational/unocss-preset-design-tokens#readme","keywords":["unocss","design tokens","atomic css","utility css"],"scripts":{"build":"tsup","dev":"tsup --watch","lint":"eslint src","format":"prettier --write .","test":"vitest run","test:watch":"vitest","typecheck":"tsc --noEmit"},"peerDependencies":{"@unocss/core":">=0.50.0","postcss":"^8.0.0","unocss":">=0.50.0"},"devDependencies":{"@types/node":"^26.0.1","eslint":"^9.0.0","prettier":"^3.0.0","tsup":"^8.0.0","typescript":"^5.0.0","typescript-eslint":"^8.0.0","vitest":"^4.1.9"},"_id":"@designsystemsinternational/unocss-preset-design-tokens@1.0.0","gitHead":"b8c96f09670910a4fc0879d9676e44ea48ca1ff9","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-FloQ9TwBvWOsiRX8svW+kssj1MO+Ktmf1GSGHqSPMJu/g4sKJPZVTovqPM1rQ+BIhxHpVyjNS4P+tKmuBzjZdA==","shasum":"19f7a0d87c57e43e6931c818fd72728a5f01aae9","tarball":"https://registry.npmjs.org/@designsystemsinternational/unocss-preset-design-tokens/-/unocss-preset-design-tokens-1.0.0.tgz","fileCount":7,"unpackedSize":36144,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCnbDD5z84QB5gT7cgODksq7lOe0Y7FY6S11sCYeKFNBgIhAIHPumBBDhwsXxUcaUaQFcAPPcc5kY3KvCEzTabYTkxh"}]},"_npmUser":{"name":"lnolte","email":"hello@lucas-nolte.com"},"directories":{},"maintainers":[{"name":"lnolte","email":"hello@lucas-nolte.com"},{"name":"runemadsen","email":"rune@runemadsen.com"},{"name":"bravomartin","email":"bravomartin@gmail.com"},{"name":"ejsandoval","email":"ejsandoval@uc.cl"},{"name":"fdoflorenzano","email":"f.florenzano94@gmail.com"},{"name":"aldomedina","email":"aldo.medina.z@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/unocss-preset-design-tokens_1.0.0_1783512192333_0.8498691620844958"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-08T12:03:12.146Z","1.0.0":"2026-07-08T12:03:12.467Z","modified":"2026-07-08T12:03:12.663Z"},"maintainers":[{"name":"lnolte","email":"hello@lucas-nolte.com"},{"name":"runemadsen","email":"rune@runemadsen.com"},{"name":"bravomartin","email":"bravomartin@gmail.com"},{"name":"ejsandoval","email":"ejsandoval@uc.cl"},{"name":"fdoflorenzano","email":"f.florenzano94@gmail.com"},{"name":"aldomedina","email":"aldo.medina.z@gmail.com"}],"description":"UnoCSS preset for consuming design tokens","homepage":"https://github.com/designsystemsinternational/unocss-preset-design-tokens#readme","keywords":["unocss","design tokens","atomic css","utility css"],"repository":{"type":"git","url":"git+https://github.com/designsystemsinternational/unocss-preset-design-tokens.git"},"author":{"name":"Lucas Dino Nolte","email":"lucas@designsystems.international"},"bugs":{"url":"https://github.com/designsystemsinternational/unocss-preset-design-tokens/issues"},"license":"MIT","readme":"# UnoCSS Preset Design Tokens\n\nA custom preset for [UnoCSS](https://unocss.dev/) that consumes design tokens from CSS custom properties and generates atomic utility classes from them. Only the utility classes you actually use end up in the final CSS bundle.\n\n## Wait, why not Tailwind?\n\nTailwind is an **extra Layer of Abstraction**: Despite Tailwind's move towards CSS variables in v4, it still introduces complexities, such as wrapping variables in `@theme` instead of using `:root`. Since I don’t want to go \"all-in\" on utility styles, but just have them available for sprinkles, overwrites and one-offs, I'm not willing to make that leap. Utilities and my custom CSS should be driven by the same source of truth: my design tokens.\n\nUnoCSS meets this need by allowing to specify exactly what to look for in our CSS without imposing\nassumptions. It also offers full control over generated utility classes, enabling to maintain a\ndeliberately thin utility layer.\n\n## Installation\n\n```sh\nnpm install -D @designsystemsinternational/unocss-preset-design-tokens\n```\n\nThe following peer dependencies are required:\n\n```sh\nnpm install -D unocss postcss\n```\n\n## Usage\n\nPoint the preset at your CSS token file(s). The preset reads CSS custom properties from `:root` and `@custom-media` rules and maps them to utilities.\n\n```js\n// uno.config.js\nimport { defineConfig } from 'unocss';\nimport presetDesignTokens from '@designsystemsinternational/unocss-preset-design-tokens';\n\nexport default defineConfig({\n  presets: [\n    presetDesignTokens({\n      designTokenFiles: ['./src/tokens.css'],\n    }),\n  ],\n});\n```\n\n### Token file format\n\nThe preset reads standard CSS custom properties from `:root` and `@custom-media` for breakpoints:\n\n```css\n/* tokens.css */\n:root {\n  /* Colors */\n  --color-text-primary: #111;\n  --color-text-secondary: #555;\n  --color-bg-surface: #fff;\n  --color-border-default: #e0e0e0;\n\n  /* Spacing */\n  --spacing-xs: 0.25rem;\n  --spacing-sm: 0.5rem;\n  --spacing-md: 1rem;\n  --spacing-lg: 2rem;\n\n  /* Sizes */\n  --size-sm: 20rem;\n  --size-md: 40rem;\n  --size-lg: 60rem;\n}\n\n/* Breakpoints */\n@custom-media --md (min-width: 768px);\n@custom-media --lg (min-width: 1024px);\n```\n\n### Available utilities\n\n| Utility | Token prefix | Example |\n|---|---|---|\n| `text-*` | `--color-text-` | `text-primary` |\n| `bg-*` | `--color-bg-` | `bg-surface` |\n| `border-*` | `--color-border-` | `border-default` |\n| `p-*`, `px-*`, `py-*`, `pt-*` … | `--spacing-` | `p-md`, `px-sm` |\n| `m-*`, `mx-*`, `my-*`, `mt-*` … | `--spacing-` | `m-lg`, `mt-xs` |\n| `gap-*`, `gap-x-*`, `gap-y-*` | `--spacing-` | `gap-md` |\n| `stack-*` | `--spacing-` | `stack-md` |\n| `w-*`, `h-*`, `min-w-*`, `max-w-*` … | `--size-` | `w-md`, `max-w-lg` |\n| `leading-*` | `--leading-` | `leading-tight` |\n| `tracking-*` | `--tracking-` | `tracking-wide` |\n| `weight-*` | `--font-weight-` | `weight-bold` |\n| `aspect-*` | `--aspect-` | `aspect-video` |\n| Breakpoints | `@custom-media` | `md:flex` |\n\n## Design Conventions\n\nThese conventions are intentional constraints, not gaps. They reflect how this preset fits into a\nbroader CSS architecture.\n\n### Breakpoints are mobile-first only\n\nOnly `min-width` media queries are supported. Breakpoints are defined as `@custom-media` queries in\nyour token files and used with a `breakpoint:` prefix (e.g. `md:flex`). `max-width` and range\nqueries are out of scope — if you need them, write them in component CSS.\n\n### Typography is not atomic\n\nThere are no `font-size` utilities. Text styles (size, line-height, tracking, OpenType features)\nshould be composed into named classes in a `fontStyles.css` file in your project. The `leading-*`,\n`tracking-*`, and `weight-*` utilities exist as overrides, not building blocks.\n\n### Positioning belongs in component CSS\n\nThere are no `position`, `inset`, `top`, `left`, `z-index`, or related utilities. Once you are\npositioning something absolutely or managing stacking context, you are deep enough in a component\nthat those styles belong in a CSS module alongside the rest of the component's layout.\n\n### Sizes are token-driven\n\nWidth and height utilities (`w-*`, `h-*`, `min-w-*`, etc.) only work with values defined in your\ntoken file as `--size-*` custom properties. Arbitrary values are intentionally not supported.\nThe exception is fractional widths (`w-1/2`, `w-3/4`, etc.) and `w-full` / `h-full`.\n\n## How to publish to NPM?\n\nPublishing is handled using an github action. To publish a new version of the package to npm you'll\nneed to create a new release on github.\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-ab6916c7748bf83a677d9b852eaad5ce"}