@bonniernews/dn-design-system-web 3.0.0-alpha.3 → 3.0.0-alpha.4

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 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.4](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.3...@bonniernews/dn-design-system-web@3.0.0-alpha.4) (2023-03-08)
+
+
+### ⚠ BREAKING CHANGES
+
+* typography medium to semibold (#717)
+
+### Miscellaneous Chores
+
+* typography medium to semibold ([#717](https://github.com/BonnierNews/dn-design-system/issues/717)) ([964de48](https://github.com/BonnierNews/dn-design-system/commit/964de485f43f18cd3f93ce4f0f82a1ce89219dee))
+
+
+
 ## [3.0.0-alpha.3](https://github.com/BonnierNews/dn-design-system/compare/@bonniernews/dn-design-system-web@3.0.0-alpha.2...@bonniernews/dn-design-system-web@3.0.0-alpha.3) (2023-03-08)
 
 

package/components/badge/badge.scss

@@ -11,7 +11,7 @@ $ds-badge__min-size: 8px;
   box-sizing: content-box;
 
   .ds-badge__inner {
-    @include ds-typography($ds-typography-functional-meta02medium);
+    @include ds-typography($ds-typography-functional-meta02semibold);
     color: $ds-color-static-white;
     background-color: $ds-color-component-brand;
     border: $ds-color-border-secondary ds-metrics-border-width(x2) solid;
@@ -23,7 +23,7 @@ $ds-badge__min-size: 8px;
     min-width: ds-px-to-rem($ds-badge__min-size);
     padding: 0 ds-px-to-rem(ds-spacing-component(x1));
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functional-meta02medium, true);
+      @include ds-typography($ds-typography-functional-meta02semibold, true);
       min-height: $ds-badge__min-size;
       min-width: $ds-badge__min-size;
       padding: 0 ds-spacing-component(x1);

package/components/blocked-content/blocked-content.scss

@@ -24,11 +24,11 @@
     }
   }
   .ds-blocked-content__title {
-    @include ds-typography($ds-typography-functional-heading01medium);
+    @include ds-typography($ds-typography-functional-heading01semibold);
     color: $ds-color-text-primary;
     margin: 0 0 ds-spacing-component(x2);
     @at-root .ds-force-px#{&} {
-      @include ds-typography($ds-typography-functional-heading01medium, true);
+      @include ds-typography($ds-typography-functional-heading01semibold, true);
     }
   }
 }

package/components/buddy-menu/buddy-menu.scss

@@ -64,7 +64,7 @@
   .ds-buddy-menu__account-title,
   .ds-buddy-menu__addons-title,
   .ds-buddy-menu__links-title {
-    @include ds-typography($ds-typography-functional-body02medium);
+    @include ds-typography($ds-typography-functional-body02semibold);
     color: $ds-color-text-primary;
     margin: ds-spacing-component(0 0 x1);
   }
@@ -103,7 +103,7 @@
     .ds-buddy-menu__account-title,
     .ds-buddy-menu__addons-title,
     .ds-buddy-menu__links-title {
-      @include ds-typography($ds-typography-functional-body02medium, true);
+      @include ds-typography($ds-typography-functional-body02semibold, true);
     }
     .ds-buddy-menu__addons-list a {
       @include ds-typography($ds-typography-functional-body02regular, true);

package/components/byline/byline.scss

@@ -101,9 +101,12 @@ $ds-byline__image-size: 44px;
     word-break: break-all;
 
     .ds-byline__title {
-      @include ds-typography($ds-typography-functional-heading01medium);
+      @include ds-typography($ds-typography-functional-heading01semibold);
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-heading01medium, true);
+        @include ds-typography(
+          $ds-typography-functional-heading01semibold,
+          true
+        );
       }
       color: $ds-color-text-primary;
       text-align: left;

package/components/disclaimer/disclaimer.scss

@@ -33,10 +33,10 @@ $ds-btn-outlined__border-width: ds-metrics-border-width(x1);
     }
 
     strong {
-      @include ds-typography($ds-typography-functional-body01medium);
+      @include ds-typography($ds-typography-functional-body01semibold);
       color: $ds-color-text-primary;
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-body01medium, true);
+        @include ds-typography($ds-typography-functional-body01semibold, true);
       }
     }
   }

package/components/factbox/factbox.scss

