@bonniernews/dn-design-system-web 11.3.1 → 11.4.0-beta.0

package/CHANGELOG.md

@@ -4,6 +4,13 @@ All changes to @bonniernews/dn-design-system-web will be documented in this file
 
 
 
+## [11.4.0-beta.0](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.3.1...@bonniernews/dn-design-system-web@11.4.0-beta.0) (2024-02-12)
+
+
+### Features
+
+* **core:** handle new token types ([e766b43](https://github.com/BonnierNews/dn-design-system/commit/e766b43f723bd7e0c6a3327d1d8508594b6d64a9))
+
 ## [11.3.1](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@11.3.0...@bonniernews/dn-design-system-web@11.3.1) (2024-02-09)
 
 

package/foundations/helpers/typography.scss

@@ -11,6 +11,7 @@
 @use "fontFamily.scss" as *;
 @forward "../variables/typographyTokensList.scss";
 @forward "../variables/decorations.scss";
+@forward "../variables/typographyAddons.scss";
 
 $dsTypographyKeys: (
   fontFamily: "font-family",
@@ -46,16 +47,23 @@ $dsSerifWeights: (
 
 // Serif variation changes, text 18px, headline 26px, display 34px. As fallback we will always use headline
 
-@mixin ds-typography($component, $forcePx: false) {
-  $tmpMap: map.get($typographyTokensScreenSmall, $component);
-  $tmpMapScreenLarge: map.get($typographyTokensScreenLarge, $component);
-  $tmpMapScreenExtraLarge: map.get($typographyTokensScreenExtraLarge, $component);
+@mixin ds-typography($component, $forcePx: false, $fontWeight: null, $letterSpacing: null, $lineHeight: null) {
+  // making sure override values have matching keys in typography object
+  $addons: (
+    "letterSpacing": $letterSpacing,
+    "fontWeight": null,
+    "lineHeight": null,
+  );
+  $tmpMap: map.merge($addons, map.get($typographyTokensScreenSmall, $component));
+  $tmpMapScreenLarge: map.merge($addons, map.get($typographyTokensScreenLarge, $component));
+  $tmpMapScreenExtraLarge: map.merge($addons, map.get($typographyTokensScreenExtraLarge, $component));
 
   @if $tmpMap {
     @include ds-mq-largest-breakpoint(mobile) {
       @include _ds-normalize-letter-spacing($tmpMap);
       @each $key in map-keys($tmpMap) {
-        @include _ds-typography-get-property($tmpMap, $key, $forcePx);
+        $value: _ds-get-override-value($key, $fontWeight, $letterSpacing, $lineHeight);
+        @include _ds-typography-get-property($tmpMap, $key, $forcePx, "small", $value);
       }
     }
   }
@@ -64,7 +72,8 @@ $dsSerifWeights: (
     @include ds-mq-only-breakpoint(tablet) {
       @include _ds-normalize-letter-spacing($tmpMapScreenLarge);
       @each $key in map-keys($tmpMapScreenLarge) {
-        @include _ds-typography-get-property($tmpMapScreenLarge, $key, $forcePx, "large");
+        $value: _ds-get-override-value($key, $fontWeight, $letterSpacing, $lineHeight);
+        @include _ds-typography-get-property($tmpMapScreenLarge, $key, $forcePx, "large", $value);
       }
     }
   }
@@ -73,27 +82,45 @@ $dsSerifWeights: (
     @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, "extraLarge");
+        $value: _ds-get-override-value($key, $fontWeight, $letterSpacing, $lineHeight);
+        @include _ds-typography-get-property($tmpMapScreenExtraLarge, $key, $forcePx, "extraLarge", $value);
       }
     }
   }
 }
 
-@mixin ds-typography-without-mq($component, $screen: false, $forcePx: false) {
+@mixin ds-typography-without-mq(
+  $component,
+  $screen: mobile,
+  $forcePx: false,
+  $fontWeight: null,
+  $letterSpacing: null,
+  $lineHeight: null
+) {
   $tmpMap: false;
+  $scaling: "small";
+  // making sure override values have matching keys in typography object
+  $addons: (
+    "letterSpacing": $letterSpacing,
+    "fontWeight": null,
+    "lineHeight": null,
+  );
 
   @if $screen == mobile {
-    $tmpMap: map.get($typographyTokensScreenSmall, $component);
+    $tmpMap: map.merge($addons, map.get($typographyTokensScreenSmall, $component));
   } @else if $screen == tablet {
-    $tmpMap: map.get($typographyTokensScreenLarge, $component);
+    $tmpMap: map.merge($addons, map.get($typographyTokensScreenLarge, $component));
+    $scaling: "large";
   } @else if $screen == desktop {
-    $tmpMap: map.get($typographyTokensScreenExtraLarge, $component);
+    $tmpMap: map.merge($addons, map.get($typographyTokensScreenExtraLarge, $component));
+    $scaling: "extraLarge";
   }
 
   @if $tmpMap {
     @include _ds-normalize-letter-spacing($tmpMap);
     @each $key in map-keys($tmpMap) {
-      @include _ds-typography-get-property($tmpMap, $key, $forcePx);
+      $value: _ds-get-override-value($key, $fontWeight, $letterSpacing, $lineHeight);
+      @include _ds-typography-get-property($tmpMap, $key, $forcePx, $scaling, $value);
     }
   }
 }
@@ -122,13 +149,15 @@ $dsSerifWeights: (
   }
 }
 
-@mixin _ds-typography-get-property($map, $key, $forcePx, $screen: "small") {
+@mixin _ds-typography-get-property($map, $key, $forcePx, $screen: "small", $value: null) {
+  @if not $value {
+    $value: map.get($map, $key);
+  }
   $unit: "";
-  $value: map.get($map, $key);
   $fontFamilyType: _ds-get-font-family-type($map);
   $fontWeights: if($fontFamilyType == "serif", $dsSerifWeights, $dsSansWeights);
 
-  @if $value != "" {
+  @if $value and $value != "" {
     @if $key == "fontFamily" {
       @if $fontFamilyType == "serif" {
         font-family: $ds-font--serif;
@@ -152,19 +181,17 @@ $dsSerifWeights: (
       }
       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));
-      }
+      line-height: $value;
     } @else if $key == "letterSpacing" {
-      @if $forcePx {
-        $value: $value * 1px;
+      @if $value == 0 {
+        letter-spacing: normal;
       } @else {
-        $value: ds-px-to-rem($value);
+        @if $forcePx {
+          letter-spacing: $value * 1px;
+        } @else {
+          letter-spacing: ds-px-to-rem($value);
+        }
       }
-      #{map.get($dsTypographyKeys, $key)}: $value;
     } @else if index(map-keys($dsTypographyKeys), $key) {
       #{map.get($dsTypographyKeys, $key)}: $value;
     }
@@ -211,3 +238,14 @@ $dsSerifWeights: (
     @include ds-typography($token, true);
   }
 }
+
+@function _ds-get-override-value($key, $fontWeight, $letterSpacing, $lineHeight) {
+  @if $key == "fontWeight" {
+    @return $fontWeight;
+  } @else if $key == "letterSpacing" {
+    @return $letterSpacing;
+  } @else if $key == "lineHeight" {
+    @return $lineHeight;
+  }
+  @return null;
+}

package/foundations/typography/README.md

@@ -8,8 +8,11 @@
 
 |parameter | type | required | options | default | description |
 |:--- | :--- | :--- | :--- | :--- | :--- |
-|token | Sass variable | yes | | | Ex.  $ds-typography-functional-body01regular, all typography variables starts with prefix $ds-typography- |
+|token | Sass variable | yes | | | Ex.  $ds-typography-expressiveheading03, all typography variables starts with prefix $ds-typography- |
 |forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size
+|fontWeight | Sass variable | no | | null | Ex: $ds-fontweight-medium, all font-weight variables starts with prefix $ds-fontweight- |
+|letterSpacing | Sass variable | no | | null | Ex: $ds-letterspacing-xs, all letter-spacing variables starts with prefix $ds-letterspacing- |
+|lineHeight | Sass variable | no | | null | Ex: $ds-lineheight-tight, all line-height variables starts with prefix $ds-lineheight- |
 
 These are copy paste friendly examples to quickliy get started using a component.
 
@@ -17,12 +20,34 @@ These are copy paste friendly examples to quickliy get started using a component
 ```scss
 @use "@bonniernews/dn-design-system-web/foundations/helpers/forward.helpers" as *;
 
-@include ds-typography($ds-typography-functional-body01regular);
+@include ds-typography($ds-typography-expressiveheading03);
+````
+
+**With overriding addons**
+```scss
+@include ds-typography(
+  $component: $ds-typography-expressiveheading03,
+  $fontWeight: $ds-fontweight-medium,
+  $lineHeight: $ds-lineheight-tight,
+  $letterSpacing: $ds-letterspacing-none
+);
+```
+
+**Without media queries**
+All devices get the same sizes based on $screen parameter (defaults to mobile)
+```scss
+@include ds-typography-without-mq(
+  $component: $ds-typography-expressiveheading03,
+  $screen: desktop,
+  $fontWeight: $ds-fontweight-medium,
+  $lineHeight: $ds-lineheight-tight,
+  $letterSpacing: $ds-letterspacing-xs
+);
 ```
 
-With forcePX parameter:
+**With forcePX parameter**
 ```scss
-@include ds-typography($ds-typography-functional-body01regular, true);
+@include ds-typography($ds-typography-expressiveheading03, true);
 ```
 
 ## ⚠️ Manual typography (only for use in special circumstances)

package/foundations/variables/typographyAddons.scss

@@ -0,0 +1,10 @@
+$ds-fontweight-regular: Regular;
+$ds-lineheight-none: 1;
+$ds-lineheight-tight: 1.12;
+$ds-lineheight-regular: 1.5;
+$ds-fontweight-medium: Medium;
+$ds-fontweight-semibold: SemiBold;
+$ds-fontweight-bold: Bold;
+$ds-letterspacing-none: 0;
+$ds-letterspacing-xs: 0.2;
+$ds-letterspacing-s: 0.5;

package/foundations/variables/typographyTokensList.scss

@@ -102,3 +102,29 @@ $ds-typography-detailteaser-standard-opinion: 'detailteaser-standard-opinion';
 $ds-typography-detailteaser-twin: 'detailteaser-twin';
 $ds-typography-detailteaser-large-compact: 'detailteaser-large-compact';
 $ds-typography-detailteaser-large-compact-opinion: 'detailteaser-large-compact-opinion';
+$ds-typography-expressiveheading01: 'expressiveheading01';
+$ds-typography-expressiveheading02: 'expressiveheading02';
+$ds-typography-expressiveheading03: 'expressiveheading03';
+$ds-typography-expressiveheading04: 'expressiveheading04';
+$ds-typography-expressiveheading05: 'expressiveheading05';
+$ds-typography-expressiveheading06: 'expressiveheading06';
+$ds-typography-expressiveheading07: 'expressiveheading07';
+$ds-typography-expressivebody01: 'expressivebody01';
+$ds-typography-expressivebody02: 'expressivebody02';
+$ds-typography-expressivebody03: 'expressivebody03';
+$ds-typography-expressiveingress01: 'expressiveingress01';
+$ds-typography-expressiveingress02: 'expressiveingress02';
+$ds-typography-functionalmeta01: 'functionalmeta01';
+$ds-typography-functionalmeta02: 'functionalmeta02';
+$ds-typography-functionallabel01: 'functionallabel01';
+$ds-typography-functionallabel02: 'functionallabel02';
+$ds-typography-functionalbody01: 'functionalbody01';
+$ds-typography-functionalbody02: 'functionalbody02';
+$ds-typography-functionalingress01: 'functionalingress01';
+$ds-typography-functionalingress02: 'functionalingress02';
+$ds-typography-functionalheading01: 'functionalheading01';
+$ds-typography-functionalheading02: 'functionalheading02';
+$ds-typography-functionalheading03: 'functionalheading03';
+$ds-typography-functionalheading04: 'functionalheading04';
+$ds-typography-functionalheading05: 'functionalheading05';
+$ds-typography-functionalheading06: 'functionalheading06';