@carbon/type 10.34.0 → 10.37.0-rc.0

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

@@ -1,9 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`styles body01 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 400;
+line-height: 1.42857;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles body02 should be printable 1`] = `
+"font-size: 1rem;
+font-weight: 400;
+line-height: 1.5;
+letter-spacing: 0;"
+`;
+
+exports[`styles bodyCompact01 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 400;
+line-height: 1.28572;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles bodyCompact02 should be printable 1`] = `
+"font-size: 1rem;
+font-weight: 400;
+line-height: 1.375;
+letter-spacing: 0;"
+`;
+
 exports[`styles bodyLong01 should be printable 1`] = `
 "font-size: 0.875rem;
 font-weight: 400;
-line-height: 1.43;
+line-height: 1.42857;
 letter-spacing: 0.16px;"
 `;
 
@@ -17,7 +45,7 @@ letter-spacing: 0;"
 exports[`styles bodyShort01 should be printable 1`] = `
 "font-size: 0.875rem;
 font-weight: 400;
-line-height: 1.29;
+line-height: 1.28572;
 letter-spacing: 0.16px;"
 `;
 
@@ -31,14 +59,14 @@ letter-spacing: 0;"
 exports[`styles caption01 should be printable 1`] = `
 "font-size: 0.75rem;
 font-weight: 400;
-line-height: 1.34;
+line-height: 1.33333;
 letter-spacing: 0.32px;"
 `;
 
 exports[`styles caption02 should be printable 1`] = `
 "font-size: 0.875rem;
 font-weight: 400;
-line-height: 1.29;
+line-height: 1.28572;
 letter-spacing: 0.32px;"
 `;
 
@@ -46,7 +74,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: 1.34;
+line-height: 1.33333;
 letter-spacing: 0.32px;"
 `;
 
@@ -54,7 +82,7 @@ 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.43;
+line-height: 1.42857;
 letter-spacing: 0.32px;"
 `;
 
@@ -110,7 +138,7 @@ letter-spacing: 0;"
 exports[`styles expressiveHeading04 should be printable 1`] = `
 "font-size: 1.75rem;
 font-weight: 400;
-line-height: 1.29;
+line-height: 1.28572;
 letter-spacing: 0;"
 `;
 
@@ -135,50 +163,192 @@ line-height: 1.334;
 letter-spacing: 0;"
 `;
 
+exports[`styles fluidDisplay01 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 300;
+line-height: 1.19;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidDisplay02 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 600;
+line-height: 1.19;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidDisplay03 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 300;
+line-height: 1.19;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidDisplay04 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 600;
+line-height: 1.19;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidHeading03 should be printable 1`] = `
+"font-size: 1.25rem;
+font-weight: 400;
+line-height: 1.4;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidHeading04 should be printable 1`] = `
+"font-size: 1.75rem;
+font-weight: 400;
+line-height: 1.28572;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidHeading05 should be printable 1`] = `
+"font-size: 2rem;
+font-weight: 400;
+line-height: 1.25;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidHeading06 should be printable 1`] = `
+"font-size: 2rem;
+font-weight: 600;
+line-height: 1.25;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidParagraph01 should be printable 1`] = `
+"font-size: 1.5rem;
+font-weight: 300;
+line-height: 1.334;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidQuotation01 should be printable 1`] = `
+"font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+font-size: 1.25rem;
+font-weight: 400;
+line-height: 1.3;
+letter-spacing: 0;"
+`;
+
+exports[`styles fluidQuotation02 should be printable 1`] = `
+"font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+font-size: 2rem;
+font-weight: 300;
+line-height: 1.25;
+letter-spacing: 0;"
+`;
+
 exports[`styles heading01 should be printable 1`] = `
 "font-size: 0.875rem;
 font-weight: 600;
-line-height: 1.29;
+line-height: 1.42857;
 letter-spacing: 0.16px;"
 `;
 
 exports[`styles heading02 should be printable 1`] = `
 "font-size: 1rem;
 font-weight: 600;
