@bonniernews/dn-design-system-web 3.0.0-alpha.9 → 3.0.0-alpha.90

package/foundations/typography/fontDefinitions.scss

@@ -3,7 +3,7 @@ $dnSerif: (
     fontFamily: DNSerifVf,
     sources: (
       (
-        file: "DNSerif22-Variable.woff2",
+        file: "DNSerif-1-100-Variable.woff2",
         format: "woff2-variations",
       ),
     ),
@@ -14,11 +14,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-Light.woff2",
+        file: "DNSerifHeadline-1-100-Light.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-Light.woff",
+        file: "DNSerifHeadline-1-100-Light.woff",
         format: "woff",
       ),
     ),
@@ -29,11 +29,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-Regular.woff2",
+        file: "DNSerifHeadline-1-100-Regular.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-Regular.woff",
+        file: "DNSerifHeadline-1-100-Regular.woff",
         format: "woff",
       ),
     ),
@@ -44,11 +44,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-Medium.woff2",
+        file: "DNSerifHeadline-1-100-Medium.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-Medium.woff",
+        file: "DNSerifHeadline-1-100-Medium.woff",
         format: "woff",
       ),
     ),
@@ -59,11 +59,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-SemiBold.woff2",
+        file: "DNSerifHeadline-1-100-SemiBold.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-SemiBold.woff",
+        file: "DNSerifHeadline-1-100-SemiBold.woff",
         format: "woff",
       ),
     ),
@@ -74,11 +74,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-Bold.woff2",
+        file: "DNSerifHeadline-1-100-Bold.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-Bold.woff",
+        file: "DNSerifHeadline-1-100-Bold.woff",
         format: "woff",
       ),
     ),
@@ -89,11 +89,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-ExtraBold.woff2",
+        file: "DNSerifHeadline-1-100-ExtraBold.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-ExtraBold.woff",
+        file: "DNSerifHeadline-1-100-ExtraBold.woff",
         format: "woff",
       ),
     ),
@@ -104,11 +104,11 @@ $dnSerif: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-Black.woff2",
+        file: "DNSerifHeadline-1-100-Black.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-Black.woff",
+        file: "DNSerifHeadline-1-100-Black.woff",
         format: "woff",
       ),
     ),
@@ -122,7 +122,7 @@ $dnSerifItalic: (
     fontFamily: DNSerifVf,
     sources: (
       (
-        file: "DNSerifItalic22-Variable.woff2",
+        file: "DNSerifItalic-1-100-Variable.woff2",
         format: "woff2-variations",
       ),
     ),
@@ -134,11 +134,11 @@ $dnSerifItalic: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-LightItalic.woff2",
+        file: "DNSerifHeadline-1-100-LightItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-LightItalic.woff",
+        file: "DNSerifHeadline-1-100-LightItalic.woff",
         format: "woff",
       ),
     ),
@@ -150,11 +150,11 @@ $dnSerifItalic: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-RegularItalic.woff2",
+        file: "DNSerifHeadline-1-100-RegularItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-RegularItalic.woff",
+        file: "DNSerifHeadline-1-100-RegularItalic.woff",
         format: "woff",
       ),
     ),
@@ -166,11 +166,11 @@ $dnSerifItalic: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-MediumItalic.woff2",
+        file: "DNSerifHeadline-1-100-MediumItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-MediumItalic.woff",
+        file: "DNSerifHeadline-1-100-MediumItalic.woff",
         format: "woff",
       ),
     ),
@@ -182,11 +182,11 @@ $dnSerifItalic: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-SemiBoldItalic.woff2",
+        file: "DNSerifHeadline-1-100-SemiBoldItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-SemiBoldItalic.woff",
+        file: "DNSerifHeadline-1-100-SemiBoldItalic.woff",
         format: "woff",
       ),
     ),
@@ -198,11 +198,11 @@ $dnSerifItalic: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-BoldItalic.woff2",
+        file: "DNSerifHeadline-1-100-BoldItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-BoldItalic.woff",
+        file: "DNSerifHeadline-1-100-BoldItalic.woff",
         format: "woff",
       ),
     ),
