Restyling light pastel: tema blanco/azul/verde + Inter self-hosted
- 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
BIN
public/styles/fonts/Inter-Variable.woff2
Normal file
BIN
public/styles/fonts/Inter-Variable.woff2
Normal file
Binary file not shown.
1483
public/styles/fonts/JetBrainsMono-Variable.woff2
Normal file
1483
public/styles/fonts/JetBrainsMono-Variable.woff2
Normal file
File diff suppressed because one or more lines are too long
@@ -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); }
|
||||
|
||||
Reference in New Issue
Block a user