chore: Improve presentation of design token tables (#1456)

Amsterdam · Jul 26, 2024 · b7b5710 · b7b5710
1 parent f5176b1
commit b7b5710
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 174 deletions.
diff --git a/packages/css/src/components/gap/README.md b/packages/css/src/components/gap/README.md
@@ -8,13 +8,13 @@ Adds white space between a set of elements.
 
 The five sizes of [Component Space](/docs/brand-design-tokens-space--docs) are available for the width or height of the gap.
 
-| Class name    | Preview                                                                                   |
+| Class name    | Example                                                                                   |
 | ------------- | ----------------------------------------------------------------------------------------- |
-| `ams-gap--xs` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-gap-xs);" /> |
-| `ams-gap--sm` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-gap-sm);" /> |
-| `ams-gap--md` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-gap-md);" /> |
-| `ams-gap--lg` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-gap-lg);" /> |
-| `ams-gap--xl` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-gap-xl);" /> |
+| `ams-gap--xs` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-gap-xs);" /> |
+| `ams-gap--sm` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-gap-sm);" /> |
+| `ams-gap--md` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-gap-md);" /> |
+| `ams-gap--lg` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-gap-lg);" /> |
+| `ams-gap--xl` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-gap-xl);" /> |
 
 ## Guidelines
 

diff --git a/packages/css/src/components/margin/README.md b/packages/css/src/components/margin/README.md
@@ -8,13 +8,13 @@ Adds white space below a single element.
 
 The five sizes of [Component Space](/docs/brand-design-tokens-space--docs) are available for the height of the bottom margin.
 
-| Class name   | Preview                                                                                      |
+| Class name   | Example                                                                                      |
 | ------------ | -------------------------------------------------------------------------------------------- |
-| `ams-mb--xs` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-margin-xs);" /> |
-| `ams-mb--sm` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-margin-sm);" /> |
-| `ams-mb--md` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-margin-md);" /> |
-| `ams-mb--lg` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-margin-lg);" /> |
-| `ams-mb--xl` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-margin-xl);" /> |
+| `ams-mb--xs` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-margin-xs);" /> |
+| `ams-mb--sm` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-margin-sm);" /> |
+| `ams-mb--md` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-margin-md);" /> |
+| `ams-mb--lg` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-margin-lg);" /> |
+| `ams-mb--xl` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-margin-xl);" /> |
 
 ## Guidelines
 

diff --git a/storybook/src/foundation/design-tokens/border.docs.mdx b/storybook/src/foundation/design-tokens/border.docs.mdx
@@ -12,9 +12,9 @@ Elements that have a border, outline or underline use one of these widths.
 
 We have 4 border widths:
 
-| Size            | px  |  rem   | Token name            | Example                                                                                                             |
-| :-------------- | :-: | :----: | :-------------------- | ------------------------------------------------------------------------------------------------------------------- |
-| **Small**       |  1  | 0.0625 | `ams.border.width.sm` | <div className="ams-docs-token-preview--border" style={{ borderInlineStartWidth: 'var(--ams-border-width-sm)' }} /> |
-| **Medium**      |  2  | 0.125  | `ams.border.width.md` | <div className="ams-docs-token-preview--border" style={{ borderInlineStartWidth: 'var(--ams-border-width-md)' }} /> |
-| **Large**       |  3  | 0.1875 | `ams.border.width.lg` | <div className="ams-docs-token-preview--border" style={{ borderInlineStartWidth: 'var(--ams-border-width-lg)' }} /> |
-| **Extra large** |  4  |  0.25  | `ams.border.width.xl` | <div className="ams-docs-token-preview--border" style={{ borderInlineStartWidth: 'var(--ams-border-width-xl)' }} /> |
+| Token name            | px  |  rem   | Example                                                                                                             |
+| :-------------------- | :-: | :----: | ------------------------------------------------------------------------------------------------------------------- |
+| `ams.border.width.sm` |  1  | 0.0625 | <div className="ams-docs-token-example--border" style={{ borderInlineStartWidth: 'var(--ams-border-width-sm)' }} /> |
+| `ams.border.width.md` |  2  | 0.125  | <div className="ams-docs-token-example--border" style={{ borderInlineStartWidth: 'var(--ams-border-width-md)' }} /> |
+| `ams.border.width.lg` |  3  | 0.1875 | <div className="ams-docs-token-example--border" style={{ borderInlineStartWidth: 'var(--ams-border-width-lg)' }} /> |
+| `ams.border.width.xl` |  4  |  0.25  | <div className="ams-docs-token-example--border" style={{ borderInlineStartWidth: 'var(--ams-border-width-xl)' }} /> |
diff --git a/storybook/src/foundation/design-tokens/space.docs.mdx b/storybook/src/foundation/design-tokens/space.docs.mdx
@@ -23,25 +23,25 @@ We offer 5 sizes.
 Because our typography is fluid in Spacious Mode, spacing is as well.
 The medium space grows from 18 to 24 pixels between window widths of 320 and 1600.
 
