[Expressive theme] Contribute guidance to Carbon website

[shixiedesign]

Three areas of update needed for Carbon website:

1. Typography ($caption-02, $helper-text-02, $label-02)
2. Button (Button — expressive, field size lg)
3. List (List lg)

Mike's recommendation:

Choose the expressive Button when the environment is expressive. If the component lives on a page where body copy is 16px, or larger, such as in a banner or page lead space, pump up the button label size to match the expressive experience.

[oliviaflory]

Typography page:

Expressive tab

Supporting styles

Note: I pulled some of what Carbon already has on their descriptions and proposing edits

Token	Description
label-01	This is for labels in components and error messages. (Missing label-01 in the Expressive tab, will need for form inputs)
label-02	This is for larger labels in components that appear within the body of an expressive page, use as a label when paired with body-short-02 or body-long-02.
caption-01	This is for captions or legal content in a layout — not for body copy.
caption-02	This is for larger captions or legal content in a layout — not for body copy, use for captions when paired with body-short-02 or body-long-02.
helper-text-01	This is for explanatory helper text that appears below a field title within a component.

Body

Description	Token
body-short-01	This is for short paragraphs with no more than four lines and is commonly used in components.
body-long-02	This is commonly used in both the expressive and the productive type theme (I don't know if we want to refer to expressive as a theme anymore?) layouts for long paragraphs with more than four lines. It is a good size for comfortable, long-form reading. Use this for longer body copy in components such as accordion or structured list. Always left-align this type; never center it.
body-short-02	This is for short paragraphs with no more than four lines and is commonly used in the expressive type theme for layouts. It is also used for expressive button (?)
body-long-02	This is commonly used in the expressive type theme layouts for long paragraphs with more than four lines. The looser line height and larger size makes for comfortable, long-form reading, in mediums that allow for more space. This size type is rarely used for body copy in components other than list and links. Always left-align this type; never center it. We might want to consider re-phrasing...because we use this type in the Carbon for IBM.com components.

Components:

Button

Usage / Live demo (also on Code tab)

Add size example:

• small
• medium
• large
• large expressive

Usage tab / Button size

Name	Height	Use case
Large expressive	48/3	Use the expressive Button when the environment is expressive. If the component lives on a page where body copy is 16px, or larger, such as in a lead space, the button label size should match the expressive experience.

Usage tab / Modifiers

– Use 16px glyphs within buttons; use 20px glyphs within the large expressive button.

Style tab / Typography

Class	Font-size	Font weight	Type token
.bx--btn--lg	16/1	Regular / 400	$body-short-02

Note: class names are place holder guess based off Link--lg

Style tab / Structure

Class	Property	px/rem	spacing token
svg--expressive	size	20 x 20	–

Note: class name is a guess

Style tab / Sizes

There are four common button sizes: large, medium, and small. Each button type can use any of these three sizes based on need. The fourth button size, large expressive, is used in expressive layouts such as marketing experiences where the type size is increased to 16px. The fifth button size, full bleed, has a more reserved application and should rarely be used.

Name	Height	Use case
Large expressive	48/3	Use the expressive Button when the environment is expressive. If the component lives on a page where body copy is 16px, or larger, such as in a lead space, the button label size should match the expressive experience.

List

Usage / demo

Add size option to demo window

• Default (?)
• List large

Style tab / Typography:

Class	Font-size	Font weight	Type token
.bx--list--lg--item	16/1	Regular / 400	$body-long-02
.bx--list--lg--nested	16/1	Regular / 400	$body-long-02

Note: class names are place holder guess based off Link-lg

[shixiedesign]

Submitted PRs to the website:

Part 1/3: Button carbon-design-system/carbon-website#2239
Part 2/3: List carbon-design-system/carbon-website#2240

WIP. Lots of questions here, but I added the type tokens. Lemme know if I did it right! Feel free to tear it apart or close PR. My feelings won’t be hurt if we have to redo.

Part 3/3: Typography carbon-design-system/carbon-website#2242

[shixiedesign]

Item 1 & 2 are done. The only one still in works is "Typography" page:

Part 3/3: Typography carbon-design-system/carbon-website#2242

[shixiedesign]

Gonna split out Typography page into a new issue because it's shaping up to be a larger piece of work.