feat: use typography tokens in o-topper and o-teaser #1938

frshwtr · 2025-01-20T16:01:27Z

Describe your changes

Uses typography tokens within the o-topper component

Issue ticket number and link

Link to Figma designs

Checklist before requesting a review

I have applied percy label for o-[COMPONENT] or chromatic label for o3-[COMPONENT] on my PR before merging and after review. Find more details in CONTRIBUTING.md
If it is a new feature, I have added thorough tests.
I have updated relevant docs.
I have updated relevant env variables in Doppler.

frshwtr · 2025-01-20T16:01:58Z

Todo: cross check topper components

frshwtr · 2025-01-20T16:02:25Z

Todo: there are some other private typography uses e.g oPrivateTypographyLink and one for UL too, make sure to change these.

frshwtr · 2025-01-21T15:36:41Z

Increased font/line height is making the background of this text container larger
This branch

Main

notlee

Lots here! I'm not convinced it's all related to this PR though...

notlee · 2025-01-21T16:30:45Z

components/o-topper/src/scss/themes/_package.scss

+		font-family: oPrivateFoundationGet('o3-typography-use-case-display-sm-font-family');
+		font-size: oPrivateFoundationGet('o3-typography-use-case-display-sm-font-size');
 		font-weight: 400;
+		line-height: oPrivateFoundationGet('o3-typography-use-case-display-sm-line-height');


This isn't using the usecase properly as it's a custom font weight (400 is also too high compared with Metric is seems). I think headline-md fits better here (please double check)?

Suggested change

font-family: oPrivateFoundationGet('o3-typography-use-case-display-sm-font-family');

font-size: oPrivateFoundationGet('o3-typography-use-case-display-sm-font-size');

font-weight: 400;

line-height: oPrivateFoundationGet('o3-typography-use-case-display-sm-line-height');

font-family: oPrivateFoundationGet('o3-typography-use-case-headline-md-font-family');

font-size: oPrivateFoundationGet('o3-typography-use-case-headline-md-font-size');

font-weight: oPrivateFoundationGet('o3-typography-use-case-headline-md-line-height');

line-height: oPrivateFoundationGet('o3-typography-use-case-headline-md-line-height');

Fixed, though turns out there's more specific classes applying styles for this element.

components/o-private-foundation/src/scss/o-typography/main.scss

notlee · 2025-01-21T16:34:17Z

components/o-topper/src/scss/_elements.scss

@@ -103,7 +118,10 @@
 }

 @mixin _oTopperTags {
-	@include oPrivateTypographySans(0);


We've lost the colour of the topic tags somehow? An issue with this PR or..?

Seems to be related to the private foundation colour changes we did a few sprints ago. Will take a look.

notlee · 2025-01-21T16:42:35Z

components/o-topper/src/scss/_elements.scss

 	color: oPrivateFoundationGet('o3-color-palette-white');
 	position: absolute;
 	text-shadow: 1px 1px 1px oPrivateFoundationGet('o3-color-palette-slate');


Comparing the latest release on npm (demo via the build service). The image credit no longer appears white with a shadow, it's along with the caption instead. I don't see an obvious change in this PR to explain it. What happened here?

For me they display identical, though I see other issues. Can we catch up some point this week to see why it looks differently for both of us?

components/o-topper/src/scss/_elements.scss

components/o-topper/src/scss/themes/_branded.scss

notlee · 2025-01-21T16:55:07Z

components/o-topper/src/scss/_elements.scss

@@ -8,7 +8,10 @@
 }



_oTopperColumnistName? 😱

I believe most of the colour issues are unrelated to the typography changes. I am happy to fix on this PR or move to a ticket. Either way it will need fixing this sprint!

notlee · 2025-01-21T17:06:00Z

components/o-teaser/src/scss/themes/_top-stories.scss