-|                 |      |    320 |      832 |   1600 | Preview                                                                                         |
-| --------------: | :--: | -----: | -------: | -----: | ----------------------------------------------------------------------------------------------- |
-| **Extra small** | `xs` |    4.5 |      5.1 |      6 | <div className="ams-docs-token-preview--space" style={{ inlineSize: 'var(--ams-space-xs)' }} /> |
-|       **Small** | `sm` |      9 |      8.3 |     12 | <div className="ams-docs-token-preview--space" style={{ inlineSize: 'var(--ams-space-sm)' }} /> |
-|      **Medium** | `md` | **18** | **16.5** | **24** | <div className="ams-docs-token-preview--space" style={{ inlineSize: 'var(--ams-space-md)' }} /> |
-|       **Large** | `lg` |     27 |     24.9 |     36 | <div className="ams-docs-token-preview--space" style={{ inlineSize: 'var(--ams-space-lg)' }} /> |
-| **Extra large** | `xl` |     36 |     33.2 |     48 | <div className="ams-docs-token-preview--space" style={{ inlineSize: 'var(--ams-space-xl)' }} /> |
+| Token name     | ≤&nbsp;320 |      832 | ≥&nbsp;1600 | Example                                                                                         |
+| :------------- | ---------: | -------: | ----------: | ----------------------------------------------------------------------------------------------- |
+| `ams-space-xs` |        4.5 |      5.1 |           6 | <div className="ams-docs-token-example--space" style={{ inlineSize: 'var(--ams-space-xs)' }} /> |
+| `ams-space-sm` |          9 |      8.3 |          12 | <div className="ams-docs-token-example--space" style={{ inlineSize: 'var(--ams-space-sm)' }} /> |
+| `ams-space-md` |     **18** | **16.5** |      **24** | <div className="ams-docs-token-example--space" style={{ inlineSize: 'var(--ams-space-md)' }} /> |
+| `ams-space-lg` |         27 |     24.9 |          36 | <div className="ams-docs-token-example--space" style={{ inlineSize: 'var(--ams-space-lg)' }} /> |
+| `ams-space-xl` |         36 |     33.2 |          48 | <div className="ams-docs-token-example--space" style={{ inlineSize: 'var(--ams-space-xl)' }} /> |
 
 ### Compact
 
 In Compact Mode, the medium space is 16 pixels.
 
