From fb6d27f18aa2f99c2c014523a19cacf0b8042bbc Mon Sep 17 00:00:00 2001 From: "D. Moonfire" Date: Mon, 6 May 2024 21:56:35 -0500 Subject: [PATCH] feat: refactored CLI into sub commands --- package-lock.json | 3 +- package.json | 3 +- src/cli.mjs | 12 +++++++ src/cmds/css.mjs | 10 ++++++ src/cmds/css/variables.mjs | 69 ++++++++++++++++++++++++++++++++++++++ src/generate.mjs | 50 --------------------------- 6 files changed, 95 insertions(+), 52 deletions(-) create mode 100644 src/cli.mjs create mode 100644 src/cmds/css.mjs create mode 100644 src/cmds/css/variables.mjs delete mode 100644 src/generate.mjs diff --git a/package-lock.json b/package-lock.json index 2d68154..43b49fb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.1.0", "license": "MIT", "dependencies": { - "@priduck-color-theme/cli": "^0.0.1" + "@priduck-color-theme/cli": "^0.0.1", + "yargs": "^17.7.2" }, "devDependencies": { "mkdirp": "^3.0.1" diff --git a/package.json b/package.json index 65eae98..6fa9ef3 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "mkdirp": "^3.0.1" }, "dependencies": { - "@priduck-color-theme/cli": "^0.0.1" + "@priduck-color-theme/cli": "^0.0.1", + "yargs": "^17.7.2" } } diff --git a/src/cli.mjs b/src/cli.mjs new file mode 100644 index 0000000..f08b089 --- /dev/null +++ b/src/cli.mjs @@ -0,0 +1,12 @@ +import yargs from "yargs"; +import { hideBin } from "yargs/helpers"; +import * as cssCmd from "./cmds/css.mjs"; + +// Set up the top-level command. +yargs(hideBin(process.argv)) + .scriptName("priduck") + .usage("$0 [args]") + .command(cssCmd) + .demand(2) + .help() + .parse(); diff --git a/src/cmds/css.mjs b/src/cmds/css.mjs new file mode 100644 index 0000000..cb2bc4b --- /dev/null +++ b/src/cmds/css.mjs @@ -0,0 +1,10 @@ +import * as variablesCmd from "./css/variables.mjs"; + +export const command = "css"; +export const desc = "Generate CSS files"; + +export function builder(yargv) { + yargv.command(variablesCmd).demand(2); +} + +export function handler(argv) {} diff --git a/src/cmds/css/variables.mjs b/src/cmds/css/variables.mjs new file mode 100644 index 0000000..8a30496 --- /dev/null +++ b/src/cmds/css/variables.mjs @@ -0,0 +1,69 @@ +import { mkdirp } from "mkdirp"; +import { fileURLToPath } from "url"; +import path from "path"; +import fs from "node:fs/promises"; + +export const command = "variables [path.css]"; +export const desc = "Generate a CSS file that uses variables to generate"; + +export function builder(argv) { + argv + .option("c", { + alias: "hue", + default: 220, + describe: "The hue (0-360) for the base color", + type: "number", + }) + .option("o", { + alias: "output", + demandOption: true, + describe: "The output path for colors.css", + type: "string", + }); +} + +export async function handler(argv) { + // Figure out where we need to write the files. + const file = argv.output; + const dir = path.dirname(file); + + console.log("writing", file); + + await mkdirp(dir); + + // Start with the basic CSS header. + let lines = [":root {"]; + + // We have ten colors, with 0 being the base hue and the others being evenly + // rotated around the color wheel. + for (let color = 0; color < 10; color++) { + // Figure out the rotation. + const rotation = color * 36; // 1/10th of a circle + + // For each hue, we have ten levels of brightness ranging from very dark + // to very light. + for (let brightness = 0; brightness < 10; brightness++) { + // We use a standard code (--color-cXbY) for our codes. + const code = `--color-priduck-c${color}b${brightness}`; + + // Figure out the ramps we are using for brighteness. + const l = brightness * 11; + const s = 50 - brightness * 5; + + // Write out the CSS. + lines.push( + ` ${code}: lch(${l.toFixed(1)} ${s.toFixed( + 1, + )} calc(var(--color-priduck-hue) + ${rotation}));`, + ); + } + } + + // Finish up the lines. + lines.push("}"); + + // Write out the files. + await fs.writeFile(file, Buffer.from(lines.join("\n"))); + + console.log("wrote", file); +} diff --git a/src/generate.mjs b/src/generate.mjs deleted file mode 100644 index 7349d46..0000000 --- a/src/generate.mjs +++ /dev/null @@ -1,50 +0,0 @@ -import { mkdirp } from "mkdirp"; -import { fileURLToPath } from "url"; -import path from "path"; -import fs from "node:fs/promises"; - -// Figure out where we need to write the files. -const __dirname = path.dirname(fileURLToPath(import.meta.url)); -const distPath = __dirname + "/.."; - -console.log("writing", distPath); - -await mkdirp(distPath); - -// Start with the basic CSS header. -let lines = [":root {"]; - -// We have ten colors, with 0 being the base hue and the others being evenly -// rotated around the color wheel. -for (let color = 0; color < 10; color++) { - // Figure out the rotation. - const rotation = color * 36; // 1/10th of a circle - - // For each hue, we have ten levels of brightness ranging from very dark - // to very light. - for (let brightness = 0; brightness < 10; brightness++) { - // We use a standard code (--color-cXbY) for our codes. - const code = `--color-priduck-c${color}b${brightness}`; - - // Figure out the ramps we are using for brighteness. - const l = brightness * 11; - const s = 50 - brightness * 5; - - // Write out the CSS. - lines.push( - ` ${code}: lch(${l.toFixed(1)} ${s.toFixed( - 1, - )} calc(var(--color-priduck-hue) + ${rotation}));`, - ); - } -} - -// Finish up the lines. -lines.push("}"); - -// Write out the files. -const colorsPath = path.join(distPath, "colors.css"); - -await fs.writeFile(colorsPath, Buffer.from(lines.join("\n"))); - -console.log("wrote", colorsPath);