From b7670422e987aa6d0c56e94ba08d7743ebf349a2 Mon Sep 17 00:00:00 2001 From: Sophia Mersmann Date: Thu, 6 Feb 2025 15:36:30 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20make=20text=20outline=20work=20in?= =?UTF-8?q?=20Figma?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../@ourworldindata/components/src/Halo/Halo.tsx | 3 ++- .../grapher/src/core/GrapherConstants.ts | 2 ++ .../grapher/src/lineLegend/LineLegend.tsx | 14 +++++++++++++- .../grapher/src/noDataModal/NoDataModal.tsx | 16 +++++++++++++--- .../grapher/src/scatterCharts/ComparisonLine.tsx | 14 ++++++++++---- .../scatterCharts/ScatterPointsWithLabels.tsx | 7 +++++++ .../src/scatterCharts/ScatterSizeLegend.tsx | 6 +----- .../grapher/src/slopeCharts/SlopeChart.tsx | 4 ++++ 8 files changed, 52 insertions(+), 14 deletions(-) diff --git a/packages/@ourworldindata/components/src/Halo/Halo.tsx b/packages/@ourworldindata/components/src/Halo/Halo.tsx index f0f3fa1549..810f374040 100644 --- a/packages/@ourworldindata/components/src/Halo/Halo.tsx +++ b/packages/@ourworldindata/components/src/Halo/Halo.tsx @@ -5,6 +5,7 @@ interface HaloProps { id: string children: React.ReactElement show?: boolean + outlineWidth: number outlineColor?: Color style?: React.CSSProperties } @@ -14,7 +15,6 @@ const defaultHaloStyle: React.CSSProperties = { stroke: "#fff", strokeLinecap: "round", strokeLinejoin: "round", - strokeWidth: ".25em", userSelect: "none", } @@ -24,6 +24,7 @@ export function Halo(props: HaloProps): React.ReactElement { const defaultStyle = { ...defaultHaloStyle, + strokeWidth: props.outlineWidth, fill: props.outlineColor ?? defaultHaloStyle.fill, stroke: props.outlineColor ?? defaultHaloStyle.stroke, } diff --git a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts index 786aec3860..c8a9010da8 100644 --- a/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts +++ b/packages/@ourworldindata/grapher/src/core/GrapherConstants.ts @@ -40,6 +40,8 @@ export const GRAPHER_AREA_OPACITY_DEFAULT = 0.8 export const GRAPHER_AREA_OPACITY_MUTE = GRAPHER_OPACITY_MUTE export const GRAPHER_AREA_OPACITY_FOCUS = 1 +export const GRAPHER_TEXT_OUTLINE_FACTOR = 0.25 + export const BASE_FONT_SIZE = 16 export const GRAPHER_FONT_SCALE_9_6 = 9.6 / BASE_FONT_SIZE diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx index 2713529c53..5e7b660ce0 100644 --- a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx +++ b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx @@ -21,7 +21,11 @@ import { SeriesName, VerticalAlign, } from "@ourworldindata/types" -import { BASE_FONT_SIZE, GRAPHER_FONT_SCALE_12 } from "../core/GrapherConstants" +import { + BASE_FONT_SIZE, + GRAPHER_FONT_SCALE_12, + GRAPHER_TEXT_OUTLINE_FACTOR, +} from "../core/GrapherConstants" import { darkenColorForText } from "../color/ColorUtils" import { AxisConfig } from "../axis/AxisConfig.js" import { GRAPHER_BACKGROUND_DEFAULT, GRAY_30 } from "../color/ColorConstants" @@ -141,6 +145,10 @@ class LineLabels extends React.Component<{ )} key={getSeriesKey(series, index)} show={this.showTextOutline} + outlineWidth={ + GRAPHER_TEXT_OUTLINE_FACTOR * + series.textWrapForRendering.fontSize + } outlineColor={this.textOutlineColor} > {series.textWrapForRendering.renderSVG( @@ -175,6 +183,10 @@ class LineLabels extends React.Component<{ id={series.seriesName} key={getSeriesKey(series, index)} show={this.showTextOutline} + outlineWidth={ + GRAPHER_TEXT_OUTLINE_FACTOR * + series.annotationTextWrap.fontSize + } outlineColor={this.textOutlineColor} > {series.annotationTextWrap.renderSVG( diff --git a/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx b/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx index 675d72a9db..452022cf6d 100644 --- a/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx +++ b/packages/@ourworldindata/grapher/src/noDataModal/NoDataModal.tsx @@ -12,6 +12,7 @@ import { BASE_FONT_SIZE, DEFAULT_GRAPHER_ENTITY_TYPE, DEFAULT_GRAPHER_ENTITY_TYPE_PLURAL, + GRAPHER_TEXT_OUTLINE_FACTOR, } from "../core/GrapherConstants" import { Halo } from "@ourworldindata/components" import { GRAPHER_DARK_TEXT, GRAPHER_LIGHT_TEXT } from "../color/ColorConstants" @@ -65,12 +66,16 @@ export class NoDataModal extends React.Component<{ const center = bounds.centerPos const padding = 0.75 * this.fontSize const showHelpText = !isStatic && !!helpText + const helpTextFontSize = 0.9 * this.fontSize return ( - + {showHelpText && ( - + {helpText} diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx index 28caf2ae62..b9a67b6e1e 100644 --- a/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx +++ b/packages/@ourworldindata/grapher/src/scatterCharts/ComparisonLine.tsx @@ -12,7 +12,10 @@ import { DualAxis } from "../axis/Axis" import { generateComparisonLinePoints } from "./ComparisonLineGenerator" import { Halo } from "@ourworldindata/components" import { Color, ComparisonLineConfig } from "@ourworldindata/types" -import { GRAPHER_FONT_SCALE_10_5 } from "../core/GrapherConstants" +import { + GRAPHER_FONT_SCALE_10_5, + GRAPHER_TEXT_OUTLINE_FACTOR, +} from "../core/GrapherConstants" @observer export class ComparisonLine extends React.Component<{ @@ -84,6 +87,8 @@ export class ComparisonLine extends React.Component<{ render(): React.ReactElement { const { linePath, renderUid, placedLabel } = this + const fontSize = GRAPHER_FONT_SCALE_10_5 * this.props.baseFontSize + return ( - +