✨ (grapher) make exports more consistent with static charts / TAS-792

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

@@ -3124,7 +3124,7 @@ export class Grapher
         if (this.isStaticAndSmall) {
             return this.computeBaseFontSizeFromHeight(this.staticBounds)
         }
-        if (this.isStatic) return 18
+        if (this.isStatic) return 16
         return this._baseFontSize
     }
 

packages/@ourworldindata/grapher/src/core/GrapherConstants.ts

@@ -26,12 +26,6 @@ export const GRAPHER_FRAME_PADDING_HORIZONTAL = 16
 
 export const STATIC_EXPORT_DETAIL_SPACING = 8
 
-export const GRAPHER_BACKGROUND_DEFAULT = "#ffffff"
-export const GRAPHER_BACKGROUND_BEIGE = "#fbf9f3"
-
-export const GRAPHER_DARK_TEXT = "#5b5b5b"
-export const GRAPHER_LIGHT_TEXT = "#858585"
-
 export const GRAPHER_OPACITY_MUTE = 0.3
 
 export const GRAPHER_AXIS_LINE_WIDTH_DEFAULT = 1

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

@@ -20,7 +20,7 @@ import {
     BASE_FONT_SIZE,
     GRAPHER_FRAME_PADDING_HORIZONTAL,
 } from "../core/GrapherConstants"
-import { GRAPHER_DARK_TEXT } from "../color/ColorConstants"
+import { GRAPHER_LIGHT_TEXT } from "../color/ColorConstants"
 
 /*
 
@@ -632,15 +632,13 @@ interface StaticFooterProps extends FooterProps {
 
 @observer
 export class StaticFooter extends Footer<StaticFooterProps> {
-    verticalPadding = 2
-
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     componentDidMount(): void {}
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     componentWillUnmount(): void {}
 
     @computed private get textColor(): string {
-        return this.manager.secondaryColorInStaticCharts ?? GRAPHER_DARK_TEXT
+        return GRAPHER_LIGHT_TEXT
     }
 
     @computed protected get showLicenseNextToSources(): boolean {
@@ -687,36 +685,10 @@ export class StaticFooter extends Footer<StaticFooterProps> {
     }
 
     @computed protected get fontSize(): number {
-        if (this.useBaseFontSize) {
-            let fontSize = (12 / BASE_FONT_SIZE) * this.baseFontSize
-
-            // for small charts, reduce the font size if the footer text is long
-            if (this.manager.isStaticAndSmall) {
-                const sources = new MarkdownTextWrap({
-                    text: this.sourcesText,
-                    maxWidth: this.sourcesMaxWidth,
-                    lineHeight: this.lineHeight,
-                    fontSize,
-                })
-                const note = new MarkdownTextWrap({
-                    text: this.markdownNoteText,
-                    maxWidth: this.noteMaxWidth,
-                    lineHeight: this.lineHeight,
-                    fontSize,
-                })
-
-                const lineCount =
-                    sources.svgLines.length +
-                    (this.showNote ? note.svgLines.length : 0)
-                if (lineCount > 2) {
-                    fontSize = (10 / BASE_FONT_SIZE) * this.baseFontSize
-                }
-            }
-
-            return fontSize
-        }
-
-        return 13
+        if (this.manager.isStaticAndSmall) return 14
+        return this.useBaseFontSize
+            ? (13 / BASE_FONT_SIZE) * this.baseFontSize
+            : 13
     }
 
     @computed protected get sourcesFontSize(): number {
@@ -752,17 +724,14 @@ export class StaticFooter extends Footer<StaticFooterProps> {
             licenseAndOriginUrl,
             showLicenseNextToSources,
             maxWidth,
-            textColor,
         } = this
         const { targetX, targetY } = this.props
 
         return (
             <g
                 id={makeIdForHumanConsumption("footer")}
                 className="SourcesFooter"
-                style={{
-                    fill: textColor,
-                }}
+                style={{ fill: this.textColor }}
             >
                 {sources.renderSVG(targetX, targetY, {
                     id: makeIdForHumanConsumption("sources"),

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
 }

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;
     }
 

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

@@ -17,7 +17,7 @@ import {
     GRAPHER_FRAME_PADDING_HORIZONTAL,
     GRAPHER_FRAME_PADDING_VERTICAL,
 } from "../core/GrapherConstants"
-import { GRAPHER_DARK_TEXT } from "../color/ColorConstants"
+import { GRAPHER_LIGHT_TEXT, GRAY_90 } from "../color/ColorConstants"
 
 interface HeaderProps {
     manager: HeaderManager
@@ -28,6 +28,8 @@ interface HeaderProps {
 export class Header<
     Props extends HeaderProps = HeaderProps,
 > extends React.Component<Props> {
+    protected verticalPadding = 4
+
     @computed protected get manager(): HeaderManager {
         return this.props.manager
     }
@@ -105,13 +107,15 @@ export class Header<
                 fontSize,
             })
 
-        const initialFontSize = this.useBaseFontSize
-            ? (22 / BASE_FONT_SIZE) * this.baseFontSize
-            : this.manager.isNarrow
-              ? 18
-              : this.manager.isMedium
-                ? 20
-                : 24
+        const initialFontSize = this.manager.isStaticAndSmall
+            ? 25
+            : this.useBaseFontSize
+              ? (25 / BASE_FONT_SIZE) * this.baseFontSize
+              : this.manager.isNarrow
+                ? 18
+                : this.manager.isMedium
+                  ? 20
+                  : 24
 
         let title = makeTitle(initialFontSize)
 
@@ -152,7 +156,7 @@ export class Header<
     }
 
     @computed get subtitleMarginTop(): number {
-        let padding = 4
+        let padding = this.verticalPadding
 
         // make sure the subtitle doesn't overlap with the logo
         if (
@@ -172,8 +176,9 @@ export class Header<
     }
 
     @computed get subtitleFontSize(): number {
+        if (this.manager.isStaticAndSmall) return 16
         if (this.useBaseFontSize) {
-            return (13 / BASE_FONT_SIZE) * this.baseFontSize
+            return (15 / BASE_FONT_SIZE) * this.baseFontSize
         }
         return this.manager.isSmall ? 12 : this.manager.isMedium ? 13 : 14
     }
@@ -288,6 +293,8 @@ interface StaticHeaderProps extends HeaderProps {
 
 @observer
 export class StaticHeader extends Header<StaticHeaderProps> {
+    protected verticalPadding = 6
+
     @computed get titleLineHeight(): number {
         return this.manager.isStaticAndSmall ? 1.1 : 1.2
     }
@@ -316,7 +323,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>
                 )}
@@ -329,9 +340,7 @@ export class StaticHeader extends Header<StaticHeaderProps> {
                                 : 0),
                         {
                             id: makeIdForHumanConsumption("subtitle"),
-                            textProps: {
-                                fill: manager.secondaryColorInStaticCharts,
-                            },
+                            textProps: { fill: GRAPHER_LIGHT_TEXT },
                             detailsMarker: this.manager.detailsMarkerInSvg,
                         }
                     )}

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
 }