{"_id":"@accio-ui/colors","name":"@accio-ui/colors","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@accio-ui/colors","version":"1.0.0","description":"Fork of @radix-ui/colors with oklch color space","repository":{"type":"git","url":"git+https://github.com/alexeiaccio/react-tsx.git"},"keywords":["oklch"],"author":{"name":"Alexei Accio","email":"alexei.accio@gmail.com"},"license":"MIT","bugs":{"url":"https://github.com/alexeiaccio/react-tsx/issues"},"homepage":"https://github.com/alexeiaccio/react-tsx#readme","main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.mjs","publishConfig":{"access":"public"},"devDependencies":{"@types/node":"^18.15.3","colorjs.io":"^0.4.3","tsup":"^6.6.3","typescript":"^5.0.2"},"scripts":{"build:ts":"rm -rf tmp && npx tsx scripts/build-ts-files.ts","build:css":"npx tsx scripts/build-css-modules.ts","build":"pnpm build:ts && pnpm build:css && tsup tmp/index.ts --format cjs,esm --dts && rm -rf tmp","dev":"pnpm build","lint":"tsc && rome check --apply-suggested . && rome format --write .","clean":"rm -rf dist && rm -rf .turbo && rm -rf tmp"},"typesVersions":{"*":{"*":["dist/index.d.ts"]}},"_id":"@accio-ui/colors@1.0.0","_integrity":"sha512-PyH3fv2G5dXGltqcainl53BreyNmW/xIFAHrdHlwD/qnE/lnGXJE2W5j/+ybHPgSWi5+EdSR143vjA9hXTxAWA==","_resolved":"/tmp/83b34969cc99370c285f07304b9b7e21/accio-ui-colors-1.0.0.tgz","_from":"file:accio-ui-colors-1.0.0.tgz","_nodeVersion":"16.19.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-PyH3fv2G5dXGltqcainl53BreyNmW/xIFAHrdHlwD/qnE/lnGXJE2W5j/+ybHPgSWi5+EdSR143vjA9hXTxAWA==","shasum":"70745fef582bdcafbe1718402d22b1b6a9db43fb","tarball":"https://registry.npmjs.org/@accio-ui/colors/-/colors-1.0.0.tgz","fileCount":346,"unpackedSize":1137340,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1heL9lmccxiw8nl/oRxWnJ/6LJV0zdtVcAGCtZib7SwIhAPp2M9rC8ixc1M6+JhwM6PP5oEigC1na2sulgfR3RjQb"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGzIAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2ww/7BQy+ntzjtOgs3wrLdyL+lnVEobMxHzUYu3HnKu/T1sb/2A7r\r\nxacJYeCYM4XwRRdeWQ2bCKNw/0JUcHVqJKuidb3+N1WOs+ztULae8F/bGAkU\r\nyJejARC9hhpdgRKV3wu11AZ2O7slYeO3CFKjEt1n82DxCuqB0x3lM7veY9YI\r\n51Y1jX3sInwHMt3W3DT0R3z37ugorsDA/4WZzMGxhHLlOLeRy5vwqHeVJxPn\r\nXITmeu2ydtFY1nPpHOhev9cBxtCuTgyydd1w0tv5+ZdEZxnfTf+VOBcLA/W6\r\nPaO/KVKrCMEDb2ALt68m3Ghe5sG6jWvVqmbXp4p3m/SWJ6PZzrV9HIIhR4Ux\r\nKlya/pLd8iGbX72dnQeP/lhoYP/JL1pmZcTFSFeklnrrYfqgBL6SMAAsLxgO\r\nF4C4igBE23m+lK7o/aKBDPQROXcStHYBa9MkEfMqSH00D9ttKOjTGLFfvbRA\r\n2erIgVwexeAve3GdAxZx5nQ9jpdUmzh73ix6DkyjHR2YQbSoAD2aLRxv63AP\r\nMoEN7/nEC1GTrGcCayBaVrwyNSSjiIUD72Qv+/ghOiNYbyohKNDQjmp60Vc1\r\ne07wcb89xbqyY+hicwiGd6TlP4fXqJzTRcClYVChEi4NKOV4DmVhHNlGV+CX\r\nxjraBtDUZUOnSYlhunBfKJK1WOb6QfZu05I=\r\n=6GLB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alexei.accio","email":"alexei.accio@gmail.com"},"directories":{},"maintainers":[{"name":"alexei.accio","email":"alexei.accio@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/colors_1.0.0_1679503872724_0.9094931886951918"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-22T16:51:12.640Z","1.0.0":"2023-03-22T16:51:12.927Z","modified":"2023-03-22T16:51:13.312Z"},"maintainers":[{"name":"alexei.accio","email":"alexei.accio@gmail.com"}],"description":"Fork of @radix-ui/colors with oklch color space","homepage":"https://github.com/alexeiaccio/react-tsx#readme","keywords":["oklch"],"repository":{"type":"git","url":"git+https://github.com/alexeiaccio/react-tsx.git"},"author":{"name":"Alexei Accio","email":"alexei.accio@gmail.com"},"bugs":{"url":"https://github.com/alexeiaccio/react-tsx/issues"},"license":"MIT","readme":"# Accio-UI Colors\n\nFork of Radix Colors with OkLCH color space. Can be used with Tailwind CSS.\n\n## Documentation\n\n## Installation\n\n`pnpm add @accio-ui/colors`\n\n## Usage\n\n### With Tailwind CSS\n\nSimple usage, cons.: dark mode doesn't work automatically.\n\n```js\n// tailwind.config.js\n/** @type {import('@accio-ui/colors')} */\nconst { oklch } = require(\"@accio-ui/colors\");\n\nmodule.exports = {\n darkMode: [\"class\"],\n theme: {\n colors: {\n ...oklch.tw_light.amber,\n // wich is the same as:\n // amber1: 'oklch(0.99431 0.00334 83.05786 / )',\n // amber2: 'oklch(0.98364 0.01692 84.58640 / )',\n // ...\n ...Object.fromEntries(\n Object.entries(oklch.tw_dark.amber).map(([name, color]) => [\n `dark-${name}`,\n color,\n ])\n ),\n },\n },\n};\n```\n\nFor dark mode works fine you have to add css variables to the globals.css file.\n\n```tsx\n/* App.tsx */\nimport \"styles/globals.css\";\nimport \"@accio-ui/colors/dist/css/oklch-var/blue.css\";\nimport \"@accio-ui/colors/dist/css/oklch-var/blue-dark.css\";\n/* wich is the same as:\n:root {\n --amber1: 0.99431 0.00334 83.05786;\n --amber2: 0.98364 0.01692 84.58640;\n ...\n}\n.dark {\n --amber1: 0.19691 0.04092 78.89376;\n --amber2: 0.21915 0.04630 74.66768;\n ...\n}\n*/\n\nrender();\n```\n\nand then\n\n```js\n// tailwind.config.js\nconst { oklch } = require(\"@accio-ui/colors\");\n\nmodule.exports = {\n darkMode: [\"class\"],\n theme: {\n colors: {\n ...oklch.var_tw.blue,\n // blue1: 'oklch(var(--blue1) / )',\n // blue2: 'oklch(var(--blue2) / )',\n // ...\n },\n },\n};\n```\n\nYou will need add polyfill for `oklch` to work.\n\n```js\n// postcss.config.js\nmodule.exports = {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n \"@csstools/postcss-oklab-function\": { preserve: true },\n },\n};\n```\n\n\n\n## Credits\n\n- [radix-ui/colors](https://github.com/radix-ui/colors)\n- [convert-to-oklch](https://github.com/fpetrakov/convert-to-oklch)\n- [colorjs.io](https://github.com/LeaVerou/color.js)\n- [OKLCH Color Picker & Converter](https://oklch.com)\n- [postcss-oklab-function](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-oklab-function)\n\n```\n\n```\n","readmeFilename":"README.md"}