Public API reference

Contents:

Colors
Core contract defaults
Spacing
Special
Fluid scale
Compact scale
Font sizes
Special and percentage
Named scale
More fluid named scale
Huge
Font families
Semantic typography
Radius
Z-index
Motion
Shadows
Empty extension points
Core contract aliases
Breakpoints
Runtime variables
Layout and units

This document catalogs the public presets and semantic/Core variables of the current core-fse.

Ultimate sources of truth:

theme.json;
assets/css/vars/semantic.css;
assets/css/vars/theme-core.css.

Colors

Slug	CSS variable	Source
`base`	`--wp--preset--color--base`	`--color-base`
`contrast`	`--wp--preset--color--contrast`	`--color-contrast`
`accent`	`--wp--preset--color--accent`	`--color-accent`
`on-accent`	`--wp--preset--color--on-accent`	`--color-on-accent`
`on-image`	`--wp--preset--color--on-image`	`--color-on-image`
`links`	`--wp--preset--color--links`	`--color-links`
`links-hover`	`--wp--preset--color--links-hover`	`--color-links-hover`
`transparent`	`--wp--preset--color--transparent`	`transparent`
`currentColor`	`--wp--preset--color--currentColor`	`currentColor`

A child theme can extend the palette, but must retain the roles on which the site depends.

Core contract defaults

Variable	Fallback
`--color-base`	`white`
`--color-contrast`	`black`
`--color-accent`	`#851f5a`
`--color-on-accent`	`white`
`--color-on-image`	`white`
`--color-links`	`#04548d`
`--color-links-hover`	`#022c4a`
`--color-transparent`	`transparent`
`--color-currentColor`	`currentColor`

The first seven variables are the required brand contract for a production child theme. The last two are technical values; the core palette currently uses the transparent and currentColor literals.

Spacing

Special

Slug	CSS variable	Purpose
`auto`	`--wp--preset--spacing--auto`	`auto`
`edge-x`	`--wp--preset--spacing--edge-x`	horizontal page edge
`base-gap`	`--wp--preset--spacing--base-gap`	base block gap
`minus-edge-x`	`--wp--preset--spacing--minus-edge-x`	negative page edge

Fluid scale

Slug	Primitive source
`fluid-2-xs`	`--size-fluid300-4px`
`fluid-xs`	`--size-fluid300-8px`
`fluid-sm`	`--size-fluid300-12px`
`fluid-md`	`--size-fluid300-16px`
`fluid-lg`	`--size-fluid300-24px`
`fluid-xl`	`--size-fluid300-32px`
`fluid-2-xl`	`--size-fluid300-40px`
`fluid-3-xl`	`--size-fluid300-50px`
`fluid-4-xl`	`--size-fluid300-60px`
`fluid-5-xl`	`--size-fluid300-70px`
`fluid-6-xl`	`--size-fluid300-80px`
`fluid-7-xl`	`--size-fluid300-90px`
`fluid-8-xl`	`--size-fluid300-100px`
`fluid-9-xl`	`--size-fluid300-120px`
`fluid-10-xl`	`--size-fluid300-140px`
`fluid-11-xl`	`--size-fluid400-160px`
`fluid-12-xl`	`--size-fluid400-180px`

The CSS variable format is:

--wp--preset--spacing--{slug}

Each slug has a negative version prefixed with minus-, from minus-fluid-2-xs to minus-fluid-12-xl.

Negative slug	Source
`minus-fluid-2-xs`	`calc(-1 * var(--size-fluid300-4px))`
`minus-fluid-xs`	`calc(-1 * var(--size-fluid300-8px))`
`minus-fluid-sm`	`calc(-1 * var(--size-fluid300-12px))`
`minus-fluid-md`	`calc(-1 * var(--size-fluid300-16px))`
`minus-fluid-lg`	`calc(-1 * var(--size-fluid300-24px))`
`minus-fluid-xl`	`calc(-1 * var(--size-fluid300-32px))`
`minus-fluid-2-xl`	`calc(-1 * var(--size-fluid300-40px))`
`minus-fluid-3-xl`	`calc(-1 * var(--size-fluid300-50px))`
`minus-fluid-4-xl`	`calc(-1 * var(--size-fluid300-60px))`
`minus-fluid-5-xl`	`calc(-1 * var(--size-fluid300-70px))`
`minus-fluid-6-xl`	`calc(-1 * var(--size-fluid300-80px))`
`minus-fluid-7-xl`	`calc(-1 * var(--size-fluid300-90px))`
`minus-fluid-8-xl`	`calc(-1 * var(--size-fluid300-100px))`
`minus-fluid-9-xl`	`calc(-1 * var(--size-fluid300-120px))`
`minus-fluid-10-xl`	`calc(-1 * var(--size-fluid300-140px))`
`minus-fluid-11-xl`	`calc(-1 * var(--size-fluid400-160px))`
`minus-fluid-12-xl`	`calc(-1 * var(--size-fluid400-180px))`

