Expressive type token value errors

[shixiedesign]

Probelm

1. $expressive-heading-03 should be 24px at max breakpoint. Currently card title showing 20px at max in Card component and all its variations. This suggest there are errors in the token's values ❌.

2. $expressive-heading-05 should be 60px at max breakpoint. As seen in React experimental: Lead space with Search, the value is wrong at 32px. And in Lead space block, which should use this token for sub-headline, the value is hard coded 😱.

Correct the values of $expressive-heading-03 and $expressive-heading-05

Reference source: https://carbondesignsystem.com/guidelines/typography/expressive#fluid-type-sets

$expressive-heading-03

breakpoint	value
max	24px / 1.5rem, Regular, 28px / 1.75em
xlg—sm	20px / 1.25rem, Regular, 28px / 1.75em

$expressive-heading-05

breakpoint	value
max	60px / 3.75rem, Light, 70px / 4.375em line-height
xlg	48px / 3rem, Light, 56px / 3.5em line-height
lg	42px / 2.625rem, Light, 50px / 3.125em
md	36px / 2.25rem, Light, 44px / 2.75em
sm	32px / 2rem, Regular, 40px / 2.5em

[shixiedesign]

If the fix is just in token values, #5545 would be resolved by this issue too.

[annawen1]

@shixiedesign setting the second parameter to true in @include carbon--type-style('expressive-heading-05', true); solves the issue and sets font size scaling.

As for Lead Space Block, it does look like it is using expressive-heading-05 from content-block

Not sure why it doesn't specify the token in the console and instead outputs the actual value.