npm - @bonniernews/dn-design-system-web - Versions diffs - 11.3.1 → 11.4.0-beta.0 - Mend

@bonniernews/dn-design-system-web 11.3.1 → 11.4.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/CHANGELOG.md +7 -0
package/foundations/helpers/typography.scss +63 -25
package/foundations/typography/README.md +29 -4
package/foundations/variables/typographyAddons.scss +10 -0
package/foundations/variables/typographyTokensList.scss +26 -0
package/foundations/variables/typographyTokensScreenExtraLarge.scss +260 -104
package/foundations/variables/typographyTokensScreenLarge.scss +260 -104
package/foundations/variables/typographyTokensScreenSmall.scss +286 -104
package/package.json +1 -1
package/tokens/typography-list.json +27 -1

package/foundations/variables/typographyTokensScreenExtraLarge.scss CHANGED Viewed

@@ -3,37 +3,37 @@ $typographyTokensScreenExtraLarge: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
     fontSize: 36,
-    lineHeight: 40
+    lineHeight: 1.12
   ),
   expressive-heading03semibold: (
     fontFamily: "DN Serif Display",
     fontWeight: SemiBold,
     fontSize: 36,
-    lineHeight: 40
+    lineHeight: 1.12
   ),
   expressive-heading03bold: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
     fontSize: 36,
-    lineHeight: 40
+    lineHeight: 1.12
   ),
   expressive-heading03italicregular: (
     fontSize: 36,
-    lineHeight: 40,
+    lineHeight: 1.12,
     fontWeight: Regular,
     fontFamily: "DN Serif Display",
     fontStyle: italic
   ),
   expressive-heading03italicsemibold: (
     fontSize: 36,
-    lineHeight: 40,
+    lineHeight: 1.12,
     fontWeight: SemiBold,
     fontFamily: "DN Serif Display",
     fontStyle: italic
   ),
   expressive-heading03italicbold: (
     fontSize: 36,
-    lineHeight: 40,
+    lineHeight: 1.12,
     fontWeight: Bold,
     fontFamily: "DN Serif Display",
     fontStyle: italic
@@ -42,37 +42,37 @@ $typographyTokensScreenExtraLarge: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
     fontSize: 56,
-    lineHeight: 60
+    lineHeight: 1.12
   ),
   expressive-heading04semibold: (
     fontFamily: "DN Serif Display",
     fontWeight: SemiBold,
     fontSize: 56,
-    lineHeight: 60
+    lineHeight: 1.12
   ),
   expressive-heading04bold: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
     fontSize: 56,
-    lineHeight: 60
+    lineHeight: 1.12
   ),
   expressive-heading04italicregular: (
     fontSize: 56,
-    lineHeight: 60,
+    lineHeight: 1.12,
     fontWeight: Regular,
     fontFamily: "DN Serif Display",
     fontStyle: italic
   ),
   expressive-heading04italicsemibold: (
     fontSize: 56,
-    lineHeight: 60,
+    lineHeight: 1.12,
     fontWeight: SemiBold,
     fontFamily: "DN Serif Display",
     fontStyle: italic
   ),
   expressive-heading04italicbold: (
     fontSize: 56,
-    lineHeight: 60,
+    lineHeight: 1.12,
     fontWeight: Bold,
     fontFamily: "DN Serif Display",
     fontStyle: italic
@@ -80,76 +80,76 @@ $typographyTokensScreenExtraLarge: (
   expressive-heading05regular: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
-    lineHeight: 88,
+    lineHeight: 1.12,
     fontSize: 80
   ),
   expressive-heading05semibold: (
     fontFamily: "DN Serif Display",
     fontWeight: SemiBold,
-    lineHeight: 88,
+    lineHeight: 1.12,
     fontSize: 80
   ),
   expressive-heading05bold: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    lineHeight: 88,
+    lineHeight: 1.12,
     fontSize: 80
   ),
   expressive-heading05italicregular: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
     fontSize: 80,
-    lineHeight: 88,
+    lineHeight: 1.12,
     fontStyle: italic
   ),
   expressive-heading05italicsemibold: (
     fontFamily: "DN Serif Display",
     fontWeight: SemiBold,
     fontSize: 80,
-    lineHeight: 88,
+    lineHeight: 1.12,
     fontStyle: italic
   ),
   expressive-heading05italicbold: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
     fontSize: 80,
