This page permanently redirects to gemini://mfgames.com/priduck-color-theme-cli-js/.

Priduck Color Theme

=> Up a Level

News

=> 2024-05-09 Refactoring Again | 2024-12-20 Deprecating Priduck | Blog Archives

Introduction

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

This project is no longer being maintained.

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

=> 1: https://fedran.com

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

=> 2: https://github.com/debug-js/debug

export DEBUG="*"

Metadata

Categories:

=> Priduck Color Theme

Footer

Below are various useful links within this site and to related sites (not all have been converted over to Gemini).

=> Categories

=> D. Moonfire | Fedran | The Moonfires

=> HTML | Atom Feed