@bonniernews/dn-design-system-web 6.0.8 → 7.0.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.1 (2023-10-20)
+
+
+### Bug Fixes
+
+* **web:** correct spacing in TeaserTipsa ([#1058](https://github.com/BonnierNews/dn-design-system/issues/1058)) ([56a8865](https://github.com/BonnierNews/dn-design-system/commit/56a8865ae0cdf96a86e9c6f4f45fcc0a75104841))
+
+
+
+## 7.0.0 (2023-10-11)
+
+
+### ⚠ BREAKING CHANGES
+
+* **web:** Fonts now depend on css variables, if you do not load the base file it's required to load the file cssVariables.scss. This file replaces colors.scss and shadows.scss. 
+
+### Code Refactoring
+
+* **web:** use css var for font family ([#1056](https://github.com/BonnierNews/dn-design-system/issues/1056)) ([665989b](https://github.com/BonnierNews/dn-design-system/commit/665989b0b51c4ab73e1806e86ae72b21df27ee71))
+
+
+
 ## 6.0.8 (2023-10-10)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

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

@@ -82,7 +82,7 @@
     background-color: $ds-color-static-ad-yellow;
     display: flex;
     height: ds-px-to-rem(40px);
-    @include ds-font-sans();
+    font-family: $ds-font--sans;
     font-size: ds-px-to-rem(16px);
     line-height: ds-px-to-rem(12px);
 

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

@@ -15,11 +15,12 @@
 
   @include ds-hover(true) {
     .ds-teaser__title {
-      @include ds-underline(2px, 1px);
+      @include ds-underline(2px, 2px);
     }
   }
 
   .ds-teaser__text {
     @include ds-typography($ds-typography-functional-body02regular);
+    margin-top: ds-spacing-component($ds-sc-x2);
   }
 }

package/foundations/base.scss

@@ -1,5 +1,4 @@
-@use "./colors.scss";
-@use "./shadows.scss";
+@use "./cssVariables.scss";
 @use "./a11y/a11y.scss";
 
 html {

package/foundations/cssVariables.scss

@@ -0,0 +1,3 @@
+@use "./colors.scss";
+@use "./fontFamily.scss";
+@use "./shadows.scss";

package/foundations/fontFamily.scss

@@ -0,0 +1,10 @@
+:root {
+  --ds-font--sans: DNSans, Helvetica, Arial, sans-serif;
+  --ds-font--serif: DNSerif, Times, "Times New Roman", serif;
+  --ds-font--arial: Arial, Helvetica, sans-serif;
+
+  @supports (font-variation-settings: normal) {
+    --ds-font--sans: DNSansVF, Helvetica, Arial, sans-serif;
+    --ds-font--serif: DNSerifVF, Times, "Times New Roman", serif;
+  }
+}

package/foundations/helpers/fontFamily.scss

@@ -0,0 +1,3 @@
+$ds-font--sans: var(--ds-font--sans);
+$ds-font--serif: var(--ds-font--serif);
+$ds-font--arial: var(--ds-font--arial);

package/foundations/helpers/forward.helpers.scss

@@ -1,4 +1,5 @@
 @forward "colors.scss";
+@forward "fontFamily.scss";
 @forward "hover.scss";
 @forward "links.scss";
 @forward "loading.scss";

package/foundations/helpers/typography.scss

@@ -8,35 +8,10 @@
 @use "../variables/typographyTokensScreenSmall.scss" as *;
 @use "../variables/typographyTokensScreenLarge.scss" as *;
 @use "../variables/typographyTokensScreenExtraLarge.scss" as *;
+@use "fontFamily.scss" as *;
 @forward "../variables/typographyTokensList.scss";
 @forward "../variables/decorations.scss";
 
-$ds-font--arial: Arial, Helvetica, sans-serif;
-
-@mixin ds-font-sans() {
-  & {
-    font-family: DNSans, Helvetica, Arial, sans-serif;
-  }
-
-  @supports (font-variation-settings: normal) {
-    & {
-      font-family: DNSansVF, Helvetica, Arial, sans-serif;
-    }
-  }
-}
-
-@mixin ds-font-serif() {
-  & {
-    font-family: DNSerif, Times, "Times New Roman", serif;
-  }
-
-  @supports (font-variation-settings: normal) {
-    & {
-      font-family: DNSerifVF, Times, "Times New Roman", serif;
-    }
-  }
-}
-
 $dsTypographyKeys: (
   fontFamily: "font-family",
   fontSize: "font-size",
@@ -143,9 +118,9 @@ $dsSerifWeights: (
 
   @if $key == "fontFamily" {
     @if $fontFamilyType == "serif" {
-      @include ds-font-serif();
+      font-family: $ds-font--serif;
     } @else if $fontFamilyType == "sans" {
-      @include ds-font-sans();
+      font-family: $ds-font--sans;
     }
   } @else if $key == "fontWeight" {
     $value: string.to-lower-case($value);

package/package.json

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