@thi.ng/color 5.7.62 → 5.8.0

package/README.md

@@ -21,6 +21,14 @@ For the Clojure version, please visit: [thi.ng/color-clj](https://thi.ng/color-c
     - [Color creation / conversion](#color-creation--conversion)
   - [Storage & memory mapping](#storage--memory-mapping)
   - [Color theme generation](#color-theme-generation)
+  - [Color theme strategies](#color-theme-strategies)
+    - [Analog colors](#analog-colors)
+    - [Split-analog colors](#split-analog-colors)
+    - [Complementary colors](#complementary-colors)
+    - [Split-complementary colors](#split-complementary-colors)
+    - [Monochrome colors](#monochrome-colors)
+    - [Triadic colors](#triadic-colors)
+    - [Tetradic colors](#tetradic-colors)
   - [Color sorting & distance](#color-sorting--distance)
     - [Sorting memory-mapped colors](#sorting-memory-mapped-colors)
   - [Gradients](#gradients)
@@ -372,6 +380,87 @@ writeFileSync("swatches-ex01.svg", serialize(doc));
 
 ![example result color swatches](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/color/swatches-ex01.svg)
 
+### Color theme strategies
+
+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:
+
+#### Analog colors
+
+[Documentation](https://docs.thi.ng/umbrella/color/functions/analogStrategy.html)
+
+```ts tangle:export/analog-strategy.ts
+import { analogStrategy, cssColors } from "@thi.ng/color";
+
+console.log(cssColors(analogStrategy("#f90")));
+//
+```
+
+#### Split-analog colors
+
+[Documentation](https://docs.thi.ng/umbrella/color/functions/splitAnalogStrategy.html)
+
+```ts tangle:export/split-analog-strategy.ts
+import { splitAnalogStrategy, cssColors } from "@thi.ng/color";
+
+console.log(cssColors(splitAnalogStrategy("#f90")));
+//
+```
+
+#### Complementary colors
+
+[Documentation](https://docs.thi.ng/umbrella/color/functions/complementaryStrategy.html)
+
+```ts tangle:export/complementary-strategy.ts
+import { complementaryStrategy, cssColors } from "@thi.ng/color";
+
+console.log(cssColors(complementaryStrategy("#f90")));
+//
+```
+
+#### Split-complementary colors
+
+[Documentation](https://docs.thi.ng/umbrella/color/functions/splitComplementaryStrategy.html)
+
+```ts tangle:export/split-complementary-strategy.ts
+import { splitComplementaryStrategy, cssColors } from "@thi.ng/color";
+
+console.log(cssColors(splitComplementaryStrategy("#f90")));
+//
+```
+
+#### Monochrome colors
+
+[Documentation](https://docs.thi.ng/umbrella/color/functions/monochromeStrategy.html)
+
+```ts tangle:export/monochrome-strategy.ts
+import { monochromeStrategy, cssColors } from "@thi.ng/color";
+
+console.log(cssColors(monochromeStrategy("#f90")));
+//
+```
+
+#### Triadic colors
+
+[Documentation](https://docs.thi.ng/umbrella/color/functions/triadicStrategy.html)
+
+```ts tangle:export/triadic-strategy.ts
+import { triadicStrategy, cssColors } from "@thi.ng/color";
+
+console.log(cssColors(triadicStrategy("#f90")));
+//
+```
+
+#### Tetradic colors
+
+[Documentation](https://docs.thi.ng/umbrella/color/functions/tetradicStrategy.html)
+
+```ts tangle:export/tetradic-strategy.ts
+import { tetradicStrategy, cssColors } from "@thi.ng/color";
+
+console.log(cssColors(tetradicStrategy("#f90")));
+//
+```
+
 ### Color sorting & distance
 
 The package provides several functions to compute full or channel-wise distances
@@ -693,7 +782,7 @@ For Node.js REPL:
 const color = await import("@thi.ng/color");
 ```
 
-Package sizes (brotli'd, pre-treeshake): ESM: 15.84 KB
+Package sizes (brotli'd, pre-treeshake): ESM: 15.80 KB
 
 ## Dependencies
 

package/css/css.d.ts

@@ -55,4 +55,12 @@ export declare const setDefaultCSSConversions: (fns: CSSConversions) => Partial<
  * @param cssTarget - CSS conversions
  */
 export declare const css: (src: Exclude<MaybeColor, IParsedColor>, cssTarget?: CSSConversions) => string;
+/**
+ * Convenience helper to convert an iterable of colors into an array of CSS
+ * strings (using {@link css}).
+ *
+ * @param colors
+ * @param cssTarget
+ */
+export declare const cssColors: (colors: Iterable<Exclude<MaybeColor, IParsedColor>>, cssTarget?: CSSConversions) => string[];
 //# sourceMappingURL=css.d.ts.map

package/css/css.js

@@ -1,3 +1,4 @@
+import { ensureArray } from "@thi.ng/arrays/ensure-array";
 import { isNumber } from "@thi.ng/checks/is-number";
 import { isString } from "@thi.ng/checks/is-string";
 import { convert } from "../convert.js";
@@ -42,9 +43,11 @@ const css = (src, cssTarget = CSS_DEFAULT) => {
     convert([], src, "rgb", src.mode)
   ) : srgbCss(src);
 };
+const cssColors = (colors, cssTarget = CSS_DEFAULT) => ensureArray(colors).map((x) => css(x, cssTarget));
 export {
   CSS_LEVEL3,
   CSS_LEVEL4,
   css,
+  cssColors,
   setDefaultCSSConversions
 };