@bonniernews/dn-design-system-web 7.1.0 → 7.2.1

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

@@ -4,7 +4,7 @@
 .ds-split-container {
   padding: ds-spacing(
     $ds-s-teaser-vertical-small $ds-s-teaser-horizontal
-      $ds-sl-teaser-vertical-medium
+      $ds-s-teaser-vertical-medium
   );
   display: flex;
   flex-wrap: wrap;

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

@@ -3,8 +3,8 @@
 @use "sass:math";
 
 .ds-teaser.ds-teaser--standard {
-  @include ds-spacing-layout(
-    $ds-sl-teaser-vertical-small $ds-sl-teaser-horizontal 0
+  padding: ds-spacing(
+    $ds-s-teaser-vertical-small $ds-s-teaser-horizontal 0
   );
   overflow: hidden;
 
@@ -18,7 +18,7 @@
 
   .ds-teaser__media,
   .ds-teaser__content {
-    @include ds-spacing-layout($ds-sl-teaser-vertical-medium, margin-bottom);
+    margin-bottom: ds-spacing($ds-s-teaser-vertical-medium);
   }
 
   &::after {
@@ -32,8 +32,8 @@
   }
 
   .ds-teaser__media {
-    @include ds-spacing-layout($ds-sl-teaser-vertical-medium, margin-bottom);
-    margin-left: ds-spacing-component($ds-sc-x4);
+    margin-bottom: ds-spacing($ds-s-teaser-vertical-medium);
+    margin-left: ds-spacing($ds-s-100);
     float: right;
 
     @include ds-mq-only-breakpoint(mobile) {

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

@@ -21,7 +21,7 @@
   .ds-teaser__text {
     display: flex;
     flex-direction: column;
-    padding: ds-spacing-component($ds-sc-x3);
+    padding: ds-spacing($ds-s-075);
     margin: 0;
     flex: 1;
   }
@@ -33,7 +33,7 @@
 
   .ds-teaser__title {
     @include ds-typography($ds-typography-expressive-heading01bold);
-    margin-bottom: ds-spacing-component($ds-sc-x2);
+    margin-bottom: ds-spacing($ds-s-050);
     flex: 1;
   }
 
@@ -54,11 +54,11 @@
     border-radius: 0;
 
     &:not(:last-of-type) {
-      margin-right: ds-spacing-component($ds-sc-x2);
+      margin-right: ds-spacing($ds-s-050);
     }
 
     .ds-teaser__text {
-      padding: ds-spacing-component($ds-sc-x1 0 0 0);
+      padding: ds-spacing($ds-s-025 0 0 0);
     }
 
     .ds-teaser-swipe-card__time {
@@ -66,16 +66,16 @@
       @include ds-typography($ds-typography-functional-body01semibold);
       color: $ds-theme-color;
       align-items: center;
-      margin-bottom: ds-spacing-component($ds-sc-x1);
+      margin-bottom: ds-spacing($ds-s-025);
 
       &::before {
         content: "";
         display: block;
-        width: ds-spacing-component($ds-sc-x2);
-        height: ds-spacing-component($ds-sc-x2);
+        width: ds-spacing($ds-s-050);
+        height: ds-spacing($ds-s-050);
         background-color: $ds-theme-color;
         border-radius: 50%;
-        margin-right: ds-spacing-component($ds-sc-x2);
+        margin-right: ds-spacing($ds-s-050);
       }
 
       &::after {
@@ -84,7 +84,7 @@
         height: 2px;
         flex: 1;
         background-color: $ds-color-border-primary;
-        margin-left: ds-spacing-component($ds-sc-x2);
+        margin-left: ds-spacing($ds-s-050);
       }
     }
   }

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

@@ -3,9 +3,9 @@
 
 .ds-teaser.ds-teaser--tipsa {
   .ds-teaser__content {
-    @include ds-spacing-layout(
-      $ds-sl-teaser-vertical-small $ds-sl-teaser-horizontal
-        $ds-sl-teaser-vertical-medium
+    padding: ds-spacing(
+      $ds-s-teaser-vertical-small $ds-s-teaser-horizontal
+        $ds-s-teaser-vertical-medium
     );
   }
 
@@ -21,6 +21,6 @@
 
   .ds-teaser__text {
     @include ds-typography($ds-typography-functional-body02regular);
-    margin-top: ds-spacing-component($ds-sc-x2);
+    margin-top: ds-spacing($ds-s-050);
   }
 }

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

@@ -6,7 +6,7 @@ $ds-text-btn__min-clickable-area: 0;
 $ds-text-btn__underline-offset: 2px;
 
 .ds-text-btn {
-  --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x3)};
+  --ds-text-btn__inner-padding: #{ds-spacing($ds-s-075)};
   --ds-text-btn__icon-size: #{ds-px-to-rem(24px)};
 
   &.ds-force-px {
@@ -14,17 +14,17 @@ $ds-text-btn__underline-offset: 2px;
   }
 
   &.ds-text-btn--icon-left {
-    --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x3 $ds-sc-x3 $ds-sc-x2)};
-    --ds-text-btn__icon-margin: #{ds-spacing-component(0 $ds-sc-x2 0 0)};
+    --ds-text-btn__inner-padding: #{ds-spacing($ds-s-075 $ds-s-075 $ds-s-075 $ds-s-050)};
+    --ds-text-btn__icon-margin: #{ds-spacing(0 $ds-s-050 0 0)};
   }
 
   &.ds-text-btn--icon-right {
-    --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x3 $ds-sc-x2 $ds-sc-x3 $ds-sc-x3)};
-    --ds-text-btn__icon-margin: #{ds-spacing-component(0 0 0 $ds-sc-x2)};
+    --ds-text-btn__inner-padding: #{ds-spacing($ds-s-075 $ds-s-050 $ds-s-075 $ds-s-075)};
+    --ds-text-btn__icon-margin: #{ds-spacing(0 0 0 $ds-s-050)};
   }
 
   &.ds-text-btn--small {
-    --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x2)};
+    --ds-text-btn__inner-padding: #{ds-spacing($ds-s-050)};
     --ds-text-btn__icon-size: #{ds-px-to-rem(20px)};
 
     &.ds-force-px {
@@ -32,24 +32,24 @@ $ds-text-btn__underline-offset: 2px;
     }
 
     &.ds-text-btn--icon-left {
-      --ds-text-btn__icon-margin: #{ds-spacing-component(0 $ds-sc-x1 0 0)};
-      --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x2 $ds-sc-x2 $ds-sc-x1)};
+      --ds-text-btn__icon-margin: #{ds-spacing(0 $ds-s-025 0 0)};
+      --ds-text-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-050 $ds-s-050 $ds-s-025)};
       &.ds-text-btn--condensed {
-        --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x1 $ds-sc-x1 $ds-sc-x1 0)};
+        --ds-text-btn__inner-padding: #{ds-spacing($ds-s-025 $ds-s-025 $ds-s-025 0)};
       }
     }
 
     &.ds-text-btn--icon-right {
-      --ds-text-btn__icon-margin: #{ds-spacing-component(0 0 0 $ds-sc-x1)};
-      --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x2 $ds-sc-x1 $ds-sc-x2 $ds-sc-x2)};
+      --ds-text-btn__icon-margin: #{ds-spacing(0 0 0 $ds-s-025)};
+      --ds-text-btn__inner-padding: #{ds-spacing($ds-s-050 $ds-s-025 $ds-s-050 $ds-s-050)};
       &.ds-text-btn--condensed {
-        --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x1 0 $ds-sc-x1 $ds-sc-x1)};
+        --ds-text-btn__inner-padding: #{ds-spacing($ds-s-025 0 $ds-s-025 $ds-s-025)};
       }
     }
   }
 
   &.ds-text-btn--condensed {
-    --ds-text-btn__inner-padding: #{ds-spacing-component($ds-sc-x1)};
+    --ds-text-btn__inner-padding: #{ds-spacing($ds-s-025)};
   }
 }
 

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

