diff --git a/packages/@ourworldindata/components/src/styles/colors.scss b/packages/@ourworldindata/components/src/styles/colors.scss index 5b9ec0742ab..537063c33c5 100644 --- a/packages/@ourworldindata/components/src/styles/colors.scss +++ b/packages/@ourworldindata/components/src/styles/colors.scss @@ -38,7 +38,7 @@ $gray-20: #e7e7e7; $gray-10: #f2f2f2; $gray-5: #f7f7f7; -$beige: #fbf9f3; +$beige: #fffbf5; $white: #ffffff; // Accent colors 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 d4c34247b5d..7d874e672b6 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 { fontFamily: "Lato, 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif", fontSize: this.manager.fontSize ?? BASE_FONT_SIZE, - backgroundColor: "white", textRendering: "geometricPrecision", WebkitFontSmoothing: "antialiased", }, @@ -573,7 +573,7 @@ export class StaticCaptionedChart extends CaptionedChart { {this.patterns} 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;