@bonniernews/dn-design-system-web 3.0.0-alpha.13 → 3.0.0-alpha.15

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 3.0.0-alpha.15 (2023-03-24)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
+## [3.0.0-alpha.14](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.13...@bonniernews/dn-design-system-web@3.0.0-alpha.14) (2023-03-22)
+
+**Note:** Version bump only for package @bonniernews/dn-design-system-web
+
+
+
+
+
 ## [3.0.0-alpha.13](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.12...@bonniernews/dn-design-system-web@3.0.0-alpha.13) (2023-03-21)
 
 **Note:** Version bump only for package @bonniernews/dn-design-system-web

package/foundations/typography/fontDefinitions.scss

@@ -249,7 +249,7 @@ $dnSans: (
     fontFamily: DNSansVF,
     sources: (
       (
-        file: "DNSans11-Variable.woff2",
+        file: "DNSans12-Variable.woff2",
         format: "woff2-variations",
       ),
     ),
@@ -260,11 +260,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-Light.woff2",
+        file: "DNSans12-Light.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-Light.woff",
+        file: "DNSans12-Light.woff",
         format: "woff",
       ),
     ),
@@ -275,77 +275,89 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-LightItalic.woff2",
+        file: "DNSans12-Regular.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-LightItalic.woff",
+        file: "DNSans12-Regular.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 300,
-    fontStyle: italic,
+    fontWeight: 400,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-Regular.woff2",
+        file: "DNSans12-Medium.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-Regular.woff",
+        file: "DNSans12-Medium.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 400,
+    fontWeight: 500,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-RegularItalic.woff2",
+        file: "DNSans12-SemiBold.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-RegularItalic.woff",
+        file: "DNSans12-SemiBold.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 400,
-    fontStyle: italic,
+    fontWeight: 600,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-Medium.woff2",
+        file: "DNSans12-Bold.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-Medium.woff",
+        file: "DNSans12-Bold.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 500,
+    fontWeight: 700,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-MediumItalic.woff2",
+        file: "DNSans12-Black.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-MediumItalic.woff",
+        file: "DNSans12-Black.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 500,
+    fontWeight: 900,
+    fontDisplay: swap,
+  )
+);
+
+$dnSansItalic: (
+  (
+    fontFamily: DNSansVF,
+    sources: (
+      (
+        file: "DNSansItalic12-Variable.woff2",
+        format: "woff2-variations",
+      ),
+    ),
+    fontWeight: 300 900,
     fontStyle: italic,
     fontDisplay: swap,
   ),
@@ -353,30 +365,31 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-SemiBold.woff2",
+        file: "DNSans12-LightItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-SemiBold.woff",
+        file: "DNSans12-LightItalic.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 600,
+    fontWeight: 300,
+    fontStyle: italic,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-SemiBoldItalic.woff2",
+        file: "DNSans12-RegularItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-SemiBoldItalic.woff",
+        file: "DNSans12-RegularItalic.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 600,
+    fontWeight: 400,
     fontStyle: italic,
     fontDisplay: swap,
   ),
@@ -384,30 +397,31 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-Bold.woff2",
+        file: "DNSans12-MediumItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-Bold.woff",
+        file: "DNSans12-MediumItalic.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 700,
+    fontWeight: 500,
+    fontStyle: italic,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-BoldItalic.woff2",
+        file: "DNSans12-SemiBoldItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-BoldItalic.woff",
+        file: "DNSans12-SemiBoldItalic.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 700,
+    fontWeight: 600,
     fontStyle: italic,
     fontDisplay: swap,
   ),
@@ -415,26 +429,27 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-Black.woff2",
+        file: "DNSans12-BoldItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-Black.woff",
+        file: "DNSans12-BoldItalic.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 900,
+    fontWeight: 700,
+    fontStyle: italic,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-BlackItalic.woff2",
+        file: "DNSans12-BlackItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-BlackItalic.woff",
+        file: "DNSans12-BlackItalic.woff",
         format: "woff",
       ),
     ),

package/foundations/variables/spacingLayout.scss

