🔨 move colors to ColorConstants file

packages/@ourworldindata/grapher/src/axis/AxisViews.tsx

@@ -13,7 +13,7 @@ import {
 } from "@ourworldindata/utils"
 import { VerticalAxis, HorizontalAxis, DualAxis } from "./Axis"
 import classNames from "classnames"
-import { GRAPHER_DARK_TEXT } from "../core/GrapherConstants"
+import { GRAPHER_DARK_TEXT } from "../color/ColorConstants"
 import { ScaleType, DetailsMarker } from "@ourworldindata/types"
 
 const dasharrayFromFontSize = (fontSize: number): string => {

packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx

@@ -32,7 +32,6 @@ import {
 } from "@ourworldindata/types"
 import {
     BASE_FONT_SIZE,
-    GRAPHER_DARK_TEXT,
     GRAPHER_AXIS_LINE_WIDTH_THICK,
     GRAPHER_AXIS_LINE_WIDTH_DEFAULT,
     GRAPHER_AREA_OPACITY_DEFAULT,
@@ -69,7 +68,11 @@ import { SelectionArray } from "../selection/SelectionArray"
 import { ColorScheme } from "../color/ColorScheme"
 import { ColorScale, ColorScaleManager } from "../color/ColorScale"
 import { ColorScaleConfig } from "../color/ColorScaleConfig"
-import { OwidErrorColor, OwidNoDataGray } from "../color/ColorConstants"
+import {
+    GRAPHER_DARK_TEXT,
+    OWID_ERROR_COLOR,
+    OWID_NO_DATA_GRAY,
+} from "../color/ColorConstants"
 import { CategoricalBin, ColorScaleBin } from "../color/ColorScaleBin"
 import {
     HorizontalColorLegendManager,
@@ -780,7 +783,7 @@ export class DiscreteBarChart
     }
 
     defaultBaseColorScheme = ColorSchemeName.SingleColorDenim
-    defaultNoDataColor = OwidNoDataGray
+    defaultNoDataColor = OWID_NO_DATA_GRAY
     colorScale = this.props.manager.colorScaleOverride ?? new ColorScale(this)
 
     // End of color scale props
@@ -895,7 +898,7 @@ export class DiscreteBarChart
                 color:
                     color ??
                     this.valuesToColorsMap.get(value) ??
-                    OwidErrorColor,
+                    OWID_ERROR_COLOR,
             }
             return series
         })

packages/@ourworldindata/grapher/src/captionedChart/CaptionedChart.tsx

@@ -19,7 +19,6 @@ import {
     BASE_FONT_SIZE,
     Patterns,
     STATIC_EXPORT_DETAIL_SPACING,
-    GRAPHER_BACKGROUND_DEFAULT,
     GRAPHER_FRAME_PADDING_VERTICAL,
     GRAPHER_FRAME_PADDING_HORIZONTAL,
 } from "../core/GrapherConstants"
@@ -53,6 +52,7 @@ import {
     ControlsRow,
     ControlsRowManager,
 } from "../controls/controlsRow/ControlsRow"
+import { GRAPHER_BACKGROUND_DEFAULT } from "../color/ColorConstants"
 
 export interface CaptionedChartManager
     extends ChartManager,

packages/@ourworldindata/grapher/src/color/ColorConstants.ts

@@ -1,2 +1,23 @@
-export const OwidNoDataGray = "#6e7581"
-export const OwidErrorColor = "ff0002"
+// gray shades
+export const GRAY_90 = "#4e4e4e"
+export const GRAY_80 = "#5b5b5b"
+export const GRAY_70 = "#858585"
+export const GRAY_60 = "#a1a1a1"
+export const GRAY_50 = "#c6c6c6"
+export const GRAY_30 = "#dadada"
+export const GRAY_20 = "#e7e7e7"
+export const GRAY_10 = "#f2f2f2"
+export const GRAY_5 = "#f7f7f7"
+
+export const GRAPHER_BACKGROUND_DEFAULT = "#ffffff"
+export const GRAPHER_BACKGROUND_BEIGE = "#fbf9f3"
+
+export const GRAPHER_DARK_TEXT = GRAY_80
+export const GRAPHER_LIGHT_TEXT = GRAY_70
+
+export const BACKGROUND_LINE_COLOR = GRAY_20
+export const BACKGROUND_TEXT_COLOR = GRAY_50
+export const BACKGROUND_DOT_COLOR = GRAY_30
+
+export const OWID_NO_DATA_GRAY = "#6e7581"
+export const OWID_ERROR_COLOR = "ff0002"

