diff --git a/storybook/src/foundation/design-tokens/typography.docs.mdx b/storybook/src/foundation/design-tokens/typography.docs.mdx index fb260ab197..c0e9dc97ef 100644 --- 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) |
Abc
| | `var(--ams-typography-font-size-md)` | clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem) |
Abc
| @@ -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) |
Abc
| | `var(--ams-typography-font-size-4xl)` | clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem) |
Abc
| +#### 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.