From a04bee8cf87baabc01f085c840b0b6c309af1fad Mon Sep 17 00:00:00 2001 From: Sophia Mersmann Date: Thu, 9 Jan 2025 16:13:35 +0100 Subject: [PATCH 1/4] =?UTF-8?q?=E2=9C=A8=20(grapher)=20update=20colour=20o?= =?UTF-8?q?f=20exports?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit For better consistency with static charts created in Figma --- .../@ourworldindata/grapher/src/footer/Footer.tsx | 9 +++------ .../grapher/src/footer/FooterManager.ts | 2 +- .../@ourworldindata/grapher/src/header/Header.scss | 7 ++++--- .../@ourworldindata/grapher/src/header/Header.tsx | 12 +++++++----- .../grapher/src/header/HeaderManager.ts | 2 +- 5 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/@ourworldindata/grapher/src/footer/Footer.tsx b/packages/@ourworldindata/grapher/src/footer/Footer.tsx index d2132d46b08..b7beccf8ada 100644 --- a/packages/@ourworldindata/grapher/src/footer/Footer.tsx +++ b/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_LIGHT_TEXT, } from "../core/GrapherConstants" -import { GRAPHER_DARK_TEXT } from "../color/ColorConstants" /* @@ -640,7 +640,7 @@ export class StaticFooter extends Footer { componentWillUnmount(): void {} @computed private get textColor(): string { - return this.manager.secondaryColorInStaticCharts ?? GRAPHER_DARK_TEXT + return GRAPHER_LIGHT_TEXT } @computed protected get showLicenseNextToSources(): boolean { @@ -752,7 +752,6 @@ export class StaticFooter extends Footer { licenseAndOriginUrl, showLicenseNextToSources, maxWidth, - textColor, } = this const { targetX, targetY } = this.props @@ -760,9 +759,7 @@ export class StaticFooter extends Footer { {sources.renderSVG(targetX, targetY, { id: makeIdForHumanConsumption("sources"), diff --git a/packages/@ourworldindata/grapher/src/footer/FooterManager.ts b/packages/@ourworldindata/grapher/src/footer/FooterManager.ts index e8d81bb0da8..e767788281d 100644 --- 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 index cbe0a189432..9a68941b4d7 100644 --- 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 index f961a6d1b03..c3ca577517f 100644 --- a/packages/@ourworldindata/grapher/src/header/Header.tsx +++ b/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 @@ -316,7 +316,11 @@ export class StaticHeader extends Header { rel="noopener" > {title.render(x, y, { - textProps: { fill: GRAPHER_DARK_TEXT }, + textProps: { + fill: this.manager.isSocialMediaExport + ? "#2d2e2d" + : GRAY_90, + }, })} )} @@ -329,9 +333,7 @@ export class StaticHeader extends Header { : 0), { id: makeIdForHumanConsumption("subtitle"), - textProps: { - fill: manager.secondaryColorInStaticCharts, - }, + textProps: { fill: 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 index d9b4c598c0c..188d592863f 100644 --- 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 } From 28e5764677e1138339bcbc55b89296abf4ce1612 Mon Sep 17 00:00:00 2001 From: Sophia Mersmann Date: Thu, 9 Jan 2025 16:27:53 +0100 Subject: [PATCH 2/4] =?UTF-8?q?=E2=9C=A8=20(grapher)=20updating=20padding?= =?UTF-8?q?=20between=20text=20elements?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit For better consistency with static charts created in Figma --- packages/@ourworldindata/grapher/src/footer/Footer.tsx | 2 -- packages/@ourworldindata/grapher/src/header/Header.tsx | 6 +++++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/@ourworldindata/grapher/src/footer/Footer.tsx b/packages/@ourworldindata/grapher/src/footer/Footer.tsx index b7beccf8ada..6d4ac0aa4e5 100644 --- a/packages/@ourworldindata/grapher/src/footer/Footer.tsx +++ b/packages/@ourworldindata/grapher/src/footer/Footer.tsx @@ -632,8 +632,6 @@ interface StaticFooterProps extends FooterProps { @observer export class StaticFooter extends Footer { - verticalPadding = 2 - // eslint-disable-next-line @typescript-eslint/no-empty-function componentDidMount(): void {} // eslint-disable-next-line @typescript-eslint/no-empty-function diff --git a/packages/@ourworldindata/grapher/src/header/Header.tsx b/packages/@ourworldindata/grapher/src/header/Header.tsx index c3ca577517f..50ef335d500 100644 --- a/packages/@ourworldindata/grapher/src/header/Header.tsx +++ b/packages/@ourworldindata/grapher/src/header/Header.tsx @@ -28,6 +28,8 @@ interface HeaderProps { export class Header< Props extends HeaderProps = HeaderProps, > extends React.Component { + protected verticalPadding = 4 + @computed protected get manager(): HeaderManager { return this.props.manager } @@ -152,7 +154,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 ( @@ -288,6 +290,8 @@ interface StaticHeaderProps extends HeaderProps { @observer export class StaticHeader extends Header { + protected verticalPadding = 6 + @computed get titleLineHeight(): number { return this.manager.isStaticAndSmall ? 1.1 : 1.2 } From fe1be6bf181464a3b39d6326a98328e2b05e8f01 Mon Sep 17 00:00:00 2001 From: Sophia Mersmann Date: Thu, 9 Jan 2025 16:52:15 +0100 Subject: [PATCH 3/4] =?UTF-8?q?=E2=9C=A8=20(grapher)=20update=20font=20siz?= =?UTF-8?q?es=20of=20exports?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit For better consisten with static charts created in Figma --- .../grapher/src/core/Grapher.tsx | 2 +- .../grapher/src/footer/Footer.tsx | 34 +++---------------- .../grapher/src/header/Header.tsx | 19 ++++++----- 3 files changed, 16 insertions(+), 39 deletions(-) diff --git a/packages/@ourworldindata/grapher/src/core/Grapher.tsx b/packages/@ourworldindata/grapher/src/core/Grapher.tsx index 94407af5a90..f78ed69925e 100644 --- a/packages/@ourworldindata/grapher/src/core/Grapher.tsx +++ b/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 } diff --git a/packages/@ourworldindata/grapher/src/footer/Footer.tsx b/packages/@ourworldindata/grapher/src/footer/Footer.tsx index 6d4ac0aa4e5..505ffee5786 100644 --- a/packages/@ourworldindata/grapher/src/footer/Footer.tsx +++ b/packages/@ourworldindata/grapher/src/footer/Footer.tsx @@ -685,36 +685,10 @@ export class StaticFooter extends Footer { } @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 { diff --git a/packages/@ourworldindata/grapher/src/header/Header.tsx b/packages/@ourworldindata/grapher/src/header/Header.tsx index 50ef335d500..910c63e951b 100644 --- a/packages/@ourworldindata/grapher/src/header/Header.tsx +++ b/packages/@ourworldindata/grapher/src/header/Header.tsx @@ -107,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) @@ -174,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 } From 6c52ad56e778c09c0ef7702b808d993229087ea6 Mon Sep 17 00:00:00 2001 From: Sophia Mersmann Date: Fri, 10 Jan 2025 14:00:00 +0100 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=94=A8=20remove=20duplicate=20color?= =?UTF-8?q?=20definitions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../@ourworldindata/grapher/src/core/GrapherConstants.ts | 6 ------ packages/@ourworldindata/grapher/src/footer/Footer.tsx | 2 +- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts index 1601f36f65e..1e53cd42609 100644 --- a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts +++ b/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 diff --git a/packages/@ourworldindata/grapher/src/footer/Footer.tsx b/packages/@ourworldindata/grapher/src/footer/Footer.tsx index 505ffee5786..e9662ab7bb3 100644 --- a/packages/@ourworldindata/grapher/src/footer/Footer.tsx +++ b/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_LIGHT_TEXT, } from "../core/GrapherConstants" +import { GRAPHER_LIGHT_TEXT } from "../color/ColorConstants" /*