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", () => {