✨ (grapher) update colour of exports

For better consistency with static charts created in Figma
owid · Jan 9, 2025 · b9167bd · b9167bd
1 parent 04d8c52
commit b9167bd
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 9 deletions.
diff --git a/packages/@ourworldindata/grapher/src/footer/Footer.tsx b/packages/@ourworldindata/grapher/src/footer/Footer.tsx
@@ -19,6 +19,7 @@ import { ActionButtons } from "../controls/ActionButtons"
 import {
     BASE_FONT_SIZE,
     GRAPHER_FRAME_PADDING_HORIZONTAL,
+    GRAPHER_LIGHT_TEXT,
 } from "../core/GrapherConstants"
 import { GRAPHER_DARK_TEXT } from "../color/ColorConstants"
 
@@ -640,7 +641,9 @@ export class StaticFooter extends Footer<StaticFooterProps> {
     componentWillUnmount(): void {}
 
     @computed private get textColor(): string {
-        return this.manager.secondaryColorInStaticCharts ?? GRAPHER_DARK_TEXT
+        return this.manager.isSocialMediaExport
+            ? GRAPHER_DARK_TEXT
+            : GRAPHER_LIGHT_TEXT
     }
 
     @computed protected get showLicenseNextToSources(): boolean {

diff --git a/packages/@ourworldindata/grapher/src/footer/FooterManager.ts b/packages/@ourworldindata/grapher/src/footer/FooterManager.ts
@@ -19,7 +19,7 @@ export interface FooterManager extends TooltipManager, ActionButtonsManager {
     isEmbeddedInADataPage?: boolean
     hideNote?: boolean
     hideOriginUrl?: boolean
-    secondaryColorInStaticCharts?: string
     isStaticAndSmall?: boolean
+    isSocialMediaExport?: boolean
     detailsMarkerInSvg?: DetailsMarker
 }
diff --git a/packages/@ourworldindata/grapher/src/header/Header.scss b/packages/@ourworldindata/grapher/src/header/Header.scss
@@ -14,12 +14,13 @@
 
     h1 {
         font-family: $serif-font-stack;
+        color: $gray-90;
+        margin: 0;
     }
 
-    // title and subtitle
-    h1,
+    // subtitle
     p {
-        color: $dark-text;
+        color: $light-text;
         margin: 0;
     }
 

diff --git a/packages/@ourworldindata/grapher/src/header/Header.tsx b/packages/@ourworldindata/grapher/src/header/Header.tsx
@@ -17,7 +17,11 @@ import {
     GRAPHER_FRAME_PADDING_HORIZONTAL,
     GRAPHER_FRAME_PADDING_VERTICAL,
 } from "../core/GrapherConstants"
-import { GRAPHER_DARK_TEXT } from "../color/ColorConstants"
+import {
+    GRAPHER_DARK_TEXT,
+    GRAPHER_LIGHT_TEXT,
+    GRAY_90,
+} from "../color/ColorConstants"
 
 interface HeaderProps {
     manager: HeaderManager
@@ -316,7 +320,11 @@ export class StaticHeader extends Header<StaticHeaderProps> {
                         rel="noopener"
                     >
                         {title.render(x, y, {
-                            textProps: { fill: GRAPHER_DARK_TEXT },
+                            textProps: {
+                                fill: this.manager.isSocialMediaExport
+                                    ? "#2d2e2d"
+                                    : GRAY_90,
+                            },
                         })}
                     </a>
                 )}
@@ -330,7 +338,9 @@ export class StaticHeader extends Header<StaticHeaderProps> {
                         {
                             id: makeIdForHumanConsumption("subtitle"),
                             textProps: {
-                                fill: manager.secondaryColorInStaticCharts,
+                                fill: this.manager.isSocialMediaExport
+                                    ? GRAPHER_DARK_TEXT
+                                    : GRAPHER_LIGHT_TEXT,
                             },
                             detailsMarker: this.manager.detailsMarkerInSvg,
                         }

diff --git a/packages/@ourworldindata/grapher/src/header/HeaderManager.ts b/packages/@ourworldindata/grapher/src/header/HeaderManager.ts
@@ -22,7 +22,7 @@ export interface HeaderManager {
     fontSize?: number
     hideTitle?: boolean
     hideSubtitle?: boolean
-    secondaryColorInStaticCharts?: string
     isStaticAndSmall?: boolean
+    isSocialMediaExport?: boolean
     detailsMarkerInSvg?: DetailsMarker
 }