@carbon/type 10.44.0 → 10.45.1

package/es/index.js

@@ -210,8 +210,32 @@ function getTypeSize(step) {
  *
  * > 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);
@@ -440,7 +464,7 @@ var expressiveHeading03$1 = {
   breakpoints: {
     xlg: {
       fontSize: rem(scale[4]),
-      lineHeight: 1.25
+      lineHeight: 1.4
     },
     max: {
       fontSize: rem(scale[5]),
@@ -456,10 +480,12 @@ var expressiveHeading04$1 = {
   breakpoints: {
     xlg: {
       fontSize: rem(scale[6]),
-      lineHeight: 1.25
+      lineHeight: 1.25,
+      fontWeight: fontWeights.regular
     },
     max: {
-      fontSize: rem(scale[7])
+      fontSize: rem(scale[7]),
+      fontWeight: fontWeights.regular
     }
   }
 };
@@ -477,19 +503,16 @@ var expressiveHeading05$1 = {
     },
     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
     }
   }
@@ -648,44 +671,43 @@ var display03$1 = {
   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]),

package/lib/index.js

@@ -214,8 +214,32 @@ function getTypeSize(step) {
  *
  * > 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);
@@ -444,7 +468,7 @@ var expressiveHeading03$1 = {
   breakpoints: {
     xlg: {
       fontSize: rem(scale[4]),
-      lineHeight: 1.25
+      lineHeight: 1.4
     },
     max: {
       fontSize: rem(scale[5]),
@@ -460,10 +484,12 @@ var expressiveHeading04$1 = {
   breakpoints: {
     xlg: {
       fontSize: rem(scale[6]),
-      lineHeight: 1.25
+      lineHeight: 1.25,
+      fontWeight: fontWeights.regular
     },
     max: {
-      fontSize: rem(scale[7])
+      fontSize: rem(scale[7]),
+      fontWeight: fontWeights.regular
     }
   }
 };
@@ -481,19 +507,16 @@ var expressiveHeading05$1 = {
     },
     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
     }
   }
@@ -652,44 +675,43 @@ var display03$1 = {
   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]),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/type",
   "description": "Typography for digital and software products using the Carbon Design System",
-  "version": "10.44.0",
+  "version": "10.45.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -52,5 +52,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "9db9b14761bfaabde5cd54e1f47957d243d90321"
+  "gitHead": "f194dfb8beb09cf2ad62b521c65fddf3a439069b"
 }

package/scss/_inlined/_styles.scss

