✨ make text outline work in Figma

Using ems for the outline's width doesn't work in Figma.
owid · Feb 6, 2025 · f9e8451 · f9e8451
1 parent 88814fb
commit f9e8451
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 (
             <g className="no-data">
                 <rect {...bounds.toProps()} fill="#fff" opacity={0.6} />
 
-                <Halo id="no-data-message">
+                <Halo
+                    id="no-data-message"
+                    outlineWidth={GRAPHER_TEXT_OUTLINE_FACTOR * this.fontSize}
+                >
                     <text
                         x={center.x}
                         y={center.y}
@@ -89,13 +94,18 @@ export class NoDataModal extends React.Component<{
                 </Halo>
 
                 {showHelpText && (
-                    <Halo id="no-data-help">
+                    <Halo
+                        id="no-data-help"
+                        outlineWidth={
+                            GRAPHER_TEXT_OUTLINE_FACTOR * helpTextFontSize
+                        }
+                    >
                         <text
                             x={center.x}
                             y={center.y + padding / 2}
                             textAnchor="middle"
                             dy={dyFromAlign(VerticalAlign.bottom)}
-                            fontSize={0.9 * this.fontSize}
+                            fontSize={helpTextFontSize}
                             fill={GRAPHER_LIGHT_TEXT}
                         >
                             {helpText}

diff --git 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<{
@@ -85,6 +88,8 @@ export class ComparisonLine extends React.Component<{
         const { innerBounds } = this.props.dualAxis
         const { linePath, renderUid, placedLabel } = this
 
+        const fontSize = GRAPHER_FONT_SCALE_10_5 * this.props.baseFontSize
+
         return (
             <g
                 id={makeIdForHumanConsumption("comparison-line")}
@@ -114,9 +119,7 @@ export class ComparisonLine extends React.Component<{
                 {placedLabel && (
                     <text
                         style={{
-                            fontSize:
-                                GRAPHER_FONT_SCALE_10_5 *
-                                this.props.baseFontSize,
+                            fontSize,
                             opacity: 0.9,
                             textAnchor: "end",
                             fill: "#999",
@@ -125,6 +128,9 @@ export class ComparisonLine extends React.Component<{
                     >
                         <Halo
                             id={`path-${renderUid}`}
+                            outlineWidth={
+                                GRAPHER_TEXT_OUTLINE_FACTOR * fontSize
+                            }
                             outlineColor={this.props.backgroundColor}
                         >
                             <textPath

diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterPointsWithLabels.tsx
@@ -40,6 +40,7 @@ import {
 } from "./ScatterUtils"
 import { Triangle } from "./Triangle"
 import { ColorScale } from "../color/ColorScale"
+import { GRAPHER_TEXT_OUTLINE_FACTOR } from "../core/GrapherConstants"
 
 // This is the component that actually renders the points. The higher level ScatterPlot class renders points, legends, comparison lines, etc.
 @observer
@@ -433,6 +434,9 @@ export class ScatterPointsWithLabels extends React.Component<ScatterPointsWithLa
                                     "outline",
                                     series.seriesName
                                 )}
+                                outlineWidth={
+                                    GRAPHER_TEXT_OUTLINE_FACTOR * label.fontSize
+                                }
                                 outlineColor={this.props.backgroundColor}
                             >
                                 <text
@@ -580,6 +584,9 @@ export class ScatterPointsWithLabels extends React.Component<ScatterPointsWithLa
                                     series.seriesName
                                 )}
                                 key={`${series.displayKey}-label-${index}`}
+                                outlineWidth={
+                                    GRAPHER_TEXT_OUTLINE_FACTOR * label.fontSize
+                                }
                                 outlineColor={this.props.backgroundColor}
                             >
                                 <text

diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/ScatterSizeLegend.tsx
@@ -13,6 +13,7 @@ import {
     BASE_FONT_SIZE,
     GRAPHER_FONT_SCALE_10,
     GRAPHER_FONT_SCALE_11,
+    GRAPHER_TEXT_OUTLINE_FACTOR,
 } from "../core/GrapherConstants"
 import { CoreColumn } from "@ourworldindata/core-table"
 import {
@@ -293,11 +294,6 @@ const LegendItem = ({
     outsideLabel?: boolean
     backgroundColor?: Color
 }): React.ReactElement => {
-    const style: React.CSSProperties = {
-        fontSize: labelFontSize,
-        fontWeight: labelFontWeight,
-        textAnchor: "middle",
-    }
     return (
         <g>
             <circle
@@ -311,15 +307,17 @@ const LegendItem = ({
             />
             <Halo
                 id={label}
+                outlineWidth={GRAPHER_TEXT_OUTLINE_FACTOR * labelFontSize}
                 outlineColor={backgroundColor}
-                style={{ ...style, strokeWidth: 3.5 }}
             >
                 <text
                     x={cx}
                     y={cy - circleRadius}
                     dy={outsideLabel ? "-.32em" : ".47em"}
                     fill={labelFill}
-                    style={style}
+                    fontSize={labelFontSize}
+                    fontWeight={labelFontWeight}
+                    textAnchor="middle"
                 >
                     {label}
                 </text>

diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -22,6 +22,7 @@ import {
     BASE_FONT_SIZE,
     GRAPHER_FONT_SCALE_12,
     GRAPHER_OPACITY_MUTE,
+    GRAPHER_TEXT_OUTLINE_FACTOR,
 } from "../core/GrapherConstants"
 import {
     ScaleType,
@@ -1242,6 +1243,9 @@ export class SlopeChart
             return (
                 <Halo
                     id="x-axis-zero-label"
+                    outlineWidth={
+                        GRAPHER_TEXT_OUTLINE_FACTOR * this.lineLegendFontSize
+                    }
                     outlineColor={this.backgroundColor}
                 >
                     <text