A LCH-based theme centered around a single hue that produces nine colors eventually spaced around the color wheel at nine levels of brightness.
Find a file
2024-05-10 01:37:29 -05:00
examples feat: implemented the "css mixin" command 2024-05-10 01:37:29 -05:00
src feat: implemented the "css mixin" command 2024-05-10 01:37:29 -05:00
.editorconfig chore: initial commit 2024-02-18 22:06:03 -06:00
.envrc feat: generate the theme using postcss 2024-02-24 12:01:13 -06:00
.gitignore build: updating setup flake 2024-03-22 01:08:52 -05:00
.npmignore build: ignore *.tgz in node packages 2024-02-24 15:09:42 -06:00
.prettierignore build: updating setup flake 2024-03-22 01:08:52 -05:00
CODE_OF_CONDUCT.md chore: initial commit 2024-02-18 22:06:03 -06:00
DCO.md build: updating setup flake 2024-03-22 01:08:52 -05:00
flake.lock build: updating setup flake 2024-03-22 01:08:52 -05:00
flake.nix feat: generate the theme using postcss 2024-02-24 12:01:13 -06:00
Justfile feat: implemented the "css mixin" command 2024-05-10 01:37:29 -05:00
package-lock.json feat: added some better logging 2024-05-09 23:42:38 -05:00
package.json feat: implemented the "css mixin" command 2024-05-10 01:37:29 -05:00
postcss.config.js feat: generate the theme using postcss 2024-02-24 12:01:13 -06:00
README.md feat: implemented the "css mixin" command 2024-05-10 01:37:29 -05:00

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="*"