@bonniernews/dn-design-system-web 16.0.1 → 16.0.3

package/CHANGELOG.md

@@ -4,6 +4,21 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [16.0.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.0.2...@bonniernews/dn-design-system-web@16.0.3) (2024-07-09)
+
+
+### Maintenance
+
+* **web:** update typo tokens ([#1322](https://github.com/BonnierNews/dn-design-system/issues/1322)) ([e336d0c](https://github.com/BonnierNews/dn-design-system/commit/e336d0cf849bd8766c0369140fbf46029b771080))
+
+## [16.0.2](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.0.1...@bonniernews/dn-design-system-web@16.0.2) (2024-07-08)
+
+
+### Maintenance
+
+* **foundations:** update tokens from Figma ([#1331](https://github.com/BonnierNews/dn-design-system/issues/1331)) ([4bb8bb4](https://github.com/BonnierNews/dn-design-system/commit/4bb8bb414b937823a6e1d70d19e203af9ee78b3a))
+* prerelease packages ([2286be7](https://github.com/BonnierNews/dn-design-system/commit/2286be7e493bcd677bde95444a5b27e4b3e570d0))
+
 ## [16.0.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@16.0.0...@bonniernews/dn-design-system-web@16.0.1) (2024-07-05)
 
 

package/assets/form-field/form-field.scss

@@ -7,7 +7,7 @@ $ds-form-field__error-icon-size: 20px;
   margin-top: ds-spacing($ds-s-050);
   margin-bottom: 0;
   color: $ds-color-text-primary-02;
-  @include ds-typography($ds-typography-functional-body01regular);
+  @include ds-typography($ds-typography-functionalbody01);
 }
 
 .ds-form-field__error-message {
@@ -30,7 +30,7 @@ $ds-form-field__error-icon-size: 20px;
       }
     }
     span {
-      @include ds-typography($ds-typography-functional-body01regular);
+      @include ds-typography($ds-typography-functionalbody01);
     }
   }
 
@@ -49,12 +49,12 @@ $ds-form-field__error-icon-size: 20px;
         width: $ds-form-field__error-icon-size;
       }
       span {
-        @include ds-typography($ds-typography-functional-body01regular, true);
+        @include ds-typography($ds-typography-functionalbody01, true);
       }
     }
   }
 
   .ds-form-field__help-text {
-    @include ds-typography($ds-typography-functional-body01regular, true);
+    @include ds-typography($ds-typography-functionalbody01, true);
   }
 }

package/components/badge/badge.scss

@@ -7,7 +7,7 @@ $ds-badge__min-size: 8px;
   box-sizing: content-box;
 
   .ds-badge__inner {
-    @include ds-typography($ds-typography-functional-meta02semibold, $lineHeight: 0);
+    @include ds-typography($ds-typography-functionalmeta02, $lineHeight: 0, $fontWeight: $ds-fontweight-semibold);
     color: $ds-color-static-white;
     background-color: $ds-color-component-brand;
     border: $ds-color-border-secondary ds-metrics-border-width(x2) solid;
@@ -19,7 +19,12 @@ $ds-badge__min-size: 8px;
     min-width: ds-px-to-rem($ds-badge__min-size);
     padding: ds-spacing($ds-s-025, rem);
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functional-meta02semibold, $forcePx: true, $lineHeight: 0);
+      @include ds-typography(
+        $ds-typography-functionalmeta02,
+        $forcePx: true,
+        $lineHeight: 0,
+        $fontWeight: $ds-fontweight-semibold
+      );
       min-height: $ds-badge__min-size;
       min-width: $ds-badge__min-size;
       padding: ds-spacing($ds-s-025);

package/components/blocked-content/blocked-content.scss

@@ -15,10 +15,10 @@
 
   .ds-blocked-content__body {
     margin: ds-spacing(0 0 $ds-s-200);
-    @include ds-typography($ds-typography-functional-body02regular);
+    @include ds-typography($ds-typography-functionalbody02);
     color: $ds-color-text-primary;
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functional-body02regular, true);
+      @include ds-typography($ds-typography-functionalbody02, true);
     }
   }
 
@@ -30,11 +30,20 @@
   }
 
   .ds-blocked-content__title {
-    @include ds-typography($ds-typography-functional-heading01semibold);
+    @include ds-typography(
+      $ds-typography-functionalheading01,
+      $lineHeight: $ds-lineheight-m,
+      $fontWeight: $ds-fontweight-semibold
+    );
     color: $ds-color-text-primary;
     margin: ds-spacing(0 0 $ds-s-050);
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functional-heading01semibold, true);
+      @include ds-typography(
+        $ds-typography-functionalheading01,
+        $forcePx: true,
+        $lineHeight: $ds-lineheight-m,
+        $fontWeight: $ds-fontweight-semibold
+      );
     }
   }
 }

