chromator - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

dist/Chromator.d.ts

@@ -75,2 +75,29 @@ import { type ColourCode } from './types/ColourCode';
     darken(amount: number): this;
+    /**
+     * Inverts the lightness of the colour.
+     * @example
+     * const hsl = { hue: 302, saturation: 0.59, lightness: 0.65 };
+     * const colour = new Chromator({ hue: 302, saturation: 0.59, lightness: 0.65 });
+     * colour.invertLightness();
+     * const invertedHsl = colour.getHsl(); // { hue: 302, saturation: 0.59, lightness: 0.35 }
+     */
+    invertLightness(): this;
+    /**
+     * Adds the given amount to the hue.
+     * @param amount The amount in degrees to add to the hue.
+     */
+    addHue(amount: number): this;
+    /**
+     * Subtracts the given amount from the hue.
+     * @param amount The amount in degrees to subtract from the hue.
+     */
+    subtractHue(amount: number): this;
+    /**
+     * Transforms the colour to its complementary colour.
+     */
+    complementarise(): Chromator;
+    /**
+     * Inverts the colour.
+     */
+    invert(): Chromator;
 }

dist/Chromator.js

@@ -18,2 +18,3 @@ "use strict";
 var hsla_to_string_1 = require("./converters/hsla-to-string");
+var utils_1 = require("./utils");
 var Chromator = /** @class */ (function () {
@@ -119,2 +120,44 @@ function Chromator(code) {
     };
+    /**
+     * Inverts the lightness of the colour.
+     * @example
+     * const hsl = { hue: 302, saturation: 0.59, lightness: 0.65 };
+     * const colour = new Chromator({ hue: 302, saturation: 0.59, lightness: 0.65 });
+     * colour.invertLightness();
+     * const invertedHsl = colour.getHsl(); // { hue: 302, saturation: 0.59, lightness: 0.35 }
+     */
+    Chromator.prototype.invertLightness = function () {
+        this.hsl.lightness = 1 - this.hsl.lightness;
+        return this;
+    };
+    /**
+     * Adds the given amount to the hue.
+     * @param amount The amount in degrees to add to the hue.
+     */
+    Chromator.prototype.addHue = function (amount) {
+        this.hsl.hue = (0, utils_1.modulo)(this.hsl.hue + amount, 360);
+        return this;
+    };
+    /**
+     * Subtracts the given amount from the hue.
+     * @param amount The amount in degrees to subtract from the hue.
+     */
+    Chromator.prototype.subtractHue = function (amount) {
+        this.hsl.hue = (0, utils_1.modulo)(this.hsl.hue - amount, 360);
+        return this;
+    };
+    /**
+     * Transforms the colour to its complementary colour.
+     */
+    Chromator.prototype.complementarise = function () {
+        this.addHue(180);
+        return this;
+    };
+    /**
+     * Inverts the colour.
+     */
+    Chromator.prototype.invert = function () {
+        this.complementarise().invertLightness();
+        return this;
+    };
     return Chromator;
@@ -121,0 +164,0 @@ }());

dist/index.d.ts

@@ -1,1 +0,7 @@
-export * from './Chromator';
+export { Chromator } from './Chromator';
+export type { Hsl } from './types/Hsl';
+export type { Hsla } from './types/Hsla';
+export type { Rgb } from './types/Rgb';
+export type { Rgba } from './types/Rgba';
+export type { Hsv } from './types/Hsv';
+export type { Hsva } from './types/Hsva';

dist/index.js

 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Chromator"), exports);
+exports.Chromator = void 0;
+var Chromator_1 = require("./Chromator");
+Object.defineProperty(exports, "Chromator", { enumerable: true, get: function () { return Chromator_1.Chromator; } });
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "chromator",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "scripts": {
@@ -5,0 +5,0 @@ "build": "tsc --outDir dist"

README.md

@@ -52,3 +52,3 @@ # Chromator
 
-### Lightening and darkening
+### Lightness manipulation
 The `Chromator.lighten` and `Chromator.darken` methods can be used to lighten or darken the colour respectively:
@@ -60,1 +60,29 @@ ```typescript
 ```
+There is also a method called `Chromator.invertLightness` that inverts the lightness of the colour:
+```typescript
+const hsl = { hue: 302, saturation: 0.59, lightness: 0.65 };
+const colour = new Chromator({ hue: 302, saturation: 0.59, lightness: 0.65 });
+colour.invertLightness();
+const invertedHsl = colour.getHsl(); // { hue: 302, saturation: 0.59, lightness: 0.35 }
+```
+
+### Hue manipulation
+The hue is represented as an angle in degrees, representing the position of the colour on the colour wheel.
+The `Chromator.addHue` and `Chromator.subtractHue` methods can be used to rotate the hue of the colour:
+```typescript
+const colour = new Chromator('#FF0000');
+console.log(colour.addHue(120).getHexCode()); // #00FF00
+console.log(colour.subtractHue(120).getHexCode()); // #FF0000
+```
+There is also an `Chromator.complementarise` method that transforms the colour to its complementary colour by adding 180 degrees to the hue:
+```typescript
+const colour = new Chromator('#FF0000');
+console.log(colour.complementarise().getHexCode()); // #00FFFF
+```
+
+### Colour inversion
+The `Chromator.invert` method is a combination of `Chromator.invertLightness` and `Chromator.complementarise` and can be used to invert the colour:
+```typescript
+const colour = new Chromator('#FFCCCC');
+console.log(colour.invert().getHexCode()); // #003333
+```

src/Chromator.test.ts

@@ -105,2 +105,66 @@ import { Chromator } from './Chromator';
   });
