Add more token overviews to docs

Amsterdam · Feb 3, 2025 · 68fcac7 · 68fcac7
1 parent 0e5d04b
commit 68fcac7
Showing 1 changed file with 34 additions and 1 deletion.
diff --git a/storybook/src/foundation/design-tokens/typography.docs.mdx b/storybook/src/foundation/design-tokens/typography.docs.mdx
@@ -10,7 +10,9 @@ import { Meta, Typeset } from "@storybook/blocks";
 
 ### Brand tokens
 
-| Token name                            | Value                                                   | Example                                                                                                                  |
+#### Font size
+
+| CSS variable                          | Value                                                   | Example                                                                                                                  |
 | :------------------------------------ | :------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------- |
 | `var(--ams-typography-font-size-sm)`  | clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)    | <div className="ams-docs-token-example--font-size" style={{ fontSize: 'var(--ams-typography-font-size-sm)' }}>Abc</div>  |
 | `var(--ams-typography-font-size-md)`  | clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)     | <div className="ams-docs-token-example--font-size" style={{ fontSize: 'var(--ams-typography-font-size-md)' }}>Abc</div>  |
@@ -20,6 +22,37 @@ import { Meta, Typeset } from "@storybook/blocks";
 | `var(--ams-typography-font-size-3xl)` | clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem) | <div className="ams-docs-token-example--font-size" style={{ fontSize: 'var(--ams-typography-font-size-3xl)' }}>Abc</div> |
 | `var(--ams-typography-font-size-4xl)` | clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem) | <div className="ams-docs-token-example--font-size" style={{ fontSize: 'var(--ams-typography-font-size-4xl)' }}>Abc</div> |
 
+#### Line height
+
+| CSS variable                            | Value   |
+| :-------------------------------------- | :------ |
+| `var(--ams-typography-line-height-5xs)` | 113.86% |
+| `var(--ams-typography-line-height-4xs)` | 117.54% |
+| `var(--ams-typography-line-height-3xs)` | 121.33% |
+| `var(--ams-typography-line-height-2xs)` | 125.24% |
+| `var(--ams-typography-line-height-xs)`  | 129.28% |
+| `var(--ams-typography-line-height-sm)`  | 133.45% |
+| `var(--ams-typography-line-height-md)`  | 137.76% |
+| `var(--ams-typography-line-height-2xl)` | 151.52% |
+| `var(--ams-typography-line-height-5xl)` | 166.67% |
+
+#### Font weight
+
+| CSS variable                               | Value |
+| :----------------------------------------- | :---- |
+| `var(--ams-typography-font-weight-light)`  | 300   |
+| `var(--ams-typography-font-weight-normal)` | 400   |
+| `var(--ams-typography-font-weight-bold)`   | 700   |
+| `var(--ams-typography-font-weight-x-bold)` | 800   |
+
+#### Font family
+
+| CSS variable                                  | Value                               |
+| :-------------------------------------------- | :---------------------------------- |
+| `var(--ams-typography-font-family-body-text)` | 'Amsterdam Sans', Arial, sans-serif |
+| `var(--ams-typography-font-family-headings)`  | 'Amsterdam Sans', Arial, sans-serif |
+| `var(--ams-typography-font-family-monosapce)` | monospace                           |
+
 ### Seven text levels
 
 There are 7 levels of font size and corresponding line height.