-    lineHeight: 88,
+    lineHeight: 1.12,
     fontStyle: italic
   ),
   expressive-heading01regular: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 16,
-    lineHeight: 20
+    lineHeight: 1.12
   ),
   expressive-heading01semibold: (
     fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     fontSize: 16,
-    lineHeight: 20
+    lineHeight: 1.12
   ),
   expressive-heading01bold: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 16,
-    lineHeight: 20
+    lineHeight: 1.12
   ),
   expressive-heading01italicregular: (
-    lineHeight: 20,
+    lineHeight: 1.12,
     fontSize: 16,
     fontFamily: "DN Serif Text",
     fontWeight: Medium,
     fontStyle: italic
   ),
   expressive-heading01italicsemibold: (
-    lineHeight: 20,
+    lineHeight: 1.12,
     fontSize: 16,
     fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     fontStyle: italic
   ),
   expressive-heading01italicbold: (
-    lineHeight: 20,
+    lineHeight: 1.12,
     fontSize: 16,
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
@@ -159,38 +159,38 @@ $typographyTokensScreenExtraLarge: (
     fontFamily: "DN Serif Headline",
     fontWeight: Regular,
     fontSize: 22,
-    lineHeight: 26,
+    lineHeight: 1.12,
     paragraphSpacing: 16
   ),
   expressive-heading02semibold: (
     fontFamily: "DN Serif Headline",
     fontWeight: SemiBold,
     fontSize: 22,
-    lineHeight: 26
+    lineHeight: 1.12
   ),
   expressive-heading02bold: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
     fontSize: 22,
-    lineHeight: 26
+    lineHeight: 1.12
   ),
   expressive-heading02italicregular: (
     fontSize: 22,
-    lineHeight: 26,
+    lineHeight: 1.12,
     fontWeight: Regular,
     fontFamily: "DN Serif Headline",
     fontStyle: italic
   ),
   expressive-heading02italicsemibold: (
     fontSize: 22,
-    lineHeight: 26,
+    lineHeight: 1.12,
     fontWeight: SemiBold,
     fontFamily: "DN Serif Headline",
     fontStyle: italic
   ),
   expressive-heading02italicbold: (
     fontSize: 22,
-    lineHeight: 26,
+    lineHeight: 1.12,
     fontWeight: Bold,
     fontFamily: "DN Serif Headline",
     fontStyle: italic
@@ -198,153 +198,153 @@ $typographyTokensScreenExtraLarge: (
   detailarticle-standard: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    lineHeight: 52,
+    lineHeight: 1.12,
     fontSize: 48
   ),
   detailarticle-opinion: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
-    lineHeight: 52,
+    lineHeight: 1.12,
     fontSize: 48,
     fontStyle: italic
   ),
   detailarticle-longread: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
-    lineHeight: 64,
+    lineHeight: 1.12,
     fontSize: 56
   ),
   detailarticle-longread-premium: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    lineHeight: 64,
+    lineHeight: 1.12,
     fontSize: 56
   ),
   detailarticle-direkt: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    lineHeight: 36,
+    lineHeight: 1.12,
     fontSize: 32
   ),
   detailarticle-direkt-opinion: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
-    lineHeight: 36,
+    lineHeight: 1.12,
     fontSize: 32,
     fontStyle: italic
   ),
   detaildirekt-header: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
-    lineHeight: 52,
+    lineHeight: 1.12,
     fontSize: 48
   ),
   detaildropcap: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    lineHeight: 78,
+    lineHeight: 1,
     fontSize: 92
   ),
   detailarticle-quote: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    lineHeight: 34,
+    lineHeight: 1.12,
     fontSize: 28
   ),
   detailmellanrubrik: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    lineHeight: 36,
+    lineHeight: 1.12,
     fontSize: 32
   ),
   detailteaser-standard-compact: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
-    lineHeight: 28,
+    lineHeight: 1.12,
     fontSize: 24
   ),
   detailteaser-standard-compact-opinion: (
     fontFamily: "DN Serif Headline",
     fontWeight: Regular,
-    lineHeight: 28,
+    lineHeight: 1.12,
     fontSize: 24,
     fontStyle: italic
   ),
   detailteaser-large: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    lineHeight: 60,