+		font-family: oPrivateFoundationGet('o3-typography-use-case-display-sm-font-family');
+		font-size: oPrivateFoundationGet('o3-typography-use-case-display-sm-font-size');
+		font-weight: oPrivateFoundationGet('o3-typography-use-case-display-sm-font-weight');
+		line-height: oPrivateFoundationGet('o3-typography-use-case-display-sm-line-height');
 		@include oPrivateGridRespondTo('L') {
-			@include oPrivateTypographyDisplay(7);
+			font-family: oPrivateFoundationGet('o3-typography-use-case-display-lg-font-family');
+			font-size: oPrivateFoundationGet('o3-typography-use-case-display-lg-font-size');
+			font-weight: oPrivateFoundationGet('o3-typography-use-case-display-lg-font-weight');
+			line-height: oPrivateFoundationGet('o3-typography-use-case-display-lg-line-height');


I think you've missed some oPrivateTypographyDisplay calls in o-teaser. Looks like the following screenshot is a little too bold, maybe title would be better? Think it's coming from o-teaser__heading in _oTeaserLarge.

A similar example here in demo core-large-opinion. But also, why does the copy colour now match the background? 😱

notlee · 2025-01-21T17:11:13Z

components/o-teaser/main.scss

@@ -4,7 +4,6 @@

 @import 'src/scss/variables';
 @import 'src/scss/mixins';


_oTeaserTimestamp is tiny! Let's remove its use of oLabelsTimestampContent and set to label

…ain.scss Co-authored-by: Lee Moody <[email protected]>

…okens-in-topper

notlee · 2025-01-22T14:43:11Z

components/o-topper/src/scss/_mixins.scss

-			@include oEditorialTypographyHeading($level: 1);
+			font-family: oPrivateFoundationGet('o3-typography-use-case-headline-md-font-family');
+			font-size: oPrivateFoundationGet('o3-typography-use-case-headline-md-font-size');
+			font-weight: oPrivateFoundationGet('o3-typography-use-case-headline-md-font-weight');
+			line-height: oPrivateFoundationGet('o3-typography-use-case-headline-md-line-height');
 			margin-bottom: oPrivateSpacingByIncrement(5);
 		}

 		.o-topper__headline--large {
-			@include oEditorialTypographyHeadline();
+			font-family: oPrivateFoundationGet('o3-typography-use-case-headline-lg-font-family');
+			font-size: oPrivateFoundationGet('o3-typography-use-case-headline-lg-font-size');
+			font-weight: oPrivateFoundationGet('o3-typography-use-case-headline-lg-font-weight');
+			line-height: oPrivateFoundationGet('o3-typography-use-case-headline-lg-line-height');


oEditorialTypographyHeading(1) / oEditorialTypographyHeadline were responsive before right? This should recreate that using tokens. o-topper__headline should match the headline o3-editorial-typography component and o-topper__headline--large should match the display component, both change the type usecase size responsively.

Something like

font-family: oPrivateFoundationGet('o3-typography-use-case-headline-sm-font-family'); font-size: oPrivateFoundationGet('o3-typography-use-case-headline-sm-font-size'); font-weight: oPrivateFoundationGet('o3-typography-use-case-headline-sm-font-weight'); line-height: oPrivateFoundationGet('o3-typography-use-case-headline-sm-line-height'); @include oPrivateGridRespondTo('S') { font-family: oPrivateFoundationGet('o3-typography-use-case-headline-md-font-family'); font-size: oPrivateFoundationGet('o3-typography-use-case-headline-md-font-size'); font-weight: oPrivateFoundationGet('o3-typography-use-case-headline-md-font-weight'); line-height: oPrivateFoundationGet('o3-typography-use-case-headline-md-line-height'); } @include oPrivateGridRespondTo('L') { font-family: oPrivateFoundationGet('o3-typography-use-case-headline-lg-font-family'); font-size: oPrivateFoundationGet('o3-typography-use-case-headline-lg-font-size'); font-weight: oPrivateFoundationGet('o3-typography-use-case-headline-lg-font-weight'); line-height: oPrivateFoundationGet('o3-typography-use-case-headline-lg-line-height'); }

…n-topper

notlee · 2025-01-27T17:30:02Z

There's an issue with the font on o-topper__columnist-name and the colour/weight of the opinion variant of o-topper__topic, otherwise the topper all looks good now 👍

notlee · 2025-01-27T18:12:46Z

🕵️ Painful manual Percy / Chromatic mode activated

Weight

On most teasers the weight of the header seems to have increased substantially. Is there a more appropriate usecase? I'd expect `headline` rather than `display`.

Colour

In addition to weight there's often colour issues. The main ones to look our for are:

Black headings
Black time stamps
Invisible text (hero, inverse opinion)

Size

The size of the heading on some including this one seem quite a bit bigger, do we have a smaller use-case we could use?

Font

The fonts and weight are off on these examples:

top-story-hero uses Metric instead of Financier
opinion uses Georgia instead of Financier (think I may have spotted some others)

Partner content

Paid post / partner content: The headline and o-teaser__promoted-prefix are much bigger with weight changes, and the font is georgia and not financier for the headline. I'd recommend setting o-teaser__promoted-prefix to the label usecase (smaller, capitalised).

frshwtr · 2025-01-28T11:04:56Z

Additional colour issue: hero image has mixing issues in small viewports

…n-topper

notlee

Great work! 👏 👏 👏 Almost ready to go:

Linting error (fyi I merged 2025-release so all tests should be passing from now on)
Please confirm there's a high priority design ticket in the next sprint to update the use-case / docs across Figma libraries
Underline on this one?

…n-topper

frshwtr changed the title ~~feat: use typography tokens in o-topper~~ feat: use typography tokens in o-topper and o-teaser Jan 21, 2025

feat: use typography tokens in o-topper

4f39f1d

frshwtr force-pushed the 2025-release-use-typography-tokens-in-topper branch from 7dbc994 to 4f39f1d Compare January 21, 2025 11:55

feat: use typography tokens in o-teaser

3b8cd03

frshwtr marked this pull request as ready for review January 21, 2025 15:29

frshwtr requested a review from a team as a code owner January 21, 2025 15:29

fix: fix sass build errors, correct use case usage

d9c80c1

frshwtr force-pushed the 2025-release-use-typography-tokens-in-topper branch from facabe1 to d9c80c1 Compare January 21, 2025 16:08

frshwtr added 2 commits January 21, 2025 16:10

fix: not sure what happened here

a56425e

fix: fix topper token naming

25e3f29

notlee requested changes Jan 21, 2025

View reviewed changes

fix: fix headings sizes

9f2e29f

notlee temporarily deployed to origami-webs-2025-relea-xdkicd January 22, 2025 09:49 Inactive

chore: Update components/o-private-foundation/src/scss/o-typography/m…

0a62580

…ain.scss Co-authored-by: Lee Moody <[email protected]>

notlee temporarily deployed to origami-webs-2025-relea-xdkicd January 22, 2025 09:52 Inactive

frshwtr added 2 commits January 22, 2025 13:14

chore: Merge branch '2025-release' into 2025-release-use-typography-t…

4895d70

…okens-in-topper

fix: use correct tokens

630f504

notlee temporarily deployed to origami-webs-2025-relea-xdkicd January 22, 2025 13:27 Inactive

notlee reviewed Jan 22, 2025

View reviewed changes

Merge branch '2025-release' into 2025-release-use-typography-tokens-i…

1ff5cf1

…n-topper

notlee temporarily deployed to origami-webs-2025-relea-xdkicd January 22, 2025 15:42 Inactive

chore: ensure headline sizes are responsive

26216dc

notlee temporarily deployed to origami-webs-2025-relea-xdkicd January 22, 2025 15:57 Inactive

fix: use o3 colors in if statement

f2effbc

notlee temporarily deployed to origami-webs-2025-relea-xdkicd January 23, 2025 11:23 Inactive

fix: prevent breaking change to topper API.

8e6faed

notlee temporarily deployed to origami-webs-2025-relea-xdkicd January 23, 2025 14:17 Inactive

frshwtr added 4 commits January 28, 2025 11:16

fix: fix headline font weight

8950fda

fix: remove duplicate tag

0aff0ed

fix: fix various discrepancies in teasers

440aa7f

fix: fix color discrepancies

eb331d1

notlee temporarily deployed to origami-webs-2025-relea-pcml1b January 29, 2025 10:57 Inactive

frshwtr added 2 commits January 29, 2025 11:37

fix: fix color discrepancies

ffcfaf9

fix: use correct font style and weighting on tags

97a6820

notlee temporarily deployed to origami-webs-2025-relea-wowfvv January 29, 2025 11:38 Inactive

notlee temporarily deployed to origami-webs-2025-relea-wowfvv January 29, 2025 13:36 Inactive

chore: decrease headline-sm sizes to font/lineheight size 3

1868eee

frshwtr force-pushed the 2025-release-use-typography-tokens-in-topper branch from a1370b0 to 1868eee Compare January 29, 2025 13:40

notlee temporarily deployed to origami-webs-2025-relea-wowfvv January 29, 2025 13:40 Inactive

chore: use all headline-sm typography tokens

9f1290f

notlee temporarily deployed to origami-webs-2025-relea-wowfvv January 29, 2025 13:52 Inactive

Merge branch '2025-release' into 2025-release-use-typography-tokens-i…

46c42eb

…n-topper

notlee temporarily deployed to origami-webs-2025-relea-wowfvv January 29, 2025 14:05 Inactive

fix: ensure live timestamps have highest specificity

f8ab64a

notlee temporarily deployed to origami-webs-2025-relea-wowfvv January 29, 2025 14:53 Inactive

notlee self-requested a review January 30, 2025 17:54

notlee reviewed Jan 30, 2025

View reviewed changes

Merge branch '2025-release' into 2025-release-use-typography-tokens-i…

c8342f3

…n-topper

notlee temporarily deployed to origami-webs-2025-relea-wowfvv January 30, 2025 19:50 Inactive

fix: remove underline

01cf5e9

notlee temporarily deployed to origami-webs-2025-relea-wowfvv January 31, 2025 16:04 Inactive

notlee approved these changes Jan 31, 2025

View reviewed changes

frshwtr merged commit 428eb8d into 2025-release Jan 31, 2025
9 of 11 checks passed

frshwtr deleted the 2025-release-use-typography-tokens-in-topper branch January 31, 2025 16:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: use typography tokens in o-topper and o-teaser #1938

feat: use typography tokens in o-topper and o-teaser #1938

frshwtr commented Jan 20, 2025

frshwtr commented Jan 20, 2025

frshwtr commented Jan 20, 2025

frshwtr commented Jan 21, 2025 •

edited

Loading

notlee left a comment

notlee Jan 21, 2025

frshwtr Jan 22, 2025

notlee Jan 21, 2025

frshwtr Jan 22, 2025

notlee Jan 21, 2025

frshwtr Jan 22, 2025

notlee Jan 21, 2025

frshwtr Jan 22, 2025

notlee Jan 21, 2025

notlee Jan 21, 2025

notlee Jan 21, 2025

notlee Jan 22, 2025

notlee Jan 22, 2025 •

edited

Loading

notlee commented Jan 27, 2025 •

edited

Loading

notlee commented Jan 27, 2025 •

edited by frshwtr

Loading

frshwtr commented Jan 28, 2025

notlee left a comment •

edited

Loading

		@@ -4,7 +4,6 @@

		@import 'src/scss/variables';
		@import 'src/scss/mixins';

feat: use typography tokens in o-topper and o-teaser #1938

feat: use typography tokens in o-topper and o-teaser #1938

Conversation

frshwtr commented Jan 20, 2025

Describe your changes

Issue ticket number and link

Link to Figma designs

Checklist before requesting a review

frshwtr commented Jan 20, 2025

frshwtr commented Jan 20, 2025

frshwtr commented Jan 21, 2025 • edited Loading

notlee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

notlee Jan 22, 2025 • edited Loading

Choose a reason for hiding this comment

notlee commented Jan 27, 2025 • edited Loading

notlee commented Jan 27, 2025 • edited by frshwtr Loading

Weight

Colour

Size

Font

Partner content

frshwtr commented Jan 28, 2025

notlee left a comment • edited Loading

Choose a reason for hiding this comment

frshwtr commented Jan 21, 2025 •

edited

Loading

notlee Jan 22, 2025 •

edited

Loading

notlee commented Jan 27, 2025 •

edited

Loading

notlee commented Jan 27, 2025 •

edited by frshwtr

Loading

notlee left a comment •

edited

Loading