@carbon/type 10.13.0 → 10.15.0

package/src/styles.js

@@ -13,48 +13,48 @@ import { scale } from './scale';
 export const caption01 = {
   fontSize: rem(scale[0]),
   fontWeight: fontWeights.regular,
-  lineHeight: rem(16),
+  lineHeight: 1.34,
   letterSpacing: px(0.32),
 };
 
 export const label01 = {
   fontSize: rem(scale[0]),
   fontWeight: fontWeights.regular,
-  lineHeight: rem(16),
+  lineHeight: 1.34,
   letterSpacing: px(0.32),
 };
 
 export const helperText01 = {
   fontSize: rem(scale[0]),
-  lineHeight: rem(16),
+  lineHeight: 1.34,
   letterSpacing: px(0.32),
 };
 
 export const bodyShort01 = {
   fontSize: rem(scale[1]),
   fontWeight: fontWeights.regular,
-  lineHeight: rem(18),
+  lineHeight: 1.29,
   letterSpacing: px(0.16),
 };
 
 export const bodyLong01 = {
   fontSize: rem(scale[1]),
   fontWeight: fontWeights.regular,
-  lineHeight: rem(20),
+  lineHeight: 1.43,
   letterSpacing: px(0.16),
 };
 
 export const bodyShort02 = {
   fontSize: rem(scale[2]),
   fontWeight: fontWeights.regular,
-  lineHeight: rem(22),
+  lineHeight: 1.375,
   letterSpacing: 0,
 };
 
 export const bodyLong02 = {
   fontSize: rem(scale[2]),
   fontWeight: fontWeights.regular,
-  lineHeight: rem(24),
+  lineHeight: 1.5,
   letterSpacing: 0,
 };
 
@@ -62,7 +62,7 @@ export const code01 = {
   fontFamily: fontFamilies.mono,
   fontSize: rem(scale[0]),
   fontWeight: fontWeights.regular,
-  lineHeight: rem(16),
+  lineHeight: 1.34,
   letterSpacing: px(0.32),
 };
 
@@ -70,14 +70,14 @@ export const code02 = {
   fontFamily: fontFamilies.mono,
   fontSize: rem(scale[1]),
   fontWeight: fontWeights.regular,
-  lineHeight: rem(20),
+  lineHeight: 1.43,
   letterSpacing: px(0.32),
 };
 
 export const heading01 = {
   fontSize: rem(scale[1]),
   fontWeight: fontWeights.semibold,
-  lineHeight: rem(18),
+  lineHeight: 1.29,
   letterSpacing: px(0.16),
 };
 
@@ -86,7 +86,7 @@ export const productiveHeading01 = heading01;
 export const heading02 = {
   fontSize: rem(scale[2]),
   fontWeight: fontWeights.semibold,
-  lineHeight: rem(22),
+  lineHeight: 1.375,
   letterSpacing: 0,
 };
 
