Theme and sandbox

Custom sections inherit the site theme. Color, type, radius, and spacing come from CSS variables on the page. The compiler rejects hex colors and arbitrary Tailwind values such as w-[37px] so a theme change still restyles the section.

Color variables

Set color with var(--site-*).

Palette slots, for fields.themeColor and component color props:

<section
  className="sec-section"
  style={{ background: "var(--site-foreground)" }}
>
  <p style={{ color: "var(--site-paragraph)" }}>{body}</p>
</section>

SiteHeading and SiteText take a palette key on color and apply the matching variable for you. SiteButton uses backgroundColor and textColor the same way.

Layout variables

<div
  style={{
    display: "grid",
    gap: "var(--site-item-spacing)",
    gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
  }}
>

Class names

Page sections use sec-section on the outer <section>. Nested blocks use sui- classes the SDK components already apply, such as sui-text and sui-container. Custom layout belongs in style with theme variables.

What the compiler accepts

A file may import react and @lockii/site-sdk. Source can be up to 30,000 characters. The default export is defineSection.

The compiler rejects:

• Other packages and relative files outside the SDK
• fetch, eval, Function, WebSocket, and XMLHttpRequest
• window, document, localStorage, sessionStorage, navigator, cookieStore, and indexedDB
• dangerouslySetInnerHTML
• JSX tags a, form, input, script, style, iframe, svg, video, canvas, and link
• Event handler props on raw DOM nodes. Clicks go through SiteButton
• Hex colors in strings
• Arbitrary Tailwind values such as bg-[red] or w-[37px]

Links and buttons go through SiteButton and a fields.action value. Destinations stay on the site, and external, phone, and email links stay explicit.