| 1 |
// Design tokens — the single source of truth for the form-builder editor's |
| 2 |
// visual language. Mirrors the Figma handoff ("Profile Builder draft" → |
| 3 |
// Variable Specs / Style Guide frames). Named category/role, like the Figma |
| 4 |
// variables. |
| 5 |
// |
| 6 |
// Emitted as CSS custom properties on :root so they resolve in BOTH the main |
| 7 |
// admin document (top bar / rails) AND the iframed canvas (field blocks) — the |
| 8 |
// editor bundle is injected into both contexts, so this :root block lands in |
| 9 |
// each document. Partials reference these with var(--wppb-fb-*) directly; they |
| 10 |
// do NOT @use this file (these are runtime CSS vars, not Sass variables). |
| 11 |
// |
| 12 |
// Accent is pinned to the Figma blue (#3858e9), NOT `var(--wp-admin-theme-color)`. |
| 13 |
// The design specifies this exact accent, and the admin color scheme on some |
| 14 |
// installs resolves --wp-admin-theme-color to the older #007cba, which made the |
| 15 |
// progress-bar fill / step-break dot / selection outlines render in the wrong |
| 16 |
// blue. Pinning the value makes every accent-colored element match the mockup |
| 17 |
// regardless of the admin scheme. (Native Gutenberg chrome still follows the |
| 18 |
// admin scheme via its own --wp-admin-theme-color; only OUR elements use this.) |
| 19 |
:root { |
| 20 |
// ── Color ────────────────────────────────────────────────────────── |
| 21 |
--wppb-fb-text-primary: #1e1e1e; // labels, headings, values |
| 22 |
--wppb-fb-text-muted: #757575; // secondary text, captions |
| 23 |
--wppb-fb-text-faint: #949494; // placeholder, meta, field numbers |
| 24 |
--wppb-fb-text-on-accent: #fff; // text on accent / dark surfaces |
| 25 |
|
| 26 |
--wppb-fb-surface-default: #fff; // panels, cards, fields |
| 27 |
--wppb-fb-surface-canvas: #f6f7f7; // app / editor background |
| 28 |
--wppb-fb-surface-subtle: #f0f0f0; // tags, hover, icon chips |
| 29 |
--wppb-fb-surface-inverse: #1e1e1e; // dark surfaces (active icon button) |
| 30 |
|
| 31 |
--wppb-fb-border-default: #e0e0e0; // panels, cards, dividers |
| 32 |
--wppb-fb-border-strong: #ccc; // inputs, controls |
| 33 |
|
| 34 |
--wppb-fb-accent: #3858e9; // primary, links, active, selection (Figma blue, pinned) |
| 35 |
--wppb-fb-accent-hover: #2145e6; // pressed / hover |
| 36 |
--wppb-fb-status-success: #008a20; // published status |
| 37 |
--wppb-fb-status-danger: #cc1818; // required marker, errors |
| 38 |
--wppb-fb-status-warning: #b26200; // destructive-adjacent notices (e.g. delete callout rail) |
| 39 |
--wppb-fb-status-warning-surface: #fcf9e8; // callout background |
| 40 |
|
| 41 |
// ── Spacing (px) ─────────────────────────────────────────────────── |
| 42 |
--wppb-fb-space-3xs: 2px; |
| 43 |
--wppb-fb-space-2xs: 4px; |
| 44 |
--wppb-fb-space-xs: 6px; |
| 45 |
--wppb-fb-space-sm: 8px; |
| 46 |
--wppb-fb-space-md: 10px; |
| 47 |
--wppb-fb-space-lg: 12px; |
| 48 |
--wppb-fb-space-xl: 16px; |
| 49 |
--wppb-fb-space-2xl: 20px; |
| 50 |
--wppb-fb-space-3xl: 24px; |
| 51 |
|
| 52 |
// ── Radius ───────────────────────────────────────────────────────── |
| 53 |
--wppb-fb-radius-sm: 2px; // controls, buttons |
| 54 |
--wppb-fb-radius-md: 4px; // cards, tiles, fields |
| 55 |
--wppb-fb-radius-lg: 8px; // large cards, stages |
| 56 |
--wppb-fb-radius-xl: 12px; // modals, overlays |
| 57 |
--wppb-fb-radius-pill: 999px; // pills, dots, chips |
| 58 |
|
| 59 |
// ── Font size (px) ───────────────────────────────────────────────── |
| 60 |
--wppb-fb-font-xs: 11px; // meta, eyebrow |
| 61 |
--wppb-fb-font-sm: 12px; // help, hints, tile labels, code |
| 62 |
--wppb-fb-font-md: 13px; // body, inputs, rows |
| 63 |
--wppb-fb-font-lg: 14px; // field & section labels |
| 64 |
} |
| 65 |
|