+line-height: 1.5;
+letter-spacing: 0;"
+`;
+
+exports[`styles heading03 should be printable 1`] = `
+"font-size: 1.25rem;
+font-weight: 400;
+line-height: 1.4;
+letter-spacing: 0;"
+`;
+
+exports[`styles heading04 should be printable 1`] = `
+"font-size: 1.75rem;
+font-weight: 400;
+line-height: 1.28572;
+letter-spacing: 0;"
+`;
+
+exports[`styles heading05 should be printable 1`] = `
+"font-size: 2rem;
+font-weight: 400;
+line-height: 1.25;
+letter-spacing: 0;"
+`;
+
+exports[`styles heading06 should be printable 1`] = `
+"font-size: 2.625rem;
+font-weight: 300;
+line-height: 1.199;
+letter-spacing: 0;"
+`;
+
+exports[`styles heading07 should be printable 1`] = `
+"font-size: 3.375rem;
+font-weight: 300;
+line-height: 1.199;
+letter-spacing: 0;"
+`;
+
+exports[`styles headingCompact01 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 600;
+line-height: 1.28572;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles headingCompact02 should be printable 1`] = `
+"font-size: 1rem;
+font-weight: 600;
 line-height: 1.375;
 letter-spacing: 0;"
 `;
 
 exports[`styles helperText01 should be printable 1`] = `
 "font-size: 0.75rem;
-line-height: 1.34;
+line-height: 1.33333;
 letter-spacing: 0.32px;"
 `;
 
 exports[`styles helperText02 should be printable 1`] = `
 "font-size: 0.875rem;
-line-height: 1.29;
-letter-spacing: 0.32px;"
+line-height: 1.28572;
+letter-spacing: 0.16px;"
 `;
 
 exports[`styles label01 should be printable 1`] = `
 "font-size: 0.75rem;
 font-weight: 400;
-line-height: 1.34;
+line-height: 1.33333;
 letter-spacing: 0.32px;"
 `;
 
 exports[`styles label02 should be printable 1`] = `
 "font-size: 0.875rem;
 font-weight: 400;
-line-height: 1.29;
+line-height: 1.28572;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles legal01 should be printable 1`] = `
+"font-size: 0.75rem;
+font-weight: 400;
+line-height: 1.33333;
 letter-spacing: 0.32px;"
 `;
 
+exports[`styles legal02 should be printable 1`] = `
+"font-size: 0.875rem;
+font-weight: 400;
+line-height: 1.28572;
+letter-spacing: 0.16px;"
+`;
+
 exports[`styles productiveHeading01 should be printable 1`] = `
 "font-size: 0.875rem;
 font-weight: 600;
-line-height: 1.29;
+line-height: 1.28572;
 letter-spacing: 0.16px;"
 `;
 
@@ -199,7 +369,7 @@ letter-spacing: 0;"
 exports[`styles productiveHeading04 should be printable 1`] = `
 "font-size: 1.75rem;
 font-weight: 400;
-line-height: 1.29;
+line-height: 1.28572;
 letter-spacing: 0;"
 `;
 
@@ -220,19 +390,21 @@ letter-spacing: 0;"
 exports[`styles productiveHeading07 should be printable 1`] = `
 "font-size: 3.375rem;
 font-weight: 300;
-line-height: 1.19;
+line-height: 1.199;
 letter-spacing: 0;"
 `;
 
 exports[`styles quotation01 should be printable 1`] = `
-"font-size: 1.25rem;
+"font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+font-size: 1.25rem;
 font-weight: 400;
 line-height: 1.3;
 letter-spacing: 0;"
 `;
 
 exports[`styles quotation02 should be printable 1`] = `
-"font-size: 2rem;
+"font-family: 'IBM Plex Serif', 'Georgia', Times, serif;
+font-size: 2rem;
 font-weight: 300;
 line-height: 1.25;
 letter-spacing: 0;"

package/src/__tests__/exports-test.js

