From 34846abb9ac84abff5f555ec261fdc5a7862d9d0 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        | 3 ++-
 4 files changed, 7 insertions(+), 3 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 b312886a215..5be0e389bfc 100644
--- a/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
+++ b/packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx
@@ -20,6 +20,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"
@@ -443,7 +444,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",
             },
@@ -572,7 +572,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 35f47981580..bf992bc0fa4 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 92793a6c6e9..ab8bcb14853 100644
--- a/packages/@ourworldindata/grapher/src/core/grapher.scss
+++ b/packages/@ourworldindata/grapher/src/core/grapher.scss
@@ -14,7 +14,8 @@
 @import "./typography.scss";
 
 // grapher frame
-$frame-color: $gray-10;
+$grapher-background-color: $beige;
+$frame-color: #f2f2f2;
 
 // text
 $dark-text: $gray-80;