diff --git a/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap b/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap index 66f5e5394cee..46866137e742 100644 --- a/packages/components/src/globals/grid/__tests__/__snapshots__/grid-test.js.snap +++ b/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; } diff --git a/packages/type/scss/_styles.scss b/packages/type/scss/_styles.scss index 08c3ca957825..d38b9b87e535 100644 --- a/packages/type/scss/_styles.scss +++ b/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), diff --git a/packages/type/src/__tests__/__snapshots__/styles-test.js.snap b/packages/type/src/__tests__/__snapshots__/styles-test.js.snap index 73bc1ab05e3b..7736cc47d58f 100644 --- a/packages/type/src/__tests__/__snapshots__/styles-test.js.snap +++ b/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;" `; diff --git a/packages/type/src/__tests__/fluid-test.js b/packages/type/src/__tests__/fluid-test.js index 6406ea517dc0..70f0525054ee 100644 --- a/packages/type/src/__tests__/fluid-test.js +++ b/packages/type/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, } diff --git a/packages/type/src/scale.js b/packages/type/src/scale.js index cc62b41f48b2..85de2063623f 100644 --- a/packages/type/src/scale.js +++ b/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] ]; diff --git a/packages/type/src/styles.js b/packages/type/src/styles.js index 218a2fe28bee..c7d08979a0df 100644 --- a/packages/type/src/styles.js +++ b/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,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]),