+
+  describe('invertLightness', () => {
+    it('Inverts the lightness of the colour', () => {
+      const chromator = new Chromator({ hue: 302, saturation: 0.59, lightness: 0.65 });
+      chromator.invertLightness();
+      expect(chromator.getHsl()).toEqual({ hue: 302, saturation: 0.59, lightness: 0.35 });
+    });
+
+    it('Returns the initial colour if inverted twice', () => {
+      const initialHsl = { hue: 302, saturation: 0.59, lightness: 0.65 };
+      const chromator = new Chromator(initialHsl);
+      chromator.invertLightness().invertLightness();
+      expect(chromator.getHsl()).not.toBe(initialHsl);
+      expect(chromator.getHsl()).toEqual(initialHsl);
+    });
+  });
+
+  describe('addHue', () => {
+    it('Adds the given amount to the hue', () => {
+      const initialHsl = { hue: 10, saturation: 1, lightness: 0.5 };
+      const chromator = new Chromator(initialHsl);
+      chromator.addHue(20);
+      expect(chromator.getHsl()).toEqual({ hue: 30, saturation: 1, lightness: 0.5 });
+    });
+
+    it('Wraps the hue around if it goes over 360', () => {
+      const initialHsl = { hue: 350, saturation: 1, lightness: 0.5 };
+      const chromator = new Chromator(initialHsl);
+      chromator.addHue(20);
+      expect(chromator.getHsl()).toEqual({ hue: 10, saturation: 1, lightness: 0.5 });
+    });
+  });
+
+  describe('subtractHue', () => {
+    it('Subtracts the given amount from the hue', () => {
+      const initialHsl = { hue: 30, saturation: 1, lightness: 0.5 };
+      const chromator = new Chromator(initialHsl);
+      chromator.subtractHue(20);
+      expect(chromator.getHsl()).toEqual({ hue: 10, saturation: 1, lightness: 0.5 });
+    });
+
+    it('Wraps the hue around if it goes under 0', () => {
+      const initialHsl = { hue: 10, saturation: 1, lightness: 0.5 };
+      const chromator = new Chromator(initialHsl);
+      chromator.subtractHue(20);
+      expect(chromator.getHsl()).toEqual({ hue: 350, saturation: 1, lightness: 0.5 });
+    });
+  });
+
+  describe('complementarise', () => {
+    it('Transforms the colour to its complimentary colour', () => {
+      const chromator = new Chromator({ hue: 302, saturation: 0.59, lightness: 0.65 });
+      chromator.complementarise();
+      expect(chromator.getHsl()).toEqual({ hue: 122, saturation: 0.59, lightness: 0.65 });
+    });
+  });
+
+  describe('invert', () => {
+    it('Inverts the colour', () => {
+      const chromator = new Chromator({ hue: 302, saturation: 0.59, lightness: 0.65 });
+      chromator.invert();
+      expect(chromator.getHsl()).toEqual({ hue: 122, saturation: 0.59, lightness: 0.35 });
+    });
+  });
 });

src/Chromator.ts

@@ -15,2 +15,3 @@ import { type ColourCode } from './types/ColourCode';
 } from './converters/hsla-to-string';
+import { modulo } from './utils';
 
@@ -133,2 +134,49 @@ export class Chromator {
   }
+
+  /**
+   * Inverts the lightness of the colour.
+   * @example
+   * const hsl = { hue: 302, saturation: 0.59, lightness: 0.65 };
+   * const colour = new Chromator({ hue: 302, saturation: 0.59, lightness: 0.65 });
+   * colour.invertLightness();
+   * const invertedHsl = colour.getHsl(); // { hue: 302, saturation: 0.59, lightness: 0.35 }
+   */
+  public invertLightness(): this {
+    this.hsl.lightness = 1 - this.hsl.lightness;
+    return this;
+  }
+
+  /**
+   * Adds the given amount to the hue.
+   * @param amount The amount in degrees to add to the hue.
+   */
+  public addHue(amount: number): this {
+    this.hsl.hue = modulo(this.hsl.hue + amount, 360);
+    return this;
+  }
+
+  /**
+   * Subtracts the given amount from the hue.
+   * @param amount The amount in degrees to subtract from the hue.
+   */
+  public subtractHue(amount: number): this {
+    this.hsl.hue = modulo(this.hsl.hue - amount, 360);
+    return this;
+  }
+
+  /**
+   * Transforms the colour to its complementary colour.
+   */
+  public complementarise(): Chromator {
+    this.addHue(180);
+    return this;
+  }
+
+  /**
+   * Inverts the colour.
+   */
+  public invert(): Chromator {
+    this.complementarise().invertLightness();
+    return this;
+  }
 }

src/index.ts

@@ -1,1 +0,7 @@
-export * from './Chromator';
+export { Chromator } from './Chromator';
+export type { Hsl } from './types/Hsl';
+export type { Hsla } from './types/Hsla';
+export type { Rgb } from './types/Rgb';
+export type { Rgba } from './types/Rgba';
+export type { Hsv } from './types/Hsv';
+export type { Hsva } from './types/Hsva';

No alert changes

Improved metrics

Total package byte prevSize

287749

increased by2.98%

Lines of code

4862

increased by3.58%

Number of lines in readme file

86

increased by45.76%

No dependency changes