Fluid values

Purpose

assets/css/vars/primitives.css contains calculated values based on clamp(). They change smoothly between 375px and 1280px viewport widths, and are fixed to the minimum or maximum outside that range.

These values are the Primitive layer. Consumers usually select a WordPress preset from theme.json, not a primitive directly.

Naming

General format:

--size-fluid{scale}-{target}px

or, for typographic scales with a minimum size:

--size-fluid{scale}-min12-{target}px

Where:

• scale indicates the ratio of maximum to minimum;
• target is the maximum in pixels at a 1280px viewport;
• the actual value is stored in rem and vw inside clamp().

Example:

--size-fluid150-24px:
  clamp(1rem, 0.793rem + 0.884vw, 1.5rem);

At narrow viewports, the value approaches 16px; at wide ones, 24px.

Families

All families target the same viewport range: 375px → 1280px.

Relationship to spacing presets

theme.json publishes two positive spacing scales.

Fluid scale

Presets fluid-* primarily use fluid300, and therefore shrink more noticeably on small viewports:

fluid-md
    ↓
--size-fluid300-16px
    ↓
--wp--preset--spacing--fluid-md

Compact scale

Presets without the fluid- prefix use fluid150, and therefore change more gently:

md
    ↓
--size-fluid150-16px
    ↓
--wp--preset--spacing--md

Both scales have negative minus-* presets.

Relationship to font-size presets

Font sizes are distributed across several families:

• small 3-xs — xl: fluid130-min12;
• small fluid-3-xs — fluid-xl: fluid170-min12;
• larger normal sizes: fluid150 and fluid200;
• larger fluid sizes: fluid200 and fluid300;
• huge and huge-fluid use overridable Core contract aliases.

The normal and fluid font-size preset names describe different degrees of responsiveness, not fixed and fluid values: both groups may contain clamp().

Selecting a value

Consumers select a semantic preset:

.section {
  padding-block: var(--wp--preset--spacing--fluid-4-xl);
}

Do not select a primitive merely because its name contains a familiar pixel target:

/* Incorrect */
.section {
  padding-block: var(--size-fluid300-60px);
}

A primitive is acceptable within the system layer:

{
  "slug": "fluid-4-xl",
  "size": "var(--size-fluid300-60px)"
}

Formula

In simplified form, the value is built as follows:

clamp(minimum, intercept + slope * 1vw, maximum)

primitives.css contains a detailed slope calculation and examples. The documentation does not duplicate every calculated variable: always take the full set and exact formulas from this file.

Changing scales

Changing a primitive family immediately affects every preset that references it.

Before changing it:

1. find consumers in theme.json;
2. check normal and fluid scales;
3. evaluate the frontend and editor;
4. check child-theme overrides;
5. rebuild CSS bundles for all dependent child themes;
6. update this documentation if the contract or purpose of the family changed.