feat: use beige as grapher background color

owid · Aug 7, 2024 · 34846ab · 34846ab
1 parent 45177dc
commit 34846ab
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;