-|                 |      |        | Preview                                                                                                            |
-| --------------: | :--: | -----: | ------------------------------------------------------------------------------------------------------------------ |
-| **Extra small** | `xs` |      4 | <div className="ams-theme--compact ams-docs-token-preview--space" style={{ inlineSize: 'var(--ams-space-xs)' }} /> |
-|       **Small** | `sm` |      8 | <div className="ams-theme--compact ams-docs-token-preview--space" style={{ inlineSize: 'var(--ams-space-sm)' }} /> |
-|      **Medium** | `md` | **16** | <div className="ams-theme--compact ams-docs-token-preview--space" style={{ inlineSize: 'var(--ams-space-md)' }} /> |
-|       **Large** | `lg` |     24 | <div className="ams-theme--compact ams-docs-token-preview--space" style={{ inlineSize: 'var(--ams-space-lg)' }} /> |
-| **Extra large** | `xl` |     32 | <div className="ams-theme--compact ams-docs-token-preview--space" style={{ inlineSize: 'var(--ams-space-xl)' }} /> |
+| Token name     |        | Example                                                                                                            |
+| :------------- | -----: | ------------------------------------------------------------------------------------------------------------------ |
+| `ams-space-xs` |      4 | <div className="ams-theme--compact ams-docs-token-example--space" style={{ inlineSize: 'var(--ams-space-xs)' }} /> |
+| `ams-space-sm` |      8 | <div className="ams-theme--compact ams-docs-token-example--space" style={{ inlineSize: 'var(--ams-space-sm)' }} /> |
+| `ams-space-md` | **16** | <div className="ams-theme--compact ams-docs-token-example--space" style={{ inlineSize: 'var(--ams-space-md)' }} /> |
+| `ams-space-lg` |     24 | <div className="ams-theme--compact ams-docs-token-example--space" style={{ inlineSize: 'var(--ams-space-lg)' }} /> |
+| `ams-space-xl` |     32 | <div className="ams-theme--compact ams-docs-token-example--space" style={{ inlineSize: 'var(--ams-space-xl)' }} /> |
 
 ## Grid Space
 
@@ -59,150 +59,25 @@ The tables below show the resulting pixel widths at some reference widths.
 
 In Spacious Mode, the medium grid space grows from 16 to 56 pixels between window widths of 320 and 1600.
 
-|                 |  320   |  576   |  832   |  1088  |  1344  |  1600  | Preview                                                                                              |
-| --------------: | :----: | :----: | :----: | :----: | :----: | :----: | ---------------------------------------------------------------------------------------------------- |
-| **Extra small** |   4    |   6    |   8    |   10   |   12   |   14   | <div className="ams-docs-token-preview--space" style={{ inlineSize: 'var(--ams-space-grid-xs)' }} /> |
-|       **Small** |   8    |   12   |   16   |   20   |   24   |   28   | <div className="ams-docs-token-preview--space" style={{ inlineSize: 'var(--ams-space-grid-sm)' }} /> |
-|      **Medium** | **16** | **24** | **32** | **40** | **48** | **56** | <div className="ams-docs-token-preview--space" style={{ inlineSize: 'var(--ams-space-grid-md)' }} /> |
-|       **Large** |   24   |   36   |   48   |   60   |   72   |   84   | <div className="ams-docs-token-preview--space" style={{ inlineSize: 'var(--ams-space-grid-lg)' }} /> |
-| **Extra large** |   32   |   48   |   64   |   80   |   96   |  112   | <div className="ams-docs-token-preview--space" style={{ inlineSize: 'var(--ams-space-grid-xl)' }} /> |
+| Token name          | ≤&nbsp;320 |  576   |  832   |  1088  |  1344  | ≥&nbsp;1600 | Example                                                                                              |
+| :------------------ | :--------: | :----: | :----: | :----: | :----: | :---------: | ---------------------------------------------------------------------------------------------------- |
+| `ams-space-grid-xs` |     4      |   6    |   8    |   10   |   12   |     14      | <div className="ams-docs-token-example--space" style={{ inlineSize: 'var(--ams-space-grid-xs)' }} /> |
+| `ams-space-grid-sm` |     8      |   12   |   16   |   20   |   24   |     28      | <div className="ams-docs-token-example--space" style={{ inlineSize: 'var(--ams-space-grid-sm)' }} /> |
+| `ams-space-grid-md` |   **16**   | **24** | **32** | **40** | **48** |   **56**    | <div className="ams-docs-token-example--space" style={{ inlineSize: 'var(--ams-space-grid-md)' }} /> |
+| `ams-space-grid-lg` |     24     |   36   |   48   |   60   |   72   |     84      | <div className="ams-docs-token-example--space" style={{ inlineSize: 'var(--ams-space-grid-lg)' }} /> |
+| `ams-space-grid-xl` |     32     |   48   |   64   |   80   |   96   |     112     | <div className="ams-docs-token-example--space" style={{ inlineSize: 'var(--ams-space-grid-xl)' }} /> |
 
 #### Compact
 
 In Compact Mode, the medium grid space grows from 16 to 40 pixels between window widths of 1088 and 2624.
 