@@ -52,9 +52,9 @@ $ds-factbox__max-height: 500px; // includes top/bottom spacing
       @include ds-link($ds-link-article-body);
     }
     strong {
-      @include ds-typography($ds-typography-functional-body02medium);
+      @include ds-typography($ds-typography-functional-body02semibold);
       @at-root .ds-force-px#{&} {
-        @include ds-typography($ds-typography-functional-body02medium, true);
+        @include ds-typography($ds-typography-functional-body02semibold, true);
       }
     }
     img {

package/foundations/typography/fontDefinitions.scss

@@ -249,7 +249,7 @@ $dnSans: (
     fontFamily: DNSansVF,
     sources: (
       (
-        file: "DNSans10-Variable.woff2",
+        file: "DNSans11-Variable.woff2",
         format: "woff2-variations",
       ),
     ),
@@ -260,11 +260,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-Light.woff2",
+        file: "DNSans11-Light.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-Light.woff",
+        file: "DNSans11-Light.woff",
         format: "woff",
       ),
     ),
@@ -275,11 +275,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-LightItalic.woff2",
+        file: "DNSans11-LightItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-LightItalic.woff",
+        file: "DNSans11-LightItalic.woff",
         format: "woff",
       ),
     ),
@@ -291,11 +291,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-Regular.woff2",
+        file: "DNSans11-Regular.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-Regular.woff",
+        file: "DNSans11-Regular.woff",
         format: "woff",
       ),
     ),
@@ -306,11 +306,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-RegularItalic.woff2",
+        file: "DNSans11-RegularItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-RegularItalic.woff",
+        file: "DNSans11-RegularItalic.woff",
         format: "woff",
       ),
     ),
@@ -322,11 +322,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-Medium.woff2",
+        file: "DNSans11-Medium.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-Medium.woff",
+        file: "DNSans11-Medium.woff",
         format: "woff",
       ),
     ),
@@ -337,11 +337,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-MediumItalic.woff2",
+        file: "DNSans11-MediumItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-MediumItalic.woff",
+        file: "DNSans11-MediumItalic.woff",
         format: "woff",
       ),
     ),
@@ -353,11 +353,42 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-Bold.woff2",
+        file: "DNSans11-SemiBold.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-Bold.woff",
+        file: "DNSans11-SemiBold.woff",
+        format: "woff",
+      ),
+    ),
+    fontWeight: 600,
+    fontDisplay: swap,
+  ),
+  (
+    fontFamily: DNSans,
+    sources: (
+      (
+        file: "DNSans11-SemiBoldItalic.woff2",
+        format: "woff2",
+      ),
+      (
+        file: "DNSans11-SemiBoldItalic.woff",
+        format: "woff",
+      ),
+    ),
+    fontWeight: 600,
+    fontStyle: italic,
+    fontDisplay: swap,
+  ),
+  (
+    fontFamily: DNSans,
+    sources: (
+      (
+        file: "DNSans11-Bold.woff2",
+        format: "woff2",
+      ),
+      (
+        file: "DNSans11-Bold.woff",
         format: "woff",
       ),
     ),
@@ -368,11 +399,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-BoldItalic.woff2",
+        file: "DNSans11-BoldItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-BoldItalic.woff",
+        file: "DNSans11-BoldItalic.woff",
         format: "woff",
       ),
     ),
@@ -384,11 +415,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-Black.woff2",
+        file: "DNSans11-Black.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-Black.woff",
+        file: "DNSans11-Black.woff",
         format: "woff",
       ),
     ),
@@ -399,11 +430,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-BlackItalic.woff2",
+        file: "DNSans11-BlackItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-BlackItalic.woff",
+        file: "DNSans11-BlackItalic.woff",
         format: "woff",
       ),
     ),

package/foundations/variables/spacingLayoutLargeScreen.scss

@@ -1,17 +1,10 @@
 $spacingLayoutLargeScreen: (
   page-top-small: 32,
-  page-top-large: 32,
+  page-top-large: 48,
   page-bottom: 32,
   page-horizontal: 32,
   gap-vertical-static-medium: 16,
   gap-vertical-static-large: 32,
   gap-horizontal-static-small: 8,
-  gap-vertical-static-small: 8,
-  x1: 8,
-  x2: 16,
-  x3: 24,
-  x4: 32,
-  x5: 40,
-  x6: 48,
-  x8: 64
+  gap-vertical-static-small: 8
 );

package/foundations/variables/typographyTokensList.scss

@@ -1,83 +1,84 @@
 $ds-typography-expressive-heading01regular: 'expressive-heading01regular';
