Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 30 commits into from
Jan 31, 2025
Merged

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

Show file tree
Hide file tree
Changes from 28 commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
4f39f1d
feat: use typography tokens in o-topper
frshwtr Jan 20, 2025
3b8cd03
feat: use typography tokens in o-teaser
frshwtr Jan 21, 2025
d9c80c1
fix: fix sass build errors, correct use case usage
frshwtr Jan 21, 2025
a56425e
fix: not sure what happened here
frshwtr Jan 21, 2025
25e3f29
fix: fix topper token naming
frshwtr Jan 21, 2025
9f2e29f
fix: fix headings sizes
frshwtr Jan 22, 2025
0a62580
chore: Update components/o-private-foundation/src/scss/o-typography/m…
frshwtr Jan 22, 2025
4895d70
chore: Merge branch '2025-release' into 2025-release-use-typography-t…
frshwtr Jan 22, 2025
630f504
fix: use correct tokens
frshwtr Jan 22, 2025
1ff5cf1
Merge branch '2025-release' into 2025-release-use-typography-tokens-i…
frshwtr Jan 22, 2025
26216dc
chore: ensure headline sizes are responsive
frshwtr Jan 22, 2025
f2effbc
fix: use o3 colors in if statement
frshwtr Jan 23, 2025
8e6faed
fix: prevent breaking change to topper API.
frshwtr Jan 23, 2025
d1bec9d
fix: restore missing bar from headline
frshwtr Jan 23, 2025
e89efe3
fix: remove underline from pages that don't need it
frshwtr Jan 23, 2025
dff4407
fix: correctly apply colours in branded demo
frshwtr Jan 27, 2025
8ad27f4
fix: reset browser default margins
frshwtr Jan 27, 2025
82f2328
fix: fix margins on headings
frshwtr Jan 27, 2025
8950fda
fix: fix headline font weight
frshwtr Jan 28, 2025
0aff0ed
fix: remove duplicate tag
frshwtr Jan 28, 2025
440aa7f
fix: fix various discrepancies in teasers
frshwtr Jan 28, 2025
eb331d1
fix: fix color discrepancies
frshwtr Jan 29, 2025
ffcfaf9
fix: fix color discrepancies
frshwtr Jan 29, 2025
97a6820
fix: use correct font style and weighting on tags
frshwtr Jan 29, 2025
1868eee
chore: decrease headline-sm sizes to font/lineheight size 3
frshwtr Jan 29, 2025
9f1290f
chore: use all headline-sm typography tokens
frshwtr Jan 29, 2025
46c42eb
Merge branch '2025-release' into 2025-release-use-typography-tokens-i…
frshwtr Jan 29, 2025
f8ab64a
fix: ensure live timestamps have highest specificity
frshwtr Jan 29, 2025
c8342f3
Merge branch '2025-release' into 2025-release-use-typography-tokens-i…
notlee Jan 30, 2025
01cf5e9
fix: remove underline
frshwtr Jan 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/dictionary/tokens/core/use-case/typography.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@
"value": {
"fontFamily": "{o3.font.family.financier-display}",
"fontWeight": "{o3.font.weight.light}",
"fontSize": "{o3.font.size.4}",
"lineHeight": "{o3.font.lineheight.4}"
"fontSize": "{o3.font.size.3}",
"lineHeight": "{o3.font.lineheight.3}"
},
"type": "typography",
"description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News)."
Expand Down
4 changes: 2 additions & 2 deletions apps/dictionary/tokens/sustainable-views/use-case/typography.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@
"value": {
"fontFamily": "{o3.font.family.metric}",
"fontWeight": "{o3.font.weight.regular}",
"fontSize": "{o3.font.size-metric2.4}",
"lineHeight": "{o3.font.lineheight-metric2.4}"
"fontSize": "{o3.font.size-metric2.3}",
"lineHeight": "{o3.font.lineheight-metric2.3}"
},
"type": "typography",
"description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News)."
Expand Down
4 changes: 2 additions & 2 deletions apps/dictionary/tokens/whitelabel/use-case/typography.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@
"value": {
"fontFamily": "{o3.font.family.financier-display}",
"fontWeight": "{o3.font.weight.light}",
"fontSize": "{o3.font.size.4}",
"lineHeight": "{o3.font.lineheight.4}"
"fontSize": "{o3.font.size.3}",
"lineHeight": "{o3.font.lineheight.3}"
},
"type": "typography",
"description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News)."
Expand Down
5 changes: 4 additions & 1 deletion components/o-editorial-typography/src/scss/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,10 @@
// rather than assume it, as our sans and serif fonts
// use different font weights.
@if ($type == 'author' or $type == 'topic') {
@include oPrivateTypographySans($weight: 'semibold');
font-family: oPrivateFoundationGet('o3-typography-use-case-detail-font-family');
font-size: oPrivateFoundationGet('o3-typography-use-case-detail-font-size');
font-weight: oPrivateFoundationGet('o3-font-weight-semibold');
line-height: oPrivateFoundationGet('o3-typography-use-case-detail-line-height');
}