-<table>
-  <thead>
-    <tr>
-      <th style={{ textAlign: "right" }}></th>
-      <th style={{ textAlign: "center" }}>320</th>
-      <th style={{ textAlign: "center" }}>576</th>
-      <th style={{ textAlign: "center" }}>832</th>
-      <th style={{ textAlign: "center" }}>1088</th>
-      <th style={{ textAlign: "center" }}>1344</th>
-      <th style={{ textAlign: "center" }}>1600</th>
-      <th style={{ textAlign: "center" }}>1856</th>
-      <th style={{ textAlign: "center" }}>2112</th>
-      <th style={{ textAlign: "center" }}>2368</th>
-      <th style={{ textAlign: "center" }}>2624</th>
-      <th>Preview</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td style={{ textAlign: "right" }}>
-        <strong>Extra small</strong>
-      </td>
-      <td colspan={4} style={{ textAlign: "center" }}>
-        4
-      </td>
-      <td style={{ textAlign: "center" }}>5</td>
-      <td style={{ textAlign: "center" }}>6</td>
-      <td style={{ textAlign: "center" }}>7</td>
-      <td style={{ textAlign: "center" }}>8</td>
-      <td style={{ textAlign: "center" }}>9</td>
-      <td style={{ textAlign: "center" }}>10</td>
-      <td>
-        <div
-          className="ams-theme--compact ams-docs-token-preview--space"
-          style={{ inlineSize: "var(--ams-space-grid-xs)" }}
-        />
-      </td>
-    </tr>
-    <tr>
-      <td style={{ textAlign: "right" }}>
-        <strong>Small</strong>
-      </td>
-      <td colspan={4} style={{ textAlign: "center" }}>
-        8
-      </td>
-      <td style={{ textAlign: "center" }}>10</td>
-      <td style={{ textAlign: "center" }}>12</td>
-      <td style={{ textAlign: "center" }}>14</td>
-      <td style={{ textAlign: "center" }}>16</td>
-      <td style={{ textAlign: "center" }}>18</td>
-      <td style={{ textAlign: "center" }}>20</td>
-      <td>
-        <div
-          className="ams-theme--compact ams-docs-token-preview--space"
-          style={{ inlineSize: "var(--ams-space-grid-sm)" }}
-        />
-      </td>
-    </tr>
-    <tr>
-      <td style={{ textAlign: "right" }}>
-        <strong>Medium</strong>
-      </td>
-      <td colspan={4} style={{ textAlign: "center" }}>
-        <strong>16</strong>
-      </td>
-      <td style={{ textAlign: "center" }}>
-        <strong>20</strong>
-      </td>
-      <td style={{ textAlign: "center" }}>
-        <strong>24</strong>
-      </td>
-      <td style={{ textAlign: "center" }}>
-        <strong>28</strong>
-      </td>
-      <td style={{ textAlign: "center" }}>
-        <strong>32</strong>
-      </td>
-      <td style={{ textAlign: "center" }}>
-        <strong>36</strong>
-      </td>
-      <td style={{ textAlign: "center" }}>
-        <strong>40</strong>
-      </td>
-      <td>
-        <div
-          className="ams-theme--compact ams-docs-token-preview--space"
-          style={{ inlineSize: "var(--ams-space-grid-md)" }}
-        />
-      </td>
-    </tr>
-    <tr>
-      <td style={{ textAlign: "right" }}>
-        <strong>Large</strong>
-      </td>
-      <td colspan={4} style={{ textAlign: "center" }}>
-        24
-      </td>
-      <td style={{ textAlign: "center" }}>30</td>
-      <td style={{ textAlign: "center" }}>36</td>
-      <td style={{ textAlign: "center" }}>42</td>
-      <td style={{ textAlign: "center" }}>48</td>
-      <td style={{ textAlign: "center" }}>54</td>
-      <td style={{ textAlign: "center" }}>60</td>
-      <td>
-        <div
-          className="ams-theme--compact ams-docs-token-preview--space"
-          style={{ inlineSize: "var(--ams-space-grid-lg)" }}
-        />
-      </td>
-    </tr>
-    <tr>
-      <td style={{ textAlign: "right" }}>
-        <strong>Extra large</strong>
-      </td>
-      <td colspan={4} style={{ textAlign: "center" }}>
-        32
-      </td>
-      <td style={{ textAlign: "center" }}>40</td>
-      <td style={{ textAlign: "center" }}>48</td>
-      <td style={{ textAlign: "center" }}>56</td>
-      <td style={{ textAlign: "center" }}>64</td>
-      <td style={{ textAlign: "center" }}>72</td>
-      <td style={{ textAlign: "center" }}>80</td>
-      <td>
-        <div
-          className="ams-theme--compact ams-docs-token-preview--space"
-          style={{ inlineSize: "var(--ams-space-grid-xl)" }}
-        />
-      </td>
-    </tr>
-  </tbody>
-</table>
+| Token name          | ≤&nbsp;1088 |  1344  |  1600  |  1856  |  2112  |  2368  | ≥&nbsp;2624 | Example                                                                                                                 |
+| ------------------- | :---------: | :----: | :----: | :----: | :----: | :----: | :---------: | ----------------------------------------------------------------------------------------------------------------------- |
+| `ams-space-grid-xs` |      4      |   5    |   6    |   7    |   8    |   9    |     10      | <div className="ams-theme--compact ams-docs-token-example--space" style={{ inlineSize: "var(--ams-space-grid-sm)" }} /> |
+| `ams-space-grid-md` |      8      |   10   |   12   |   14   |   16   |   18   |     20      | <div className="ams-theme--compact ams-docs-token-example--space" style={{ inlineSize: "var(--ams-space-grid-sm)" }} /> |
+| `ams-space-grid-lg` |   **16**    | **20** | **24** | **28** | **32** | **36** |   **40**    | <div className="ams-theme--compact ams-docs-token-example--space" style={{ inlineSize: "var(--ams-space-grid-md)" }} /> |
+| `ams-space-grid-xl` |     24      |   30   |   36   |   42   |   48   |   54   |     60      | <div className="ams-theme--compact ams-docs-token-example--space" style={{ inlineSize: "var(--ams-space-grid-lg)" }} /> |
+| `ams-space-grid-xs` |     32      |   40   |   48   |   56   |   64   |   72   |     80      | <div className="ams-theme--compact ams-docs-token-example--space" style={{ inlineSize: "var(--ams-space-grid-xl)" }} /> |
 
 ## Type Space
 

diff --git a/storybook/src/styles/docs.css b/storybook/src/styles/docs.css
@@ -110,15 +110,15 @@
   min-inline-size: 3rem;
 }
 
-[class*="ams-docs-token-preview--"] {
+[class*="ams-docs-token-example--"] {
   block-size: 1rem;
 }
 
-[class*="ams-docs-token-preview--border"] {
+[class*="ams-docs-token-example--border"] {
   border-inline-start-style: solid;
 }
 
-[class*="ams-docs-token-preview--space"] {
+[class*="ams-docs-token-example--space"] {
   background-color: var(--ams-color-primary-white);
   outline: 1px dashed var(--ams-color-neutral-grey2);
 }