-$ds-typography-expressive-heading01medium: 'expressive-heading01medium';
+$ds-typography-expressive-heading01semibold: 'expressive-heading01semibold';
 $ds-typography-expressive-heading01bold: 'expressive-heading01bold';
 $ds-typography-expressive-heading01italicregular: 'expressive-heading01italicregular';
-$ds-typography-expressive-heading01italicmedium: 'expressive-heading01italicmedium';
+$ds-typography-expressive-heading01italicsemibold: 'expressive-heading01italicsemibold';
 $ds-typography-expressive-heading01italicbold: 'expressive-heading01italicbold';
 $ds-typography-expressive-heading02regular: 'expressive-heading02regular';
-$ds-typography-expressive-heading02medium: 'expressive-heading02medium';
+$ds-typography-expressive-heading02semibold: 'expressive-heading02semibold';
 $ds-typography-expressive-heading02bold: 'expressive-heading02bold';
 $ds-typography-expressive-heading02italicregular: 'expressive-heading02italicregular';
-$ds-typography-expressive-heading02italicmedium: 'expressive-heading02italicmedium';
+$ds-typography-expressive-heading02italicsemibold: 'expressive-heading02italicsemibold';
 $ds-typography-expressive-heading02italicbold: 'expressive-heading02italicbold';
 $ds-typography-expressive-heading03regular: 'expressive-heading03regular';
-$ds-typography-expressive-heading03medium: 'expressive-heading03medium';
+$ds-typography-expressive-heading03semibold: 'expressive-heading03semibold';
 $ds-typography-expressive-heading03bold: 'expressive-heading03bold';
 $ds-typography-expressive-heading03italicregular: 'expressive-heading03italicregular';
-$ds-typography-expressive-heading03italicmedium: 'expressive-heading03italicmedium';
+$ds-typography-expressive-heading03italicsemibold: 'expressive-heading03italicsemibold';
 $ds-typography-expressive-heading03italicbold: 'expressive-heading03italicbold';
 $ds-typography-expressive-heading04regular: 'expressive-heading04regular';
-$ds-typography-expressive-heading04medium: 'expressive-heading04medium';
+$ds-typography-expressive-heading04semibold: 'expressive-heading04semibold';
 $ds-typography-expressive-heading04bold: 'expressive-heading04bold';
 $ds-typography-expressive-heading04italicregular: 'expressive-heading04italicregular';
-$ds-typography-expressive-heading04italicmedium: 'expressive-heading04italicmedium';
+$ds-typography-expressive-heading04italicsemibold: 'expressive-heading04italicsemibold';
 $ds-typography-expressive-heading04italicbold: 'expressive-heading04italicbold';
 $ds-typography-expressive-heading05regular: 'expressive-heading05regular';
-$ds-typography-expressive-heading05medium: 'expressive-heading05medium';
+$ds-typography-expressive-heading05semibold: 'expressive-heading05semibold';
 $ds-typography-expressive-heading05bold: 'expressive-heading05bold';
 $ds-typography-expressive-heading05italicregular: 'expressive-heading05italicregular';
-$ds-typography-expressive-heading05italicmedium: 'expressive-heading05italicmedium';
+$ds-typography-expressive-heading05italicsemibold: 'expressive-heading05italicsemibold';
 $ds-typography-expressive-heading05italicbold: 'expressive-heading05italicbold';
 $ds-typography-functional-heading01regular: 'functional-heading01regular';
-$ds-typography-functional-heading01medium: 'functional-heading01medium';
+$ds-typography-functional-heading01semibold: 'functional-heading01semibold';
 $ds-typography-functional-heading01bold: 'functional-heading01bold';
 $ds-typography-functional-heading02regular: 'functional-heading02regular';
-$ds-typography-functional-heading02medium: 'functional-heading02medium';
+$ds-typography-functional-heading02semibold: 'functional-heading02semibold';
 $ds-typography-functional-heading02bold: 'functional-heading02bold';
 $ds-typography-functional-heading03regular: 'functional-heading03regular';
-$ds-typography-functional-heading03medium: 'functional-heading03medium';
+$ds-typography-functional-heading03semibold: 'functional-heading03semibold';
 $ds-typography-functional-heading03bold: 'functional-heading03bold';
 $ds-typography-functional-heading04regular: 'functional-heading04regular';
-$ds-typography-functional-heading04medium: 'functional-heading04medium';
+$ds-typography-functional-heading04semibold: 'functional-heading04semibold';
 $ds-typography-functional-heading04bold: 'functional-heading04bold';
 $ds-typography-functional-heading05regular: 'functional-heading05regular';
