Compare commits
8 commits
8e1c20bf04
...
0b3414bf86
| Author | SHA1 | Date | |
|---|---|---|---|
| 0b3414bf86 | |||
| 1db857bc8e | |||
| ea95dd4d63 | |||
| 223fc6c2d0 | |||
| 41c9e40cef | |||
| 0a078698f7 | |||
| fb6d27f18a | |||
| c4b5c02417 |
16 changed files with 1363 additions and 991 deletions
2
Justfile
2
Justfile
|
|
@ -12,7 +12,7 @@ build: colors examples
|
|||
|
||||
# Generate dist/colors.css
|
||||
colors: format
|
||||
node src/generate.mjs
|
||||
node src/cli.mjs css variables --output colors.css --selector :root
|
||||
prettier colors.css --write
|
||||
|
||||
# Generate examples/theme.css
|
||||
|
|
|
|||
59
README.md
Normal file
59
README.md
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
# 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](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:
|
||||
|
||||
```shell
|
||||
export DEBUG="*"
|
||||
```
|
||||
686
examples/example.css
Normal file
686
examples/example.css
Normal file
|
|
@ -0,0 +1,686 @@
|
|||
:root {
|
||||
--color-priduck-hue: 180;
|
||||
}
|
||||
|
||||
/* https://www.w3schools.com/howto/howto_js_rangeslider.asp */
|
||||
.slidecontainer {
|
||||
width: 100%; /* Width of the outside container */
|
||||
}
|
||||
|
||||
/* The slider itself */
|
||||
.slider {
|
||||
-webkit-appearance: none; /* Override default CSS styles */
|
||||
appearance: none;
|
||||
width: 100%; /* Full-width */
|
||||
height: 25px; /* Specified height */
|
||||
background: #d3d3d3; /* Grey background */
|
||||
outline: none; /* Remove outline */
|
||||
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
|
||||
-webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
/* Mouse-over effects */
|
||||
.slider:hover {
|
||||
opacity: 1; /* Fully shown on mouse-over */
|
||||
}
|
||||
|
||||
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; /* Override default look */
|
||||
appearance: none;
|
||||
width: 25px; /* Set a specific slider handle width */
|
||||
height: 25px; /* Slider handle height */
|
||||
background: #04aa6d; /* Green background */
|
||||
cursor: pointer; /* Cursor on hover */
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
width: 25px; /* Set a specific slider handle width */
|
||||
height: 25px; /* Slider handle height */
|
||||
background: #04aa6d; /* Green background */
|
||||
cursor: pointer; /* Cursor on hover */
|
||||
}
|
||||
|
||||
#hue {
|
||||
display: inline-block;
|
||||
min-width: 5em;
|
||||
}
|
||||
|
||||
#hue-box {
|
||||
display: inline-block;
|
||||
min-width: 5em;
|
||||
min-height: 1em;
|
||||
border: 1px solid black;
|
||||
background-color: lch(50% 100 var(--color-priduck-hue));
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.color-lch,
|
||||
.color-rgb {
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
.fg-dark {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fg-light {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.fg-c0b0 {
|
||||
color: var(--color-priduck-c0b0);
|
||||
}
|
||||
.fg-c1b0 {
|
||||
color: var(--color-priduck-c1b0);
|
||||
}
|
||||
.fg-c2b0 {
|
||||
color: var(--color-priduck-c2b0);
|
||||
}
|
||||
.fg-c3b0 {
|
||||
color: var(--color-priduck-c3b0);
|
||||
}
|
||||
.fg-c4b0 {
|
||||
color: var(--color-priduck-c4b0);
|
||||
}
|
||||
.fg-c5b0 {
|
||||
color: var(--color-priduck-c5b0);
|
||||
}
|
||||
.fg-c6b0 {
|
||||
color: var(--color-priduck-c6b0);
|
||||
}
|
||||
.fg-c7b0 {
|
||||
color: var(--color-priduck-c7b0);
|
||||
}
|
||||
.fg-c8b0 {
|
||||
color: var(--color-priduck-c8b0);
|
||||
}
|
||||
.fg-c9b0 {
|
||||
color: var(--color-priduck-c9b0);
|
||||
}
|
||||
.fg-c0b1 {
|
||||
color: var(--color-priduck-c0b1);
|
||||
}
|
||||
.fg-c1b1 {
|
||||
color: var(--color-priduck-c1b1);
|
||||
}
|
||||
.fg-c2b1 {
|
||||
color: var(--color-priduck-c2b1);
|
||||
}
|
||||
.fg-c3b1 {
|
||||
color: var(--color-priduck-c3b1);
|
||||
}
|
||||
.fg-c4b1 {
|
||||
color: var(--color-priduck-c4b1);
|
||||
}
|
||||
.fg-c5b1 {
|
||||
color: var(--color-priduck-c5b1);
|
||||
}
|
||||
.fg-c6b1 {
|
||||
color: var(--color-priduck-c6b1);
|
||||
}
|
||||
.fg-c7b1 {
|
||||
color: var(--color-priduck-c7b1);
|
||||
}
|
||||
.fg-c8b1 {
|
||||
color: var(--color-priduck-c8b1);
|
||||
}
|
||||
.fg-c9b1 {
|
||||
color: var(--color-priduck-c9b1);
|
||||
}
|
||||
.fg-c0b2 {
|
||||
color: var(--color-priduck-c0b2);
|
||||
}
|
||||
.fg-c1b2 {
|
||||
color: var(--color-priduck-c1b2);
|
||||
}
|
||||
.fg-c2b2 {
|
||||
color: var(--color-priduck-c2b2);
|
||||
}
|
||||
.fg-c3b2 {
|
||||
color: var(--color-priduck-c3b2);
|
||||
}
|
||||
.fg-c4b2 {
|
||||
color: var(--color-priduck-c4b2);
|
||||
}
|
||||
.fg-c5b2 {
|
||||
color: var(--color-priduck-c5b2);
|
||||
}
|
||||
.fg-c6b2 {
|
||||
color: var(--color-priduck-c6b2);
|
||||
}
|
||||
.fg-c7b2 {
|
||||
color: var(--color-priduck-c7b2);
|
||||
}
|
||||
.fg-c8b2 {
|
||||
color: var(--color-priduck-c8b2);
|
||||
}
|
||||
.fg-c9b2 {
|
||||
color: var(--color-priduck-c9b2);
|
||||
}
|
||||
.fg-c0b3 {
|
||||
color: var(--color-priduck-c0b3);
|
||||
}
|
||||
.fg-c1b3 {
|
||||
color: var(--color-priduck-c1b3);
|
||||
}
|
||||
.fg-c2b3 {
|
||||
color: var(--color-priduck-c2b3);
|
||||
}
|
||||
.fg-c3b3 {
|
||||
color: var(--color-priduck-c3b3);
|
||||
}
|
||||
.fg-c4b3 {
|
||||
color: var(--color-priduck-c4b3);
|
||||
}
|
||||
.fg-c5b3 {
|
||||
color: var(--color-priduck-c5b3);
|
||||
}
|
||||
.fg-c6b3 {
|
||||
color: var(--color-priduck-c6b3);
|
||||
}
|
||||
.fg-c7b3 {
|
||||
color: var(--color-priduck-c7b3);
|
||||
}
|
||||
.fg-c8b3 {
|
||||
color: var(--color-priduck-c8b3);
|
||||
}
|
||||
.fg-c9b3 {
|
||||
color: var(--color-priduck-c9b3);
|
||||
}
|
||||
.fg-c0b4 {
|
||||
color: var(--color-priduck-c0b4);
|
||||
}
|
||||
.fg-c1b4 {
|
||||
color: var(--color-priduck-c1b4);
|
||||
}
|
||||
.fg-c2b4 {
|
||||
color: var(--color-priduck-c2b4);
|
||||
}
|
||||
.fg-c3b4 {
|
||||
color: var(--color-priduck-c3b4);
|
||||
}
|
||||
.fg-c4b4 {
|
||||
color: var(--color-priduck-c4b4);
|
||||
}
|
||||
.fg-c5b4 {
|
||||
color: var(--color-priduck-c5b4);
|
||||
}
|
||||
.fg-c6b4 {
|
||||
color: var(--color-priduck-c6b4);
|
||||
}
|
||||
.fg-c7b4 {
|
||||
color: var(--color-priduck-c7b4);
|
||||
}
|
||||
.fg-c8b4 {
|
||||
color: var(--color-priduck-c8b4);
|
||||
}
|
||||
.fg-c9b4 {
|
||||
color: var(--color-priduck-c9b4);
|
||||
}
|
||||
.fg-c0b5 {
|
||||
color: var(--color-priduck-c0b5);
|
||||
}
|
||||
.fg-c1b5 {
|
||||
color: var(--color-priduck-c1b5);
|
||||
}
|
||||
.fg-c2b5 {
|
||||
color: var(--color-priduck-c2b5);
|
||||
}
|
||||
.fg-c3b5 {
|
||||
color: var(--color-priduck-c3b5);
|
||||
}
|
||||
.fg-c4b5 {
|
||||
color: var(--color-priduck-c4b5);
|
||||
}
|
||||
.fg-c5b5 {
|
||||
color: var(--color-priduck-c5b5);
|
||||
}
|
||||
.fg-c6b5 {
|
||||
color: var(--color-priduck-c6b5);
|
||||
}
|
||||
.fg-c7b5 {
|
||||
color: var(--color-priduck-c7b5);
|
||||
}
|
||||
.fg-c8b5 {
|
||||
color: var(--color-priduck-c8b5);
|
||||
}
|
||||
.fg-c9b5 {
|
||||
color: var(--color-priduck-c9b5);
|
||||
}
|
||||
.fg-c0b6 {
|
||||
color: var(--color-priduck-c0b6);
|
||||
}
|
||||
.fg-c1b6 {
|
||||
color: var(--color-priduck-c1b6);
|
||||
}
|
||||
.fg-c2b6 {
|
||||
color: var(--color-priduck-c2b6);
|
||||
}
|
||||
.fg-c3b6 {
|
||||
color: var(--color-priduck-c3b6);
|
||||
}
|
||||
.fg-c4b6 {
|
||||
color: var(--color-priduck-c4b6);
|
||||
}
|
||||
.fg-c5b6 {
|
||||
color: var(--color-priduck-c5b6);
|
||||
}
|
||||
.fg-c6b6 {
|
||||
color: var(--color-priduck-c6b6);
|
||||
}
|
||||
.fg-c7b6 {
|
||||
color: var(--color-priduck-c7b6);
|
||||
}
|
||||
.fg-c8b6 {
|
||||
color: var(--color-priduck-c8b6);
|
||||
}
|
||||
.fg-c9b6 {
|
||||
color: var(--color-priduck-c9b6);
|
||||
}
|
||||
.fg-c0b7 {
|
||||
color: var(--color-priduck-c0b7);
|
||||
}
|
||||
.fg-c1b7 {
|
||||
color: var(--color-priduck-c1b7);
|
||||
}
|
||||
.fg-c2b7 {
|
||||
color: var(--color-priduck-c2b7);
|
||||
}
|
||||
.fg-c3b7 {
|
||||
color: var(--color-priduck-c3b7);
|
||||
}
|
||||
.fg-c4b7 {
|
||||
color: var(--color-priduck-c4b7);
|
||||
}
|
||||
.fg-c5b7 {
|
||||
color: var(--color-priduck-c5b7);
|
||||
}
|
||||
.fg-c6b7 {
|
||||
color: var(--color-priduck-c6b7);
|
||||
}
|
||||
.fg-c7b7 {
|
||||
color: var(--color-priduck-c7b7);
|
||||
}
|
||||
.fg-c8b7 {
|
||||
color: var(--color-priduck-c8b7);
|
||||
}
|
||||
.fg-c9b7 {
|
||||
color: var(--color-priduck-c9b7);
|
||||
}
|
||||
.fg-c0b8 {
|
||||
color: var(--color-priduck-c0b8);
|
||||
}
|
||||
.fg-c1b8 {
|
||||
color: var(--color-priduck-c1b8);
|
||||
}
|
||||
.fg-c2b8 {
|
||||
color: var(--color-priduck-c2b8);
|
||||
}
|
||||
.fg-c3b8 {
|
||||
color: var(--color-priduck-c3b8);
|
||||
}
|
||||
.fg-c4b8 {
|
||||
color: var(--color-priduck-c4b8);
|
||||
}
|
||||
.fg-c5b8 {
|
||||
color: var(--color-priduck-c5b8);
|
||||
}
|
||||
.fg-c6b8 {
|
||||
color: var(--color-priduck-c6b8);
|
||||
}
|
||||
.fg-c7b8 {
|
||||
color: var(--color-priduck-c7b8);
|
||||
}
|
||||
.fg-c8b8 {
|
||||
color: var(--color-priduck-c8b8);
|
||||
}
|
||||
.fg-c9b8 {
|
||||
color: var(--color-priduck-c9b8);
|
||||
}
|
||||
.fg-c0b9 {
|
||||
color: var(--color-priduck-c0b9);
|
||||
}
|
||||
.fg-c1b9 {
|
||||
color: var(--color-priduck-c1b9);
|
||||
}
|
||||
.fg-c2b9 {
|
||||
color: var(--color-priduck-c2b9);
|
||||
}
|
||||
.fg-c3b9 {
|
||||
color: var(--color-priduck-c3b9);
|
||||
}
|
||||
.fg-c4b9 {
|
||||
color: var(--color-priduck-c4b9);
|
||||
}
|
||||
.fg-c5b9 {
|
||||
color: var(--color-priduck-c5b9);
|
||||
}
|
||||
.fg-c6b9 {
|
||||
color: var(--color-priduck-c6b9);
|
||||
}
|
||||
.fg-c7b9 {
|
||||
color: var(--color-priduck-c7b9);
|
||||
}
|
||||
.fg-c8b9 {
|
||||
color: var(--color-priduck-c8b9);
|
||||
}
|
||||
.fg-c9b9 {
|
||||
color: var(--color-priduck-c9b9);
|
||||
}
|
||||
|
||||
.bg-c0b0 {
|
||||
background-color: var(--color-priduck-c0b0);
|
||||
}
|
||||
.bg-c1b0 {
|
||||
background-color: var(--color-priduck-c1b0);
|
||||
}
|
||||
.bg-c2b0 {
|
||||
background-color: var(--color-priduck-c2b0);
|
||||
}
|
||||
.bg-c3b0 {
|
||||
background-color: var(--color-priduck-c3b0);
|
||||
}
|
||||
.bg-c4b0 {
|
||||
background-color: var(--color-priduck-c4b0);
|
||||
}
|
||||
.bg-c5b0 {
|
||||
background-color: var(--color-priduck-c5b0);
|
||||
}
|
||||
.bg-c6b0 {
|
||||
background-color: var(--color-priduck-c6b0);
|
||||
}
|
||||
.bg-c7b0 {
|
||||
background-color: var(--color-priduck-c7b0);
|
||||
}
|
||||
.bg-c8b0 {
|
||||
background-color: var(--color-priduck-c8b0);
|
||||
}
|
||||
.bg-c9b0 {
|
||||
background-color: var(--color-priduck-c9b0);
|
||||
}
|
||||
.bg-c0b1 {
|
||||
background-color: var(--color-priduck-c0b1);
|
||||
}
|
||||
.bg-c1b1 {
|
||||
background-color: var(--color-priduck-c1b1);
|
||||
}
|
||||
.bg-c2b1 {
|
||||
background-color: var(--color-priduck-c2b1);
|
||||
}
|
||||
.bg-c3b1 {
|
||||
background-color: var(--color-priduck-c3b1);
|
||||
}
|
||||
.bg-c4b1 {
|
||||
background-color: var(--color-priduck-c4b1);
|
||||
}
|
||||
.bg-c5b1 {
|
||||
background-color: var(--color-priduck-c5b1);
|
||||
}
|
||||
.bg-c6b1 {
|
||||
background-color: var(--color-priduck-c6b1);
|
||||
}
|
||||
.bg-c7b1 {
|
||||
background-color: var(--color-priduck-c7b1);
|
||||
}
|
||||
.bg-c8b1 {
|
||||
background-color: var(--color-priduck-c8b1);
|
||||
}
|
||||
.bg-c9b1 {
|
||||
background-color: var(--color-priduck-c9b1);
|
||||
}
|
||||
.bg-c0b2 {
|
||||
background-color: var(--color-priduck-c0b2);
|
||||
}
|
||||
.bg-c1b2 {
|
||||
background-color: var(--color-priduck-c1b2);
|
||||
}
|
||||
.bg-c2b2 {
|
||||
background-color: var(--color-priduck-c2b2);
|
||||
}
|
||||
.bg-c3b2 {
|
||||
background-color: var(--color-priduck-c3b2);
|
||||
}
|
||||
.bg-c4b2 {
|
||||
background-color: var(--color-priduck-c4b2);
|
||||
}
|
||||
.bg-c5b2 {
|
||||
background-color: var(--color-priduck-c5b2);
|
||||
}
|
||||
.bg-c6b2 {
|
||||
background-color: var(--color-priduck-c6b2);
|
||||
}
|
||||
.bg-c7b2 {
|
||||
background-color: var(--color-priduck-c7b2);
|
||||
}
|
||||
.bg-c8b2 {
|
||||
background-color: var(--color-priduck-c8b2);
|
||||
}
|
||||
.bg-c9b2 {
|
||||
background-color: var(--color-priduck-c9b2);
|
||||
}
|
||||
.bg-c0b3 {
|
||||
background-color: var(--color-priduck-c0b3);
|
||||
}
|
||||
.bg-c1b3 {
|
||||
background-color: var(--color-priduck-c1b3);
|
||||
}
|
||||
.bg-c2b3 {
|
||||
background-color: var(--color-priduck-c2b3);
|
||||
}
|
||||
.bg-c3b3 {
|
||||
background-color: var(--color-priduck-c3b3);
|
||||
}
|
||||
.bg-c4b3 {
|
||||
background-color: var(--color-priduck-c4b3);
|
||||
}
|
||||
.bg-c5b3 {
|
||||
background-color: var(--color-priduck-c5b3);
|
||||
}
|
||||
.bg-c6b3 {
|
||||
background-color: var(--color-priduck-c6b3);
|
||||
}
|
||||
.bg-c7b3 {
|
||||
background-color: var(--color-priduck-c7b3);
|
||||
}
|
||||
.bg-c8b3 {
|
||||
background-color: var(--color-priduck-c8b3);
|
||||
}
|
||||
.bg-c9b3 {
|
||||
background-color: var(--color-priduck-c9b3);
|
||||
}
|
||||
.bg-c0b4 {
|
||||
background-color: var(--color-priduck-c0b4);
|
||||
}
|
||||
.bg-c1b4 {
|
||||
background-color: var(--color-priduck-c1b4);
|
||||
}
|
||||
.bg-c2b4 {
|
||||
background-color: var(--color-priduck-c2b4);
|
||||
}
|
||||
.bg-c3b4 {
|
||||
background-color: var(--color-priduck-c3b4);
|
||||
}
|
||||
.bg-c4b4 {
|
||||
background-color: var(--color-priduck-c4b4);
|
||||
}
|
||||
.bg-c5b4 {
|
||||
background-color: var(--color-priduck-c5b4);
|
||||
}
|
||||
.bg-c6b4 {
|
||||
background-color: var(--color-priduck-c6b4);
|
||||
}
|
||||
.bg-c7b4 {
|
||||
background-color: var(--color-priduck-c7b4);
|
||||
}
|
||||
.bg-c8b4 {
|
||||
background-color: var(--color-priduck-c8b4);
|
||||
}
|
||||
.bg-c9b4 {
|
||||
background-color: var(--color-priduck-c9b4);
|
||||
}
|
||||
.bg-c0b5 {
|
||||
background-color: var(--color-priduck-c0b5);
|
||||
}
|
||||
.bg-c1b5 {
|
||||
background-color: var(--color-priduck-c1b5);
|
||||
}
|
||||
.bg-c2b5 {
|
||||
background-color: var(--color-priduck-c2b5);
|
||||
}
|
||||
.bg-c3b5 {
|
||||
background-color: var(--color-priduck-c3b5);
|
||||
}
|
||||
.bg-c4b5 {
|
||||
background-color: var(--color-priduck-c4b5);
|
||||
}
|
||||
.bg-c5b5 {
|
||||
background-color: var(--color-priduck-c5b5);
|
||||
}
|
||||
.bg-c6b5 {
|
||||
background-color: var(--color-priduck-c6b5);
|
||||
}
|
||||
.bg-c7b5 {
|
||||
background-color: var(--color-priduck-c7b5);
|
||||
}
|
||||
.bg-c8b5 {
|
||||
background-color: var(--color-priduck-c8b5);
|
||||
}
|
||||
.bg-c9b5 {
|
||||
background-color: var(--color-priduck-c9b5);
|
||||
}
|
||||
.bg-c0b6 {
|
||||
background-color: var(--color-priduck-c0b6);
|
||||
}
|
||||
.bg-c1b6 {
|
||||
background-color: var(--color-priduck-c1b6);
|
||||
}
|
||||
.bg-c2b6 {
|
||||
background-color: var(--color-priduck-c2b6);
|
||||
}
|
||||
.bg-c3b6 {
|
||||
background-color: var(--color-priduck-c3b6);
|
||||
}
|
||||
.bg-c4b6 {
|
||||
background-color: var(--color-priduck-c4b6);
|
||||
}
|
||||
.bg-c5b6 {
|
||||
background-color: var(--color-priduck-c5b6);
|
||||
}
|
||||
.bg-c6b6 {
|
||||
background-color: var(--color-priduck-c6b6);
|
||||
}
|
||||
.bg-c7b6 {
|
||||
background-color: var(--color-priduck-c7b6);
|
||||
}
|
||||
.bg-c8b6 {
|
||||
background-color: var(--color-priduck-c8b6);
|
||||
}
|
||||
.bg-c9b6 {
|
||||
background-color: var(--color-priduck-c9b6);
|
||||
}
|
||||
.bg-c0b7 {
|
||||
background-color: var(--color-priduck-c0b7);
|
||||
}
|
||||
.bg-c1b7 {
|
||||
background-color: var(--color-priduck-c1b7);
|
||||
}
|
||||
.bg-c2b7 {
|
||||
background-color: var(--color-priduck-c2b7);
|
||||
}
|
||||
.bg-c3b7 {
|
||||
background-color: var(--color-priduck-c3b7);
|
||||
}
|
||||
.bg-c4b7 {
|
||||
background-color: var(--color-priduck-c4b7);
|
||||
}
|
||||
.bg-c5b7 {
|
||||
background-color: var(--color-priduck-c5b7);
|
||||
}
|
||||
.bg-c6b7 {
|
||||
background-color: var(--color-priduck-c6b7);
|
||||
}
|
||||
.bg-c7b7 {
|
||||
background-color: var(--color-priduck-c7b7);
|
||||
}
|
||||
.bg-c8b7 {
|
||||
background-color: var(--color-priduck-c8b7);
|
||||
}
|
||||
.bg-c9b7 {
|
||||
background-color: var(--color-priduck-c9b7);
|
||||
}
|
||||
.bg-c0b8 {
|
||||
background-color: var(--color-priduck-c0b8);
|
||||
}
|
||||
.bg-c1b8 {
|
||||
background-color: var(--color-priduck-c1b8);
|
||||
}
|
||||
.bg-c2b8 {
|
||||
background-color: var(--color-priduck-c2b8);
|
||||
}
|
||||
.bg-c3b8 {
|
||||
background-color: var(--color-priduck-c3b8);
|
||||
}
|
||||
.bg-c4b8 {
|
||||
background-color: var(--color-priduck-c4b8);
|
||||
}
|
||||
.bg-c5b8 {
|
||||
background-color: var(--color-priduck-c5b8);
|
||||
}
|
||||
.bg-c6b8 {
|
||||
background-color: var(--color-priduck-c6b8);
|
||||
}
|
||||
.bg-c7b8 {
|
||||
background-color: var(--color-priduck-c7b8);
|
||||
}
|
||||
.bg-c8b8 {
|
||||
background-color: var(--color-priduck-c8b8);
|
||||
}
|
||||
.bg-c9b8 {
|
||||
background-color: var(--color-priduck-c9b8);
|
||||
}
|
||||
.bg-c0b9 {
|
||||
background-color: var(--color-priduck-c0b9);
|
||||
}
|
||||
.bg-c1b9 {
|
||||
background-color: var(--color-priduck-c1b9);
|
||||
}
|
||||
.bg-c2b9 {
|
||||
background-color: var(--color-priduck-c2b9);
|
||||
}
|
||||
.bg-c3b9 {
|
||||
background-color: var(--color-priduck-c3b9);
|
||||
}
|
||||
.bg-c4b9 {
|
||||
background-color: var(--color-priduck-c4b9);
|
||||
}
|
||||
.bg-c5b9 {
|
||||
background-color: var(--color-priduck-c5b9);
|
||||
}
|
||||
.bg-c6b9 {
|
||||
background-color: var(--color-priduck-c6b9);
|
||||
}
|
||||
.bg-c7b9 {
|
||||
background-color: var(--color-priduck-c7b9);
|
||||
}
|
||||
.bg-c8b9 {
|
||||
background-color: var(--color-priduck-c8b9);
|
||||
}
|
||||
.bg-c9b9 {
|
||||
background-color: var(--color-priduck-c9b9);
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-column-gap: 1em;
|
||||
}
|
||||
144
examples/example.js
Normal file
144
examples/example.js
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
// Set up the hue slider.
|
||||
const slider = document.getElementById("hue-selector");
|
||||
const output = document.getElementById("hue");
|
||||
const box = document.getElementById("hue-box");
|
||||
|
||||
output.innerHTML = slider.value; // Display the default slider value
|
||||
|
||||
// If we have a query parameter, select that.
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const hueParam = urlParams.get("hue");
|
||||
|
||||
if (hueParam) {
|
||||
window.setTimeout(() => setHue(hueParam));
|
||||
}
|
||||
|
||||
// Update the current slider value (each time you drag the slider handle)
|
||||
slider.oninput = function () {
|
||||
setHue(this.value);
|
||||
};
|
||||
|
||||
window.setTimeout(() => update(), 250);
|
||||
|
||||
// Color Theme
|
||||
var autoColorTheme = document.getElementById("auto-color-scheme");
|
||||
var lightColorTheme = document.getElementById("light-color-scheme");
|
||||
var darkColorTheme = document.getElementById("dark-color-scheme");
|
||||
|
||||
autoColorTheme.onclick = function () {
|
||||
document.documentElement.removeAttribute("data-prefers-color-scheme");
|
||||
};
|
||||
|
||||
lightColorTheme.onclick = function () {
|
||||
document.documentElement.setAttribute("data-prefers-color-scheme", "light");
|
||||
};
|
||||
|
||||
darkColorTheme.onclick = function () {
|
||||
document.documentElement.setAttribute("data-prefers-color-scheme", "dark");
|
||||
};
|
||||
|
||||
// Prefers Contrast
|
||||
var autoContrast = document.getElementById("auto-contrast-selector");
|
||||
var moreContrast = document.getElementById("more-contrast-selector");
|
||||
var lessContrast = document.getElementById("less-contrast-selector");
|
||||
|
||||
autoContrast.onclick = function () {
|
||||
document.documentElement.removeAttribute("data-prefers-contrast");
|
||||
};
|
||||
|
||||
moreContrast.onclick = function () {
|
||||
document.documentElement.setAttribute("data-prefers-contrast", "more");
|
||||
};
|
||||
|
||||
lessContrast.onclick = function () {
|
||||
document.documentElement.setAttribute("data-prefers-contrast", "less");
|
||||
};
|
||||
|
||||
// Translating colors. We use a canvas to paint the color and then get the
|
||||
// RGB from there for programs that need it (Inkscape and Gimp).
|
||||
//
|
||||
// https://stackoverflow.com/a/76469049
|
||||
const canvas = document.createElement("canvas");
|
||||
|
||||
canvas.width = canvas.height = 1;
|
||||
|
||||
const ctx = canvas.getContext("2d", { willReadFrequently: true });
|
||||
|
||||
function getRgb(style) {
|
||||
ctx.fillStyle = style;
|
||||
ctx.fillRect(0, 0, 1, 1);
|
||||
|
||||
const colors = ctx.getImageData(0, 0, 1, 1).data;
|
||||
const r = colors[0].toString(16).padStart(2, "0").toLowerCase();
|
||||
const g = colors[1].toString(16).padStart(2, "0").toLowerCase();
|
||||
const b = colors[2].toString(16).padStart(2, "0").toLowerCase();
|
||||
const channels = [colors[0], colors[1], colors[2]];
|
||||
|
||||
return [channels.join(" "), `#${r}${g}${b}`];
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements a simple debounce function.
|
||||
*
|
||||
* @param func
|
||||
* @param {number} timeout
|
||||
* @returns
|
||||
*/
|
||||
function debounce(func, timeout = 300) {
|
||||
let timer;
|
||||
|
||||
return (...args) => {
|
||||
clearTimeout(timer);
|
||||
timer = setTimeout(() => {
|
||||
func.apply(this, args);
|
||||
}, timeout);
|
||||
};
|
||||
}
|
||||
|
||||
// Used to avoid hammering the CPU while we calculate colors.
|
||||
const update = debounce(_update);
|
||||
|
||||
/**
|
||||
* Sets the hue slider to the given color.
|
||||
*
|
||||
* @param {string} hue
|
||||
*/
|
||||
function setHue(hue) {
|
||||
// Set the hue on the screen.
|
||||
console.log("setting hue", hue);
|
||||
document.documentElement.style.setProperty("--color-priduck-hue", hue);
|
||||
output.innerHTML = hue;
|
||||
update();
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates all of the boxes and copy icons.
|
||||
*/
|
||||
function _update() {
|
||||
// Set the history URL.
|
||||
console.log("setting url");
|
||||
const url = new URL(location);
|
||||
const hue = output.innerHTML;
|
||||
url.searchParams.set("hue", hue);
|
||||
history.pushState({}, "", url);
|
||||
|
||||
// Update the controls.
|
||||
const range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
||||
for (const c of range) {
|
||||
for (const b of range) {
|
||||
const id = `c${c}b${b}`;
|
||||
const cb = document.getElementById(id);
|
||||
const style = window.getComputedStyle(cb, null);
|
||||
const lch = style["background-color"];
|
||||
const [colors, rgb] = getRgb(lch);
|
||||
|
||||
cb.innerHTML = `
|
||||
<div class='color-name'>${id}</div>
|
||||
<div class='color-lch'>${lch}</div>
|
||||
<div class='color-rgb'>${rgb}</div>
|
||||
<div class='color-rgb'>${rgb}ff</div>
|
||||
<div class='color-rgb'>${colors}</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -4,678 +4,12 @@
|
|||
<title>Ideas</title>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="stylesheet" rel="noopener" target="_blank" href="./style.css" />
|
||||
<style>
|
||||
:root {
|
||||
--color-priduck-hue: 180;
|
||||
}
|
||||
|
||||
/* https://www.w3schools.com/howto/howto_js_rangeslider.asp */
|
||||
.slidecontainer {
|
||||
width: 100%; /* Width of the outside container */
|
||||
}
|
||||
|
||||
/* The slider itself */
|
||||
.slider {
|
||||
-webkit-appearance: none; /* Override default CSS styles */
|
||||
appearance: none;
|
||||
width: 100%; /* Full-width */
|
||||
height: 25px; /* Specified height */
|
||||
background: #d3d3d3; /* Grey background */
|
||||
outline: none; /* Remove outline */
|
||||
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
|
||||
-webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
/* Mouse-over effects */
|
||||
.slider:hover {
|
||||
opacity: 1; /* Fully shown on mouse-over */
|
||||
}
|
||||
|
||||
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none; /* Override default look */
|
||||
appearance: none;
|
||||
width: 25px; /* Set a specific slider handle width */
|
||||
height: 25px; /* Slider handle height */
|
||||
background: #04aa6d; /* Green background */
|
||||
cursor: pointer; /* Cursor on hover */
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
width: 25px; /* Set a specific slider handle width */
|
||||
height: 25px; /* Slider handle height */
|
||||
background: #04aa6d; /* Green background */
|
||||
cursor: pointer; /* Cursor on hover */
|
||||
}
|
||||
|
||||
#hue {
|
||||
display: inline-block;
|
||||
min-width: 5em;
|
||||
}
|
||||
|
||||
#hue-box {
|
||||
display: inline-block;
|
||||
min-width: 5em;
|
||||
min-height: 1em;
|
||||
border: 1px solid black;
|
||||
background-color: lch(50% 100 var(--color-priduck-hue));
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
width: 5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fg-c0b0 {
|
||||
color: var(--color-priduck-c0b0);
|
||||
}
|
||||
.fg-c1b0 {
|
||||
color: var(--color-priduck-c1b0);
|
||||
}
|
||||
.fg-c2b0 {
|
||||
color: var(--color-priduck-c2b0);
|
||||
}
|
||||
.fg-c3b0 {
|
||||
color: var(--color-priduck-c3b0);
|
||||
}
|
||||
.fg-c4b0 {
|
||||
color: var(--color-priduck-c4b0);
|
||||
}
|
||||
.fg-c5b0 {
|
||||
color: var(--color-priduck-c5b0);
|
||||
}
|
||||
.fg-c6b0 {
|
||||
color: var(--color-priduck-c6b0);
|
||||
}
|
||||
.fg-c7b0 {
|
||||
color: var(--color-priduck-c7b0);
|
||||
}
|
||||
.fg-c8b0 {
|
||||
color: var(--color-priduck-c8b0);
|
||||
}
|
||||
.fg-c9b0 {
|
||||
color: var(--color-priduck-c9b0);
|
||||
}
|
||||
.fg-c0b1 {
|
||||
color: var(--color-priduck-c0b1);
|
||||
}
|
||||
.fg-c1b1 {
|
||||
color: var(--color-priduck-c1b1);
|
||||
}
|
||||
.fg-c2b1 {
|
||||
color: var(--color-priduck-c2b1);
|
||||
}
|
||||
.fg-c3b1 {
|
||||
color: var(--color-priduck-c3b1);
|
||||
}
|
||||
.fg-c4b1 {
|
||||
color: var(--color-priduck-c4b1);
|
||||
}
|
||||
.fg-c5b1 {
|
||||
color: var(--color-priduck-c5b1);
|
||||
}
|
||||
.fg-c6b1 {
|
||||
color: var(--color-priduck-c6b1);
|
||||
}
|
||||
.fg-c7b1 {
|
||||
color: var(--color-priduck-c7b1);
|
||||
}
|
||||
.fg-c8b1 {
|
||||
color: var(--color-priduck-c8b1);
|
||||
}
|
||||
.fg-c9b1 {
|
||||
color: var(--color-priduck-c9b1);
|
||||
}
|
||||
.fg-c0b2 {
|
||||
color: var(--color-priduck-c0b2);
|
||||
}
|
||||
.fg-c1b2 {
|
||||
color: var(--color-priduck-c1b2);
|
||||
}
|
||||
.fg-c2b2 {
|
||||
color: var(--color-priduck-c2b2);
|
||||
}
|
||||
.fg-c3b2 {
|
||||
color: var(--color-priduck-c3b2);
|
||||
}
|
||||
.fg-c4b2 {
|
||||
color: var(--color-priduck-c4b2);
|
||||
}
|
||||
.fg-c5b2 {
|
||||
color: var(--color-priduck-c5b2);
|
||||
}
|
||||
.fg-c6b2 {
|
||||
color: var(--color-priduck-c6b2);
|
||||
}
|
||||
.fg-c7b2 {
|
||||
color: var(--color-priduck-c7b2);
|
||||
}
|
||||
.fg-c8b2 {
|
||||
color: var(--color-priduck-c8b2);
|
||||
}
|
||||
.fg-c9b2 {
|
||||
color: var(--color-priduck-c9b2);
|
||||
}
|
||||
.fg-c0b3 {
|
||||
color: var(--color-priduck-c0b3);
|
||||
}
|
||||
.fg-c1b3 {
|
||||
color: var(--color-priduck-c1b3);
|
||||
}
|
||||
.fg-c2b3 {
|
||||
color: var(--color-priduck-c2b3);
|
||||
}
|
||||
.fg-c3b3 {
|
||||
color: var(--color-priduck-c3b3);
|
||||
}
|
||||
.fg-c4b3 {
|
||||
color: var(--color-priduck-c4b3);
|
||||
}
|
||||
.fg-c5b3 {
|
||||
color: var(--color-priduck-c5b3);
|
||||
}
|
||||
.fg-c6b3 {
|
||||
color: var(--color-priduck-c6b3);
|
||||
}
|
||||
.fg-c7b3 {
|
||||
color: var(--color-priduck-c7b3);
|
||||
}
|
||||
.fg-c8b3 {
|
||||
color: var(--color-priduck-c8b3);
|
||||
}
|
||||
.fg-c9b3 {
|
||||
color: var(--color-priduck-c9b3);
|
||||
}
|
||||
.fg-c0b4 {
|
||||
color: var(--color-priduck-c0b4);
|
||||
}
|
||||
.fg-c1b4 {
|
||||
color: var(--color-priduck-c1b4);
|
||||
}
|
||||
.fg-c2b4 {
|
||||
color: var(--color-priduck-c2b4);
|
||||
}
|
||||
.fg-c3b4 {
|
||||
color: var(--color-priduck-c3b4);
|
||||
}
|
||||
.fg-c4b4 {
|
||||
color: var(--color-priduck-c4b4);
|
||||
}
|
||||
.fg-c5b4 {
|
||||
color: var(--color-priduck-c5b4);
|
||||
}
|
||||
.fg-c6b4 {
|
||||
color: var(--color-priduck-c6b4);
|
||||
}
|
||||
.fg-c7b4 {
|
||||
color: var(--color-priduck-c7b4);
|
||||
}
|
||||
.fg-c8b4 {
|
||||
color: var(--color-priduck-c8b4);
|
||||
}
|
||||
.fg-c9b4 {
|
||||
color: var(--color-priduck-c9b4);
|
||||
}
|
||||
.fg-c0b5 {
|
||||
color: var(--color-priduck-c0b5);
|
||||
}
|
||||
.fg-c1b5 {
|
||||
color: var(--color-priduck-c1b5);
|
||||
}
|
||||
.fg-c2b5 {
|
||||
color: var(--color-priduck-c2b5);
|
||||
}
|
||||
.fg-c3b5 {
|
||||
color: var(--color-priduck-c3b5);
|
||||
}
|
||||
.fg-c4b5 {
|
||||
color: var(--color-priduck-c4b5);
|
||||
}
|
||||
.fg-c5b5 {
|
||||
color: var(--color-priduck-c5b5);
|
||||
}
|
||||
.fg-c6b5 {
|
||||
color: var(--color-priduck-c6b5);
|
||||
}
|
||||
.fg-c7b5 {
|
||||
color: var(--color-priduck-c7b5);
|
||||
}
|
||||
.fg-c8b5 {
|
||||
color: var(--color-priduck-c8b5);
|
||||
}
|
||||
.fg-c9b5 {
|
||||
color: var(--color-priduck-c9b5);
|
||||
}
|
||||
.fg-c0b6 {
|
||||
color: var(--color-priduck-c0b6);
|
||||
}
|
||||
.fg-c1b6 {
|
||||
color: var(--color-priduck-c1b6);
|
||||
}
|
||||
.fg-c2b6 {
|
||||
color: var(--color-priduck-c2b6);
|
||||
}
|
||||
.fg-c3b6 {
|
||||
color: var(--color-priduck-c3b6);
|
||||
}
|
||||
.fg-c4b6 {
|
||||
color: var(--color-priduck-c4b6);
|
||||
}
|
||||
.fg-c5b6 {
|
||||
color: var(--color-priduck-c5b6);
|
||||
}
|
||||
.fg-c6b6 {
|
||||
color: var(--color-priduck-c6b6);
|
||||
}
|
||||
.fg-c7b6 {
|
||||
color: var(--color-priduck-c7b6);
|
||||
}
|
||||
.fg-c8b6 {
|
||||
color: var(--color-priduck-c8b6);
|
||||
}
|
||||
.fg-c9b6 {
|
||||
color: var(--color-priduck-c9b6);
|
||||
}
|
||||
.fg-c0b7 {
|
||||
color: var(--color-priduck-c0b7);
|
||||
}
|
||||
.fg-c1b7 {
|
||||
color: var(--color-priduck-c1b7);
|
||||
}
|
||||
.fg-c2b7 {
|
||||
color: var(--color-priduck-c2b7);
|
||||
}
|
||||
.fg-c3b7 {
|
||||
color: var(--color-priduck-c3b7);
|
||||
}
|
||||
.fg-c4b7 {
|
||||
color: var(--color-priduck-c4b7);
|
||||
}
|
||||
.fg-c5b7 {
|
||||
color: var(--color-priduck-c5b7);
|
||||
}
|
||||
.fg-c6b7 {
|
||||
color: var(--color-priduck-c6b7);
|
||||
}
|
||||
.fg-c7b7 {
|
||||
color: var(--color-priduck-c7b7);
|
||||
}
|
||||
.fg-c8b7 {
|
||||
color: var(--color-priduck-c8b7);
|
||||
}
|
||||
.fg-c9b7 {
|
||||
color: var(--color-priduck-c9b7);
|
||||
}
|
||||
.fg-c0b8 {
|
||||
color: var(--color-priduck-c0b8);
|
||||
}
|
||||
.fg-c1b8 {
|
||||
color: var(--color-priduck-c1b8);
|
||||
}
|
||||
.fg-c2b8 {
|
||||
color: var(--color-priduck-c2b8);
|
||||
}
|
||||
.fg-c3b8 {
|
||||
color: var(--color-priduck-c3b8);
|
||||
}
|
||||
.fg-c4b8 {
|
||||
color: var(--color-priduck-c4b8);
|
||||
}
|
||||
.fg-c5b8 {
|
||||
color: var(--color-priduck-c5b8);
|
||||
}
|
||||
.fg-c6b8 {
|
||||
color: var(--color-priduck-c6b8);
|
||||
}
|
||||
.fg-c7b8 {
|
||||
color: var(--color-priduck-c7b8);
|
||||
}
|
||||
.fg-c8b8 {
|
||||
color: var(--color-priduck-c8b8);
|
||||
}
|
||||
.fg-c9b8 {
|
||||
color: var(--color-priduck-c9b8);
|
||||
}
|
||||
.fg-c0b9 {
|
||||
color: var(--color-priduck-c0b9);
|
||||
}
|
||||
.fg-c1b9 {
|
||||
color: var(--color-priduck-c1b9);
|
||||
}
|
||||
.fg-c2b9 {
|
||||
color: var(--color-priduck-c2b9);
|
||||
}
|
||||
.fg-c3b9 {
|
||||
color: var(--color-priduck-c3b9);
|
||||
}
|
||||
.fg-c4b9 {
|
||||
color: var(--color-priduck-c4b9);
|
||||
}
|
||||
.fg-c5b9 {
|
||||
color: var(--color-priduck-c5b9);
|
||||
}
|
||||
.fg-c6b9 {
|
||||
color: var(--color-priduck-c6b9);
|
||||
}
|
||||
.fg-c7b9 {
|
||||
color: var(--color-priduck-c7b9);
|
||||
}
|
||||
.fg-c8b9 {
|
||||
color: var(--color-priduck-c8b9);
|
||||
}
|
||||
.fg-c9b9 {
|
||||
color: var(--color-priduck-c9b9);
|
||||
}
|
||||
|
||||
.bg-c0b0 {
|
||||
background-color: var(--color-priduck-c0b0);
|
||||
}
|
||||
.bg-c1b0 {
|
||||
background-color: var(--color-priduck-c1b0);
|
||||
}
|
||||
.bg-c2b0 {
|
||||
background-color: var(--color-priduck-c2b0);
|
||||
}
|
||||
.bg-c3b0 {
|
||||
background-color: var(--color-priduck-c3b0);
|
||||
}
|
||||
.bg-c4b0 {
|
||||
background-color: var(--color-priduck-c4b0);
|
||||
}
|
||||
.bg-c5b0 {
|
||||
background-color: var(--color-priduck-c5b0);
|
||||
}
|
||||
.bg-c6b0 {
|
||||
background-color: var(--color-priduck-c6b0);
|
||||
}
|
||||
.bg-c7b0 {
|
||||
background-color: var(--color-priduck-c7b0);
|
||||
}
|
||||
.bg-c8b0 {
|
||||
background-color: var(--color-priduck-c8b0);
|
||||
}
|
||||
.bg-c9b0 {
|
||||
background-color: var(--color-priduck-c9b0);
|
||||
}
|
||||
.bg-c0b1 {
|
||||
background-color: var(--color-priduck-c0b1);
|
||||
}
|
||||
.bg-c1b1 {
|
||||
background-color: var(--color-priduck-c1b1);
|
||||
}
|
||||
.bg-c2b1 {
|
||||
background-color: var(--color-priduck-c2b1);
|
||||
}
|
||||
.bg-c3b1 {
|
||||
background-color: var(--color-priduck-c3b1);
|
||||
}
|
||||
.bg-c4b1 {
|
||||
background-color: var(--color-priduck-c4b1);
|
||||
}
|
||||
.bg-c5b1 {
|
||||
background-color: var(--color-priduck-c5b1);
|
||||
}
|
||||
.bg-c6b1 {
|
||||
background-color: var(--color-priduck-c6b1);
|
||||
}
|
||||
.bg-c7b1 {
|
||||
background-color: var(--color-priduck-c7b1);
|
||||
}
|
||||
.bg-c8b1 {
|
||||
background-color: var(--color-priduck-c8b1);
|
||||
}
|
||||
.bg-c9b1 {
|
||||
background-color: var(--color-priduck-c9b1);
|
||||
}
|
||||
.bg-c0b2 {
|
||||
background-color: var(--color-priduck-c0b2);
|
||||
}
|
||||
.bg-c1b2 {
|
||||
background-color: var(--color-priduck-c1b2);
|
||||
}
|
||||
.bg-c2b2 {
|
||||
background-color: var(--color-priduck-c2b2);
|
||||
}
|
||||
.bg-c3b2 {
|
||||
background-color: var(--color-priduck-c3b2);
|
||||
}
|
||||
.bg-c4b2 {
|
||||
background-color: var(--color-priduck-c4b2);
|
||||
}
|
||||
.bg-c5b2 {
|
||||
background-color: var(--color-priduck-c5b2);
|
||||
}
|
||||
.bg-c6b2 {
|
||||
background-color: var(--color-priduck-c6b2);
|
||||
}
|
||||
.bg-c7b2 {
|
||||
background-color: var(--color-priduck-c7b2);
|
||||
}
|
||||
.bg-c8b2 {
|
||||
background-color: var(--color-priduck-c8b2);
|
||||
}
|
||||
.bg-c9b2 {
|
||||
background-color: var(--color-priduck-c9b2);
|
||||
}
|
||||
.bg-c0b3 {
|
||||
background-color: var(--color-priduck-c0b3);
|
||||
}
|
||||
.bg-c1b3 {
|
||||
background-color: var(--color-priduck-c1b3);
|
||||
}
|
||||
.bg-c2b3 {
|
||||
background-color: var(--color-priduck-c2b3);
|
||||
}
|
||||
.bg-c3b3 {
|
||||
background-color: var(--color-priduck-c3b3);
|
||||
}
|
||||
.bg-c4b3 {
|
||||
background-color: var(--color-priduck-c4b3);
|
||||
}
|
||||
.bg-c5b3 {
|
||||
background-color: var(--color-priduck-c5b3);
|
||||
}
|
||||
.bg-c6b3 {
|
||||
background-color: var(--color-priduck-c6b3);
|
||||
}
|
||||
.bg-c7b3 {
|
||||
background-color: var(--color-priduck-c7b3);
|
||||
}
|
||||
.bg-c8b3 {
|
||||
background-color: var(--color-priduck-c8b3);
|
||||
}
|
||||
.bg-c9b3 {
|
||||
background-color: var(--color-priduck-c9b3);
|
||||
}
|
||||
.bg-c0b4 {
|
||||
background-color: var(--color-priduck-c0b4);
|
||||
}
|
||||
.bg-c1b4 {
|
||||
background-color: var(--color-priduck-c1b4);
|
||||
}
|
||||
.bg-c2b4 {
|
||||
background-color: var(--color-priduck-c2b4);
|
||||
}
|
||||
.bg-c3b4 {
|
||||
background-color: var(--color-priduck-c3b4);
|
||||
}
|
||||
.bg-c4b4 {
|
||||
background-color: var(--color-priduck-c4b4);
|
||||
}
|
||||
.bg-c5b4 {
|
||||
background-color: var(--color-priduck-c5b4);
|
||||
}
|
||||
.bg-c6b4 {
|
||||
background-color: var(--color-priduck-c6b4);
|
||||
}
|
||||
.bg-c7b4 {
|
||||
background-color: var(--color-priduck-c7b4);
|
||||
}
|
||||
.bg-c8b4 {
|
||||
background-color: var(--color-priduck-c8b4);
|
||||
}
|
||||
.bg-c9b4 {
|
||||
background-color: var(--color-priduck-c9b4);
|
||||
}
|
||||
.bg-c0b5 {
|
||||
background-color: var(--color-priduck-c0b5);
|
||||
}
|
||||
.bg-c1b5 {
|
||||
background-color: var(--color-priduck-c1b5);
|
||||
}
|
||||
.bg-c2b5 {
|
||||
background-color: var(--color-priduck-c2b5);
|
||||
}
|
||||
.bg-c3b5 {
|
||||
background-color: var(--color-priduck-c3b5);
|
||||
}
|
||||
.bg-c4b5 {
|
||||
background-color: var(--color-priduck-c4b5);
|
||||
}
|
||||
.bg-c5b5 {
|
||||
background-color: var(--color-priduck-c5b5);
|
||||
}
|
||||
.bg-c6b5 {
|
||||
background-color: var(--color-priduck-c6b5);
|
||||
}
|
||||
.bg-c7b5 {
|
||||
background-color: var(--color-priduck-c7b5);
|
||||
}
|
||||
.bg-c8b5 {
|
||||
background-color: var(--color-priduck-c8b5);
|
||||
}
|
||||
.bg-c9b5 {
|
||||
background-color: var(--color-priduck-c9b5);
|
||||
}
|
||||
.bg-c0b6 {
|
||||
background-color: var(--color-priduck-c0b6);
|
||||
}
|
||||
.bg-c1b6 {
|
||||
background-color: var(--color-priduck-c1b6);
|
||||
}
|
||||
.bg-c2b6 {
|
||||
background-color: var(--color-priduck-c2b6);
|
||||
}
|
||||
.bg-c3b6 {
|
||||
background-color: var(--color-priduck-c3b6);
|
||||
}
|
||||
.bg-c4b6 {
|
||||
background-color: var(--color-priduck-c4b6);
|
||||
}
|
||||
.bg-c5b6 {
|
||||
background-color: var(--color-priduck-c5b6);
|
||||
}
|
||||
.bg-c6b6 {
|
||||
background-color: var(--color-priduck-c6b6);
|
||||
}
|
||||
.bg-c7b6 {
|
||||
background-color: var(--color-priduck-c7b6);
|
||||
}
|
||||
.bg-c8b6 {
|
||||
background-color: var(--color-priduck-c8b6);
|
||||
}
|
||||
.bg-c9b6 {
|
||||
background-color: var(--color-priduck-c9b6);
|
||||
}
|
||||
.bg-c0b7 {
|
||||
background-color: var(--color-priduck-c0b7);
|
||||
}
|
||||
.bg-c1b7 {
|
||||
background-color: var(--color-priduck-c1b7);
|
||||
}
|
||||
.bg-c2b7 {
|
||||
background-color: var(--color-priduck-c2b7);
|
||||
}
|
||||
.bg-c3b7 {
|
||||
background-color: var(--color-priduck-c3b7);
|
||||
}
|
||||
.bg-c4b7 {
|
||||
background-color: var(--color-priduck-c4b7);
|
||||
}
|
||||
.bg-c5b7 {
|
||||
background-color: var(--color-priduck-c5b7);
|
||||
}
|
||||
.bg-c6b7 {
|
||||
background-color: var(--color-priduck-c6b7);
|
||||
}
|
||||
.bg-c7b7 {
|
||||
background-color: var(--color-priduck-c7b7);
|
||||
}
|
||||
.bg-c8b7 {
|
||||
background-color: var(--color-priduck-c8b7);
|
||||
}
|
||||
.bg-c9b7 {
|
||||
background-color: var(--color-priduck-c9b7);
|
||||
}
|
||||
.bg-c0b8 {
|
||||
background-color: var(--color-priduck-c0b8);
|
||||
}
|
||||
.bg-c1b8 {
|
||||
background-color: var(--color-priduck-c1b8);
|
||||
}
|
||||
.bg-c2b8 {
|
||||
background-color: var(--color-priduck-c2b8);
|
||||
}
|
||||
.bg-c3b8 {
|
||||
background-color: var(--color-priduck-c3b8);
|
||||
}
|
||||
.bg-c4b8 {
|
||||
background-color: var(--color-priduck-c4b8);
|
||||
}
|
||||
.bg-c5b8 {
|
||||
background-color: var(--color-priduck-c5b8);
|
||||
}
|
||||
.bg-c6b8 {
|
||||
background-color: var(--color-priduck-c6b8);
|
||||
}
|
||||
.bg-c7b8 {
|
||||
background-color: var(--color-priduck-c7b8);
|
||||
}
|
||||
.bg-c8b8 {
|
||||
background-color: var(--color-priduck-c8b8);
|
||||
}
|
||||
.bg-c9b8 {
|
||||
background-color: var(--color-priduck-c9b8);
|
||||
}
|
||||
.bg-c0b9 {
|
||||
background-color: var(--color-priduck-c0b9);
|
||||
}
|
||||
.bg-c1b9 {
|
||||
background-color: var(--color-priduck-c1b9);
|
||||
}
|
||||
.bg-c2b9 {
|
||||
background-color: var(--color-priduck-c2b9);
|
||||
}
|
||||
.bg-c3b9 {
|
||||
background-color: var(--color-priduck-c3b9);
|
||||
}
|
||||
.bg-c4b9 {
|
||||
background-color: var(--color-priduck-c4b9);
|
||||
}
|
||||
.bg-c5b9 {
|
||||
background-color: var(--color-priduck-c5b9);
|
||||
}
|
||||
.bg-c6b9 {
|
||||
background-color: var(--color-priduck-c6b9);
|
||||
}
|
||||
.bg-c7b9 {
|
||||
background-color: var(--color-priduck-c7b9);
|
||||
}
|
||||
.bg-c8b9 {
|
||||
background-color: var(--color-priduck-c8b9);
|
||||
}
|
||||
.bg-c9b9 {
|
||||
background-color: var(--color-priduck-c9b9);
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-column-gap: 1em;
|
||||
}
|
||||
</style>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
href="./example.css"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Options</h1>
|
||||
|
|
@ -783,133 +117,133 @@
|
|||
</tr>
|
||||
<tr>
|
||||
<th>b0</th>
|
||||
<td class="bg-c0b0">c0b0</td>
|
||||
<td class="bg-c1b0">c1b0</td>
|
||||
<td class="bg-c2b0">c2b0</td>
|
||||
<td class="bg-c3b0">c3b0</td>
|
||||
<td class="bg-c4b0">c4b0</td>
|
||||
<td class="bg-c5b0">c5b0</td>
|
||||
<td class="bg-c6b0">c6b0</td>
|
||||
<td class="bg-c7b0">c7b0</td>
|
||||
<td class="bg-c8b0">c8b0</td>
|
||||
<td class="bg-c9b0">c9b0</td>
|
||||
<td id="c0b0" class="fg-dark bg-c0b0">c0b0</td>
|
||||
<td id="c1b0" class="fg-dark bg-c1b0">c1b0</td>
|
||||
<td id="c2b0" class="fg-dark bg-c2b0">c2b0</td>
|
||||
<td id="c3b0" class="fg-dark bg-c3b0">c3b0</td>
|
||||
<td id="c4b0" class="fg-dark bg-c4b0">c4b0</td>
|
||||
<td id="c5b0" class="fg-dark bg-c5b0">c5b0</td>
|
||||
<td id="c6b0" class="fg-dark bg-c6b0">c6b0</td>
|
||||
<td id="c7b0" class="fg-dark bg-c7b0">c7b0</td>
|
||||
<td id="c8b0" class="fg-dark bg-c8b0">c8b0</td>
|
||||
<td id="c9b0" class="fg-dark bg-c9b0">c9b0</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>b1</th>
|
||||
<td class="bg-c0b1">c0b1</td>
|
||||
<td class="bg-c1b1">c1b1</td>
|
||||
<td class="bg-c2b1">c2b1</td>
|
||||
<td class="bg-c3b1">c3b1</td>
|
||||
<td class="bg-c4b1">c4b1</td>
|
||||
<td class="bg-c5b1">c5b1</td>
|
||||
<td class="bg-c6b1">c6b1</td>
|
||||
<td class="bg-c7b1">c7b1</td>
|
||||
<td class="bg-c8b1">c8b1</td>
|
||||
<td class="bg-c9b1">c9b1</td>
|
||||
<td id="c0b1" class="fg-dark bg-c0b1">c0b1</td>
|
||||
<td id="c1b1" class="fg-dark bg-c1b1">c1b1</td>
|
||||
<td id="c2b1" class="fg-dark bg-c2b1">c2b1</td>
|
||||
<td id="c3b1" class="fg-dark bg-c3b1">c3b1</td>
|
||||
<td id="c4b1" class="fg-dark bg-c4b1">c4b1</td>
|
||||
<td id="c5b1" class="fg-dark bg-c5b1">c5b1</td>
|
||||
<td id="c6b1" class="fg-dark bg-c6b1">c6b1</td>
|
||||
<td id="c7b1" class="fg-dark bg-c7b1">c7b1</td>
|
||||
<td id="c8b1" class="fg-dark bg-c8b1">c8b1</td>
|
||||
<td id="c9b1" class="fg-dark bg-c9b1">c9b1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>b2</th>
|
||||
<td class="bg-c0b2">c0b2</td>
|
||||
<td class="bg-c1b2">c1b2</td>
|
||||
<td class="bg-c2b2">c2b2</td>
|
||||
<td class="bg-c3b2">c3b2</td>
|
||||
<td class="bg-c4b2">c4b2</td>
|
||||
<td class="bg-c5b2">c5b2</td>
|
||||
<td class="bg-c6b2">c6b2</td>
|
||||
<td class="bg-c7b2">c7b2</td>
|
||||
<td class="bg-c8b2">c8b2</td>
|
||||
<td class="bg-c9b2">c9b2</td>
|
||||
<td id="c0b2" class="fg-dark bg-c0b2">c0b2</td>
|
||||
<td id="c1b2" class="fg-dark bg-c1b2">c1b2</td>
|
||||
<td id="c2b2" class="fg-dark bg-c2b2">c2b2</td>
|
||||
<td id="c3b2" class="fg-dark bg-c3b2">c3b2</td>
|
||||
<td id="c4b2" class="fg-dark bg-c4b2">c4b2</td>
|
||||
<td id="c5b2" class="fg-dark bg-c5b2">c5b2</td>
|
||||
<td id="c6b2" class="fg-dark bg-c6b2">c6b2</td>
|
||||
<td id="c7b2" class="fg-dark bg-c7b2">c7b2</td>
|
||||
<td id="c8b2" class="fg-dark bg-c8b2">c8b2</td>
|
||||
<td id="c9b2" class="fg-dark bg-c9b2">c9b2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>b3</th>
|
||||
<td class="bg-c0b3">c0b3</td>
|
||||
<td class="bg-c1b3">c1b3</td>
|
||||
<td class="bg-c2b3">c2b3</td>
|
||||
<td class="bg-c3b3">c3b3</td>
|
||||
<td class="bg-c4b3">c4b3</td>
|
||||
<td class="bg-c5b3">c5b3</td>
|
||||
<td class="bg-c6b3">c6b3</td>
|
||||
<td class="bg-c7b3">c7b3</td>
|
||||
<td class="bg-c8b3">c8b3</td>
|
||||
<td class="bg-c9b3">c9b3</td>
|
||||
<td id="c0b3" class="fg-dark bg-c0b3">c0b3</td>
|
||||
<td id="c1b3" class="fg-dark bg-c1b3">c1b3</td>
|
||||
<td id="c2b3" class="fg-dark bg-c2b3">c2b3</td>
|
||||
<td id="c3b3" class="fg-dark bg-c3b3">c3b3</td>
|
||||
<td id="c4b3" class="fg-dark bg-c4b3">c4b3</td>
|
||||
<td id="c5b3" class="fg-dark bg-c5b3">c5b3</td>
|
||||
<td id="c6b3" class="fg-dark bg-c6b3">c6b3</td>
|
||||
<td id="c7b3" class="fg-dark bg-c7b3">c7b3</td>
|
||||
<td id="c8b3" class="fg-dark bg-c8b3">c8b3</td>
|
||||
<td id="c9b3" class="fg-dark bg-c9b3">c9b3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>b4</th>
|
||||
<td class="bg-c0b4">c0b4</td>
|
||||
<td class="bg-c1b4">c1b4</td>
|
||||
<td class="bg-c2b4">c2b4</td>
|
||||
<td class="bg-c3b4">c3b4</td>
|
||||
<td class="bg-c4b4">c4b4</td>
|
||||
<td class="bg-c5b4">c5b4</td>
|
||||
<td class="bg-c6b4">c6b4</td>
|
||||
<td class="bg-c7b4">c7b4</td>
|
||||
<td class="bg-c8b4">c8b4</td>
|
||||
<td class="bg-c9b4">c9b4</td>
|
||||
<td id="c0b4" class="fg-dark bg-c0b4">c0b4</td>
|
||||
<td id="c1b4" class="fg-dark bg-c1b4">c1b4</td>
|
||||
<td id="c2b4" class="fg-dark bg-c2b4">c2b4</td>
|
||||
<td id="c3b4" class="fg-dark bg-c3b4">c3b4</td>
|
||||
<td id="c4b4" class="fg-dark bg-c4b4">c4b4</td>
|
||||
<td id="c5b4" class="fg-dark bg-c5b4">c5b4</td>
|
||||
<td id="c6b4" class="fg-dark bg-c6b4">c6b4</td>
|
||||
<td id="c7b4" class="fg-dark bg-c7b4">c7b4</td>
|
||||
<td id="c8b4" class="fg-dark bg-c8b4">c8b4</td>
|
||||
<td id="c9b4" class="fg-dark bg-c9b4">c9b4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>b5</th>
|
||||
<td class="bg-c0b5">c0b5</td>
|
||||
<td class="bg-c1b5">c1b5</td>
|
||||
<td class="bg-c2b5">c2b5</td>
|
||||
<td class="bg-c3b5">c3b5</td>
|
||||
<td class="bg-c4b5">c4b5</td>
|
||||
<td class="bg-c5b5">c5b5</td>
|
||||
<td class="bg-c6b5">c6b5</td>
|
||||
<td class="bg-c7b5">c7b5</td>
|
||||
<td class="bg-c8b5">c8b5</td>
|
||||
<td class="bg-c9b5">c9b5</td>
|
||||
<td id="c0b5" class="fg-light bg-c0b5">c0b5</td>
|
||||
<td id="c1b5" class="fg-light bg-c1b5">c1b5</td>
|
||||
<td id="c2b5" class="fg-light bg-c2b5">c2b5</td>
|
||||
<td id="c3b5" class="fg-light bg-c3b5">c3b5</td>
|
||||
<td id="c4b5" class="fg-light bg-c4b5">c4b5</td>
|
||||
<td id="c5b5" class="fg-light bg-c5b5">c5b5</td>
|
||||
<td id="c6b5" class="fg-light bg-c6b5">c6b5</td>
|
||||
<td id="c7b5" class="fg-light bg-c7b5">c7b5</td>
|
||||
<td id="c8b5" class="fg-light bg-c8b5">c8b5</td>
|
||||
<td id="c9b5" class="fg-light bg-c9b5">c9b5</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>b6</th>
|
||||
<td class="bg-c0b6">c0b6</td>
|
||||
<td class="bg-c1b6">c1b6</td>
|
||||
<td class="bg-c2b6">c2b6</td>
|
||||
<td class="bg-c3b6">c3b6</td>
|
||||
<td class="bg-c4b6">c4b6</td>
|
||||
<td class="bg-c5b6">c5b6</td>
|
||||
<td class="bg-c6b6">c6b6</td>
|
||||
<td class="bg-c7b6">c7b6</td>
|
||||
<td class="bg-c8b6">c8b6</td>
|
||||
<td class="bg-c9b6">c9b6</td>
|
||||
<td id="c0b6" class="fg-light bg-c0b6">c0b6</td>
|
||||
<td id="c1b6" class="fg-light bg-c1b6">c1b6</td>
|
||||
<td id="c2b6" class="fg-light bg-c2b6">c2b6</td>
|
||||
<td id="c3b6" class="fg-light bg-c3b6">c3b6</td>
|
||||
<td id="c4b6" class="fg-light bg-c4b6">c4b6</td>
|
||||
<td id="c5b6" class="fg-light bg-c5b6">c5b6</td>
|
||||
<td id="c6b6" class="fg-light bg-c6b6">c6b6</td>
|
||||
<td id="c7b6" class="fg-light bg-c7b6">c7b6</td>
|
||||
<td id="c8b6" class="fg-light bg-c8b6">c8b6</td>
|
||||
<td id="c9b6" class="fg-light bg-c9b6">c9b6</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>b7</th>
|
||||
<td class="bg-c0b7">c0b7</td>
|
||||
<td class="bg-c1b7">c1b7</td>
|
||||
<td class="bg-c2b7">c2b7</td>
|
||||
<td class="bg-c3b7">c3b7</td>
|
||||
<td class="bg-c4b7">c4b7</td>
|
||||
<td class="bg-c5b7">c5b7</td>
|
||||
<td class="bg-c6b7">c6b7</td>
|
||||
<td class="bg-c7b7">c7b7</td>
|
||||
<td class="bg-c8b7">c8b7</td>
|
||||
<td class="bg-c9b7">c9b7</td>
|
||||
<td id="c0b7" class="fg-light bg-c0b7">c0b7</td>
|
||||
<td id="c1b7" class="fg-light bg-c1b7">c1b7</td>
|
||||
<td id="c2b7" class="fg-light bg-c2b7">c2b7</td>
|
||||
<td id="c3b7" class="fg-light bg-c3b7">c3b7</td>
|
||||
<td id="c4b7" class="fg-light bg-c4b7">c4b7</td>
|
||||
<td id="c5b7" class="fg-light bg-c5b7">c5b7</td>
|
||||
<td id="c6b7" class="fg-light bg-c6b7">c6b7</td>
|
||||
<td id="c7b7" class="fg-light bg-c7b7">c7b7</td>
|
||||
<td id="c8b7" class="fg-light bg-c8b7">c8b7</td>
|
||||
<td id="c9b7" class="fg-light bg-c9b7">c9b7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>b8</th>
|
||||
<td class="bg-c0b8">c0b8</td>
|
||||
<td class="bg-c1b8">c1b8</td>
|
||||
<td class="bg-c2b8">c2b8</td>
|
||||
<td class="bg-c3b8">c3b8</td>
|
||||
<td class="bg-c4b8">c4b8</td>
|
||||
<td class="bg-c5b8">c5b8</td>
|
||||
<td class="bg-c6b8">c6b8</td>
|
||||
<td class="bg-c7b8">c7b8</td>
|
||||
<td class="bg-c8b8">c8b8</td>
|
||||
<td class="bg-c9b8">c9b8</td>
|
||||
<td id="c0b8" class="fg-light bg-c0b8">c0b8</td>
|
||||
<td id="c1b8" class="fg-light bg-c1b8">c1b8</td>
|
||||
<td id="c2b8" class="fg-light bg-c2b8">c2b8</td>
|
||||
<td id="c3b8" class="fg-light bg-c3b8">c3b8</td>
|
||||
<td id="c4b8" class="fg-light bg-c4b8">c4b8</td>
|
||||
<td id="c5b8" class="fg-light bg-c5b8">c5b8</td>
|
||||
<td id="c6b8" class="fg-light bg-c6b8">c6b8</td>
|
||||
<td id="c7b8" class="fg-light bg-c7b8">c7b8</td>
|
||||
<td id="c8b8" class="fg-light bg-c8b8">c8b8</td>
|
||||
<td id="c9b8" class="fg-light bg-c9b8">c9b8</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>b9</th>
|
||||
<td class="bg-c0b9">c0b9</td>
|
||||
<td class="bg-c1b9">c1b9</td>
|
||||
<td class="bg-c2b9">c2b9</td>
|
||||
<td class="bg-c3b9">c3b9</td>
|
||||
<td class="bg-c4b9">c4b9</td>
|
||||
<td class="bg-c5b9">c5b9</td>
|
||||
<td class="bg-c6b9">c6b9</td>
|
||||
<td class="bg-c7b9">c7b9</td>
|
||||
<td class="bg-c8b9">c8b9</td>
|
||||
<td class="bg-c9b9">c9b9</td>
|
||||
<td id="c0b9" class="fg-light bg-c0b9">c0b9</td>
|
||||
<td id="c1b9" class="fg-light bg-c1b9">c1b9</td>
|
||||
<td id="c2b9" class="fg-light bg-c2b9">c2b9</td>
|
||||
<td id="c3b9" class="fg-light bg-c3b9">c3b9</td>
|
||||
<td id="c4b9" class="fg-light bg-c4b9">c4b9</td>
|
||||
<td id="c5b9" class="fg-light bg-c5b9">c5b9</td>
|
||||
<td id="c6b9" class="fg-light bg-c6b9">c6b9</td>
|
||||
<td id="c7b9" class="fg-light bg-c7b9">c7b9</td>
|
||||
<td id="c8b9" class="fg-light bg-c8b9">c8b9</td>
|
||||
<td id="c9b9" class="fg-light bg-c9b9">c9b9</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
|
@ -1099,61 +433,5 @@
|
|||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
<script>
|
||||
// Hue
|
||||
var slider = document.getElementById("hue-selector");
|
||||
var output = document.getElementById("hue");
|
||||
var box = document.getElementById("hue-box");
|
||||
|
||||
output.innerHTML = slider.value; // Display the default slider value
|
||||
|
||||
// Update the current slider value (each time you drag the slider handle)
|
||||
slider.oninput = function () {
|
||||
document.documentElement.style.setProperty(
|
||||
"--color-priduck-hue",
|
||||
this.value,
|
||||
);
|
||||
output.innerHTML = this.value;
|
||||
};
|
||||
|
||||
// Color Theme
|
||||
var autoColorTheme = document.getElementById("auto-color-scheme");
|
||||
var lightColorTheme = document.getElementById("light-color-scheme");
|
||||
var darkColorTheme = document.getElementById("dark-color-scheme");
|
||||
|
||||
autoColorTheme.onclick = function () {
|
||||
document.documentElement.removeAttribute("data-prefers-color-scheme");
|
||||
};
|
||||
|
||||
lightColorTheme.onclick = function () {
|
||||
document.documentElement.setAttribute(
|
||||
"data-prefers-color-scheme",
|
||||
"light",
|
||||
);
|
||||
};
|
||||
|
||||
darkColorTheme.onclick = function () {
|
||||
document.documentElement.setAttribute(
|
||||
"data-prefers-color-scheme",
|
||||
"dark",
|
||||
);
|
||||
};
|
||||
|
||||
// Prefers Contrast
|
||||
var autoContrast = document.getElementById("auto-contrast-selector");
|
||||
var moreContrast = document.getElementById("more-contrast-selector");
|
||||
var lessContrast = document.getElementById("less-contrast-selector");
|
||||
|
||||
autoContrast.onclick = function () {
|
||||
document.documentElement.removeAttribute("data-prefers-contrast");
|
||||
};
|
||||
|
||||
moreContrast.onclick = function () {
|
||||
document.documentElement.setAttribute("data-prefers-contrast", "more");
|
||||
};
|
||||
|
||||
lessContrast.onclick = function () {
|
||||
document.documentElement.setAttribute("data-prefers-contrast", "less");
|
||||
};
|
||||
</script>
|
||||
<script src="./example.js"></script>
|
||||
</html>
|
||||
|
|
|
|||
35
package-lock.json
generated
35
package-lock.json
generated
|
|
@ -1,15 +1,18 @@
|
|||
{
|
||||
"name": "@priduck-color-theme/base",
|
||||
"name": "@priduck-color-theme/priduck-cli",
|
||||
"version": "0.1.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@priduck-color-theme/base",
|
||||
"name": "@priduck-color-theme/priduck-cli",
|
||||
"version": "0.1.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@priduck-color-theme/cli": "^0.0.1"
|
||||
"@priduck-color-theme/cli": "^0.0.1",
|
||||
"colorjs.io": "^0.5.0",
|
||||
"debug": "^4.3.4",
|
||||
"yargs": "^17.7.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"mkdirp": "^3.0.1"
|
||||
|
|
@ -78,6 +81,27 @@
|
|||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
|
||||
},
|
||||
"node_modules/colorjs.io": {
|
||||
"version": "0.5.0",
|
||||
"resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.0.tgz",
|
||||
"integrity": "sha512-qekjTiBLM3F/sXKks/ih5aWaHIGu+Ftel0yKEvmpbKvmxpNOhojKgha5uiWEUOqEpRjC1Tq3nJRT7WgdBOxIGg=="
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
||||
"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
|
||||
"dependencies": {
|
||||
"ms": "2.1.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"supports-color": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/emoji-regex": {
|
||||
"version": "8.0.0",
|
||||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
||||
|
|
@ -122,6 +146,11 @@
|
|||
"url": "https://github.com/sponsors/isaacs"
|
||||
}
|
||||
},
|
||||
"node_modules/ms": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
|
||||
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
|
||||
},
|
||||
"node_modules/require-directory": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
|
||||
|
|
|
|||
18
package.json
18
package.json
|
|
@ -1,21 +1,27 @@
|
|||
{
|
||||
"name": "@priduck-color-theme/base",
|
||||
"name": "@priduck-color-theme/cli",
|
||||
"version": "0.1.0",
|
||||
"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",
|
||||
"devDependencies": {
|
||||
"mkdirp": "^3.0.1"
|
||||
"bin": {
|
||||
"priduck": "./src/cli.mjs"
|
||||
},
|
||||
"dependencies": {
|
||||
"@priduck-color-theme/cli": "^0.0.1"
|
||||
"@priduck-color-theme/cli": "^0.0.1",
|
||||
"colorjs.io": "^0.5.0",
|
||||
"debug": "^4.3.4",
|
||||
"mkdirp": "^3.0.1",
|
||||
"yargs": "^17.7.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
13
src/cli.mjs
Normal file
13
src/cli.mjs
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import yargs from "yargs";
|
||||
import { hideBin } from "yargs/helpers";
|
||||
import * as cssCmd from "./cmds/css.mjs";
|
||||
import * as paletteCmd from "./cmds/palette.mjs";
|
||||
|
||||
// Set up the top-level command.
|
||||
yargs(hideBin(process.argv))
|
||||
.usage("$0 <cmd> [args]")
|
||||
.command(cssCmd)
|
||||
.command(paletteCmd)
|
||||
.demand(2)
|
||||
.help()
|
||||
.parse();
|
||||
10
src/cmds/css.mjs
Normal file
10
src/cmds/css.mjs
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import * as variablesCmd from "./css/variables.mjs";
|
||||
|
||||
export const command = "css";
|
||||
export const desc = "Generate CSS files";
|
||||
|
||||
export function builder(yargv) {
|
||||
yargv.command(variablesCmd).demand(2);
|
||||
}
|
||||
|
||||
export function handler(argv) {}
|
||||
72
src/cmds/css/variables.mjs
Normal file
72
src/cmds/css/variables.mjs
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
import * as colors from "../../colors.mjs";
|
||||
import { write } from "../../output.mjs";
|
||||
import debug from "debug";
|
||||
|
||||
/** @type {object} */
|
||||
const log = debug("css").extend("variables");
|
||||
|
||||
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",
|
||||
})
|
||||
.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 = [];
|
||||
|
||||
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) {
|
||||
// Figure out the rotation.
|
||||
const rotation = colors.getHueRotation(color);
|
||||
|
||||
// For each hue, we have ten levels of brightness ranging from very dark
|
||||
// to very light.
|
||||
for (const brightness of colors.brightnessList) {
|
||||
// We use a standard code (--color-cXbY) for our codes.
|
||||
const code = `--color-priduck-c${color}b${brightness}`;
|
||||
|
||||
// Figure out the ramps we are using for brighteness.
|
||||
const l = colors.getLightness(brightness);
|
||||
const s = colors.getChroma(brightness);
|
||||
|
||||
// Write out the CSS.
|
||||
lines.push(
|
||||
`${prefix}${code}: lch(${l.toFixed(1)} ${s.toFixed(
|
||||
1,
|
||||
)} calc(var(--color-priduck-hue) + ${rotation}));`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Finish up the lines.
|
||||
lines.push(footer);
|
||||
|
||||
// Write out the results to the console or a file.
|
||||
await write(argv, lines);
|
||||
}
|
||||
10
src/cmds/palette.mjs
Normal file
10
src/cmds/palette.mjs
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
import * as variablesCmd from "./palette/gpl.mjs";
|
||||
|
||||
export const command = "palette";
|
||||
export const desc = "Generate palette files";
|
||||
|
||||
export function builder(yargv) {
|
||||
yargv.command(variablesCmd).demand(2);
|
||||
}
|
||||
|
||||
export function handler(argv) {}
|
||||
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);
|
||||
}
|
||||
102
src/colors.css
102
src/colors.css
|
|
@ -1,102 +0,0 @@
|
|||
:root {
|
||||
--color-c0b0: lch(0 50 calc(var(--color-hue) + 0));
|
||||
--color-c0b1: lch(11 45 calc(var(--color-hue) + 0));
|
||||
--color-c0b2: lch(22 40 calc(var(--color-hue) + 0));
|
||||
--color-c0b3: lch(33 35 calc(var(--color-hue) + 0));
|
||||
--color-c0b4: lch(44 30 calc(var(--color-hue) + 0));
|
||||
--color-c0b5: lch(55 25 calc(var(--color-hue) + 0));
|
||||
--color-c0b6: lch(66 20 calc(var(--color-hue) + 0));
|
||||
--color-c0b7: lch(77 15 calc(var(--color-hue) + 0));
|
||||
--color-c0b8: lch(88 10 calc(var(--color-hue) + 0));
|
||||
--color-c0b9: lch(99 5 calc(var(--color-hue) + 0));
|
||||
--color-c1b0: lch(0 50 calc(var(--color-hue) + 36));
|
||||
--color-c1b1: lch(11 45 calc(var(--color-hue) + 36));
|
||||
--color-c1b2: lch(22 40 calc(var(--color-hue) + 36));
|
||||
--color-c1b3: lch(33 35 calc(var(--color-hue) + 36));
|
||||
--color-c1b4: lch(44 30 calc(var(--color-hue) + 36));
|
||||
--color-c1b5: lch(55 25 calc(var(--color-hue) + 36));
|
||||
--color-c1b6: lch(66 20 calc(var(--color-hue) + 36));
|
||||
--color-c1b7: lch(77 15 calc(var(--color-hue) + 36));
|
||||
--color-c1b8: lch(88 10 calc(var(--color-hue) + 36));
|
||||
--color-c1b9: lch(99 5 calc(var(--color-hue) + 36));
|
||||
--color-c2b0: lch(0 50 calc(var(--color-hue) + 72));
|
||||
--color-c2b1: lch(11 45 calc(var(--color-hue) + 72));
|
||||
--color-c2b2: lch(22 40 calc(var(--color-hue) + 72));
|
||||
--color-c2b3: lch(33 35 calc(var(--color-hue) + 72));
|
||||
--color-c2b4: lch(44 30 calc(var(--color-hue) + 72));
|
||||
--color-c2b5: lch(55 25 calc(var(--color-hue) + 72));
|
||||
--color-c2b6: lch(66 20 calc(var(--color-hue) + 72));
|
||||
--color-c2b7: lch(77 15 calc(var(--color-hue) + 72));
|
||||
--color-c2b8: lch(88 10 calc(var(--color-hue) + 72));
|
||||
--color-c2b9: lch(99 5 calc(var(--color-hue) + 72));
|
||||
--color-c3b0: lch(0 50 calc(var(--color-hue) + 108));
|
||||
--color-c3b1: lch(11 45 calc(var(--color-hue) + 108));
|
||||
--color-c3b2: lch(22 40 calc(var(--color-hue) + 108));
|
||||
--color-c3b3: lch(33 35 calc(var(--color-hue) + 108));
|
||||
--color-c3b4: lch(44 30 calc(var(--color-hue) + 108));
|
||||
--color-c3b5: lch(55 25 calc(var(--color-hue) + 108));
|
||||
--color-c3b6: lch(66 20 calc(var(--color-hue) + 108));
|
||||
--color-c3b7: lch(77 15 calc(var(--color-hue) + 108));
|
||||
--color-c3b8: lch(88 10 calc(var(--color-hue) + 108));
|
||||
--color-c3b9: lch(99 5 calc(var(--color-hue) + 108));
|
||||
--color-c4b0: lch(0 50 calc(var(--color-hue) + 144));
|
||||
--color-c4b1: lch(11 45 calc(var(--color-hue) + 144));
|
||||
--color-c4b2: lch(22 40 calc(var(--color-hue) + 144));
|
||||
--color-c4b3: lch(33 35 calc(var(--color-hue) + 144));
|
||||
--color-c4b4: lch(44 30 calc(var(--color-hue) + 144));
|
||||
--color-c4b5: lch(55 25 calc(var(--color-hue) + 144));
|
||||
--color-c4b6: lch(66 20 calc(var(--color-hue) + 144));
|
||||
--color-c4b7: lch(77 15 calc(var(--color-hue) + 144));
|
||||
--color-c4b8: lch(88 10 calc(var(--color-hue) + 144));
|
||||
--color-c4b9: lch(99 5 calc(var(--color-hue) + 144));
|
||||
--color-c5b0: lch(0 50 calc(var(--color-hue) + 180));
|
||||
--color-c5b1: lch(11 45 calc(var(--color-hue) + 180));
|
||||
--color-c5b2: lch(22 40 calc(var(--color-hue) + 180));
|
||||
--color-c5b3: lch(33 35 calc(var(--color-hue) + 180));
|
||||
--color-c5b4: lch(44 30 calc(var(--color-hue) + 180));
|
||||
--color-c5b5: lch(55 25 calc(var(--color-hue) + 180));
|
||||
--color-c5b6: lch(66 20 calc(var(--color-hue) + 180));
|
||||
--color-c5b7: lch(77 15 calc(var(--color-hue) + 180));
|
||||
--color-c5b8: lch(88 10 calc(var(--color-hue) + 180));
|
||||
--color-c5b9: lch(99 5 calc(var(--color-hue) + 180));
|
||||
--color-c6b0: lch(0 50 calc(var(--color-hue) + 216));
|
||||
--color-c6b1: lch(11 45 calc(var(--color-hue) + 216));
|
||||
--color-c6b2: lch(22 40 calc(var(--color-hue) + 216));
|
||||
--color-c6b3: lch(33 35 calc(var(--color-hue) + 216));
|
||||
--color-c6b4: lch(44 30 calc(var(--color-hue) + 216));
|
||||
--color-c6b5: lch(55 25 calc(var(--color-hue) + 216));
|
||||
--color-c6b6: lch(66 20 calc(var(--color-hue) + 216));
|
||||
--color-c6b7: lch(77 15 calc(var(--color-hue) + 216));
|
||||
--color-c6b8: lch(88 10 calc(var(--color-hue) + 216));
|
||||
--color-c6b9: lch(99 5 calc(var(--color-hue) + 216));
|
||||
--color-c7b0: lch(0 50 calc(var(--color-hue) + 252));
|
||||
--color-c7b1: lch(11 45 calc(var(--color-hue) + 252));
|
||||
--color-c7b2: lch(22 40 calc(var(--color-hue) + 252));
|
||||
--color-c7b3: lch(33 35 calc(var(--color-hue) + 252));
|
||||
--color-c7b4: lch(44 30 calc(var(--color-hue) + 252));
|
||||
--color-c7b5: lch(55 25 calc(var(--color-hue) + 252));
|
||||
--color-c7b6: lch(66 20 calc(var(--color-hue) + 252));
|
||||
--color-c7b7: lch(77 15 calc(var(--color-hue) + 252));
|
||||
--color-c7b8: lch(88 10 calc(var(--color-hue) + 252));
|
||||
--color-c7b9: lch(99 5 calc(var(--color-hue) + 252));
|
||||
--color-c8b0: lch(0 50 calc(var(--color-hue) + 288));
|
||||
--color-c8b1: lch(11 45 calc(var(--color-hue) + 288));
|
||||
--color-c8b2: lch(22 40 calc(var(--color-hue) + 288));
|
||||
--color-c8b3: lch(33 35 calc(var(--color-hue) + 288));
|
||||
--color-c8b4: lch(44 30 calc(var(--color-hue) + 288));
|
||||
--color-c8b5: lch(55 25 calc(var(--color-hue) + 288));
|
||||
--color-c8b6: lch(66 20 calc(var(--color-hue) + 288));
|
||||
--color-c8b7: lch(77 15 calc(var(--color-hue) + 288));
|
||||
--color-c8b8: lch(88 10 calc(var(--color-hue) + 288));
|
||||
--color-c8b9: lch(99 5 calc(var(--color-hue) + 288));
|
||||
--color-c9b0: lch(0 50 calc(var(--color-hue) + 324));
|
||||
--color-c9b1: lch(11 45 calc(var(--color-hue) + 324));
|
||||
--color-c9b2: lch(22 40 calc(var(--color-hue) + 324));
|
||||
--color-c9b3: lch(33 35 calc(var(--color-hue) + 324));
|
||||
--color-c9b4: lch(44 30 calc(var(--color-hue) + 324));
|
||||
--color-c9b5: lch(55 25 calc(var(--color-hue) + 324));
|
||||
--color-c9b6: lch(66 20 calc(var(--color-hue) + 324));
|
||||
--color-c9b7: lch(77 15 calc(var(--color-hue) + 324));
|
||||
--color-c9b8: lch(88 10 calc(var(--color-hue) + 324));
|
||||
--color-c9b9: lch(99 5 calc(var(--color-hue) + 324));
|
||||
}
|
||||
102
src/colors.mjs
Normal file
102
src/colors.mjs
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
import Color from "colorjs.io";
|
||||
|
||||
/**
|
||||
* Contains the color codes with zero (0) being the base hue.
|
||||
*
|
||||
* @type {number[]}
|
||||
*/
|
||||
export const colorList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
||||
|
||||
/**
|
||||
* Contains the standard brightness codes with zero (0) being the darkest and
|
||||
* nine (9) being the lightest.
|
||||
*
|
||||
* @type {number[]}
|
||||
*/
|
||||
export const brightnessList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
||||
|
||||
/**
|
||||
* Gets the degree rotation for the given color code.
|
||||
*
|
||||
* @param {number} color The color code, in the range of [0-9]
|
||||
*/
|
||||
export function getHueRotation(color) {
|
||||
return color * 36;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the hue for a given base hue and color.
|
||||
*
|
||||
* @param {number} base The base hue, in the range [0-360)
|
||||
* @param {number} color The color code, in the range of [0-9]
|
||||
*/
|
||||
export function getHue(base, color) {
|
||||
return (base + getHueRotation(color)) % 360;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the lighteness for a given brightness.
|
||||
*
|
||||
* @param {number} brightness The brightenss, in the range of [0-9]
|
||||
*/
|
||||
export function getLightness(brightness) {
|
||||
return 5 + brightness * 10;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the saturation for a given brightness.
|
||||
*
|
||||
* @param {number} brightness The brightenss, in the range of [0-9]
|
||||
*/
|
||||
export function getChroma(brightness) {
|
||||
return 50 - brightness * 5;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the LCH string
|
||||
*
|
||||
* @param {number} base The base hue, in the range [0-360)
|
||||
* @param {number} color The color code, in the range of [0-9]
|
||||
* @param {number} brightness The brightenss, in the range of [0-9]
|
||||
*/
|
||||
export function getLchCss(base, color, brightness) {
|
||||
const l = getLightness(brightness);
|
||||
const c = getChroma(brightness);
|
||||
const h = getHue(base, color);
|
||||
|
||||
return `lch(${l}% ${c} ${h})`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the RGB values as a string hex of a hash plus 6 numbers.
|
||||
*
|
||||
* @param {number} base The base hue, in the range [0-360)
|
||||
* @param {number} color The color code, in the range of [0-9]
|
||||
* @param {number} brightness The brightenss, in the range of [0-9]
|
||||
*/
|
||||
export function getRgbHex(base, color, brightness) {
|
||||
const lch = getLchCss(base, color, brightness);
|
||||
const lchColor = new Color(lch);
|
||||
const hex = lchColor
|
||||
.to("srgb")
|
||||
.toString({ format: "hex", inGamut: true })
|
||||
.replace(/^#(\d)(\d)(\d)$/, "#$1$1$2$2$3$3");
|
||||
|
||||
return hex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the RGB values as an array of three numbers.
|
||||
*
|
||||
* @param {number} base The base hue, in the range [0-360)
|
||||
* @param {number} color The color code, in the range of [0-9]
|
||||
* @param {number} brightness The brightenss, in the range of [0-9]
|
||||
*/
|
||||
export function getRgbArray(base, color, brightness) {
|
||||
const hex = getRgbHex(base, color, brightness);
|
||||
const r = parseInt(hex.substring(1, 3), "16");
|
||||
const g = parseInt(hex.substring(3, 5), "16");
|
||||
const b = parseInt(hex.substring(5, 7), "16");
|
||||
|
||||
return [r, g, b];
|
||||
}
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
import { mkdirp } from "mkdirp";
|
||||
import { fileURLToPath } from "url";
|
||||
import path from "path";
|
||||
import fs from "node:fs/promises";
|
||||
|
||||
// Figure out where we need to write the files.
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
||||
const distPath = __dirname + "/..";
|
||||
|
||||
console.log("writing", distPath);
|
||||
|
||||
await mkdirp(distPath);
|
||||
|
||||
// Start with the basic CSS header.
|
||||
let lines = [":root {"];
|
||||
|
||||
// We have ten colors, with 0 being the base hue and the others being evenly
|
||||
// rotated around the color wheel.
|
||||
for (let color = 0; color < 10; color++) {
|
||||
// Figure out the rotation.
|
||||
const rotation = color * 36; // 1/10th of a circle
|
||||
|
||||
// For each hue, we have ten levels of brightness ranging from very dark
|
||||
// to very light.
|
||||
for (let brightness = 0; brightness < 10; brightness++) {
|
||||
// We use a standard code (--color-cXbY) for our codes.
|
||||
const code = `--color-priduck-c${color}b${brightness}`;
|
||||
|
||||
// Figure out the ramps we are using for brighteness.
|
||||
const l = brightness * 11;
|
||||
const s = 50 - brightness * 5;
|
||||
|
||||
// Write out the CSS.
|
||||
lines.push(
|
||||
` ${code}: lch(${l.toFixed(1)} ${s.toFixed(
|
||||
1,
|
||||
)} calc(var(--color-priduck-hue) + ${rotation}));`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Finish up the lines.
|
||||
lines.push("}");
|
||||
|
||||
// Write out the files.
|
||||
const colorsPath = path.join(distPath, "colors.css");
|
||||
|
||||
await fs.writeFile(colorsPath, Buffer.from(lines.join("\n")));
|
||||
|
||||
console.log("wrote", colorsPath);
|
||||
39
src/output.mjs
Normal file
39
src/output.mjs
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import { mkdirp } from "mkdirp";
|
||||
import path from "path";
|
||||
import fs from "node:fs/promises";
|
||||
import debug from "debug";
|
||||
|
||||
/** @type {object} */
|
||||
const log = debug("output");
|
||||
|
||||
/**
|
||||
* Writes the output to either the console if there is no output or it is
|
||||
* set to "-", otherwise write it out as a file.
|
||||
*
|
||||
* @param {{output: string | undefined }} argv
|
||||
* @param {string | string[]} 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).trim();
|
||||
|
||||
if (!argv.output || argv.output === "-") {
|
||||
console.log(text);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
// Otherwise, we are writing a file, so we need to make sure the directory
|
||||
// exists.
|
||||
const file = argv.output;
|
||||
const dir = path.dirname(file);
|
||||
|
||||
log("writing", file);
|
||||
|
||||
await mkdirp(dir);
|
||||
|
||||
// Now, write out the file.
|
||||
await fs.writeFile(file, Buffer.from(text));
|
||||
|
||||
log("wrote", file);
|
||||
}
|
||||
Loading…
Reference in a new issue