feat: first pass at base fonts, colours

[laurelfulford]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR takes a first pass at setting up the theme's default font sizing and colours, based on the mockups.

How to test the changes in this Pull Request:

I'm going to break this out into two sections, since the review process is pretty separate.

Fonts

Font mock-ups for reference

From Thomas's designs -- clamping notes and CSS:

1. Apply the PR, and create a new page.
2. Add six paragraph blocks; for each assign a different size from the list in the sidebar (also confirm that you have all of these options!):

3. Add six header blocks, and set them to a different header level, ranging from h1 - h6.
4. Add one normal paragraph.
5. Publish and view on the front-end.
6. Scale up and down the browser window; confirm that the minimum and maximum sizes set for the font's size range in the mock-ups matches how they appear in the browser, and that their styles match. They should be:
   • body: 18px, 1.6667 line height
   • x-small: 14px, 1.5 line height (slightly different from the attached mockups, but had been updated elsewhere in Figma).
   • small: 16px, 1.5 line-height
   • medium: 18px, 1.6667 line height
   • large: 20px - 22px, 1.5454 line height
   • x-large: 24px - 36px, 1.3333 line-height
   • xx-large: 28px - 48px, 1.25 line-height
   • h1: 32px - 64px, 1.25 line-height
   • h2: 28px - 48px, 1.25 line-height
   • h3: 24px - 36px, 1.3333 line-height
   • h4: 20px - 22px, 1.5454 line-height
   • h5: 18px, 1.6667 line height, all-caps
   • h6: 16px, 1.5 line height, all-caps, normal weight

Some notes about the fonts:

• The body and different custom font sizes don't have a way to set a line height yet, so I added them as custom CSS properties and referenced them in the CSS.

• Not all of the font sizes actually show the size value in the editor dropdown. This is because I've used clamp outside of the normal JSON formatting for fluid typography, to follow the breakpoints @thomasguillot included in the design.

Using WordPress's fluid typography, the font sizes would be formatted like:

"fluid": {
    "min": "0.875rem",
    "max": "1rem"
 },
"name": "X-Small",
"size": "1rem",
"slug": "x-small"

... and the breakpoints would be a minimum screen size of 768px and a maximum screen size of 1600px. In the designs, the breakpoints are actually a minimum screen size of 360px and a maximum screen size of 992px.

I think the lack of numbers is a reasonable trade off for the near-term -- rems are pretty meaningless to most! -- and I hope that the clamping min and max size is something we can control down the road (this is the closest issue I could find for now: WordPress/gutenberg#50189).

Colours

Colour mockups for reference

1. Open the post/page or site editor, and confirm the following colours appear in the editor colour picker:

• Base: #FFFFFF (background the mockups).
• Contrast: #1E1E1E (foreground in the mockups)
• Primary: #3366FF
• Secondary: #1522AF
• Tertiary: #757575 (Foreground Medium in the mockups)
• Quartary: #DDDDDD (Foreground Light in the mockups)
• Quinary: #F0F0F0; (Foreground Extra Light in the mockups)

2. Test them out on some elements in the editor and front-end and confirm that they work as expected.

Some notes about the colours:

The colour labels don't match the mockup, but that's on purpose: I used a combination of this FSE naming convention recommendation and this resource for words like "Quartary", but I'm open to feedback beyond that too!

The slugs are used to generate CSS classes for the different colours, so we want to be able to use a naming structure that will make sense across multiple style variations.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[laurelfulford]

I reworked the file structure a bit:

• I made a _css-variables.scss file (similar to breaking out the Sass variables/mixins into their own file). This file right now only includes applications of the CSS variables. In theory we should be able to define the theme variables in the theme.json, so this may end up being more about applying those custom variables, but I think it makes sense to separate them a bit.
• I also pulled out some styles from the _base.scss file into their own _gutenberg-shim.scss file -- these were two styles copied over from Block Canvas that will theoretically be replaced by Gutenberg functionality down the road.
• The _base.scss file remains kind of a weird mini-normalize CSS file for the theme now.

This might need more fine-tuning as we build stuff out but in theory the CSS for this theme should be relatively light, unless we're building out custom stuff (like the mobile header).

[dkoo]

I'm not sure I understand how the clamping works, but it does work as described!

[laurelfulford]

Thanks Derrick! 🎉

I'm not sure I understand how the clamping works...

Me neither 😅 Thomas included a link to a calculator in the Figma file that I should've included here, the values you get are kind of wild but at least you can check what two font sizes would turn into.

[matticbot]

🎉 This PR is included in version 1.2.0-alpha.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[matticbot]

🎉 This PR is included in version 1.2.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