-$ds-typography-functional-heading05medium: 'functional-heading05medium';
+$ds-typography-functional-heading05semibold: 'functional-heading05semibold';
 $ds-typography-functional-heading05bold: 'functional-heading05bold';
-$ds-typography-expressive-paragraph01regular: 'expressive-paragraph01regular';
-$ds-typography-expressive-paragraph01medium: 'expressive-paragraph01medium';
-$ds-typography-expressive-paragraph01bold: 'expressive-paragraph01bold';
-$ds-typography-expressive-paragraph01italicregular: 'expressive-paragraph01italicregular';
-$ds-typography-expressive-paragraph01italicmedium: 'expressive-paragraph01italicmedium';
-$ds-typography-expressive-paragraph01italicbold: 'expressive-paragraph01italicbold';
+$ds-typography-expressive-preamble01regular: 'expressive-preamble01regular';
+$ds-typography-expressive-preamble01semibold: 'expressive-preamble01semibold';
+$ds-typography-expressive-preamble01bold: 'expressive-preamble01bold';
+$ds-typography-expressive-preamble01italicregular: 'expressive-preamble01italicregular';
+$ds-typography-expressive-preamble01italicsemibold: 'expressive-preamble01italicsemibold';
+$ds-typography-expressive-preamble01italicbold: 'expressive-preamble01italicbold';
 $ds-typography-expressive-body01regular: 'expressive-body01regular';
-$ds-typography-expressive-body01medium: 'expressive-body01medium';
+$ds-typography-expressive-body01semibold: 'expressive-body01semibold';
 $ds-typography-expressive-body01bold: 'expressive-body01bold';
 $ds-typography-expressive-body01italicregular: 'expressive-body01italicregular';
-$ds-typography-expressive-body01italicmedium: 'expressive-body01italicmedium';
+$ds-typography-expressive-body01italicsemibold: 'expressive-body01italicsemibold';
 $ds-typography-expressive-body01italicbold: 'expressive-body01italicbold';
 $ds-typography-expressive-body02regular: 'expressive-body02regular';
-$ds-typography-expressive-body02medium: 'expressive-body02medium';
+$ds-typography-expressive-body02semibold: 'expressive-body02semibold';
 $ds-typography-expressive-body02bold: 'expressive-body02bold';
 $ds-typography-expressive-body02italicregular: 'expressive-body02italicregular';
-$ds-typography-expressive-body02italicmedium: 'expressive-body02italicmedium';
+$ds-typography-expressive-body02italicsemibold: 'expressive-body02italicsemibold';
 $ds-typography-expressive-body02italicbold: 'expressive-body02italicbold';
 $ds-typography-functional-body01regular: 'functional-body01regular';
-$ds-typography-functional-body01medium: 'functional-body01medium';
+$ds-typography-functional-body01semibold: 'functional-body01semibold';
 $ds-typography-functional-body01bold: 'functional-body01bold';
 $ds-typography-functional-body02regular: 'functional-body02regular';
-$ds-typography-functional-body02medium: 'functional-body02medium';
+$ds-typography-functional-body02semibold: 'functional-body02semibold';
 $ds-typography-functional-body02bold: 'functional-body02bold';
 $ds-typography-functional-body03regular: 'functional-body03regular';
-$ds-typography-functional-body03medium: 'functional-body03medium';
+$ds-typography-functional-body03semibold: 'functional-body03semibold';
 $ds-typography-functional-body03bold: 'functional-body03bold';
 $ds-typography-functional-meta01regular: 'functional-meta01regular';
-$ds-typography-functional-meta01medium: 'functional-meta01medium';
+$ds-typography-functional-meta01semibold: 'functional-meta01semibold';
 $ds-typography-functional-meta01bold: 'functional-meta01bold';
 $ds-typography-functional-meta02regular: 'functional-meta02regular';
-$ds-typography-functional-meta02medium: 'functional-meta02medium';
+$ds-typography-functional-meta02semibold: 'functional-meta02semibold';
 $ds-typography-functional-meta02bold: 'functional-meta02bold';
 $ds-typography-detailstandard-button: 'detailstandard-button';
 $ds-typography-detailbottom-nav: 'detailbottom-nav';
 $ds-typography-detaildropcap: 'detaildropcap';
 $ds-typography-detailstandard-button-small: 'detailstandard-button-small';
 $ds-typography-detailarticle-label: 'detailarticle-label';
+$ds-typography-detailmedryckare: 'detailmedryckare';