feat: renaming some commands plus some documentation

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:

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"
   }
 }

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);

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) {}

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);
+}

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);