PolarisTokens
| Token name | Current value | Figma usage | Description | |
|---|---|---|---|---|
Commerce | --p-font-family-sans | -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif | Use typography styles from UI kit | — |
Commerce | --p-font-family-mono | ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace | Use typography styles from UI kit | — |
Aa | --p-font-size-275 | var(--p-font-size-70-experimental) | Use typography styles from UI kit | — |
Aa | --p-font-size-325 | var(--p-font-size-80-experimental) | Use typography styles from UI kit | — |
Aa | --p-font-size-350 | var(--p-font-size-100) | Use typography styles from UI kit | — |
Aa | --p-font-size-750 | var(--p-font-size-500) | Use typography styles from UI kit | — |
Aa | --p-font-size-900 | var(--p-font-size-600) | Use typography styles from UI kit | — |
Aa | --p-font-size-1000 | var(--p-font-size-700) | Use typography styles from UI kit | — |
Aa | --p-font-size-75 | 0.75rem | Use typography styles from UI kit | — |
Aa | --p-font-size-100 | 0.875rem | Use typography styles from UI kit | — |
Aa | --p-font-size-200 | 1rem | Use typography styles from UI kit | — |
Aa | --p-font-size-300 | 1.25rem | Use typography styles from UI kit | — |
Aa | --p-font-size-400 | 1.5rem | Use typography styles from UI kit | — |
Aa | --p-font-size-500 | 1.75rem | Use typography styles from UI kit | — |
Aa | --p-font-size-600 | 2rem | Use typography styles from UI kit | — |
Aa | --p-font-size-700 | 2.5rem | Use typography styles from UI kit | — |
Aa | --p-font-weight-regular | 400 | Use typography styles from UI kit | — |
Aa | --p-font-weight-medium | 500 | Use typography styles from UI kit | — |
Aa | --p-font-weight-semibold | 600 | Use typography styles from UI kit | — |
Aa | --p-font-weight-bold | 700 | Use typography styles from UI kit | — |
--p-font-letter-spacing-densest | -0.03375rem | Use typography styles from UI kit | — | |
--p-font-letter-spacing-denser | -0.01875rem | Use typography styles from UI kit | — | |
--p-font-letter-spacing-dense | -0.0125rem | Use typography styles from UI kit | — | |
--p-font-letter-spacing-normal | 0rem | Use typography styles from UI kit | — | |
Hello World | --p-font-line-height-300 | var(--p-font-line-height-075-experimental) | Use typography styles from UI kit | — |
Hello World | --p-font-line-height-400 | var(--p-font-line-height-1) | Use typography styles from UI kit | — |
Hello World | --p-font-line-height-500 | var(--p-font-line-height-2) | Use typography styles from UI kit | — |
Hello World | --p-font-line-height-600 | var(--p-font-line-height-3) | Use typography styles from UI kit | — |
Hello World | --p-font-line-height-700 | var(--p-font-line-height-4) | Use typography styles from UI kit | — |
Hello World | --p-font-line-height-800 | var(--p-font-line-height-5) | Use typography styles from UI kit | — |
Hello World | --p-font-line-height-1000 | var(--p-font-line-height-6) | Use typography styles from UI kit | — |
Hello World | --p-font-line-height-1200 | var(--p-font-line-height-7) | Use typography styles from UI kit | — |
Hello World | --p-font-line-height-1 | 1rem | Use typography styles from UI kit | — |
Hello World | --p-font-line-height-2 | 1.25rem | Use typography styles from UI kit | — |
Hello World | --p-font-line-height-3 | 1.5rem | Use typography styles from UI kit | — |
Hello World | --p-font-line-height-4 | 1.75rem | Use typography styles from UI kit | — |
Hello World | --p-font-line-height-5 | 2rem | Use typography styles from UI kit | — |
Hello World | --p-font-line-height-6 | 2.5rem | Use typography styles from UI kit | — |
Hello World | --p-font-line-height-7 | 3rem | Use typography styles from UI kit | — |