+    lineHeight: 1.12,
     fontSize: 56
   ),
   detailteaser-large-opinion: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
-    lineHeight: 40,
+    lineHeight: 1.12,
     fontSize: 36,
     fontStyle: italic
   ),
   detailteaser-large-storRubrik: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
-    lineHeight: 60,
+    lineHeight: 1.12,
     fontSize: 56,
     fontStyle: italic
   ),
   detailteaser-standard: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
-    lineHeight: 40,
+    lineHeight: 1.12,
     fontSize: 36
   ),
   detailteaser-standard-opinion: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
-    lineHeight: 40,
+    lineHeight: 1.12,
     fontSize: 36,
     fontStyle: italic
   ),
   detailteaser-twin: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
-    lineHeight: 26,
+    lineHeight: 1.12,
     fontSize: 22
   ),
   detailteaser-large-compact: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
     fontSize: 40,
-    lineHeight: 44
+    lineHeight: 1.12
   ),
   detailteaser-large-compact-opinion: (
     fontFamily: "DN Serif Headline",
     fontWeight: Regular,
     fontSize: 24,
-    lineHeight: 28,
+    lineHeight: 1.12,
     fontStyle: italic
   ),
   detailstandard-button: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
-    lineHeight: 24,
+    lineHeight: 1.5,
     fontSize: 16
   ),
   detailbottom-nav: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
-    lineHeight: 16,
+    lineHeight: 1.12,
     fontSize: 12,
     letterSpacing: 0.2
   ),
   detailstandard-button-small: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
-    lineHeight: 20,
+    lineHeight: 1.5,
     fontSize: 14
   ),
   detailarticle-label: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
-    lineHeight: 16,
+    lineHeight: 1.12,
     fontSize: 12,
     textCase: uppercase,
     letterSpacing: 0.5
@@ -353,12 +353,12 @@ $typographyTokensScreenExtraLarge: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 16,
-    lineHeight: 22
+    lineHeight: 1.12
   ),
   detailbaota-xl-label: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
-    lineHeight: 24,
+    lineHeight: 1.5,
     fontSize: 16,
     textCase: upperCase,
     letterSpacing: 0.7
@@ -366,129 +366,129 @@ $typographyTokensScreenExtraLarge: (
   functional-heading03regular: (
     fontFamily: "DN Sans",
     fontWeight: Regular,
-    lineHeight: 32,
+    lineHeight: 1.12,
     fontSize: 24
   ),
   functional-heading03semibold: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
-    lineHeight: 32,
+    lineHeight: 1.12,
     fontSize: 24
   ),
   functional-heading03bold: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
-    lineHeight: 32,
+    lineHeight: 1.12,
     fontSize: 24
   ),
   functional-heading01regular: (
     fontFamily: "DN Sans",
     fontWeight: Regular,
     fontSize: 16,
-    lineHeight: 20
+    lineHeight: 1.12
   ),
   functional-heading01semibold: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
     fontSize: 16,
-    lineHeight: 20
+    lineHeight: 1.12
   ),
   functional-heading01bold: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
     fontSize: 16,
-    lineHeight: 20
+    lineHeight: 1.12
   ),
   functional-heading02regular: (
     fontFamily: "DN Sans",
     fontSize: 20,
     fontWeight: Regular,
-    lineHeight: 24
+    lineHeight: 1.12
   ),
   functional-heading02semibold: (
     fontFamily: "DN Sans",
     fontSize: 20,
     fontWeight: SemiBold,
-    lineHeight: 24
+    lineHeight: 1.12
   ),
   functional-heading02bold: (
     fontFamily: "DN Sans",
     fontSize: 20,
     fontWeight: Bold,
-    lineHeight: 24
+    lineHeight: 1.12
   ),
   functional-heading04regular: (
     fontFamily: "DN Sans",
     fontWeight: Regular,
     fontSize: 31,
-    lineHeight: 36
+    lineHeight: 1.12
   ),
   functional-heading04semibold: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
     fontSize: 31,
