Add: Morning style variation. #261

juanfra · 2024-09-09T16:39:27Z

Description

Add the Morning (Literata 60pt + Ysabeau Office) global style variation.
Partial for #193

Known limitations

Many font sizes don't match the presets. They were hardcoded in this PR.
The post author section has a hardcoded font preset in the template that doesn't match the design. So the author size is different than the text that says "Written by".
The font size for the comments section looks small in the context, but there's no design for the comments for this variation.

Screenshots

Testing Instructions

Go to Appearance > Editor > Styles
At the top of the styles panel, select "Morning".
Save.
Compare the design with the design in Figma

beafialho · 2024-09-10T10:08:29Z

@juanfra I noticed the titles are looking different than the headings, they seem to have specific styling. If you disable them, the appearance looks right:

titles.mp4

The font sizes are not looking very good. I think we should reset all the heading sizes in this variation to use the sizes from the default one, as they look much better.

github-actions · 2024-09-16T14:41:09Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: juanfra <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: beafialho <[email protected]>
Co-authored-by: jasmussen <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2024-09-23T08:44:32Z

Preview changes

You can preview these changes by following the link below:

Preview changes for twentytwentyfive

I will update this comment with the latest preview links as you push more changes to this PR.
⚠️ Note: The preview sites are created using WordPress Playground. You can add content, edit settings, and test the themes as you would on a real site, but please note that changes are not saved between sessions.

carolinan

Style 2

Headings use the text color #191919 (contrast) against the background #182949 (accent 3). This has a contrast ratio of
1.21:1. It needs to be 4.5:1.

I believe this is meant to use base, to match the paragraph text color.

juanfra · 2024-09-23T13:16:47Z

Thanks, Carolina. Good catch. I've updated the variation with that change.

carolinan · 2024-09-23T13:56:45Z

styles/morning.json

