Spacing Scale (8)
The spacing scale is used for all padding, margin, and gap values. Pick the nearest scale step, never hardcode pixel values.
| Token |
Default |
Approx px |
--wpt-spacing-xs |
0.25rem |
4px |
--wpt-spacing-sm |
0.5rem |
8px |
--wpt-spacing-md |
1rem |
16px |
--wpt-spacing-lg |
1.5rem |
24px |
--wpt-spacing-xl |
2rem |
32px |
--wpt-spacing-2xl |
3rem |
48px |
--wpt-spacing-3xl |
4rem |
64px |
--wpt-spacing-4xl |
6rem |
96px |
Spacing attribute values (blockPadding: 'xl') map to these tokens. The block validator flags hardcoded px values in CSS the same way it flags hardcoded hex colours.
Layout Constants (8)
| Token |
Default |
Use for |
--tp-container-narrow |
680px |
Article / prose width |
--tp-container-default |
1200px |
Standard page width |
--tp-container-wide |
1400px |
Wide layouts |
--tp-section-padding-y |
5rem |
Top and bottom section padding |
--tp-section-padding-x |
1.5rem |
Left and right section padding |
--tp-grid-columns |
12 |
Grid column count |
--tp-grid-gap |
1.5rem |
Grid column gap |
--tp-stack-gap |
1.5rem |
Vertical stack gap |
Navigation (10)
| Token |
Default |
--wpt-header-height |
70px |
--wpt-header-bg |
#FFFFFF |
--wpt-header-text |
#1A1A1D |
--wpt-footer-bg |
#1A1A1D |
--wpt-footer-text |
#F8F9FA |
--wpt-nav-link-color |
#1A1A1D |
--wpt-nav-link-hover |
#FF6B35 |
--wpt-nav-link-active |
#FF6B35 |
--tp-nav-font-size |
0.9375rem |
--tp-nav-font-weight |
500 |