@@ -338,7 +338,7 @@ $expressive-heading-03: (
   breakpoints: (
     xlg: (
       font-size: carbon--type-scale(5),
-      line-height: 1.25,
+      line-height: 1.4,
     ),
     max: (
       font-size: carbon--type-scale(6),
@@ -364,9 +364,11 @@ $expressive-heading-04: (
     xlg: (
       font-size: carbon--type-scale(7),
       line-height: 1.25,
+      font-weight: carbon--font-weight('regular'),
     ),
     max: (
       font-size: carbon--type-scale(8),
+      font-weight: carbon--font-weight('regular'),
     ),
   ),
 ) !default;
@@ -604,22 +606,22 @@ $display-03: (
   letter-spacing: 0,
   breakpoints: (
     md: (
-      font-size: carbon--type-scale(14),
-      line-height: 1.15,
+      font-size: carbon--type-scale(12),
+      line-height: 1.18,
     ),
     lg: (
-      font-size: carbon--type-scale(17),
-      line-height: 1.11,
+      font-size: carbon--type-scale(13),
+      line-height: 1.16,
       letter-spacing: -0.64px,
     ),
     xlg: (
-      font-size: carbon--type-scale(20),
-      line-height: 1.07,
+      font-size: carbon--type-scale(15),
+      line-height: 1.13,
       letter-spacing: -0.64px,
     ),
     max: (
-      font-size: carbon--type-scale(23),
-      line-height: 1.05,
+      font-size: carbon--type-scale(16),
+      line-height: 1.11,
       letter-spacing: -0.96px,
     ),
   ),
@@ -635,23 +637,22 @@ $fluid-display-03: $display-03 !default;
 /// @group @carbon/type
 $display-04: (
   font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('semibold'),
+  font-weight: carbon--font-weight('light'),
   line-height: 1.19,
   letter-spacing: 0,
   breakpoints: (
     md: (
       font-size: carbon--type-scale(14),
-      line-height: 1.15,
+      line-height: 1.14,
     ),
     lg: (
       font-size: carbon--type-scale(17),
-      line-height: 1.11,
+      line-height: 1.1,
       letter-spacing: -0.64px,
     ),
     xlg: (
       font-size: carbon--type-scale(20),
-      line-height: 1.07,
-      letter-spacing: -0.64px,
+      line-height: 1.06,
     ),
     max: (
       font-size: carbon--type-scale(23),

package/scss/_styles.scss

@@ -338,7 +338,7 @@ $expressive-heading-03: (
   breakpoints: (
     xlg: (
       font-size: carbon--type-scale(5),
-      line-height: 1.25,
+      line-height: 1.4,
     ),
     max: (
       font-size: carbon--type-scale(6),
@@ -364,9 +364,11 @@ $expressive-heading-04: (
     xlg: (
       font-size: carbon--type-scale(7),
       line-height: 1.25,
+      font-weight: carbon--font-weight('regular'),
     ),
     max: (
       font-size: carbon--type-scale(8),
+      font-weight: carbon--font-weight('regular'),
     ),
   ),
 ) !default;
@@ -604,22 +606,22 @@ $display-03: (
   letter-spacing: 0,
   breakpoints: (
     md: (
-      font-size: carbon--type-scale(14),
-      line-height: 1.15,
+      font-size: carbon--type-scale(12),
+      line-height: 1.18,
     ),
     lg: (
-      font-size: carbon--type-scale(17),
-      line-height: 1.11,
+      font-size: carbon--type-scale(13),
+      line-height: 1.16,
       letter-spacing: -0.64px,
     ),
     xlg: (
-      font-size: carbon--type-scale(20),
-      line-height: 1.07,
+      font-size: carbon--type-scale(15),
+      line-height: 1.13,
       letter-spacing: -0.64px,
     ),
     max: (
-      font-size: carbon--type-scale(23),
-      line-height: 1.05,
+      font-size: carbon--type-scale(16),
+      line-height: 1.11,
       letter-spacing: -0.96px,
     ),
   ),
@@ -635,23 +637,22 @@ $fluid-display-03: $display-03 !default;
 /// @group @carbon/type
 $display-04: (
   font-size: carbon--type-scale(10),
-  font-weight: carbon--font-weight('semibold'),
+  font-weight: carbon--font-weight('light'),
   line-height: 1.19,
   letter-spacing: 0,
   breakpoints: (
     md: (
       font-size: carbon--type-scale(14),
-      line-height: 1.15,
+      line-height: 1.14,
     ),
     lg: (
       font-size: carbon--type-scale(17),
-      line-height: 1.11,
+      line-height: 1.1,
       letter-spacing: -0.64px,
     ),
     xlg: (
       font-size: carbon--type-scale(20),
-      line-height: 1.07,
-      letter-spacing: -0.64px,
+      line-height: 1.06,
     ),
     max: (
       font-size: carbon--type-scale(23),

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;"
 `;
@@ -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;"
 `;

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

@@ -175,7 +175,7 @@ export const expressiveHeading03 = {
   breakpoints: {
     xlg: {
       fontSize: rem(scale[4]),
-      lineHeight: 1.25,
+      lineHeight: 1.4,
     },
     max: {
       fontSize: rem(scale[5]),
@@ -193,9 +193,11 @@ export const expressiveHeading04 = {
     xlg: {
       fontSize: rem(scale[6]),
       lineHeight: 1.25,
+      fontWeight: fontWeights.regular,
     },
     max: {
       fontSize: rem(scale[7]),
+      fontWeight: fontWeights.regular,
     },
   },
 };
@@ -214,19 +216,16 @@ export const expressiveHeading05 = {
     },
     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 +391,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 +413,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);
@@ -446,7 +470,7 @@
     breakpoints: {
       xlg: {
         fontSize: rem(scale[4]),
-        lineHeight: 1.25
+        lineHeight: 1.4
       },
       max: {
         fontSize: rem(scale[5]),
@@ -462,10 +486,12 @@
     breakpoints: {
       xlg: {
         fontSize: rem(scale[6]),
-        lineHeight: 1.25
+        lineHeight: 1.25,
+        fontWeight: fontWeights.regular
       },
       max: {
-        fontSize: rem(scale[7])
+        fontSize: rem(scale[7]),
+        fontWeight: fontWeights.regular
       }
     }
   };
@@ -483,19 +509,16 @@
       },
       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 +677,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]),