@bonniernews/dn-design-system-web 3.0.0-alpha.2 → 3.0.0-alpha.21

package/foundations/helpers/spacing.scss

@@ -5,6 +5,8 @@
 @use "../variables/spacingComponent.scss" as *;
 @use "../variables/spacingLayout.scss" as *;
 @use "../variables/spacingLayoutLargeScreen.scss" as *;
+@forward '../variables/spacingComponentList.scss';
+@forward '../variables/spacingLayoutList.scss';
 
 @function ds-spacing-component(
   $units: null,
@@ -20,8 +22,8 @@
 
 @mixin ds-spacing-layout(
   $units: null,
-  $sizeUnit: "px",
   $property: padding,
+  $sizeUnit: "px",
   $negative: false
 ) {
   @if $units {

package/foundations/typography/fontDefinitions.scss

@@ -3,7 +3,7 @@ $dnSerif: (
     fontFamily: DNSerifVf,
     sources: (
       (
-        file: "DNSerif22-Variable.woff2",
+        file: "DNSerif25-Variable.woff2",
         format: "woff2-variations",
       ),
     ),
@@ -14,11 +14,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-Light.woff2",
+        file: "DNSerifHeadline25-Light.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-Light.woff",
+        file: "DNSerifHeadline25-Light.woff",
         format: "woff",
       ),
     ),
@@ -29,11 +29,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-Regular.woff2",
+        file: "DNSerifHeadline25-Regular.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-Regular.woff",
+        file: "DNSerifHeadline25-Regular.woff",
         format: "woff",
       ),
     ),
@@ -44,11 +44,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-Medium.woff2",
+        file: "DNSerifHeadline25-Medium.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-Medium.woff",
+        file: "DNSerifHeadline25-Medium.woff",
         format: "woff",
       ),
     ),
@@ -59,11 +59,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-SemiBold.woff2",
+        file: "DNSerifHeadline25-SemiBold.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-SemiBold.woff",
+        file: "DNSerifHeadline25-SemiBold.woff",
         format: "woff",
       ),
     ),
@@ -74,11 +74,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-Bold.woff2",
+        file: "DNSerifHeadline25-Bold.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-Bold.woff",
+        file: "DNSerifHeadline25-Bold.woff",
         format: "woff",
       ),
     ),
@@ -89,11 +89,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-ExtraBold.woff2",
+        file: "DNSerifHeadline25-ExtraBold.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-ExtraBold.woff",
+        file: "DNSerifHeadline25-ExtraBold.woff",
         format: "woff",
       ),
     ),
@@ -104,11 +104,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-Black.woff2",
+        file: "DNSerifHeadline25-Black.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-Black.woff",
+        file: "DNSerifHeadline25-Black.woff",
         format: "woff",
       ),
     ),
@@ -122,7 +122,7 @@ $dnSerifItalic: (
     fontFamily: DNSerifVf,
     sources: (
       (
-        file: "DNSerifItalic22-Variable.woff2",
+        file: "DNSerifItalic25-Variable.woff2",
         format: "woff2-variations",
       ),
     ),
@@ -134,11 +134,11 @@ $dnSerifItalic: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-LightItalic.woff2",
+        file: "DNSerifHeadline25-LightItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-LightItalic.woff",
+        file: "DNSerifHeadline25-LightItalic.woff",
         format: "woff",
       ),
     ),
@@ -150,11 +150,11 @@ $dnSerifItalic: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-RegularItalic.woff2",
+        file: "DNSerifHeadline25-RegularItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-RegularItalic.woff",
+        file: "DNSerifHeadline25-RegularItalic.woff",
         format: "woff",
       ),
     ),
@@ -166,11 +166,11 @@ $dnSerifItalic: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-MediumItalic.woff2",
+        file: "DNSerifHeadline25-MediumItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-MediumItalic.woff",
+        file: "DNSerifHeadline25-MediumItalic.woff",
         format: "woff",
       ),
     ),
@@ -182,11 +182,11 @@ $dnSerifItalic: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-SemiBoldItalic.woff2",
+        file: "DNSerifHeadline25-SemiBoldItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-SemiBoldItalic.woff",
+        file: "DNSerifHeadline25-SemiBoldItalic.woff",
         format: "woff",
       ),
     ),
@@ -198,11 +198,11 @@ $dnSerifItalic: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-BoldItalic.woff2",
+        file: "DNSerifHeadline25-BoldItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-BoldItalic.woff",
+        file: "DNSerifHeadline25-BoldItalic.woff",
         format: "woff",
       ),
     ),
