@carbon/type 10.14.0 → 10.16.0

package/scss/_styles.scss

@@ -15,7 +15,7 @@
 $caption-01: (
   font-size: carbon--type-scale(1),
   font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(16px),
+  line-height: 1.34,
   letter-spacing: 0.32px,
 ) !default;
 
@@ -25,7 +25,7 @@ $caption-01: (
 $label-01: (
   font-size: carbon--type-scale(1),
   font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(16px),
+  line-height: 1.34,
   letter-spacing: 0.32px,
 ) !default;
 
@@ -34,7 +34,7 @@ $label-01: (
 /// @group @carbon/type
 $helper-text-01: (
   font-size: carbon--type-scale(1),
-  line-height: carbon--rem(16px),
+  line-height: 1.34,
   letter-spacing: 0.32px,
 ) !default;
 
@@ -44,7 +44,7 @@ $helper-text-01: (
 $body-short-01: (
   font-size: carbon--type-scale(2),
   font-weight: carbon--font-weight('regular'),
-  line-height: carbon--em(18px),
+  line-height: 1.29,
   letter-spacing: 0.16px,
 ) !default;
 
@@ -54,7 +54,7 @@ $body-short-01: (
 $body-long-01: (
   font-size: carbon--type-scale(2),
   font-weight: carbon--font-weight('regular'),
-  line-height: carbon--em(20px),
+  line-height: 1.43,
   letter-spacing: 0.16px,
 ) !default;
 
@@ -64,7 +64,7 @@ $body-long-01: (
 $body-short-02: (
   font-size: carbon--type-scale(3),
   font-weight: carbon--font-weight('regular'),
-  line-height: carbon--em(22px),
+  line-height: 1.375,
   letter-spacing: 0,
 ) !default;
 
@@ -74,7 +74,7 @@ $body-short-02: (
 $body-long-02: (
   font-size: carbon--type-scale(3),
   font-weight: carbon--font-weight('regular'),
-  line-height: carbon--em(24px),
+  line-height: 1.5,
   letter-spacing: 0,
 ) !default;
 
@@ -85,7 +85,7 @@ $code-01: (
   font-family: carbon--font-family('mono'),
   font-size: carbon--type-scale(1),
   font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(16px),
+  line-height: 1.34,
   letter-spacing: 0.32px,
 ) !default;
 
@@ -96,7 +96,7 @@ $code-02: (
   font-family: carbon--font-family('mono'),
   font-size: carbon--type-scale(2),
   font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(20px),
+  line-height: 1.43,
   letter-spacing: 0.32px,
 ) !default;
 
@@ -106,7 +106,7 @@ $code-02: (
 $heading-01: (
   font-size: carbon--type-scale(2),
   font-weight: carbon--font-weight('semibold'),
-  line-height: carbon--rem(18px),
+  line-height: 1.29,
   letter-spacing: 0.16px,
 ) !default;
 
@@ -121,7 +121,7 @@ $productive-heading-01: $heading-01 !default;
 $heading-02: (
   font-size: carbon--type-scale(3),
   font-weight: carbon--font-weight('semibold'),
-  line-height: carbon--rem(22px),
+  line-height: 1.375,
   letter-spacing: 0,
 ) !default;
 
@@ -136,7 +136,7 @@ $productive-heading-02: $heading-02 !default;
 $productive-heading-03: (
   font-size: carbon--type-scale(5),
   font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(28px),
+  line-height: 1.4,
   letter-spacing: 0,
 ) !default;
 
@@ -146,7 +146,7 @@ $productive-heading-03: (
 $productive-heading-04: (
   font-size: carbon--type-scale(7),
   font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(36px),
+  line-height: 1.29,
   letter-spacing: 0,
 ) !default;
 
@@ -156,7 +156,7 @@ $productive-heading-04: (
 $productive-heading-05: (
   font-size: carbon--type-scale(8),
   font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(40px),
+  line-height: 1.25,
   letter-spacing: 0,
 ) !default;
 
@@ -166,7 +166,8 @@ $productive-heading-05: (
 $productive-heading-06: (
   font-size: carbon--type-scale(8),
   font-weight: carbon--font-weight('light'),
-  line-height: carbon--rem(50px),
+  // Extra digit needed for precision in Chrome
+  line-height: 1.199,
   letter-spacing: 0,
 ) !default;
 
@@ -176,7 +177,7 @@ $productive-heading-06: (
 $productive-heading-07: (
   font-size: carbon--type-scale(10),
   font-weight: carbon--font-weight('light'),
-  line-height: carbon--rem(64px),
+  line-height: 1.19,
   letter-spacing: 0,
 ) !default;
 
@@ -186,7 +187,7 @@ $productive-heading-07: (
 $expressive-heading-01: map-merge(
   $heading-01,
   (
-    line-height: carbon--rem(20px),
+    line-height: 1.25,
   )
 ) !default;
 
@@ -196,7 +197,7 @@ $expressive-heading-01: map-merge(
 $expressive-heading-02: map-merge(
   $heading-02,
   (
-    line-height: carbon--rem(24px),
+    line-height: 1.5,
   )
 ) !default;
 
@@ -206,15 +207,16 @@ $expressive-heading-02: map-merge(
 $expressive-heading-03: (
   font-size: carbon--type-scale(5),
   font-weight: carbon--font-weight('regular'),
-  line-height: 140%,
+  line-height: 1.4,
   letter-spacing: 0,
   breakpoints: (
     xlg: (
       font-size: carbon--type-scale(5),
-      line-height: 125%,
+      line-height: 1.25,
     ),
     max: (
       font-size: carbon--type-scale(6),
+      line-height: 1.334,
     ),
   ),
 ) !default;
@@ -225,12 +227,12 @@ $expressive-heading-03: (
 $expressive-heading-04: (
   font-size: carbon--type-scale(7),
   font-weight: carbon--font-weight('regular'),
-  line-height: 129%,
+  line-height: 1.29,
   letter-spacing: 0,
   breakpoints: (
     xlg: (
       font-size: carbon--type-scale(7),
-      line-height: 125%,
+      line-height: 1.25,
     ),
     max: (
       font-size: carbon--type-scale(8),
@@ -244,25 +246,24 @@ $expressive-heading-04: (
 $expressive-heading-05: (
   font-size: carbon--type-scale(8),
   font-weight: carbon--font-weight('regular'),
-  line-height: 125%,
+  line-height: 1.25,
   letter-spacing: 0,
   breakpoints: (
     md: (
       font-size: carbon--type-scale(9),
       font-weight: carbon--font-weight('light'),
-      line-height: 122%,
+      line-height: 1.22,
     ),
     lg: (
       font-size: carbon--type-scale(10),
-      line-height: 119%,
+      line-height: 1.19,
     ),
     xlg: (
       font-size: carbon--type-scale(11),
-      line-height: 117%,
+      line-height: 1.17,
     ),
     max: (
       font-size: carbon--type-scale(13),
-      line-height: carbon--rem(70px),
     ),
   ),
 ) !default;
@@ -273,24 +274,23 @@ $expressive-heading-05: (
 $expressive-heading-06: (
   font-size: carbon--type-scale(8),
   font-weight: carbon--font-weight('semibold'),
-  line-height: 125%,
+  line-height: 1.25,
   letter-spacing: 0,
   breakpoints: (
     md: (
       font-size: carbon--type-scale(9),
-      line-height: 122%,
+      line-height: 1.22,
     ),
     lg: (
       font-size: carbon--type-scale(10),
-      line-height: 119%,
+      line-height: 1.19,
     ),
     xlg: (
       font-size: carbon--type-scale(11),
-      line-height: 117%,
+      line-height: 1.17,
     ),
     max: (
       font-size: carbon--type-scale(13),
-      line-height: carbon--rem(70px),
     ),
   ),
 ) !default;
@@ -301,16 +301,16 @@ $expressive-heading-06: (
 $expressive-paragraph-01: (
   font-size: carbon--type-scale(6),
   font-weight: carbon--font-weight('light'),
-  line-height: 125%,
+  line-height: 1.334,
   letter-spacing: 0,
   breakpoints: (
     lg: (
       font-size: carbon--type-scale(7),
-      line-height: 129%,
+      line-height: 1.29,
     ),
     max: (
       font-size: carbon--type-scale(8),
-      line-height: 125%,
+      line-height: 1.25,
     ),
   ),
 );
@@ -321,7 +321,7 @@ $expressive-paragraph-01: (
 $quotation-01: (
   font-size: carbon--type-scale(5),
   font-weight: carbon--font-weight('regular'),
-  line-height: 130%,
+  line-height: 1.3,
   letter-spacing: 0,
   breakpoints: (
     md: (
@@ -329,15 +329,15 @@ $quotation-01: (
     ),
     lg: (
       font-size: carbon--type-scale(6),
-      line-height: 125%,
+      line-height: 1.334,
     ),
     xlg: (
       font-size: carbon--type-scale(7),
-      line-height: 129%,
+      line-height: 1.29,
     ),
     max: (
       font-size: carbon--type-scale(8),
-      line-height: 125%,
+      line-height: 1.25,
     ),
   ),
 ) !default;
@@ -348,20 +348,20 @@ $quotation-01: (
 $quotation-02: (
   font-size: carbon--type-scale(8),
   font-weight: carbon--font-weight('light'),
-  line-height: 125%,
+  line-height: 1.25,
   letter-spacing: 0,
   breakpoints: (
     md: (
       font-size: carbon--type-scale(9),
-      line-height: 122%,
+      line-height: 1.22,
     ),
     lg: (
       font-size: carbon--type-scale(10),
-      line-height: 119%,
+      line-height: 1.19,
     ),
     xlg: (
       font-size: carbon--type-scale(11),
-      line-height: 117%,
+      line-height: 1.17,
     ),
     max: (
       font-size: carbon--type-scale(13),
@@ -375,7 +375,7 @@ $quotation-02: (
 $display-01: (
   font-size: carbon--type-scale(10),
   font-weight: carbon--font-weight('light'),
-  line-height: 119%,
+  line-height: 1.19,
   letter-spacing: 0,
   breakpoints: (
     md: (
@@ -386,11 +386,11 @@ $display-01: (
     ),
     xlg: (
       font-size: carbon--type-scale(13),
-      line-height: 117%,
+      line-height: 1.17,
     ),
     max: (
       font-size: carbon--type-scale(15),
-      line-height: 113%,
+      line-height: 1.13,
     ),
   ),
 ) !default;
@@ -401,7 +401,7 @@ $display-01: (
 $display-02: (
   font-size: carbon--type-scale(10),
   font-weight: carbon--font-weight('semibold'),
-  line-height: 119%,
+  line-height: 1.19,
   letter-spacing: 0,
   breakpoints: (
     md: (
@@ -412,11 +412,11 @@ $display-02: (
     ),
     xlg: (
       font-size: carbon--type-scale(13),
-      line-height: 116%,
+      line-height: 1.16,
     ),
     max: (
       font-size: carbon--type-scale(15),
-      line-height: 113%,
+      line-height: 1.13,
     ),
   ),
 ) !default;
@@ -427,26 +427,26 @@ $display-02: (
 $display-03: (
   font-size: carbon--type-scale(10),
   font-weight: carbon--font-weight('light'),
-  line-height: 119%,
+  line-height: 1.19,
   letter-spacing: 0,
   breakpoints: (
     md: (
       font-size: carbon--type-scale(14),
-      line-height: 115%,
+      line-height: 1.15,
     ),
     lg: (
       font-size: carbon--type-scale(17),
-      line-height: 111%,
+      line-height: 1.11,
       letter-spacing: -0.64px,
     ),
     xlg: (
       font-size: carbon--type-scale(20),
-      line-height: 107%,
+      line-height: 1.07,
       letter-spacing: -0.64px,
     ),
     max: (
       font-size: carbon--type-scale(23),
-      line-height: 105%,
+      line-height: 1.05,
       letter-spacing: -0.96px,
     ),
   ),
@@ -458,26 +458,26 @@ $display-03: (
 $display-04: (
   font-size: carbon--type-scale(10),
   font-weight: carbon--font-weight('semibold'),
-  line-height: 119%,
+  line-height: 1.19,
   letter-spacing: 0,
   breakpoints: (
     md: (
       font-size: carbon--type-scale(14),
-      line-height: 115%,
+      line-height: 1.15,
     ),
     lg: (
       font-size: carbon--type-scale(17),
-      line-height: 111%,
+      line-height: 1.11,
       letter-spacing: -0.64px,
     ),
     xlg: (
       font-size: carbon--type-scale(20),
-      line-height: 107%,
+      line-height: 1.07,
       letter-spacing: -0.64px,
     ),
     max: (
       font-size: carbon--type-scale(23),
-      line-height: 105%,
+      line-height: 1.05,
       letter-spacing: -0.96px,
     ),
   ),

package/src/__tests__/__snapshots__/styles-test.js.snap

@@ -3,35 +3,35 @@
 exports[`styles bodyLong01 should be printable 1`] = `
 "font-size: 0.875rem;
 font-weight: 400;
-line-height: 1.25rem;
+line-height: 1.43;
 letter-spacing: 0.16px;"
 `;
 
 exports[`styles bodyLong02 should be printable 1`] = `
 "font-size: 1rem;
 font-weight: 400;
-line-height: 1.5rem;
+line-height: 1.5;
 letter-spacing: 0;"
 `;
 
 exports[`styles bodyShort01 should be printable 1`] = `
 "font-size: 0.875rem;
 font-weight: 400;
-line-height: 1.125rem;
+line-height: 1.29;
 letter-spacing: 0.16px;"
 `;
 
 exports[`styles bodyShort02 should be printable 1`] = `
 "font-size: 1rem;
 font-weight: 400;
-line-height: 1.375rem;
+line-height: 1.375;
 letter-spacing: 0;"
 `;
 
 exports[`styles caption01 should be printable 1`] = `
 "font-size: 0.75rem;
 font-weight: 400;
-line-height: 1rem;
+line-height: 1.34;
 letter-spacing: 0.32px;"
 `;
 
@@ -39,7 +39,7 @@ exports[`styles code01 should be printable 1`] = `
 "font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
 font-size: 0.75rem;
 font-weight: 400;
-line-height: 1rem;
+line-height: 1.34;
 letter-spacing: 0.32px;"
 `;
 
@@ -47,84 +47,84 @@ exports[`styles code02 should be printable 1`] = `
 "font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
 font-size: 0.875rem;
 font-weight: 400;
-line-height: 1.25rem;
+line-height: 1.43;
 letter-spacing: 0.32px;"
 `;
 
 exports[`styles display01 should be printable 1`] = `
 "font-size: 2.625rem;
 font-weight: 300;
-line-height: 119%;
+line-height: 1.19;
 letter-spacing: 0;"
 `;
 
 exports[`styles display02 should be printable 1`] = `
 "font-size: 2.625rem;
 font-weight: 600;
-line-height: 119%;
+line-height: 1.19;
 letter-spacing: 0;"
 `;
 
 exports[`styles display03 should be printable 1`] = `
 "font-size: 2.625rem;
 font-weight: 300;
-line-height: 119%;
+line-height: 1.19;
 letter-spacing: 0;"
 `;
 
 exports[`styles display04 should be printable 1`] = `
 "font-size: 2.625rem;
 font-weight: 600;
-line-height: 119%;
+line-height: 1.19;
 letter-spacing: 0;"
 `;
 
 exports[`styles expressiveHeading01 should be printable 1`] = `
 "font-size: 0.875rem;
 font-weight: 600;
-line-height: 1.25rem;
+line-height: 1.25;
 letter-spacing: 0.16px;"
 `;
 
 exports[`styles expressiveHeading02 should be printable 1`] = `
 "font-size: 1rem;
 font-weight: 600;
-line-height: 1.5rem;
+line-height: 1.5;
 letter-spacing: 0;"
 `;
 
 exports[`styles expressiveHeading03 should be printable 1`] = `
 "font-size: 1.25rem;
 font-weight: 400;
-line-height: 140%;
+line-height: 1.4;
 letter-spacing: 0;"
 `;
 
 exports[`styles expressiveHeading04 should be printable 1`] = `
 "font-size: 1.75rem;
 font-weight: 400;
-line-height: 129%;
+line-height: 1.29;
 letter-spacing: 0;"
 `;
 
 exports[`styles expressiveHeading05 should be printable 1`] = `
 "font-size: 2rem;
 font-weight: 400;
-line-height: 125%;
+line-height: 1.25;
 letter-spacing: 0;"
 `;
 
 exports[`styles expressiveHeading06 should be printable 1`] = `
 "font-size: 2rem;
 font-weight: 600;
-line-height: 125%;
+line-height: 1.25;
 letter-spacing: 0;"
 `;
 
 exports[`styles expressiveParagraph01 should be printable 1`] = `
 "font-size: 1.5rem;
 font-weight: 300;
-line-height: 125%;
+line-height: 1.334;
 letter-spacing: 0;
 lg: [object Object];
 max: [object Object];"
@@ -133,89 +133,89 @@ max: [object Object];"
 exports[`styles heading01 should be printable 1`] = `
 "font-size: 0.875rem;
 font-weight: 600;
-line-height: 1.125rem;
+line-height: 1.29;
 letter-spacing: 0.16px;"
 `;
 
 exports[`styles heading02 should be printable 1`] = `
 "font-size: 1rem;
 font-weight: 600;
-line-height: 1.375rem;
+line-height: 1.375;
 letter-spacing: 0;"
 `;
 
 exports[`styles helperText01 should be printable 1`] = `
 "font-size: 0.75rem;
-line-height: 1rem;
+line-height: 1.34;
 letter-spacing: 0.32px;"
 `;
 
 exports[`styles label01 should be printable 1`] = `
 "font-size: 0.75rem;
 font-weight: 400;
-line-height: 1rem;
+line-height: 1.34;
 letter-spacing: 0.32px;"
 `;
 
 exports[`styles productiveHeading01 should be printable 1`] = `
 "font-size: 0.875rem;
 font-weight: 600;
-line-height: 1.125rem;
+line-height: 1.29;
 letter-spacing: 0.16px;"
 `;
 
 exports[`styles productiveHeading02 should be printable 1`] = `
 "font-size: 1rem;
 font-weight: 600;
-line-height: 1.375rem;
+line-height: 1.375;
 letter-spacing: 0;"
 `;
 
 exports[`styles productiveHeading03 should be printable 1`] = `
 "font-size: 1.25rem;
 font-weight: 400;
-line-height: 1.75rem;
+line-height: 1.4;
 letter-spacing: 0;"
 `;
 
 exports[`styles productiveHeading04 should be printable 1`] = `
 "font-size: 1.75rem;
 font-weight: 400;
-line-height: 2.25rem;
+line-height: 1.29;
 letter-spacing: 0;"
 `;
 
 exports[`styles productiveHeading05 should be printable 1`] = `
 "font-size: 2rem;
 font-weight: 400;
-line-height: 2.5rem;
+line-height: 1.25;
 letter-spacing: 0;"
 `;
 
 exports[`styles productiveHeading06 should be printable 1`] = `
 "font-size: 2.625rem;
 font-weight: 300;
-line-height: 3.125rem;
+line-height: 1.199;
 letter-spacing: 0;"
 `;
 
 exports[`styles productiveHeading07 should be printable 1`] = `
 "font-size: 3.375rem;
 font-weight: 300;
-line-height: 4rem;
+line-height: 1.19;
 letter-spacing: 0;"
 `;
 
 exports[`styles quotation01 should be printable 1`] = `
 "font-size: 1.25rem;
 font-weight: 400;
-line-height: 130%;
+line-height: 1.3;
 letter-spacing: 0;"
 `;
 
 exports[`styles quotation02 should be printable 1`] = `
 "font-size: 2rem;
 font-weight: 300;
-line-height: 125%;
+line-height: 1.25;
 letter-spacing: 0;"
 `;