Commit 4c70f55
Charts: Replace hardcoded typography with WPDS design tokens (#47989)
* Charts: Replace hardcoded typography with WPDS design tokens
Replace all hardcoded font-family, font-size, font-weight, and line-height
values across chart SCSS modules and components with WPDS (WordPress Design
System) CSS custom property tokens (--wpds-font-*).
SCSS modules updated:
- conversion-funnel-chart: Replace SF Pro font families with --wpds-font-family-body,
all font sizes with --wpds-font-size-*, weights with --wpds-font-weight-*, and
line heights with --wpds-font-line-height-*
- line-chart: Tokenize tooltip font-weight and annotation popover font-size
- base-legend: Tokenize legend item font-size and value font-weight
- base-tooltip: Tokenize tooltip font-size
- pie-semi-circle-chart: Tokenize label font-weight/size and note font-size
- trend-indicator: Tokenize font-size and font-weight
- leaderboard-chart: Tokenize empty state font-size
Theme/component updates:
- Default theme svgLabelSmall: Add fontFamily token for SVG text elements
- pie-chart: Wire SVG label fontSize/fontFamily through theme.svgLabelSmall
- Leaderboard story: Remove hardcoded SF Pro Text fontFamily override
Documentation updates:
- conversion-funnel-chart docs: Replace --funnel-font-family/--step-font-family
with --wpds-font-family-body
- leaderboard-chart docs: Replace font-family examples with WPDS tokens
- pie-semi-circle-chart docs: Reference WPDS tokens for label/note typography
All tokens use current values as fallbacks to preserve visual backward
compatibility when WPDS tokens are not provided by the host environment.
* Charts: Remove CSS Custom Properties docs section from conversion funnel
WPDS tokens should be set through ThemeProvider, not raw CSS overrides.
Remove the entire section per review feedback.
* Charts: Simplify font-family fallback to just sans-serif
Per review feedback, use only sans-serif as the fallback for
--wpds-font-family-body instead of SF Pro or system font stacks.
Also remove WPDS token override from leaderboard CSS docs example.
* Charts: Remove redundant font-family from child selectors in conversion funnel
font-family is an inherited CSS property, so child elements within
.conversion-funnel-chart inherit it from the top-level selector.
Removed the redundant declarations from .main-rate, .change-indicator,
.step-label, .step-rate, .tooltip-title, and .tooltip-content.
Kept font-family on .tooltip-wrapper since tooltips render in a visx
portal outside the .conversion-funnel-chart DOM tree.
* Charts: Revert bold/semibold weights to hardcoded values
WPDS only provides --wpds-font-weight-regular (400) and
--wpds-font-weight-medium (499). There are no tokens for semibold (600)
or bold (700), so these should remain hardcoded rather than being
incorrectly mapped to --wpds-font-weight-medium.
* Charts: Align all font-weights to WPDS design system tokens
Use only weights available in the design system:
- --wpds-font-weight-medium with fallback 499
- --wpds-font-weight-regular with fallback 400
Previous 500, 600, and 700 values are all mapped to medium (499)
to match the WPDS token definitions.
* Charts: Add font-family token to the root selector of every chart
Apply font-family: var(--wpds-font-family-body, sans-serif) to the
outer selector of all chart SCSS modules so every chart opts in to
the WPDS font-family token. Children inherit automatically.
Charts updated: bar-chart, geo-chart, leaderboard-chart, line-chart,
pie-chart, pie-semi-circle-chart, sparkline.
(conversion-funnel-chart already had it.)
* Charts: Remove fontFamily from svgLabelSmall theme property
The fontFamily on svgLabelSmall was redundant: inline SVG <text>
elements inherit font-family from their parent HTML element via CSS
inheritance. Now that every chart root selector sets
font-family: var(--wpds-font-family-body, sans-serif), all SVG text
inside those charts inherits it automatically.
Also removes the explicit fontFamily prop from the pie chart's
slice label <text> element for the same reason.
* Charts: Fix PieChart label background sizing to use full theme typography
The label background width previously called getStringWidth with only
the numeric fontSize, silently falling back to 12 when svgLabelSmall.fontSize
was a string like '12px', and never passed fontFamily or fontWeight.
Export resolveFontSize from use-chart-margin so it can be reused, then
use it in PieChart and pass fontFamily/fontWeight through to getStringWidth
so the measured background matches the rendered label.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Charts: Restore backward compat for deprecated funnel font-family vars
Re-add --funnel-font-family and --step-font-family as fallbacks in the
ConversionFunnelChart cascade so consumers already setting either
variable continue to get their custom font. --wpds-font-family-body
takes precedence when set.
Both variables are now documented as deprecated in the Storybook docs
and will be removed in a future release.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Charts: Consolidate changelog into single entry for this PR
Remove the separate pie-chart and conversion-funnel changelog entries
added alongside the recent fixes. Their contents are covered by the
existing charts-typography-tokenization entry, which is the single
changelog entry for this PR.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Charts: Inherit font-family from host app instead of declaring it on chart roots
Chart components should not dictate their own font-family — that is the
host application's responsibility. Previously each chart module declared
font-family: var(--wpds-font-family-body, sans-serif) at its root, which
silently overrode the host's typography cascade whenever --wpds-font-family-body
was not defined.
Remove the declaration from every chart root (bar, line, pie, pie-semi-circle,
sparkline, geo, leaderboard, conversion-funnel) and from the conversion-funnel
tooltip-wrapper. Charts now inherit the font-family set by the host page or
component, which is the standard UI component convention.
Also drop the short-lived backward-compatibility layer for the deprecated
--funnel-font-family and --step-font-family custom properties and its docs
section, since with no font-family at the chart root there is no longer a
natural home for the fallback chain.
Consumers relying on the implicit sans-serif fallback will now inherit from
their host page. Consumers relying on the deprecated funnel custom properties
should set font-family on an ancestor element (typically body) via their own
theme layer.
Storybook now sets body font-family to --wpds-font-family-body, acting as a
WPDS-themed host so stories render with the design system font without the
chart components themselves declaring it.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Charts: Scope Storybook WPDS body font to charts stories only
The previous commit set body font-family in the shared Storybook SCSS,
which would have affected every package's stories. Move the rule to a
.charts-storybook-host wrapper applied by a decorator that only fires
for stories titled under "JS Packages/Charts Library", so charts still
render with the design system font without leaking typography changes
into other packages' stories.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Charts: Move WPDS font-family host wrapper into the charts story decorator
The previous commit applied the WPDS body font via a decorator and CSS
class in the shared Storybook preview. That worked but put charts-specific
concerns into code shared with every other package's stories.
Move the host-app font-family wrapper into the charts package's own
shared decorator (StoryChartProvider, which backs both chartDecorator
and simpleChartDecorator). Charts stories now render inside a div with
font-family: var(--wpds-font-family-body, system-ui, sans-serif) without
touching the shared storybook preview.jsx or style.scss.
Revert the shared Storybook changes from the previous commit so the
host-app simulation lives entirely in the charts package.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Charts: Extract resolveFontSize into a shared utility
resolveFontSize was defined locally inside use-chart-margin and then
re-exported through the hooks barrel so pie-chart could reuse it for
label sizing. Now that there are multiple call sites, move it into its
own file under src/utils alongside the other chart helpers and export
it from the utils barrel.
Drop the re-export from the hooks barrel and update pie-chart to import
directly from utils.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Charts: Override visx SVG label font-family with inherit
visx's buildChartTheme injects a hardcoded font stack
(-apple-system,BlinkMacSystemFont,Roboto,Helvetica Neue,sans-serif)
into every axis tickLabel and axisLabel style, which visx's Axis
components then apply as an inline style on SVG <text> elements.
Inline styles beat inherited CSS, so axis text was silently ignoring
the host application's font-family cascade regardless of what the
chart roots did.
Set fontFamily: 'inherit' on svgLabelSmall and svgLabelBig in the
default theme so the inline value emitted by visx is 'inherit',
letting SVG text actually pick up the host's font-family via normal
CSS inheritance — consistent with the rest of this PR's decision
that chart components should not dictate typography.
Expose svgLabelBig on ChartTheme so it can be overridden alongside
svgLabelSmall.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Charts: Drop system-ui from Storybook host font fallback
Earlier in this PR we standardized on a single sans-serif fallback for
--wpds-font-family-body across every chart SCSS module. The Storybook
decorator drifted from that policy by including system-ui in the middle
of the chain. Align it with the rest of the PR so the fallback policy
is consistent everywhere the variable is used.
The fallback is essentially defensive — design-tokens.css is imported
unconditionally by Storybook's preview, so the var should always
resolve in practice.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Charts: Standardize --wpds-font-size-md fallback to 13px
The same WPDS token was being used with three different fallback
values across the package: 13px (conversion-funnel, svg-empty-state),
14px (line-chart, leaderboard, base-tooltip, pie-semi-circle), and
0.875rem (trend-indicator, base-legend). When WPDS tokens are present
they all resolve to the same canonical value, but in no-WPDS
environments the inconsistency produced visibly different sizes
between adjacent components in the same chart.
Standardize on 13px — the actual WPDS design system value for
--wpds-font-size-md — so the fallback matches the token everywhere
and matches the policy already used by the conversion funnel and
empty state. Update the pie-semi-circle docs to reflect the new
default.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Charts: Tighten resolveFontSize parsing and add unit tests
The previous implementation used parseFloat() on any string input,
which silently accepted relative units like 0.875rem and returned
the unitless prefix (0.875). Callers in use-chart-margin and
pie-chart would then treat that as a pixel value, producing
nearly-zero margins or invisible label backgrounds.
Tighten the parser to accept only plain numeric strings and pixel
values, rejecting rem, em, %, vh, vw, and CSS keywords like inherit
or medium. The function now matches its JSDoc contract: returns
undefined for any value it cannot reliably resolve to absolute
pixels, so callers fall back to their own defaults.
Add a dedicated unit test file covering numeric input, pixel
strings, whitespace trimming, NaN, undefined, empty strings,
unparseable input, and the previously-accepted relative units that
should now be rejected.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Charts: Drop id="app" from Storybook chart decorator wrapper
The id was added as a label of intent for the host-app font wrapper
div, but Storybook docs pages render multiple stories side-by-side
in the same DOM, which would produce duplicate id attributes —
invalid HTML and a potential selector collision.
The wrapper's purpose is documented by the adjacent comment, so the
id is unnecessary. Remove it.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/24169137406
Upstream-Ref: Automattic/jetpack@0dc3e761 parent 35dfc1a commit 4c70f55
File tree
6 files changed
+64
-64
lines changed- jetpack_vendor/automattic/jetpack-my-jetpack/build
- vendor/composer
6 files changed
+64
-64
lines changedLines changed: 1 addition & 1 deletion
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
1 | | - | |
| 1 | + | |
Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
7 | 7 | | |
8 | 8 | | |
9 | 9 | | |
10 | | - | |
| 10 | + | |
11 | 11 | | |
12 | 12 | | |
13 | 13 | | |
| |||
64 | 64 | | |
65 | 65 | | |
66 | 66 | | |
67 | | - | |
| 67 | + | |
68 | 68 | | |
69 | 69 | | |
70 | 70 | | |
| |||
136 | 136 | | |
137 | 137 | | |
138 | 138 | | |
139 | | - | |
| 139 | + | |
140 | 140 | | |
141 | 141 | | |
142 | 142 | | |
| |||
216 | 216 | | |
217 | 217 | | |
218 | 218 | | |
219 | | - | |
| 219 | + | |
220 | 220 | | |
221 | 221 | | |
222 | 222 | | |
| |||
290 | 290 | | |
291 | 291 | | |
292 | 292 | | |
293 | | - | |
| 293 | + | |
294 | 294 | | |
295 | 295 | | |
296 | 296 | | |
| |||
362 | 362 | | |
363 | 363 | | |
364 | 364 | | |
365 | | - | |
| 365 | + | |
366 | 366 | | |
367 | 367 | | |
368 | 368 | | |
| |||
420 | 420 | | |
421 | 421 | | |
422 | 422 | | |
423 | | - | |
| 423 | + | |
424 | 424 | | |
425 | 425 | | |
426 | 426 | | |
| |||
479 | 479 | | |
480 | 480 | | |
481 | 481 | | |
482 | | - | |
| 482 | + | |
483 | 483 | | |
484 | 484 | | |
485 | 485 | | |
| |||
547 | 547 | | |
548 | 548 | | |
549 | 549 | | |
550 | | - | |
| 550 | + | |
551 | 551 | | |
552 | 552 | | |
553 | 553 | | |
| |||
611 | 611 | | |
612 | 612 | | |
613 | 613 | | |
614 | | - | |
| 614 | + | |
615 | 615 | | |
616 | 616 | | |
617 | 617 | | |
| |||
686 | 686 | | |
687 | 687 | | |
688 | 688 | | |
689 | | - | |
| 689 | + | |
690 | 690 | | |
691 | 691 | | |
692 | 692 | | |
| |||
774 | 774 | | |
775 | 775 | | |
776 | 776 | | |
777 | | - | |
| 777 | + | |
778 | 778 | | |
779 | 779 | | |
780 | 780 | | |
| |||
832 | 832 | | |
833 | 833 | | |
834 | 834 | | |
835 | | - | |
| 835 | + | |
836 | 836 | | |
837 | 837 | | |
838 | 838 | | |
| |||
889 | 889 | | |
890 | 890 | | |
891 | 891 | | |
892 | | - | |
| 892 | + | |
893 | 893 | | |
894 | 894 | | |
895 | 895 | | |
| |||
968 | 968 | | |
969 | 969 | | |
970 | 970 | | |
971 | | - | |
| 971 | + | |
972 | 972 | | |
973 | 973 | | |
974 | 974 | | |
| |||
1030 | 1030 | | |
1031 | 1031 | | |
1032 | 1032 | | |
1033 | | - | |
| 1033 | + | |
1034 | 1034 | | |
1035 | 1035 | | |
1036 | 1036 | | |
| |||
1109 | 1109 | | |
1110 | 1110 | | |
1111 | 1111 | | |
1112 | | - | |
| 1112 | + | |
1113 | 1113 | | |
1114 | 1114 | | |
1115 | 1115 | | |
| |||
1169 | 1169 | | |
1170 | 1170 | | |
1171 | 1171 | | |
1172 | | - | |
| 1172 | + | |
1173 | 1173 | | |
1174 | 1174 | | |
1175 | 1175 | | |
| |||
1226 | 1226 | | |
1227 | 1227 | | |
1228 | 1228 | | |
1229 | | - | |
| 1229 | + | |
1230 | 1230 | | |
1231 | 1231 | | |
1232 | 1232 | | |
| |||
1330 | 1330 | | |
1331 | 1331 | | |
1332 | 1332 | | |
1333 | | - | |
| 1333 | + | |
1334 | 1334 | | |
1335 | 1335 | | |
1336 | 1336 | | |
| |||
1389 | 1389 | | |
1390 | 1390 | | |
1391 | 1391 | | |
1392 | | - | |
| 1392 | + | |
1393 | 1393 | | |
1394 | 1394 | | |
1395 | 1395 | | |
| |||
1455 | 1455 | | |
1456 | 1456 | | |
1457 | 1457 | | |
1458 | | - | |
| 1458 | + | |
1459 | 1459 | | |
1460 | 1460 | | |
1461 | 1461 | | |
| |||
1515 | 1515 | | |
1516 | 1516 | | |
1517 | 1517 | | |
1518 | | - | |
| 1518 | + | |
1519 | 1519 | | |
1520 | 1520 | | |
1521 | 1521 | | |
| |||
1584 | 1584 | | |
1585 | 1585 | | |
1586 | 1586 | | |
1587 | | - | |
| 1587 | + | |
1588 | 1588 | | |
1589 | 1589 | | |
1590 | 1590 | | |
| |||
1657 | 1657 | | |
1658 | 1658 | | |
1659 | 1659 | | |
1660 | | - | |
| 1660 | + | |
1661 | 1661 | | |
1662 | 1662 | | |
1663 | 1663 | | |
| |||
1716 | 1716 | | |
1717 | 1717 | | |
1718 | 1718 | | |
1719 | | - | |
| 1719 | + | |
1720 | 1720 | | |
1721 | 1721 | | |
1722 | 1722 | | |
| |||
1774 | 1774 | | |
1775 | 1775 | | |
1776 | 1776 | | |
1777 | | - | |
| 1777 | + | |
1778 | 1778 | | |
1779 | 1779 | | |
1780 | 1780 | | |
| |||
1842 | 1842 | | |
1843 | 1843 | | |
1844 | 1844 | | |
1845 | | - | |
| 1845 | + | |
1846 | 1846 | | |
1847 | 1847 | | |
1848 | 1848 | | |
| |||
1918 | 1918 | | |
1919 | 1919 | | |
1920 | 1920 | | |
1921 | | - | |
| 1921 | + | |
1922 | 1922 | | |
1923 | 1923 | | |
1924 | 1924 | | |
| |||
1991 | 1991 | | |
1992 | 1992 | | |
1993 | 1993 | | |
1994 | | - | |
| 1994 | + | |
1995 | 1995 | | |
1996 | 1996 | | |
1997 | 1997 | | |
| |||
0 commit comments