@carbon/charts 0.41.48 → 0.41.52

package/styles/vendor/@carbon/type/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,60 +95,61 @@ export const productiveHeading02 = heading02;
 export const productiveHeading03 = {
   fontSize: rem(scale[4]),
   fontWeight: fontWeights.regular,
-  lineHeight: rem(26),
+  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: '130%',
+  lineHeight: 1.4,
   letterSpacing: 0,
   breakpoints: {
     xlg: {
       fontSize: rem(scale[4]),
-      lineHeight: '125%',
+      lineHeight: 1.25,
     },
     max: {
       fontSize: rem(scale[5]),
+      lineHeight: 1.334,
     },
   },
 };
@@ -156,12 +157,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 +173,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 +205,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 +237,24 @@ export const expressiveHeading06 = {
 export const expressiveParagraph01 = {
   fontSize: rem(scale[5]),
   fontWeight: fontWeights.light,
-  lineHeight: '125%',
+  lineHeight: 1.334,
   letterSpacing: 0,
-  lg: {
-    fontSize: rem(scale[6]),
-    lineHeight: '129%',
-  },
-  max: {
-    fontSize: rem(scale[7]),
-    lineHeight: '125%',
+  breakpoints: {
+    lg: {
+      fontSize: rem(scale[6]),
+      lineHeight: 1.29,
+    },
+    max: {
+      fontSize: rem(scale[7]),
+      lineHeight: 1.25,
+    },
   },
 };
 
 export const quotation01 = {
   fontSize: rem(scale[4]),
   fontWeight: fontWeights.regular,
-  lineHeight: '130%',
+  lineHeight: 1.3,
   letterSpacing: 0,
   breakpoints: {
     md: {
@@ -264,19 +265,19 @@ export const quotation01 = {
     lg: {
       fontSize: rem(scale[5]),
       fontWeight: fontWeights.regular,
-      lineHeight: '125%',
+      lineHeight: 1.334,
       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 +286,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 +310,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 +321,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 +333,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 +344,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 +356,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 +383,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),
     },
   },

package/styles/vendor/@carbon/type/src/tokens.js

@@ -5,36 +5,69 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+// Unstable tokens
+export const caption01 = 'caption01';
+export const label01 = 'label01';
+export const helperText01 = 'helperText01';
+export const bodyShort01 = 'bodyShort01';
+export const bodyLong01 = 'bodyLong01';
+export const bodyShort02 = 'bodyShort02';
+export const bodyLong02 = 'bodyLong02';
+export const code01 = 'code01';
+export const code02 = 'code02';
+export const heading01 = 'heading01';
+export const productiveHeading01 = 'productiveHeading01';
+export const heading02 = 'heading02';
+export const productiveHeading02 = 'productiveHeading02';
+export const productiveHeading03 = 'productiveHeading03';
+export const productiveHeading04 = 'productiveHeading04';
+export const productiveHeading05 = 'productiveHeading05';
+export const productiveHeading06 = 'productiveHeading06';
+export const productiveHeading07 = 'productiveHeading07';
+export const expressiveHeading01 = 'expressiveHeading01';
+export const expressiveHeading02 = 'expressiveHeading02';
+export const expressiveHeading03 = 'expressiveHeading03';
+export const expressiveHeading04 = 'expressiveHeading04';
+export const expressiveHeading05 = 'expressiveHeading05';
+export const expressiveHeading06 = 'expressiveHeading06';
+export const expressiveParagraph01 = 'expressiveParagraph01';
+export const quotation01 = 'quotation01';
+export const quotation02 = 'quotation02';
+export const display01 = 'display01';
+export const display02 = 'display02';
+export const display03 = 'display03';
+export const display04 = 'display04';
+
 export const unstable_tokens = [
-  'caption01',
-  'label01',
-  'helperText01',
-  'bodyShort01',
-  'bodyLong01',
-  'bodyShort02',
-  'bodyLong02',
-  'code01',
-  'code02',
-  'heading01',
-  'productiveHeading01',
-  'heading02',
-  'productiveHeading02',
-  'productiveHeading03',
-  'productiveHeading04',
-  'productiveHeading05',
-  'productiveHeading06',
-  'productiveHeading07',
-  'expressiveHeading01',
-  'expressiveHeading02',
-  'expressiveHeading03',
-  'expressiveHeading04',
-  'expressiveHeading05',
-  'expressiveHeading06',
-  'expressiveParagraph01',
-  'quotation01',
-  'quotation02',
-  'display01',
-  'display02',
-  'display03',
-  'display04',
+  caption01,
+  label01,
+  helperText01,
+  bodyShort01,
+  bodyLong01,
+  bodyShort02,
+  bodyLong02,
+  code01,
+  code02,
+  heading01,
+  productiveHeading01,
+  heading02,
+  productiveHeading02,
+  productiveHeading03,
+  productiveHeading04,
+  productiveHeading05,
+  productiveHeading06,
+  productiveHeading07,
+  expressiveHeading01,
+  expressiveHeading02,
+  expressiveHeading03,
+  expressiveHeading04,
+  expressiveHeading05,
+  expressiveHeading06,
+  expressiveParagraph01,
+  quotation01,
+  quotation02,
+  display01,
+  display02,
+  display03,
+  display04,
 ];