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

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.2.0 (2023-10-23)
+
+
+### Features
+
+* **web:** limit scaling for large fonts ([#1063](https://github.com/BonnierNews/dn-design-system/issues/1063)) ([213a9b9](https://github.com/BonnierNews/dn-design-system/commit/213a9b93fcb46ea459519f83a1a2af28fe665045))
+
+
+
 ## 7.1.0 (2023-10-20)
 
 

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.0",
   "description": "DN design system for web.",
   "main": "index.js",
   "homepage": "https://github.com/BonnierNews/dn-design-system/tree/main/web/src#readme",