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.
Set color with var(--site-*).
| Variable | Use |
|---|---|
--site-bg |
Page background |
--site-foreground |
Raised surface |
--site-card |
Card surface |
--site-heading |
Headings |
--site-paragraph |
Body text |
--site-muted |
Secondary text |
--site-link |
Links |
--site-accent |
Brand highlight |
--site-accent-text |
Text on the accent |
--site-button |
Primary button fill |
--site-button-text |
Primary button label |
--site-border |
Hairline borders |
Palette slots, for fields.themeColor and component color props:
| Key | Variable |
|---|---|
lightest |
--site-palette-lightest |
light |
--site-palette-light |
accent |
--site-palette-accent |
dark |
--site-palette-dark |
darkest |
--site-palette-darkest |
<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.
| Variable | Use |
|---|---|
--site-font-sans |
Body font |
--site-font-display |
Display font |
--site-radius |
Corner radius |
--site-item-spacing |
Gap between cards and items |
--site-section-y |
Section padding |
--site-content-max |
Content width |
--site-shadow |
Card shadow |
<div
style={{
display: "grid",
gap: "var(--site-item-spacing)",
gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
}}
>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.
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:
fetch, eval, Function, WebSocket, and XMLHttpRequestwindow, document, localStorage, sessionStorage, navigator, cookieStore, and indexedDBdangerouslySetInnerHTMLa, form, input, script, style, iframe, svg, video, canvas, and linkSiteButtonbg-[red] or w-[37px]Links and buttons go through
SiteButtonand afields.actionvalue. Destinations stay on the site, and external, phone, and email links stay explicit.