From 2bf9b27ad1d71121bcd768602935ac10e9456597 Mon Sep 17 00:00:00 2001
From: Eric Rovell <ericrovell@gmail.com>
Date: Sun, 5 Jun 2022 13:04:00 +0300
Subject: [PATCH] feat: implement `relative` option for lighten/darken
 manipulation

---
 README.md                 | 16 ++++++++++++++--
 src/colord.ts             |  8 ++++----
 src/manipulate/lighten.ts |  5 +++--
 tests/colord.test.ts      |  5 +++++
 4 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index db36c6a..ed9e1f1 100644
--- a/README.md
+++ b/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>
diff --git a/src/colord.ts b/src/colord.ts
index cbefe3e..cd42cff 100644
--- a/src/colord.ts
+++ b/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));
   }
 
   /**
diff --git a/src/manipulate/lighten.ts b/src/manipulate/lighten.ts
index 002bfdb..9ff5ce9 100644
--- a/src/manipulate/lighten.ts
+++ b/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,
   };
 };
diff --git a/tests/colord.test.ts b/tests/colord.test.ts
index 2df4310..5d909e8 100644
--- a/tests/colord.test.ts
+++ b/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", () => {