Compact scale

Slug	Primitive source
`3-xs`	`--size-fluid150-2px`
`2-xs`	`--size-fluid150-4px`
`xs`	`--size-fluid150-8px`
`sm`	`--size-fluid150-12px`
`md`	`--size-fluid150-16px`
`lg`	`--size-fluid150-24px`
`xl`	`--size-fluid150-32px`
`2-xl`	`--size-fluid150-40px`
`3-xl`	`--size-fluid150-50px`
`4-xl`	`--size-fluid150-60px`
`5-xl`	`--size-fluid150-70px`
`6-xl`	`--size-fluid150-80px`
`7-xl`	`--size-fluid150-90px`
`8-xl`	`--size-fluid150-100px`
`9-xl`	`--size-fluid150-120px`
`10-xl`	`--size-fluid150-140px`
`11-xl`	`--size-fluid150-160px`
`12-xl`	`--size-fluid150-180px`

Negative versions exist from minus-3-xs to minus-10-xl. Negative presets are not currently declared for 11-xl and 12-xl.

Negative slug	Source
`minus-3-xs`	`calc(-1 * var(--size-fluid150-2px))`
`minus-2-xs`	`calc(-1 * var(--size-fluid150-4px))`
`minus-xs`	`calc(-1 * var(--size-fluid150-8px))`
`minus-sm`	`calc(-1 * var(--size-fluid150-12px))`
`minus-md`	`calc(-1 * var(--size-fluid150-16px))`
`minus-lg`	`calc(-1 * var(--size-fluid150-24px))`
`minus-xl`	`calc(-1 * var(--size-fluid150-32px))`
`minus-2-xl`	`calc(-1 * var(--size-fluid150-40px))`
`minus-3-xl`	`calc(-1 * var(--size-fluid150-50px))`
`minus-4-xl`	`calc(-1 * var(--size-fluid150-60px))`
`minus-5-xl`	`calc(-1 * var(--size-fluid150-70px))`
`minus-6-xl`	`calc(-1 * var(--size-fluid150-80px))`
`minus-7-xl`	`calc(-1 * var(--size-fluid150-90px))`
`minus-8-xl`	`calc(-1 * var(--size-fluid150-100px))`
`minus-9-xl`	`calc(-1 * var(--size-fluid150-120px))`
`minus-10-xl`	`calc(-1 * var(--size-fluid150-140px))`

Font sizes

CSS variable:

--wp--preset--font-size--{slug}

Special and percentage

Slug	Value
`inherit`	`inherit`
`40-perc`	`40%`
`50-perc`	`50%`
`60-perc`	`60%`
`70-perc`	`70%`
`80-perc`	`80%`
`90-perc`	`90%`
`100-perc`	`100%`
`110-perc`	`110%`
`120-perc`	`120%`
`130-perc`	`130%`
`140-perc`	`140%`
`150-perc`	`150%`
`160-perc`	`160%`
`170-perc`	`170%`
`180-perc`	`180%`
`190-perc`	`190%`
`200-perc`	`200%`
`210-perc`	`210%`
`220-perc`	`220%`
`230-perc`	`230%`
`240-perc`	`240%`
`250-perc`	`250%`
`260-perc`	`260%`
`280-perc`	`280%`
`300-perc`	`300%`
`320-perc`	`320%`
`340-perc`	`340%`
`360-perc`	`360%`
`380-perc`	`380%`
`400-perc`	`400%`

Named scale

Slug	Primitive source
`3-xs`	`--size-fluid130-min12-12px`
`2-xs`	`--size-fluid130-min12-14px`
`xs`	`--size-fluid130-min12-16px`
`sm`	`--size-fluid130-min12-18px`
`md`	`--size-fluid130-min12-20px`
`lg`	`--size-fluid130-min12-24px`
`xl`	`--size-fluid130-min12-28px`
`2-xl`	`--size-fluid150-30px`
`3-xl`	`--size-fluid150-38px`
`4-xl`	`--size-fluid150-46px`
`5-xl`	`--size-fluid150-54px`
`6-xl`	`--size-fluid150-62px`
`7-xl`	`--size-fluid200-70px`
`8-xl`	`--size-fluid200-88px`
`9-xl`	`--size-fluid200-96px`
`10-xl`	`--size-fluid200-106px`

More fluid named scale

