@bonniernews/dn-design-system-web 3.0.0-alpha.84 → 3.0.0-alpha.86

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 3.0.0-alpha.86 (2023-06-07)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.85](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.84...@bonniernews/dn-design-system-web@3.0.0-alpha.85) (2023-06-05)
+
+
+### Bug Fixes
+
+* **web:** gubbe alltid bredvid rubbe ([#863](https://github.com/BonnierNews/dn-design-system/issues/863)) ([59b6842](https://github.com/BonnierNews/dn-design-system/commit/59b68425f4e914f5859ca946b5250030bde2c018))
+
+
+
 ## [3.0.0-alpha.84](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.83...@bonniernews/dn-design-system-web@3.0.0-alpha.84) (2023-06-05)
 
 

package/components/teaser-large/teaser-large.njk

@@ -62,27 +62,30 @@
     {% endif %}
 
     <div class="{{ componentClassName + '__content'}}">
-      {% if params.vignette %}
-        <div class="ds-teaser__vignette">{{ params.vignette }}</div>
-      {% endif %}
-      <h2 class="ds-teaser__title">
-        {% if params.highlight %}
-          <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
+      <div class="ds-teaser__content-inner">
+        {% if params.vignette %}
+          <div class="ds-teaser__vignette">{{ params.vignette }}</div>
         {% endif %}
-        {{ params.title }}
-      </h2>
-
-      {% if params.text and params.areaType !== "right" %}
-        <p class="{{ componentClassName + '__text' }}">
-          {{ getDotOrGrade({ flashing: params.isFlashingDot, grade: params.grade }) }}
-          {% if params.sticker %}
-            <span class="ds-teaser__sticker">
-              {{ params.sticker }}
-            </span>
+        <h2 class="ds-teaser__title">
+          {% if params.highlight %}
+            <span class="{{ componentClassName + '__highlight'}}">{{ params.highlight }}</span>
           {% endif %}
-          {{ params.text}}
-        </p>
-      {% endif %}
+          {{ params.title }}
+        </h2>
+
+        {% if params.text and params.areaType !== "right" %}
+          <p class="{{ componentClassName + '__text' }}">
+            {{ getDotOrGrade({ flashing: params.isFlashingDot, grade: params.grade }) }}
+            {% if params.sticker %}
+              <span class="ds-teaser__sticker">
+                {{ params.sticker }}
+              </span>
+            {% endif %}
+            {{ params.text }}
+          </p>
+        {% endif %}
+      </div>
+
       {% if params.bylineHtml %}
         <div class="{{ componentClassName + '__byline'}}">
           {{ params.bylineHtml | safe }}

package/components/teaser-large/teaser-large.scss

@@ -2,7 +2,8 @@
 @use "../../assets/teaser/teaser.scss" as *;
 
 .ds-teaser.ds-teaser--large {
-  display: block;
+  display: flex;
+  flex-direction: column;
   position: relative;
 
   .ds-teaser__media {
@@ -12,10 +13,8 @@
   }
 
   .ds-teaser__content {
-    flex: 1;
-    display: grid;
-    grid-auto-rows: auto;
-    grid-template-columns: 1fr auto;
+    display: flex;
+    flex-direction: row;
     @include ds-spacing-layout($ds-sl-teaser-vertical $ds-sl-teaser-horizontal);
 
     // Special case for large teaser, should be replaced with dynamic spacing layout token when available
@@ -25,6 +24,12 @@
     @include ds-mq-smallest-breakpoint(tablet) {
       padding-bottom: ds-spacing-component($ds-sc-x4);
     }
+
+    .ds-teaser__content-inner {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
   }
 
   &:focus-visible {
@@ -35,13 +40,7 @@
     }
   }
 
-  .ds-teaser__vignette {
-    grid-column: 1;
-  }
-
   .ds-teaser__title {
-    grid-row: 1;
-    grid-column: 1 / span 1;
     @include ds-typography($ds-typography-expressive-heading04bold);
   }
 
@@ -51,35 +50,10 @@
     }
   }
 
-  .ds-teaser__vignette + .ds-teaser__title {
-    grid-row: 2;
-  }
-
-  .ds-teaser__text {
-    grid-row: 3;
-  }
-
   &.ds-teaser--large-big-italic {
     .ds-teaser__title {
       @include ds-typography($ds-typography-expressive-heading04italicregular);
     }
-
-    @include ds-mq-largest-breakpoint(mobile) {
-      .ds-teaser__title {
-        grid-column-end: span 2;
-      }
-
-      .ds-teaser__byline {
-        grid-row: 3;
-        margin-top: ds-spacing-component($ds-sc-x2);
-      }
-    }
-
-    @include ds-mq-smallest-breakpoint(tablet) {
-      .ds-teaser__title {
-        grid-column-end: span 1;
-      }
-    }
   }
 
   &.ds-teaser--large-italic {
@@ -95,11 +69,10 @@
   }
 
   .ds-teaser__byline {
-    grid-column: 2;
-    grid-row: 1 / span 3;
     overflow: hidden;
     position: relative;
     margin-left: ds-spacing-component($ds-sc-x4);
+
     // margin-bottom needs to be the negative value of padding-bottom on .ds-teaser__content
     @include ds-mq-only-breakpoint(mobile) {
       margin-bottom: ds-spacing-component($ds-sc-x3, "px", true);
@@ -112,9 +85,9 @@
       position: absolute;
       top: 0;
       right: 0;
-      @include ds-spacing-layout($ds-sl-teaser-vertical, bottom, "px", true);
+      bottom: 0;
       width: 100%;
-      min-width: 104px;
+      min-width: 96px;
       margin: 0;
 
       > .picture__img {
@@ -125,15 +98,16 @@
     }
 
     @include ds-mq-largest-breakpoint(mobile) {
-      width: 104px;
-      min-height: 85px;
+      width: 96px;
+      min-height: 96px;
       margin-left: ds-spacing-component($ds-sc-x2);
     }
 
     @include ds-mq-smallest-breakpoint(tablet) {
-      width: 156px;
+      width: 144px;
       // En bylinebild bör va lika hög som en "grekisk byst" - man ska se lite skjortkrage!
       min-height: 110px;
+      margin-left: ds-spacing-component($ds-sc-x4);
     }
   }
 
@@ -156,8 +130,8 @@
       }
 
       .ds-teaser__byline {
-        width: 104px;
-        min-height: 85px;
+        width: 96px;
+        min-height: 96px;
         margin-left: ds-spacing-component($ds-sc-x2);
       }
     }

