feat: implement relative option for lighten/darken manipulation

README.md

@@ -431,7 +431,7 @@ colord("hsl(0, 100%, 50%)").grayscale().toHslString(); // "hsl(0, 0%, 50%)"
 </details>
 
 <details>
- <summary><b><code>.lighten(amount = 0.1)</code></b></summary>
+ <summary><b><code>.lighten(amount = 0.1, relative = false)</code></b></summary>
 
 Increases the [HSL lightness](https://en.wikipedia.org/wiki/HSL_and_HSV) of a color by the given amount.
 
@@ -441,10 +441,16 @@ colord("#223344").lighten(0.3).toHex(); // "#5580aa"
 colord("hsl(0, 50%, 50%)").lighten(0.5).toHslString(); // "hsl(0, 50%, 100%)"
 ```
 
+The manipulation can be relative to the color itself:
+
+```js
+colord("hsl(0, 50%, 50%)").lighten(0.5, true).toHslString(); // "hsl(0, 50%, 75%)"
+```
+
 </details>
 
 <details>
- <summary><b><code>.darken(amount = 0.1)</code></b></summary>
+ <summary><b><code>.darken(amount = 0.1, relative = false)</code></b></summary>
 
 Decreases the [HSL lightness](https://en.wikipedia.org/wiki/HSL_and_HSV) of a color by the given amount.
 
@@ -454,6 +460,12 @@ colord("#5580aa").darken(0.3).toHex(); // "#223344"
 colord("hsl(0, 50%, 100%)").lighten(0.5).toHslString(); // "hsl(0, 50%, 50%)"
 ```
 
+The manipulation can be relative to the color itself:
+
+```js
+colord("hsl(0, 50%, 50%)").darken(0.5, true).toHslString(); // "hsl(0, 50%, 25%)"
+```
+
 </details>
 
 <details>

src/colord.ts

@@ -136,15 +136,15 @@ export class Colord {
  /**
  * Increases the HSL lightness of a color by the given amount.
  */
- public lighten(amount = 0.1): Colord {
- return colord(lighten(this.rgba, amount));
+ public lighten(amount = 0.1, relative?: boolean): Colord {
+ return colord(lighten(this.rgba, amount, relative));
  }
 
  /**
  * Increases the HSL lightness of a color by the given amount.
  */
- public darken(amount = 0.1): Colord {
- return colord(lighten(this.rgba, -amount));
+ public darken(amount = 0.1, relative?: boolean): Colord {
+ return colord(lighten(this.rgba, -amount, relative));
  }
 
  /**

src/manipulate/lighten.ts

@@ -2,13 +2,14 @@ import { rgbaToHsla } from "../colorModels/hsl";
 import { HslaColor, RgbaColor } from "../types";
 import { clamp } from "../helpers";
 
-export const lighten = (rgba: RgbaColor, amount: number): HslaColor => {
+export const lighten = (rgba: RgbaColor, amount: number, relative = false): HslaColor => {
  const hsla = rgbaToHsla(rgba);
+ const l = relative ? hsla.l * (1 + amount) : hsla.l + amount * 100;
 
  return {
  h: hsla.h,
  s: hsla.s,
- l: clamp(hsla.l + amount * 100, 0, 100),
+ l: clamp(l, 0, 100),
  a: hsla.a,
  };
 };

tests/colord.test.ts

@@ -206,6 +206,11 @@ it("Makes a color lighter and darker", () => {
  expect(colord("#000").lighten(0.5).toHex()).toBe("#808080");
  expect(colord("#FFF").darken(1).toHex()).toBe("#000000");
  expect(colord("#FFF").darken(0.5).toHex()).toBe("#808080");
+
+ // relative manipulation case
+ expect(colord("hsl(100, 50%, 50%)").lighten(0.2, true).toHsl().l).toBe(60);
+ expect(colord("hsl(100, 50%, 50%)").darken(0.1, true).toHslString()).toBe("hsl(100, 50%, 45%)");
+ expect(colord("hsl(100, 50%, 50%)").darken(0.2, true).toHsl().l).toBe(40);
 });
 
 it("Inverts a color", () => {