@bonniernews/dn-design-system-web 12.0.0 → 13.0.0

package/foundations/variables/deprecated/typographyTokensScreenSmall.scss

@@ -0,0 +1,504 @@
+$typographyTokensScreenSmall: (
+  expressive-heading01regular: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Regular,
+    fontSize: 16,
+    lineHeight: 1.2
+  ),
+  expressive-heading01semibold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: SemiBold,
+    fontSize: 16,
+    lineHeight: 1.2
+  ),
+  expressive-heading01bold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Bold,
+    fontSize: 16,
+    lineHeight: 1.2
+  ),
+  expressive-heading01italicregular: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Medium,
+    fontSize: 16,
+    letterSpacing: "",
+    lineHeight: 1.2,
+    fontStyle: italic
+  ),
+  expressive-heading01italicsemibold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: SemiBold,
+    fontSize: 16,
+    letterSpacing: "",
+    lineHeight: 1.2,
+    fontStyle: italic
+  ),
+  expressive-heading01italicbold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Bold,
+    fontSize: 16,
+    letterSpacing: "",
+    lineHeight: 1.2,
+    fontStyle: italic
+  ),
+  expressive-heading02regular: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Regular,
+    fontSize: 17,
+    lineHeight: 1.2
+  ),
+  expressive-heading02semibold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: SemiBold,
+    fontSize: 17,
+    lineHeight: 1.2
+  ),
+  expressive-heading02bold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Bold,
+    fontSize: 17,
+    lineHeight: 1.2
+  ),
+  expressive-heading02italicregular: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Regular,
+    fontSize: 17,
+    lineHeight: 1.2,
+    fontStyle: italic
+  ),
+  expressive-heading02italicsemibold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: SemiBold,
+    fontSize: 17,
+    lineHeight: 1.2,
+    fontStyle: italic
+  ),
+  expressive-heading02italicbold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Bold,
+    fontSize: 17,
+    lineHeight: 1.2,
+    fontStyle: italic
+  ),
+  expressive-heading03regular: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Regular,
+    fontSize: 20,
+    lineHeight: 1.2
+  ),
+  expressive-heading03semibold: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: SemiBold,
+    fontSize: 20,
+    lineHeight: 1.2
+  ),
+  expressive-heading03bold: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Bold,
+    fontSize: 20,
+    lineHeight: 1.2
+  ),
+  expressive-heading03italicregular: (
+    fontSize: 22,
+    lineHeight: 1.2,
+    fontWeight: Regular,
+    fontFamily: "DN Serif Headline",
+    fontStyle: italic
+  ),
+  expressive-heading03italicsemibold: (
+    fontSize: 22,
+    lineHeight: 1.2,
+    fontWeight: SemiBold,
+    fontFamily: "DN Serif Headline",
+    fontStyle: italic
+  ),
+  expressive-heading03italicbold: (
+    fontSize: 22,
+    lineHeight: 1.2,
+    fontWeight: Bold,
+    fontFamily: "DN Serif Headline",
+    fontStyle: italic
+  ),
+  expressive-heading04regular: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Regular,
+    fontSize: 26,
+    lineHeight: 1.1
+  ),
+  expressive-heading04semibold: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: SemiBold,
+    fontSize: 26,
+    lineHeight: 1.1
+  ),
+  expressive-heading04bold: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Bold,
+    fontSize: 26,
+    lineHeight: 1.1
+  ),
+  expressive-heading04italicregular: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Regular,
+    lineHeight: 1.1,
+    fontSize: 26,
+    fontStyle: italic
+  ),
+  expressive-heading04italicsemibold: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: SemiBold,
+    lineHeight: 1.1,
+    fontSize: 26,
+    fontStyle: italic
+  ),
+  expressive-heading04italicbold: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Bold,
+    lineHeight: 1.1,
+    fontSize: 26,
+    fontStyle: italic
+  ),
+  expressive-heading05regular: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Regular,
+    lineHeight: 1.1,
+    fontSize: 32,
+    letterSpacing: ""
+  ),
+  expressive-heading05semibold: (
+    fontFamily: "DN Serif Display",
+    fontWeight: SemiBold,
+    lineHeight: 1.1,
+    fontSize: 32
+  ),
+  expressive-heading05bold: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Bold,
+    lineHeight: 1.1,
+    fontSize: 32,
+    letterSpacing: ""
+  ),
+  expressive-heading05italicregular: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Regular,
+    lineHeight: 1.1,
+    fontSize: 32,
+    fontStyle: italic
+  ),
+  expressive-heading05italicsemibold: (
+    fontFamily: "DN Serif Display",
+    fontWeight: SemiBold,
+    lineHeight: 1.1,
+    fontSize: 32,
+    fontStyle: italic
+  ),
+  expressive-heading05italicbold: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Bold,
+    lineHeight: 1.1,
+    fontSize: 32,
+    fontStyle: italic
+  ),
+  functional-heading01regular: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    fontSize: 16,
+    lineHeight: 1.2
+  ),
+  functional-heading01semibold: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    fontSize: 16,
+    lineHeight: 1.2
+  ),
+  functional-heading01bold: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 16,
+    lineHeight: 1.2
+  ),
+  functional-heading02regular: (
+    fontFamily: "DN Sans",
+    fontSize: 20,
+    fontWeight: Regular,
+    lineHeight: 1.1
+  ),
+  functional-heading02semibold: (
+    fontFamily: "DN Sans",
+    fontSize: 20,
+    fontWeight: SemiBold,
+    lineHeight: 1.1
+  ),
+  functional-heading02bold: (
+    fontFamily: "DN Sans",
+    fontSize: 20,
+    fontWeight: Bold,
+    lineHeight: 1.1
+  ),
+  functional-heading03regular: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    lineHeight: 1.2,
+    fontSize: 20
+  ),
+  functional-heading03semibold: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    lineHeight: 1.2,
+    fontSize: 20
+  ),
+  functional-heading03bold: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    lineHeight: 1.2,
+    fontSize: 20
+  ),
+  functional-heading04regular: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    fontSize: 31,
+    lineHeight: 1.1
+  ),
+  functional-heading04semibold: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    fontSize: 31,
+    lineHeight: 1.1
+  ),
+  functional-heading04bold: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 31,
+    lineHeight: 1.1
+  ),
+  functional-heading05regular: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    fontSize: 39,
+    lineHeight: 1.1
+  ),
+  functional-heading05semibold: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    fontSize: 39,
+    lineHeight: 1.1
+  ),
+  functional-heading05bold: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 39,
+    lineHeight: 1.1
+  ),
+  expressive-preamble01regular: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Regular,
+    fontSize: 18,
+    lineHeight: 1.5
+  ),
+  expressive-preamble01semibold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: SemiBold,
+    fontSize: 18,
+    lineHeight: 1.5
+  ),
+  expressive-preamble01bold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Bold,
+    fontSize: 18,
+    lineHeight: 1.5
+  ),
+  expressive-preamble01italicregular: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Regular,
+    fontSize: 18,
+    lineHeight: 1.5,
+    fontStyle: italic
+  ),
+  expressive-preamble01italicsemibold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: SemiBold,
+    fontSize: 18,
+    lineHeight: 1.5,
+    fontStyle: italic
+  ),
+  expressive-preamble01italicbold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Bold,
+    fontSize: 18,
+    lineHeight: 1.5,
+    fontStyle: italic
+  ),
+  expressive-body01regular: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Regular,
+    fontSize: 16,
+    lineHeight: 1.5
+  ),
+  expressive-body01semibold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: SemiBold,
+    fontSize: 16,
+    lineHeight: 1.5
+  ),
+  expressive-body01bold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Bold,
+    fontSize: 16,
+    lineHeight: 1.5
+  ),
+  expressive-body01italicregular: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Regular,
+    lineHeight: 1.5,
+    fontSize: 16,
+    fontStyle: italic
+  ),
+  expressive-body01italicsemibold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: SemiBold,
+    lineHeight: 1.5,
+    fontSize: 16,
+    fontStyle: italic
+  ),
+  expressive-body01italicbold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Bold,
+    lineHeight: 1.5,
+    fontSize: 16,
+    fontStyle: italic
+  ),
+  expressive-body02regular: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Regular,
+    lineHeight: 1.5,
+    fontSize: 18,
+    paragraphSpacing: 16
+  ),
+  expressive-body02semibold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: SemiBold,
+    lineHeight: 1.5,
+    fontSize: 18
+  ),
+  expressive-body02bold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Bold,
+    lineHeight: 1.5,
+    fontSize: 18
+  ),
+  expressive-body02italicregular: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Regular,
+    lineHeight: 1.5,
+    fontSize: 18,
+    fontStyle: italic
+  ),
+  expressive-body02italicsemibold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: SemiBold,
+    lineHeight: 1.5,
+    fontSize: 18,
+    fontStyle: italic
+  ),
+  expressive-body02italicbold: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Bold,
+    lineHeight: 1.5,
+    fontSize: 18,
+    fontStyle: italic
+  ),
+  functional-body01regular: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    fontSize: 14,
+    letterSpacing: "",
+    lineHeight: 1.5,
+    paragraphSpacing: ""
+  ),
+  functional-body01semibold: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    fontSize: 14,
+    letterSpacing: "",
+    lineHeight: 1.5
+  ),
+  functional-body01bold: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 14,
+    letterSpacing: "",
+    lineHeight: 1.5
+  ),
+  functional-body02regular: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    lineHeight: 1.5,
+    fontSize: 16
+  ),
+  functional-body02semibold: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    lineHeight: 1.5,
+    fontSize: 16
+  ),
+  functional-body02bold: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    lineHeight: 1.5,
+    fontSize: 16
+  ),
+  functional-body03regular: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    lineHeight: 1.5,
+    fontSize: 20
+  ),
+  functional-body03semibold: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    lineHeight: 1.5,
+    fontSize: 20
+  ),
+  functional-body03bold: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    lineHeight: 1.5,
+    fontSize: 20
+  ),
+  functional-meta01regular: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    fontSize: 10,
+    lineHeight: 1.5
+  ),
+  functional-meta01semibold: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    fontSize: 10,
+    lineHeight: 1.5
+  ),
+  functional-meta01bold: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 10,
+    lineHeight: 1.5
+  ),
+  functional-meta02regular: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    lineHeight: 1.5,
+    fontSize: 12
+  ),
+  functional-meta02semibold: (
+    fontFamily: "DN Sans",
+    fontWeight: SemiBold,
+    lineHeight: 1.5,
+    fontSize: 12
+  ),
+  functional-meta02bold: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    lineHeight: 1.5,
+    fontSize: 12
+  )
+);