@@ -214,11 +214,11 @@ $dnSerifItalic: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-ExtraBoldItalic.woff2",
+        file: "DNSerifHeadline-1-100-ExtraBoldItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-ExtraBoldItalic.woff",
+        file: "DNSerifHeadline-1-100-ExtraBoldItalic.woff",
         format: "woff",
       ),
     ),
@@ -230,11 +230,11 @@ $dnSerifItalic: (
     fontFamily: DNSerif,
     sources: (
       (
-        file: "DNSerifHeadline22-BlackItalic.woff2",
+        file: "DNSerifHeadline-1-100-BlackItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSerifHeadline22-BlackItalic.woff",
+        file: "DNSerifHeadline-1-100-BlackItalic.woff",
         format: "woff",
       ),
     ),
@@ -249,7 +249,7 @@ $dnSans: (
     fontFamily: DNSansVF,
     sources: (
       (
-        file: "DNSans11-Variable.woff2",
+        file: "DNSans-1-200-Variable.woff2",
         format: "woff2-variations",
       ),
     ),
@@ -260,11 +260,11 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-Light.woff2",
+        file: "DNSans-1-200-Light.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-Light.woff",
+        file: "DNSans-1-200-Light.woff",
         format: "woff",
       ),
     ),
@@ -275,77 +275,89 @@ $dnSans: (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-LightItalic.woff2",
+        file: "DNSans-1-200-Regular.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-LightItalic.woff",
+        file: "DNSans-1-200-Regular.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 300,
-    fontStyle: italic,
+    fontWeight: 400,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-Regular.woff2",
+        file: "DNSans-1-200-Medium.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-Regular.woff",
+        file: "DNSans-1-200-Medium.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 400,
+    fontWeight: 500,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-RegularItalic.woff2",
+        file: "DNSans-1-200-SemiBold.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-RegularItalic.woff",
+        file: "DNSans-1-200-SemiBold.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 400,
-    fontStyle: italic,
+    fontWeight: 600,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-Medium.woff2",
+        file: "DNSans-1-200-Bold.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-Medium.woff",
+        file: "DNSans-1-200-Bold.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 500,
+    fontWeight: 700,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-MediumItalic.woff2",
+        file: "DNSans-1-200-Black.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-MediumItalic.woff",
+        file: "DNSans-1-200-Black.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 500,
+    fontWeight: 900,
+    fontDisplay: swap,
+  )
+);
+
+$dnSansItalic: (
+  (
+    fontFamily: DNSansVF,
+    sources: (
+      (
+        file: "DNSansItalic-1-200-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: "DNSans-1-200-LightItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-SemiBold.woff",
+        file: "DNSans-1-200-LightItalic.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 600,
+    fontWeight: 300,
+    fontStyle: italic,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-SemiBoldItalic.woff2",
+        file: "DNSans-1-200-RegularItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-SemiBoldItalic.woff",
+        file: "DNSans-1-200-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: "DNSans-1-200-MediumItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-Bold.woff",
+        file: "DNSans-1-200-MediumItalic.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 700,
+    fontWeight: 500,
+    fontStyle: italic,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-BoldItalic.woff2",
+        file: "DNSans-1-200-SemiBoldItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-BoldItalic.woff",
+        file: "DNSans-1-200-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: "DNSans-1-200-BoldItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-Black.woff",
+        file: "DNSans-1-200-BoldItalic.woff",
         format: "woff",
       ),
     ),
-    fontWeight: 900,
+    fontWeight: 700,
+    fontStyle: italic,
     fontDisplay: swap,
   ),
   (
     fontFamily: DNSans,
     sources: (
       (
-        file: "DNSans11-BlackItalic.woff2",
+        file: "DNSans-1-200-BlackItalic.woff2",
         format: "woff2",
       ),
       (
-        file: "DNSans11-BlackItalic.woff",
+        file: "DNSans-1-200-BlackItalic.woff",
         format: "woff",
       ),
     ),

package/foundations/variables/colorsCssVariables.scss

@@ -10,6 +10,7 @@ $ds-color-text-on-success: var(--ds-color-text-on-success);
 $ds-color-text-brand: var(--ds-color-text-brand);
 $ds-color-text-body-link: var(--ds-color-text-body-link);
 $ds-color-text-body-link-visited: var(--ds-color-text-body-link-visited);
+$ds-color-text-positive: var(--ds-color-text-positive);
 $ds-color-icon-primary: var(--ds-color-icon-primary);
 $ds-color-icon-primary-02: var(--ds-color-icon-primary-02);
 $ds-color-icon-secondary: var(--ds-color-icon-secondary);
@@ -32,6 +33,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 +64,10 @@ $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-static-red-500: var(--ds-color-static-red-500);
+$ds-color-static-yellow: var(--ds-color-static-yellow);
 $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

@@ -10,6 +10,7 @@ $ds-hex-dark-text-on-success: #ffffff;
 $ds-hex-dark-text-brand: #EF7171;
 $ds-hex-dark-text-body-link: #65A0FC;
 $ds-hex-dark-text-body-link-visited: #65A0FC;
+$ds-hex-dark-text-positive: #3A8352;
 $ds-hex-dark-icon-primary: #EDEDED;
 $ds-hex-dark-icon-primary-02: #CFCFCF;
 $ds-hex-dark-icon-secondary: #050505;
@@ -24,7 +25,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 +33,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 +69,7 @@ $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;
+$ds-hex-dark-static-red-500: #DA000D;
+$ds-hex-dark-static-yellow: #FFE600;

package/foundations/variables/colorsDnLightTokens.scss

@@ -1,7 +1,7 @@
 $ds-hex-text-primary: #050505;
 $ds-hex-text-primary-02: #666666;
 $ds-hex-text-secondary: #ffffff;
-$ds-hex-text-critical: #7F1F24;
+$ds-hex-text-critical: #DA000D;
 $ds-hex-text-disabled: #666666;
 $ds-hex-text-on-brand: #ffffff;
 $ds-hex-text-on-business: #ffffff;
@@ -10,8 +10,9 @@ $ds-hex-text-on-success: #ffffff;
 $ds-hex-text-brand: #DA000D;
 $ds-hex-text-body-link: #4373CE;
 $ds-hex-text-body-link-visited: #4373CE;
+$ds-hex-text-positive: #3A8352;
 $ds-hex-icon-primary: #050505;
-$ds-hex-icon-primary-02: #474747;
+$ds-hex-icon-primary-02: #666666;
 $ds-hex-icon-secondary: #ffffff;
 $ds-hex-icon-critical: #DA000D;
 $ds-hex-icon-disabled: #666666;
@@ -32,6 +33,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 +64,10 @@ $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-static-red-500: #DA000D;
+$ds-hex-static-yellow: #FFE600;
 $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/spacingLayout.scss

@@ -4,7 +4,12 @@ $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
+  gap-vertical-static-small: 8,
+  page-top-xsmall: 4,
+  teaser-vertical: 8,
+  teaser-horizontal: 16,
+  gap-vertical-xsmall: 4
 );

package/foundations/variables/spacingLayoutLargeScreen.scss

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

package/foundations/variables/spacingLayoutList.scss

@@ -3,6 +3,11 @@ $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;
+$ds-sl-page-top-xsmall: page-top-xsmall;
+$ds-sl-teaser-vertical: teaser-vertical;
+$ds-sl-teaser-horizontal: teaser-horizontal;
+$ds-sl-gap-vertical-xsmall: gap-vertical-xsmall;

package/foundations/variables/typographyTokensList.scss

@@ -82,3 +82,8 @@ $ds-typography-detaildropcap: 'detaildropcap';
 $ds-typography-detailstandard-button-small: 'detailstandard-button-small';
 $ds-typography-detailarticle-label: 'detailarticle-label';
 $ds-typography-detailmedryckare: 'detailmedryckare';
+$ds-typography-detailbaota-xl-label: 'detailbaota-xl-label';
+$ds-typography-detailarticle-standard: 'detailarticle-standard';
+$ds-typography-detailarticle-opinion: 'detailarticle-opinion';
+$ds-typography-detailarticle-longread: 'detailarticle-longread';
+$ds-typography-detailarticle-longread-premium: 'detailarticle-longread-premium';