diff --git a/apps/dictionary/tokens/core/use-case/typography.json b/apps/dictionary/tokens/core/use-case/typography.json index c8477e2e2c..b1cecf2e8a 100644 --- a/apps/dictionary/tokens/core/use-case/typography.json +++ b/apps/dictionary/tokens/core/use-case/typography.json @@ -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)." diff --git a/apps/dictionary/tokens/sustainable-views/use-case/typography.json b/apps/dictionary/tokens/sustainable-views/use-case/typography.json index 578ce3c2c4..3fa477e069 100644 --- a/apps/dictionary/tokens/sustainable-views/use-case/typography.json +++ b/apps/dictionary/tokens/sustainable-views/use-case/typography.json @@ -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)." diff --git a/apps/dictionary/tokens/whitelabel/use-case/typography.json b/apps/dictionary/tokens/whitelabel/use-case/typography.json index c8477e2e2c..b1cecf2e8a 100644 --- a/apps/dictionary/tokens/whitelabel/use-case/typography.json +++ b/apps/dictionary/tokens/whitelabel/use-case/typography.json @@ -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)." diff --git a/components/o-private-foundation/src/scss/o-typography/main.scss b/components/o-private-foundation/src/scss/o-typography/main.scss index 715afa3167..8712a78f93 100644 --- a/components/o-private-foundation/src/scss/o-typography/main.scss +++ b/components/o-private-foundation/src/scss/o-typography/main.scss @@ -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'; diff --git a/components/o-private-foundation/src/scss/tokens/core.scss b/components/o-private-foundation/src/scss/tokens/core.scss index 38c14403e6..3745886460 100644 --- a/components/o-private-foundation/src/scss/tokens/core.scss +++ b/components/o-private-foundation/src/scss/tokens/core.scss @@ -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. diff --git a/components/o-private-foundation/src/scss/tokens/professional.scss b/components/o-private-foundation/src/scss/tokens/professional.scss index c009943d47..3189ff17af 100644 --- a/components/o-private-foundation/src/scss/tokens/professional.scss +++ b/components/o-private-foundation/src/scss/tokens/professional.scss @@ -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. diff --git a/components/o-private-foundation/src/scss/tokens/sustainable-views.scss b/components/o-private-foundation/src/scss/tokens/sustainable-views.scss index bd5510070f..019b86a371 100644 --- a/components/o-private-foundation/src/scss/tokens/sustainable-views.scss +++ b/components/o-private-foundation/src/scss/tokens/sustainable-views.scss @@ -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. diff --git a/components/o-private-foundation/src/scss/tokens/whitelabel.scss b/components/o-private-foundation/src/scss/tokens/whitelabel.scss index 38330fc8e6..3653a17417 100644 --- a/components/o-private-foundation/src/scss/tokens/whitelabel.scss +++ b/components/o-private-foundation/src/scss/tokens/whitelabel.scss @@ -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. diff --git a/components/o-teaser/main.scss b/components/o-teaser/main.scss index 088094abd1..3f1bb84e25 100644 --- a/components/o-teaser/main.scss +++ b/components/o-teaser/main.scss @@ -4,7 +4,6 @@ @import 'src/scss/variables'; @import 'src/scss/mixins'; -@import 'src/scss/deprecated'; @import 'src/scss/elements/default'; @import 'src/scss/elements/images'; diff --git a/components/o-teaser/src/scss/_deprecated.scss b/components/o-teaser/src/scss/_deprecated.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/components/o-teaser/src/scss/_mixins.scss b/components/o-teaser/src/scss/_mixins.scss index df5b5b9c01..e2a5860939 100644 --- a/components/o-teaser/src/scss/_mixins.scss +++ b/components/o-teaser/src/scss/_mixins.scss @@ -102,7 +102,6 @@ .o-teaser--promoted-content { .o-teaser__heading a { - @include oPrivateTypographyLink(); @include oPrivateTypographyLinkThemeOverride( $theme: ( 'base': $_o-teaser-base-color, diff --git a/components/o-teaser/src/scss/elements/_default.scss b/components/o-teaser/src/scss/elements/_default.scss index a20c2ec993..cf3cdb9f10 100644 --- a/components/o-teaser/src/scss/elements/_default.scss +++ b/components/o-teaser/src/scss/elements/_default.scss @@ -3,10 +3,10 @@ /// @access public @mixin oTeaserHeading { @include _oTeaserLink(); - 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'); color: $_o-teaser-base-color; margin-top: 0; margin-bottom: 0; @@ -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; @@ -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; @@ -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'); } diff --git a/components/o-teaser/src/scss/elements/_promoted.scss b/components/o-teaser/src/scss/elements/_promoted.scss index ea7c0d0dd2..d61c753de3 100644 --- a/components/o-teaser/src/scss/elements/_promoted.scss +++ b/components/o-teaser/src/scss/elements/_promoted.scss @@ -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; diff --git a/components/o-teaser/src/scss/elements/_related-items.scss b/components/o-teaser/src/scss/elements/_related-items.scss index c77a692427..42d3ba4f21 100644 --- a/components/o-teaser/src/scss/elements/_related-items.scss +++ b/components/o-teaser/src/scss/elements/_related-items.scss @@ -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; diff --git a/components/o-teaser/src/scss/elements/_timestamp.scss b/components/o-teaser/src/scss/elements/_timestamp.scss index 47a11d1521..7405c03865 100644 --- a/components/o-teaser/src/scss/elements/_timestamp.scss +++ b/components/o-teaser/src/scss/elements/_timestamp.scss @@ -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; @@ -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')); } diff --git a/components/o-teaser/src/scss/themes/_hero.scss b/components/o-teaser/src/scss/themes/_hero.scss index 69f5f2fca5..ce964633bb 100644 --- a/components/o-teaser/src/scss/themes/_hero.scss +++ b/components/o-teaser/src/scss/themes/_hero.scss @@ -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, @@ -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 { @@ -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'); diff --git a/components/o-teaser/src/scss/themes/_large.scss b/components/o-teaser/src/scss/themes/_large.scss index cc2cb022c1..dbb56c9bc8 100644 --- a/components/o-teaser/src/scss/themes/_large.scss +++ b/components/o-teaser/src/scss/themes/_large.scss @@ -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'); } diff --git a/components/o-teaser/src/scss/themes/_package.scss b/components/o-teaser/src/scss/themes/_package.scss index 1fcca5ca83..9c22470502 100644 --- a/components/o-teaser/src/scss/themes/_package.scss +++ b/components/o-teaser/src/scss/themes/_package.scss @@ -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; @@ -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'); diff --git a/components/o-teaser/src/scss/themes/_small.scss b/components/o-teaser/src/scss/themes/_small.scss index f6a28e19f8..a81fd2beff 100644 --- a/components/o-teaser/src/scss/themes/_small.scss +++ b/components/o-teaser/src/scss/themes/_small.scss @@ -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 { diff --git a/components/o-teaser/src/scss/themes/_standard.scss b/components/o-teaser/src/scss/themes/_standard.scss index 9eb66f4292..cc48c14590 100644 --- a/components/o-teaser/src/scss/themes/_standard.scss +++ b/components/o-teaser/src/scss/themes/_standard.scss @@ -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, @@ -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); @@ -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, diff --git a/components/o-teaser/src/scss/themes/_top-stories.scss b/components/o-teaser/src/scss/themes/_top-stories.scss index 75ff09fe54..7c5117f4e8 100644 --- a/components/o-teaser/src/scss/themes/_top-stories.scss +++ b/components/o-teaser/src/scss/themes/_top-stories.scss @@ -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'); } } diff --git a/components/o-topper/demos/src/branded.mustache b/components/o-topper/demos/src/branded.mustache index 1c9c50945f..6db21737d9 100644 --- a/components/o-topper/demos/src/branded.mustache +++ b/components/o-topper/demos/src/branded.mustache @@ -1,4 +1,4 @@ -
+
diff --git a/components/o-topper/src/scss/_elements.scss b/components/o-topper/src/scss/_elements.scss index d05d45b0e9..88ce11c6b2 100644 --- a/components/o-topper/src/scss/_elements.scss +++ b/components/o-topper/src/scss/_elements.scss @@ -8,7 +8,10 @@ } @mixin _oTopperSummary { - @include oPrivateTypographySans(1); + 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'); > ul { padding: 0 oPrivateSpacingByIncrement(5); } @@ -20,7 +23,10 @@ @mixin _oTopperSummaryBody { h2 { - @include oPrivateTypographySans(0, $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'); margin: 5px 0 0; } @@ -32,7 +38,10 @@ margin-top: 0px; } li { - @include oPrivateTypographySans(1); + 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'); margin-top: oPrivateSpacingByName('s2'); margin-bottom: 0; } @@ -40,7 +49,11 @@ } @mixin _oTopperImageCredit { - @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-white'); position: absolute; text-shadow: 1px 1px 1px oPrivateFoundationGet('o3-color-palette-slate'); @@ -54,7 +67,10 @@ } @mixin _oTopperImageCaption { - @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'); padding: 10px 11px 0px; @include oPrivateGridRespondTo(L) { padding-left: 18px; @@ -103,8 +119,10 @@ } @mixin _oTopperTags { - @include oPrivateTypographySans(0); - line-height: 28px; + 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'); padding-bottom: 5px; } diff --git a/components/o-topper/src/scss/_mixins.scss b/components/o-topper/src/scss/_mixins.scss index 825e9c2779..6edcae0277 100644 --- a/components/o-topper/src/scss/_mixins.scss +++ b/components/o-topper/src/scss/_mixins.scss @@ -157,12 +157,49 @@ @if index($elements, 'headline') { .o-topper__headline { - @include oEditorialTypographyHeading($level: 1); + margin: 0; margin-bottom: oPrivateSpacingByIncrement(5); + 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'); + } } .o-topper__headline--large { - @include oEditorialTypographyHeadline(); + 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 oEditorialTypographyDecorated(); + + @include oPrivateGridRespondTo('S') { + font-family: oPrivateFoundationGet('o3-typography-use-case-display-md-font-family'); + font-size: oPrivateFoundationGet('o3-typography-use-case-display-md-font-size'); + font-weight: oPrivateFoundationGet('o3-typography-use-case-display-md-font-weight'); + line-height: oPrivateFoundationGet('o3-typography-use-case-display-md-line-height'); + } + + @include oPrivateGridRespondTo('L') { + 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'); + } position: relative; //so it appears above the full width background margin-bottom: oPrivateSpacingByIncrement(4); } @@ -243,6 +280,7 @@ @mixin _oTopperColors($colors) { @each $color in $colors { + $color: if($color == 'matisse', 'o3-color-palette-#{$color}-blue', 'o3-color-palette-#{$color}'); .o-topper--color-#{$color} { @include _oTopperColor($color); } @@ -318,10 +356,11 @@ color: oPrivateColorsMix($foreground, $color-name, 73); } - @if $color-name == 'paper' or $color-name == 'wheat' { + @if $color-name == 'o3-color-palette-paper' or $color-name == 'o3-color-palette-wheat' { .o-topper__opinion-genre, .o-topper__topic, .o-topper__columnist-name { + $color: oPrivateFoundationGet('_o3-editorial-typography-topic-tag-color'); color: oPrivateFoundationGet('_o3-editorial-typography-topic-tag-color'); &:hover { @@ -330,7 +369,7 @@ } } - @if $color-name == 'sky' { + @if $color-name == 'o3-color-palette-sky' { .o-topper__tags, .o-topper__topic, .o-topper__columnist-name { @@ -342,7 +381,7 @@ } } - @if $color-name == 'matisse' { + @if $color-name == 'o3-color-palette-matisse-blue' { .o-topper__columnist-name { &:hover { color: oPrivateColorsMix($foreground, $color-name, 73); diff --git a/components/o-topper/src/scss/_variables.scss b/components/o-topper/src/scss/_variables.scss index 992d4a0b2c..b95c5ad229 100644 --- a/components/o-topper/src/scss/_variables.scss +++ b/components/o-topper/src/scss/_variables.scss @@ -10,16 +10,16 @@ $o-topper-is-silent: true !default; /// @prop {List} - colours available to editorial in methode for the background /// @access private $_o-topper-colors: ( - 'o3-color-palette-white', - 'o3-color-palette-black', - 'o3-color-palette-claret', - 'o3-color-palette-oxford', - 'o3-color-palette-paper', - 'o3-color-palette-slate', - 'o3-color-palette-wheat', - 'o3-color-palette-crimson', - 'o3-color-palette-sky', - 'o3-color-palette-matisse-blue' + 'white', + 'black', + 'claret', + 'oxford', + 'paper', + 'slate', + 'wheat', + 'crimson', + 'sky', + 'matisse' ); /// When adding a new theme update the README diff --git a/components/o-topper/src/scss/themes/_branded.scss b/components/o-topper/src/scss/themes/_branded.scss index 53700f0888..56657e9e03 100644 --- a/components/o-topper/src/scss/themes/_branded.scss +++ b/components/o-topper/src/scss/themes/_branded.scss @@ -49,14 +49,15 @@ @mixin _oTopperThemeOpinion { .o-topper__topic, .o-topper__opinion-genre { - @include oPrivateTypographySans($scale: 2); - line-height: 28px; + font-family: oPrivateFoundationGet('o3-typography-use-case-body-highlight-font-family'); + font-size: oPrivateFoundationGet('o3-typography-use-case-body-highlight-font-size'); + line-height: oPrivateFoundationGet('o3-typography-use-case-body-highlight-line-height'); } } @mixin _oTopperOpinionGenre { @extend %_o-topper__tag; - font-weight: normal; + font-weight: oPrivateFoundationGet('o3-font-weight-regular'); color: oPrivateFoundationGet('o3-color-palette-oxford'); } diff --git a/components/o-topper/src/scss/themes/_deep-landscape.scss b/components/o-topper/src/scss/themes/_deep-landscape.scss index 1b545bcd49..66d06b5a8c 100644 --- a/components/o-topper/src/scss/themes/_deep-landscape.scss +++ b/components/o-topper/src/scss/themes/_deep-landscape.scss @@ -28,6 +28,7 @@ @each $color-name in $colors { + $color-name: if($color-name == 'matisse', 'o3-color-palette-#{$color-name}-blue', 'o3-color-palette-#{$color-name}'); &.o-topper--color-#{$color-name} { $background: oPrivateFoundationGet($color-name); $foreground: oPrivateColorsGetTextColor($background, $opacity: 100); diff --git a/components/o-topper/src/scss/themes/_deep-portrait.scss b/components/o-topper/src/scss/themes/_deep-portrait.scss index 93baa790b8..cfdb7a4564 100644 --- a/components/o-topper/src/scss/themes/_deep-portrait.scss +++ b/components/o-topper/src/scss/themes/_deep-portrait.scss @@ -34,6 +34,7 @@ } @each $color-name in $colors { + $color-name: if($color-name == 'matisse', 'o3-color-palette-#{$color-name}-blue', 'o3-color-palette-#{$color-name}'); &.o-topper--color-#{$color-name} { .o-topper__image-caption { $background: oPrivateFoundationGet($color-name); diff --git a/components/o-topper/src/scss/themes/_package.scss b/components/o-topper/src/scss/themes/_package.scss index 883fe02ee4..c991459d9f 100644 --- a/components/o-topper/src/scss/themes/_package.scss +++ b/components/o-topper/src/scss/themes/_package.scss @@ -1,5 +1,8 @@ @mixin _oTopperAnchorLink { - @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: oPrivateFoundationGet('o3-typography-use-case-body-base-line-height'); display: inline-block; width: 110px; padding: 5px 0 0 10px; @@ -34,8 +37,10 @@ %_o-topper__tag, .o-topper__headline { - @include oPrivateTypographySans(6); - font-weight: 400; + font-family: oPrivateFoundationGet('o3-typography-use-case-title-md-font-family'); + font-size: oPrivateFoundationGet('o3-font-size-metric2-5'); + font-weight: oPrivateFoundationGet('o3-typography-use-case-title-md-font-weight'); + line-height: oPrivateFoundationGet('o3-font-lineheight-metric2-5'); } .o-topper__headline { diff --git a/components/o3-foundation/src/css/tokens/core/_variables.css b/components/o3-foundation/src/css/tokens/core/_variables.css index c3616a7a21..b213589abd 100644 --- a/components/o3-foundation/src/css/tokens/core/_variables.css +++ b/components/o3-foundation/src/css/tokens/core/_variables.css @@ -205,8 +205,8 @@ --o3-typography-use-case-headline-md-line-height: var(--o3-font-lineheight-5); /* Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News). */ --o3-typography-use-case-headline-sm-font-family: var(--o3-font-family-financier-display); /* 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: var(--o3-font-weight-light); /* 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: var(--o3-font-size-4); /* 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: var(--o3-font-lineheight-4); /* 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: var(--o3-font-size-3); /* 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: var(--o3-font-lineheight-3); /* Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News). */ --o3-typography-use-case-title-lg-font-family: var(--o3-font-family-metric); /* 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-weight: var(--o3-font-weight-semibold); /* 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-size: var(--o3-font-size-metric2-4); /* Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints. */ diff --git a/components/o3-foundation/src/css/tokens/core/professional/_variables.css b/components/o3-foundation/src/css/tokens/core/professional/_variables.css index dc63a2cd58..25dd454968 100644 --- a/components/o3-foundation/src/css/tokens/core/professional/_variables.css +++ b/components/o3-foundation/src/css/tokens/core/professional/_variables.css @@ -216,8 +216,8 @@ --o3-typography-use-case-headline-md-line-height: var(--o3-font-lineheight-5); /* Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News). */ --o3-typography-use-case-headline-sm-font-family: var(--o3-font-family-financier-display); /* 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: var(--o3-font-weight-light); /* 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: var(--o3-font-size-4); /* 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: var(--o3-font-lineheight-4); /* 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: var(--o3-font-size-3); /* 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: var(--o3-font-lineheight-3); /* Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News). */ --o3-typography-use-case-title-lg-font-family: var(--o3-font-family-metric); /* 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-weight: var(--o3-font-weight-semibold); /* 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-size: var(--o3-font-size-metric2-4); /* Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints. */ diff --git a/components/o3-foundation/src/css/tokens/sustainable-views/_variables.css b/components/o3-foundation/src/css/tokens/sustainable-views/_variables.css index 632da6f42c..3ff18d368b 100644 --- a/components/o3-foundation/src/css/tokens/sustainable-views/_variables.css +++ b/components/o3-foundation/src/css/tokens/sustainable-views/_variables.css @@ -139,8 +139,8 @@ --o3-typography-use-case-headline-md-line-height: var(--o3-font-lineheight-metric2-5); /* Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News). */ --o3-typography-use-case-headline-sm-font-family: var(--o3-font-family-metric); /* 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: var(--o3-font-weight-regular); /* 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: var(--o3-font-size-metric2-4); /* 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: var(--o3-font-lineheight-metric2-4); /* 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: var(--o3-font-size-metric2-3); /* 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: var(--o3-font-lineheight-metric2-3); /* Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News). */ --o3-typography-use-case-title-lg-font-family: var(--o3-font-family-metric); /* 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-weight: var(--o3-font-weight-semibold); /* 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-size: var(--o3-font-size-metric2-4); /* Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints. */ diff --git a/components/o3-foundation/src/css/tokens/whitelabel/_variables.css b/components/o3-foundation/src/css/tokens/whitelabel/_variables.css index 787ab4ad76..f4c33462dd 100644 --- a/components/o3-foundation/src/css/tokens/whitelabel/_variables.css +++ b/components/o3-foundation/src/css/tokens/whitelabel/_variables.css @@ -151,8 +151,8 @@ --o3-typography-use-case-headline-md-line-height: var(--o3-font-lineheight-5); /* Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News). */ --o3-typography-use-case-headline-sm-font-family: var(--o3-font-family-financier-display); /* 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: var(--o3-font-weight-light); /* 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: var(--o3-font-size-4); /* 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: var(--o3-font-lineheight-4); /* 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: var(--o3-font-size-3); /* 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: var(--o3-font-lineheight-3); /* Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News). */ --o3-typography-use-case-title-lg-font-family: var(--o3-font-family-metric); /* 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-weight: var(--o3-font-weight-semibold); /* 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-size: var(--o3-font-size-metric2-4); /* Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints. */ diff --git a/libraries/o3-tooling-token/build/core/_variables.js b/libraries/o3-tooling-token/build/core/_variables.js index 5472fb1ca5..de609e3e43 100644 --- a/libraries/o3-tooling-token/build/core/_variables.js +++ b/libraries/o3-tooling-token/build/core/_variables.js @@ -2625,8 +2625,8 @@ export default { }, "o3-typography-use-case-headline-sm-font-size": { "shortName": "fontSize", - "value": "28px", - "originalValue": "{o3.font.size.4}", + "value": "24px", + "originalValue": "{o3.font.size.3}", "type": "dimension", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", "attributes": { @@ -2646,8 +2646,8 @@ export default { }, "o3-typography-use-case-headline-sm-line-height": { "shortName": "lineHeight", - "value": "32px", - "originalValue": "{o3.font.lineheight.4}", + "value": "28px", + "originalValue": "{o3.font.lineheight.3}", "type": "number", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", "attributes": { diff --git a/libraries/o3-tooling-token/build/core/professional/_variables.js b/libraries/o3-tooling-token/build/core/professional/_variables.js index cfcc0e11fa..c20de48a29 100644 --- a/libraries/o3-tooling-token/build/core/professional/_variables.js +++ b/libraries/o3-tooling-token/build/core/professional/_variables.js @@ -2863,8 +2863,8 @@ export default { }, "o3-typography-use-case-headline-sm-font-size": { "shortName": "fontSize", - "value": "28px", - "originalValue": "{o3.font.size.4}", + "value": "24px", + "originalValue": "{o3.font.size.3}", "type": "dimension", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", "attributes": { @@ -2884,8 +2884,8 @@ export default { }, "o3-typography-use-case-headline-sm-line-height": { "shortName": "lineHeight", - "value": "32px", - "originalValue": "{o3.font.lineheight.4}", + "value": "28px", + "originalValue": "{o3.font.lineheight.3}", "type": "number", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", "attributes": { diff --git a/libraries/o3-tooling-token/build/sustainable-views/_variables.js b/libraries/o3-tooling-token/build/sustainable-views/_variables.js index a2a13e3df7..f62b6dd44c 100644 --- a/libraries/o3-tooling-token/build/sustainable-views/_variables.js +++ b/libraries/o3-tooling-token/build/sustainable-views/_variables.js @@ -1406,8 +1406,8 @@ export default { }, "o3-typography-use-case-headline-sm-font-size": { "shortName": "fontSize", - "value": "28px", - "originalValue": "{o3.font.size-metric2.4}", + "value": "24px", + "originalValue": "{o3.font.size-metric2.3}", "type": "dimension", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", "attributes": { @@ -1428,7 +1428,7 @@ export default { "o3-typography-use-case-headline-sm-line-height": { "shortName": "lineHeight", "value": "32px", - "originalValue": "{o3.font.lineheight-metric2.4}", + "originalValue": "{o3.font.lineheight-metric2.3}", "type": "number", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", "attributes": { diff --git a/libraries/o3-tooling-token/build/whitelabel/_variables.js b/libraries/o3-tooling-token/build/whitelabel/_variables.js index 5996fc9217..6984e3bc1f 100644 --- a/libraries/o3-tooling-token/build/whitelabel/_variables.js +++ b/libraries/o3-tooling-token/build/whitelabel/_variables.js @@ -2702,8 +2702,8 @@ export default { }, "o3-typography-use-case-headline-sm-font-size": { "shortName": "fontSize", - "value": "28px", - "originalValue": "{o3.font.size.4}", + "value": "24px", + "originalValue": "{o3.font.size.3}", "type": "dimension", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", "attributes": { @@ -2723,8 +2723,8 @@ export default { }, "o3-typography-use-case-headline-sm-line-height": { "shortName": "lineHeight", - "value": "32px", - "originalValue": "{o3.font.lineheight.4}", + "value": "28px", + "originalValue": "{o3.font.lineheight.3}", "type": "number", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", "attributes": {