@thi.ng/color 5.8.0 → 5.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +34 -16
  2. package/package.json +6 -6
  3. package/strategies.js +1 -1
package/README.md CHANGED
@@ -382,7 +382,11 @@ writeFileSync("swatches-ex01.svg", serialize(doc));
382
382
 
383
383
  ### Color theme strategies
384
384
 
385
- In addition to the above approaches to create color themes, the package also provides these more standard strategies to derive a color theme from a given base color:
385
+ In addition to the above approaches to create color themes, the package also
386
+ provides these more standard strategies to derive a color theme from a given
387
+ base color (all configurable, examples shown here only use default params).
388
+ These functions accept colors in any format, but computation and results are
389
+ always in LCH.
386
390
 
387
391
  #### Analog colors
388
392
 
@@ -391,10 +395,12 @@ In addition to the above approaches to create color themes, the package also pro
391
395
  ```ts tangle:export/analog-strategy.ts
392
396
  import { analogStrategy, cssColors } from "@thi.ng/color";
393
397
 
394
- console.log(cssColors(analogStrategy("#f90")));
395
- //
398
+ console.log(cssColors(analogStrategy("#f60")));
399
+ // [ "#ff6600", "#ff2c63", "#c58f00" ]
396
400
  ```
397
401
 
402
+ ![color swatches](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/color/analog-strategy.svg)
403
+
398
404
  #### Split-analog colors
399
405
 
