Docs Design Tokens

Design Token Reference: Visual Style

Border Radius (6)

Token	Default
`--wpt-radius-none`	`0`
`--wpt-radius-sm`	`0.25rem`
`--wpt-radius-md`	`0.375rem`
`--wpt-radius-lg`	`0.5rem`
`--wpt-radius-xl`	`0.75rem`
`--wpt-radius-full`	`9999px`

Raw Shadows (4)

Prefer semantic elevation aliases over raw shadow tokens in block CSS (see below).

Token	Default
`--wpt-shadow-sm`	`0 1px 2px rgba(0,0,0,0.05)`
`--wpt-shadow-md`	`0 4px 6px -1px rgba(0,0,0,0.1)`
`--wpt-shadow-lg`	`0 10px 15px -3px rgba(0,0,0,0.1)`
`--wpt-shadow-xl`	`0 20px 25px -5px rgba(0,0,0,0.1)`

Semantic Elevation Aliases (5)

Use these in block CSS instead of raw shadow tokens. Change the alias definition once and every block using that elevation updates site-wide.

Token	Default value	Use for
`--tp-elevation-flat`	`none`	Flush surfaces, hero backgrounds
`--tp-elevation-raised`	`var(--wpt-shadow-sm)`	Subtle lift, pill buttons
`--tp-elevation-card`	`var(--wpt-shadow-md)`	Cards, feature tiles
`--tp-elevation-float`	`var(--wpt-shadow-lg)`	Dropdowns, popovers
`--tp-elevation-modal`	`var(--wpt-shadow-xl)`	Modals, overlays

/* Correct — uses semantic alias */
.wpt-feature-card { box-shadow: var(--tp-elevation-card); }

/* Avoid — references implementation detail */
.wpt-feature-card { box-shadow: var(--wpt-shadow-md); }

Z-Index Scale (7)

Token	Default
`--tp-z-base`	`0`
`--tp-z-raised`	`10`
`--tp-z-dropdown`	`100`
`--tp-z-sticky`	`200`
`--tp-z-overlay`	`300`
`--tp-z-modal`	`400`
`--tp-z-tooltip`	`500`

Opacity Scale (6)

Token	Default
`--tp-opacity-0`	`0`
`--tp-opacity-25`	`0.25`
`--tp-opacity-50`	`0.5`
`--tp-opacity-75`	`0.75`
`--tp-opacity-90`	`0.9`
`--tp-opacity-100`	`1`

Interaction State Tokens (7)

Standardises hover, active, focus, and disabled behaviour.

Token	Default
`--tp-state-hover-bg`	`rgba(0,0,0,0.04)`
`--tp-state-hover-opacity`	`0.85`
`--tp-state-active-bg`	`rgba(0,0,0,0.08)`
`--tp-state-active-opacity`	`0.75`
`--tp-state-disabled-opacity`	`0.4`
`--tp-state-disabled-cursor`	`not-allowed`
`--tp-state-focus-shadow`	`0 0 0 3px rgba(255,107,53,0.35)`

Motion Tokens (6) – Reserved for V2

These tokens exist in the ABI but must not be used in block CSS yet. The block validator rejects any transition: or animation: declarations in block CSS. These tokens are reserved for the V2 Motion Layer where all animation will be governed by motion.json contracts.

Token	Default
`--wpt-transition-fast`	`0.15s ease`
`--wpt-transition-normal`	`0.25s ease`
`--wpt-transition-slow`	`0.4s ease`
`--tp-easing-in`	`cubic-bezier(0.4, 0, 1, 1)`
`--tp-easing-out`	`cubic-bezier(0, 0, 0.2, 1)`
`--tp-easing-inout`	`cubic-bezier(0.4, 0, 0.2, 1)`

Icon Sizes (9)

Used by .wpt-icon-mask--{size} CSS modifier classes. Output the class, let the token drive the size. Never set icon dimensions with inline width and height.

Token	Default	Class
`--tp-icon-size-xs`	`16px`	`.wpt-icon-mask--xs`
`--tp-icon-size-sm`	`20px`	`.wpt-icon-mask--sm`
`--tp-icon-size-md`	`24px`	`.wpt-icon-mask--md`
`--tp-icon-size-lg`	`28px`	`.wpt-icon-mask--lg`
`--tp-icon-size-xl`	`32px`	`.wpt-icon-mask--xl`
`--tp-icon-size-2xl`	`40px`	`.wpt-icon-mask--2xl`
`--tp-icon-size-3xl`	`48px`	`.wpt-icon-mask--3xl`
`--tp-icon-size-4xl`	`56px`	`.wpt-icon-mask--4xl`
`--tp-icon-size-5xl`	`64px`	`.wpt-icon-mask--5xl`

Breakpoints – JavaScript Only

CSS custom properties cannot be used inside @media query conditions, this is a CSS specification limitation. Breakpoints are exposed as JS constants via window.wptTokens.breakpoints.

Key	Value
`sm`	`640px`
`md`	`768px`
`lg`	`1024px`
`xl`	`1280px`
`2xl`	`1536px`

var bp = window.wptTokens && window.wptTokens.breakpoints;
if ( bp && window.innerWidth >= parseInt( bp.lg, 10 ) ) {
    // large screen logic
}