package/components/buddy-menu/buddy-menu.scss

@@ -48,7 +48,7 @@
     top: ds-spacing($ds-s-075);
   }
   .ds-buddy-menu__greeting {
-    @include ds-typography($ds-typography-functional-heading03bold);
+    @include ds-typography($ds-typography-functionalheading03);
     color: $ds-color-text-primary;
     margin: ds-spacing(0 0 $ds-s-100);
     display: block;
@@ -56,7 +56,7 @@
   .ds-buddy-menu__account-title,
   .ds-buddy-menu__addons-title,
   .ds-buddy-menu__links-title {
-    @include ds-typography($ds-typography-functional-body02semibold);
+    @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
     color: $ds-color-text-primary;
     margin: ds-spacing(0 0 $ds-s-025);
   }
@@ -69,13 +69,13 @@
     list-style: none;
     a {
       @include ds-link($ds-link-list);
-      @include ds-typography($ds-typography-functional-body02regular);
+      @include ds-typography($ds-typography-functionalbody02);
       color: $ds-color-text-primary-02;
       margin: ds-spacing(0 0 $ds-s-100);
     }
   }
   .ds-buddy-menu__account-level {
-    @include ds-typography($ds-typography-functional-body02regular);
+    @include ds-typography($ds-typography-functionalbody02);
     color: $ds-color-text-primary-02;
     margin: ds-spacing(0 0 $ds-s-100);
     display: block;
@@ -90,18 +90,18 @@
 
   &.ds-force-px {
     .ds-buddy-menu__greeting {
-      @include ds-typography($ds-typography-functional-heading03bold, true);
+      @include ds-typography($ds-typography-functionalheading03, true);
     }
     .ds-buddy-menu__account-title,
     .ds-buddy-menu__addons-title,
     .ds-buddy-menu__links-title {
-      @include ds-typography($ds-typography-functional-body02semibold, true);
+      @include ds-typography($ds-typography-functionalbody02, $forcePx: true, $fontWeight: $ds-fontweight-semibold);
     }
     .ds-buddy-menu__addons-list a {
-      @include ds-typography($ds-typography-functional-body02regular, true);
+      @include ds-typography($ds-typography-functionalbody02, true);
     }
     .ds-buddy-menu__account-level {
-      @include ds-typography($ds-typography-functional-body02regular, true);
+      @include ds-typography($ds-typography-functionalbody02, true);
     }
   }
 

package/components/byline/byline.scss

@@ -85,18 +85,27 @@ $ds-byline__image-size--direkt: 36px;
     word-break: break-all;
 
     .ds-byline__title {
-      @include ds-typography($ds-typography-functional-heading01semibold);
+      @include ds-typography(
+        $ds-typography-functionalheading01,
+        $lineHeight: $ds-lineheight-m,
+        $fontWeight: $ds-fontweight-semibold
+      );
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-heading01semibold, true);
+        @include ds-typography(
+          $ds-typography-functionalheading01,
+          $forcePx: true,
+          $lineHeight: $ds-lineheight-m,
+          $fontWeight: $ds-fontweight-semibold
+        );
       }
       color: $ds-color-text-primary;
       text-align: left;
     }
 
     .ds-byline__subtitle {
-      @include ds-typography($ds-typography-functional-body02regular);
+      @include ds-typography($ds-typography-functionalbody02);
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-body02regular, true);
+        @include ds-typography($ds-typography-functionalbody02, true);
       }
       color: $ds-color-text-primary-02;
       text-align: left;

package/components/checkbox/checkbox.scss

@@ -38,10 +38,10 @@ $ds-checkbox__icon-size: 24px;
 
     .ds-checkbox__text {
       margin: ds-spacing(0 0 0 $ds-s-050, rem);
-      @include ds-typography($ds-typography-functional-body02regular);
+      @include ds-typography($ds-typography-functionalbody02);
 
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-body02regular, true);
+        @include ds-typography($ds-typography-functionalbody02, true);
         margin: ds-spacing(0 0 0 $ds-s-050);
       }
     }

package/components/disclaimer/disclaimer.scss

