From c6bf2fd75a8b8e28a3b33a56c7e092311d02969b Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 20 Aug 2024 17:11:10 +0100
Subject: [PATCH 1/2] chore(deps): add `colorjs.io`

this module is by Lea Verou, co-editor of the CSS Color 4 and 5 specs, and also has some advanced color manipulation features that may be useful to us in the future.
Include chromatic adaptation, which we might be able to use an alternative whitepoint? not sure yet if that helps in any way
---
 package.json | 1 +
 yarn.lock    | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/package.json b/package.json
index e746c16682..cf271c95bd 100644
--- a/package.json
+++ b/package.json
@@ -80,6 +80,7 @@
         "classnames": "^2.5.1",
         "codemirror": "5",
         "colorbrewer": "^1.3.0",
+        "colorjs.io": "^0.5.2",
         "cookie-parser": "^1.4.4",
         "d3": "^6.1.1",
         "dayjs": "^1.11.11",
diff --git a/yarn.lock b/yarn.lock
index 872c5ceb19..263966532b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8412,6 +8412,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"colorjs.io@npm:^0.5.2":
+  version: 0.5.2
+  resolution: "colorjs.io@npm:0.5.2"
+  checksum: 10/a6f6345865b177d19481008cb299c46ec9ff1fd206f472cd9ef69ddbca65832c81237b19fdcd24f3f9540c3e6343a22eb486cd800f5eab9815ce7c98c16a0f0e
+  languageName: node
+  linkType: hard
+
 "columnify@npm:1.6.0":
   version: 1.6.0
   resolution: "columnify@npm:1.6.0"
@@ -11881,6 +11888,7 @@ __metadata:
     classnames: "npm:^2.5.1"
     codemirror: "npm:5"
     colorbrewer: "npm:^1.3.0"
+    colorjs.io: "npm:^0.5.2"
     cookie-parser: "npm:^1.4.4"
     cypress: "npm:9.3.1"
     d3: "npm:^6.1.1"

From fc6b6ecaaab8465f96acc57e433954a7cd06bd8a Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 20 Aug 2024 17:11:31 +0100
Subject: [PATCH 2/2] enhance: darken all colorbrewer schemes

---
 .../grapher/src/color/ColorBrewerSchemes.ts       | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/@ourworldindata/grapher/src/color/ColorBrewerSchemes.ts b/packages/@ourworldindata/grapher/src/color/ColorBrewerSchemes.ts
index 88ff9a9f94..b872dcf3ae 100644
--- a/packages/@ourworldindata/grapher/src/color/ColorBrewerSchemes.ts
+++ b/packages/@ourworldindata/grapher/src/color/ColorBrewerSchemes.ts
@@ -4,6 +4,8 @@ import {
     ColorSchemeInterface,
     ColorSchemeName,
 } from "@ourworldindata/types"
+import ColorJS from "colorjs.io"
+import { memoize } from "@ourworldindata/utils"
 
 type ColorSchemeProps = { displayName: string; singleColorScale: boolean }
 
@@ -59,6 +61,14 @@ const ColorBrewerSchemeIndex: {
     PuBu: { displayName: "Purple-Blue shades", singleColorScale: true },
 } as const
 
+const _darkenColorForContrast = (color: string) => {
+    const col = new ColorJS(color)
+    col.oklab.l *= 0.95
+    return col.toString({ format: "hex" })
+}
+
+const darkenColorForContrast = memoize(_darkenColorForContrast)
+
 export const getColorBrewerScheme: (
     name: string
 ) => ColorSchemeInterface | undefined = (name: string) => {
@@ -69,7 +79,10 @@ export const getColorBrewerScheme: (
 
     const colorSetsArray: Color[][] = []
     Object.keys(colorSets).forEach(
-        (numColors) => (colorSetsArray[+numColors] = colorSets[numColors])
+        (numColors) =>
+            (colorSetsArray[+numColors] = colorSets[numColors].map(
+                darkenColorForContrast
+            ))
     )
     return {
         name,