@@ -214,11 +214,11 @@ $dnSerifItalic: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-ExtraBoldItalic.woff2",
+        file: "DNSerifHeadline25-ExtraBoldItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-ExtraBoldItalic.woff",
+        file: "DNSerifHeadline25-ExtraBoldItalic.woff",
         format: "woff",
       ),
     ),
@@ -230,11 +230,11 @@ $dnSerifItalic: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-BlackItalic.woff2",
+        file: "DNSerifHeadline25-BlackItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-BlackItalic.woff",
+        file: "DNSerifHeadline25-BlackItalic.woff",
         format: "woff",
       ),
     ),
@@ -249,7 +249,7 @@ $dnSans: (
     fontFamily: DNSansVF,
     sources: (
       (
-        file: "DNSans10-Variable.woff2",
+        file: "DNSans12-Variable.woff2",
         format: "woff2-variations",
       ),
     ),
@@ -260,11 +260,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-Light.woff2",
+        file: "DNSans12-Light.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-Light.woff",
+        file: "DNSans12-Light.woff",
         format: "woff",
       ),
     ),
@@ -275,46 +275,89 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-LightItalic.woff2",
+        file: "DNSans12-Regular.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-LightItalic.woff",
+        file: "DNSans12-Regular.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 300,
-    fontStyle: italic,
+    fontWeight: 400,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-Regular.woff2",
+        file: "DNSans12-Medium.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-Regular.woff",
+        file: "DNSans12-Medium.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 400,
+    fontWeight: 500,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-RegularItalic.woff2",
+        file: "DNSans12-SemiBold.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-RegularItalic.woff",
+        file: "DNSans12-SemiBold.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 400,
+    fontWeight: 600,
+    fontDisplay: swap,
+  ),
+  (
+    fontFamily: DNSans,
+    sources: (
+      (
+        file: "DNSans12-Bold.woff2",
+        format: "woff2",
+      ),
+      (
+        file: "DNSans12-Bold.woff",
+        format: "woff",
+      ),
+    ),
+    fontWeight: 700,
+    fontDisplay: swap,
+  ),
+  (
+    fontFamily: DNSans,
+    sources: (
+      (
+        file: "DNSans12-Black.woff2",
+        format: "woff2",
+      ),
+      (
+        file: "DNSans12-Black.woff",
+        format: "woff",
+      ),
+    ),
+    fontWeight: 900,
+    fontDisplay: swap,
+  )
+);
+
+$dnSansItalic: (
+  (
+    fontFamily: DNSansVF,
+    sources: (
+      (
+        file: "DNSansItalic12-Variable.woff2",
+        format: "woff2-variations",
+      ),
+    ),
+    fontWeight: 300 900,
     fontStyle: italic,
     fontDisplay: swap,
   ),
@@ -322,30 +365,31 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-Medium.woff2",
+        file: "DNSans12-LightItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-Medium.woff",
+        file: "DNSans12-LightItalic.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 500,
+    fontWeight: 300,
+    fontStyle: italic,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-MediumItalic.woff2",
+        file: "DNSans12-RegularItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-MediumItalic.woff",
+        file: "DNSans12-RegularItalic.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 500,
+    fontWeight: 400,
     fontStyle: italic,
     fontDisplay: swap,
   ),
@@ -353,30 +397,31 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-Bold.woff2",
+        file: "DNSans12-MediumItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-Bold.woff",
+        file: "DNSans12-MediumItalic.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 700,
+    fontWeight: 500,
+    fontStyle: italic,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-BoldItalic.woff2",
+        file: "DNSans12-SemiBoldItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-BoldItalic.woff",
+        file: "DNSans12-SemiBoldItalic.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 700,
+    fontWeight: 600,
     fontStyle: italic,
     fontDisplay: swap,
   ),
@@ -384,26 +429,27 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-Black.woff2",
+        file: "DNSans12-BoldItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-Black.woff",
+        file: "DNSans12-BoldItalic.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 900,
+    fontWeight: 700,
+    fontStyle: italic,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans10-BlackItalic.woff2",
+        file: "DNSans12-BlackItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans10-BlackItalic.woff",
+        file: "DNSans12-BlackItalic.woff",
         format: "woff",
       ),
     ),

package/foundations/variables/colorsCssVariables.scss

@@ -32,6 +32,7 @@ $ds-color-component-critical: var(--ds-color-component-critical);
 $ds-color-component-critical-overlay: var(--ds-color-component-critical-overlay);
 $ds-color-component-static-white: var(--ds-color-component-static-white);
 $ds-color-component-positive: var(--ds-color-component-positive);
+$ds-color-component-primary-02: var(--ds-color-component-primary-02);
 $ds-color-surface-below: var(--ds-color-surface-below);
 $ds-color-surface-native-article: var(--ds-color-surface-native-article);
 $ds-color-surface-background: var(--ds-color-surface-background);
