lkzwieder/botino
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyling light pastel: tema blanco/azul/verde + Inter self-hosted

Browse Source 
- theme.css reescrito: paleta light (sky/emerald accents, slate neutrals),
  tokens de spacing/typography/radii/shadows, @font-face Inter +
  JetBrains Mono variable woff2 self-hosted.
- ops-shell: header blanco con nav active=accent-soft + status pill pastel.
- run-timeline: bubbles emerald-100 (user) / blue-100 (bot) sobre blanco.
- home-dashboard: helpers cssVar + withAlpha, 6 charts coordinados a
  paleta pastel (--chart-blue/green/purple/orange/pink/gray).
- 8 CRUDs (users, products, orders, conversations, aliases,
  recommendations, quantities, takeovers, settings, debug) migrados
  de hex hardcoded oscuros a var(--*).
- modal.js + toast.js refactor a vars con fallbacks; modal blanco
  con shadow-lg y soft icon backgrounds.
- test-panel: aliases :host apuntan a globals en vez de override dark.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Lucas Tettamanti
2026-05-02 13:56:48 -03:00
parent 675a449ce8
commit 0bf26f8eb5
22 changed files with 2355 additions and 655 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
public/styles/theme.css
View File

@@ -1,74 +1,156 @@
/**
* Tema global (CSS custom properties).
* Tema global Botino — light pastel frío (azul/verde).
*
* Las custom properties heredan a través del shadow DOM, así que cualquier
* CSS custom properties heredan a través del shadow DOM, así que cualquier
* componente puede usar `var(--bg)` sin re-declarar nada.
*/
/* ────────────────────────────────────────────────────────────
* Tipografía: Inter + JetBrains Mono (variable, self-hosted)
* ──────────────────────────────────────────────────────────── */
@font-face {
font-family: "Inter";
src: url("/styles/fonts/Inter-Variable.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "JetBrains Mono";
src: url("/styles/fonts/JetBrainsMono-Variable.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* ────────────────────────────────────────────────────────────
* Tokens de diseño
* ──────────────────────────────────────────────────────────── */
:root {
/* Surfaces */
--bg: #0b0f14;
--panel: #121823;
--panel-2: #0f1520;
--panel-3: #0a0e15;
--bg: #f7fafc; /* casi blanco con tinte azul muy sutil */
--panel: #ffffff; /* tarjetas / paneles principales */
--panel-2: #f1f5f9; /* slate-100 */
--panel-3: #e2e8f0; /* slate-200 */
/* Borders */
--border: #1e2a3a;
--border-hi: #253245;
--border-active:#1f6feb;
--border: #e2e8f0; /* slate-200 */
--border-hi: #cbd5e1; /* slate-300 */
--border-active:#0ea5e9; /* sky-500 */
/* Text */
--text: #e7eef7;
--text-muted: #8aa0b5;
--text-dim: #d7e2ef;
--text: #0f172a; /* slate-900 */
--text-dim: #475569; /* slate-600 */
--text-muted: #64748b; /* slate-500 */
--text-on-acc: #ffffff;
--muted: var(--text-muted);
/* Accents */
--accent: #1f6feb;
--accent-hover: #2570f0;
--ok: #25D366;
--warn: #F59E0B;
--err: #e74c3c;
/* Accents — azul/verde fríos como protagonistas */
--accent: #0ea5e9; /* sky-500 */
--accent-hover: #0284c7; /* sky-600 */
--accent-soft: #e0f2fe; /* sky-100 */
--ok: #10b981; /* emerald-500 */
--ok-soft: #d1fae5; /* emerald-100 */
--warn: #f59e0b; /* amber-500 */
--warn-soft: #fef3c7;
--err: #ef4444; /* red-500 */
--err-soft: #fee2e2;
/* Bubbles */
--user-bubble: #0f2a1a;
--user-border: #1f6f43;
--user-meta: #b9d9c6;
--user-name: #cdebd8;
/* Bubbles — light pastel */
--user-bubble: #d1fae5; /* emerald-100 (cliente) */
--user-border: #6ee7b7; /* emerald-300 */
--user-text: #064e3b; /* emerald-900 */
--user-name: #047857; /* emerald-700 */
--user-meta: #059669; /* emerald-600 */
--bot-bubble: #111b2a;
--bot-border: #2a3a55;
--bot-meta: #a9bed6;
--bot-name: #c7d8ee;
--bot-bubble: #dbeafe; /* blue-100 (bot) */
--bot-border: #93c5fd; /* blue-300 */
--bot-text: #1e3a8a; /* blue-900 */
--bot-name: #1d4ed8; /* blue-700 */
--bot-meta: #2563eb; /* blue-600 */
--err-bubble: #241214;
--err-border: #e74c3c;
--err-meta: #ffd0d4;
--err-name: #ffd0d4;
--err-bubble: #fee2e2;
--err-border: #fca5a5;
--err-text: #7f1d1d;
--err-name: #b91c1c;
--err-meta: #dc2626;
/* Charts (alias para componentes que aún usan literales) */
--chart-blue: #3b82f6;
--chart-green: #25D366;
--chart-purple: #8B5CF6;
--chart-orange: #F59E0B;
--chart-pink: #EC4899;
--chart-gray: #9CA3AF;
/* Charts — paleta pastel coordinada (~400 saturación) */
--chart-blue: #38bdf8; /* sky-400 */
--chart-green: #34d399; /* emerald-400 */
--chart-purple: #a78bfa; /* violet-400 */
--chart-orange: #fb923c; /* orange-400 */
--chart-pink: #f472b6; /* pink-400 */
--chart-gray: #94a3b8; /* slate-400 */
--chart-blue-soft: rgba(56, 189, 248, 0.20);
--chart-green-soft: rgba(52, 211, 153, 0.20);
/* Radii / shadows */
--r-sm: 6px;
--r-md: 8px;
--r-lg: 10px;
--r-xl: 14px;
--shadow-bubble: 0 1px 0 rgba(0,0,0,.35);
}
/* Compat: alias antiguo `--muted` que ya usa ops-shell.js. */
:root {
--muted: var(--text-muted);
/* Spacing scale */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
/* Radii */
--r-sm: 8px;
--r-md: 10px;
--r-lg: 12px;
--r-xl: 16px;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
--shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.10);
--shadow-bubble: 0 1px 2px rgba(15, 23, 42, 0.04);
/* Type scale */
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "Fira Mono", monospace;
--fs-xs: 11px;
--fs-sm: 12px;
--fs-base: 14px;
--fs-md: 15px;
--fs-lg: 18px;
--fs-xl: 24px;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--lh-base: 1.5;
--lh-tight: 1.3;
/* Focus ring (accesibilidad) */
--focus-ring: 0 0 0 3px var(--accent-soft);
}
/* ────────────────────────────────────────────────────────────
* Reset / defaults
* ──────────────────────────────────────────────────────────── */
html, body {
background: var(--bg);
color: var(--text);
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: var(--lh-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box; }
/* Scrollbars finos / pastel */
* {
scrollbar-width: thin;
scrollbar-color: var(--border-hi) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
*::-webkit-scrollbar-track { background: transparent; }
/* Selection con tinte pastel */
::selection { background: var(--accent-soft); color: var(--text); }