Implement Core Typography

[yashwin]

Proposed Changes

This PR creates heading and body text mixins on Calypso that match with Core Typography.

Edit

We are using the core mixins and variables here

Why are these changes being made?

To align the user experience more closely with Core, we are implementing Core typography within Calypso. This would allow A4A and Dotcom to adopt consistent typography moving forward.

Testing Instructions

• Open the A4A live link
• Go to Marketplace: Products(marketplace/products) > We have updated one text from this page to use the newly created mixin as this is behind a feature flag and we have designed this page as per Core Typography. Verify everything looks good.

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-130412

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-130412&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-130412&env=a8c-for-agencies

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• notifications
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug add/implement-core-typography on your sandbox.

[madebynoam]

Thanks, @yashwin! Lgtm!

[keoshi]

LGTM!

[ciampo]

Creating a local copy of something that is only half-implemented in core can very easily lead to inconsistencies that will diverge more and more as time goes.

Reading pfunGA-4Ch-p2 , I'm not sure I see a consensus from the folks who worked on the original core specs to go ahead with this approach (@jameskoster @jasmussen ). Let's make sure we're aligned before committing to this approach (also cc @Automattic/team-calypso )

[yashwin]

Creating a local copy of something that is only half-implemented in core can very easily lead to inconsistencies that will diverge more and more as time goes.

Reading pfunGA-4Ch-p2 , I'm not sure I see a consensus from the folks who worked on the original core specs to go ahead with this approach (@jameskoster @jasmussen ). Let's make sure we're aligned before committing to this approach (also cc @Automattic/team-calypso )

Thank you for raising this point! You can see the thread: p1737113968596349-slack-C0896RP2P28. I have also asked for their review on this PR 🙂

[ciampo]

Thank you for sharing the link — this conversation happening across p2, slack and GH was quite hard to follow and I had missed it initially.

I also think we should make sure we have a strategy for how, in the future, we're going to converge and unify the local copy being added today, with the code sitting upstream.

Are we even going to be able to import variables/mixins from Core? Are we going to get tokens via theming? Are we going to apply the typography via the Text and Heading components from @worpress/components package once they implement the new typography rules?

Knowing the future strategy will also inform what's the best way to implement a local copy.

[jasmussen]

Marco shares some good concerns, which I also share and have voiced on the thread. However ultimately I'll defer to Jay on what's the best practice.

[jameskoster]

For me the important thing in the short term is to utilise a single set of tokens for typographical appearance, and avoid anything custom or hard-coded. The scss vars/mixins recently added to the system seem like the best candidate for us to rally around, with a view to holistically expanding/refining later as required.

In terms of how we do it, Marco will know much better than me.

[tyxla]

I also agree with @ciampo's concerns.

Duplicating core typography styles can lead to additional maintenance work and potential inconsistencies as the codebases diverge.

Have we considered a way to actually reuse them instead of duplicating them?

Also, we need to think about a plan on potential changes that might be necessary in the future. Specifically, we might need to push changes upstream at some point, so it only makes sense to stay as close to core as possible and reuse everything.

[yashwin]

Thanks for the review, @tyxla!

Have we considered a way to actually reuse them instead of duplicating them?

Could you please elaborate on what you mean by "reuse" here?

FWIW, we are using the core mixins and variables here

Edit:

We are exploring if there is a way to import directly from wp-base-styles

[tyxla]

Could you please elaborate on what you mean by "reuse" here?
We are exploring if there is a way to import directly from wp-base-styles

Yes, something like that is what I'd prefer. Even if they're the same as core, redeclaring them essentially duplicates them and incurs additional maintenance costs.

[yashwin]

Thanks everyone for the feedback!

We can reuse the mixins from Core. Read more: pfunGA-4Ch-p2#comment-7828 So, I'm closing this PR as we will create a new PR.