From ea95dd4d63e9b6dc8b35cd2db25568c51762df77 Mon Sep 17 00:00:00 2001 From: "D. Moonfire" Date: Fri, 10 May 2024 00:06:49 -0500 Subject: [PATCH] feat: renaming some commands plus some documentation --- README.md | 46 +++++++++++++++++++++++ package.json | 12 +++--- src/cmds/css/variables.mjs | 33 +++++++++++++---- src/cmds/palette.mjs | 75 +++---------------------------------- src/cmds/palette/gpl.mjs | 76 ++++++++++++++++++++++++++++++++++++++ src/output.mjs | 2 +- 6 files changed, 161 insertions(+), 83 deletions(-) create mode 100644 src/cmds/palette/gpl.mjs diff --git a/README.md b/README.md index 9fe1cad..433f164 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,52 @@ _A CLI for generating a tri-color theme based on a single hue and an even rotati Priduck (name is nonscense) is a color theme originally designed for [Fedran](https://fedran.com) where the base color is a hue (in degrees, 0-360) with with nine colors based on an even distribution around the wheel with nine-levels of brightness ranging from a near-black to a near-white. +## Installation + +This tool is currently not available on npmjs. To install it, modify your project's `.npmrc` file to include: + +``` +@priduck-color-theme:registry=https://src.mfgames.com/api/packages/priduck-color-theme/npm/ +``` + +Once that is done, the CLI can be installed as a development package with `npm`: + +```shell +npm install --only-dev @priduck/cli` +``` + +Once installed, this will produce a CLI in the `node_modules/.bin` folder called `priduck`. + +## Commands + +### "css variables [--hue HUE] [--output PATH] [--selector SELECTOR]" + +Generate a CSS file using variables. The thirty colors all follow the pattern of `--color-priduck-cXbY` where `X` is a number between 0 and 9 (inclusive) and `Y` is the brightness (also in the range of 0 to 9, inclusive). + +All of the colors are calculated based on the variable `--color-priduck-hue`, which is not included by default. If `--hue` is provided with a number between 0 and 360, then `--color-priduck-hue` will be set to the given color. + +If `--selector` is included, the colors will be wrapped in a selector and slightly indented: + +```css +// priduck css variables +--color-priduck-c0b0: lch(5.0 50.0 calc(var(--color-priduck-hue) + 0)); +--color-priduck-c0b1: lch(15.0 45.0 calc(var(--color-priduck-hue) + 0)); +``` + +```css +// priduck css variables --selector ":root" +:root { + --color-priduck-c0b0: lch(5 50 calc(var(--color-priduck-hue) + 0)); + --color-priduck-c0b1: lch(15 45 calc(var(--color-priduck-hue) + 0)); +} +``` + +### "palette gpl --hue HUE [--output PATH] [--secondary 5] [--tertiary 8]" + +Generate a GNU Imp or Inkscape file. `--hue` is required in this situation. This assumes up to two additional colors (secondary, and tertiary). + +Both of these are numbers in the range of 0-9 with 0 being an identical color to the base hue (which is always 0). + ## Debugging The CLI uses [debug](https://github.com/debug-js/debug) for logging and (relatively) minor output. The CLI will produce no output unless the `DEBUG` environment variable is set, such as: diff --git a/package.json b/package.json index 484b4ac..c82c83b 100644 --- a/package.json +++ b/package.json @@ -4,22 +4,24 @@ "description": "A color-theme based on a single hue in the LCH colorspace.", "repository": { "type": "git", - "url": "https://src.mfgames.com/priduck-color-theme/priduck-color-theme-base-js.git" + "url": "https://src.mfgames.com/priduck-color-theme/priduck-color-theme-cli-js.git" }, "keywords": [ "css", "color" ], - "author": "D. Moonfire", + "author": { + "name": "D. Moonfire" + }, "license": "MIT", - "index": "./src/cli.mjs", - "devDependencies": { - "mkdirp": "^3.0.1" + "bin": { + "priduck": "./src/cli.mjs" }, "dependencies": { "@priduck-color-theme/cli": "^0.0.1", "colorjs.io": "^0.5.0", "debug": "^4.3.4", + "mkdirp": "^3.0.1", "yargs": "^17.7.2" } } diff --git a/src/cmds/css/variables.mjs b/src/cmds/css/variables.mjs index af021c9..6b7f55e 100644 --- a/src/cmds/css/variables.mjs +++ b/src/cmds/css/variables.mjs @@ -9,19 +9,36 @@ export const command = "variables [path.css]"; export const desc = "Generate a CSS file that uses variables to generate"; export function builder(argv) { - argv.option("o", { - alias: "output", - describe: "The output path for colors.css", - type: "string", - }); + argv + .option("o", { + alias: "output", + describe: "The output path for colors.css", + type: "string", + }) + .option("s", { + alias: "selector", + describe: "The CSS selector to wrap the colors", + type: "string", + }); } export async function handler(argv) { // Start with the basic CSS header. - let lines = [":root {"]; + let lines = []; log("generating CSS using variables"); + // Include the selector, if we have one. + let prefix = ""; + let footer = ""; + + if (argv.selector) { + log("using CSS selector:", argv.selector); + lines.push(`${argv.selector} {`); + prefix = " "; + footer = "}"; + } + // We have ten colors, with 0 being the base hue and the others being evenly // rotated around the color wheel. for (const color of colors.colorList) { @@ -40,7 +57,7 @@ export async function handler(argv) { // Write out the CSS. lines.push( - ` ${code}: lch(${l.toFixed(1)} ${s.toFixed( + `${prefix}${code}: lch(${l.toFixed(1)} ${s.toFixed( 1, )} calc(var(--color-priduck-hue) + ${rotation}));`, ); @@ -48,7 +65,7 @@ export async function handler(argv) { } // Finish up the lines. - lines.push("}"); + lines.push(footer); // Write out the results to the console or a file. await write(argv, lines); diff --git a/src/cmds/palette.mjs b/src/cmds/palette.mjs index 49d4ffb..31e83fd 100644 --- a/src/cmds/palette.mjs +++ b/src/cmds/palette.mjs @@ -1,73 +1,10 @@ -import * as colors from "../colors.mjs"; -import { write } from "../output.mjs"; -import debug from "debug"; +import * as variablesCmd from "./palette/gpl.mjs"; -/** @type {object} */ -const log = debug("palette"); +export const command = "palette"; +export const desc = "Generate palette files"; -export const command = "palette [path.gpl]"; -export const desc = "Generate a GNU Imp/Inkscape palette"; - -export function builder(argv) { - argv - .option("c", { - alias: "hue", - demandOption: true, - describe: "The hue (0-360) for the base color", - type: "number", - }) - .option("s", { - alias: "secondary", - default: 5, - choices: colors.colorList, - describe: "The color code (0-9) based on the hue", - type: "number", - }) - .option("t", { - alias: "tertiary", - default: 8, - choices: colors.colorList, - describe: "The color code (0-9) based on the hue", - type: "number", - }) - .option("n", { - alias: "name", - default: "Priduck", - describe: "The name of the palette", - type: "string", - }) - .option("o", { - alias: "output", - describe: "The output path for colors.css", - type: "string", - }); +export function builder(yargv) { + yargv.command(variablesCmd).demand(2); } -export async function handler(argv) { - // Start with the header. - let lines = ["GIMP Palette", `Name: ${argv.name}`, "Columns: 30", ""]; - - log("generating GPL palette named", argv.name); - log("using base hue", argv.hue, "as color 0"); - log("using secondary", argv.secondary, "tertiary", argv.tertiary); - - // Loop through the three primary colors, then the brightness for each one. - const colorList = [0, argv.secondary, argv.tertiary]; - - for (const colorIndex in colorList) { - const color = colorList[colorIndex]; - const colorName = - colorIndex == 0 ? "primary" : colorIndex == 1 ? "secondary" : "tertiary"; - - for (const brightness of colors.brightnessList) { - const lch = colors.getLchCss(argv.hue, color, brightness); - const rgb = colors.getRgbArray(argv.hue, color, brightness); - const line = `${rgb[0]} ${rgb[1]} ${rgb[2]} ${colorName}-${brightness} # ${lch}`; - - lines.push(line); - } - } - - // Write out the results to the console or a file. - await write(argv, lines); -} +export function handler(argv) {} diff --git a/src/cmds/palette/gpl.mjs b/src/cmds/palette/gpl.mjs new file mode 100644 index 0000000..291acba --- /dev/null +++ b/src/cmds/palette/gpl.mjs @@ -0,0 +1,76 @@ +import * as colors from "../../colors.mjs"; +import { write } from "../../output.mjs"; +import debug from "debug"; + +/** @type {object} */ +const log = debug("palette").extend("gpl"); + +export const command = "gpl"; +export const desc = "Generate a GNU Imp/Inkscape palette"; + +export function builder(argv) { + argv + .option("c", { + alias: "hue", + demandOption: true, + describe: "The hue (0-360) for the base color", + type: "number", + }) + .option("s", { + alias: "secondary", + default: 5, + choices: colors.colorList, + describe: "The color code (0-9) based on the hue", + type: "number", + }) + .option("t", { + alias: "tertiary", + default: 8, + choices: colors.colorList, + describe: "The color code (0-9) based on the hue", + type: "number", + }) + .option("n", { + alias: "name", + default: "Priduck", + describe: "The name of the palette", + type: "string", + }) + .option("o", { + alias: "output", + describe: "The output path for colors.css", + type: "string", + }); +} + +export async function handler(argv) { + // Start with the header. + let lines = ["GIMP Palette", `Name: ${argv.name}`, "Columns: 30", ""]; + + log("generating GPL palette named", argv.name); + log("using base hue", argv.hue, "as color 0"); + log("using secondary", argv.secondary, "tertiary", argv.tertiary); + + // Loop through the three primary colors, then the brightness for each one. + const colorList = [0, argv.secondary, argv.tertiary]; + + for (const colorIndex in colorList) { + const color = colorList[colorIndex]; + const colorName = + colorIndex == 0 ? "primary" : colorIndex == 1 ? "secondary" : "tertiary"; + + for (const brightness of colors.brightnessList) { + const lch = colors.getLchCss(argv.hue, color, brightness); + const rgb = colors.getRgbArray(argv.hue, color, brightness); + const r = rgb[0].toString().padStart(3, " "); + const g = rgb[1].toString().padStart(3, " "); + const b = rgb[2].toString().padStart(3, " "); + const line = `${r} ${g} ${b} ${colorName}-${brightness} # ${lch}`; + + lines.push(line); + } + } + + // Write out the results to the console or a file. + await write(argv, lines); +} diff --git a/src/output.mjs b/src/output.mjs index 446e4c6..38318c8 100644 --- a/src/output.mjs +++ b/src/output.mjs @@ -15,7 +15,7 @@ const log = debug("output"); */ export async function write(argv, input) { // If we are writing to the console, we can just dump it. - const text = Array.isArray(input) ? input.join("\n") : input; + const text = (Array.isArray(input) ? input.join("\n") : input).trim(); if (!argv.output || argv.output === "-") { console.log(text);