| Canvas background |
--wpt-color-background* |
2 |
Page background layers |
| Brand colours |
--wpt-color-* |
10 |
Primary, secondary, accent, dark, light, surface, muted, border, success, danger |
| Surface extensions |
--wpt-color-surface-* |
2 |
Raised, sunken |
| Text colours |
--wpt-color-text, link |
6 |
Text, text-inverse, text-on-primary/secondary, link, link-hover |
| Status |
--wpt-color-* |
4 |
Success, danger, warning, info |
| Accessibility |
--wpt-color-focus-ring, etc. |
5 |
Focus, selection, overlay, scrollbar |
| Borders |
--tp-border-, --tp-outline- |
5 |
Width, style, outline |
| Font families |
--wpt-font-* |
3 |
Heading, body, mono |
| Font sizes |
--wpt-text-* |
11 |
xs through 6xl, display |
| Font weights |
--wpt-font-* |
6 |
light through black |
| Line heights |
--wpt-leading-* |
6 |
none through loose |
| Letter spacing |
--tp-tracking-* |
4 |
tight, normal, wide, display |
| Spacing |
--wpt-spacing-* |
8 |
xs through 4xl |
| Layout |
--tp-container-, --tp-section-, --tp-grid-, --tp-stack- |
8 |
Widths, padding, grid |
| Navigation |
--wpt-header-, --wpt-footer-, --wpt-nav-, --tp-nav- |
10 |
Header, footer, nav |
| Border radius |
--wpt-radius-* |
6 |
none through full |
| Raw shadows |
--wpt-shadow-* |
4 |
sm through xl |
| Semantic elevation |
--tp-elevation-* |
5 |
flat, raised, card, float, modal |
| Z-index |
--tp-z-* |
7 |
base through tooltip |
| Opacity |
--tp-opacity-* |
6 |
0 through 100 |
| Interaction states |
--tp-state-* |
7 |
hover, active, disabled, focus |
| Motion (V2 reserved) |
--wpt-transition-, --tp-easing- |
6 |
Do not use in block CSS |
| Icon sizes |
--tp-icon-size-* |
9 |
xs through 5xl |