@@ -4,6 +4,7 @@ $spacingLayout: (
   page-top-large: 48,
   page-bottom: 16,
   gap-vertical-static-medium: 16,
+  gap-vertical-medium: 16,
   gap-vertical-static-large: 32,
   gap-horizontal-static-small: 8,
   gap-vertical-static-small: 8

package/foundations/variables/spacingLayoutLargeScreen.scss

@@ -3,6 +3,7 @@ $spacingLayoutLargeScreen: (
   page-top-large: 48,
   page-bottom: 32,
   page-horizontal: 32,
+  gap-vertical-medium: 32,
   gap-vertical-static-medium: 16,
   gap-vertical-static-large: 32,
   gap-horizontal-static-small: 8,

package/foundations/variables/spacingLayoutList.scss

@@ -3,6 +3,7 @@ $ds-sl-page-top-small: page-top-small;
 $ds-sl-page-top-large: page-top-large;
 $ds-sl-page-bottom: page-bottom;
 $ds-sl-gap-vertical-static-medium: gap-vertical-static-medium;
+$ds-sl-gap-vertical-medium: gap-vertical-medium;
 $ds-sl-gap-vertical-static-large: gap-vertical-static-large;
 $ds-sl-gap-horizontal-static-small: gap-horizontal-static-small;
 $ds-sl-gap-vertical-static-small: gap-vertical-static-small;

package/foundations/variables/typographyTokensScreenLarge.scss

@@ -196,91 +196,91 @@ $typographyTokensScreenLarge: (
     fontStyle: italic
   ),
   functional-heading01regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Regular,
     fontSize: 16,
     lineHeight: 20
   ),
   functional-heading01semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     fontSize: 16,
     lineHeight: 20
   ),
   functional-heading01bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     fontSize: 16,
     lineHeight: 20
   ),
   functional-heading02regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontSize: 20,
     fontWeight: Regular,
     lineHeight: 24
   ),
   functional-heading02semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontSize: 20,
     fontWeight: SemiBold,
     lineHeight: 24
   ),
   functional-heading02bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontSize: 20,
     fontWeight: Bold,
     lineHeight: 24
   ),
   functional-heading03regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Regular,
     lineHeight: 32,
     fontSize: 25
   ),
   functional-heading03semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     lineHeight: 32,
     fontSize: 25
   ),
   functional-heading03bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     lineHeight: 32,
     fontSize: 25
   ),
   functional-heading04regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Regular,
     fontSize: 31,
     lineHeight: 36
   ),
   functional-heading04semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     fontSize: 31,
     lineHeight: 36
   ),
   functional-heading04bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     fontSize: 31,
     lineHeight: 36
   ),
   functional-heading05regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Regular,
     fontSize: 39,
     lineHeight: 48
   ),
   functional-heading05semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     fontSize: 39,
     lineHeight: 48
   ),
   functional-heading05bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     fontSize: 39,
     lineHeight: 48
@@ -403,7 +403,7 @@ $typographyTokensScreenLarge: (
     fontStyle: italic
   ),
   functional-body01regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Regular,
     fontSize: 14,
     letterSpacing: "",
@@ -411,87 +411,87 @@ $typographyTokensScreenLarge: (
     paragraphSpacing: ""
   ),
   functional-body01semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     fontSize: 14,
     letterSpacing: "",
     lineHeight: 20
   ),
   functional-body01bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     fontSize: 14,
     letterSpacing: "",
     lineHeight: 20
   ),
   functional-body02regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Regular,
     lineHeight: 24,
     fontSize: 16
   ),
   functional-body02semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     lineHeight: 24,
     fontSize: 16
   ),
   functional-body02bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     lineHeight: 24,
     fontSize: 16
   ),
   functional-body03regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Regular,
     lineHeight: 28,
     fontSize: 20
   ),
   functional-body03semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     lineHeight: 28,
     fontSize: 20
   ),
   functional-body03bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     lineHeight: 28,
     fontSize: 20
   ),
   functional-meta01regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Regular,
     fontSize: 10,
     lineHeight: 12
   ),
   functional-meta01semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     fontSize: 10,
     lineHeight: 12
   ),
   functional-meta01bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     fontSize: 10,
     lineHeight: 12
   ),
   functional-meta02regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Regular,
     lineHeight: 16,
     fontSize: 12
   ),
   functional-meta02semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     lineHeight: 16,
     fontSize: 12
   ),
   functional-meta02bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     lineHeight: 16,
     fontSize: 12
@@ -503,26 +503,26 @@ $typographyTokensScreenLarge: (
     fontSize: 92
   ),
   detailstandard-button: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     lineHeight: 24,
     fontSize: 16
   ),
   detailbottom-nav: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     lineHeight: 16,
     fontSize: 12,
     letterSpacing: 0.2
   ),
   detailstandard-button-small: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     lineHeight: 20,
     fontSize: 14
   ),
   detailarticle-label: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     lineHeight: 16,
     fontSize: 12,

