MWPW-203933: JP Discover page font styling - #698
Open
echen-adobe wants to merge 13 commits into
Open
Conversation
Legacy heading/body size tokens overshoot the Figma-approved JP scale and their line-heights are too tight for Adobe Clean Han, hurting legibility on JP Discover pages. font-styling-jp.css redefines the shared typography custom properties so every block that already consumes them picks up the JP scale with no per-block authoring; two hardcoded exceptions (blog.css section h3, discover-cards flip-card headings) get scoped overrides via :not(#_) instead of !important. Loaded only when a page or domain sets `font-styling: jp` metadata.
… body The long-form/long-form-blog styles that actually render Discover article content read a third, previously-untouched typography namespace (--Global-Typography-Size-Headings-Heading-XL/L, --Global-Typography-Size- Body-Body-M) for the bulk of the page's headings and all body copy, so the first pass looked like no change had happened. Override those tokens too, including the 1200px breakpoint that re-escalates them back to the old sizes, and fix the two hardcoded line-heights that don't read any token. Also trim() the metadata value before comparing, defensively.
… tier Checked the desktop-scoped Figma node (7643-98563) against the mobile one used earlier: --ax-heading-* and --Global-Typography-Size-Headings-*/Body- Body-M already match the approved JP scale natively at both the mobile base and the 1200px breakpoint, so freezing them to the mobile value was wrong and shrank desktop text below spec. Reverting that. The actual gap is that the legacy --heading/body-font-size-* tokens have no responsive tier at all; this adds the matching 1200px values confirmed by the same two Figma nodes.
The header comment contained the literal substring "Heading-*/Body" -
an asterisk immediately followed by a slash, which is a CSS comment
terminator. That closed the comment early; everything after it (plain
English) was invalid CSS, so the parser's error recovery skipped ahead
and ate the entire base :root {} block along with it. Verified via
CSSStyleSheet.replaceSync() before and after: 5 rules (base :root
missing) -> 6 rules (base :root present). This is why the site only
ever showed the >=1200px override and never the mobile-tier values.
.section.long-form binds each heading level one tier below the JP text style the Figma discover design assigns it (h2 reads --heading-font-size-m but design wants Headings/L; h3 reads --heading-font-size-s but wants Headings/M), so redefining root vars couldn't reach the spec without dragging every other block that shares those tokens. Re-point h2->L and h3->M with selectors scoped to non-blog long-form. Body/M and h4-h6 were already correct. Verified level->style mapping against Figma nodes 7427:77355 (h2=Headings/L) and 7427:77364/77367 (h3=Headings/M).
Verified against Figma nodes 7319-154859 (mobile) and 7868-41979 (tablet): every typography token is identical across the 320-1199 range; the tablet node differs only in grid/padding. So the base :root block already covers mobile and tablet, and >=1200 is the only step-up. Added a note so a future dev doesn't add a redundant 600-1199 tier. No behavior change.
echen-adobe
requested review from
maxn-adobe,
meganthecoder and
nateyolles
as code owners
August 18, 2026 18:32
|
Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
|
|
nateyolles
approved these changes
Aug 25, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a toggleable JP typography override (
font-styling: jppage/domain metadata) for Discover pages. Legacy--heading/body-font-size-*tokens don't have responsive tiers and overshoot the Figma-approved JP scale;font-styling-jp.cssredefines those shared custom properties across a mobile/tablet tier and a >=1200px desktop tier so blocks consuming them (long-form article body, hero/marquee heading, blog.cssh3, discover-cards flip headings) pick up correct JP sizing without per-block authoring.Jira Ticket
Resolves: MWPW-203933
Test URLs
Verification Steps
h3and discover-cards flip-card headings still render correctly (line-height fix only, no size regression).Potential Regressions
N/A
Additional Notes
N/A