/* ═══════════════════════════════════════════════════════════ TWEAKS — editor inline (ferramenta de autoria, não de produção) Ajusta a cor de acento e liga/desliga o glow em runtime, sobrescrevendo os custom properties no . Para esconder em produção, monte o com tweaks={false} ou acesse a página sem o parâmetro ?tweaks=1 (ver App.jsx). ═══════════════════════════════════════════════════════════ */ const tweaksStyles = { swatchColor: (c) => ({ background: c, color: c }), }; /* Cada swatch traz a tríade completa para manter contraste correto */ const ACCENTS = [ { id: 'sky', label: 'Azul Klyvo', primary: '#0ea5e9', dark: '#0284c7', deep: '#0c4a6e' }, { id: 'blue', label: 'Azul royal', primary: '#3b82f6', dark: '#2563eb', deep: '#1e3a8a' }, { id: 'teal', label: 'Verde-água', primary: '#14b8a6', dark: '#0d9488', deep: '#134e4a' }, { id: 'indigo', label: 'Índigo', primary: '#6366f1', dark: '#4f46e5', deep: '#312e81' }, { id: 'emerald', label: 'Esmeralda', primary: '#10b981', dark: '#059669', deep: '#064e3b' }, ]; function Tweaks() { const [open, setOpen] = React.useState(false); const [accent, setAccent] = React.useState('sky'); const [glow, setGlow] = React.useState(true); React.useEffect(() => { const a = ACCENTS.find((x) => x.id === accent) || ACCENTS[0]; const root = document.documentElement; root.style.setProperty('--primary', a.primary); root.style.setProperty('--primary-dark', a.dark); root.style.setProperty('--primary-deep', a.deep); }, [accent]); React.useEffect(() => { document.documentElement.style.setProperty('--glow-opacity', glow ? '1' : '0'); }, [glow]); return (
{open && (
Tweaks
Cor de acento
{ACCENTS.map((a) => (
Glow & halos

Ajustes locais de visualização — não alteram o site publicado.

)}
); } Object.assign(window, { Tweaks });