package/foundations/variables/typographyTokensScreenSmall.scss

@@ -200,91 +200,91 @@ $typographyTokensScreenSmall: (
     fontStyle: italic
   ),
   functional-heading01regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Regular,
     fontSize: 16,
     lineHeight: 20
   ),
   functional-heading01semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     fontSize: 16,
     lineHeight: 20
   ),
   functional-heading01bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     fontSize: 16,
     lineHeight: 20
   ),
   functional-heading02regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontSize: 20,
     fontWeight: Regular,
     lineHeight: 24
   ),
   functional-heading02semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontSize: 20,
     fontWeight: SemiBold,
     lineHeight: 24
   ),
   functional-heading02bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontSize: 20,
     fontWeight: Bold,
     lineHeight: 24
   ),
   functional-heading03regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Regular,
     lineHeight: 28,
     fontSize: 24
   ),
   functional-heading03semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     lineHeight: 28,
     fontSize: 24
   ),
   functional-heading03bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     lineHeight: 28,
     fontSize: 24
   ),
   functional-heading04regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Regular,
     fontSize: 31,
     lineHeight: 36
   ),
   functional-heading04semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     fontSize: 31,
     lineHeight: 36
   ),
   functional-heading04bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     fontSize: 31,
     lineHeight: 36
   ),
   functional-heading05regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Regular,
     fontSize: 39,
     lineHeight: 48
   ),
   functional-heading05semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     fontSize: 39,
     lineHeight: 48
   ),
   functional-heading05bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     fontSize: 39,
     lineHeight: 48
@@ -408,7 +408,7 @@ $typographyTokensScreenSmall: (
     fontStyle: italic
   ),
   functional-body01regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Regular,
     fontSize: 14,
     letterSpacing: "",
@@ -416,99 +416,99 @@ $typographyTokensScreenSmall: (
     paragraphSpacing: ""
   ),
   functional-body01semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     fontSize: 14,
     letterSpacing: "",
     lineHeight: 20
   ),
   functional-body01bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     fontSize: 14,
     letterSpacing: "",
     lineHeight: 20
   ),
   functional-body02regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Regular,
     lineHeight: 24,
     fontSize: 16
   ),
   functional-body02semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     lineHeight: 24,
     fontSize: 16
   ),
   functional-body02bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     lineHeight: 24,
     fontSize: 16
   ),
   functional-body03regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Regular,
     lineHeight: 28,
     fontSize: 20
   ),
   functional-body03semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     lineHeight: 28,
     fontSize: 20
   ),
   functional-body03bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     lineHeight: 28,
     fontSize: 20
   ),
   functional-meta01regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Regular,
     fontSize: 10,
     lineHeight: 12
   ),
   functional-meta01semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     fontSize: 10,
     lineHeight: 12
   ),
   functional-meta01bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     fontSize: 10,
     lineHeight: 12
   ),
   functional-meta02regular: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Regular,
     lineHeight: 16,
     fontSize: 12
   ),
   functional-meta02semibold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     lineHeight: 16,
     fontSize: 12
   ),
   functional-meta02bold: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     lineHeight: 16,
     fontSize: 12
   ),
   detailstandard-button: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     lineHeight: 24,
     fontSize: 16
   ),
   detailbottom-nav: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     lineHeight: 16,
     fontSize: 12,
@@ -521,13 +521,13 @@ $typographyTokensScreenSmall: (
     fontWeight: Bold
   ),
   detailstandard-button-small: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: SemiBold,
     lineHeight: 20,
     fontSize: 14
   ),
   detailarticle-label: (
-    fontFamily: "DN Sans 11",
+    fontFamily: "DN Sans 12",
     fontWeight: Bold,
     lineHeight: 16,
     fontSize: 12,

package/package.json

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

package/tokens/spacing-layout-list.json

@@ -4,6 +4,7 @@
   "page-top-large": "page-top-large",
   "page-bottom": "page-bottom",
   "gap-vertical-static-medium": "gap-vertical-static-medium",
+  "gap-vertical-medium": "gap-vertical-medium",
   "gap-vertical-static-large": "gap-vertical-static-large",
   "gap-horizontal-static-small": "gap-horizontal-static-small",
   "gap-vertical-static-small": "gap-vertical-static-small"