// LPR Platform — Design system primitives
// All screens consume these. Tokens follow the brief: Tailwind 3.x baseColor=slate,
// primary=teal-500 (#14b8a6) with primary actions on teal-600 (#0d9488).
// Theme is driven by data-theme attribute on document root + the `palette` knob.
const LPR_TOKENS = {
light: {
bg: '#ffffff',
surface: '#fafafa',
surfaceAlt: '#f4f4f5',
border: '#e5e7eb',
borderStrong: '#d1d5db',
text: '#1f2937', // gray-800
textSoft: '#4b5563', // gray-600
textMute: '#6b7280', // gray-500
textFaint: '#9ca3af', // gray-400
sidebar: '#f9fafb',
sidebarActive: 'rgba(13,148,136,0.08)',
chipBg: '#f3f4f6',
overlay: 'rgba(15,23,42,0.45)',
},
dark: {
bg: '#0b1220',
surface: '#111827',
surfaceAlt: '#1f2937',
border: '#1f2937',
borderStrong: '#374151',
text: '#f9fafb',
textSoft: '#d1d5db',
textMute: '#9ca3af',
textFaint: '#6b7280',
sidebar: '#0f172a',
sidebarActive: 'rgba(20,184,166,0.14)',
chipBg: '#1f2937',
overlay: 'rgba(2,6,23,0.65)',
},
};
// Palette presets — only the brand hue changes; semantics stay constant.
const LPR_PALETTES = {
teal: {
name: 'Teal (default)',
p50: '#f0fdfa', p100: '#ccfbf1', p200: '#99f6e4', p300: '#5eead4',
p400: '#2dd4bf', p500: '#14b8a6', p600: '#0d9488', p700: '#0f766e',
p800: '#115e59', p900: '#134e4a',
},
indigo: {
name: 'Indigo (clinical)',
p50: '#eef2ff', p100: '#e0e7ff', p200: '#c7d2fe', p300: '#a5b4fc',
p400: '#818cf8', p500: '#6366f1', p600: '#4f46e5', p700: '#4338ca',
p800: '#3730a3', p900: '#312e81',
},
slate: {
name: 'Graphite (mono)',
p50: '#f8fafc', p100: '#f1f5f9', p200: '#e2e8f0', p300: '#cbd5e1',
p400: '#94a3b8', p500: '#475569', p600: '#334155', p700: '#1e293b',
p800: '#0f172a', p900: '#020617',
},
};
const LPR_SEM = {
success: '#10b981',
successBg: '#d1fae5',
successBorder: '#a7f3d0',
warning: '#f59e0b',
warningBg: '#fef3c7',
warningBorder: '#fde68a',
error: '#ef4444',
errorBg: '#fee2e2',
errorBorder: '#fecaca',
info: '#3b82f6',
infoBg: '#dbeafe',
infoBorder: '#bfdbfe',
neutral: '#94a3b8',
neutralBg: '#f1f5f9',
};
// Returns a single tokens object, given theme+palette.
function getTokens({ theme = 'light', palette = 'teal' } = {}) {
return {
...LPR_TOKENS[theme],
...LPR_PALETTES[palette],
...LPR_SEM,
theme,
paletteName: palette,
fontUI: 'Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif',
fontDisplay: 'Inter, ui-sans-serif, system-ui, sans-serif',
fontMono: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace',
};
}
// Single global stylesheet for rare cases that need real CSS (focus ring, scrollbars).
function ensureLPRStyles() {
if (typeof document === 'undefined') return;
if (document.getElementById('lpr-base-styles')) return;
const s = document.createElement('style');
s.id = 'lpr-base-styles';
s.textContent = `
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
.lpr-scroll{scrollbar-width:thin;scrollbar-color:rgba(100,116,139,.35) transparent}
.lpr-scroll::-webkit-scrollbar{width:8px;height:8px}
.lpr-scroll::-webkit-scrollbar-thumb{background:rgba(100,116,139,.35);border-radius:4px}
.lpr-scroll::-webkit-scrollbar-track{background:transparent}
.lpr-btn{transition:background .12s,box-shadow .12s,transform .12s,border-color .12s}
.lpr-btn:active{transform:translateY(0.5px)}
.lpr-row{transition:background .12s}
.lpr-input:focus-within{box-shadow:0 0 0 3px rgba(20,184,166,.18)}
.lpr-spark path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lpr-pulse{animation:lprPulse 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes lprPulse{0%,100%{opacity:1}50%{opacity:.55}}
.lpr-link{color:inherit;text-decoration:none;cursor:pointer}
.lpr-link:hover{text-decoration:underline;text-underline-offset:2px}
`;
document.head.appendChild(s);
}
ensureLPRStyles();
// ─────────────────────────────────────────────────────────────
// Icons — minimal stroke set (lucide-style). Pass {size, color, strokeWidth}.
// ─────────────────────────────────────────────────────────────
const Icon = ({ d, size = 16, color = 'currentColor', strokeWidth = 1.75, fill = 'none', children, viewBox = '0 0 24 24', style }) => (
);
const Icons = {
Activity: (p) => ,
Heart: (p) => ,
Users: (p) => ,
User: (p) => ,
Bell: (p) => ,
Search: (p) => ,
Filter: (p) => ,
ChevronD: (p) => ,
ChevronR: (p) => ,
ChevronL: (p) => ,
ChevronU: (p) => ,
Plus: (p) => ,
Check: (p) => ,
X: (p) => ,
AlertTri: (p) => ,
AlertCir: (p) => ,
Shield: (p) => ,
ShieldChk:(p) => ,
ShieldX: (p) => ,
Clock: (p) => ,
Calendar: (p) => ,
FileText: (p) => ,
Upload: (p) => ,
Settings: (p) => ,
Layers: (p) => ,
TrendUp: (p) => ,
TrendDn: (p) => ,
Minus: (p) => ,
Moon: (p) => ,
Sun: (p) => ,
Logout: (p) => ,
Mail: (p) => ,
Lock: (p) => ,
Eye: (p) => ,
Pill: (p) => ,
Brain: (p) => ,
Moon2: (p) => ,
Flame: (p) => ,
Apple: (p) => ,
Dumbbell: (p) => ,
Drop: (p) => ,
Stethoscope: (p) => ,
Database: (p) => ,
Download: (p) => ,
Edit: (p) => ,
Plus2: (p) => ,
Info: (p) => ,
Zap: (p) => ,
Target: (p) => ,
GitBranch:(p) => ,
Send: (p) => ,
Smile: (p) => ,
More: (p) => ,
Home: (p) => ,
Building: (p) => ,
};
// ─────────────────────────────────────────────────────────────
// Status / semáforo helpers
// ─────────────────────────────────────────────────────────────
const STATUS_COLOR = (T) => ({
green: { fg: T.success, bg: T.successBg, border: T.successBorder, label: 'Verde' },
yellow: { fg: T.warning, bg: T.warningBg, border: T.warningBorder, label: 'Amarelo' },
red: { fg: T.error, bg: T.errorBg, border: T.errorBorder, label: 'Vermelho' },
gray: { fg: T.textMute,bg: T.neutralBg, border: T.border, label: 'Sem dados' },
blue: { fg: T.info, bg: T.infoBg, border: T.infoBorder, label: 'Info' },
});
function Dot({ status = 'green', size = 10, T, pulse }) {
const c = STATUS_COLOR(T)[status];
return (
);
}
function Semaphore({ status = 'green', size = 8, T }) {
// 3 stacked dots; the active one full color, the others dimmed.
const order = ['red', 'yellow', 'green'];
const active = order.indexOf(status);
return (
{order.map((s, i) => {
const c = STATUS_COLOR(T)[s];
const on = i === active;
return ;
})}
);
}
// Pill — used everywhere for status + counts
function Pill({ children, tone = 'neutral', T, icon, style, soft = true }) {
const map = {
success: { fg: T.success, bg: T.successBg, border: T.successBorder },
warning: { fg: T.warning, bg: T.warningBg, border: T.warningBorder },
error: { fg: T.error, bg: T.errorBg, border: T.errorBorder },
info: { fg: T.info, bg: T.infoBg, border: T.infoBorder },
neutral: { fg: T.textSoft,bg: T.chipBg, border: T.border },
primary: { fg: T.p700, bg: T.p50, border: T.p200 },
};
const c = map[tone] || map.neutral;
const dark = T.theme === 'dark';
return (
{icon ? {icon} : null}
{children}
);
}
// Card — primary container
function Card({ children, T, style, padding = 16, hover, onClick, title, action, subtitle }) {
return (
{title ? (
{title}
{subtitle ?
{subtitle}
: null}
{action}
) : null}
{children}
{icon ? React.cloneElement(icon, { size: 14, color: T.textMute }) : null}
onChange && onChange(e.target.value)}
placeholder={placeholder} onKeyDown={onKeyDown}
style={{
flex: 1, border: 0, outline: 'none', background: 'transparent', color: T.text,
fontFamily: T.fontUI, fontSize: 13, padding: 0, minWidth: 0,
}}/>
);
}
// Avatar (initials)
function Avatar({ name = '?', size = 28, T, color }) {
const init = name.split(' ').filter(Boolean).slice(0, 2).map((s) => s[0]).join('').toUpperCase();
// Hash to one of a few teal-aligned tints
const tints = [T.p100, '#fef3c7', '#dbeafe', '#fce7f3', '#e0e7ff', '#dcfce7'];
const fgs = [T.p700, '#92400e', '#1e40af', '#9d174d', '#3730a3', '#166534'];
let h = 0; for (const c of name) h = (h * 31 + c.charCodeAt(0)) >>> 0;
const i = h % tints.length;
return (
{init || '?'}
);
}
// Sparkline — pass values [...], optional area fill
function Sparkline({ values = [], width = 80, height = 24, color, fill, T, strokeWidth = 1.5 }) {
if (!values.length) return null;
const min = Math.min(...values), max = Math.max(...values);
const range = max - min || 1;
const dx = width / (values.length - 1 || 1);
const pts = values.map((v, i) => [i * dx, height - 2 - ((v - min) / range) * (height - 4)]);
const d = pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p[0].toFixed(1)},${p[1].toFixed(1)}`).join(' ');
const area = `${d} L${width},${height} L0,${height} Z`;
return (
);
}
// Trend mini — number + arrow
function Trend({ value, T, suffix = '', positiveIsGood = true }) {
const positive = value > 0;
const neutral = value === 0;
const good = neutral ? null : (positive === positiveIsGood);
const c = neutral ? T.textMute : (good ? T.success : T.error);
const Ic = neutral ? Icons.Minus : (positive ? Icons.TrendUp : Icons.TrendDn);
return (
{Math.abs(value)}{suffix}
);
}
// Section header used inside dashboards
function SectionHeader({ title, subtitle, action, T, style }) {
return (
{title}
{subtitle ?
{subtitle}
: null}
{action}
);
}
// LPR wordmark — typography only, per brief.
function LPRMark({ size = 18, color, T, sub = 'Platform' }) {
return (
L
P
R
{sub ? {sub} : null}
);
}
// Bigger logo for login + nav
function LPRLogo({ size = 32, T }) {
return (
LPR
Platform
);
}
// Tabs (controlled)
function Tabs({ tabs, active, onChange, T, style }) {
return (
{tabs.map((t) => {
const on = (t.id || t) === active;
const id = t.id || t;
const label = t.label || t;
const count = t.count;
return (
);
})}
);
}
// Meter / progress bar
function Meter({ value = 0, max = 100, T, color, height = 6, label, right }) {
const pct = Math.max(0, Math.min(100, (value / max) * 100));
return (
{(label || right) ? (
{label ? {label} : }
{right ? {right} : null}
) : null}
{label}
{icon ? {React.cloneElement(icon, { size: 15 })} : null}
{value}
{sub != null || trend != null ? (
{trend != null ? trend : null}
{sub}
) : null}
);
}
// Domain icon dictionary
const DOMAIN_META = {
metabolic: { label: 'Metabólico', short: 'Metab', icon: Icons.Activity },
gut: { label: 'Intestinal', short: 'Intest', icon: Icons.Apple },
mito: { label: 'Mitocondrial/Energia',short: 'Mito', icon: Icons.Zap },
inflam: { label: 'Inflamatório', short: 'Inflam', icon: Icons.Flame },
hormone: { label: 'Neuroendócrino/Hormonal', short: 'Hormon', icon: Icons.Brain },
circadian: { label: 'Circadiano/Sono', short: 'Circad', icon: Icons.Moon2 },
body: { label: 'Composição/Movimento', short: 'Corpo', icon: Icons.Dumbbell },
behavior: { label: 'Comportamental/Adesão', short: 'Comport', icon: Icons.Target },
};
// Make all of the above globally available so screen scripts can reach them.
Object.assign(window, {
LPR_TOKENS, LPR_PALETTES, LPR_SEM, getTokens,
Icon, Icons, STATUS_COLOR, Dot, Semaphore, Pill, Card, Button, Input,
Avatar, Sparkline, Trend, SectionHeader, LPRMark, LPRLogo, Tabs, Meter, KPI,
DOMAIN_META,
});