{"_id":"tw-theme-kit","_rev":"2-db8f62e8d62442d5a5d0c7411d8f25f7","name":"tw-theme-kit","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.1":{"name":"tw-theme-kit","version":"1.0.1","keywords":["tailwind","tailwindcss","color","colors","theme","themes","dark","theme-kit"],"author":{"url":"https://github.com/josephtay-meta","name":"josephtay-meta"},"license":"MIT","_id":"tw-theme-kit@1.0.1","maintainers":[{"name":"ericgraham","email":"ericgraham.dev@gmail.com"}],"homepage":"https://github.com/josephtay-meta/tw-theme-kit#readme","bugs":{"url":"https://github.com/josephtay-meta/tw-theme-kit/issues"},"dist":{"shasum":"5df2480da3380bf2e8e395a2b6c8559a9bc536ce","tarball":"https://registry.npmjs.org/tw-theme-kit/-/tw-theme-kit-1.0.1.tgz","fileCount":9,"integrity":"sha512-qz2nolWGZpAHYGEr0fBI2lrgMqm1B3KEKBAg/yTw+ooqclWmiS/Ghrk9/L5+Pj1y2zk9YCvoCbQGcisQlJRWwg==","signatures":[{"sig":"MEUCIQCtURo7yt7TTc7UT9w3aDBcP/8acDip5D93ubaBh2vviwIgHxh8yISmRxnNsChlr3cZFZp8jzKoS2m90pPIyUJE4S0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":48879},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}}},"scripts":{"dev":"npm run build && vitest","test":"vitest run","build":"tsup","visual":"npm run build && cd visual && npm run dev","release":"npm run build && npm test && npm publish","test:watch":"vitest","prepublishOnly":"npm run build"},"_npmUser":{"name":"ericgraham","email":"ericgraham.dev@gmail.com"},"repository":{"url":"git+https://github.com/josephtay-meta/tw-theme-kit.git","type":"git"},"_npmVersion":"11.13.0","description":"Professional Tailwind CSS plugin for multi-theme color systems with one className","directories":{},"_nodeVersion":"24.16.0","dependencies":{"flat":"^5.0.2","colorjs.io":"^0.5.2"},"publishConfig":{"access":"public","branches":["master"]},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","vitest":"^3.0.5","prettier":"^3.4.2","typescript":">=4.0.0","@types/flat":"^5.0.2","@types/node":"^22.10.10","tailwindcss":"^4.0.0"},"peerDependencies":{"tailwindcss":">=4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/tw-theme-kit_1.0.1_1781393172525_0.836670804000176","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"tw-theme-kit","version":"1.1.0","author":{"name":"josephtay-meta","url":"https://github.com/josephtay-meta"},"description":"Professional Tailwind CSS plugin for multi-theme color systems with one className","keywords":["tailwind","tailwindcss","color","colors","theme","themes","dark","theme-kit"],"type":"module","main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.cts","default":"./dist/index.cjs"}},"./runtime":{"import":{"types":"./dist/runtime.d.ts","default":"./dist/runtime.mjs"},"require":{"types":"./dist/runtime.d.cts","default":"./dist/runtime.cjs"}}},"scripts":{"build":"tsup","prepublishOnly":"npm run build","test":"vitest run","test:watch":"vitest","dev":"npm run build && vitest","visual":"npm run build && cd visual && npm run dev","release":"npm run build && npm test && npm publish"},"publishConfig":{"access":"public","branches":["master"]},"peerDependencies":{"tailwindcss":">=4.0.0"},"dependencies":{"colorjs.io":"^0.5.2","flat":"^5.0.2"},"devDependencies":{"@types/flat":"^5.0.2","@types/node":"^22.10.10","prettier":"^3.4.2","tailwindcss":"^4.0.0","tsup":"^8.3.5","typescript":">=4.0.0","vitest":"^3.0.5"},"repository":{"type":"git","url":"git+https://github.com/josephtay-meta/tw-theme-kit.git"},"license":"MIT","_id":"tw-theme-kit@1.1.0","bugs":{"url":"https://github.com/josephtay-meta/tw-theme-kit/issues"},"homepage":"https://github.com/josephtay-meta/tw-theme-kit#readme","_nodeVersion":"24.16.0","_npmVersion":"11.13.0","dist":{"integrity":"sha512-wW+MgsdKOTDDfF3ldqEOFH84JJ4fxSXw6bjS6NXhtMTeXkIzuoGsXXKj2vvF58HTQCTQTxQASrYNLF08svZ0+A==","shasum":"190b3a8c76e72928ba27eaeec223ee1dc79563f5","tarball":"https://registry.npmjs.org/tw-theme-kit/-/tw-theme-kit-1.1.0.tgz","fileCount":15,"unpackedSize":110986,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBuuHDWF4b2eyGelVdtVdH3xvbYWQeLyLcDr3boL5jwsAiBrIk5Gb32Zf5WUjH8cds27/YL6rYz2VVOV4m0CEfrG+Q=="}]},"_npmUser":{"name":"ericgraham","email":"ericgraham.dev@gmail.com"},"directories":{},"maintainers":[{"name":"ericgraham","email":"ericgraham.dev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/tw-theme-kit_1.1.0_1781542189186_0.3779475132805177"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-13T23:26:12.222Z","modified":"2026-06-15T16:49:49.459Z","1.0.1":"2026-06-13T23:26:12.686Z","1.1.0":"2026-06-15T16:49:49.339Z"},"bugs":{"url":"https://github.com/josephtay-meta/tw-theme-kit/issues"},"author":{"name":"josephtay-meta","url":"https://github.com/josephtay-meta"},"license":"MIT","homepage":"https://github.com/josephtay-meta/tw-theme-kit#readme","keywords":["tailwind","tailwindcss","color","colors","theme","themes","dark","theme-kit"],"repository":{"type":"git","url":"git+https://github.com/josephtay-meta/tw-theme-kit.git"},"description":"Professional Tailwind CSS plugin for multi-theme color systems with one className","maintainers":[{"name":"ericgraham","email":"ericgraham.dev@gmail.com"}],"readme":"# tw-theme-kit\n\n> Switch Tailwind color themes with one class. Built for Tailwind CSS v4.\n\n**Version:** `1.1.0`\n\n---\n\n## Install\n\n```bash\nnpm i -D tw-theme-kit\n```\n\nTailwind CSS v4 is required. npm installs it automatically as a peer dependency.\n\n---\n\n## Setup\n\n**1. Add the plugin** — `tailwind.config.js`\n\n```js\nimport { createThemes } from 'tw-theme-kit';\n\nexport default {\n  content: ['./src/**/*.{html,js,jsx,ts,tsx,vue,svelte,astro}'],\n  plugins: [\n    createThemes({\n      light: {\n        primary: 'steelblue',\n        secondary: 'darkblue',\n        brand: '#F3F3F3',\n      },\n      dark: {\n        primary: 'turquoise',\n        secondary: 'tomato',\n        brand: '#4A4A4A',\n      },\n    }),\n  ],\n};\n```\n\nCommonJS:\n\n```js\nconst { createThemes } = require('tw-theme-kit');\n```\n\n**2. Link the config** — your CSS entry file\n\n```css\n@import \"tailwindcss\";\n@config \"./tailwind.config.js\";\n```\n\n**3. Apply a theme** — add the theme name as a class\n\n```html\n<html class=\"light\">\n  <div class=\"bg-brand\">\n    <h1 class=\"text-primary\">Hello</h1>\n    <p class=\"text-secondary\">World</p>\n  </div>\n</html>\n```\n\nSwitch themes by changing the class: `<html class=\"dark\">`\n\n---\n\n## Features\n\n| Feature | Description |\n| --- | --- |\n| One-class switching | Apply `light`, `dark`, or any custom theme name as a class |\n| OKLCH colors | Automatic conversion for Tailwind v4 opacity support |\n| Theme variants | Use `dark:rounded` to style elements per active theme |\n| Nested themes | Scope themes to subtrees with `data-theme` |\n| Nested palettes | `{ DEFAULT, 100, 200 }` objects flatten to `primary`, `primary-100`, etc. |\n| CSS variables | `--ttk-primary`, `--ttk-secondary`, … available in custom CSS |\n| ESM + CJS | Works with `import` and `require` |\n| TypeScript | Full type declarations included |\n\n---\n\n## API\n\n```js\nimport {\n  createThemes,\n  resolveThemeKitConfig,\n  generateVariantDefinitions,\n  isThemeKitColorError,\n  isThemeKitError,\n  themeKitMeta,\n  ThemeKitColorError,\n  ThemeKitError,\n} from 'tw-theme-kit';\n```\n\n**`createThemes(config, options?)`** — returns a Tailwind plugin.\n\n**`resolveThemeKitConfig(config, options?)`** — returns `{ variants, utilities, colors }` without wrapping in a plugin. Useful for custom tooling.\n\n**`generateVariantDefinitions(selector)`** — returns nested-theme-aware Tailwind variant selectors for a theme class.\n\n**`isThemeKitError(value)` / `isThemeKitColorError(value)`** — runtime type guards for error handling.\n\n**`themeKitMeta`** — frozen `{ name, version, cssVariablePrefix }` for logging and tooling.\n\n**Lightweight runtime entry** — import primitives only (no Tailwind plugin):\n\n```js\nimport { themeKitMeta, generateVariantDefinitions } from 'tw-theme-kit/runtime';\n```\n\n**Types:** `ThemeKitConfig`, `ThemeKitOptions`\n\n---\n\n## Examples\n\n### Multiple themes\n\n```js\ncreateThemes({\n  light: { primary: 'steelblue', brand: '#F3F3F3' },\n  dark:  { primary: 'turquoise', brand: '#4A4A4A' },\n  forest: { primary: '#2A9D8F', brand: '#264653' },\n});\n```\n\n### Nested color scales\n\n```js\ncreateThemes({\n  light: {\n    primary: {\n      DEFAULT: 'orange',\n      100: 'red',\n      200: 'blue',\n    },\n  },\n});\n// → bg-primary, bg-primary-100, bg-primary-200\n```\n\n### Color-scheme helpers\n\n```js\ncreateThemes(({ light, dark }) => ({\n  winter: light({ primary: 'white', surface: '#F3F3F3' }),\n  forest: dark({ primary: 'black', surface: '#1A1A1A' }),\n}));\n```\n\n### CSS variables\n\n```css\n.card {\n  color: var(--ttk-primary);\n  background: var(--ttk-brand);\n}\n```\n\n### Theme variants\n\n```html\n<button class=\"dark:bg-white dark:text-black\">Themed button</button>\n```\n\n### Nested themes\n\n```html\n<html class=\"dark\">\n  <div data-theme class=\"winter\">\n    <!-- winter colors apply here -->\n  </div>\n</html>\n```\n\n> Place `group-*` modifiers before theme variants: `group-hover:dark:bg-red-500`\n\n---\n\n## Options\n\n```js\ncreateThemes(config, {\n  produceCssVariable: (name) => `--ttk-${name}`,   // default\n  produceThemeClass:  (name) => name,               // default\n  produceThemeVariant: (name) => name,             // default, same as produceThemeClass\n  strict: false,                                    // throw ThemeKitColorError on bad colors\n});\n```\n\n| Option | Default | Purpose |\n| --- | --- | --- |\n| `produceCssVariable` | `` `--ttk-${name}` `` | CSS custom property name |\n| `produceThemeClass` | theme name | Class applied to activate a theme |\n| `produceThemeVariant` | same as class | Prefix for variant utilities |\n| `strict` | `false` | Fail on invalid color values |\n\n---\n\n## License\n\nMIT\n","readmeFilename":"README.md"}