// app.jsx — root composition + Tweaks
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"palette": "electric",
"font": "geist",
"heroVariant": "split"
}/*EDITMODE-END*/;
/* ──────────────────────────────────────────────────────────
Paletes — applied as CSS custom properties on
────────────────────────────────────────────────────────── */
const PALETTES = {
electric: {
label: 'Electric',
swatch: ['#0B0B0E', '#C8FF00', '#FF5C2E'],
vars: {
'--bg': '#0B0B0E',
'--bg-2': '#14141A',
'--surface': '#1A1A22',
'--surface-2': '#22222C',
'--line': '#2A2A36',
'--line-2': '#3A3A48',
'--ink': '#F5F5F2',
'--ink-2': '#B8B8B0',
'--ink-3': '#7A7A78',
'--brand': '#C8FF00',
'--brand-ink': '#0B0B0E',
'--accent': '#FF5C2E',
},
},
warm: {
label: 'Warm sunrise',
swatch: ['#FAF7F2', '#1F3A2E', '#B5481C'],
vars: {
'--bg': '#FAF7F2',
'--bg-2': '#F2EEE5',
'--surface': '#FFFFFF',
'--surface-2': '#EFEAE0',
'--line': '#E0DACD',
'--line-2': '#C9C2B2',
'--ink': '#1B1F1A',
'--ink-2': '#5A5A52',
'--ink-3': '#8B8978',
'--brand': '#1F3A2E',
'--brand-ink': '#FAF7F2',
'--accent': '#B5481C',
},
},
blueprint: {
label: 'Blueprint',
swatch: ['#0B1220', '#5BA3FF', '#FF4D8B'],
vars: {
'--bg': '#0B1220',
'--bg-2': '#101A2E',
'--surface': '#15233D',
'--surface-2': '#1B2C4B',
'--line': '#243456',
'--line-2': '#324868',
'--ink': '#F0F5FF',
'--ink-2': '#B3C0D9',
'--ink-3': '#7385A6',
'--brand': '#5BA3FF',
'--brand-ink': '#0B1220',
'--accent': '#FF4D8B',
},
},
};
/* ──────────────────────────────────────────────────────────
Font stacks
────────────────────────────────────────────────────────── */
const FONTS = {
geist: {
label: 'Geist',
sample: 'Aa',
display: "'Geist', ui-sans-serif, system-ui, sans-serif",
body: "'Geist', ui-sans-serif, system-ui, sans-serif",
mono: "'Geist Mono', ui-monospace, monospace",
},
editorial: {
label: 'Editorial',
sample: 'Aa',
display: "'Instrument Serif', 'Times New Roman', serif",
body: "'Geist', ui-sans-serif, system-ui, sans-serif",
mono: "'Geist Mono', ui-monospace, monospace",
},
space: {
label: 'Space Grotesk',
sample: 'Aa',
display: "'Space Grotesk', ui-sans-serif, sans-serif",
body: "'Space Grotesk', ui-sans-serif, sans-serif",
mono: "'Geist Mono', ui-monospace, monospace",
},
bricolage: {
label: 'Bricolage',
sample: 'Aa',
display: "'Bricolage Grotesque', ui-sans-serif, sans-serif",
body: "'Bricolage Grotesque', ui-sans-serif, sans-serif",
mono: "'Geist Mono', ui-monospace, monospace",
},
};
function applyTokens(palette, font) {
const root = document.documentElement.style;
const p = PALETTES[palette] || PALETTES.electric;
Object.entries(p.vars).forEach(([k, v]) => root.setProperty(k, v));
const f = FONTS[font] || FONTS.geist;
root.setProperty('--font-display', f.display);
root.setProperty('--font-body', f.body);
root.setProperty('--font-mono', f.mono);
}
/* ──────────────────────────────────────────────────────────
App
────────────────────────────────────────────────────────── */
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
React.useEffect(() => {
applyTokens(t.palette, t.font);
}, [t.palette, t.font]);
return (
setTweak('heroVariant', v)} />
setTweak('palette', v)} />
setTweak('font', v)} />
);
}
/* ────────── Custom Tweaks controls ────────── */
function HeroVariantPicker({ value, onChange }) {
const opts = [
{ id: 'split', label: 'Split + dashboard', desc: 'Headline + mock panelu' },
{ id: 'stat', label: '20–30%', desc: 'Wielka liczba sterująca' },
{ id: 'storefront', label: 'Storefront', desc: 'Editorial · Pon–Sob → 24/7' },
];
return (
{opts.map(o => (
))}
{Object.entries(PALETTES).map(([id, p]) => (
))}
{Object.entries(FONTS).map(([id, f]) => (
))}
);
}
/* ────────── Mount ────────── */
ReactDOM.createRoot(document.getElementById('root')).render();