{"_id":"@damarkuncoro/agnostic-ui-theme","name":"@damarkuncoro/agnostic-ui-theme","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@damarkuncoro/agnostic-ui-theme","description":"Agnostic UI Theme Tokens","version":"0.1.0","type":"module","main":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.js"}},"sideEffects":false,"publishConfig":{"access":"public"},"scripts":{"build":"tsc -p tsconfig.json","test":"vitest run"},"license":"MIT","author":{"name":"Damar Kuncoro"},"keywords":["agnostic-ui","theme","tokens","design-system","typescript"],"repository":{"type":"git","url":"git+https://github.com/damarkuncoro/agnostic-ui.git"},"bugs":{"url":"https://github.com/damarkuncoro/agnostic-ui/issues"},"homepage":"https://github.com/damarkuncoro/agnostic-ui#readme","engines":{"node":">=18","pnpm":">=8"},"dependencies":{"@damarkuncoro/agnostic-ui-contracts":"workspace:*"},"devDependencies":{"typescript":"^5.0.0","vitest":"^3.0.0"},"_id":"@damarkuncoro/agnostic-ui-theme@0.1.0","gitHead":"f28eaf02810ebb0b7e100d20a22833101c70e6e4","_nodeVersion":"20.19.4","_npmVersion":"10.8.2","dist":{"integrity":"sha512-MZLokAmulqI7YmG3T2OxA9X8vZBNU49tASiISRB5owalBFb8NWohDKFM06f/FdylS5NsCB7cOLz9pEVotw8ZuQ==","shasum":"d8c28422649c9b3b474968340d96c7645dd1e83e","tarball":"https://registry.npmjs.org/@damarkuncoro/agnostic-ui-theme/-/agnostic-ui-theme-0.1.0.tgz","fileCount":182,"unpackedSize":69799,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCx6TQPNuEUzaM2UhxKWDRxFFuuuosrrdUWWa1wqQ9PCwIgUuj6+OxvEMIlj3VKVKrGVf1lUQSLBbN8Bct2k2OVwGc="}]},"_npmUser":{"name":"damarkuncoro","email":"damarkuncoro@gmail.com"},"directories":{},"maintainers":[{"name":"damarkuncoro","email":"damarkuncoro@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/agnostic-ui-theme_0.1.0_1767003131255_0.44680196249036075"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-29T10:12:11.165Z","0.1.0":"2025-12-29T10:12:11.410Z","modified":"2025-12-29T10:12:11.677Z"},"maintainers":[{"name":"damarkuncoro","email":"damarkuncoro@gmail.com"}],"description":"Agnostic UI Theme Tokens","homepage":"https://github.com/damarkuncoro/agnostic-ui#readme","keywords":["agnostic-ui","theme","tokens","design-system","typescript"],"repository":{"type":"git","url":"git+https://github.com/damarkuncoro/agnostic-ui.git"},"author":{"name":"Damar Kuncoro"},"bugs":{"url":"https://github.com/damarkuncoro/agnostic-ui/issues"},"license":"MIT","readme":"# @damarkuncoro/agnostic-ui-theme\n\nTujuan paket ini adalah mendefinisikan “tema” sebagai sekumpulan token yang netral terhadap framework maupun library UI. Tema memetakan varian dan ukuran komponen ke token desain (warna, tipografi, spacing, radius), bukan ke kelas CSS spesifik. Ini mematuhi SRP, DRY, KISS, YAGNI dan mengikuti arsitektur Core yang independen.\n\n## Konsep Utama\n- Tema adalah kontrak token: tidak ada class Tailwind, tidak ada DOM, tidak ada CSS. Hanya string token yang dapat diinterpretasi oleh layer lain.\n- Variants dan sizes ditentukan per komponen. Contoh untuk `Button`:\n  - `variants`: `primary`, `secondary`, `success`, `warning`, `danger`, `ghost`, `link`\n  - `sizes`: `xs`, `sm`, `md`, `lg`, `xl`\n- Setiap varian dan ukuran memetakan ke token seperti `color.primary`, `space.4`, `font.base`, `radius.md`, dsb.\n\n## API\n- Ekspor utama:\n  - `defaultButtonTheme` mendefinisikan token untuk varian/ukuran tombol.\n  - `UiButtonTheme`, `UiButtonVariantTokens`, `UiButtonSizeTokens` sebagai tipe.\n- Lokasi sumber:\n  - `packages/agnostic-ui-theme/src/ui/button/ui-button.theme.ts`\n  - `packages/agnostic-ui-theme/src/ui/button/ui-button.types.ts`\n  - `packages/agnostic-ui-theme/src/index.ts`\n\nContoh struktur tema tombol:\n```ts\n// packages/agnostic-ui-theme/src/ui/button/ui-button.theme.ts:5\nexport const defaultButtonTheme: UiButtonTheme = {\n  variants: {\n    primary: { bg: 'color.primary', text: 'color.onPrimary', hoverBg: 'color.primary.hover' },\n    secondary: { bg: 'color.secondary', text: 'color.onSecondary', hoverBg: 'color.secondary.hover' },\n    success: { bg: 'color.success', text: 'color.onSuccess', hoverBg: 'color.success.hover' },\n    warning: { bg: 'color.warning', text: 'color.onWarning', hoverBg: 'color.warning.hover' },\n    danger: { bg: 'color.danger', text: 'color.onDanger', hoverBg: 'color.danger.hover' },\n    ghost: { bg: 'color.transparent', text: 'color.onGhost', hoverBg: 'color.transparent.hover' },\n    link: { bg: 'color.transparent', text: 'color.onLink', hoverBg: 'color.transparent.hover' }\n  },\n  sizes: {\n    xs: { px: 'space.2', py: 'space.1', font: 'font.sm', radius: 'radius.sm' },\n    sm: { px: 'space.3', py: 'space.1', font: 'font.sm', radius: 'radius.sm' },\n    md: { px: 'space.4', py: 'space.2', font: 'font.base', radius: 'radius.md' },\n    lg: { px: 'space.5', py: 'space.3', font: 'font.lg', radius: 'radius.lg' },\n    xl: { px: 'space.6', py: 'space.4', font: 'font.lg', radius: 'radius.lg' }\n  }\n}\n```\n\n## Instalasi & Import\nMonorepo sudah memetakan alias ke source melalui `tsconfig.base.json`.\n\n```ts\n// Impor tema tombol dan tipe\nimport { defaultButtonTheme, type UiButtonTheme } from '@damarkuncoro/agnostic-ui-theme'\n```\n\nTema menggunakan kontrak:\n```ts\nimport { UI_BUTTON_SIZES, UI_BUTTON_VARIANTS } from '@damarkuncoro/contracts'\n```\n\n## Build & Test\n- Build:\n```\npnpm --filter @damarkuncoro/agnostic-ui-theme build\n```\n- Test:\n```\npnpm --filter @damarkuncoro/agnostic-ui-theme test\n```\n\n## Hubungan dengan Paket Lain\n- `contracts`: mendefinisikan enumerasi dan tipe publik untuk varian/ukuran (UI Contract).\n- `skin`: menerjemahkan token tema menjadi implementasi visual (kelas CSS/Tailwind).\n- `base`, `react`, `vue`: menggunakan kontrak dan skin untuk merender komponen.\n\n## Extensibility\n- Tambah tema baru: definisikan objek `UiButtonTheme` lain, tetap gunakan kunci token yang konsisten (`color.*`, `space.*`, dll).\n- Ubah tema default: override `defaultButtonTheme` pada aplikasi Anda lalu injeksikan melalui layer yang membutuhkan.\n\n## Prinsip Desain\n- Core, tanpa dependensi pada UI lib.\n- SOLID: tema untuk satu komponen berada di modulnya sendiri.\n- Composition over Inheritance: komponen mengonsumsi token; skin mengkomposisi kelas dari token dan utilitas.\n","readmeFilename":"README.md","_rev":"1-89ccc59e1b490a0e2d46261678c0a647"}