400
406
  [Documentation](https://docs.thi.ng/umbrella/color/functions/splitAnalogStrategy.html)
@@ -402,10 +408,12 @@ console.log(cssColors(analogStrategy("#f90")));
402
408
  ```ts tangle:export/split-analog-strategy.ts
403
409
  import { splitAnalogStrategy, cssColors } from "@thi.ng/color";
404
410
 
405
- console.log(cssColors(splitAnalogStrategy("#f90")));
406
- //
411
+ console.log(cssColors(splitAnalogStrategy("#f60")));
412
+ // [ "#ff6600", "#00bcd4", "#00a6ff", "#c58f00" ]
407
413
  ```
408
414
 
415
+ ![color swatches](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/color/split-analog-strategy.svg)
416
+
409
417
  #### Complementary colors
410
418
 
411
419
  [Documentation](https://docs.thi.ng/umbrella/color/functions/complementaryStrategy.html)
@@ -413,10 +421,12 @@ console.log(cssColors(splitAnalogStrategy("#f90")));
413
421
  ```ts tangle:export/complementary-strategy.ts
414
422
  import { complementaryStrategy, cssColors } from "@thi.ng/color";
415
423
 
416
- console.log(cssColors(complementaryStrategy("#f90")));
417
- //
424
+ console.log(cssColors(complementaryStrategy("#f60")));
425
+ // [ "#ff6600", "#00b6ff" ]
418
426
  ```
419
427
 
428
+ ![color swatches](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/color/complementary-strategy.svg)
429
+
420
430
  #### Split-complementary colors
421
431
 
422
432
  [Documentation](https://docs.thi.ng/umbrella/color/functions/splitComplementaryStrategy.html)
@@ -424,10 +434,12 @@ console.log(cssColors(complementaryStrategy("#f90")));
424
434
  ```ts tangle:export/split-complementary-strategy.ts
425
435
  import { splitComplementaryStrategy, cssColors } from "@thi.ng/color";
426
436
 
427
- console.log(cssColors(splitComplementaryStrategy("#f90")));
428
- //
437
+ console.log(cssColors(splitComplementaryStrategy("#f60")));
438
+ // [ "#ff6600", "#00bcd4", "#00a6ff" ]
429
439
  ```
430
440
 
441
+ ![color swatches](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/color/split-complementary-strategy.svg)
442
+
431
443
  #### Monochrome colors
432
444
 
433
445
  [Documentation](https://docs.thi.ng/umbrella/color/functions/monochromeStrategy.html)
@@ -435,10 +447,12 @@ console.log(cssColors(splitComplementaryStrategy("#f90")));
435
447
  ```ts tangle:export/monochrome-strategy.ts
436
448
  import { monochromeStrategy, cssColors } from "@thi.ng/color";
437
449
 
438
- console.log(cssColors(monochromeStrategy("#f90")));
439
- //
450
+ console.log(cssColors(monochromeStrategy("#f60")));
451
+ // [ "#490000", "#880000", "#d44100", "#ff872d", "#ffce71" ]
440
452
  ```
441
453
 
454
+ ![color swatches](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/color/monochrome-strategy.svg)
455
+
442
456
  #### Triadic colors
443
457
 
444
458
  [Documentation](https://docs.thi.ng/umbrella/color/functions/triadicStrategy.html)
@@ -446,10 +460,12 @@ console.log(cssColors(monochromeStrategy("#f90")));
446
460
  ```ts tangle:export/triadic-strategy.ts
447
461
  import { triadicStrategy, cssColors } from "@thi.ng/color";
448
462
 
449
- console.log(cssColors(triadicStrategy("#f90")));
450
- //
463
+ console.log(cssColors(triadicStrategy("#f60")));
464
+ // [ "#ff6600", "#00bb7e", "#7f88ff" ]
451
465
  ```
452
466
 
467
+ ![color swatches](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/color/triadic-strategy.svg)
468
+
453
469
  #### Tetradic colors
454
470
 
455
471
  [Documentation](https://docs.thi.ng/umbrella/color/functions/tetradicStrategy.html)
@@ -457,10 +473,12 @@ console.log(cssColors(triadicStrategy("#f90")));
457
473
  ```ts tangle:export/tetradic-strategy.ts
458
474
  import { tetradicStrategy, cssColors } from "@thi.ng/color";
459
475
 
460
- console.log(cssColors(tetradicStrategy("#f90")));
461
- //
476
+ console.log(cssColors(tetradicStrategy("#f60")));
477
+ // [ "#ff6600", "#75a800", "#00b6ff", "#7f88ff" ]
462
478
  ```
463
479
 
480
+ ![color swatches](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/color/tetradic-strategy.svg)
481
+
464
482
  ### Color sorting & distance
465
483
 
466
484
  The package provides several functions to compute full or channel-wise distances
@@ -782,7 +800,7 @@ For Node.js REPL:
782
800
  const color = await import("@thi.ng/color");
783
801
  ```
784
802
 
785
- Package sizes (brotli'd, pre-treeshake): ESM: 15.80 KB
803
+ Package sizes (brotli'd, pre-treeshake): ESM: 15.84 KB
786
804
 
787
805
  ## Dependencies
788
806
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thi.ng/color",
3
- "version": "5.8.0",
3
+ "version": "5.8.2",
4
4
  "description": "Array-based color types, CSS parsing, conversions, transformations, declarative theme generation, gradients, presets",
5
5
  "type": "module",
6
6
  "module": "./index.js",
@@ -44,7 +44,7 @@
44
44
  },
45
45
  "dependencies": {
46
46
  "@thi.ng/api": "^8.12.7",
47
- "@thi.ng/arrays": "^2.13.16",
47
+ "@thi.ng/arrays": "^2.14.0",
48
48
  "@thi.ng/binary": "^3.4.65",
49
49
  "@thi.ng/checks": "^3.7.23",
50
50
  "@thi.ng/compare": "^2.4.33",
@@ -53,9 +53,9 @@
53
53
  "@thi.ng/errors": "^2.5.47",
54
54
  "@thi.ng/math": "^5.13.4",
55
55
  "@thi.ng/random": "^4.1.32",
56
- "@thi.ng/strings": "^3.9.27",
57
- "@thi.ng/transducers": "^9.6.15",
58
- "@thi.ng/vectors": "^8.6.11"
56
+ "@thi.ng/strings": "^3.9.28",
57
+ "@thi.ng/transducers": "^9.6.16",
58
+ "@thi.ng/vectors": "^8.6.12"
59
59
  },
60
60
  "devDependencies": {
61
61
  "esbuild": "^0.25.11",
@@ -446,5 +446,5 @@
446
446
  "vectors"
447
447
  ]
448
448
  },
449
- "gitHead": "d977f819bcafdcb2b24c45f8d01a167fe29fc85a\n"
449
+ "gitHead": "74b6f319d8f52c9266d97f616be5298a6a5b96e4\n"
450
450
  }
package/strategies.js CHANGED
@@ -44,7 +44,7 @@ const monochromeStrategy = (src, deltaC = 0) => {
44
44
  ];
45
45
  };
46
46
  const triadicStrategy = (src, deltaL, deltaC) => splitComplementaryStrategy(src, 1 / 6, deltaL, deltaC);
47
- const tetradicStrategy = (src, theta = 1 / 12, deltaL, deltaC) => {
47
+ const tetradicStrategy = (src, theta = 1 / 6, deltaL, deltaC) => {
48
48
  const $src = lch(src);
49
49
  return [
50
50
  $src,