Docs--update-expressive-styling-guidance (carbon-design-system#1734)

* add icon usage images update overview mdx * updates to styling strategies tab * move overview folder test image path add new images * update type pairing mdx add new images * Update styling-strategies.mdx I massaged some of the language upfront. One big thing I noticed is we want to make sure to refer to the expressive type "sets" instead of "styles." Fluid is a style * update type and icon pairing overview page * remove captions type pairing page * fix image path name * Update src/pages/guidelines/expressive-styling/overview.mdx Co-authored-by: kennylam <[email protected]> * Update src/pages/guidelines/expressive-styling/type-pairing.mdx Co-authored-by: kennylam <[email protected]> --------- Co-authored-by: jeanservaas <[email protected]> Co-authored-by: kennylam <[email protected]>
oliviaflory · Dec 8, 2023 · eed8336 · eed8336
1 parent 501a74f
commit eed8336
Show file tree

Hide file tree

Showing 14 changed files with 121 additions and 146 deletions.
diff --git a/src/images/guidelines/expressive-theme/overview/expressive-components.png b/src/images/guidelines/expressive-theme/overview/expressive-components.png
diff --git a/src/images/guidelines/expressive-theme/overview/heading-styles.png b/src/images/guidelines/expressive-theme/overview/heading-styles.png
diff --git a/src/images/guidelines/expressive-theme/overview/icon-usage-do.svg b/src/images/guidelines/expressive-theme/overview/icon-usage-do.svg
diff --git a/src/images/guidelines/expressive-theme/overview/icon-usage-dont.svg b/src/images/guidelines/expressive-theme/overview/icon-usage-dont.svg
diff --git a/src/images/guidelines/expressive-theme/overview/icons-usage-sizing.png b/src/images/guidelines/expressive-theme/overview/icons-usage-sizing.png
diff --git a/src/images/guidelines/expressive-theme/overview/smaller-styles.png b/src/images/guidelines/expressive-theme/overview/smaller-styles.png
diff --git a/src/images/guidelines/expressive-theme/overview/type-sizes.png b/src/images/guidelines/expressive-theme/overview/type-sizes.png
diff --git a/src/images/guidelines/expressive-theme/type-pairing/content_block_ex.png b/src/images/guidelines/expressive-theme/type-pairing/content_block_ex.png
diff --git a/src/images/guidelines/expressive-theme/type-pairing/content_group_ex.png b/src/images/guidelines/expressive-theme/type-pairing/content_group_ex.png
diff --git a/src/images/guidelines/expressive-theme/type-pairing/content_item_ex.png b/src/images/guidelines/expressive-theme/type-pairing/content_item_ex.png
diff --git a/src/images/guidelines/expressive-theme/type-pairing/content_section_ex.png b/src/images/guidelines/expressive-theme/type-pairing/content_section_ex.png
diff --git a/src/pages/guidelines/expressive-styling/overview.mdx b/src/pages/guidelines/expressive-styling/overview.mdx
@@ -34,16 +34,16 @@ Expressive styling is used primarily for web pages and productive styling is use
 
 ## Type sizes and styles
 
-#### Type sizes
+### Type sizes
 
-The expressive type styles are primarily used for web pages and the larger sizes allow for a more dramatic, graphic use of type in editorial and marketing design. These type styles are excellent for long form reading and scanning, but could be distracting for use in product.
+The expressive type set is primarily used for web pages and the larger sizes allow for a more dramatic, graphic use of type in editorial and marketing design. These fluid type styles are excellent for long form reading and scanning, but could be distracting for use in product.
 
 The productive type set is primarily used within product spaces, where users benefit from a more condensed treatment of content to maintain focus on tasks.
 
 <Row>
 <Column colMd={8} colLg={8}>
 
-![Base type size difference](../../../images/guidelines/expressive-theme/compare-body2.png)
+![Base type size difference](../../../images/guidelines/expressive-theme/overview/type-sizes.png)
 
 <Caption>
   The productive base type size is 14px and the expressive base type size is
@@ -53,25 +53,23 @@ The productive type set is primarily used within product spaces, where users ben
 </Column>
 </Row>
 
-<br />
+### Smaller styles
 
-#### Smaller styles
+Within **Body styles** and **Utility styles**, the same set of styles are offered. Productive styles are named with a suffix of `-01` and expressive style names have a suffix of `-02`.
 
-Within **Body styles** and **Supporting styles**, the same set of styles are offered. Productive styles are named with a suffix of `-01` and expressive style names have a suffix of `-02`.
-
-| Usage             | Productive       | Expressive       |
-| ----------------- | ---------------- | ---------------- |
-| Code              | `$code-01`       | `$code-02`       |
-| Label             | `$label-01`      | `$label-02`      |
-| Body copy         | `$body-long-01`  | `$body-long-02`  |
-| Compact body copy | `$body-short-01` | `$body-short-02` |
+| Usage             | Productive         | Expressive       |
+| ----------------- | ------------------ | ---------------- |
+| Code              | `$code-01`         | `$code-02`       |
+| Label             | `$label-01`        | `$label-02`      |
+| Body copy         | `$body-01`         | `$body-02`  |
+| Compact body copy | `$body-compact-01` | `$body-compact-02` |
 
 As you can see in the following image, the line heights increase to accommodate the larger expressive type sizes.
 
 <Row>
 <Column colMd={8} colLg={8}>
 
-![Comparison of expressive and productive type styles](../../../images/guidelines/expressive-theme/compare-typestyles.png)
+![Comparison of expressive and productive type styles](../../../images/guidelines/expressive-theme/overview/smaller-styles.png)
 
 <Caption>
   Comparison of different line heights for expressive and productive styles
@@ -80,24 +78,30 @@ As you can see in the following image, the line heights increase to accommodate
 </Column>
 </Row>
 
-<br />
+### Heading styles
+
+Each of the productive and expressive body styles have a matching heading style that has the same type size and line height to maintain type hierarchy. The smaller heading styles in the expressive type set are fixed, meaning they are not responsive, the type size remains constant regardless of breakpoint. 
+
+Most heading styles used within the expressive type set are fluid, meaning they are responsive and the type styles change size at different breakpoints. By comparison, all of the headings in the productive type set are fixed.
 
-#### Heading styles
+| Productive            | Expressive       |
+| --------------------- | ---------------- |
+| `$heading-compact-01` | `$heading-compact-02` |
+| `$heading-01`         | `$heading-02`         |
+| `$heading-03`         | `$fluid-heading-03`   |
+| `$heading-04`         | `$fluid-heading-04`   |
 
-The expressive heading styles have a larger line height than productive. The pixel size is the same between each but the line height increases.
 
 <Row>
 <Column colMd={8} colLg={8}>
 
-![Comparison of expressive and productive type styles](../../../images/guidelines/expressive-theme/compare-headings.png)
+![Comparison of expressive and productive type styles](../../../images/guidelines/expressive-theme/overview/heading-styles.png)
 
 <Caption>Comparison of productive and expressive heading styles</Caption>
 
 </Column>
 </Row>
 
-The smaller expressive headings are fixed but from `$expressive-heading-03` upward the headings are responsive, or fluid. This means they change size at different breakpoints. By comparison, all of the headings in the productive type set are fixed.
-
 For a complete list of type styles, see the <a href="https://v10.carbondesignsystem.com/guidelines/typography/overview/" target="_blank" rel="noopener noreferrer"> Typography guidelines</a> on the Carbon Design System site.
 
 ## Icon sizes
@@ -106,15 +110,24 @@ The icon sizes between expressive and productive have been designed to match the
 
 In expressive situations, use 20px by 20px icons to match the larger type sizes. In productive situations, the icon sizes are generally 16px by 16px, with some exceptions where the icons may be 20px by 20px.
 
-<Row>
-<Column colMd={8} colLg={8}>
+![Icon size change](../../../images/guidelines/expressive-theme/overview/icons-usage-sizing.png)
 
-![Icon size change](../../../images/guidelines/expressive-theme/compare-icon.png)
+<Caption>16px and 20px icons are optimized to feel balanced when paired with 14pt and 16pt IBM Plex. Use 24px and 32px when larger icons are needed.</Caption>
 
-<Caption>Comparison of productive and expressive icon sizes</Caption>
+<DoDontRow>
+  <DoDont
+    type="do"
+    caption="Do use the correct icon size with IBM Plex.">
 
-</Column>
-</Row>
+![proper sizing](../../../images/guidelines/expressive-theme/overview/icon-usage-do.svg)
+
+  </DoDont>
+  <DoDont type="dont" caption="Don’t alter the icon-text size ratio.">
+
+![improper sizing](../../../images/guidelines/expressive-theme/overview/icon-usage-dont.svg)
+
+  </DoDont>
+</DoDontRow>
 
 ## Component sizes
 
@@ -123,7 +136,7 @@ The button, link and list componentens are often paired with the larger expressi
 <Row>
 <Column colMd={8} colLg={8}>
 
-![Component comparison](../../../images/guidelines/expressive-theme/compare-components.png)
+![Component comparison](../../../images/guidelines/expressive-theme/overview/expressive-components.png)
 
 <Caption>
   Comparison of link, list, and button in productive and expressive stylings
@@ -132,9 +145,7 @@ The button, link and list componentens are often paired with the larger expressi
 </Column>
 </Row>
 
-<br />
-
-#### Exceptions for highly interactive components
+### Exceptions for highly interactive components
 
 Where components are highly interactive in nature, we recommend always using productive styling. Components that require higher focus and more active interactions from users are best presented with an efficiency of space. The components include Accordion, Filter panel, Mega menu, and Tabs.