@@ -20,13 +20,13 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
   }
 
   .ds-disclaimer__body-html {
-    @include ds-typography($ds-typography-functional-body01regular);
+    @include ds-typography($ds-typography-functionalbody01);
     margin: 0;
     color: $ds-color-text-primary-02;
     flex-grow: 1;
 
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functional-body01regular, true);
+      @include ds-typography($ds-typography-functionalbody01, true);
     }
 
     a {
@@ -34,10 +34,10 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
     }
     b,
     strong {
-      @include ds-typography($ds-typography-functional-body01semibold);
+      @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-semibold);
       color: $ds-color-text-primary;
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-body01semibold, true);
+        @include ds-typography($ds-typography-functionalbody01, $forcePx: true, $fontWeight: $ds-fontweight-semibold);
       }
     }
   }

package/components/factbox/factbox.scss

@@ -36,10 +36,10 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
 
   .ds-factbox__body {
     overflow: hidden;
-    @include ds-typography($ds-typography-functional-body02regular);
+    @include ds-typography($ds-typography-functionalbody02);
     color: $ds-color-text-primary;
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functional-body02regular, true);
+      @include ds-typography($ds-typography-functionalbody02, true);
     }
     p {
       margin: ds-spacing(0 0 $ds-s-100);
@@ -52,12 +52,12 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
     }
     b,
     strong {
-      @include ds-typography($ds-typography-functional-body02semibold);
+      @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
     }
     @at-root .ds-force-px#{&} {
       b,
       strong {
-        @include ds-typography($ds-typography-functional-body02semibold, true);
+        @include ds-typography($ds-typography-functionalbody02, $forcePx: true, $fontWeight: $ds-fontweight-semibold);
       }
     }
     img {
@@ -65,11 +65,11 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
     }
   }
   .ds-factbox__title {
-    @include ds-typography($ds-typography-functional-heading01bold);
+    @include ds-typography($ds-typography-functionalheading01, $lineHeight: $ds-lineheight-m);
     color: $ds-color-text-primary;
     margin: ds-spacing(0 0 $ds-s-100);
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functional-heading01bold, true);
+      @include ds-typography($ds-typography-functionalheading01, $forcePx: true, $lineHeight: $ds-lineheight-m);
     }
   }
   .ds-factbox__vignette {

package/components/footer/footer.scss

@@ -61,7 +61,7 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
 
     &,
     p {
-      @include ds-typography($ds-typography-functional-body01regular);
+      @include ds-typography($ds-typography-functionalbody01, $lineHeight: $ds-lineheight-l);
     }
 
     p {
@@ -96,12 +96,12 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
     }
 
     h2 {
-      @include ds-typography($ds-typography-functional-body02bold);
+      @include ds-typography($ds-typography-functionalheading01, $lineHeight: $ds-lineheight-l);
       margin: ds-spacing(0 0 $ds-s-100);
     }
 
     ul {
-      @include ds-typography($ds-typography-functional-body02regular);
+      @include ds-typography($ds-typography-functionalbody02, $lineHeight: $ds-lineheight-l);
       list-style: none;
       margin: 0;
       padding: 0;
@@ -122,7 +122,7 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
   }
 
   &__channels {
-    @include ds-typography($ds-typography-functional-body01regular);
+    @include ds-typography($ds-typography-functionalbody01, $lineHeight: $ds-lineheight-l);
     margin-top: ds-spacing($ds-footer-row-gap-spacing-token);
 
     a {
@@ -146,19 +146,19 @@ $ds-footer-column-gap: ds-spacing($ds-s-400);
     .ds-footer__editors {
       &,
       p {
-        @include ds-typography($ds-typography-functional-body01regular, true);
+        @include ds-typography($ds-typography-functionalbody01, $forcePx: true, $lineHeight: $ds-lineheight-l);
       }
     }
     .ds-footer__link-grid {
       h2 {
-        @include ds-typography($ds-typography-functional-body02bold, true);
+        @include ds-typography($ds-typography-functionalheading01, true);
       }
       ul {
-        @include ds-typography($ds-typography-functional-body02regular, true);
+        @include ds-typography($ds-typography-functionalbody02, true);
       }
     }
     .ds-footer__channels {
-      @include ds-typography($ds-typography-functional-body01regular, true);
+      @include ds-typography($ds-typography-functionalbody01, true);
     }
   }
 }

package/components/game-header/game-header.scss

@@ -25,7 +25,7 @@ $ds-game-header__icon-size: 105px;
   }
 
   .ds-game-header__title {
-    @include ds-typography($ds-typography-functional-heading04bold);
+    @include ds-typography($ds-typography-functionalheading05);
     color: inherit;
     margin: 0;
   }
