diff --git a/README.md b/README.md index 4da559d..f18febc 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,40 @@ Easily generate color shades for themes ## Usage +You can use the CLI for fast generation or use the programmatic API for more control. + +### CLI + +```bash +npx theme-colors +``` + +Example: + +```bash +npx theme-colors "#ABABAB" # Be careful and add doubles quotes +``` + +This will generate the following shades: + +```js +{ + 50: '#FBFBFB', + 100: '#F7F7F7', + 200: '#EAEAEA', + 300: '#DDDDDD', + 400: '#C4C4C4', + 500: '#ABABAB', + 600: '#9A9A9A', + 700: '#676767', + 800: '#4D4D4D', + 900: '#333333', + 950: '#222222', +} +``` + +### Programmatic + Install package: ```sh diff --git a/bin/theme-colors.mjs b/bin/theme-colors.mjs new file mode 100644 index 0000000..a05c727 --- /dev/null +++ b/bin/theme-colors.mjs @@ -0,0 +1,3 @@ +import { main, runMain } from "../dist/cli/index.mjs" + +runMain(main) diff --git a/package.json b/package.json index d9799de..d832125 100644 --- a/package.json +++ b/package.json @@ -20,15 +20,21 @@ "require": "./dist/index.cjs" } }, + "bin": { + "theme-colors": "./bin/theme-colors.mjs" + }, "main": "dist/index.cjs", "module": "./dist/index.mjs", "types": "dist/index.d.ts", "files": [ - "dist" + "dist", + "bin" ], "scripts": { "build": "unbuild", + "build:stub": "unbuild --stub", "dev": "vitest dev", + "theme-colors": "node bin/theme-colors.mjs", "lint": "eslint --cache --ext .ts,.js,.mjs,.cjs . && prettier -c src test", "lint:fix": "eslint --cache --ext .ts,.js,.mjs,.cjs . --fix && prettier -c src test -w", "prepack": "pnpm run build", @@ -47,5 +53,8 @@ "typescript": "^5.2.2", "unbuild": "^2.0.0", "vitest": "^0.34.6" + }, + "dependencies": { + "citty": "^0.1.4" } -} \ No newline at end of file +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d20b7a0..d28df13 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,5 +1,14 @@ lockfileVersion: '6.0' +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + +dependencies: + citty: + specifier: ^0.1.4 + version: 0.1.4 + devDependencies: '@types/node': specifier: ^20.8.9 @@ -1450,7 +1459,6 @@ packages: resolution: {integrity: sha512-Q3bK1huLxzQrvj7hImJ7Z1vKYJRPQCDnd0EjXfHMidcjecGOMuLrmuQmtWmFkuKLcMThlGh1yCKG8IEc6VeNXQ==} dependencies: consola: 3.2.3 - dev: true /clean-regexp@1.0.0: resolution: {integrity: sha512-GfisEZEJvzKrmGWkvfhgzcz/BllN1USeqD2V6tg14OAOgaCD2Z/PUEuxnAZ/nPvmaHRG7a8y77p1T/IRQ4D1Hw==} @@ -1497,7 +1505,6 @@ packages: /consola@3.2.3: resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==} engines: {node: ^14.18.0 || >=16.10.0} - dev: true /convert-gitmoji@0.1.3: resolution: {integrity: sha512-t5yxPyI8h8KPvRwrS/sRrfIpT2gJbmBAY0TFokyUBy3PM44RuFRpZwHdACz+GTSPLRLo3s4qsscOMLjHiXBwzw==} @@ -4228,7 +4235,3 @@ packages: resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==} engines: {node: '>=12.20'} dev: true - -settings: - autoInstallPeers: true - excludeLinksFromLockfile: false diff --git a/src/cli/index.ts b/src/cli/index.ts new file mode 100644 index 0000000..199e10f --- /dev/null +++ b/src/cli/index.ts @@ -0,0 +1,33 @@ +import { defineCommand } from "citty"; +import pkg from "../../package.json" assert { type: "json" }; +import { getColors } from ".."; + +const main = defineCommand({ + meta: { + name: pkg.name, + version: pkg.version, + description: pkg.description, + }, + args: { + color: { + type: "positional", + description: "The color to generate variants for. Use hexadecimals.", + required: true, + }, + }, + run: ({ args }) => { + const color = args.color; + + if (!color.startsWith("#") && color.length !== 7) { + throw new Error("Color must be a hexadecimal value."); + } + + const colors = getColors(color); + + console.log(colors); + }, +}); + +export { main }; + +export { runMain } from "citty"; diff --git a/tsconfig.json b/tsconfig.json index e9588d9..3f308e7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,7 +4,10 @@ "module": "ESNext", "moduleResolution": "Node", "esModuleInterop": true, - "strict": true + "strict": true, + "resolveJsonModule": true, }, - "include": ["src"] + "include": [ + "src" + ] }