package/foundations/helpers/typography.scss

@@ -7,6 +7,7 @@
 @use "utilities.scss" as *;
 @use '../variables/typographyTokensScreenSmall.scss' as *;
 @use '../variables/typographyTokensScreenLarge.scss' as *;
+@use '../variables/typographyTokensScreenExtraLarge.scss' as *;
 @forward '../variables/typographyTokensList.scss';
 @forward '../variables/decorations.scss';
 
@@ -71,6 +72,10 @@ $dsSerifWeights: (
 @mixin ds-typography($component, $forcePx: false) {
   $tmpMap: map.get($typographyTokensScreenSmall, $component);
   $tmpMapScreenLarge: map.get($typographyTokensScreenLarge, $component);
+  $tmpMapScreenExtraLarge: map.get(
+    $typographyTokensScreenExtraLarge,
+    $component
+  );
 
   @if $tmpMap {
     @include ds-mq-largest-breakpoint(mobile) {
@@ -82,7 +87,7 @@ $dsSerifWeights: (
   }
 
   @if $tmpMapScreenLarge {
-    @include ds-mq-smallest-breakpoint(tablet) {
+    @include ds-mq-only-breakpoint(tablet) {
       @include _ds-normalize-letter-spacing($tmpMapScreenLarge);
       @each $key in map-keys($tmpMapScreenLarge) {
         @include _ds-typography-get-property(
@@ -93,6 +98,19 @@ $dsSerifWeights: (
       }
     }
   }
+
+  @if $tmpMapScreenExtraLarge {
+    @include ds-mq-smallest-breakpoint(desktop) {
+      @include _ds-normalize-letter-spacing($tmpMapScreenExtraLarge);
+      @each $key in map-keys($tmpMapScreenExtraLarge) {
+        @include _ds-typography-get-property(
+          $tmpMapScreenExtraLarge,
+          $key,
+          $forcePx
+        );
+      }
+    }
+  }
 }
 
 @mixin ds-typography-without-mq($component, $screen: false, $forcePx: false) {
@@ -100,8 +118,10 @@ $dsSerifWeights: (
 
   @if $screen == mobile {
     $tmpMap: map.get($typographyTokensScreenSmall, $component);
-  } @else if $screen == tablet or $screen == desktop {
+  } @else if $screen == tablet {
     $tmpMap: map.get($typographyTokensScreenLarge, $component);
+  } @else if $screen == desktop {
+    $tmpMap: map.get($typographyTokensScreenExtraLarge, $component);
   }
 
   @if $tmpMap {

package/foundations/variables/typographyTokensScreenExtraLarge.scss

@@ -0,0 +1,571 @@
+$typographyTokensScreenExtraLarge: (
+  expressive-heading04regular: (
+    fontFamily: "DN Serif",
+    fontWeight: Regular,
+    fontSize: 56,
+    lineHeight: 60
+  ),
+  expressive-heading04semibold: (
+    fontFamily: "DN Serif",
+    fontWeight: SemiBold,
+    fontSize: 56,
+    lineHeight: 60
+  ),
+  expressive-heading04bold: (
+    fontFamily: "DN Serif",
+    fontWeight: Bold,
+    fontSize: 56,
+    lineHeight: 60
+  ),
+  expressive-heading04italicregular: (
+    fontSize: 56,
+    lineHeight: 60,
+    fontWeight: Regular,
+    fontFamily: "DN Serif Italic",
+    fontStyle: italic
+  ),
+  expressive-heading04italicsemibold: (
+    fontSize: 56,
+    lineHeight: 60,
+    fontWeight: SemiBold,
+    fontFamily: "DN Serif Italic",
+    fontStyle: italic
+  ),
+  expressive-heading04italicbold: (
+    fontSize: 56,
+    lineHeight: 60,
+    fontWeight: Bold,
+    fontFamily: "DN Serif Italic",
+    fontStyle: italic
+  ),
+  expressive-heading05regular: (
+    fontFamily: "DN Serif",
+    fontWeight: Regular,
+    lineHeight: 88,
+    fontSize: 80
+  ),
+  expressive-heading05semibold: (
+    fontFamily: "DN Serif",
+    fontWeight: SemiBold,
+    lineHeight: 88,
+    fontSize: 80
+  ),
+  expressive-heading05bold: (
+    fontFamily: "DN Serif",
+    fontWeight: Bold,
+    lineHeight: 88,
+    fontSize: 80
+  ),
+  expressive-heading05italicregular: (
+    fontFamily: "DN Serif Italic",
+    fontWeight: Regular,
+    fontSize: 80,
+    lineHeight: 88,
+    fontStyle: italic
+  ),
+  expressive-heading05italicsemibold: (
+    fontFamily: "DN Serif Italic",
+    fontWeight: SemiBold,
+    fontSize: 80,
+    lineHeight: 88,
+    fontStyle: italic
+  ),
+  expressive-heading05italicbold: (
+    fontFamily: "DN Serif Italic",
+    fontWeight: Bold,
+    fontSize: 80,
+    lineHeight: 88,
+    fontStyle: italic
+  ),
+  expressive-heading01regular: (
+    fontFamily: "DN Serif",
+    fontWeight: Regular,
+    fontSize: 16,
+    lineHeight: 20
+  ),
+  expressive-heading01semibold: (
+    fontFamily: "DN Serif",
+    fontWeight: SemiBold,
+    fontSize: 16,
+    lineHeight: 20
+  ),
+  expressive-heading01bold: (
+    fontFamily: "DN Serif",
+    fontWeight: Bold,
+    fontSize: 16,
+    lineHeight: 20
+  ),
+  expressive-heading01italicregular: (
+    lineHeight: 20,
+    fontSize: 16,
+    fontFamily: "DN Serif Italic",
+    fontWeight: Regular,
+    fontStyle: italic
+  ),
+  expressive-heading01italicsemibold: (
+    lineHeight: 20,
+    fontSize: 16,
+    fontFamily: "DN Serif Italic",
+    fontWeight: SemiBold,
+    fontStyle: italic
+  ),
+  expressive-heading01italicbold: (
+    lineHeight: 20,
+    fontSize: 16,
+    fontFamily: "DN Serif Italic",
+    fontWeight: Bold,
+    fontStyle: italic
+  ),
+  expressive-heading02regular: (
+    fontFamily: "DN Serif",
+    fontWeight: Regular,
+    fontSize: 22,
+    lineHeight: 26,
+    paragraphSpacing: 16
+  ),
+  expressive-heading02semibold: (
+    fontFamily: "DN Serif",
+    fontWeight: SemiBold,
+    fontSize: 22,
+    lineHeight: 26
+  ),
+  expressive-heading02bold: (
+    fontFamily: "DN Serif",
+    fontWeight: Bold,
+    fontSize: 22,
+    lineHeight: 26
+  ),
+  expressive-heading02italicregular: (
+    fontSize: 22,
+    lineHeight: 26,
+    fontWeight: Regular,
+    fontFamily: "DN Serif Italic",
+    fontStyle: italic
+  ),
+  expressive-heading02italicsemibold: (
+    fontSize: 22,
+    lineHeight: 26,
+    fontWeight: SemiBold,
+    fontFamily: "DN Serif Italic",
+    fontStyle: italic
+  ),
+  expressive-heading02italicbold: (
+    fontSize: 22,
+    lineHeight: 26,
+    fontWeight: Bold,
+    fontFamily: "DN Serif Italic",
+    fontStyle: italic
+  ),
+  expressive-heading03regular: (
+    fontFamily: "DN Serif",
+    fontWeight: Regular,
+    fontSize: 36,
+    lineHeight: 40
+  ),
+  expressive-heading03semibold: (
+    fontFamily: "DN Serif",
+    fontWeight: SemiBold,
+    fontSize: 36,
+    lineHeight: 40
+  ),
+  expressive-heading03bold: (
+    fontFamily: "DN Serif",
+    fontWeight: Bold,
+    fontSize: 36,
+    lineHeight: 40
+  ),
+  expressive-heading03italicregular: (
+    fontSize: 36,
+    lineHeight: 40,
+    fontWeight: Regular,
+    fontFamily: "DN Serif Italic",
+    fontStyle: italic
+  ),
+  expressive-heading03italicsemibold: (
+    fontSize: 36,
+    lineHeight: 40,
+    fontWeight: SemiBold,
+    fontFamily: "DN Serif Italic",
+    fontStyle: italic
+  ),
+  expressive-heading03italicbold: (
+    fontSize: 36,
+    lineHeight: 40,
+    fontWeight: Bold,
+    fontFamily: "DN Serif Italic",
+    fontStyle: italic
+  ),
+  functional-heading01regular: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    fontSize: 16,
+    lineHeight: 20
+  ),
+  functional-heading01semibold: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    fontSize: 16,
+    lineHeight: 20
+  ),
+  functional-heading01bold: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 16,
+    lineHeight: 20
+  ),
+  functional-heading02regular: (
+    fontFamily: "DN Sans",
+    fontSize: 20,
+    fontWeight: Regular,
+    lineHeight: 24
+  ),
+  functional-heading02semibold: (
+    fontFamily: "DN Sans",
+    fontSize: 20,
+    fontWeight: SemiBold,
+    lineHeight: 24
+  ),
+  functional-heading02bold: (
+    fontFamily: "DN Sans",
+    fontSize: 20,
+    fontWeight: Bold,
+    lineHeight: 24
+  ),
+  functional-heading03regular: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    lineHeight: 32,
+    fontSize: 24
+  ),
+  functional-heading03semibold: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    lineHeight: 32,
+    fontSize: 24
+  ),
+  functional-heading03bold: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    lineHeight: 32,
+    fontSize: 24
+  ),
+  functional-heading04regular: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    fontSize: 31,
+    lineHeight: 36
+  ),
+  functional-heading04semibold: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    fontSize: 31,
+    lineHeight: 36
+  ),
+  functional-heading04bold: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 31,
+    lineHeight: 36
+  ),
+  functional-heading05regular: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    fontSize: 39,
+    lineHeight: 48
+  ),
+  functional-heading05semibold: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    fontSize: 39,
+    lineHeight: 48
+  ),
+  functional-heading05bold: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 39,
+    lineHeight: 48
+  ),
+  expressive-preamble01regular: (
+    fontFamily: "DN Serif",
+    fontWeight: Regular,
+    fontSize: 20,
+    lineHeight: 30
+  ),
+  expressive-preamble01semibold: (
+    fontFamily: "DN Serif",
+    fontWeight: SemiBold,
+    fontSize: 20,
+    lineHeight: 30
+  ),
+  expressive-preamble01bold: (
+    fontFamily: "DN Serif",
+    fontWeight: Bold,
+    fontSize: 20,
+    lineHeight: 30
+  ),
+  expressive-preamble01italicregular: (
+    fontFamily: "DN Serif Italic",
+    fontWeight: Regular,
+    lineHeight: 30,
+    fontSize: 20,
+    fontStyle: italic
+  ),
+  expressive-preamble01italicsemibold: (
+    fontFamily: "DN Serif Italic",
+    fontWeight: SemiBold,
+    lineHeight: 30,
+    fontSize: 20,
+    fontStyle: italic
+  ),
+  expressive-preamble01italicbold: (
+    fontFamily: "DN Serif Italic",
+    fontWeight: Bold,
+    lineHeight: 30,
+    fontSize: 20,
+    fontStyle: italic
+  ),
+  expressive-body01regular: (
+    fontFamily: "DN Serif",
+    fontWeight: Regular,
+    fontSize: 16,
+    lineHeight: 24
+  ),
+  expressive-body01semibold: (
+    fontFamily: "DN Serif",
+    fontWeight: SemiBold,
+    fontSize: 16,
+    lineHeight: 24
+  ),
+  expressive-body01bold: (
+    fontFamily: "DN Serif",
+    fontWeight: Bold,
+    fontSize: 16,
+    lineHeight: 24
+  ),
+  expressive-body01italicregular: (
+    fontFamily: "DN Serif Italic",
+    fontWeight: Regular,
+    lineHeight: 24,
+    fontSize: 16,
+    fontStyle: italic
+  ),
+  expressive-body01italicsemibold: (
+    fontFamily: "DN Serif Italic",
+    fontWeight: SemiBold,
+    lineHeight: 24,
+    fontSize: 16,
+    fontStyle: italic
+  ),
+  expressive-body01italicbold: (
+    fontFamily: "DN Serif Italic",
+    fontWeight: Bold,
+    lineHeight: 24,
+    fontSize: 16,
+    fontStyle: italic
+  ),
+  expressive-body02regular: (
+    fontFamily: "DN Serif",
+    fontWeight: Regular,
+    lineHeight: 28,
+    fontSize: 18
+  ),
+  expressive-body02semibold: (
+    fontFamily: "DN Serif",
+    fontWeight: SemiBold,
+    lineHeight: 28,
+    fontSize: 18
+  ),
+  expressive-body02bold: (
+    fontFamily: "DN Serif",
+    fontWeight: Bold,
+    lineHeight: 28,
+    fontSize: 18
+  ),
+  expressive-body02italicregular: (
+    fontFamily: "DN Serif Italic",
+    fontWeight: Regular,
+    lineHeight: 28,
+    fontSize: 18,
+    fontStyle: italic
+  ),
+  expressive-body02italicsemibold: (
+    fontFamily: "DN Serif Italic",
+    fontWeight: SemiBold,
+    lineHeight: 28,
+    fontSize: 18,
+    fontStyle: italic
+  ),
+  expressive-body02italicbold: (
+    fontFamily: "DN Serif Italic",
+    fontWeight: Bold,
+    lineHeight: 28,
+    fontSize: 18,
+    fontStyle: italic
+  ),
+  functional-body01regular: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    fontSize: 14,
+    letterSpacing: "",
+    lineHeight: 20,
+    paragraphSpacing: ""
+  ),
+  functional-body01semibold: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    fontSize: 14,
+    letterSpacing: "",
+    lineHeight: 20
+  ),
+  functional-body01bold: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 14,
+    letterSpacing: "",
+    lineHeight: 20
+  ),
+  functional-body02regular: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    lineHeight: 24,
+    fontSize: 16
+  ),
+  functional-body02semibold: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    lineHeight: 24,
+    fontSize: 16
+  ),
+  functional-body02bold: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    lineHeight: 24,
+    fontSize: 16
+  ),
+  functional-body03regular: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    lineHeight: 28,
+    fontSize: 20
+  ),
+  functional-body03semibold: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    lineHeight: 28,
+    fontSize: 20
+  ),
+  functional-body03bold: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    lineHeight: 28,
+    fontSize: 20
+  ),
+  functional-meta01regular: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    fontSize: 10,
+    lineHeight: 12
+  ),
+  functional-meta01semibold: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    fontSize: 10,
+    lineHeight: 12
+  ),
+  functional-meta01bold: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 10,
+    lineHeight: 12
+  ),
+  functional-meta02regular: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    lineHeight: 16,
+    fontSize: 12
+  ),
+  functional-meta02semibold: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    lineHeight: 16,
+    fontSize: 12
+  ),
+  functional-meta02bold: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    lineHeight: 16,
+    fontSize: 12
+  ),
+  detaildropcap: (
+    fontFamily: "DN Serif",
+    fontWeight: Bold,
+    lineHeight: 78,
+    fontSize: 92
+  ),
+  detailarticle-standard: (
+    fontFamily: "DN Serif",
+    fontWeight: Bold,
+    lineHeight: 52,
+    fontSize: 48
+  ),
+  detailarticle-opinion: (
+    fontFamily: "DN Serif",
+    fontWeight: Regular,
+    lineHeight: 52,
+    fontSize: 48,
+    fontStyle: italic
+  ),
+  detailarticle-longread: (
+    fontFamily: "DN Serif",
+    fontWeight: Regular,
+    lineHeight: 64,
+    fontSize: 56
+  ),
+  detailarticle-longread-premium: (
+    fontFamily: "DN Serif",
+    fontWeight: Bold,
+    lineHeight: 64,
+    fontSize: 56
+  ),
+  detailstandard-button: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    lineHeight: 24,
+    fontSize: 16
+  ),
+  detailbottom-nav: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    lineHeight: 16,
+    fontSize: 12,
+    letterSpacing: 0.2
+  ),
+  detailstandard-button-small: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    lineHeight: 20,
+    fontSize: 14
+  ),
+  detailarticle-label: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    lineHeight: 16,
+    fontSize: 12,
+    textCase: uppercase,
+    letterSpacing: 0.5
+  ),
+  detailmedryckare: (
+    fontFamily: "DN Serif",
+    fontWeight: Regular,
+    fontSize: 16,
+    lineHeight: 22
+  ),
+  detailbaota-xl-label: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    lineHeight: 24,
+    fontSize: 16,
+    textCase: upperCase,
+    letterSpacing: 0.7
+  )
+);