@@ -62,6 +63,8 @@ $ds-color-static-sport: var(--ds-color-static-sport);
 $ds-color-static-neutral-200: var(--ds-color-static-neutral-200);
 $ds-color-static-sthlm: var(--ds-color-static-sthlm);
 $ds-color-static-ad-yellow: var(--ds-color-static-ad-yellow);
+$ds-color-static-neutral-100: var(--ds-color-static-neutral-100);
+$ds-color-static-neutral-500: var(--ds-color-static-neutral-500);
 $ds-color-gradient-content-fade-left: var(--ds-color-gradient-content-fade-left);
 $ds-color-gradient-content-fade-right: var(--ds-color-gradient-content-fade-right);
 $ds-color-gradient-content-fade-up: var(--ds-color-gradient-content-fade-up);

package/foundations/variables/colorsDnDarkTokens.scss

@@ -24,7 +24,7 @@ $ds-hex-dark-component-brand: #EF7171;
 $ds-hex-dark-component-business: #3A8352;
 $ds-hex-dark-component-primary: #EDEDED;
 $ds-hex-dark-component-primary-overlay: #ffffff1a;
-$ds-hex-dark-component-primary-overlay-02: #ffffff33;
+$ds-hex-dark-component-primary-overlay-02: #9E9E9E;
 $ds-hex-dark-component-secondary: #141414;
 $ds-hex-dark-component-secondary-overlay: #0808081a;
 $ds-hex-dark-component-secondary-overlay-02: #08080833;
@@ -32,6 +32,7 @@ $ds-hex-dark-component-critical: #EF7171;
 $ds-hex-dark-component-critical-overlay: #A51D24;
 $ds-hex-dark-component-static-white: #ffffff;
 $ds-hex-dark-component-positive: #3A8352;
+$ds-hex-dark-component-primary-02: #CFCFCF;
 $ds-hex-dark-surface-below: #050505;
 $ds-hex-dark-surface-background: #141414;
 $ds-hex-dark-surface-raised: #2B2B2B;
@@ -67,3 +68,5 @@ $ds-hex-dark-static-sport: #F58D2D;
 $ds-hex-dark-static-neutral-200: #E0E0E0;
 $ds-hex-dark-static-sthlm: #FF589B;
 $ds-hex-dark-static-ad-yellow: #FFEAC2;
+$ds-hex-dark-static-neutral-100: #EDEDED;
+$ds-hex-dark-static-neutral-500: #9E9E9E;

package/foundations/variables/colorsDnLightTokens.scss

@@ -32,6 +32,7 @@ $ds-hex-component-critical: #EA3E3F;
 $ds-hex-component-critical-overlay: #A51D24;
 $ds-hex-component-static-white: #ffffff;
 $ds-hex-component-positive: #3A8352;
+$ds-hex-component-primary-02: #CFCFCF;
 $ds-hex-surface-below: #EDEDED;
 $ds-hex-surface-native-article: #EDEDED;
 $ds-hex-surface-background: #ffffff;
@@ -62,6 +63,8 @@ $ds-hex-static-sport: #F58D2D;
 $ds-hex-static-neutral-200: #E0E0E0;
 $ds-hex-static-sthlm: #FF589B;
 $ds-hex-static-ad-yellow: #FFEAC2;
+$ds-hex-static-neutral-100: #EDEDED;
+$ds-hex-static-neutral-500: #9E9E9E;
 $ds-hex-gradient-content-fade-left: linear-gradient(90deg, #ffffff00 0%, #ffffff 100%);
 $ds-hex-gradient-content-fade-right: linear-gradient(-90deg, #ffffff00 0%, #ffffff 100%);
 $ds-hex-gradient-content-fade-up: linear-gradient(180deg, #ffffff00 0%, #ffffff 100%);

package/foundations/variables/spacingComponentList.scss

@@ -0,0 +1,10 @@
+$ds-sc-x1: x1;
+$ds-sc-x2: x2;
+$ds-sc-x3: x3;
+$ds-sc-x4: x4;
+$ds-sc-x5: x5;
+$ds-sc-x6: x6;
+$ds-sc-x8: x8;
+$ds-sc-x20: x20;
+$ds-sc-outer: outer;
+$ds-sc-outer-negative: outer-negative;

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

@@ -1,17 +1,11 @@
 $spacingLayoutLargeScreen: (
   page-top-small: 32,
-  page-top-large: 32,
+  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,
-  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/spacingLayoutList.scss

@@ -0,0 +1,9 @@
+$ds-sl-page-horizontal: page-horizontal;
+$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;