v2.4

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 2.4.0
+
+- New plugin: Color harmonies generator ❤️ [@EricRovell](https://github.com/EricRovell)
+
 ### 2.3.0
 
 - Add new `isEqual` method ❤️ [@EricRovell](https://github.com/EricRovell)

README.md

@@ -502,29 +502,25 @@ colord("#008080").mix("#808000", 0.35).toHex(); // "#50805d"
 </details>
 
 <details>
-  <summary><code>.harmonies(type = "complimentary")</code></b> (<b>harmonies</b> plugin)</summary>
+  <summary><b><code>.harmonies(type = "complementary")</code></b> (<b>harmonies</b> plugin)</summary>
 
-Provides functionatity to generate [harmony colors](https://en.wikipedia.org/wiki/Harmony_(color)).
+Provides functionality to generate [harmony colors](<https://en.wikipedia.org/wiki/Harmony_(color)>). Returns an array of `Colord` instances.
 
 ```js
 import { colord, extends } from "colord";
-import { harmonies } from "colord/plugins/harmonies";
+import harmoniesPlugin from "colord/plugins/harmonies";
 
-const color = colord("FF0000");
+extend([harmoniesPlugin]);
 
-color.harmonies("analogous")
-  .map(color => color.toHex()); // [ "#FF0080", "#FF0000", "#FF8000"]
-color.harmonies("complimentary")
-  .map(color => color.toHex()); // [ "#FF0000", "#00FFFF" ]
-color.harmonies("rectangle")
-  .map(color => color.toHex()); // [ "#FF0000", "#FFFF00", "#00FFFF", "#0000FF" ]
-color.harmonies("tetradic")
-  .map(color => color.toHex()); // [ "#FF0000", "#80FF00", "#00FFFF", "#8000FF" ]
-color.harmonies("triadic"  )
-  .map(color => color.toHex()); // [ "#FF0000", "#00FF00", "#0000FF" ]
-color.harmonies("split-complimentary")
-  .map(color => color.toHex()); // [ "#FF0000", "#00FF80", "#0080FF" ]
+const color = colord("#ff0000");
+color.harmonies("analogous").map((c) => c.toHex()); // ["#ff0080", "#ff0000", "#ff8000"]
+color.harmonies("complementary").map((c) => c.toHex()); // ["#ff0000", "#00ffff"]
+color.harmonies("rectangle").map((c) => c.toHex()); // ["#ff0000", "#ffff00", "#00ffff", "#0000ff"]
+color.harmonies("split-complementary").map((c) => c.toHex()); // ["#ff0000", "#00ff80", "#0080ff"]
+color.harmonies("tetradic").map((c) => c.toHex()); // ["#ff0000", "#80ff00", "#00ffff", "#8000ff"]
+color.harmonies("triadic").map((c) => c.toHex()); // ["#ff0000", "#00ff00", "#0000ff"]
 ```
+
 </details>
 
 ### Color analysis
@@ -731,6 +727,28 @@ colord("device-cmyk(0% 61% 72% 0% / 50%)").toHex(); // "#ff634780"
 
 </details>
 
+<details>
+  <summary><b><code>harmonies</code> (Color harmonies)</b> <i>0.15 KB</i></summary>
+
+Provides functionality to generate [harmony colors](<https://en.wikipedia.org/wiki/Harmony_(color)>).
+
+```js
+import { colord, extends } from "colord";
+import harmonies from "colord/plugins/harmonies";
+
+extend([harmonies]);
+
+const color = colord("#ff0000");
+color.harmonies("analogous").map((c) => c.toHex()); // ["#ff0080", "#ff0000", "#ff8000"]
+color.harmonies("complementary").map((c) => c.toHex()); // ["#ff0000", "#00ffff"]
+color.harmonies("rectangle").map((c) => c.toHex()); // ["#ff0000", "#ffff00", "#00ffff", "#0000ff"]
+color.harmonies("split-complementary").map((c) => c.toHex()); // ["#ff0000", "#00ff80", "#0080ff"]
+color.harmonies("tetradic").map((c) => c.toHex()); // ["#ff0000", "#80ff00", "#00ffff", "#8000ff"]
+color.harmonies("triadic").map((c) => c.toHex()); // ["#ff0000", "#00ff00", "#0000ff"]
+```
+
+</details>
+
 <details>
   <summary><b><code>hwb</code> (HWB color model)</b> <i>0.8 KB</i></summary>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "colord",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "👑 A tiny yet powerful tool for high-performance color manipulations and conversions",
   "keywords": [
     "color",
@@ -20,7 +20,7 @@
     "a11y",
     "cmyk",
     "mix",
-    "harmony colors"
+    "harmonies"
   ],
   "repository": "omgovich/colord",
   "author": "Vlad Shilov <[email protected]>",

src/plugins/harmonies.ts

@@ -1,19 +1,19 @@
 import { Plugin } from "../extend";
 
-export type Harmony =
+export type HarmonyType =
   | "analogous"
-  | "complimentary"
+  | "complementary"
   | "rectangle"
+  | "split-complementary"
   | "tetradic"
-  | "triadic"
-  | "split-complimentary";
+  | "triadic";
 
 declare module "../colord" {
   interface Colord {
     /**
      * Returns an array of harmony colors as `Colord` instances.
      */
-    harmonies(type: Harmony): Colord[];
+    harmonies(type?: HarmonyType): Colord[];
   }
 }
 
@@ -25,16 +25,16 @@ const harmoniesPlugin: Plugin = (ColordClass): void => {
   /**
    * Harmony colors are colors with particular hue shift of the original color.
    */
-  const hueShifts: Record<Harmony, number[]> = {
+  const hueShifts: Record<HarmonyType, number[]> = {
     analogous: [-30, 0, 30],
-    complimentary: [0, 180],
+    complementary: [0, 180],
     rectangle: [0, 60, 180, 240],
     tetradic: [0, 90, 180, 270],
     triadic: [0, 120, 240],
-    "split-complimentary": [0, 150, 210],
+    "split-complementary": [0, 150, 210],
   };
 
-  ColordClass.prototype.harmonies = function (type = "complimentary") {
+  ColordClass.prototype.harmonies = function (type = "complementary") {
     return hueShifts[type].map((shift) => this.rotate(shift));
   };
 };

tests/plugins.test.ts

@@ -1,7 +1,7 @@
 import { colord, getFormat, extend } from "../src/";
 import a11yPlugin from "../src/plugins/a11y";
 import cmykPlugin from "../src/plugins/cmyk";
-import harmoniesPlugin from "../src/plugins/harmonies";
+import harmoniesPlugin, { HarmonyType } from "../src/plugins/harmonies";
 import hwbPlugin from "../src/plugins/hwb";
 import labPlugin from "../src/plugins/lab";
 import lchPlugin from "../src/plugins/lch";
@@ -95,50 +95,20 @@ describe("cmyk", () => {
 describe("harmonies", () => {
   extend([harmoniesPlugin]);
 
-  const color = colord("#FF0000");
-
-  it("Generates analogous colors", () => {
-    expect(color.harmonies("analogous").map((value) => value.toHex())).toEqual([
-      "#ff0080",
-      "#ff0000",
-      "#ff8000",
-    ]);
-  });
-  it("Generates complimentary colors", () => {
-    expect(color.harmonies("complimentary").map((value) => value.toHex())).toEqual([
-      "#ff0000",
-      "#00ffff",
-    ]);
-  });
-  it("Generates rectangle colors", () => {
-    expect(color.harmonies("rectangle").map((value) => value.toHex())).toEqual([
-      "#ff0000",
-      "#ffff00",
-      "#00ffff",
-      "#0000ff",
-    ]);
-  });
-  it("Generates tetradic colors", () => {
-    expect(color.harmonies("tetradic").map((value) => value.toHex())).toEqual([
-      "#ff0000",
-      "#80ff00",
-      "#00ffff",
-      "#8000ff",
-    ]);
-  });
-  it("Generates triadic colors", () => {
-    expect(color.harmonies("triadic").map((value) => value.toHex())).toEqual([
-      "#ff0000",
-      "#00ff00",
-      "#0000ff",
-    ]);
-  });
-  it("Generates splitcomplimentary colors", () => {
-    expect(color.harmonies("split-complimentary").map((value) => value.toHex())).toEqual([
-      "#ff0000",
-      "#00ff80",
-      "#0080ff",
-    ]);
+  const check = (type: HarmonyType | undefined, input: string, expected: string[]) => {
+    const harmonies = colord(input).harmonies(type);
+    const hexes = harmonies.map((value) => value.toHex());
+    return expect(hexes).toEqual(expected);
+  };
+
+  it("Generates harmony colors", () => {
+    check(undefined, "#ff0000", ["#ff0000", "#00ffff"]); // "complementary"
+    check("analogous", "#ff0000", ["#ff0080", "#ff0000", "#ff8000"]);
+    check("complementary", "#ff0000", ["#ff0000", "#00ffff"]);
+    check("rectangle", "#ff0000", ["#ff0000", "#ffff00", "#00ffff", "#0000ff"]);
+    check("tetradic", "#ff0000", ["#ff0000", "#80ff00", "#00ffff", "#8000ff"]);
+    check("triadic", "#ff0000", ["#ff0000", "#00ff00", "#0000ff"]);
+    check("split-complementary", "#ff0000", ["#ff0000", "#00ff80", "#0080ff"]);
   });
 });