{"_id":"@adech/themes","_rev":"2-af798febe05b2a4f9f46daf3cc0aa7e5","name":"@adech/themes","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"@adech/themes","version":"0.1.0","keywords":["theme","themes","design-tokens","colors","tailwind","tailwindcss","css-variables"],"license":"MIT","_id":"@adech/themes@0.1.0","maintainers":[{"name":"adechlien","email":"alejandrohernandezpolo@gmail.com"}],"dist":{"shasum":"dec700e4e253c551dc671189ffe14db3c128b16a","tarball":"https://registry.npmjs.org/@adech/themes/-/themes-0.1.0.tgz","fileCount":7,"integrity":"sha512-ljOeCpqvI6xAX9Tvd4WyLEVU/9Ryb02xbqgyzg8ADn1ncv+Zibsa8nCmIwSEbW5iG4GQvRRCE10yEiqehy2D7g==","signatures":[{"sig":"MEYCIQD+odSo94bREDfsPer5v4P1LMi+Dc1Cfj7kNTikMP/mSAIhAMA5fZRkTv+dUcALELBzWydfeGfj4JQ5oW66iP0oQyi5","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7154},"type":"commonjs","exports":{"./superior":"./dist/superior/index.js","./superior/css":"./dist/superior/superior.css","./superior/json":"./dist/superior/superior.json","./superior/preset":"./dist/superior/superior.preset.cjs","./superior/tailwind":"./dist/superior/superior.tailwind.css"},"scripts":{"build":"npm run build:superior","build:all":"npm run build:superior && npm run build:legacy && npm run build:human","build:human":"node scripts/build-branch.js human","build:branch":"node scripts/build-branch.js","build:legacy":"node scripts/build-branch.js legacy","build:superior":"node scripts/build-branch.js superior","prepublishOnly":"npm run build"},"_npmUser":{"name":"adechlien","email":"alejandrohernandezpolo@gmail.com"},"_npmVersion":"11.6.2","description":"Portable theme tokens for Adech Theme branches","directories":{},"_nodeVersion":"24.13.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/themes_0.1.0_1772837780592_0.863194214016606","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@adech/themes","version":"0.2.0","description":"Portable theme tokens for Adech Theme branches","license":"MIT","type":"commonjs","scripts":{"build":"npm run build:superior","build:all":"npm run build:superior && npm run build:legacy && npm run build:human","build:branch":"node scripts/build-branch.js","build:superior":"node scripts/build-branch.js superior","build:legacy":"node scripts/build-branch.js legacy","build:human":"node scripts/build-branch.js human","prepublishOnly":"npm run build"},"keywords":["theme","themes","design-tokens","colors","tailwind","tailwindcss","css-variables"],"publishConfig":{"access":"public"},"exports":{"./superior":"./dist/superior/index.js","./superior/json":"./dist/superior/superior.json","./superior/css":"./dist/superior/superior.css","./superior/tailwind":"./dist/superior/superior.tailwind.css","./superior/preset":"./dist/superior/superior.preset.cjs"},"homepage":"https://github.com/adechlien/adech","repository":{"type":"git","url":"git+https://github.com/adechlien/adech.git"},"bugs":{"url":"https://github.com/adechlien/adech/issues"},"gitHead":"079263e98716df63fa6ba766b0e22f7533cef34a","_id":"@adech/themes@0.2.0","_nodeVersion":"24.13.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-sPtiELwFFK13e2PEZw0PjRj2xY+WkfePpjoU2uhmoB6+JQR4EolxrUWe8EpaS4zMK3ZKJ3Ps9VqhcWMx9RmGlQ==","shasum":"6735d253153d0c8cf7888b095beaab97897a57f1","tarball":"https://registry.npmjs.org/@adech/themes/-/themes-0.2.0.tgz","fileCount":7,"unpackedSize":8150,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEaGS6xVBVNbzd3isepxwKBNPMgMBA12oq+gGFfesT21AiBiqec+kG5+tEcFxvcd9RMuCHMc5iS2IUWpkRcnYMmLzw=="}]},"_npmUser":{"name":"adechlien","email":"alejandrohernandezpolo@gmail.com"},"directories":{},"maintainers":[{"name":"adechlien","email":"alejandrohernandezpolo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/themes_0.2.0_1772996847085_0.5849606690247742"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-06T22:56:20.493Z","modified":"2026-03-08T19:07:27.654Z","0.1.0":"2026-03-06T22:56:20.737Z","0.2.0":"2026-03-08T19:07:27.230Z"},"license":"MIT","keywords":["theme","themes","design-tokens","colors","tailwind","tailwindcss","css-variables"],"description":"Portable theme tokens for Adech Theme branches","maintainers":[{"name":"adechlien","email":"alejandrohernandezpolo@gmail.com"}],"readme":"# Adech Themes\r\n\r\nPortable theme tokens for the Adech collection.\r\n\r\nThis package exposes Adech themes in multiple formats so they can be used across different kinds of projects.\r\n\r\nAvailable formats include:\r\n\r\n- JSON tokens\r\n- CSS custom properties\r\n- Tailwind CSS v4 theme variables\r\n- Tailwind CSS v3 presets\r\n\r\nAt the moment, the package includes the `Superior` theme.\r\n\r\n---\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @adech/themes\r\n````\r\n\r\n---\r\n\r\n## Available formats\r\n\r\nThe `Superior` theme is available through these public entry points:\r\n\r\n* `@adech/themes/superior`\r\n* `@adech/themes/superior/json`\r\n* `@adech/themes/superior/css`\r\n* `@adech/themes/superior/tailwind`\r\n* `@adech/themes/superior/preset`\r\n\r\n---\r\n\r\n## 1. Use with CSS custom properties\r\n\r\nImport the CSS file:\r\n\r\n```css\r\n@import \"@adech/themes/superior/css\";\r\n```\r\n\r\nThis exposes variables like:\r\n\r\n* `--adech-boulevard-1`\r\n* `--adech-boulevard-2`\r\n* `--adech-venomous-1`\r\n* `--adech-swamp-4`\r\n\r\nExample:\r\n\r\n```css\r\n@import \"@adech/themes/superior/css\";\r\n\r\nbody {\r\n  background: var(--adech-boulevard-1);\r\n  color: var(--adech-swamp-4);\r\n}\r\n\r\n.card {\r\n  background: var(--adech-venomous-2);\r\n  border: 2px solid var(--adech-venomous-4);\r\n}\r\n```\r\n\r\nThis option works well for:\r\n\r\n* plain CSS projects\r\n* Astro\r\n* React\r\n* Vue\r\n* Svelte\r\n* design systems based on CSS variables\r\n\r\n---\r\n\r\n## 2. Use with Tailwind CSS v4\r\n\r\nTailwind v4 uses theme variables defined with `@theme`.\r\n\r\nImport Tailwind and then import the Adech theme file:\r\n\r\n```css\r\n@import \"tailwindcss\";\r\n@import \"@adech/themes/superior/tailwind\";\r\n```\r\n\r\nThis generates utilities based on the exported color tokens.\r\n\r\nExample:\r\n\r\n```html\r\n<div class=\"bg-adech-boulevard-1 text-adech-swamp-4 border-2 border-adech-venomous-4\">\r\n  Superior palette example\r\n</div>\r\n```\r\n\r\nUse this option when your project is already on Tailwind CSS v4.\r\n\r\n---\r\n\r\n## 3. Use with Tailwind CSS v3\r\n\r\nTailwind v3 supports reusable shared configurations through presets.\r\n\r\nIn your `tailwind.config.js`:\r\n\r\n```js\r\nmodule.exports = {\r\n  presets: [require(\"@adech/themes/superior/preset\")],\r\n  content: [\"./src/**/*.{js,ts,jsx,tsx,html}\"]\r\n};\r\n```\r\n\r\nThen use the colors directly in your classes:\r\n\r\n```html\r\n<div class=\"bg-adech-boulevard-1 text-adech-swamp-4 border-2 border-adech-venomous-4\">\r\n  Superior palette example\r\n</div>\r\n```\r\n\r\nUse this option if you need compatibility with Tailwind CSS v3 projects.\r\n\r\n---\r\n\r\n## 4. Use as JSON tokens\r\n\r\nYou can also consume the raw tokens in JavaScript:\r\n\r\n```js\r\nconst superior = require(\"@adech/themes/superior/json\");\r\n\r\nconsole.log(superior);\r\n```\r\n\r\nExample structure:\r\n\r\n```json\r\n{\r\n  \"name\": \"Superior\",\r\n  \"prefix\": \"adech\",\r\n  \"subbranches\": {\r\n    \"boulevard\": {\r\n      \"1\": \"#C7DCFF\",\r\n      \"2\": \"#B4D0FF\",\r\n      \"3\": \"#A1C4FF\",\r\n      \"4\": \"#8FB1F0\"\r\n    }\r\n  }\r\n}\r\n```\r\n\r\nThis is useful for:\r\n\r\n* scripts\r\n* custom tooling\r\n* token transformations\r\n* theme previews\r\n* documentation generators\r\n\r\n---\r\n\r\n## Theme structure\r\n\r\nAdech Themes is a collection of independent themes.\r\n\r\nEach theme contains its own palettes, also referred to internally as branches or subbranches.\r\n\r\nThe `Superior` theme currently includes palettes such as:\r\n\r\n* `boulevard`\r\n* `venomous`\r\n* `swamp`\r\n* `sunny`\r\n* `void`\r\n\r\nTokens are currently named by palette and step, for example:\r\n\r\n* `adech-boulevard-1`\r\n* `adech-venomous-3`\r\n* `adech-swamp-4`\r\n\r\nThis keeps the system simple today and leaves room to add semantic tokens later, such as `bg`, `fg`, `surface`, `border`, or `accent`.\r\n\r\n---\r\n\r\n## Example workflow\r\n\r\n1. Install the package\r\n2. Choose the theme you want to use\r\n3. Choose the format you need\r\n4. Import the public entry point\r\n5. Use the exported colors in your project\r\n\r\n---\r\n\r\n## Roadmap\r\n\r\nFuture themes and token contracts may include:\r\n\r\n* more Adech themes\r\n* semantic tokens\r\n* platform-specific exports\r\n* IDE theme contracts\r\n* design-token tooling integrations\r\n","readmeFilename":"README.md","homepage":"https://github.com/adechlien/adech","repository":{"type":"git","url":"git+https://github.com/adechlien/adech.git"},"bugs":{"url":"https://github.com/adechlien/adech/issues"}}