feat: renaming some commands plus some documentation
This commit is contained in:
parent
223fc6c2d0
commit
ea95dd4d63
46
README.md
46
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.
|
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
|
## 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:
|
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:
|
||||||
|
|
12
package.json
12
package.json
|
@ -4,22 +4,24 @@
|
||||||
"description": "A color-theme based on a single hue in the LCH colorspace.",
|
"description": "A color-theme based on a single hue in the LCH colorspace.",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"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": [
|
"keywords": [
|
||||||
"css",
|
"css",
|
||||||
"color"
|
"color"
|
||||||
],
|
],
|
||||||
"author": "D. Moonfire",
|
"author": {
|
||||||
|
"name": "D. Moonfire"
|
||||||
|
},
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"index": "./src/cli.mjs",
|
"bin": {
|
||||||
"devDependencies": {
|
"priduck": "./src/cli.mjs"
|
||||||
"mkdirp": "^3.0.1"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@priduck-color-theme/cli": "^0.0.1",
|
"@priduck-color-theme/cli": "^0.0.1",
|
||||||
"colorjs.io": "^0.5.0",
|
"colorjs.io": "^0.5.0",
|
||||||
"debug": "^4.3.4",
|
"debug": "^4.3.4",
|
||||||
|
"mkdirp": "^3.0.1",
|
||||||
"yargs": "^17.7.2"
|
"yargs": "^17.7.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,19 +9,36 @@ export const command = "variables [path.css]";
|
||||||
export const desc = "Generate a CSS file that uses variables to generate";
|
export const desc = "Generate a CSS file that uses variables to generate";
|
||||||
|
|
||||||
export function builder(argv) {
|
export function builder(argv) {
|
||||||
argv.option("o", {
|
argv
|
||||||
|
.option("o", {
|
||||||
alias: "output",
|
alias: "output",
|
||||||
describe: "The output path for colors.css",
|
describe: "The output path for colors.css",
|
||||||
type: "string",
|
type: "string",
|
||||||
|
})
|
||||||
|
.option("s", {
|
||||||
|
alias: "selector",
|
||||||
|
describe: "The CSS selector to wrap the colors",
|
||||||
|
type: "string",
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function handler(argv) {
|
export async function handler(argv) {
|
||||||
// Start with the basic CSS header.
|
// Start with the basic CSS header.
|
||||||
let lines = [":root {"];
|
let lines = [];
|
||||||
|
|
||||||
log("generating CSS using variables");
|
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
|
// We have ten colors, with 0 being the base hue and the others being evenly
|
||||||
// rotated around the color wheel.
|
// rotated around the color wheel.
|
||||||
for (const color of colors.colorList) {
|
for (const color of colors.colorList) {
|
||||||
|
@ -40,7 +57,7 @@ export async function handler(argv) {
|
||||||
|
|
||||||
// Write out the CSS.
|
// Write out the CSS.
|
||||||
lines.push(
|
lines.push(
|
||||||
` ${code}: lch(${l.toFixed(1)} ${s.toFixed(
|
`${prefix}${code}: lch(${l.toFixed(1)} ${s.toFixed(
|
||||||
1,
|
1,
|
||||||
)} calc(var(--color-priduck-hue) + ${rotation}));`,
|
)} calc(var(--color-priduck-hue) + ${rotation}));`,
|
||||||
);
|
);
|
||||||
|
@ -48,7 +65,7 @@ export async function handler(argv) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Finish up the lines.
|
// Finish up the lines.
|
||||||
lines.push("}");
|
lines.push(footer);
|
||||||
|
|
||||||
// Write out the results to the console or a file.
|
// Write out the results to the console or a file.
|
||||||
await write(argv, lines);
|
await write(argv, lines);
|
||||||
|
|
|
@ -1,73 +1,10 @@
|
||||||
import * as colors from "../colors.mjs";
|
import * as variablesCmd from "./palette/gpl.mjs";
|
||||||
import { write } from "../output.mjs";
|
|
||||||
import debug from "debug";
|
|
||||||
|
|
||||||
/** @type {object} */
|
export const command = "palette";
|
||||||
const log = debug("palette");
|
export const desc = "Generate palette files";
|
||||||
|
|
||||||
export const command = "palette [path.gpl]";
|
export function builder(yargv) {
|
||||||
export const desc = "Generate a GNU Imp/Inkscape palette";
|
yargv.command(variablesCmd).demand(2);
|
||||||
|
|
||||||
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) {
|
export 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);
|
|
||||||
}
|
|
||||||
|
|
76
src/cmds/palette/gpl.mjs
Normal file
76
src/cmds/palette/gpl.mjs
Normal 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);
|
||||||
|
}
|
|
@ -15,7 +15,7 @@ const log = debug("output");
|
||||||
*/
|
*/
|
||||||
export async function write(argv, input) {
|
export async function write(argv, input) {
|
||||||
// If we are writing to the console, we can just dump it.
|
// 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 === "-") {
|
if (!argv.output || argv.output === "-") {
|
||||||
console.log(text);
|
console.log(text);
|
||||||
|
|
Loading…
Reference in a new issue