{"_id":"@bitcurve/reactor-tw-palette","name":"@bitcurve/reactor-tw-palette","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@bitcurve/reactor-tw-palette","type":"module","version":"0.0.1","license":"Apache-2.0","main":"dist/index.js","types":"dist/index.d.ts","private":false,"sideEffects":false,"repository":{"type":"ssh","url":"git+ssh://git@github.com/appcurve/reactor.git","directory":"packages/tw-palette"},"publishConfig":{"access":"public"},"exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/index.d.ts"}},"dependencies":{"colord":"^2.9.3"},"devDependencies":{"tailwindcss":"^3.4.7","typescript":"^5.5.4","@bitcurve/reactor-theming":"0.0.1"},"peerDependencies":{"tailwindcss":"^3.4.7"},"scripts":{"build":"pnpm check && tsup src/index.ts --format cjs,esm --dts","check":"tsc --noEmit","test":"vitest"},"_id":"@bitcurve/reactor-tw-palette@0.0.1","description":"A [tailwindcss](https://tailwindcss.com/docs/installation) plugin that helps define the palette of a tailwind preset or theme with light/dark mode support and coordination with the `@tailwindcss/typography` (`prose`) plugin.","bugs":{"url":"https://github.com/appcurve/reactor/issues"},"homepage":"https://github.com/appcurve/reactor#readme","_integrity":"sha512-EDtyDXAzrYlnq/+d+NzNPuK50i/lyv/prth0vez0XWiPhbk1CjjN6RgA6zIhhLj2WWBbiRPC8+0iOzzo8BWPhQ==","_resolved":"/tmp/8ed5ddaa82c23f5381e2edc16955e30b/bitcurve-reactor-tw-palette-0.0.1.tgz","_from":"file:bitcurve-reactor-tw-palette-0.0.1.tgz","_nodeVersion":"20.15.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-EDtyDXAzrYlnq/+d+NzNPuK50i/lyv/prth0vez0XWiPhbk1CjjN6RgA6zIhhLj2WWBbiRPC8+0iOzzo8BWPhQ==","shasum":"7d8d5ba07ff1e33f220ff9def9edede64776ed78","tarball":"https://registry.npmjs.org/@bitcurve/reactor-tw-palette/-/reactor-tw-palette-0.0.1.tgz","fileCount":10,"unpackedSize":87389,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGeUJmZ+jckfd+H0o7032C5Q3Ekt3l5+4f6sVIivI1uQIgNOkARu9P0xuxOTOcRXBWT2FVzFIv6Zxk1XonN1YgxDI="}]},"_npmUser":{"name":"bitcurvesystems","email":"contact@bitcurve.com"},"directories":{},"maintainers":[{"name":"bitcurvesystems","email":"contact@bitcurve.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/reactor-tw-palette_0.0.1_1722902794814_0.4893193834740579"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-06T00:06:34.679Z","0.0.1":"2024-08-06T00:06:34.956Z","modified":"2024-08-06T00:06:35.277Z"},"maintainers":[{"name":"bitcurvesystems","email":"contact@bitcurve.com"}],"description":"A [tailwindcss](https://tailwindcss.com/docs/installation) plugin that helps define the palette of a tailwind preset or theme with light/dark mode support and coordination with the `@tailwindcss/typography` (`prose`) plugin.","homepage":"https://github.com/appcurve/reactor#readme","repository":{"type":"ssh","url":"git+ssh://git@github.com/appcurve/reactor.git","directory":"packages/tw-palette"},"bugs":{"url":"https://github.com/appcurve/reactor/issues"},"license":"Apache-2.0","readme":"# @bitcurve/reactor-tw-palette\n\nA [tailwindcss](https://tailwindcss.com/docs/installation) plugin that helps define the palette of a tailwind preset or theme with light/dark mode support and coordination with the `@tailwindcss/typography` (`prose`) plugin.\n\nThe plugin accepts a `PluginThemePaletteDefinition` object and uses it to:\n\n- create CSS custom properties (CSS variables) for each color\n- create color utility classes under tailwind preset/config `theme.extend.colors`\n- automatically map colors that follow a naming convention to apply the `@tailwindcss/typography` (`prose`) plugin\n\nThis package includes a helper to extend `tailwind-merge` to recognize custom color utility classes added via this plugin so they can be intelligently merged with other color utilities.\n\nThis package is published as both ESM + CJS with types and source maps targeting ES2022.\n\n## Features\n\nCSS custom properies and color utility classes generated by this plugin are prefixed with a capital `P` (for _palette_) so they are easily distinguished from other color utilities and easily searchable in code: e.g. `--P-primary` -> `text-P-primary`.\n\nThe _theme palette definition_ supports nesting with a tailwind-config-like convention for `DEFAULT` keys. Nested keys are flattened for easy reference e.g. `--P-primary-hover` -> `text-P-primary-hover`.\n\nThe value of CSS custom properties set by this plugin are _color channel values_ as required to support tailwind's [opacity modifier syntax](https://tailwindcss.com/docs/customizing-colors#using-css-variables) e.g. `bg-P-primary/50`.\n\nColor values in a _palette definition object_ can be RGB (`#000`, `#fffff`), HSL (`hsl(...)`, `hsla(...)`), or OKLCH (`oklch(...)`).\n\nThis makes it is easy to paste colors from design tools and to reference colors from tailwind's [default palette](https://tailwindcss.com/docs/customizing-colors#default-color-palette) or any tailwind-compatible palette such as the [@evilmartians/harmony](https://github.com/evilmartians/harmony) OKLCH palette.\n\nThe entries in a _palette definition object_ are entirely free-form and the only convention is for automatic mapping to the `@tailwindcss/typography` (`prose`) plugin. \n\n## Installation\n\nAll documentation and examples assume ESM; revise the syntax accordingly if you are using CommonJS.\n\n### Install this Package\n\nInstall this package as a dev dependency:\n\n```sh\npnpm add -D @bitcurve/reactor-tw-palette\n```\n\nImport into your tailwind preset or theme and provide your color definition in the plugin configuration.\n\nThe _theme palette definition_ should satisfy the type `PluginThemePaletteDefinition`.\n\n```ts\nconst tailwindConfig = {\n  // ...\n  plugins: [\n    palettePlugin({\n      palette: themePaletteDefinition,\n      typography: {\n        applyAlpha: true,\n        colorSpaceFn: 'oklch', // 'rgb', 'hsl', 'oklch' supported\n      }\n    }),\n  ]\n  // ...\n}\n```\n\nSpecifying `typography` config is optional: the defaults are `applyAlpha: true` and `colorSpaceFn: 'rgb'`.\n\n## Theme Palette Definition\n\n```ts\nimport { neutral, slate, cyan } from 'tailwindcss/colors'\n\nconst neutral = {\n  ...colors.neutral,\n} satisfies PaletteDictionary\n\nconst palette = {\n  // tuple values define respective light and dark colors in one line\n  border: ['hsl(31 120 50)', 'hsl(31 120 10)'],\n\n  // single values as strings or 1-item arrays apply the same color to both light and dark\n  box: 'hsl(31 120 50)',\n\n  // arbitrary levels of nesting are supported with `DEFAULT` special case (this produces `--P-link` and `--P-link-hover`)\n  link: {\n    DEFAULT: '#0000ff',\n    hover: '#0000fa',\n  },\n\n  // refer to type PaletteTypographyDictionary for enforced types that map to typography plugin\n  // a current limitation (pending TODO) is all values must use the same color space (rgb/hsl/oklch) and it must be set in config\n  content: {\n    // ...\n  }\n}\n```\n\n### Merge css class names with `cn()`\n\n```ts\nimport { cn } from '@bitcurve/reactor-style'\n```\n","readmeFilename":"README.md"}