@@ -44,7 +44,7 @@ $ds-game-header__icon-size: 105px;
   }
 
   .ds-game-header__description-content {
-    @include ds-typography($ds-typography-functional-body02regular);
+    @include ds-typography($ds-typography-functionalbody02);
     padding: ds-spacing($ds-s-100);
     color: $ds-color-text-primary;
 
@@ -58,7 +58,7 @@ $ds-game-header__icon-size: 105px;
 
     b,
     strong {
-      @include ds-typography($ds-typography-functional-body02semibold);
+      @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
     }
 
     p {

package/components/group-header/group-header.scss

@@ -13,7 +13,7 @@ $ds-group-header__icon-size: 24px;
   align-items: stretch;
   background: var(--group-header-background);
   color: var(--group-header-color);
-  @include ds-typography($ds-typography-functional-body02regular);
+  @include ds-typography($ds-typography-functionalbody02);
 
   &--bottom-border {
     border-bottom: ds-metrics-border-width(x1) solid $ds-color-border-primary;
@@ -67,7 +67,7 @@ $ds-group-header__icon-size: 24px;
   }
 
   .ds-group-header__right-link {
-    @include ds-typography($ds-typography-functional-body01regular);
+    @include ds-typography($ds-typography-functionalbody01);
     @include ds-link($ds-link-paragraph);
     color: var(--group-header-icon-color);
   }
@@ -105,7 +105,7 @@ $ds-group-header__icon-size: 24px;
   .ds-group-header__title {
     padding: ds-spacing($ds-s-075 $ds-s-100);
     flex: 1;
-    @include ds-typography($ds-typography-functional-body02bold);
+    @include ds-typography($ds-typography-functionalheading01, $lineHeight: $ds-lineheight-l);
     margin: 0;
   }
 

package/components/image-caption/image-caption.scss

@@ -1,12 +1,12 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 
 .ds-image-caption {
-  @include ds-typography($ds-typography-functional-body01regular);
+  @include ds-typography($ds-typography-functionalbody01);
   margin-top: ds-spacing($ds-s-050);
   color: $ds-color-text-primary;
 
   @at-root .ds-force-px#{&} {
-    @include ds-typography($ds-typography-functional-body01regular, true);
+    @include ds-typography($ds-typography-functionalbody01, true);
   }
 
   > .ds-article-image__credits {

package/components/link-box/link-box-item.scss

@@ -25,14 +25,14 @@
 
   .ds-link-box-item__label {
     color: $ds-color-text-primary;
-    @include ds-typography($ds-typography-functional-body01semibold);
+    @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-semibold);
     word-break: break-word;
     display: block;
   }
 
   .ds-link-box-item__text {
     color: $ds-color-text-primary-02;
-    @include ds-typography($ds-typography-functional-body01regular);
+    @include ds-typography($ds-typography-functionalbody01);
     display: block;
   }
 

package/components/list-item/list-item.scss

@@ -74,27 +74,27 @@ $ds-list-item__icon-size: 24px;
     align-items: flex-start;
 
     .ds-list-item__title {
-      @include ds-typography($ds-typography-functional-body02regular);
+      @include ds-typography($ds-typography-functionalbody02);
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-body02regular, true);
+        @include ds-typography($ds-typography-functionalbody02, true);
       }
       color: $ds-color-text-primary;
       text-align: left;
     }
 
     .ds-list-item__subtitle {
-      @include ds-typography($ds-typography-functional-body02regular);
+      @include ds-typography($ds-typography-functionalbody02);
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-body02regular, true);
+        @include ds-typography($ds-typography-functionalbody02, true);
       }
       color: $ds-color-text-primary-02;
     }
   }
 
   .ds-list-item__meta {
-    @include ds-typography($ds-typography-functional-body01regular);
+    @include ds-typography($ds-typography-functionalbody01);
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functional-body01regular, true);
+      @include ds-typography($ds-typography-functionalbody01, true);
     }
     color: $ds-color-text-primary-02;
     margin-left: ds-spacing($ds-s-100);
@@ -135,11 +135,7 @@ $ds-list-item__icon-size: 24px;
         @include ds-typography($ds-typography-functionalbody02, $fontWeight: $ds-fontweight-semibold);
 
         @at-root .ds-force-px#{&} {
-          @include ds-typography(
-            $ds-typography-functional-body02regular,
-            $forcePx: true,
-            $fontWeight: $ds-fontweight-semibold
-          );
+          @include ds-typography($ds-typography-functionalbody02, $forcePx: true, $fontWeight: $ds-fontweight-semibold);
         }
       }
     }

