From b1cee947b2a20d44d79b3fdca48c9866b0ad4fb0 Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Thu, 23 May 2024 09:50:03 +0200
Subject: [PATCH] feat: use beige as grapher background color

---
 .../grapher/src/captionedChart/CaptionedChart.scss            | 1 +
 .../grapher/src/captionedChart/CaptionedChart.tsx             | 4 ++--
 packages/@ourworldindata/grapher/src/core/GrapherConstants.ts | 2 ++
 packages/@ourworldindata/grapher/src/core/grapher.scss        | 1 +
 4 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.scss b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.scss
index 06bd9ea88a6..b8f57069207 100644
--- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.scss
+++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.scss
@@ -3,6 +3,7 @@ $controlRowHeight: 32px; // keep in sync with CONTROLS_ROW_HEIGHT
 
 .CaptionedChart {
     width: 100%;
+    background-color: $grapher-background-color;
 }
 
 .HeaderHTML,
diff --git a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
index 7a05b4a79be..75be3c93957 100644
--- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
+++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
@@ -19,6 +19,7 @@ import {
     Patterns,
     STATIC_EXPORT_DETAIL_SPACING,
     DEFAULT_GRAPHER_FRAME_PADDING,
+    GRAPHER_BACKGROUND_COLOR,
 } from "../core/GrapherConstants"
 import { MapChartManager } from "../mapCharts/MapChartConstants"
 import { ChartManager } from "../chart/ChartManager"
@@ -491,7 +492,6 @@ export class CaptionedChart extends React.Component<CaptionedChartProps> {
                 fontFamily:
                     "Lato, 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif",
                 fontSize: this.manager.fontSize ?? BASE_FONT_SIZE,
-                backgroundColor: "white",
                 textRendering: "geometricPrecision",
                 WebkitFontSmoothing: "antialiased",
             },
@@ -618,7 +618,7 @@ export class StaticCaptionedChart extends CaptionedChart {
                 {this.patterns}
                 <rect
                     className="background-fill"
-                    fill="white"
+                    fill={GRAPHER_BACKGROUND_COLOR}
                     width={width}
                     height={height}
                 />
diff --git a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
index 4a30ab55acc..72d7711baae 100644
--- a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
+++ b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts
@@ -23,6 +23,8 @@ export const DEFAULT_GRAPHER_HEIGHT = 600
 export const DEFAULT_GRAPHER_FRAME_PADDING = 16
 export const STATIC_EXPORT_DETAIL_SPACING = 8
 
+export const GRAPHER_BACKGROUND_COLOR = "#fbf9f3" // beige
+
 export const GRAPHER_DARK_TEXT = "#5b5b5b"
 export const GRAPHER_LIGHT_TEXT = "#858585"
 
diff --git a/packages/@ourworldindata/grapher/src/core/grapher.scss b/packages/@ourworldindata/grapher/src/core/grapher.scss
index ec6861feb97..9693b286c3f 100644
--- a/packages/@ourworldindata/grapher/src/core/grapher.scss
+++ b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -13,6 +13,7 @@
 @import "./typography.scss";
 
 // grapher frame
+$grapher-background-color: $beige;
 $frame-color: #f2f2f2;
 
 // text