-    lineHeight: 36
+    lineHeight: 1.12
   ),
   functional-heading04bold: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
     fontSize: 31,
-    lineHeight: 36
+    lineHeight: 1.12
   ),
   functional-heading05regular: (
     fontFamily: "DN Sans",
     fontWeight: Regular,
     fontSize: 39,
-    lineHeight: 48
+    lineHeight: 1.12
   ),
   functional-heading05semibold: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
     fontSize: 39,
-    lineHeight: 48
+    lineHeight: 1.12
   ),
   functional-heading05bold: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
     fontSize: 39,
-    lineHeight: 48
+    lineHeight: 1.12
   ),
   expressive-preamble01regular: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 20,
-    lineHeight: 30
+    lineHeight: 1.5
   ),
   expressive-preamble01semibold: (
     fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     fontSize: 20,
-    lineHeight: 30
+    lineHeight: 1.5
   ),
   expressive-preamble01bold: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 20,
-    lineHeight: 30
+    lineHeight: 1.5
   ),
   expressive-preamble01italicregular: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
-    lineHeight: 30,
+    lineHeight: 1.5,
     fontSize: 20,
     fontStyle: italic
   ),
   expressive-preamble01italicsemibold: (
     fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
-    lineHeight: 30,
+    lineHeight: 1.5,
     fontSize: 20,
     fontStyle: italic
   ),
   expressive-preamble01italicbold: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
-    lineHeight: 30,
+    lineHeight: 1.5,
     fontSize: 20,
     fontStyle: italic
   ),
@@ -496,86 +496,242 @@ $typographyTokensScreenExtraLarge: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 16,
-    lineHeight: 24
+    lineHeight: 1.5
   ),
   expressive-body01semibold: (
     fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     fontSize: 16,
-    lineHeight: 24
+    lineHeight: 1.5
   ),
   expressive-body01bold: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 16,
-    lineHeight: 24
+    lineHeight: 1.5
   ),
   expressive-body01italicregular: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
-    lineHeight: 24,
+    lineHeight: 1.5,
     fontSize: 16,
     fontStyle: italic
   ),
   expressive-body01italicsemibold: (
     fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
-    lineHeight: 24,
+    lineHeight: 1.5,
     fontSize: 16,
     fontStyle: italic
   ),
   expressive-body01italicbold: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
-    lineHeight: 24,
+    lineHeight: 1.5,
     fontSize: 16,
     fontStyle: italic
   ),
   expressive-body02regular: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
-    lineHeight: 28,
+    lineHeight: 1.5,
     fontSize: 18
   ),
   expressive-body02semibold: (
     fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
-    lineHeight: 28,
+    lineHeight: 1.5,
     fontSize: 18
   ),
   expressive-body02bold: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
-    lineHeight: 28,
+    lineHeight: 1.5,
     fontSize: 18
   ),
   expressive-body02italicregular: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
-    lineHeight: 28,
+    lineHeight: 1.5,
     fontSize: 18,
     fontStyle: italic
   ),
   expressive-body02italicsemibold: (
     fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
-    lineHeight: 28,
+    lineHeight: 1.5,
     fontSize: 18,
     fontStyle: italic
   ),
   expressive-body02italicbold: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
-    lineHeight: 28,
+    lineHeight: 1.5,
     fontSize: 18,
     fontStyle: italic
   ),