Slug	Primitive source
`fluid-3-xs`	`--size-fluid170-min12-12px`
`fluid-2-xs`	`--size-fluid170-min12-14px`
`fluid-xs`	`--size-fluid170-min12-16px`
`fluid-sm`	`--size-fluid170-min12-18px`
`fluid-md`	`--size-fluid170-min12-20px`
`fluid-lg`	`--size-fluid170-min12-24px`
`fluid-xl`	`--size-fluid170-min12-28px`
`fluid-2-xl`	`--size-fluid200-30px`
`fluid-3-xl`	`--size-fluid200-38px`
`fluid-4-xl`	`--size-fluid200-46px`
`fluid-5-xl`	`--size-fluid200-54px`
`fluid-6-xl`	`--size-fluid200-62px`
`fluid-7-xl`	`--size-fluid300-70px`
`fluid-8-xl`	`--size-fluid300-88px`
`fluid-9-xl`	`--size-fluid300-96px`
`fluid-10-xl`	`--size-fluid300-106px`

Huge

Slug	Core alias
`huge`	`--_font-size-huge`
`huge-fluid`	`--_font-size-huge-fluid`

Aliases are intended for child-theme overrides.

Font families

core-fse does not declare font-family presets. The child theme must provide the required families.

Existing child-theme convention:

Slug	Role
`basic`	body text
`headers`	headings
`alt`	alternative/UI font
`inherit`	inheritance

These slugs are not guaranteed by the parent theme until the child theme declares them.

Semantic typography

Variable	Default
`--font-weight-normal`	`500`
`--font-weight-bold`	`700`
`--line-height-tight`	`1`
`--line-height-normal`	`1.3`
`--line-height-loose`	`1.5`
`--letter-spacing-tight`	`-0.040em`
`--letter-spacing-normal`	`0.030em`
`--letter-spacing-wide`	`0.080em`

Radius

Variable	Default
`--radius-none`	`0`
`--radius-small`	`5px`
`--radius-medium`	`10px`
`--radius-large`	`15px`
`--radius-round`	`9999px`

Z-index

Variable	Default
`--z-zero`	`0`
`--z-base`	`5`
`--z-upper`	`10`
`--z-stack`	`20`
`--z-popup`	`50`
`--z-overlay`	`70`
`--z-tooltip`	`90`
`--z-max`	`99999`

Motion

Variable	Default
`--motion-duration-fast`	`200ms`
`--motion-duration-normal`	`500ms`
`--motion-duration-slow`	`1000ms`
`--motion-easing-normal`	`var(--easing-ease)`
`--motion-easing-in`	`var(--easing-ease-in)`
`--motion-easing-out`	`var(--easing-ease-out)`
`--motion-easing-bounce`	`var(--easing-bounce)`

Primitive easing variables are defined in primitives.css; normal consumers should select semantic --motion-easing-* variables.

Shadows

Variable	Default
`--shadow-natural`	`6px 6px 9px rgba(0, 0, 0, .2)`
`--shadow-deep`	`12px 12px 50px rgba(0, 0, 0, .4)`
`--shadow-sharp`	`6px 6px 0 rgba(0, 0, 0, .2)`
`--shadow-outlined`	`6px 6px 0 -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1)`
`--shadow-crisp`	`6px 6px 0 rgba(0, 0, 0, 1)`
`--shadow-inset`	`inset 0 1px 2px rgba(0, 0, 0, .1)`

Core theme.json does not publish shadow presets. The child theme can register required shadows in Gutenberg.

Empty extension points

The parent theme.json currently has:

gradients: an empty list;
shadow presets: an empty list;
custom templates: an empty list;
font families: not declared.

The child theme fills these collections when needed.

Core contract aliases

Variable	Default	Purpose
`--_spacing--edge-x`	`--size-fluid300-60px`	page horizontal edge
`--_spacing--base-gap`	`--size-fluid200-16px`	root block gap
`--_font-size-huge`	`--size-fluid200-170px`	large display size
`--_font-size-huge-fluid`	`--size-fluid400-200px`	strongly fluid display size

These aliases are internal. Use generated WordPress presets in CSS.

Breakpoints

Variable	Default
`--mobile-bp`	`768px`
`--tablet-bp`	`1024px`
`--desktop-bp`	`1200px`

CSS custom properties cannot be used directly in an ordinary @media condition. Current code marks the transition from hardcoded values as incomplete.

Runtime variables

Variable	Initial value	Change source
`--header-height`	`auto`	runtime JavaScript
`--wpadminbar-height`	`0px`	runtime JavaScript

This is layout state, not design tokens.

Layout and units

Setting	Value
content width	`50rem`
wide width	`80rem`
spacing units	`%`, `em`, `rem`, `vw`, `vh`, `dvh`, `lvh`, `svh`, `vmin`, `vmax`