package/components/modal/modal.scss

@@ -85,14 +85,14 @@ body.no-scroll {
     }
 
     > h2 {
-      @include ds-typography($ds-typography-functional-heading03bold);
+      @include ds-typography($ds-typography-functionalheading03);
       margin: ds-spacing(0 0 $ds-s-200);
       color: $ds-color-text-primary;
       text-align: center;
     }
 
     > p {
-      @include ds-typography($ds-typography-functional-body02regular);
+      @include ds-typography($ds-typography-functionalbody02);
       margin: 0;
       text-align: center;
       color: $ds-color-text-primary;

package/components/radio-button/radio-button.scss

@@ -38,9 +38,9 @@ $ds-radio-btn__icon-size: 24px;
 
     .ds-radio-btn__text {
       margin: ds-spacing(0 0 0 $ds-s-050, rem);
-      @include ds-typography($ds-typography-functional-body02regular);
+      @include ds-typography($ds-typography-functionalbody02);
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-body02regular, true);
+        @include ds-typography($ds-typography-functionalbody02, true);
         margin: ds-spacing(0 0 0 $ds-s-050);
       }
     }

package/components/switch/switch.scss

@@ -20,9 +20,9 @@ $ds-switch__container-width: 44px;
     .ds-switch__meta {
       margin: ds-spacing(0 $ds-s-050 0 0);
       color: $ds-color-text-primary-02;
-      @include ds-typography($ds-typography-functional-body01regular);
+      @include ds-typography($ds-typography-functionalbody01);
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-body01regular, true);
+        @include ds-typography($ds-typography-functionalbody01, true);
       }
 
       .ds-switch__meta-on {

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

@@ -117,11 +117,15 @@
   @include ds-mq-smallest-breakpoint(tablet) {
     &.ds-teaser--right {
       .ds-teaser__title {
-        @include ds-typography($ds-typography-expressive-heading02bold);
+        @include ds-typography($ds-typography-detailteaser-large-rightcol);
       }
 
       &.ds-teaser--large-italic .ds-teaser__title {
-        @include ds-typography($ds-typography-expressive-heading02italicregular);
+        @include ds-typography(
+          $ds-typography-detailteaser-large-rightcol,
+          $fontWeight: $ds-fontweight-regular,
+          $fontStyle: italic
+        );
 
         @include ds-hover(true) {
           .ds-teaser__title {

package/components/teaser-list-vertical/teaser-list-vertical.scss

@@ -69,7 +69,7 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
     }
 
     .ds-teaser-list-vertical__item-title {
-      @include ds-typography($ds-typography-expressive-heading01bold);
+      @include ds-typography($ds-typography-expressiveheading01);
       color: $ds-color-text-primary;
       word-break: break-word;
 
@@ -79,7 +79,11 @@ $ds-teaser-list-vertical-media-icon-size: 20px;
     }
 
     &.ds-teaser-list-vertical__item--italic .ds-teaser-list-vertical__item-title {
-      @include ds-typography($ds-typography-expressive-heading01italicregular);
+      @include ds-typography(
+        $ds-typography-expressiveheading01,
+        $fontWeight: $ds-fontweight-medium,
+        $fontStyle: italic
+      );
     }
 
     .ds-teaser-footer {

package/components/teaser-longlife/teaser-longlife.scss

@@ -52,13 +52,16 @@
 
   .ds-teaser__vignette {
     color: currentColor;
-    @include ds-typography($ds-typography-functional-meta02bold);
-    text-transform: uppercase;
+    @include ds-typography(
+      $ds-typography-functionallabel01,
+      $lineHeight: $ds-lineheight-l,
+      $letterSpacing: $ds-letterspacing-none
+    );
     margin: 0;
   }
 
   .ds-teaser__title {
     color: currentColor;
-    @include ds-typography($ds-typography-functional-heading02bold);
+    @include ds-typography($ds-typography-detaillonglife);
   }
 }

package/components/teaser-native/teaser-native.scss

@@ -24,7 +24,7 @@
   }
 
   .ds-teaser__title {
-    @include ds-typography($ds-typography-expressive-heading02bold);
+    @include ds-typography($ds-typography-expressiveheading02);
     font-family: $ds-font--arial !important; /* stylelint-disable-line declaration-no-important */
   }
 
@@ -43,22 +43,47 @@
 
   &.ds-teaser--native-large {
     .ds-teaser__title {
-      @include ds-typography($ds-typography-expressive-heading04bold);
+      @include ds-typography($ds-typography-expressiveheading04);
+
+      @include ds-mq-only-breakpoint(tablet) {
+        font-size: ds-px-to-rem(40px);
+      }
+
+      @include ds-mq-only-breakpoint(desktop) {
+        font-size: ds-px-to-rem(56px);
+      }
     }
   }
 
   &.ds-teaser--native-right {
-    @include ds-mq-smallest-breakpoint(tablet) {
-      .ds-teaser__title {
-        font-size: ds-px-to-rem(24px);
+    .ds-teaser__title {
+      @include ds-mq-only-breakpoint(mobile) {
+        font-size: ds-px-to-rem(17px);
+        line-height: $ds-lineheight-m;
+      }
+
+      @include ds-mq-smallest-breakpoint(tablet) {
         line-height: ds-px-to-rem(30px);
+        font-size: ds-px-to-rem(24px);
       }
     }
   }
 
   &.ds-teaser--native-standard {
     .ds-teaser__title {
-      @include ds-typography($ds-typography-expressive-heading03bold);
+      @include ds-mq-only-breakpoint(mobile) {
+        @include ds-typography($ds-typography-expressiveheading03, $lineHeight: $ds-lineheight-m);
+      }
+
+      @include ds-mq-only-breakpoint(tablet) {
+        @include ds-typography($ds-typography-expressiveheading03, $lineHeight: $ds-lineheight-s);
+        font-size: ds-px-to-rem(26px) !important; /* stylelint-disable-line declaration-no-important */
+      }
+
+      @include ds-mq-only-breakpoint(desktop) {
+        @include ds-typography($ds-typography-expressiveheading03, $lineHeight: $ds-lineheight-s);
+        font-size: ds-px-to-rem(36px) !important; /* stylelint-disable-line declaration-no-important */
+      }
     }
 
     .ds-teaser__media {

package/components/teaser-onsite/teaser-onsite.scss

@@ -22,7 +22,7 @@
 
   .ds-teaser__text {
     margin-top: 0;
-    @include ds-typography($ds-typography-functional-heading01bold);
+    @include ds-typography($ds-typography-functionalheading01, $lineHeight: $ds-lineheight-m);
   }
 
   .ds-teaser__media {

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

@@ -53,7 +53,7 @@
 
     .ds-group-header + .ds-teaser--large:not(.ds-teaser--large-italic):not(.ds-teaser--large-big-italic) {
       .ds-teaser__title {
-        @include ds-typography($ds-typography-expressive-heading05bold);
+        @include ds-typography($ds-typography-detailteaser-baotaxl);
       }
 
       @include ds-mq-only-breakpoint(mobile) {

package/components/teaser-right-now/teaser-right-now.scss

@@ -8,7 +8,7 @@
   padding: ds-spacing($ds-s-teaser-vertical-medium $ds-s-teaser-horizontal);
 
   .ds-teaser__title {
-    @include ds-typography($ds-typography-expressive-heading01bold);
+    @include ds-typography($ds-typography-expressiveheading01);
   }
 
   @include ds-hover(true) {

package/components/teaser-slideshow/teaser-slideshow.scss

@@ -20,12 +20,12 @@
 
     .ds-teaser__title {
       display: inline;
-      @include ds-typography($ds-typography-functional-heading01bold);
+      @include ds-typography($ds-typography-functionalheading01, $lineHeight: $ds-lineheight-m);
     }
 
     .ds-teaser__text {
       display: inline;
-      @include ds-typography($ds-typography-functional-heading01regular);
+      @include ds-typography($ds-typography-functionalbody02, $lineHeight: $ds-lineheight-m);
     }
   }
 

package/components/teaser-swipe-card/teaser-swipe-card.scss

@@ -44,12 +44,12 @@
   }
 
   .ds-teaser-swipe-card__time {
-    @include ds-typography($ds-typography-functional-meta02regular);
+    @include ds-typography($ds-typography-functionalmeta02, $lineHeight: $ds-lineheight-l);
     color: $ds-color-text-primary-02;
   }
 
   .ds-teaser__title {
-    @include ds-typography($ds-typography-expressive-heading01bold);
+    @include ds-typography($ds-typography-expressiveheading01);
     margin-bottom: ds-spacing($ds-s-050);
     flex: 1;
   }
@@ -62,7 +62,11 @@
 
   &.ds-teaser-swipe-card--insandare {
     .ds-teaser__title {
-      @include ds-typography($ds-typography-expressive-heading01italicregular);
+      @include ds-typography(
+        $ds-typography-expressiveheading01,
+        $fontWeight: $ds-fontweight-medium,
+        $fontStyle: italic
+      );
     }
   }
 
@@ -85,7 +89,7 @@
 
     .ds-teaser-swipe-card__time {
       display: flex;
-      @include ds-typography($ds-typography-functional-body01semibold);
+      @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-semibold);
       color: $ds-theme-color;
       align-items: center;
       margin-bottom: ds-spacing($ds-s-025);

package/components/teaser-tipsa/teaser-tipsa.scss

@@ -7,7 +7,7 @@
   }
 
   .ds-teaser__title {
-    @include ds-typography($ds-typography-expressive-heading02bold);
+    @include ds-typography($ds-typography-detailteaser-tipsa, $lineHeight: $ds-lineheight-m);
   }
 
   @include ds-hover(true) {
@@ -17,7 +17,7 @@
   }
 
   .ds-teaser__text {
-    @include ds-typography($ds-typography-functional-body02regular);
+    @include ds-typography($ds-typography-functionalbody02);
     margin-top: ds-spacing($ds-s-050);
   }
 }

package/components/text-button/text-button.scss

@@ -74,7 +74,7 @@ $ds-text-btn__underline-offset: 2px;
   }
 
   .ds-text-btn__text {
-    @include ds-typography-with-force-px($ds-typography-functional-body02regular);
+    @include ds-typography-with-force-px($ds-typography-functionalbody02);
     text-underline-offset: $ds-text-btn__underline-offset;
     color: $ds-color-text-primary;
   }
@@ -84,7 +84,7 @@ $ds-text-btn__underline-offset: 2px;
   }
 
   &.ds-text-btn--small .ds-text-btn__text {
-    @include ds-typography-with-force-px($ds-typography-functional-body01regular);
+    @include ds-typography-with-force-px($ds-typography-functionalbody01);
   }
 
   @include ds-hover() {

package/components/text-button-toggle/text-button-toggle.scss

@@ -69,9 +69,9 @@ $ds-text-btn-toggle__icon-size: 24px;
   }
 
   .ds-text-btn-toggle__text {
-    @include ds-typography($ds-typography-functional-body02regular);
+    @include ds-typography($ds-typography-functionalbody02);
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functional-body02regular, true);
+      @include ds-typography($ds-typography-functionalbody02, true);
     }
     color: $ds-color-text-primary;
   }

package/components/text-input/text-input.scss

@@ -23,7 +23,7 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
   width: 100%;
   color: $ds-color-text-primary;
   background-color: $ds-color-component-secondary;
-  @include ds-typography($ds-typography-functional-body02regular);
+  @include ds-typography($ds-typography-functionalbody02);
   padding: ds-px-to-rem(ds-spacing($ds-s-100) - ds-border-width(x1)) ds-spacing($ds-s-100) - ds-border-width(x1);
   border: solid ds-border-width(x1) $ds-color-border-primary-02;
   border-radius: ds-border-radius(x1);
@@ -39,7 +39,7 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
   &:focus,
   &:not(:placeholder-shown) {
     + .ds-text-input__label {
-      @include ds-typography($ds-typography-functional-meta02regular);
+      @include ds-typography($ds-typography-functionalmeta02);
       top: 0;
 
       &::before {
@@ -81,7 +81,7 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
   transition:
     font-size 0.1s ease-in,
     top 0.1s ease-in;
-  @include ds-typography($ds-typography-functional-body02regular);
+  @include ds-typography($ds-typography-functionalbody02);
   &::before {
     content: "";
     width: calc(100% + ds-spacing($ds-s-050));
@@ -111,7 +111,7 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
   }
 
   .ds-text-input__input {
-    @include ds-typography($ds-typography-functional-body02regular, true);
+    @include ds-typography($ds-typography-functionalbody02, true);
     padding: ds-spacing($ds-s-100) - ds-border-width(x1);
 
     &.password-toggle {
@@ -124,7 +124,7 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
     &:focus,
     &:not(:placeholder-shown) {
       + .ds-text-input__label {
-        @include ds-typography($ds-typography-functional-meta02regular, true);
+        @include ds-typography($ds-typography-functionalmeta02, true);
       }
     }
 
@@ -134,7 +134,7 @@ $ds-text-input-toggle-btn__area: ($ds-text-input-toggle-btn__width + ds-spacing(
   }
 
   .ds-text-input__label {
-    @include ds-typography($ds-typography-functional-body02regular, true);
+    @include ds-typography($ds-typography-functionalbody02, true);
     top: ds-spacing($ds-s-150);
     &::before {
       top: ds-spacing($ds-s-050);

package/components/video-caption/video-caption.scss

@@ -1,18 +1,18 @@
 @use "../../foundations/helpers/forward.helpers.scss" as *;
 
 .ds-video-caption {
-  @include ds-typography($ds-typography-functional-body01regular);
+  @include ds-typography($ds-typography-functionalbody01);
   color: $ds-color-text-primary;
 
   .ds-video-caption__duration {
-    @include ds-typography($ds-typography-functional-body01bold);
+    @include ds-typography($ds-typography-functionalbody01, $fontWeight: $ds-fontweight-bold);
     margin-right: ds-spacing($ds-s-025);
   }
 
   @at-root .ds-force-px#{&} {
-    @include ds-typography($ds-typography-functional-body01regular, true);
+    @include ds-typography($ds-typography-functionalbody01, true);
     .ds-video-caption__duration {
-      @include ds-typography($ds-typography-functional-body01bold, true);
+      @include ds-typography($ds-typography-functionalbody01, $forcePx: true, $fontWeight: $ds-fontweight-bold);
     }
   }
 }

package/components/vip-badge/vip-badge.scss

@@ -12,11 +12,20 @@ $ds-vip-badge__icon-size: 16px;
   background-color: $ds-color-component-business;
   color: $ds-color-static-white;
   fill: $ds-color-static-white;
-  @include ds-typography($ds-typography-functional-meta01regular);
+  @include ds-typography(
+    $ds-typography-functionalmeta01,
+    $lineHeight: $ds-lineheight-l,
+    $letterSpacing: $ds-letterspacing-none
+  );
   padding: ds-spacing($ds-s-025, rem);
 
   @at-root .ds-force-px#{&} {
-    @include ds-typography($ds-typography-functional-meta01regular, true);
+    @include ds-typography(
+      $ds-typography-functionalmeta01,
+      $forcePx: true,
+      $lineHeight: $ds-lineheight-l,
+      $letterSpacing: $ds-letterspacing-none
+    );
     border-radius: ds-border-radius(x1) 0 ds-border-radius(x1) ds-border-radius(x1);
     padding: ds-spacing($ds-s-025);
   }

package/foundations/variables/typographyTokensList.scss

@@ -27,6 +27,7 @@ $ds-typography-detailstandard-button-xlarge: 'detailstandard-button-xlarge';
 $ds-typography-detailteaser-large-rightcol: 'detailteaser-large-rightcol';
 $ds-typography-detailteaser-baotaxl: 'detailteaser-baotaxl';
 $ds-typography-detailteaser-tipsa: 'detailteaser-tipsa';
+$ds-typography-detaillonglife: 'detaillonglife';
 $ds-typography-expressiveheading01: 'expressiveheading01';
 $ds-typography-expressiveheading02: 'expressiveheading02';
 $ds-typography-expressiveheading03: 'expressiveheading03';

package/foundations/variables/typographyTokensScreenExtraLarge.scss

@@ -145,6 +145,12 @@ $typographyTokensScreenExtraLarge: (
     lineHeight: 1.1,
     letterSpacing: 0
   ),
+  detaillonglife: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 20,
+    lineHeight: 1.1
+  ),
   detaildropcap: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,

package/foundations/variables/typographyTokensScreenLarge.scss

@@ -167,6 +167,12 @@ $typographyTokensScreenLarge: (
     lineHeight: 1.1,
     letterSpacing: 0
   ),
+  detaillonglife: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 20,
+    lineHeight: 1.1
+  ),
   detailstandard-button: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -209,6 +209,12 @@ $typographyTokensScreenSmall: (
     lineHeight: 1.2,
     letterSpacing: 0
   ),
+  detaillonglife: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 20,
+    lineHeight: 1.1
+  ),
   expressiveheading01: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,

package/package.json

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

package/tokens/typography-list.json

@@ -28,6 +28,7 @@
   "detailteaser-large-rightcol": "'detailteaser-large-rightcol'",
   "detailteaser-baotaxl": "'detailteaser-baotaxl'",
   "detailteaser-tipsa": "'detailteaser-tipsa'",
+  "detaillonglife": "'detaillonglife'",
   "expressiveheading01": "'expressiveheading01'",
   "expressiveheading02": "'expressiveheading02'",
   "expressiveheading03": "'expressiveheading03'",