+		"variations": {
+			"post-terms-1": {
+				"typography": {
+					"fontSize": "16px"


Does this need to be hardcoded? Is there no matching responsive preset size?

There's no preset for 16px, which is the size of the font size for this particular element in the variation. We have --wp--preset--font-size--normal from Gutenberg, which is 16px, but we can't use that.

If we don't want to hardcode the value, we could use medium (18px) or small (14px) alternatives.

I'd always go for the larger :)

Should we run this by Bea once she's back?

carolinan · 2024-09-23T14:06:38Z

Feedback: I am struggling to read font size preset small which is 14px, up to preset medium 18px with this font over the grey background.
The text color and background color has a contrast ratio of 4.66:1 which is within the WCAG AA level requirement, but for me, a higher contrast or even better a larger size would help.

This is even more appearant with the new zoom out.

Both the default and Dusk are much more readable to me because of the different size of these fonts.

carolinan · 2024-09-23T14:22:41Z

size-comparison.mp4

juanfra · 2024-09-23T16:11:04Z

Thanks for the feedback, Carolina.

The issues you highlighted are related to the size of the Ysabeau font, compared to fonts used in other variations. The menu item size will happen the other way around with variations like Twilight or Midnight, where the font size for those elements is bigger.

I believe this is a conversation we want to have with design, as some of these elements are probably intended to be like that. Given the time constraints of beta 1, if these are the only blockers, we could merge this and have a new issue to discuss what you highlighted and get @beafialho and @jasmussen in the conversation.

carolinan · 2024-09-24T06:35:14Z

styles/morning.json

+				"elements": {
+					"cite": {
+						"typography": {
+							"fontSize": "1.12rem",


I believe this needs to use em if it is supposed to be relative to the size of the quote.

The intention was to have it in rem to match the design (~18px). Now that I see this, we can use the medium preset. Unless you prefer to have the em value.

jasmussen · 2024-09-24T07:36:51Z

Zoom out, give or take any changes that comes to this, should not dictate any font size rules in the theme.

The core of the issue, though: is the gray on light gray font legible at 14px? For me it is, so I'd be tempted to echo Juan and merge this for Beta 1 and then revisit the font sizes (or perhaps the font weights) after the beta period. Notably, Bea is AFK this week, a vacation planned months before the 6.7 cycle even had dates attached, and I'd appreciate her quick gut-check when she gets back.

How does that sound?

carolinan · 2024-09-24T08:36:22Z

Nobody is pressuring anyone to not have a vacation ❤️

jasmussen · 2024-09-24T08:41:22Z

Nobody is pressuring anyone to not have a vacation ❤️

Oh, I didn't mean to imply otherwise, and I supremely agree!

juanfra · 2024-09-24T09:39:45Z

How does that sound?

That sounds great to me.

I'd prefer not to iterate on the designs now and have Bea (after she's back from her well-deserved time off) participate in the discussion, as there might be some reasoning behind some of the selections (sizes, colors, etc.). We should keep track of all these concerns so we can return to them.

carolinan · 2024-09-24T09:44:09Z

Please remember that the beta 1 date is not something we have the power to move.

juanfra added 2 commits September 9, 2024 18:29

Add morning style variation.

b65e8d3

Add rem values.

54535ad

juanfra added the [Component] Style Variations label Sep 9, 2024

juanfra requested review from carolinan and beafialho September 9, 2024 16:39

Update site tagline font size to match design.

e574042

Remove heading sizes.

5850ded

juanfra added the [Priority] High Used to indicate top priority items that need quick attention label Sep 16, 2024

juanfra added 3 commits September 16, 2024 15:42

Merge branch 'trunk' into try/add-morning-style-variation

e88b3ea

Update font-weight for post title.

1cc2227

Set button border-radius to 0

0762d21

juanfra marked this pull request as ready for review September 16, 2024 14:40

Merge branch 'trunk' into try/add-morning-style-variation

5e8804d

carolinan requested changes Sep 23, 2024

View reviewed changes

juanfra added 2 commits September 23, 2024 15:15

Apply suggestions from the code review.

bae9abb

Rename file.

cae2a95

juanfra requested a review from carolinan September 23, 2024 13:16

carolinan reviewed Sep 23, 2024

View reviewed changes

juanfra added the [Status] Needs Design Feedback Needs general design feedback. label Sep 23, 2024

carolinan reviewed Sep 24, 2024

View reviewed changes

Use medium font size preset for cite.

2e1918b

carolinan merged commit 3e80d4b into trunk Sep 24, 2024
4 checks passed

juanfra deleted the try/add-morning-style-variation branch September 24, 2024 09:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add: Morning style variation. #261

Add: Morning style variation. #261

juanfra commented Sep 9, 2024

beafialho commented Sep 10, 2024

github-actions bot commented Sep 16, 2024 •

edited

Loading

github-actions bot commented Sep 23, 2024 •

edited

Loading

carolinan left a comment

juanfra commented Sep 23, 2024

carolinan Sep 23, 2024

juanfra Sep 23, 2024

carolinan Sep 24, 2024

juanfra Sep 24, 2024

carolinan commented Sep 23, 2024 •

edited

Loading

carolinan commented Sep 23, 2024

juanfra commented Sep 23, 2024

carolinan Sep 24, 2024

juanfra Sep 24, 2024

jasmussen commented Sep 24, 2024

carolinan commented Sep 24, 2024

jasmussen commented Sep 24, 2024

juanfra commented Sep 24, 2024

carolinan commented Sep 24, 2024

Add: Morning style variation. #261

Add: Morning style variation. #261

Conversation

juanfra commented Sep 9, 2024

beafialho commented Sep 10, 2024

github-actions bot commented Sep 16, 2024 • edited Loading

github-actions bot commented Sep 23, 2024 • edited Loading

Preview changes

carolinan left a comment

Choose a reason for hiding this comment

Style 2

juanfra commented Sep 23, 2024

carolinan Sep 23, 2024

Choose a reason for hiding this comment

juanfra Sep 23, 2024

Choose a reason for hiding this comment

carolinan Sep 24, 2024

Choose a reason for hiding this comment

juanfra Sep 24, 2024

Choose a reason for hiding this comment

carolinan commented Sep 23, 2024 • edited Loading

carolinan commented Sep 23, 2024

juanfra commented Sep 23, 2024

carolinan Sep 24, 2024

Choose a reason for hiding this comment

juanfra Sep 24, 2024

Choose a reason for hiding this comment

jasmussen commented Sep 24, 2024

carolinan commented Sep 24, 2024

jasmussen commented Sep 24, 2024

juanfra commented Sep 24, 2024

carolinan commented Sep 24, 2024

github-actions bot commented Sep 16, 2024 •

edited

Loading

github-actions bot commented Sep 23, 2024 •

edited

Loading

carolinan commented Sep 23, 2024 •

edited

Loading