@carbon/type 10.43.2 → 10.45.0

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

@@ -109,7 +109,7 @@ letter-spacing: 0;"
 
 exports[`styles display04 should be printable 1`] = `
 "font-size: 2.625rem;
-font-weight: 600;
+font-weight: 300;
 line-height: 1.19;
 letter-spacing: 0;"
 `;
@@ -144,7 +144,7 @@ letter-spacing: 0;"
 
 exports[`styles expressiveHeading05 should be printable 1`] = `
 "font-size: 2rem;
-font-weight: 400;
+font-weight: 300;
 line-height: 1.25;
 letter-spacing: 0;"
 `;
@@ -186,7 +186,7 @@ letter-spacing: 0;"
 
 exports[`styles fluidDisplay04 should be printable 1`] = `
 "font-size: 2.625rem;
-font-weight: 600;
+font-weight: 300;
 line-height: 1.19;
 letter-spacing: 0;"
 `;
@@ -207,7 +207,7 @@ letter-spacing: 0;"
 
 exports[`styles fluidHeading05 should be printable 1`] = `
 "font-size: 2rem;
-font-weight: 400;
+font-weight: 300;
 line-height: 1.25;
 letter-spacing: 0;"
 `;
@@ -272,7 +272,7 @@ letter-spacing: 0;"
 
 exports[`styles heading05 should be printable 1`] = `
 "font-size: 2rem;
-font-weight: 400;
+font-weight: 300;
 line-height: 1.25;
 letter-spacing: 0;"
 `;
@@ -375,7 +375,7 @@ letter-spacing: 0;"
 
 exports[`styles productiveHeading05 should be printable 1`] = `
 "font-size: 2rem;
-font-weight: 400;
+font-weight: 300;
 line-height: 1.25;
 letter-spacing: 0;"
 `;

package/src/__tests__/fluid-test.js