@@ -12,53 +12,77 @@ import * as CarbonType from '../';
 describe('type', () => {
   it('should export type helpers', () => {
     expect(Object.keys(CarbonType)).toMatchInlineSnapshot(`
-      Array [
-        "fontFamilies",
-        "fontFamily",
-        "fontWeights",
-        "fontWeight",
-        "print",
-        "reset",
-        "getTypeSize",
-        "scale",
-        "fluid",
-        "unstable_tokens",
-        "styles",
-        "caption01",
-        "caption02",
-        "label01",
-        "label02",
-        "helperText01",
-        "helperText02",
-        "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",
-      ]
-    `);
+Array [
+  "fontFamilies",
+  "fontFamily",
+  "fontWeights",
+  "fontWeight",
+  "print",
+  "reset",
+  "getTypeSize",
+  "scale",
+  "fluid",
+  "unstable_tokens",
+  "styles",
+  "caption01",
+  "caption02",
+  "label01",
+  "label02",
+  "helperText01",
+  "helperText02",
+  "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",
+  "legal01",
+  "legal02",
+  "bodyCompact01",
+  "bodyCompact02",
+  "body01",
+  "body02",
+  "headingCompact01",
+  "headingCompact02",
+  "heading03",
+  "heading04",
+  "heading05",
+  "heading06",
+  "heading07",
+  "fluidHeading03",
+  "fluidHeading04",
+  "fluidHeading05",
+  "fluidHeading06",
+  "fluidParagraph01",
+  "fluidQuotation01",
+  "fluidQuotation02",
+  "fluidDisplay01",
+  "fluidDisplay02",
+  "fluidDisplay03",
+  "fluidDisplay04",
+]
+`);
   });
 });

package/src/styles.js

@@ -13,54 +13,54 @@ import { scale } from './scale';
 export const caption01 = {
   fontSize: rem(scale[0]),
   fontWeight: fontWeights.regular,
-  lineHeight: 1.34,
+  lineHeight: 1.33333,
   letterSpacing: px(0.32),
 };
 
 export const caption02 = {
   fontSize: rem(scale[1]),
   fontWeight: fontWeights.regular,
-  lineHeight: 1.29,
+  lineHeight: 1.28572,
   letterSpacing: px(0.32),
 };
 
 export const label01 = {
   fontSize: rem(scale[0]),
   fontWeight: fontWeights.regular,
-  lineHeight: 1.34,
+  lineHeight: 1.33333,
   letterSpacing: px(0.32),
 };
 
 export const label02 = {
   fontSize: rem(scale[1]),
   fontWeight: fontWeights.regular,
-  lineHeight: 1.29,
-  letterSpacing: px(0.32),
+  lineHeight: 1.28572,
+  letterSpacing: px(0.16),
 };
 
 export const helperText01 = {
   fontSize: rem(scale[0]),
-  lineHeight: 1.34,
+  lineHeight: 1.33333,
   letterSpacing: px(0.32),
 };
 
 export const helperText02 = {
   fontSize: rem(scale[1]),
-  lineHeight: 1.29,
-  letterSpacing: px(0.32),
+  lineHeight: 1.28572,
+  letterSpacing: px(0.16),
 };
 
 export const bodyShort01 = {
   fontSize: rem(scale[1]),
   fontWeight: fontWeights.regular,
-  lineHeight: 1.29,
+  lineHeight: 1.28572,
   letterSpacing: px(0.16),
 };
 
 export const bodyLong01 = {
   fontSize: rem(scale[1]),
   fontWeight: fontWeights.regular,
-  lineHeight: 1.43,
+  lineHeight: 1.42857,
   letterSpacing: px(0.16),
 };
 
@@ -82,7 +82,7 @@ export const code01 = {
   fontFamily: fontFamilies.mono,
   fontSize: rem(scale[0]),
   fontWeight: fontWeights.regular,
-  lineHeight: 1.34,
+  lineHeight: 1.33333,
   letterSpacing: px(0.32),
 };
 
@@ -90,27 +90,37 @@ export const code02 = {
   fontFamily: fontFamilies.mono,
   fontSize: rem(scale[1]),
   fontWeight: fontWeights.regular,
-  lineHeight: 1.43,
+  lineHeight: 1.42857,
   letterSpacing: px(0.32),
 };
 
 export const heading01 = {
   fontSize: rem(scale[1]),
   fontWeight: fontWeights.semibold,
-  lineHeight: 1.29,
+  lineHeight: 1.42857,
   letterSpacing: px(0.16),
 };
 
-export const productiveHeading01 = heading01;
+export const productiveHeading01 = {
+  fontSize: rem(scale[1]),
+  fontWeight: fontWeights.semibold,
+  lineHeight: 1.28572,
+  letterSpacing: px(0.16),
+};
 
 export const heading02 = {
   fontSize: rem(scale[2]),
   fontWeight: fontWeights.semibold,
-  lineHeight: 1.375,
+  lineHeight: 1.5,
   letterSpacing: 0,
 };
 
-export const productiveHeading02 = heading02;
+export const productiveHeading02 = {
+  fontSize: rem(scale[2]),
+  fontWeight: fontWeights.semibold,
+  lineHeight: 1.375,
+  letterSpacing: 0,
+};
 
 export const productiveHeading03 = {
   fontSize: rem(scale[4]),
@@ -122,7 +132,7 @@ export const productiveHeading03 = {
 export const productiveHeading04 = {
   fontSize: rem(scale[6]),
   fontWeight: fontWeights.regular,
-  lineHeight: 1.29,
+  lineHeight: 1.28572,
   letterSpacing: 0,
 };
 
@@ -143,7 +153,7 @@ export const productiveHeading06 = {
 export const productiveHeading07 = {
   fontSize: rem(scale[11]),
   fontWeight: fontWeights.light,
-  lineHeight: 1.19,
+  lineHeight: 1.199,
   letterSpacing: 0,
 };
 
@@ -177,7 +187,7 @@ export const expressiveHeading03 = {
 export const expressiveHeading04 = {
   fontSize: rem(scale[6]),
   fontWeight: fontWeights.regular,
-  lineHeight: 1.29,
+  lineHeight: 1.28572,
   letterSpacing: 0,
   breakpoints: {
     xlg: {
@@ -262,7 +272,7 @@ export const expressiveParagraph01 = {
   breakpoints: {
     lg: {
       fontSize: rem(scale[6]),
-      lineHeight: 1.29,
+      lineHeight: 1.28572,
     },
     max: {
       fontSize: rem(scale[7]),
@@ -272,6 +282,7 @@ export const expressiveParagraph01 = {
 };
 
 export const quotation01 = {
+  fontFamily: fontFamilies.serif,
   fontSize: rem(scale[4]),
   fontWeight: fontWeights.regular,
   lineHeight: 1.3,
@@ -291,7 +302,7 @@ export const quotation01 = {
     xlg: {
       fontSize: rem(scale[6]),
       fontWeight: fontWeights.regular,
-      lineHeight: 1.29,
+      lineHeight: 1.28572,
       letterSpacing: 0,
     },
     max: {
@@ -304,6 +315,7 @@ export const quotation01 = {
 };
 
 export const quotation02 = {
+  fontFamily: fontFamilies.serif,
   fontSize: rem(scale[7]),
   fontWeight: fontWeights.light,
   lineHeight: 1.25,
@@ -427,3 +439,51 @@ export const display04 = {
     },
   },
 };
+
+// Type changes - V11
+
+// Small styles
+// No changes for code-01, code-02, label-01, label-02
+export const legal01 = {
+  fontSize: rem(scale[0]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.33333,
+  letterSpacing: px(0.32),
+};
+
+export const legal02 = {
+  fontSize: rem(scale[1]),
+  fontWeight: fontWeights.regular,
+  lineHeight: 1.28572,
+  letterSpacing: px(0.16),
+};
+
+// Body styles
+export const bodyCompact01 = bodyShort01;
+export const bodyCompact02 = bodyShort02;
+export const body01 = bodyLong01;
+export const body02 = bodyLong02;
+
+// Fixed heading styles
+export const headingCompact01 = productiveHeading01;
+export const headingCompact02 = productiveHeading02;
+export const heading03 = productiveHeading03;
+export const heading04 = productiveHeading04;
+export const heading05 = productiveHeading05;
+export const heading06 = productiveHeading06;
+export const heading07 = productiveHeading07;
+
+// Fluid heading styles
+export const fluidHeading03 = expressiveHeading03;
+export const fluidHeading04 = expressiveHeading04;
+export const fluidHeading05 = expressiveHeading05;
+export const fluidHeading06 = expressiveHeading06;
+
+// Additional fluid styles
+export const fluidParagraph01 = expressiveParagraph01;
+export const fluidQuotation01 = quotation01;
+export const fluidQuotation02 = quotation02;
+export const fluidDisplay01 = display01;
+export const fluidDisplay02 = display02;
+export const fluidDisplay03 = display03;
+export const fluidDisplay04 = display04;