package/foundations/variables/opacity.scss

@@ -1,2 +1,2 @@
 $ds-opacity-component-disabled: 0.5;
-$ds-opacity-component-hover-pressed: 0.6;
+$ds-opacity-component-hover-pressed: 0.8;

package/foundations/variables/shadowsDnDarkTokens.scss

@@ -1,42 +1,34 @@
 $shadowsDnDarkTokens: (
-  drop-shadow-02: (
+  elevation-xs: (
     x: 0,
-    y: 3,
-    blur: 6,
-    spread: 0,
-    color: #0000001a,
-    type: dropShadow
-  ),
-  drop-shadow-a: (
-    x: 0,
-    y: 0,
-    blur: 1,
+    y: 1,
+    blur: 2,
     spread: 0,
-    color: #00000040,
+    color: #00000026,
     type: dropShadow
   ),
-  drop-shadow-b: (
+  elevation-s: (
     x: 0,
     y: 2,
     blur: 4,
     spread: 0,
-    color: #00000033,
+    color: #00000026,
     type: dropShadow
   ),
-  drop-shadow-c: (
+  elevation-m: (
     x: 0,
-    y: 1,
-    blur: 3,
+    y: 4,
+    blur: 8,
     spread: 0,
-    color: #00000021,
+    color: #00000026,
     type: dropShadow
   ),
-  drop-shadow-d: (
+  elevation-l: (
     x: 0,
-    y: 3,
-    blur: 6,
+    y: 8,
+    blur: 16,
     spread: 0,
-    color: #00000021,
+    color: #0000001a,
     type: dropShadow
   )
 );

package/foundations/variables/shadowsDnLightTokens.scss

@@ -1,42 +1,34 @@
 $shadowsDnLightTokens: (
-  drop-shadow-02: (
+  elevation-xs: (
     x: 0,
-    y: 3,
-    blur: 6,
-    spread: 0,
-    color: #0000001a,
-    type: dropShadow
-  ),
-  drop-shadow-a: (
-    x: 0,
-    y: 0,
-    blur: 1,
+    y: 1,
+    blur: 2,
     spread: 0,
-    color: #00000040,
+    color: #00000026,
     type: dropShadow
   ),
-  drop-shadow-b: (
+  elevation-s: (
     x: 0,
     y: 2,
     blur: 4,
     spread: 0,
-    color: #00000033,
+    color: #00000026,
     type: dropShadow
   ),
-  drop-shadow-c: (
+  elevation-m: (
     x: 0,
-    y: 1,
-    blur: 3,
+    y: 4,
+    blur: 8,
     spread: 0,
-    color: #00000021,
+    color: #00000026,
     type: dropShadow
   ),
-  drop-shadow-d: (
+  elevation-l: (
     x: 0,
-    y: 3,
-    blur: 6,
+    y: 8,
+    blur: 16,
     spread: 0,
-    color: #00000021,
+    color: #0000001a,
     type: dropShadow
   )
 );

package/foundations/variables/shadowsTokensList.scss

@@ -1,5 +1,4 @@
-$ds-shadow-drop-shadow-02: --ds-shadow-drop-shadow-02;
-$ds-shadow-drop-shadow-a: --ds-shadow-drop-shadow-a;
-$ds-shadow-drop-shadow-b: --ds-shadow-drop-shadow-b;
-$ds-shadow-drop-shadow-c: --ds-shadow-drop-shadow-c;
-$ds-shadow-drop-shadow-d: --ds-shadow-drop-shadow-d;
+$ds-shadow-elevation-xs: --ds-shadow-elevation-xs;
+$ds-shadow-elevation-s: --ds-shadow-elevation-s;
+$ds-shadow-elevation-m: --ds-shadow-elevation-m;
+$ds-shadow-elevation-l: --ds-shadow-elevation-l;

package/foundations/variables/typographyFontWeight.scss

@@ -0,0 +1,4 @@
+$ds-fontweight-regular: Regular;
+$ds-fontweight-medium: Medium;
+$ds-fontweight-semibold: SemiBold;
+$ds-fontweight-bold: Bold;

package/foundations/variables/typographyLetterSpacing.scss

@@ -0,0 +1,3 @@
+$ds-letterspacing-none: 0;
+$ds-letterspacing-xs: 0.2;
+$ds-letterspacing-s: 0.5;

package/foundations/variables/typographyLineHeight.scss

@@ -0,0 +1,4 @@
+$ds-lineheight-none: 1;
+$ds-lineheight-s: 1.1;
+$ds-lineheight-m: 1.2;
+$ds-lineheight-l: 1.5;