@@ -44,17 +44,16 @@ describe('fluid', () => {
       Object {
         "@media (min-width: 42rem)": Object {
           "fontSize": "calc(4.25rem + 1.5 * ((100vw - 42rem) / 24))",
-          "lineHeight": 1.15,
+          "lineHeight": 1.14,
         },
         "@media (min-width: 66rem)": Object {
           "fontSize": "calc(5.75rem + 1.875 * ((100vw - 66rem) / 16))",
           "letterSpacing": "-0.64px",
-          "lineHeight": 1.11,
+          "lineHeight": 1.1,
         },
         "@media (min-width: 82rem)": Object {
           "fontSize": "calc(7.625rem + 2.125 * ((100vw - 82rem) / 17))",
-          "letterSpacing": "-0.64px",
-          "lineHeight": 1.07,
+          "lineHeight": 1.06,
         },
         "@media (min-width: 99rem)": Object {
           "fontSize": "9.75rem",
@@ -62,7 +61,7 @@ describe('fluid', () => {
           "lineHeight": 1.05,
         },
         "fontSize": "calc(2.625rem + 1.625 * ((100vw - 20rem) / 22))",
-        "fontWeight": 600,
+        "fontWeight": 300,
         "letterSpacing": 0,
         "lineHeight": 1.19,
       }

package/src/scale.js

@@ -24,28 +24,30 @@ export function getTypeSize(step) {
  *
  * > Array.from({ length: 23 }, (_, i) => getTypeSize(i + 1))
  */
+
+//values in pixels
 export const scale = [
-  12,
-  14,
-  16,
-  18,
-  20,
-  24,
-  28,
-  32,
-  36,
-  42,
-  48,
-  54,
-  60,
-  68,
-  76,
-  84,
-  92,
-  102,
-  112,
-  122,
-  132,
-  144,
-  156,
+  12, //scale[0]
+  14, //scale[1]
+  16, //scale[2]
+  18, //scale[3]
+  20, //scale[4]
+  24, //scale[5]
+  28, //scale[6]
+  32, //scale[7]
+  36, //scale[8]
+  42, //scale[9]
+  48, //scale[10]
+  54, //scale[11]
+  60, //scale[12]
+  68, //scale[13]
+  76, //scale[14]
+  84, //scale[15]
+  92, //scale[16]
+  102, //scale[17]
+  112, //scale[18]
+  122, //scale[19]
+  132, //scale[20]
+  144, //scale[21]
+  156, //scale[22]
 ];

package/src/styles.js

@@ -138,7 +138,7 @@ export const productiveHeading04 = {
 
 export const productiveHeading05 = {
   fontSize: rem(scale[7]),
-  fontWeight: fontWeights.regular,
+  fontWeight: fontWeights.light,
   lineHeight: 1.25,
   letterSpacing: 0,
 };
@@ -193,40 +193,38 @@ export const expressiveHeading04 = {
     xlg: {
       fontSize: rem(scale[6]),
       lineHeight: 1.25,
+      fontWeight: fontWeights.light,
     },
     max: {
       fontSize: rem(scale[7]),
+      fontWeight: fontWeights.light,
     },
   },
 };
 
 export const expressiveHeading05 = {
   fontSize: rem(scale[7]),
-  fontWeight: fontWeights.regular,
+  fontWeight: fontWeights.light,
   lineHeight: 1.25,
   letterSpacing: 0,
   breakpoints: {
     md: {
       fontSize: rem(scale[8]),
-      fontWeight: fontWeights.light,
       lineHeight: 1.22,
       letterSpacing: 0,
     },
     lg: {
       fontSize: rem(scale[9]),
-      fontWeight: fontWeights.light,
       lineHeight: 1.19,
       letterSpacing: 0,
     },
     xlg: {
       fontSize: rem(scale[10]),
-      fontWeight: fontWeights.light,
       lineHeight: 1.17,
       letterSpacing: 0,
     },
     max: {
       fontSize: rem(scale[12]),
-      fontWeight: fontWeights.light,
       letterSpacing: 0,
     },
   },
@@ -392,21 +390,21 @@ export const display03 = {
   letterSpacing: 0,
   breakpoints: {
     md: {
-      fontSize: rem(scale[13]),
-      lineHeight: 1.15,
+      fontSize: rem(scale[11]),
+      lineHeight: 1.18,
     },
     lg: {
-      fontSize: rem(scale[16]),
-      lineHeight: 1.11,
+      fontSize: rem(scale[12]),
+      lineHeight: 1.16,
       letterSpacing: px(-0.64),
     },
     xlg: {
-      fontSize: rem(scale[19]),
-      lineHeight: 1.07,
+      fontSize: rem(scale[14]),
+      lineHeight: 1.13,
     },
     max: {
-      fontSize: rem(scale[22]),
-      lineHeight: 1.05,
+      fontSize: rem(scale[15]),
+      lineHeight: 1.11,
       letterSpacing: px(-0.96),
     },
   },
@@ -414,23 +412,22 @@ export const display03 = {
 
 export const display04 = {
   fontSize: rem(scale[9]),
-  fontWeight: fontWeights.semibold,
+  fontWeight: fontWeights.light,
   lineHeight: 1.19,
   letterSpacing: 0,
   breakpoints: {
     md: {
       fontSize: rem(scale[13]),
-      lineHeight: 1.15,
+      lineHeight: 1.14,
     },
     lg: {
       fontSize: rem(scale[16]),
-      lineHeight: 1.11,
+      lineHeight: 1.1,
       letterSpacing: px(-0.64),
     },
     xlg: {
       fontSize: rem(scale[19]),
-      lineHeight: 1.07,
-      letterSpacing: px(-0.64),
+      lineHeight: 1.06,
     },
     max: {
       fontSize: rem(scale[22]),

package/umd/index.js

@@ -216,8 +216,32 @@
    *
    * > Array.from({ length: 23 }, (_, i) => getTypeSize(i + 1))
    */
-
-  var scale = [12, 14, 16, 18, 20, 24, 28, 32, 36, 42, 48, 54, 60, 68, 76, 84, 92, 102, 112, 122, 132, 144, 156];
+  //values in pixels
+
+  var scale = [12, //scale[0]
+  14, //scale[1]
+  16, //scale[2]
+  18, //scale[3]
+  20, //scale[4]
+  24, //scale[5]
+  28, //scale[6]
+  32, //scale[7]
+  36, //scale[8]
+  42, //scale[9]
+  48, //scale[10]
+  54, //scale[11]
+  60, //scale[12]
+  68, //scale[13]
+  76, //scale[14]
+  84, //scale[15]
+  92, //scale[16]
+  102, //scale[17]
+  112, //scale[18]
+  122, //scale[19]
+  132, //scale[20]
+  144, //scale[21]
+  156 //scale[22]
+  ];
 
   function ownKeys(object, enumerableOnly) {
     var keys = Object.keys(object);
@@ -416,7 +440,7 @@
   };
   var productiveHeading05$1 = {
     fontSize: rem(scale[7]),
-    fontWeight: fontWeights.regular,
+    fontWeight: fontWeights.light,
     lineHeight: 1.25,
     letterSpacing: 0
   };
@@ -462,40 +486,38 @@
     breakpoints: {
       xlg: {
         fontSize: rem(scale[6]),
-        lineHeight: 1.25
+        lineHeight: 1.25,
+        fontWeight: fontWeights.light
       },
       max: {
-        fontSize: rem(scale[7])
+        fontSize: rem(scale[7]),
+        fontWeight: fontWeights.light
       }
     }
   };
   var expressiveHeading05$1 = {
     fontSize: rem(scale[7]),
-    fontWeight: fontWeights.regular,
+    fontWeight: fontWeights.light,
     lineHeight: 1.25,
     letterSpacing: 0,
     breakpoints: {
       md: {
         fontSize: rem(scale[8]),
-        fontWeight: fontWeights.light,
         lineHeight: 1.22,
         letterSpacing: 0
       },
       lg: {
         fontSize: rem(scale[9]),
-        fontWeight: fontWeights.light,
         lineHeight: 1.19,
         letterSpacing: 0
       },
       xlg: {
         fontSize: rem(scale[10]),
-        fontWeight: fontWeights.light,
         lineHeight: 1.17,
         letterSpacing: 0
       },
       max: {
         fontSize: rem(scale[12]),
-        fontWeight: fontWeights.light,
         letterSpacing: 0
       }
     }
@@ -654,44 +676,43 @@
     letterSpacing: 0,
     breakpoints: {
       md: {
-        fontSize: rem(scale[13]),
-        lineHeight: 1.15
+        fontSize: rem(scale[11]),
+        lineHeight: 1.18
       },
       lg: {
-        fontSize: rem(scale[16]),
-        lineHeight: 1.11,
+        fontSize: rem(scale[12]),
+        lineHeight: 1.16,
         letterSpacing: px(-0.64)
       },
       xlg: {
-        fontSize: rem(scale[19]),
-        lineHeight: 1.07
+        fontSize: rem(scale[14]),
+        lineHeight: 1.13
       },
       max: {
-        fontSize: rem(scale[22]),
-        lineHeight: 1.05,
+        fontSize: rem(scale[15]),
+        lineHeight: 1.11,
         letterSpacing: px(-0.96)
       }
     }
   };
   var display04$1 = {
     fontSize: rem(scale[9]),
-    fontWeight: fontWeights.semibold,
+    fontWeight: fontWeights.light,
     lineHeight: 1.19,
     letterSpacing: 0,
     breakpoints: {
       md: {
         fontSize: rem(scale[13]),
-        lineHeight: 1.15
+        lineHeight: 1.14
       },
       lg: {
         fontSize: rem(scale[16]),
-        lineHeight: 1.11,
+        lineHeight: 1.1,
         letterSpacing: px(-0.64)
       },
       xlg: {
         fontSize: rem(scale[19]),
-        lineHeight: 1.07,
-        letterSpacing: px(-0.64)
+        lineHeight: 1.06
       },
       max: {
         fontSize: rem(scale[22]),