Copy this template when starting a new block. Replace all occurrences of {slug} with your block’s slug.
/* ================================================================
wpt-{slug} — Block Stylesheet
All values via --wpt-* design tokens. No hardcoded hex or px.
No transition: or animation: (V2 Motion Layer reserved).
================================================================ */
/* ── Root ───────────────────────────────────────────────────── */
.wpt-{slug} {
padding: var(--wpt-{slug}-padding, var(--wpt-spacing-3xl));
gap: var(--wpt-{slug}-gap, var(--wpt-spacing-xl));
background: var(--wpt-color-light);
box-sizing: border-box;
}
/* ── Heading ────────────────────────────────────────────────── */
.wpt-{slug}__heading {
font-family: var(--wpt-font-heading);
margin: 0 0 var(--wpt-spacing-md);
}
/* ── Description ────────────────────────────────────────────── */
.wpt-{slug}__description {
font-family: var(--wpt-font-body);
font-size: var(--wpt-text-base);
color: var(--wpt-color-muted);
line-height: var(--wpt-leading-relaxed);
}
/* ── Theme modifiers ────────────────────────────────────────── */
.wpt-{slug}--theme-light { color: var(--wpt-color-text); }
.wpt-{slug}--theme-dark { color: var(--wpt-color-light); }
/* ── Background modifiers ───────────────────────────────────── */
.wpt-{slug}--bg-light { background-color: var(--wpt-color-light); }
.wpt-{slug}--bg-surface { background-color: var(--wpt-color-surface); }
.wpt-{slug}--bg-primary { background-color: var(--wpt-color-primary); color: var(--wpt-color-light); }
.wpt-{slug}--bg-secondary { background-color: var(--wpt-color-secondary); color: var(--wpt-color-light); }
.wpt-{slug}--bg-dark { background-color: var(--wpt-color-dark); color: var(--wpt-color-light); }
/* ── Heading inverts on coloured backgrounds ────────────────── */
.wpt-{slug}--bg-primary .wpt-{slug}__heading,
.wpt-{slug}--bg-secondary .wpt-{slug}__heading,
.wpt-{slug}--bg-dark .wpt-{slug}__heading,
.wpt-{slug}--theme-dark .wpt-{slug}__heading { color: var(--wpt-color-light); }
/* ── Description mutes on coloured backgrounds ──────────────── */
.wpt-{slug}--bg-primary .wpt-{slug}__description,
.wpt-{slug}--bg-secondary .wpt-{slug}__description,
.wpt-{slug}--bg-dark .wpt-{slug}__description,
.wpt-{slug}--theme-dark .wpt-{slug}__description {
color: var(--wpt-color-light);
opacity: 0.85;
}
/* ── Responsive visibility ──────────────────────────────────── */
@media (max-width: 640px) { .wpt-{slug}--hide-mobile { display: none !important; } }
@media (min-width: 641px) and (max-width: 1024px) { .wpt-{slug}--hide-tablet { display: none !important; } }
@media (min-width: 1025px) { .wpt-{slug}--hide-desktop { display: none !important; } }