feat: renaming some commands plus some documentation

This commit is contained in:
D. Moonfire 2024-05-10 00:06:49 -05:00
parent 223fc6c2d0
commit ea95dd4d63
6 changed files with 161 additions and 83 deletions

View file

@ -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:

View file

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

View file

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

View file

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

76
src/cmds/palette/gpl.mjs Normal file
View file

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

View file

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