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

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

fix: restore missing bar from headline

d1bec9d

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

fix: remove underline from pages that don't need it

e89efe3

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

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

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

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

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

Are you sure you want to change the base?

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

frshwtr commented Jan 21, 2025 •

edited

Loading

notlee Jan 22, 2025 •

edited

Loading