{"_id":"@aleph-alpha/config-unocss","_rev":"4-1b0d1f74d0ea7801ddb33961f409cf8c","name":"@aleph-alpha/config-unocss","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.0":{"name":"@aleph-alpha/config-unocss","version":"0.2.0","author":{"name":"Aleph Alpha GmbH"},"license":"Apache-2.0","_id":"@aleph-alpha/config-unocss@0.2.0","maintainers":[{"name":"uyiaa","email":"uyiosa.enabulele@aleph-alpha.com"}],"homepage":"https://docs.aleph-alpha.com","dist":{"shasum":"50f2b42b1c7fedd43ddc9264104b8d9013eff4c4","tarball":"https://registry.npmjs.org/@aleph-alpha/config-unocss/-/config-unocss-0.2.0.tgz","fileCount":5,"integrity":"sha512-AGTA8aYPhogOblTPZto5f0WEt+CG9KhCCqAE8edvelwCSXUR3bwREWszFloC5rJXemgQLyrQVZ1v87wWM7e+Og==","signatures":[{"sig":"MEYCIQC2dLKscRUZ3Q3X4Jde6kIBJ+vUzDQmzucsThXxsWRwIQIhANf+m3OYKEgwM9lLseLxWBgwuOwAyFl21Q+LbbpPKt4M","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31082},"main":"dist/index.js","type":"module","_from":"file:aleph-alpha-config-unocss-0.2.0.tgz","scripts":{"build":"vite build"},"typings":"dist/index.d.ts","_npmUser":{"name":"uyiaa","email":"uyiosa.enabulele@aleph-alpha.com"},"prettier":"@aleph-alpha/prettier-config-frontend","_resolved":"/tmp/1962807b06929fa3e76508659af2fe36/aleph-alpha-config-unocss-0.2.0.tgz","_integrity":"sha512-AGTA8aYPhogOblTPZto5f0WEt+CG9KhCCqAE8edvelwCSXUR3bwREWszFloC5rJXemgQLyrQVZ1v87wWM7e+Og==","_npmVersion":"10.8.2","description":"Shared UnoCSS presets for Aleph Alpha frontends. Re-exports the design-system token preset, web fonts preset, and helpers.","directories":{},"_nodeVersion":"20.19.0","dependencies":{"unocss":"66.4.1","unocss-preset-theme":"0.14.1","unocss-preset-animations":"1.3.0","@aleph-alpha/config-fonts":"0.2.0","@aleph-alpha/config-tokens":"0.2.0","@unocss/preset-legacy-compat":"66.5.10"},"_hasShrinkwrap":false,"typedocOptions":{"entryPoints":["./src/index.ts"]},"devDependencies":{"vite-plugin-dts":"^4.0.0","@aleph-alpha/tsconfig-frontend":"0.7.0","@aleph-alpha/eslint-config-frontend":"0.7.0","@aleph-alpha/prettier-config-frontend":"2.1.0"},"_npmOperationalInternal":{"tmp":"tmp/config-unocss_0.2.0_1781792427315_0.42124549588756643","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@aleph-alpha/config-unocss","version":"0.2.1","author":{"name":"Aleph Alpha GmbH"},"license":"Apache-2.0","_id":"@aleph-alpha/config-unocss@0.2.1","maintainers":[{"name":"uyiaa","email":"uyiosa.enabulele@aleph-alpha.com"}],"homepage":"https://docs.aleph-alpha.com","dist":{"shasum":"05981ebeb9c342f4c674d4a1e872e62f71919ddd","tarball":"https://registry.npmjs.org/@aleph-alpha/config-unocss/-/config-unocss-0.2.1.tgz","fileCount":5,"integrity":"sha512-497ooguRsLG/nVfTA8KKLpib5alZbdH7TOWY0n0nQm/MKFBCF6MzE1GkXwL/2sBqLbTBmka9teBfv6apyRoKCg==","signatures":[{"sig":"MEQCIDseb/Rh+pAKzcJpHEV+ujzfh5D3ydtoqJ6EODCQTU3cAiBUZTfZTwvRdl0Ujxj9SmF2XGHlOV8s/qkHHEffe9hVZg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31115},"main":"dist/index.js","type":"module","_from":"file:aleph-alpha-config-unocss-0.2.1.tgz","scripts":{"build":"vite build","typecheck":"tsc --noEmit"},"typings":"dist/index.d.ts","_npmUser":{"name":"uyiaa","email":"uyiosa.enabulele@aleph-alpha.com"},"prettier":"@aleph-alpha/prettier-config-frontend","_resolved":"/tmp/506658fd7200f23b62482133f22eff9d/aleph-alpha-config-unocss-0.2.1.tgz","_integrity":"sha512-497ooguRsLG/nVfTA8KKLpib5alZbdH7TOWY0n0nQm/MKFBCF6MzE1GkXwL/2sBqLbTBmka9teBfv6apyRoKCg==","_npmVersion":"10.8.2","description":"Shared UnoCSS presets for Aleph Alpha frontends. Re-exports the design-system token preset, web fonts preset, and helpers.","directories":{},"_nodeVersion":"20.19.0","dependencies":{"unocss":"66.4.1","unocss-preset-theme":"0.14.1","unocss-preset-animations":"1.3.0","@aleph-alpha/config-fonts":"0.2.1","@aleph-alpha/config-tokens":"0.2.0","@unocss/preset-legacy-compat":"66.5.10"},"_hasShrinkwrap":false,"typedocOptions":{"entryPoints":["./src/index.ts"]},"devDependencies":{"vite-plugin-dts":"^4.0.0","@aleph-alpha/tsconfig-frontend":"0.7.2","@aleph-alpha/eslint-config-frontend":"0.7.1","@aleph-alpha/prettier-config-frontend":"2.1.1"},"_npmOperationalInternal":{"tmp":"tmp/config-unocss_0.2.1_1786371348423_0.7974897544524093","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-06-18T14:20:27.146Z","modified":"2026-08-31T13:44:11.852Z","0.2.0":"2026-06-18T14:20:27.434Z","0.2.1":"2026-08-10T14:15:48.563Z"},"author":{"name":"Aleph Alpha GmbH"},"license":"Apache-2.0","homepage":"https://docs.aleph-alpha.com","description":"Shared UnoCSS presets for Aleph Alpha frontends. Re-exports the design-system token preset, web fonts preset, and helpers.","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 UnoCSS\n\n_@aleph-alpha/config-unocss_\n\nShared UnoCSS presets for Aleph Alpha frontends. Bundles the design-system token preset, web-fonts preset, and content-pipeline helpers so every app and library can share one UnoCSS configuration.\n\nThe design tokens themselves live in [`@aleph-alpha/config-tokens`](../config-tokens/README.md), and the embedded web fonts live in [`@aleph-alpha/config-fonts`](../config-fonts/README.md); this package consumes both and exposes them as UnoCSS presets.\n\n### Installation\n\n```bash\npnpm add -D @aleph-alpha/config-unocss\n```\n\n### Usage in applications\n\nMost apps just need:\n\n```ts\n// uno.config.ts\nimport { defineAppConfig } from '@aleph-alpha/config-unocss';\n\nexport default defineAppConfig();\n```\n\n`defineAppConfig()` wraps `defineConfig` from UnoCSS, pre-wires `presetsAlephAlpha()` and the design-system content paths, and exposes hooks for app-specific extension.\n\n#### Layering on top\n\n```ts\nimport { defineAppConfig } from '@aleph-alpha/config-unocss';\n\nexport default defineAppConfig({\n  // Extra presets appended after the defaults\n  presets: [/* presetMyApp() */],\n\n  // Extra rules — e.g. local workarounds or brand utilities\n  rules: [\n    ['my-rule', { color: 'red' }],\n  ],\n\n  // Theme overrides — merged into the base theme\n  theme: {\n    breakpoints: { xs: '480px' },\n    colors: { 'brand-bg-brand': '#CCE804' },\n  },\n\n  // Pull classes out of additional node_modules packages.\n  // filesystem and pipeline.include are union-merged with the DS defaults.\n  content: {\n    filesystem: ['node_modules/@my-org/some-lib/**/*'],\n  },\n\n  // Pass-through options — anything `defineConfig` accepts\n  shortcuts: { /* ... */ },\n  safelist: [/* ... */],\n  transformers: [/* ... */],\n});\n```\n\n#### Composing manually (libraries, advanced apps)\n\n```ts\nimport { defineConfig } from 'unocss';\nimport { presetsAlephAlpha, getDesignSystemContentPathConfig } from '@aleph-alpha/config-unocss';\n\nexport default defineConfig({\n  presets: [...presetsAlephAlpha()],\n  ...getDesignSystemContentPathConfig('vue'),\n});\n```\n\n### Migration from legacy `@aleph-alpha/config-css`\n\n**Before** (~11 lines):\n\n```ts\nimport {\n  getDesignSystemContentPathConfig,\n  presetAlephAlpha,\n} from '@aleph-alpha/config-css';\nimport { defineConfig } from 'unocss';\n\nexport default defineConfig({\n  ...getDesignSystemContentPathConfig('vue'),\n  presets: [presetAlephAlpha()],\n});\n```\n\n**After** (3 lines):\n\n```ts\nimport { defineAppConfig } from '@aleph-alpha/config-unocss';\n\nexport default defineAppConfig();\n```\n\nApps with their own brand colors keep them via the `theme` option. Colors you list here are deep-merged on top of the design-system tokens — only the keys you set are overridden, the rest of the token palette stays available:\n\n```ts\nimport { defineAppConfig } from '@aleph-alpha/config-unocss';\n\nexport default defineAppConfig({\n  theme: {\n    colors: {\n      'brand-bg-brand': '#CCE804',\n      'core-bg-accent': '#555CF9',\n    },\n  },\n});\n```\n\nApps that pulled in extra UnoCSS presets (e.g. `presetTypography`) or transformers (e.g. `transformerDirectives` for `@apply`) layer them on via `presets` and `transformers`:\n\n```ts\nimport { defineAppConfig } from '@aleph-alpha/config-unocss';\nimport { presetAlephAlphaIcons } from '@aleph-alpha/ds-icons';\nimport { presetTypography, transformerDirectives } from 'unocss';\n\nexport default defineAppConfig({\n  presets: [presetAlephAlphaIcons(), presetTypography()],\n  theme: {\n    breakpoints: { xs: '480px', sm: '640px', md: '768px', lg: '1024px' },\n    colors: { 'brand-bg-brand': '#CCE804' },\n  },\n  transformers: [transformerDirectives()],\n});\n```\n\nApps that wrapped theme overrides in their own preset (`definePreset`) keep that pattern unchanged — `defineAppConfig` accepts any UnoCSS preset alongside the defaults:\n\n```ts\nimport { defineAppConfig } from '@aleph-alpha/config-unocss';\nimport { presetAlephAlphaIcons } from '@aleph-alpha/ds-icons';\nimport { definePreset } from 'unocss';\n\nconst presetMyAppTheme = definePreset(() => ({\n  name: 'my-app-theme',\n  theme: { colors: { 'core-bg-primary': '#FBFBFD' } },\n}));\n\nexport default defineAppConfig({\n  presets: [presetAlephAlphaIcons(), presetMyAppTheme()],\n});\n```\n\nApps with local workarounds (e.g. token-specific alpha-hex fixes, spacing-preset shims for older `ds-components-vue` versions) keep them local and inject via `presets` or `rules`:\n\n```ts\nimport { defineAppConfig } from '@aleph-alpha/config-unocss';\nimport { alphaFixRules } from './local-alpha-fix';\n\nexport default defineAppConfig({\n  rules: alphaFixRules,\n});\n```\n\n> ℹ️ Legacy `presetAlephAlpha()` (singular) is not re-exported — switch to `defineAppConfig()` as shown above. If you need the raw preset stack for a custom `defineConfig`, use the plural `presetsAlephAlpha()` (see _Composing manually_).\n\n### Exports\n\n- `defineAppConfig(options?)` — app-oriented `defineConfig` wrapper, bundles `presetsAlephAlpha()` + design-system content paths.\n- `presetsAlephAlpha()` — full preset stack (Wind, Typography, web fonts, animations, tokens, theme, legacy compat).\n- `tokenPreset` — only the design-system token preset (CSS variables, theme mapping).\n- `commonPresets` — Wind + Typography + web fonts + animations, without tokens.\n- `createPresets()` — token preset + dark-mode theme preset + legacy compat preset.\n- `getDesignSystemContentPathConfig(framework)` — content pipeline config for scanning `@aleph-alpha/ds-components-vue` or `-svelte`.\n- `Theme` — TypeScript theme type derived from the design tokens.\n- `AppConfigOptions` — TypeScript options type for `defineAppConfig`.\n- `presetWebFontsAlephAlpha` — embedded `@font-face` rules for Raleway, Roboto, Montserrat, Inter.\n","readmeFilename":"README.md"}