packages/@ourworldindata/grapher/src/color/ColorScale.ts

@@ -12,7 +12,7 @@ import {
 import { ColorSchemes } from "../color/ColorSchemes"
 import { ColorScheme } from "../color/ColorScheme"
 import { ColorScaleBin, NumericBin, CategoricalBin } from "./ColorScaleBin"
-import { OwidNoDataGray } from "./ColorConstants"
+import { OWID_NO_DATA_GRAY } from "./ColorConstants"
 import { getBinMaximums } from "./BinningStrategies"
 import {
     ColorScaleConfigInterface,
@@ -101,7 +101,7 @@ export class ColorScale {
     }
 
     @computed private get defaultNoDataColor(): Color {
-        return this.manager.defaultNoDataColor ?? OwidNoDataGray
+        return this.manager.defaultNoDataColor ?? OWID_NO_DATA_GRAY
     }
 
     @computed get colorScaleColumn(): CoreColumn | undefined {

packages/@ourworldindata/grapher/src/core/Grapher.tsx

@@ -126,14 +126,10 @@ import {
     DEFAULT_GRAPHER_HEIGHT,
     DEFAULT_GRAPHER_ENTITY_TYPE,
     DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL,
-    GRAPHER_DARK_TEXT,
     STATIC_EXPORT_DETAIL_SPACING,
-    GRAPHER_LIGHT_TEXT,
     GRAPHER_LOADED_EVENT_NAME,
     isContinentsVariableId,
     isPopulationVariableETLPath,
-    GRAPHER_BACKGROUND_BEIGE,
-    GRAPHER_BACKGROUND_DEFAULT,
     GRAPHER_FRAME_PADDING_HORIZONTAL,
     GRAPHER_FRAME_PADDING_VERTICAL,
     latestGrapherConfigSchema,
@@ -220,6 +216,12 @@ import {
 import { SlideInDrawer } from "../slideInDrawer/SlideInDrawer"
 import { BodyDiv } from "../bodyDiv/BodyDiv"
 import { grapherObjectToQueryParams } from "./GrapherUrl.js"
+import {
+    GRAPHER_BACKGROUND_BEIGE,
+    GRAPHER_BACKGROUND_DEFAULT,
+    GRAPHER_DARK_TEXT,
+    GRAPHER_LIGHT_TEXT,
+} from "../color/ColorConstants"
 
 declare global {
     interface Window {

packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx

@@ -21,7 +21,7 @@ import {
 } from "@ourworldindata/utils"
 import { shortenForTargetWidth } from "@ourworldindata/components"
 import { action, computed, observable } from "mobx"
-import { BASE_FONT_SIZE, GRAPHER_DARK_TEXT } from "../core/GrapherConstants"
+import { BASE_FONT_SIZE } from "../core/GrapherConstants"
 import {
     GRAPHER_CHART_TYPES,
     GrapherChartType,
@@ -64,6 +64,7 @@ import {
     ColorScaleBin,
     NumericBin,
 } from "../color/ColorScaleBin"
+import { GRAPHER_DARK_TEXT } from "../color/ColorConstants"
 
 const SHARED_X_AXIS_MIN_FACET_COUNT = 12
 

packages/@ourworldindata/grapher/src/footer/Footer.tsx

@@ -19,8 +19,8 @@ import { ActionButtons } from "../controls/ActionButtons"
 import {
     BASE_FONT_SIZE,
     GRAPHER_FRAME_PADDING_HORIZONTAL,
-    GRAPHER_DARK_TEXT,
 } from "../core/GrapherConstants"
+import { GRAPHER_DARK_TEXT } from "../color/ColorConstants"
 
 /*
 

packages/@ourworldindata/grapher/src/header/Header.tsx

@@ -16,8 +16,8 @@ import {
     BASE_FONT_SIZE,
     GRAPHER_FRAME_PADDING_HORIZONTAL,
     GRAPHER_FRAME_PADDING_VERTICAL,
-    GRAPHER_DARK_TEXT,
 } from "../core/GrapherConstants"
+import { GRAPHER_DARK_TEXT } from "../color/ColorConstants"
 
 interface HeaderProps {
     manager: HeaderManager

packages/@ourworldindata/grapher/src/lineCharts/LineChart.test.ts

@@ -20,7 +20,7 @@ import {
 } from "@ourworldindata/types"
 import { SelectionArray } from "../selection/SelectionArray"
 import { LineChartManager } from "./LineChartConstants"
-import { OwidNoDataGray } from "../color/ColorConstants"
+import { OWID_NO_DATA_GRAY } from "../color/ColorConstants"
 
 it("can create a new chart", () => {
     const table = SynthesizeGDPTable({ timeRange: [2000, 2010] })
@@ -359,7 +359,7 @@ describe("color scale", () => {
             },
         }
         const chart = new LineChart({ manager })
-        const noDataColor = OwidNoDataGray
+        const noDataColor = OWID_NO_DATA_GRAY
 
         expect(chart.series).toHaveLength(1)
         expect(chart.series[0].color).toEqual(noDataColor)

packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx

@@ -59,7 +59,6 @@ import {
     GRAPHER_AXIS_LINE_WIDTH_THICK,
     GRAPHER_AXIS_LINE_WIDTH_DEFAULT,
     BASE_FONT_SIZE,
-    GRAPHER_BACKGROUND_DEFAULT,
     GRAPHER_OPACITY_MUTE,
 } from "../core/GrapherConstants"
 import { ColorSchemes } from "../color/ColorSchemes"
@@ -95,7 +94,10 @@ import { SelectionArray } from "../selection/SelectionArray"
 import { CategoricalBin, ColorScaleBin } from "../color/ColorScaleBin"
 import { ColorScale, ColorScaleManager } from "../color/ColorScale"
 import { ColorScaleConfig } from "../color/ColorScaleConfig"
-import { OwidNoDataGray } from "../color/ColorConstants"
+import {
+    GRAPHER_BACKGROUND_DEFAULT,
+    OWID_NO_DATA_GRAY,
+} from "../color/ColorConstants"
 import { MultiColorPolyline } from "../scatterCharts/MultiColorPolyline"
 import { CategoricalColorAssigner } from "../color/CategoricalColorAssigner"
 import { darkenColorForLine } from "../color/ColorUtils"
@@ -1073,7 +1075,7 @@ export class LineChart
     }
 
     defaultBaseColorScheme = ColorSchemeName.OwidDistinctLines
-    defaultNoDataColor = OwidNoDataGray
+    defaultNoDataColor = OWID_NO_DATA_GRAY
     colorScale = this.props.manager.colorScaleOverride ?? new ColorScale(this)
 
     private getColorScaleColor(value: CoreValueType | undefined): Color {

packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx

@@ -25,14 +25,11 @@ import {
     SeriesName,
     VerticalAlign,
 } from "@ourworldindata/types"
-import {
-    BASE_FONT_SIZE,
-    GRAPHER_BACKGROUND_DEFAULT,
-    GRAPHER_FONT_SCALE_12,
-} from "../core/GrapherConstants"
+import { BASE_FONT_SIZE, GRAPHER_FONT_SCALE_12 } from "../core/GrapherConstants"
 import { ChartSeries } from "../chart/ChartInterface"
 import { darkenColorForText } from "../color/ColorUtils"
 import { AxisConfig } from "../axis/AxisConfig.js"
+import { GRAPHER_BACKGROUND_DEFAULT } from "../color/ColorConstants"
 
 // Minimum vertical space between two legend items
 const LEGEND_ITEM_MIN_SPACING = 4

packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx

@@ -12,10 +12,9 @@ import {
     BASE_FONT_SIZE,
     DEFAULT_GRAPHER_ENTITY_TYPE,
     DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL,
-    GRAPHER_DARK_TEXT,
-    GRAPHER_LIGHT_TEXT,
 } from "../core/GrapherConstants"
 import { Halo } from "@ourworldindata/components"
+import { GRAPHER_DARK_TEXT, GRAPHER_LIGHT_TEXT } from "../color/ColorConstants"
 
 export interface NoDataModalManager {
     canChangeEntity?: boolean

packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx

@@ -3,8 +3,8 @@ import { Bounds } from "@ourworldindata/utils"
 import {
     GRAPHER_FONT_SCALE_11,
     GRAPHER_FONT_SCALE_12,
-    GRAPHER_LIGHT_TEXT,
 } from "../core/GrapherConstants"
+import { GRAPHER_LIGHT_TEXT } from "../color/ColorConstants"
 
 export function NoDataSection({
     seriesNames,

packages/@ourworldindata/grapher/src/scatterCharts/ScatterPlotChart.tsx

@@ -91,7 +91,7 @@ import {
 } from "./ScatterPlotChartConstants"
 import { ScatterPointsWithLabels } from "./ScatterPointsWithLabels"
 import { autoDetectYColumnSlugs, makeSelectionArray } from "../chart/ChartUtils"
-import { OwidNoDataGray } from "../color/ColorConstants"
+import { OWID_NO_DATA_GRAY } from "../color/ColorConstants"
 import {
     ColorScaleConfig,
     ColorScaleConfigDefaults,
@@ -1038,7 +1038,7 @@ export class ScatterPlotChart
     }
 
     defaultBaseColorScheme = ColorSchemeName.continents
-    defaultNoDataColor = OwidNoDataGray
+    defaultNoDataColor = OWID_NO_DATA_GRAY
 
     @computed get hasNoDataBin(): boolean {
         if (this.colorColumn.isMissing) return false

packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx

@@ -11,11 +11,8 @@ import {
 } from "@ourworldindata/utils"
 import {
     BASE_FONT_SIZE,
-    GRAPHER_BACKGROUND_DEFAULT,
-    GRAPHER_DARK_TEXT,
     GRAPHER_FONT_SCALE_10,
     GRAPHER_FONT_SCALE_11,
-    GRAPHER_LIGHT_TEXT,
 } from "../core/GrapherConstants"
 import { CoreColumn } from "@ourworldindata/core-table"
 import {
@@ -26,6 +23,11 @@ import {
     SCATTER_POINT_DEFAULT_RADIUS,
 } from "./ScatterPlotChartConstants"
 import { darkenColorForText } from "../color/ColorUtils"
+import {
+    GRAPHER_BACKGROUND_DEFAULT,
+    GRAPHER_DARK_TEXT,
+    GRAPHER_LIGHT_TEXT,
+} from "../color/ColorConstants"
 
 export interface ScatterSizeLegendManager {
     sidebarWidth: number

packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx

@@ -20,8 +20,6 @@ import { observer } from "mobx-react"
 import { NoDataModal } from "../noDataModal/NoDataModal"
 import {
     BASE_FONT_SIZE,
-    GRAPHER_BACKGROUND_DEFAULT,
-    GRAPHER_DARK_TEXT,
     GRAPHER_FONT_SCALE_12,
     GRAPHER_OPACITY_MUTE,
 } from "../core/GrapherConstants"
@@ -89,6 +87,10 @@ import { SelectionArray } from "../selection/SelectionArray"
 import { Halo } from "@ourworldindata/components"
 import { HorizontalColorLegendManager } from "../horizontalColorLegend/HorizontalColorLegends"
 import { CategoricalBin } from "../color/ColorScaleBin"
+import {
+    GRAPHER_BACKGROUND_DEFAULT,
+    GRAPHER_DARK_TEXT,
+} from "../color/ColorConstants"
 
 type SVGMouseOrTouchEvent =
     | React.MouseEvent<SVGGElement>

packages/@ourworldindata/grapher/src/stackedCharts/MarimekkoChart.tsx

@@ -69,7 +69,7 @@ import {
     ColorScaleConfig,
     ColorScaleConfigDefaults,
 } from "../color/ColorScaleConfig"
-import { OwidNoDataGray } from "../color/ColorConstants"
+import { OWID_NO_DATA_GRAY } from "../color/ColorConstants"
 import { color } from "d3-color"
 import { SelectionArray } from "../selection/SelectionArray"
 import { ColorScheme } from "../color/ColorScheme"
@@ -267,7 +267,7 @@ export class MarimekkoChart
     base: React.RefObject<SVGGElement> = React.createRef()
 
     defaultBaseColorScheme = ColorSchemeName.continents
-    defaultNoDataColor = OwidNoDataGray
+    defaultNoDataColor = OWID_NO_DATA_GRAY
     labelAngleInDegrees = -45 // 0 is horizontal, -90 is vertical from bottom to top, ...
 
     // currently hovered legend color