fix(type): update v10 token styles

packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap

@@ -9,7 +9,7 @@ exports[`_grid.scss should generate grid code when the grid feature flag is on 1
 
 h2 {
   font-size: 2rem;
-  font-weight: 400;
+  font-weight: 300;
   line-height: 1.25;
   letter-spacing: 0; }
 

packages/type/scss/_scale.scss

@@ -37,6 +37,30 @@ $carbon--type-scale: ();
 /// @return {Number} In rem
 /// @access public
 /// @group @carbon/type
+/// 12px = carbon--type-scale(1)
+/// 14px = carbon--type-scale(2)
+/// 16px = carbon--type-scale(3)
+/// 18px = carbon--type-scale(4)
+/// 20px = carbon--type-scale(5)
+/// 24px = carbon--type-scale(6)
+/// 28px = carbon--type-scale(7)
+/// 32px = carbon--type-scale(8)
+/// 36px = carbon--type-scale(9)
+/// 42px = carbon--type-scale(10)
+/// 48px = carbon--type-scale(11)
+/// 54px = carbon--type-scale(12)
+/// 60px = carbon--type-scale(13)
+/// 68px = carbon--type-scale(14)
+/// 76px = carbon--type-scale(15)
+/// 84px = carbon--type-scale(16)
+/// 92px = carbon--type-scale(17)
+///102px = carbon--type-scale(18)
+///112px = carbon--type-scale(19)
+///122px = carbon--type-scale(20)
+///132px = carbon--type-scale(21)
+///144px = carbon--type-scale(22)
+///156px = carbon--type-scale(23)
+
 @function carbon--type-scale($step) {
   @return nth($carbon--type-scale, $step);
 }

packages/type/scss/_styles.scss

@@ -276,7 +276,7 @@ $heading-04: $productive-heading-04 !default;
 /// @group @carbon/type
 $productive-heading-05: (
   font-size: carbon--type-scale(8),
-  font-weight: carbon--font-weight('regular'),
+  font-weight: carbon--font-weight('light'),
   line-height: 1.25,
   letter-spacing: 0,
 ) !default;
@@ -364,9 +364,11 @@ $expressive-heading-04: (
     xlg: (
       font-size: carbon--type-scale(7),
       line-height: 1.25,
+      font-weight: carbon--font-weight('light'),
     ),
     max: (
       font-size: carbon--type-scale(8),
+      font-weight: carbon--font-weight('light'),
     ),
   ),
 ) !default;
@@ -381,13 +383,12 @@ $fluid-heading-04: $expressive-heading-04 !default;
 /// @group @carbon/type
 $expressive-heading-05: (
   font-size: carbon--type-scale(8),
-  font-weight: carbon--font-weight('regular'),
+  font-weight: carbon--font-weight('light'),
   line-height: 1.25,
   letter-spacing: 0,
   breakpoints: (
     md: (
       font-size: carbon--type-scale(9),
-      font-weight: carbon--font-weight('light'),
       line-height: 1.22,
     ),
     lg: (
@@ -604,22 +605,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 +636,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),

packages/type/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;"
 `;

packages/type/src/__tests__/fluid-test.js

@@ -44,25 +44,24 @@ 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",
           "letterSpacing": "-0.96px",
           "lineHeight": 1.05,
         },
         "fontSize": "calc(2.625rem + 1.625 * ((100vw - 20rem) / 22))",
-        "fontWeight": 600,
+        "fontWeight": 300,
         "letterSpacing": 0,
         "lineHeight": 1.19,
       }

packages/type/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]
 ];

packages/type/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,45 +390,44 @@ 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),
     },
   },
 };
 
 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]),