component: table for typography page

This issue is for dev support in creating a table to be used on the Guidelines > Typography page to illustrate the differences between the productive and expressive experiences.

The table would use a sticky content switcher with two tabs (labeled Productive and Expressive) allowing the user to switch to see the differences between the type sets. It would work in a similar way to the Color Usage tab, but the switcher would not span full width.

We are still determining the behavior of the content switcher on scroll. Will update this issue shortly. @jeanservaas will be spec’ing this out.

Invision prototype of table: https://projects.invisionapp.com/d/main?origin=v7#/console/21476859/453822548/preview?scrollOffset=0

Draft PR: https://github.com/carbon-design-system/carbon-website/pull/2410

Link to Notion table with type set information that is changing (descriptions, headings, intro paragraphs, and new type styles): https://www.notion.so/carbondesignsystem/type-set-info-cdd5e63d6dc9452c9f62b805637c6ca4

Note: The fluid heading slider should look like the slider on the IDL site, not the Carbon site. (Carbon site has a drop shadow that we don’t want.) Thank you!

Note: The descriptions of the type styles are being updated. Please let me know the best way to get the content to you. A Notion document?

[tw15egan]

Dev PR is up for review at : https://github.com/carbon-design-system/carbon/pull/9480

Tokens can be seen at: https://deploy-preview-9480--carbon-elements.netlify.app/type/examples/preview/

Right-click on the token example to inspect that the values are correct (I’ve gone ahead and matched them to the notion doc so they should be correct)

[janchild]

@sstrubberg Hi Scott, there were a couple of meetings today with @tw15egan, @laurenmrice, @oliviaflory, and @aagonzales having a final discussions and review of the type styles.

We decided to include $helper-text-01 and $helper-text-02 in the Utility styles section. The addition back is more about usage guidance and making sure that we communicate the type of information that should be included in each part of the UI.

The values would be exactly the same as $label-01 and $label-02. This should be the last change. Let me know if you have any questions at all! Thank you.