@thi.ng/color 5.6.2 → 5.6.4

package/strategies.js

@@ -2,121 +2,51 @@ import { clamp, clamp01 } from "@thi.ng/math/interval";
 import { lch } from "./lch/lch.js";
 import { rotate } from "./rotate.js";
 const $ = (src, l = 0, c = 0) => {
-    src.l = clamp01(src.l + l);
-    src.c = clamp(src.c + c, 0, 1.312);
-    return src;
+  src.l = clamp01(src.l + l);
+  src.c = clamp(src.c + c, 0, 1.312);
+  return src;
 };
-/**
- * Returns array of `src` color and its complementary color, possibly adjusted
- * via optional `deltaL` and `deltaC` args (offsets for L & C channels).
- *
- * @param src -
- * @param deltaL -
- * @param deltaC -
- */
-export const complementaryStrategy = (src, deltaL, deltaC) => [src, $(rotate(lch(), src, 0.5), deltaL, deltaC)];
-/**
- * Returns array of `src` color and 2 neighboring colors, each ±rotated by
- * normalized `theta` and possibly adjusted via optional `deltaL` and `deltaC`
- * args (offsets for L & C channels).
- *
- * @param src -
- * @param theta -
- * @param deltaL -
- * @param deltaC -
- */
-export const analogStrategy = (src, theta = 1 / 12, deltaL, deltaC) => [
-    src,
-    $(rotate(lch(), src, -theta), deltaL, deltaC),
-    $(rotate(lch(), src, theta), deltaL, deltaC),
+const complementaryStrategy = (src, deltaL, deltaC) => [src, $(rotate(lch(), src, 0.5), deltaL, deltaC)];
+const analogStrategy = (src, theta = 1 / 12, deltaL, deltaC) => [
+  src,
+  $(rotate(lch(), src, -theta), deltaL, deltaC),
+  $(rotate(lch(), src, theta), deltaL, deltaC)
 ];
-/**
- * Similar to {@link splitComplementaryStrategy}. Returns array of `src` color,
- * its complementary color and 2 of that colors' neighbors, each ±rotated by
- * normalized `theta` and possibly adjusted via optional `deltaL` and `deltaC`
- * args (offsets for L & C channels).
- *
- * @param src -
- * @param theta -
- * @param deltaL -
- * @param deltaC -
- */
-export const splitAnalogStrategy = (src, theta = 1 / 12, deltaL, deltaC) => [
-    ...splitComplementaryStrategy(src, theta, deltaL, deltaC),
-    $(rotate(lch(), src, theta), deltaL, deltaC),
+const splitAnalogStrategy = (src, theta = 1 / 12, deltaL, deltaC) => [
+  ...splitComplementaryStrategy(src, theta, deltaL, deltaC),
+  $(rotate(lch(), src, theta), deltaL, deltaC)
 ];
-/**
- * Similar to {@link splitAnalogStrategy}. Returns array of `src` color and 2
- * neighbors of its complementary color, each ±rotated by normalized `theta`
- * (from the complementary hue) and possibly adjusted via optional `deltaL` and
- * `deltaC` args (offsets for L & C channels).
- *
- * @param src -
- * @param theta -
- * @param deltaL -
- * @param deltaC -
- */
-export const splitComplementaryStrategy = (src, theta = 1 / 12, deltaL, deltaC) => [
-    src,
-    $(rotate(lch(), src, 0.5 - theta), deltaL, deltaC),
-    $(rotate(lch(), src, 0.5 + theta), deltaL, deltaC),
+const splitComplementaryStrategy = (src, theta = 1 / 12, deltaL, deltaC) => [
+  src,
+  $(rotate(lch(), src, 0.5 - theta), deltaL, deltaC),
+  $(rotate(lch(), src, 0.5 + theta), deltaL, deltaC)
 ];
-/**
- * Returns array of 5 colors all sharing same hue and chromacity of given `src`
- * color, but with these luminance settings: 0.0, 0.25, 0.5, 0.75, 1.0. Chroma
- * can be adjusted via optional `deltaC` offset.
- *
- * @param src -
- * @param deltaC -
- */
-export const monochromeStrategy = (src, deltaC = 0) => {
-    let [_, c, h, a] = src;
-    c = clamp(c + deltaC, 0, 1.312);
-    return [
-        lch(0.0, c, h, a),
-        lch(0.25, c, h, a),
-        lch(0.5, c, h, a),
-        lch(0.75, c, h, a),
-        lch(1, c, h, a),
-    ];
+const monochromeStrategy = (src, deltaC = 0) => {
+  let [_, c, h, a] = src;
+  c = clamp(c + deltaC, 0, 1.312);
+  return [
+    lch(0, c, h, a),
+    lch(0.25, c, h, a),
+    lch(0.5, c, h, a),
+    lch(0.75, c, h, a),
+    lch(1, c, h, a)
+  ];
 };
-/**
- * Version of {@link splitComplementaryStrategy} with an hardcoded `theta` of
- * 1/6 to produce 3 colors with hues uniformly distributed on the color wheel
- * (possibly adjusted via optional `deltaL` and `deltaC` args, aka offsets for L
- * & C channels).
- *
- * @param src -
- * @param deltaL -
- * @param deltaC -
- */
-export const triadicStrategy = (src, deltaL, deltaC) => splitComplementaryStrategy(src, 1 / 6, deltaL, deltaC);
-/**
- * Returns array of `src` color and 3 other colors whose hues form a rectangle,
- * using `theta` to define the angular separation. The hues are at: `src`,
- * `src+theta`, `src+1/2` (complementary) and `src+1/2+theta`. Colors are
- * possibly adjusted via optional `deltaL` and `deltaC` args (offsets for L & C
- * channels).
- *
- * @param src -
- * @param theta -
- * @param deltaL -
- * @param deltaC -
- */
-export const tetradicStrategy = (src, theta = 1 / 12, deltaL, deltaC) => [
-    src,
-    $(rotate(lch(), src, theta), deltaL, deltaC),
-    $(rotate(lch(), src, 0.5), deltaL, deltaC),
-    $(rotate(lch(), src, 0.5 + theta), deltaL, deltaC),
+const triadicStrategy = (src, deltaL, deltaC) => splitComplementaryStrategy(src, 1 / 6, deltaL, deltaC);
+const tetradicStrategy = (src, theta = 1 / 12, deltaL, deltaC) => [
+  src,
+  $(rotate(lch(), src, theta), deltaL, deltaC),
+  $(rotate(lch(), src, 0.5), deltaL, deltaC),
+  $(rotate(lch(), src, 0.5 + theta), deltaL, deltaC)
 ];
-/**
- * Version of {@link tetradicStrategy} with an hardcoded `theta` of 1/4 to
- * produce 4 colors with hues uniformly distributed on the color wheel (possibly
- * adjusted via optional `deltaL` and `deltaC` args, aka offsets for L & C
- * channels).
- *
- * @param src -
- * @param deltaL -
- * @param deltaC -
- */
-export const squareStrategy = (src, deltaL, deltaC) => tetradicStrategy(src, 0.25, deltaL, deltaC);
+const squareStrategy = (src, deltaL, deltaC) => tetradicStrategy(src, 0.25, deltaL, deltaC);
+export {
+  analogStrategy,
+  complementaryStrategy,
+  monochromeStrategy,
+  splitAnalogStrategy,
+  splitComplementaryStrategy,
+  squareStrategy,
+  tetradicStrategy,
+  triadicStrategy
+};

package/swatches.js

@@ -1,5 +1,28 @@
-export const swatches = (cols, shapeFn, attribs = {}) => ["g", attribs, ...cols.map(shapeFn)];
-export const swatchesH = (cols, w = 5, h = 50, gap = 0, attribs) => swatches(cols, (fill, i) => ["rect", { fill }, [i * (w + gap), 0], w, h], attribs);
-export const dotsH = (cols, r = 25, gap = 0, attribs) => swatches(cols, (fill, i) => ["circle", { fill }, [i * (r * 2 + gap), 0], r], attribs);
-export const swatchesV = (cols, w = 50, h = 5, gap = 0, attribs = {}) => swatches(cols, (fill, i) => ["rect", { fill }, [0, i * (h + gap)], w, h], attribs);
-export const dotsV = (cols, r = 25, gap = 0, attribs) => swatches(cols, (fill, i) => ["circle", { fill }, [0, i * (r * 2 + gap)], r], attribs);
+const swatches = (cols, shapeFn, attribs = {}) => ["g", attribs, ...cols.map(shapeFn)];
+const swatchesH = (cols, w = 5, h = 50, gap = 0, attribs) => swatches(
+  cols,
+  (fill, i) => ["rect", { fill }, [i * (w + gap), 0], w, h],
+  attribs
+);
+const dotsH = (cols, r = 25, gap = 0, attribs) => swatches(
+  cols,
+  (fill, i) => ["circle", { fill }, [i * (r * 2 + gap), 0], r],
+  attribs
+);
+const swatchesV = (cols, w = 50, h = 5, gap = 0, attribs = {}) => swatches(
+  cols,
+  (fill, i) => ["rect", { fill }, [0, i * (h + gap)], w, h],
+  attribs
+);
+const dotsV = (cols, r = 25, gap = 0, attribs) => swatches(
+  cols,
+  (fill, i) => ["circle", { fill }, [0, i * (r * 2 + gap)], r],
+  attribs
+);
+export {
+  dotsH,
+  dotsV,
+  swatches,
+  swatchesH,
+  swatchesV
+};

package/tint.js

@@ -3,56 +3,30 @@ import { mix } from "@thi.ng/math/mix";
 import { setC4 } from "@thi.ng/vectors";
 import { __dispatch1 } from "./internal/dispatch.js";
 import { __ensureAlpha } from "./internal/ensure.js";
-/**
- * Creates a tinted version of given `src` color and writes result into `out`.
- * The color is interpolated towards given `target` grayscale level (default: 1
- * aka white).
- *
- * @remarks
- * Reference: https://www.handprint.com/HP/WCL/color3.html#stt
- *
- * If `out` is null, the resulting color will be written back into `src`.
- *
- * Only supported for the following color modes:
- *
- * - hcy
- * - hsi
- * - hsv
- * - lch
- * - oklch
- *
- * @param out
- * @param src
- * @param amount
- * @param target
- */
-export const tint = defmulti(__dispatch1, { hcy: "hsv", hsi: "hsv", hsl: "hsv", oklch: "lch" }, {
-    hsv: (out, src, n, l = 1) => setC4(out || src, src[0], src[1] * (1 - n), mix(src[2], l, n), __ensureAlpha(src[3])),
-    lch: (out, src, n, l = 1) => setC4(out || src, mix(src[0], l, n), src[1] * (1 - n), src[2], __ensureAlpha(src[3])),
-});
-/**
- * Version of {@link tint} with medium gray as target.
- *
- * @remarks
- * Reference: https://www.handprint.com/HP/WCL/color3.html#stt
- *
- * If `out` is null, the resulting color will be written back into `src`.
- *
- * @param out
- * @param src
- * @param n
- */
-export const tone = (out, src, n) => tint(out, src, n, 0.5);
-/**
- * Version of {@link tint} with black as target.
- *
- * @remarks
- * Reference: https://www.handprint.com/HP/WCL/color3.html#stt
- *
- * If `out` is null, the resulting color will be written back into `src`.
- *
- * @param out
- * @param src
- * @param n
- */
-export const shade = (out, src, n) => tint(out, src, n, 0);
+const tint = defmulti(
+  __dispatch1,
+  { hcy: "hsv", hsi: "hsv", hsl: "hsv", oklch: "lch" },
+  {
+    hsv: (out, src, n, l = 1) => setC4(
+      out || src,
+      src[0],
+      src[1] * (1 - n),
+      mix(src[2], l, n),
+      __ensureAlpha(src[3])
+    ),
+    lch: (out, src, n, l = 1) => setC4(
+      out || src,
+      mix(src[0], l, n),
+      src[1] * (1 - n),
+      src[2],
+      __ensureAlpha(src[3])
+    )
+  }
+);
+const tone = (out, src, n) => tint(out, src, n, 0.5);
+const shade = (out, src, n) => tint(out, src, n, 0);
+export {
+  shade,
+  tint,
+  tone
+};