Priduck Color Theme

A CLI for generating a tri-color theme based on a single hue and an even rotation around the color wheel.

Priduck (name is nonscense) is a color theme originally designed for Fedran 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:

npm install --only-dev @priduck/cli`

Once installed, this will produce a CLI in the node_modules/.bin folder called priduck.

Commands

css mixin

Combines a number of CSS style fragments together and intersperses them in a manner that supports prefers-color-scheme and prefers-contrast in the various methods to support no preferences or a preference in one or more of the options.

For purposes of the read me file, an example of use has to suffice.

priduck css mixin --selector :root --output examples/theme.css --light examples/light.css --light-more-contrast examples/light-more-contrast.css --light-less-contrast examples/light-less-contrast.css --dark examples/dark.css --dark-more-contrast examples/dark-more-contrast.css --dark-less-contrast examples/dark-less-contrast.css

If a fragment isn't included, then it isn't used. So to generate an output file that defaults to dark mode and honors prefers-color-scheme, the command

priduck css mixin --selector :root --output examples/theme.css --light examples/light.css --dark examples/dark.css --output style.css

The fragment files can either be a bare set of CSS properties, or they can use a pseudo-selector of :theme.

:theme {
  color: red;
}

color: red;

There is no parsing of CSS, so this can also be used with Sass or Less or Postcss.

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:

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

// 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 for logging and (relatively) minor output. The CLI will produce no output unless the DEBUG environment variable is set, such as:

export DEBUG="*"