+  expressiveheading01: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Bold,
+    fontSize: 16,
+    lineHeight: 1.12
+  ),
+  expressiveheading02: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Bold,
+    fontSize: 24,
+    lineHeight: 1.12
+  ),
+  expressiveheading03: (
+    fontSize: 32,
+    lineHeight: 1.12,
+    fontFamily: "DN Serif Display",
+    fontWeight: Bold
+  ),
+  expressiveheading04: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Bold,
+    fontSize: 48,
+    lineHeight: 1.12
+  ),
+  expressiveheading05: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Bold,
+    fontSize: 56,
+    lineHeight: 1.12
+  ),
+  expressiveheading06: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Bold,
+    fontSize: 64,
+    lineHeight: 1.12
+  ),
+  expressiveheading07: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Bold,
+    fontSize: 72,
+    lineHeight: 1.12
+  ),
+  expressivebody01: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Regular,
+    fontSize: 14,
+    lineHeight: 1.5
+  ),
+  expressivebody02: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Regular,
+    lineHeight: 1.5,
+    fontSize: 16
+  ),
+  expressivebody03: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Regular,
+    fontSize: 18,
+    lineHeight: 1.5
+  ),
+  expressiveingress01: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Bold,
+    fontSize: 20,
+    lineHeight: 1.5
+  ),
+  expressiveingress02: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Bold,
+    fontSize: 24,
+    lineHeight: 1.5
+  ),
+  functionalmeta01: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    fontSize: 10,
+    lineHeight: 1.12
+  ),
+  functionalmeta02: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    fontSize: 12,
+    lineHeight: 1.12
+  ),
+  functionallabel01: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 12,
+    lineHeight: 1.12
+  ),
+  functionallabel02: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 16,
+    lineHeight: 1.12
+  ),
+  functionalbody01: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    fontSize: 14,
+    lineHeight: 1.5
+  ),
+  functionalbody02: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    fontSize: 16,
+    lineHeight: 1.5
+  ),
+  functionalingress01: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 20,
+    lineHeight: 1.5
+  ),
+  functionalingress02: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 24,
+    lineHeight: 1.5
+  ),
+  functionalheading01: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 16,
+    lineHeight: 1.12
+  ),
+  functionalheading02: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 20,
+    lineHeight: 1.12
+  ),
+  functionalheading03: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 24,
+    lineHeight: 1.12
+  ),
+  functionalheading04: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 28,
+    lineHeight: 1.12
+  ),
+  functionalheading05: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 36,
+    lineHeight: 1.12
+  ),
+  functionalheading06: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 40,
+    lineHeight: 1.12
+  ),
   functional-body01regular: (
     fontFamily: "DN Sans",
     fontWeight: Regular,
     fontSize: 14,
     letterSpacing: "",
-    lineHeight: 20,
+    lineHeight: 1.5,
     paragraphSpacing: ""
   ),
   functional-body01semibold: (
@@ -583,85 +739,85 @@ $typographyTokensScreenExtraLarge: (
     fontWeight: SemiBold,
     fontSize: 14,
     letterSpacing: "",
-    lineHeight: 20
+    lineHeight: 1.5
   ),
   functional-body01bold: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
     fontSize: 14,
     letterSpacing: "",
-    lineHeight: 20
+    lineHeight: 1.5
   ),
   functional-body02regular: (
     fontFamily: "DN Sans",
     fontWeight: Regular,
-    lineHeight: 24,
+    lineHeight: 1.5,
     fontSize: 16
   ),
   functional-body02semibold: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
-    lineHeight: 24,
+    lineHeight: 1.5,
     fontSize: 16
   ),
   functional-body02bold: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
-    lineHeight: 24,
+    lineHeight: 1.5,
     fontSize: 16
   ),
   functional-body03regular: (
     fontFamily: "DN Sans",
     fontWeight: Regular,
-    lineHeight: 28,
+    lineHeight: 1.5,
     fontSize: 20
   ),
   functional-body03semibold: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
-    lineHeight: 28,
+    lineHeight: 1.5,
     fontSize: 20
   ),
   functional-body03bold: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
-    lineHeight: 28,
+    lineHeight: 1.5,
     fontSize: 20
   ),
   functional-meta01regular: (
     fontFamily: "DN Sans",
     fontWeight: Regular,
     fontSize: 10,
-    lineHeight: 12
+    lineHeight: 1.12
   ),
   functional-meta01semibold: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
     fontSize: 10,
-    lineHeight: 12
+    lineHeight: 1.12
   ),
   functional-meta01bold: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
     fontSize: 10,
-    lineHeight: 12
+    lineHeight: 1.12
   ),
   functional-meta02regular: (
     fontFamily: "DN Sans",
     fontWeight: Regular,
-    lineHeight: 16,
+    lineHeight: 1.12,
     fontSize: 12
   ),
   functional-meta02semibold: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
-    lineHeight: 16,
+    lineHeight: 1.12,
     fontSize: 12
   ),
   functional-meta02bold: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
-    lineHeight: 16,
+    lineHeight: 1.12,
     fontSize: 12
   )
 );