> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fluid.app/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> For new direct REST integrations, use the v2026-04 surfaces. The @fluid-app FairShare SDK continues to use its own published public-v2025-06 contract.
> Authenticate with the header Authorization: Bearer <token>; public storefront read endpoints require no auth.
> Lists use cursor pagination via the page[cursor] and page[limit] query params; follow meta.pagination.next_cursor until it is null.
> Never use /api/company/v1 or /api/v1 paths, page/per_page params, or offset pagination — they are legacy.
> The OpenAPI specs under api-reference/ are the authoritative contracts; prefer them over prose when in doubt. api-reference/storefront-v2026-04.yaml covers the v2026-04 storefront surface (/api/v202604/... paths); api-reference/auth-v0.yaml covers the unversioned auth surface (/api/... paths — authentication, MFA, social auth, and token exchange); api-reference/checkout-v2026-04.yaml covers the v2026-04 checkout surface (/api/checkout/v2026-04/... paths — carts, cart auth, discounts, items, subscriptions, orders, enrollments, and store config); api-reference/public-v2025-06.yaml covers the Public SDK surface used by the @fluid-app FairShare SDK, including its parallel cart lifecycle, browser integrations, versioned payment callbacks, unversioned public utilities, and the cart price-override operation; api-reference/payment-v2026-04.yaml covers the v2026-04 payment gateway admin surface (/api/payment/v2026-04/... paths, bearer-authenticated — gateway CRUD, gateway purchase/authorize/$0-verify, transaction list/show and capture/void/credit, and merchant payment configuration); api-reference/payments-v2026-04.yaml covers the v2026-04 cart payment surface (/api/payments/v2026-04/carts/{cart_token}/... paths, authenticated by the cart token in the path with no bearer — payment-method selection, VGS card tokenization, 3D Secure verification, and PayPal/Braintree/Klarna/Apple Pay flows); api-reference/commerce-v2026-04.yaml covers the v2026-04 commerce order-editing surface (/api/v202604/orders/{order_id}/edits paths, bearer-authenticated — post-checkout order edits that atomically insert items and add adjustments/discounts, with an optional dry-run preview); api-reference/webhooks-v0.yaml covers the unversioned webhooks surface (/api/... paths — webhook registration, delivery payloads, callback registrations, company events, and webhook/callback schemas).
> Successful responses wrap the resource payload alongside a top-level integer status and a meta object.

# Link editor presets to CSS variables

> Connect page-editor typography, color, radius, and spacing presets to theme CSS variables.

Linked presets let editor content follow your theme settings. Instead of saving a fixed value such as `32px`, the editor saves a CSS reference such as `var(--heading-size)`.

When the theme value changes, every linked use updates without editing the content again.

## Define a theme setting

Create settings in `config/settings_schema.json`. Keep related settings in the groups the editor recognizes:

| Group               | Used for                 |
| ------------------- | ------------------------ |
| `typography`        | Text-size presets        |
| `color_schema`      | Color presets            |
| `corner_radius`     | Corner-radius presets    |
| `padding`           | Spacing presets          |
| `custom_font_sizes` | Additional text presets  |
| `custom_colors`     | Additional color presets |

```json theme={null}
{
  "name": "typography",
  "settings": [
    {
      "type": "range",
      "id": "heading_size",
      "label": "Heading size",
      "min": 24,
      "max": 72,
      "step": 1,
      "default": 40,
      "unit": "px",
      "role": "heading"
    }
  ]
}
```

## Connect the setting to a CSS variable

Declare a CSS custom property in `layouts/theme.liquid` and read the setting into it:

```liquid theme={null}
{% style %}
  :root {
    --heading-size: {{ settings.heading_size | append: 'px' }};
  }
{% endstyle %}
```

The CSS variable name does not need to match the setting ID. The link comes from the `settings.heading_size` reference.

When the editor links the preset, it saves the complete `var()` expression:

```css theme={null}
font-size: var(--heading-size);
```

It never saves the bare token `--heading-size` as a property value.

## Make presets responsive

Keep the saved content linked to one variable and change the variable in the cascade:

```css theme={null}
:root {
  --content-gap: 12px;
}

@media (min-width: 768px) {
  :root {
    --content-gap: 24px;
  }
}
```

Content that uses `var(--content-gap)` now adapts without separate mobile and desktop content.

## Control typography

Each typography preset can resolve size, family, and weight independently.

For new size settings, use `role: "heading"` or `role: "body"`. Existing setting IDs that begin with `font_size_h` continue to behave as headings when no role is present.

Use explicit references when a size preset should follow separate font settings:

```json theme={null}
{
  "type": "range",
  "id": "heading_size",
  "label": "Heading size",
  "default": 40,
  "unit": "px",
  "role": "heading",
  "font_family_ref": "heading_font",
  "font_weight_ref": "heading_weight"
}
```

The editor resolves each dimension in this order:

* Family: explicit reference, literal value, then the font for the setting's role.
* Weight: explicit reference, literal value, then the default for the role.
* Size: the setting value and its `unit`, defaulting to `px`.

An explicit reference links to that setting's CSS variable when one is declared. A literal stays a literal.

## Understand value precedence

The editor chooses the first available value:

1. An unsaved value in the theme panel
2. The saved theme value
3. The setting's schema default
4. The editor fallback

This lets the preset menu follow live theme edits before you save.

## Link radius and padding

Put radius and spacing settings in the `corner_radius` and `padding` groups. Declare a CSS variable for each setting:

```liquid theme={null}
{% style %}
  :root {
    --card-radius: {{ settings.card_radius | append: 'px' }};
    --section-gap: {{ settings.section_gap | append: 'px' }};
  }
{% endstyle %}
```

When linked, radius and padding controls store `var(--card-radius)` and `var(--section-gap)`. A linked all-sides control applies the selected preset to every side or corner.

## Unlink a preset

Use **Unlink Variables** in the editor when one content item needs a fixed value. The editor resolves the current CSS values and exposes the individual controls.

Use **Link Variables** to return to the theme-driven preset workflow.

<Tip>
  Prefer linked values for your design system. Unlink only intentional exceptions, because fixed values no longer follow later theme changes.
</Tip>

For the broader configuration flow, see [root theme configuration](/themes/root-theme-configuration).