@@ -55,7 +55,7 @@ $ds-text-btn-toggle__icon-size: 24px;
     justify-content: center;
     background-color: transparent;
     border-radius: ds-metrics-border-radius(x1);
-    padding: ds-spacing-component($ds-sc-x3 $ds-sc-x3 $ds-sc-x3 $ds-sc-x2);
+    padding: ds-spacing($ds-s-075 $ds-s-075 $ds-s-075 $ds-s-050);
     position: relative;
     &::before {
       content: "";
@@ -72,7 +72,7 @@ $ds-text-btn-toggle__icon-size: 24px;
       display: flex;
       height: ds-px-to-rem($ds-text-btn-toggle__icon-size);
       width: ds-px-to-rem($ds-text-btn-toggle__icon-size);
-      margin: ds-spacing-component(0 $ds-sc-x2 0 0);
+      margin: ds-spacing(0 $ds-s-050 0 0);
       color: $ds-color-icon-primary;
       svg {
         fill: currentColor;
@@ -128,5 +128,5 @@ $ds-text-btn-toggle__icon-size: 24px;
 }
 
 .ds-text-btn-toggle--condensed .ds-text-btn-toggle__inner {
-  padding: ds-spacing-component($ds-sc-x1);
+  padding: ds-spacing($ds-s-025);
 }

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

@@ -5,7 +5,7 @@
 $ds-text-input-toggle-btn__width: 28px;
 $ds-text-input-toggle-btn__top: 22px;
 $ds-text-input-toggle-btn__area: (
-  $ds-text-input-toggle-btn__width + ds-spacing-component($ds-sc-x2)
+  $ds-text-input-toggle-btn__width + ds-spacing($ds-s-050)
 );
 
 .ds-form-field__error {
@@ -15,7 +15,7 @@ $ds-text-input-toggle-btn__area: (
 }
 
 .ds-text-input {
-  padding-top: ds-px-to-rem(ds-spacing-component($ds-sc-x2));
+  padding-top: ds-spacing($ds-s-050, rem);
   position: relative;
   color: $ds-color-text-primary;
 }
@@ -27,7 +27,7 @@ $ds-text-input-toggle-btn__area: (
   background-color: $ds-color-component-secondary;
   @include ds-typography($ds-typography-functional-body02regular);
   /* stylelint-disable-next-line */
-  padding: ds-px-to-rem(ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x1)) ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x1);
+  padding: ds-px-to-rem(ds-spacing($ds-s-100) - ds-metrics-border-width(x1)) ds-spacing($ds-s-100) - ds-metrics-border-width(x1);
   border: solid ds-metrics-border-width(x1) $ds-color-border-primary-02;
   border-radius: ds-metrics-border-radius(x1);
   margin: 0;
@@ -55,9 +55,9 @@ $ds-text-input-toggle-btn__area: (
 
   &:focus {
     padding: ds-px-to-rem(
-        ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x2)
+        ds-spacing($ds-s-100) - ds-metrics-border-width(x2)
       )
-      ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x2);
+      ds-spacing($ds-s-100) - ds-metrics-border-width(x2);
     border-color: $ds-color-border-primary-03;
     border-width: ds-metrics-border-width(x2);
 
@@ -83,18 +83,18 @@ $ds-text-input-toggle-btn__area: (
 
 .ds-text-input__label {
   position: absolute;
-  top: ds-px-to-rem(ds-spacing-component($ds-sc-x6));
-  left: ds-spacing-component($ds-sc-x4);
+  top: ds-spacing($ds-s-150, rem);
+  left: ds-spacing($ds-s-100);
   z-index: 1;
   transition: font-size 0.1s ease-in, top 0.1s ease-in;
   @include ds-typography($ds-typography-functional-body02regular);
   &::before {
     content: "";
-    width: calc(100% + ds-spacing-component($ds-sc-x2));
-    left: -#{ds-spacing-component($ds-sc-x1)};
+    width: calc(100% + ds-spacing($ds-s-050));
+    left: -#{ds-spacing($ds-s-025)};
     height: ds-metrics-border-width(x1);
     position: absolute;
-    top: ds-px-to-rem(ds-spacing-component($ds-sc-x2));
+    top: ds-spacing($ds-s-050, rem);
     z-index: -1;
     background-color: transparent; // for animation
     transition: background-color 0.2s ease-in-out;
@@ -104,7 +104,7 @@ $ds-text-input-toggle-btn__area: (
 .ds-icon-btn.ds-text-input__password-toggle {
   position: absolute;
   top: ds-px-to-rem($ds-text-input-toggle-btn__top);
-  right: ds-spacing-component($ds-sc-x1);
+  right: ds-spacing($ds-s-025);
   z-index: 1;
   min-width: 0;
   min-height: 0;
@@ -112,13 +112,13 @@ $ds-text-input-toggle-btn__area: (
 
 .ds-force-px {
   &.ds-text-input {
-    padding-top: ds-spacing-component($ds-sc-x2);
+    padding-top: ds-spacing($ds-s-050);
     font-size: 16px;
   }
 
   .ds-text-input__input {
     @include ds-typography($ds-typography-functional-body02regular, true);
-    padding: ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x1);
+    padding: ds-spacing($ds-s-100) - ds-metrics-border-width(x1);
 
     &.password-toggle {
       padding-right: $ds-text-input-toggle-btn__area;
@@ -137,15 +137,15 @@ $ds-text-input-toggle-btn__area: (
     }
 
     &:focus {
-      padding: ds-spacing-component($ds-sc-x4) - ds-metrics-border-width(x2);
+      padding: ds-spacing($ds-s-100) - ds-metrics-border-width(x2);
     }
   }
 
   .ds-text-input__label {
     @include ds-typography($ds-typography-functional-body02regular, true);
-    top: ds-spacing-component($ds-sc-x6);
+    top: ds-spacing($ds-s-150);
     &::before {
-      top: ds-spacing-component($ds-sc-x2);
+      top: ds-spacing($ds-s-050);
     }
   }
 

package/components/thematic-break/thematic-break.scss

@@ -2,8 +2,8 @@
 
 .ds-thematic-break {
   margin: 0;
-  @include ds-spacing-layout(
-    $ds-sl-gap-vertical-static-medium 0 $ds-sl-gap-vertical-static-large
+  padding: ds-spacing(
+    $ds-s-gap-vertical-static-medium 0 $ds-s-gap-vertical-static-large
   );
 
   hr {

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

@@ -6,7 +6,7 @@
 
   .ds-video-caption__duration {
     @include ds-typography($ds-typography-functional-body01bold);
-    margin-right: ds-spacing-component($ds-sc-x1);
+    margin-right: ds-spacing($ds-s-025);
   }
 
   @at-root .ds-force-px#{&} {

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

@@ -14,13 +14,13 @@ $ds-vip-badge__icon-size: 16px;
   color: $ds-color-static-white;
   fill: $ds-color-static-white;
   @include ds-typography($ds-typography-functional-meta01regular);
-  padding: ds-px-to-rem(ds-spacing-component($ds-sc-x1));
+  padding: ds-spacing($ds-s-025, rem);
 
   @at-root .ds-force-px#{&} {
     @include ds-typography($ds-typography-functional-meta01regular, true);
     border-radius: ds-metrics-border-radius(x1) 0 ds-metrics-border-radius(x1)
       ds-metrics-border-radius(x1);
-    padding: ds-spacing-component($ds-sc-x1);
+    padding: ds-spacing($ds-s-025);
   }
 
   // bang class indicating that the user has premium access
@@ -39,16 +39,15 @@ $ds-vip-badge__icon-size: 16px;
 }
 
 .ds-vip-badge--text {
-  padding: ds-px-to-rem(ds-spacing-component($ds-sc-x1))
-    ds-px-to-rem(ds-spacing-component($ds-sc-x2));
+  padding: ds-spacing($ds-s-025 $ds-s-050, rem);
   @at-root .ds-force-px#{&} {
-    padding: ds-spacing-component($ds-sc-x1 $ds-sc-x2);
+    padding: ds-spacing($ds-s-025 $ds-s-050);
   }
 
   .ds-icon {
-    margin-right: ds-px-to-rem(ds-spacing-component($ds-sc-x1));
+    margin-right: ds-spacing($ds-s-025, rem);
     @at-root .ds-force-px#{&} {
-      margin-right: ds-spacing-component($ds-sc-x1);
+      margin-right: ds-spacing($ds-s-025);
     }
   }
 }

package/foundations/helpers/typography.scss

@@ -70,7 +70,8 @@ $dsSerifWeights: (
         @include _ds-typography-get-property(
           $tmpMapScreenLarge,
           $key,
-          $forcePx
+          $forcePx,
+          "large"
         );
       }
     }
@@ -83,7 +84,8 @@ $dsSerifWeights: (
         @include _ds-typography-get-property(
           $tmpMapScreenExtraLarge,
           $key,
-          $forcePx
+          $forcePx,
+          "extraLarge"
         );
       }
     }
@@ -109,46 +111,70 @@ $dsSerifWeights: (
   }
 }
 
-@mixin _ds-typography-get-property($map, $key, $forcePx) {
+@mixin _ds-typography-get-property($map, $key, $forcePx, $screen: "small") {
   $unit: "";
   $value: map.get($map, $key);
   $fontFamilyType: _ds-get-font-family-type($map);
   $fontWeights: if($fontFamilyType == "serif", $dsSerifWeights, $dsSansWeights);
-  $canForcePx: list.index((fontSize, lineHeight, letterSpacing), $key);
 
-  @if $key == "fontFamily" {
-    @if $fontFamilyType == "serif" {
-      font-family: $ds-font--serif;
-    } @else if $fontFamilyType == "sans" {
-      font-family: $ds-font--sans;
-    }
-  } @else if $key == "fontWeight" {
-    $value: string.to-lower-case($value);
-    @if map-has-key($fontWeights, $value) {
-      $value: map.get($fontWeights, $value);
-    }
-    font-weight: #{$value};
-  } @else if $key == "fontStyle" {
-    font-style: string.to-lower-case($value);
-  } @else if $key == "fontSize" {
-    @if $forcePx {
-      font-size: $value * 1px;
-    } @else {
-      font-size: ds-px-to-rem($value);
-    }
-    font-variation-settings: "opsz" $value;
-  } @else if $canForcePx and $value != "" {
-    @if $forcePx {
-      $value: $value * 1px;
-    } @else {
-      $value: ds-px-to-rem($value);
+  @if $value != "" {
+    @if $key == "fontFamily" {
+      @if $fontFamilyType == "serif" {
+        font-family: $ds-font--serif;
+      } @else if $fontFamilyType == "sans" {
+        font-family: $ds-font--sans;
+      }
+    } @else if $key == "fontWeight" {
+      $value: string.to-lower-case($value);
+      @if map-has-key($fontWeights, $value) {
+        $value: map.get($fontWeights, $value);
+      }
+      font-weight: #{$value};
+    } @else if $key == "fontStyle" {
+      font-style: string.to-lower-case($value);
+    } @else if $key == "fontSize" {
+      @if $forcePx {
+        font-size: $value * 1px;
+      } @else {
+        font-size: ds-px-to-rem($value);
+        font-size: clamp($value * 1px, ds-px-to-rem($value), _ds-get-max-scaled-size($value, $screen));
+      }
+      font-variation-settings: "opsz" $value;
+    } @else if $key == "lineHeight" {
+      @if $forcePx {
+        line-height: $value * 1px;
+      } @else {
+        line-height: ds-px-to-rem($value);
+        line-height: clamp($value * 1px, ds-px-to-rem($value), _ds-get-max-scaled-size($value, $screen));
+      }
+    } @else if $key == "letterSpacing" {
+      @if $forcePx {
+        $value: $value * 1px;
+      } @else {
+        $value: ds-px-to-rem($value);
+      }
+      #{map.get($dsTypographyKeys, $key)}: $value;
+    } @else if index(map-keys($dsTypographyKeys), $key) {
+      #{map.get($dsTypographyKeys, $key)}: $value;
     }
-    #{map.get($dsTypographyKeys, $key)}: $value;
-  } @else if index(map-keys($dsTypographyKeys), $key) and $value != "" {
-    #{map.get($dsTypographyKeys, $key)}: $value;
   }
 }
 
+@function _ds-get-max-scaled-size($size, $screen: "small") {
+  $midPoint: 26;
+  $scalingFactor: 0.33;
+  @if ($screen == "large") {
+    $midPoint: 30;
+    $scalingFactor: 0.2;
+  } @else if ($screen == "extraLarge") {
+    $midPoint: 32;
+    $scalingFactor: 0.166;
+  }
+
+  $calculatedScalingFactor: 2 - math.div(1, (1 + math.pow(math.$e, $scalingFactor * ($midPoint - $size))));
+  @return math.round($calculatedScalingFactor * $size * 1px);
+}
+
 @function _ds-get-font-family-type($map) {
   $fontFamily: map.get($map, "fontFamily");
 

package/package.json

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