@@ -95,57 +95,57 @@ export const productiveHeading02 = heading02;
 export const productiveHeading03 = {
   fontSize: rem(scale[4]),
   fontWeight: fontWeights.regular,
-  lineHeight: rem(28),
+  lineHeight: 1.4,
   letterSpacing: 0,
 };
 
 export const productiveHeading04 = {
   fontSize: rem(scale[6]),
   fontWeight: fontWeights.regular,
-  lineHeight: rem(36),
+  lineHeight: 1.29,
   letterSpacing: 0,
 };
 
 export const productiveHeading05 = {
   fontSize: rem(scale[7]),
   fontWeight: fontWeights.regular,
-  lineHeight: rem(40),
+  lineHeight: 1.25,
   letterSpacing: 0,
 };
 
 export const productiveHeading06 = {
   fontSize: rem(scale[9]),
   fontWeight: fontWeights.light,
-  lineHeight: rem(50),
+  lineHeight: 1.199,
   letterSpacing: 0,
 };
 
 export const productiveHeading07 = {
   fontSize: rem(scale[11]),
   fontWeight: fontWeights.light,
-  lineHeight: rem(64),
+  lineHeight: 1.19,
   letterSpacing: 0,
 };
 
 export const expressiveHeading01 = {
   ...heading01,
-  lineHeight: rem(20),
+  lineHeight: 1.25,
 };
 
 export const expressiveHeading02 = {
   ...heading02,
-  lineHeight: rem(24),
+  lineHeight: 1.5,
 };
 
 export const expressiveHeading03 = {
   fontSize: rem(scale[4]),
   fontWeight: fontWeights.regular,
-  lineHeight: '140%',
+  lineHeight: 1.4,
   letterSpacing: 0,
   breakpoints: {
     xlg: {
       fontSize: rem(scale[4]),
-      lineHeight: '125%',
+      lineHeight: 1.25,
     },
     max: {
       fontSize: rem(scale[5]),
@@ -156,12 +156,12 @@ export const expressiveHeading03 = {
 export const expressiveHeading04 = {
   fontSize: rem(scale[6]),
   fontWeight: fontWeights.regular,
-  lineHeight: '129%',
+  lineHeight: 1.29,
   letterSpacing: 0,
   breakpoints: {
     xlg: {
       fontSize: rem(scale[6]),
-      lineHeight: '125%',
+      lineHeight: 1.25,
     },
     max: {
       fontSize: rem(scale[7]),
@@ -172,31 +172,30 @@ export const expressiveHeading04 = {
 export const expressiveHeading05 = {
   fontSize: rem(scale[7]),
   fontWeight: fontWeights.regular,
-  lineHeight: '125%',
+  lineHeight: 1.25,
   letterSpacing: 0,
   breakpoints: {
     md: {
       fontSize: rem(scale[8]),
       fontWeight: fontWeights.light,
-      lineHeight: '122%',
+      lineHeight: 1.22,
       letterSpacing: 0,
     },
     lg: {
       fontSize: rem(scale[9]),
       fontWeight: fontWeights.light,
-      lineHeight: '119%',
+      lineHeight: 1.19,
       letterSpacing: 0,
     },
     xlg: {
       fontSize: rem(scale[10]),
       fontWeight: fontWeights.light,
-      lineHeight: '117%',
+      lineHeight: 1.17,
       letterSpacing: 0,
     },
     max: {
       fontSize: rem(scale[12]),
       fontWeight: fontWeights.light,
-      lineHeight: rem(70),
       letterSpacing: 0,
     },
   },
@@ -205,31 +204,30 @@ export const expressiveHeading05 = {
 export const expressiveHeading06 = {
   fontSize: rem(scale[7]),
   fontWeight: fontWeights.semibold,
-  lineHeight: '125%',
+  lineHeight: 1.25,
   letterSpacing: 0,
   breakpoints: {
     md: {
       fontSize: rem(scale[8]),
       fontWeight: fontWeights.semibold,
-      lineHeight: '122%',
+      lineHeight: 1.22,
       letterSpacing: 0,
     },
     lg: {
       fontSize: rem(scale[9]),
       fontWeight: fontWeights.semibold,
-      lineHeight: '119%',
+      lineHeight: 1.19,
       letterSpacing: 0,
     },
     xlg: {
       fontSize: rem(scale[10]),
       fontWeight: fontWeights.semibold,
-      lineHeight: '117%',
+      lineHeight: 1.17,
       letterSpacing: 0,
     },
     max: {
       fontSize: rem(scale[12]),
       fontWeight: fontWeights.semibold,
-      lineHeight: rem(70),
       letterSpacing: 0,
     },
   },
@@ -238,22 +236,22 @@ export const expressiveHeading06 = {
 export const expressiveParagraph01 = {
   fontSize: rem(scale[5]),
   fontWeight: fontWeights.light,
-  lineHeight: '125%',
+  lineHeight: 1.25,
   letterSpacing: 0,
   lg: {
     fontSize: rem(scale[6]),
-    lineHeight: '129%',
+    lineHeight: 1.29,
   },
   max: {
     fontSize: rem(scale[7]),
-    lineHeight: '125%',
+    lineHeight: 1.25,
   },
 };
 
 export const quotation01 = {
   fontSize: rem(scale[4]),
   fontWeight: fontWeights.regular,
-  lineHeight: '130%',
+  lineHeight: 1.3,
   letterSpacing: 0,
   breakpoints: {
     md: {
@@ -264,19 +262,19 @@ export const quotation01 = {
     lg: {
       fontSize: rem(scale[5]),
       fontWeight: fontWeights.regular,
-      lineHeight: '125%',
+      lineHeight: 1.25,
       letterSpacing: 0,
     },
     xlg: {
       fontSize: rem(scale[6]),
       fontWeight: fontWeights.regular,
-      lineHeight: '129%',
+      lineHeight: 1.29,
       letterSpacing: 0,
     },
     max: {
       fontSize: rem(scale[7]),
       fontWeight: fontWeights.regular,
-      lineHeight: '125%',
+      lineHeight: 1.25,
       letterSpacing: 0,
     },
   },
@@ -285,20 +283,20 @@ export const quotation01 = {
 export const quotation02 = {
   fontSize: rem(scale[7]),
   fontWeight: fontWeights.light,
-  lineHeight: '125%',
+  lineHeight: 1.25,
   letterSpacing: 0,
   breakpoints: {
     md: {
       fontSize: rem(scale[8]),
-      lineHeight: '122%',
+      lineHeight: 1.22,
     },
     lg: {
       fontSize: rem(scale[9]),
-      lineHeight: '119%',
+      lineHeight: 1.19,
     },
     xlg: {
       fontSize: rem(scale[10]),
-      lineHeight: '117%',
+      lineHeight: 1.17,
     },
     max: {
       fontSize: rem(scale[12]),
@@ -309,7 +307,7 @@ export const quotation02 = {
 export const display01 = {
   fontSize: rem(scale[9]),
   fontWeight: fontWeights.light,
-  lineHeight: '119%',
+  lineHeight: 1.19,
   letterSpacing: 0,
   breakpoints: {
     md: {
@@ -320,11 +318,11 @@ export const display01 = {
     },
     xlg: {
       fontSize: rem(scale[12]),
-      lineHeight: '117%',
+      lineHeight: 1.17,
     },
     max: {
       fontSize: rem(scale[14]),
-      lineHeight: '113%',
+      lineHeight: 1.13,
     },
   },
 };
@@ -332,7 +330,7 @@ export const display01 = {
 export const display02 = {
   fontSize: rem(scale[9]),
   fontWeight: fontWeights.semibold,
-  lineHeight: '119%',
+  lineHeight: 1.19,
   letterSpacing: 0,
   breakpoints: {
     md: {
@@ -343,11 +341,11 @@ export const display02 = {
     },
     xlg: {
       fontSize: rem(scale[12]),
-      lineHeight: '116%',
+      lineHeight: 1.16,
     },
     max: {
       fontSize: rem(scale[14]),
-      lineHeight: '113%',
+      lineHeight: 1.13,
     },
   },
 };
@@ -355,25 +353,25 @@ export const display02 = {
 export const display03 = {
   fontSize: rem(scale[9]),
   fontWeight: fontWeights.light,
-  lineHeight: '119%',
+  lineHeight: 1.19,
   letterSpacing: 0,
   breakpoints: {
     md: {
       fontSize: rem(scale[13]),
-      lineHeight: '115%',
+      lineHeight: 1.15,
     },
     lg: {
       fontSize: rem(scale[16]),
-      lineHeight: '111%',
+      lineHeight: 1.11,
       letterSpacing: px(-0.64),
     },
     xlg: {
       fontSize: rem(scale[19]),
-      lineHeight: '107%',
+      lineHeight: 1.07,
     },
     max: {
       fontSize: rem(scale[22]),
-      lineHeight: '105%',
+      lineHeight: 1.05,
       letterSpacing: px(-0.96),
     },
   },
@@ -382,26 +380,26 @@ export const display03 = {
 export const display04 = {
   fontSize: rem(scale[9]),
   fontWeight: fontWeights.semibold,
-  lineHeight: '119%',
+  lineHeight: 1.19,
   letterSpacing: 0,
   breakpoints: {
     md: {
       fontSize: rem(scale[13]),
-      lineHeight: '115%',
+      lineHeight: 1.15,
     },
     lg: {
       fontSize: rem(scale[16]),
-      lineHeight: '111%',
+      lineHeight: 1.11,
       letterSpacing: px(-0.64),
     },
     xlg: {
       fontSize: rem(scale[19]),
-      lineHeight: '107%',
+      lineHeight: 1.07,
       letterSpacing: px(-0.64),
     },
     max: {
       fontSize: rem(scale[22]),
-      lineHeight: '105%',
+      lineHeight: 1.05,
       letterSpacing: px(-0.96),
     },
   },