package/foundations/variables/typographyTokensScreenLarge.scss

@@ -41,39 +41,39 @@ $typographyTokensScreenLarge: (
   expressive-heading02regular: (
     fontFamily: "DN Serif",
     fontWeight: Regular,
-    fontSize: 24,
-    lineHeight: 28,
+    fontSize: 22,
+    lineHeight: 26,
     paragraphSpacing: 16
   ),
   expressive-heading02semibold: (
     fontFamily: "DN Serif",
     fontWeight: SemiBold,
-    fontSize: 24,
-    lineHeight: 28
+    fontSize: 22,
+    lineHeight: 26
   ),
   expressive-heading02bold: (
     fontFamily: "DN Serif",
     fontWeight: Bold,
-    fontSize: 24,
-    lineHeight: 28
+    fontSize: 22,
+    lineHeight: 26
   ),
   expressive-heading02italicregular: (
-    fontSize: 24,
-    lineHeight: 28,
+    fontSize: 22,
+    lineHeight: 26,
     fontWeight: Regular,
     fontFamily: "DN Serif Italic",
     fontStyle: italic
   ),
   expressive-heading02italicsemibold: (
-    fontSize: 24,
-    lineHeight: 28,
+    fontSize: 22,
+    lineHeight: 26,
     fontWeight: SemiBold,
     fontFamily: "DN Serif Italic",
     fontStyle: italic
   ),
   expressive-heading02italicbold: (
-    fontSize: 24,
-    lineHeight: 28,
+    fontSize: 22,
+    lineHeight: 26,
     fontWeight: Bold,
     fontFamily: "DN Serif Italic",
     fontStyle: italic
@@ -120,38 +120,38 @@ $typographyTokensScreenLarge: (
   expressive-heading04regular: (
     fontFamily: "DN Serif",
     fontWeight: Regular,
-    fontSize: 56,
-    lineHeight: 60
+    fontSize: 48,
+    lineHeight: 52
   ),
   expressive-heading04semibold: (
     fontFamily: "DN Serif",
     fontWeight: SemiBold,
-    fontSize: 56,
-    lineHeight: 60
+    fontSize: 48,
+    lineHeight: 52
   ),
   expressive-heading04bold: (
     fontFamily: "DN Serif",
     fontWeight: Bold,
-    fontSize: 56,
-    lineHeight: 60
+    fontSize: 48,
+    lineHeight: 52
   ),
   expressive-heading04italicregular: (
-    fontSize: 56,
-    lineHeight: 60,
+    fontSize: 48,
     fontWeight: Regular,
     fontFamily: "DN Serif Italic",
+    lineHeight: 52,
     fontStyle: italic
   ),
   expressive-heading04italicsemibold: (
-    fontSize: 56,
-    lineHeight: 60,
+    fontSize: 48,
+    lineHeight: 52,
     fontWeight: SemiBold,
     fontFamily: "DN Serif Italic",
     fontStyle: italic
   ),
   expressive-heading04italicbold: (
-    fontSize: 56,
-    lineHeight: 60,
+    fontSize: 48,
+    lineHeight: 52,
     fontWeight: Bold,
     fontFamily: "DN Serif Italic",
     fontStyle: italic

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -44,59 +44,59 @@ $typographyTokensScreenSmall: (
   expressive-heading02regular: (
     fontFamily: "DN Serif",
     fontWeight: Regular,
-    fontSize: 18,
-    lineHeight: 22
+    fontSize: 17,
+    lineHeight: 21
   ),
   expressive-heading02semibold: (
     fontFamily: "DN Serif",
     fontWeight: SemiBold,
-    fontSize: 18,
-    lineHeight: 22
+    fontSize: 17,
+    lineHeight: 21
   ),
   expressive-heading02bold: (
     fontFamily: "DN Serif",
     fontWeight: Bold,
-    fontSize: 18,
-    lineHeight: 22
+    fontSize: 17,
+    lineHeight: 21
   ),
   expressive-heading02italicregular: (
     fontFamily: "DN Serif Italic",
     fontWeight: Regular,
-    fontSize: 18,
-    lineHeight: 22,
+    fontSize: 17,
+    lineHeight: 21,
     fontStyle: italic
   ),
   expressive-heading02italicsemibold: (
     fontFamily: "DN Serif Italic",
     fontWeight: SemiBold,
-    fontSize: 18,
-    lineHeight: 22,
+    fontSize: 17,
+    lineHeight: 21,
     fontStyle: italic
   ),
   expressive-heading02italicbold: (
     fontFamily: "DN Serif Italic",
     fontWeight: Bold,
-    fontSize: 18,
-    lineHeight: 22,
+    fontSize: 17,
+    lineHeight: 21,
     fontStyle: italic
   ),
   expressive-heading03regular: (
     fontFamily: "DN Serif",
     fontWeight: Regular,
-    fontSize: 22,
-    lineHeight: 26
+    lineHeight: 24,
+    fontSize: 20
   ),
   expressive-heading03semibold: (
     fontFamily: "DN Serif",
     fontWeight: SemiBold,
-    fontSize: 22,
-    lineHeight: 26
+    fontSize: 20,
+    lineHeight: 24
   ),
   expressive-heading03bold: (
     fontFamily: "DN Serif",
     fontWeight: Bold,
-    fontSize: 22,
-    lineHeight: 26
+    fontSize: 20,
+    lineHeight: 24
   ),
   expressive-heading03italicregular: (
     fontFamily: "DN Serif Italic",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bonniernews/dn-design-system-web",
-  "version": "3.0.0-alpha.84",
+  "version": "3.0.0-alpha.86",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",