// Apply tag link styles only to anchor elements.
Expand Down
5 changes: 4 additions & 1 deletion components/o-private-foundation/src/scss/o-typography/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -309,7 +309,10 @@
}

@if ($type == 'ordered') {
@include oPrivateTypographySans($weight: 'semibold');
font-family: oPrivateFoundationGet('o3-typography-use-case-body-highlight-font-family');
font-size: oPrivateFoundationGet('o3-typography-use-case-body-highlight-font-size');
font-weight: oPrivateFoundationGet('o3-typography-use-case-body-highlight-font-weight');
line-height: oPrivateFoundationGet('o3-typography-use-case-body-highlight-line-height');
content: counter(item);
counter-increment: item;
font-feature-settings: 'tnum';
Expand Down
4 changes: 2 additions & 2 deletions components/o-private-foundation/src/scss/tokens/core.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -276,9 +276,9 @@ $tokens: (
// Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
'o3-typography-use-case-headline-sm-font-weight': 300,
// Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
'o3-typography-use-case-headline-sm-font-size': 28px,
'o3-typography-use-case-headline-sm-font-size': 24px,
// Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
'o3-typography-use-case-headline-sm-line-height': 32px,
'o3-typography-use-case-headline-sm-line-height': 28px,
// Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.
'o3-typography-use-case-title-lg-font-family': 'metric 2 VF',
// Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.
Expand Down
4 changes: 2 additions & 2 deletions components/o-private-foundation/src/scss/tokens/professional.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,9 +173,9 @@ $tokens: (
// Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
'o3-typography-use-case-headline-sm-font-weight': 300,
// Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
'o3-typography-use-case-headline-sm-font-size': 28px,
'o3-typography-use-case-headline-sm-font-size': 24px,
// Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
'o3-typography-use-case-headline-sm-line-height': 32px,
'o3-typography-use-case-headline-sm-line-height': 28px,
// Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.
'o3-typography-use-case-title-lg-font-family': 'metric 2 VF',
// Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.
Expand Down
2 changes: 1 addition & 1 deletion components/o-private-foundation/src/scss/tokens/sustainable-views.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ $tokens: (
// Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
'o3-typography-use-case-headline-sm-font-weight': 400,
// Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
'o3-typography-use-case-headline-sm-font-size': 28px,
'o3-typography-use-case-headline-sm-font-size': 24px,
// Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
'o3-typography-use-case-headline-sm-line-height': 32px,
// Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.
Expand Down
4 changes: 2 additions & 2 deletions components/o-private-foundation/src/scss/tokens/whitelabel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,9 +242,9 @@ $tokens: (
// Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
'o3-typography-use-case-headline-sm-font-weight': 300,
// Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
'o3-typography-use-case-headline-sm-font-size': 28px,
'o3-typography-use-case-headline-sm-font-size': 24px,
// Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).
'o3-typography-use-case-headline-sm-line-height': 32px,
'o3-typography-use-case-headline-sm-line-height': 28px,
// Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.
'o3-typography-use-case-title-lg-font-family': 'metric 2 VF',
// Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.
Expand Down
1 change: 0 additions & 1 deletion components/o-teaser/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@

@import 'src/scss/variables';
@import 'src/scss/mixins';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

_oTeaserTimestamp is tiny! Let's remove its use of oLabelsTimestampContent and set to label
Screenshot 2025-01-21 at 17 10 25

@import 'src/scss/deprecated';

@import 'src/scss/elements/default';
@import 'src/scss/elements/images';
Expand Down
Empty file removed components/o-teaser/src/scss/_deprecated.scss
View file
Open in desktop
Empty file.
16 changes: 11 additions & 5 deletions components/o-teaser/src/scss/elements/_default.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
/// Including styles for a nested link.
/// @access public
@mixin oTeaserHeading {
font-family: oPrivateFoundationGet('o3-typography-use-case-body-content-base-font-family');
font-size: oPrivateFoundationGet('o3-typography-use-case-body-content-base-font-size');
font-weight: oPrivateFoundationGet('o3-typography-use-case-body-content-base-font-weight');
line-height: oPrivateFoundationGet('o3-typography-use-case-body-content-base-line-height');
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 _oTeaserLink();
color: $_o-teaser-base-color;
margin-top: 0;
Expand All @@ -19,6 +19,7 @@
font-size: oPrivateFoundationGet('o3-typography-use-case-detail-font-size');
font-weight: oPrivateFoundationGet('o3-typography-use-case-detail-font-weight');
line-height: oPrivateFoundationGet('o3-typography-use-case-detail-line-height');

position: relative;
width: 100%;
text-rendering: optimizeLegibility;
Expand Down Expand Up @@ -59,6 +60,7 @@
font-size: oPrivateFoundationGet('o3-typography-use-case-detail-font-size');
font-weight: oPrivateFoundationGet('o3-typography-use-case-detail-font-weight');
line-height: oPrivateFoundationGet('o3-typography-use-case-detail-line-height');

color: inherit;
text-decoration: none;
border: 0;
Expand All @@ -83,7 +85,10 @@
}

@mixin _oTeaserTagSuffix {
@include oPrivateTypographySans(-1);
font-family: oPrivateFoundationGet('o3-typography-use-case-detail-font-family');
font-size: oPrivateFoundationGet('o3-typography-use-case-detail-font-size');
font-weight: oPrivateFoundationGet('o3-typography-use-case-detail-font-weight');
line-height: oPrivateFoundationGet('o3-typography-use-case-detail-line-height');
color: oPrivateFoundationGet('o3-color-palette-black-60');
}

Expand All @@ -93,6 +98,7 @@
font-size: oPrivateFoundationGet('o3-typography-use-case-detail-font-size');
font-weight: oPrivateFoundationGet('o3-typography-use-case-detail-font-weight');
line-height: oPrivateFoundationGet('o3-typography-use-case-detail-line-height');

@include _oTeaserLink();
color: $_o-teaser-muted;
margin-top: 0;
Expand Down
10 changes: 8 additions & 2 deletions components/o-teaser/src/scss/elements/_promoted.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,19 @@
color: oPrivateFoundationGet('o3-color-palette-black');

.o-teaser__meta {
@include oPrivateTypographySans($scale: -1, $weight: 'semibold');
font-family: oPrivateFoundationGet('o3-typography-use-case-detail-font-family');
font-size: oPrivateFoundationGet('o3-typography-use-case-detail-font-size');
font-weight: oPrivateFoundationGet('o3-font-weight-semibold');
line-height: oPrivateFoundationGet('o3-typography-use-case-detail-line-height');
color: $_o-teaser-muted;
margin-bottom: oPrivateSpacingByName('s3');
}

.o-teaser__promoted-prefix {
@include oPrivateTypographySans($scale: 0);
font-family: oPrivateFoundationGet('o3-typography-use-case-label-font-family');
font-size: oPrivateFoundationGet('o3-typography-use-case-label-font-size');
font-weight: oPrivateFoundationGet('o3-font-weight-semibold');
line-height: oPrivateFoundationGet('o3-typography-use-case-label-line-height');
text-transform: uppercase;
color: oPrivateFoundationGet('o3-color-palette-matisse-blue');
display: block;
Expand Down
11 changes: 8 additions & 3 deletions components/o-teaser/src/scss/elements/_related-items.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,16 @@

/// Single related content item styles
@mixin _oTeaserRelatedItem {
@include oPrivateTypographySans(-1);
font-family: oPrivateFoundationGet('o3-typography-use-case-detail-font-family');
font-size: oPrivateFoundationGet('o3-typography-use-case-detail-font-size');
font-weight: oPrivateFoundationGet('o3-typography-use-case-detail-font-weight');
line-height: 22px;

@include oPrivateGridRespondTo('L') {
@include oPrivateTypographySans(0);
line-height: 24px;
font-family: oPrivateFoundationGet('o3-typography-use-case-body-base-font-family');
font-size: oPrivateFoundationGet('o3-typography-use-case-body-base-font-size');
font-weight: oPrivateFoundationGet('o3-typography-use-case-body-base-font-weight');
line-height: oPrivateFoundationGet('o3-typography-use-case-body-base-line-height');
}
color: $_o-teaser-muted;

Expand Down
4 changes: 3 additions & 1 deletion components/o-teaser/src/scss/elements/_timestamp.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
font-weight: oPrivateFoundationGet('o3-typography-use-case-label-font-weight');
line-height: oPrivateFoundationGet('o3-typography-use-case-label-line-height');
text-transform: oPrivateFoundationGet('o3-typography-use-case-label-text-case');
color: $_o-teaser-muted;
display: block;
// Moves timestamp to the bottom when stretched modifier is used
margin-top: auto;
Expand Down Expand Up @@ -32,7 +33,8 @@
// @deprecated - o-teaser__timestamp--inprogress has been replaced by o-teaser__timestamp--live
// https://github.com/Financial-Times/o-teaser/issues/173
.o-teaser__timestamp--inprogress,
.o-teaser__timestamp--live {
.o-teaser__timestamp--live,
.o-teaser__timestamp.o-teaser__timestamp--live {
@include oLabelsIndicatorContent($opts: ('block': true, 'modifier': 'live'));
}

Expand Down
9 changes: 6 additions & 3 deletions components/o-teaser/src/scss/themes/_hero.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@

/// Hero opinion theme - blue background white based text
@mixin _oTeaserHeroOpinion {
$opinion-color: oPrivateFoundationGet('o3-color-palette-oxford');
$opinion-background: oPrivateFoundationGet('o3-color-palette-oxford');
$opinion-color: oPrivateColorsGetTextColor($opinion-background, 100);
.o-teaser__heading a:hover,
.o-teaser__heading a:focus,
.o-teaser__heading a:visited,
Expand Down Expand Up @@ -198,7 +198,10 @@
/// Hero standalone theme styles
@mixin _oTeaserHeroStandalone {
.o-teaser__heading {
@include oPrivateTypographySans(4);
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');
}

.o-teaser__image-container {
Expand All @@ -213,8 +216,8 @@

// Hero Package theme — extra
@mixin _oTeaserHeroExtra {
$hero-extra-color: oPrivateFoundationGet('o3-color-palette-slate');
$hero-extra-background: oPrivateFoundationGet('o3-color-palette-slate');
$hero-extra-color: oPrivateColorsGetTextColor($hero-extra-background, 100);
// highlight colours
$hero-extra-highlight-border: oPrivateFoundationGet('o3-color-palette-lemon');
$hero-extra-highlight-color: oPrivateFoundationGet('o3-color-palette-lemon');
Expand Down
17 changes: 12 additions & 5 deletions components/o-teaser/src/scss/themes/_large.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,23 @@
}

.o-teaser__heading {
@include oPrivateTypographyDisplay($scale: 3);
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');
}

.o-teaser__standfirst {
@include oPrivateTypographySans(1);
line-height: 24px;
font-family: oPrivateFoundationGet('o3-typography-use-case-body-base-font-family');
font-size: oPrivateFoundationGet('o3-typography-use-case-body-base-font-size');
font-weight: oPrivateFoundationGet('o3-typography-use-case-body-base-font-weight');
line-height: oPrivateFoundationGet('o3-typography-use-case-body-base-line-height');

@include oPrivateGridRespondTo('L') {
@include oPrivateTypographySans(2);
line-height: 24px;
font-family: oPrivateFoundationGet('o3-typography-use-case-body-lg-font-family');
font-size: oPrivateFoundationGet('o3-typography-use-case-body-lg-font-size');
font-weight: oPrivateFoundationGet('o3-typography-use-case-body-lg-font-weight');
line-height: oPrivateFoundationGet('o3-typography-use-case-body-lg-line-height');
}
margin-top: oPrivateSpacingByName('s6');
}
Expand Down
6 changes: 4 additions & 2 deletions components/o-teaser/src/scss/themes/_package.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,9 @@

&__list-item,
&__landing-link {
@include oPrivateTypographySans(0);
font-family: oPrivateFoundationGet('o3-typography-use-case-body-base-font-family');
font-size: oPrivateFoundationGet('o3-typography-use-case-body-base-font-size');
font-weight: oPrivateFoundationGet('o3-typography-use-case-body-base-font-weight');
line-height: 20px;
padding: 12px 0;

Expand Down Expand Up @@ -165,8 +167,8 @@

@mixin _oTeaserSpecialReportPackageList {
.package-teaser {
$package-special-report-color: oPrivateFoundationGet('o3-color-palette-claret-70');
$package-special-report-background: oPrivateFoundationGet('o3-color-palette-claret-70');
$package-special-report-color: oPrivateColorsGetTextColor($package-special-report-background, 100);

&__list-item a {
color: oPrivateFoundationGet('o3-color-palette-white');
Expand Down
10 changes: 8 additions & 2 deletions components/o-teaser/src/scss/themes/_small.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,12 +69,18 @@
margin-bottom: oPrivateSpacingByName('s2');
}
.o-teaser__tag-prefix {
@include oPrivateTypographySans($scale: 0, $weight: 'semibold');
font-family: oPrivateFoundationGet('o3-typography-use-case-detail-font-family');
font-size: oPrivateFoundationGet('o3-typography-use-case-detail-font-size');
font-weight: oPrivateFoundationGet('o3-font-weight-semibold');
line-height: oPrivateFoundationGet('o3-typography-use-case-detail-line-height');
color: oPrivateFoundationGet('o3-color-palette-claret-60');
margin-right: oPrivateSpacingByName('s1');
}
.o-teaser__tag {
@include oPrivateTypographySans($scale: 0, $weight: 'regular');
font-family: oPrivateFoundationGet('o3-typography-use-case-body-base-font-family');
font-size: oPrivateFoundationGet('o3-typography-use-case-body-base-font-size');
font-weight: oPrivateFoundationGet('o3-typography-use-case-body-base-font-weight');
line-height: oPrivateFoundationGet('o3-typography-use-case-body-base-line-height');
color: oPrivateFoundationGet('o3-color-palette-claret-60');
}
.o-teaser__standfirst {
Expand Down
6 changes: 3 additions & 3 deletions components/o-teaser/src/scss/themes/_standard.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/// Inverse theme styles - base all text content on white
@mixin _oTeaserInverse {
$inverse-color: oPrivateFoundationGet('o3-color-palette-black');
$inverse-background: oPrivateFoundationGet('o3-color-palette-black');
$inverse-color: oPrivateColorsGetTextColor($inverse-background, 100);

.o-teaser__heading a:hover,
.o-teaser__heading a:focus,
Expand Down Expand Up @@ -54,8 +54,8 @@

/// Opinion background theme - colours background blue and adjust text
@mixin _oTeaserOpinionBackground {
$theme-opinion-color: oPrivateFoundationGet('o3-color-palette-sky');
$theme-opinion-background: oPrivateFoundationGet('o3-color-palette-sky');
$theme-opinion-color: oPrivateColorsGetTextColor($theme-opinion-background, 100);
.o-teaser__standfirst,
.o-teaser__timestamp {
color: oPrivateColorsMix($theme-opinion-color, $theme-opinion-background, $percentage: 60);
Expand All @@ -82,8 +82,8 @@

/// Highlight theme - colours background claret and adjust text colours
@mixin _oTeaserHighlight {
$theme-highlight-color: oPrivateFoundationGet('o3-color-palette-claret');
$theme-highlight-background: oPrivateFoundationGet('o3-color-palette-claret');
$theme-highlight-color: oPrivateColorsGetTextColor($theme-highlight-background, 100);
.o-teaser__heading a:hover,
.o-teaser__heading a:focus,
.o-teaser__heading a:visited,
Expand Down
16 changes: 12 additions & 4 deletions components/o-teaser/src/scss/themes/_top-stories.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,23 @@
}

.o-teaser__heading {
@include oPrivateTypographyDisplay(5);
line-height: 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');
@include oPrivateGridRespondTo('L') {
@include oPrivateTypographyDisplay(7);
font-family: oPrivateFoundationGet('o3-typography-use-case-headline-lg-font-family');
font-size: oPrivateFoundationGet('o3-font-size-7');
font-weight: oPrivateFoundationGet('o3-typography-use-case-headline-lg-font-weight');
line-height: oPrivateFoundationGet('o3-font-lineheight-7');
}
}

.o-teaser__standfirst {
@include oPrivateTypographySans(2);
font-family: oPrivateFoundationGet('o3-typography-use-case-body-base-font-family');
font-size: oPrivateFoundationGet('o3-typography-use-case-body-base-font-size');
font-weight: oPrivateFoundationGet('o3-typography-use-case-body-base-font-weight');
line-height: oPrivateFoundationGet('o3-typography-use-case-body-base-line-height');
}
}

Expand Down
2 changes: 1 addition & 1 deletion components/o-topper/demos/src/branded.mustache
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="o-topper o-topper--branded o-topper--color-o3-colo-palette-wheat">
<div class="o-topper o-topper--branded o-topper--color-o3-color-palette-wheat">
<div class="o-topper__content">
<div class="o-topper__tags">
<a href="https://www.ft.com/stream/c65ad97e-ccf0-4b6a-b34a-0e03744a9431" class="o-topper__brand">
Expand Down
Loading
Loading