trackops 2.0.3 → 2.0.5

package/ui/css/tokens.css

@@ -1,227 +1,284 @@
-/* ═══════════════════════════════════════════════════════
-   TRACKOPS DESIGN TOKENS
-   Coherentes con docs/index.html (identidad de marca web)
-   ═══════════════════════════════════════════════════════ */
-
-:root {
-  /* ── Colores base (marca web) ── */
-  --navy:      #0A0F1E;
-  --navy-90:   #0d1326;
-  --navy-80:   #111827;
-  --slate:     #1E293B;
-  --charcoal:  #111111;
-
-  /* ── Accent (indigo) ── */
-  --accent:       #6366F1;
-  --accent-light: rgba(99, 102, 241, 0.15);
-  --accent-glow:  rgba(99, 102, 241, 0.30);
-  --accent-hover: #818CF8;
-
-  /* ── Superficies del dashboard ── */
-  --surface-0:  #0A0F1E;    /* fondo global */
-  --surface-1:  #0d1326;    /* sidebar + panel base */
-  --surface-2:  #111827;    /* cards */
-  --surface-3:  #1a2234;    /* hover cards */
-  --surface-4:  rgba(255,255,255,0.04); /* inset sutil */
-
-  /* ── Texto ── */
-  --text-primary:   #F1F5F9;
-  --text-secondary: #94A3B8;
-  --text-muted:     #475569;
-  --text-accent:    #818CF8;
-
-  /* ── Bordes ── */
-  --border:         rgba(255,255,255,0.06);
-  --border-strong:  rgba(255,255,255,0.12);
-  --border-accent:  rgba(99,102,241,0.35);
-
-  /* ── Estado ── */
-  --success:       #10B981;
-  --success-light: rgba(16, 185, 129, 0.12);
-  --warning:       #F59E0B;
-  --warning-light: rgba(245, 158, 11, 0.12);
-  --danger:        #EF4444;
-  --danger-light:  rgba(239, 68, 68, 0.12);
-  --info:          #3B82F6;
-  --info-light:    rgba(59, 130, 246, 0.12);
-
-  /* ── Prioridades ── */
-  --p0: #EF4444;
-  --p1: #F59E0B;
-  --p2: #6366F1;
-  --p3: #475569;
-
-  /* ── Fuentes (coherentes con marca web) ── */
-  --font-ui:       'Outfit', system-ui, -apple-system, sans-serif;
-  --font-heading:  'Plus Jakarta Sans', 'Outfit', sans-serif;
-  --font-mono:     'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
-
-  /* ── Tamaños de fuente (escala modular 1.25) ── */
-  --text-xs:   0.75rem;    /* 12px */
-  --text-sm:   0.875rem;   /* 14px */
-  --text-base: 1rem;       /* 16px */
-  --text-md:   1.125rem;   /* 18px */
-  --text-lg:   1.25rem;    /* 20px */
-  --text-xl:   1.5rem;     /* 24px */
-  --text-2xl:  1.875rem;   /* 30px */
-  --text-3xl:  2.25rem;    /* 36px */
-
-  /* ── Border Radius (marca web usa 3rem = super) ── */
-  --radius-xs:    0.375rem;   /* 6px */
-  --radius-sm:    0.625rem;   /* 10px */
-  --radius-md:    0.875rem;   /* 14px */
-  --radius-lg:    1.25rem;    /* 20px */
-  --radius-xl:    1.75rem;    /* 28px */
-  --radius-2xl:   2rem;       /* 32px */
-  --radius-super: 3rem;       /* 48px */
-  --radius-full:  9999px;
-
-  /* ── Sombras ── */
-  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
-  --shadow-md: 0 4px 20px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
-  --shadow-lg: 0 12px 40px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
-  --shadow-xl: 0 24px 60px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.35);
-  --shadow-accent: 0 8px 24px rgba(99,102,241,0.25);
-  --shadow-glow: 0 0 40px rgba(99,102,241,0.15);
-
-  /* ── Espaciado ── */
-  --space-1:  0.25rem;   /* 4px */
-  --space-2:  0.5rem;    /* 8px */
-  --space-3:  0.75rem;   /* 12px */
-  --space-4:  1rem;      /* 16px */
-  --space-5:  1.25rem;   /* 20px */
-  --space-6:  1.5rem;    /* 24px */
-  --space-8:  2rem;      /* 32px */
-  --space-10: 2.5rem;    /* 40px */
-  --space-12: 3rem;      /* 48px */
-  --space-16: 4rem;      /* 64px */
-
-  /* ── Layout ── */
-  --sidebar-width:  272px;
-  --topbar-height:  64px;
-  --content-pad:    24px;
-
-  /* ── Transiciones ── */
-  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
-  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
-  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
-  --duration-fast:   120ms;
-  --duration-base:   200ms;
-  --duration-slow:   350ms;
-  --duration-slower: 600ms;
-
-  /* ── Z-index ── */
-  --z-base:    1;
-  --z-panel:   10;
-  --z-topbar:  20;
-  --z-sidebar: 30;
-  --z-modal:   40;
-  --z-toast:   50;
-  --z-onboard: 60;
-}
-/* ───────────────────────────────────
-   TEMA CLARO
-   Activo con: html[data-theme="light"]
-   ─────────────────────────────────── */
-[data-theme="light"] {
-
-  /* ── Superficies ── */
-  --surface-0:  #F0F2F8;          /* fondo global */
-  --surface-1:  #FFFFFF;          /* sidebar + panel base */
-  --surface-2:  #F8F9FC;          /* cards */
-  --surface-3:  #EEF0F7;          /* hover / inset */
-  --surface-4:  rgba(0,0,0,0.04); /* inset sutil */
-
-  /* ── Texto ── */
-  --text-primary:   #0D1117;
-  --text-secondary: #4A5568;
-  --text-muted:     #9AA5B4;
-  --text-accent:    #4F46E5;
-
-  /* ── Bordes ── */
-  --border:        rgba(0,0,0,0.08);
-  --border-strong: rgba(0,0,0,0.14);
-  --border-accent: rgba(99,102,241,0.3);
-
-  /* ── Sombras (más suaves sobre fondos claros) ── */
-  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
-  --shadow-md:     0 4px 20px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06);
-  --shadow-lg:     0 12px 40px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);
-  --shadow-xl:     0 24px 60px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.10);
-  --shadow-accent: 0 8px 24px rgba(99,102,241,0.20);
-
-  /* ── Accent ajustado para legibilidad en claro ── */
-  --accent:       #4F46E5;
-  --accent-hover: #6366F1;
-  --accent-light: rgba(79,70,229,0.10);
-  --accent-glow:  rgba(79,70,229,0.20);
-
-  /* ── Estado (más saturados en claro) ── */
-  --success-light: rgba(5,150,105,0.10);
-  --warning-light: rgba(217,119,6,0.10);
-  --danger-light:  rgba(220,38,38,0.10);
-  --info-light:    rgba(37,99,235,0.10);
-}
-
-/* Ajustes específicos que no se pueden resolver solo con tokens */
-
-/* Topbar en light */
-[data-theme="light"] .topbar {
-  background: rgba(248,249,252,0.88);
-}
-
-/* Terminal siempre dark (legibilidad de código) */
-[data-theme="light"] .terminal-surface,
-[data-theme="light"] .terminal-output,
-[data-theme="light"] .console-panel {
-  background: #1a1f2e;
-  color: #94D4BC;
-}
-[data-theme="light"] .terminal-header {
-  background: rgba(255,255,255,0.04);
-  border-bottom-color: rgba(255,255,255,0.04);
-}
-[data-theme="light"] .console-panel-header {
-  background: rgba(255,255,255,0.02);
-}
-
-/* Time tracker card en light */
-[data-theme="light"] .time-tracker-card {
-  background: linear-gradient(135deg, #f0f2fb 0%, #ffffff 100%);
-  border-color: rgba(99,102,241,0.2);
-}
-
-/* Onboarding backdrop en light */
-[data-theme="light"] .onboarding-backdrop {
-  background: rgba(0,0,0,0.45);
-}
-
-/* Sidebar logo icon sigue con gradiente oscuro */
-[data-theme="light"] .sidebar-logo-icon {
-  box-shadow: 0 4px 12px rgba(79,70,229,0.3);
-}
-
-/* Topbar timer en light */
-[data-theme="light"] .topbar-timer {
-  background: #F0F2F8;
-  border-color: rgba(0,0,0,0.10);
-}
-
-/* Modal en light */
-[data-theme="light"] .modal {
-  background: #FFFFFF;
-  border-color: rgba(0,0,0,0.10);
-}
-
-/* Flash toast en light */
-[data-theme="light"] .flash {
-  background: #FFFFFF;
-  border-color: rgba(0,0,0,0.10);
-}
-
-/* Transición suave al cambiar de tema */
-html {
-  transition:
-    background-color var(--duration-slow) var(--ease-out),
-    color var(--duration-slow) var(--ease-out);
-}
+/* ═══════════════════════════════════════════════════════
+   PROJECT-OPS DESIGN TOKENS
+   Grayscale + Glassmorphism Design System
+   ═══════════════════════════════════════════════════════ */
+
+:root {
+
+  /* ── Grayscale Foundation ── */
+  --gray-950: #0C0C0E;
+  --gray-900: #141416;
+  --gray-850: #1A1A1E;
+  --gray-800: #222228;
+  --gray-700: #2E2E36;
+  --gray-600: #3E3E48;
+  --gray-500: #5A5A66;
+  --gray-400: #8A8A96;
+  --gray-300: #B0B0BC;
+  --gray-200: #D0D0D8;
+  --gray-100: #E8E8EE;
+  --gray-50:  #F4F4F8;
+
+  /* ── Data Accent Colors ── */
+  --accent-blue:    #60A5FA;
+  --accent-cyan:    #22D3EE;
+  --accent-green:   #4ADE80;
+  --accent-yellow:  #FACC15;
+  --accent-red:     #F87171;
+  --accent-purple:  #A78BFA;
+  --accent-orange:  #FB923C;
+
+  /* ── Surfaces ── */
+  --surface-0:  var(--gray-900);
+  --surface-1:  rgba(26, 26, 30, 0.85);
+  --surface-2:  rgba(34, 34, 40, 0.55);
+  --surface-3:  rgba(46, 46, 54, 0.65);
+  --surface-4:  rgba(255, 255, 255, 0.03);
+
+  /* ── Text ── */
+  --text-primary:   var(--gray-50);
+  --text-secondary: var(--gray-400);
+  --text-muted:     var(--gray-500);
+  --text-accent:    var(--accent-blue);
+
+  /* ── Borders ── */
+  --border:        rgba(255, 255, 255, 0.06);
+  --border-strong: rgba(255, 255, 255, 0.12);
+  --border-glass:  rgba(255, 255, 255, 0.08);
+  --border-accent: rgba(96, 165, 250, 0.35);
+
+  /* ── Accent ── */
+  --accent:        var(--accent-blue);
+  --accent-light:  rgba(96, 165, 250, 0.12);
+  --accent-glow:   rgba(96, 165, 250, 0.20);
+  --accent-hover:  #93C5FD;
+
+  /* ── Status ── */
+  --success:       var(--accent-green);
+  --success-light: rgba(74, 222, 128, 0.12);
+  --warning:       var(--accent-yellow);
+  --warning-light: rgba(250, 204, 21, 0.12);
+  --danger:        var(--accent-red);
+  --danger-light:  rgba(248, 113, 113, 0.12);
+  --info:          var(--accent-cyan);
+  --info-light:    rgba(34, 211, 238, 0.12);
+
+  /* ── Priorities ── */
+  --p0: var(--accent-red);
+  --p1: var(--accent-yellow);
+  --p2: var(--accent-blue);
+  --p3: var(--gray-500);
+
+  /* ── Glass Token System ── */
+  --glass-blur:      20px;
+  --glass-blur-lg:   40px;
+  --glass-blur-sm:   12px;
+  --glass-bg:        rgba(34, 34, 40, 0.55);
+  --glass-bg-strong: rgba(34, 34, 40, 0.72);
+  --glass-bg-subtle: rgba(34, 34, 40, 0.35);
+  --glass-border:    rgba(255, 255, 255, 0.08);
+  --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.30);
+  --glass-inner:     inset 0 1px 0 rgba(255, 255, 255, 0.05);
+
+  --glass-border-hover: rgba(255, 255, 255, 0.14);
+
+  --bg-gradient: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(90, 90, 120, 0.15), transparent 50%),
+                 radial-gradient(ellipse 60% 40% at 80% 80%, rgba(60, 60, 80, 0.12), transparent 50%),
+                 var(--gray-950);
+
+  /* ── Fonts ── */
+  --font-ui:       'Outfit', system-ui, -apple-system, sans-serif;
+  --font-heading:  'Plus Jakarta Sans', 'Outfit', sans-serif;
+  --font-mono:     'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
+
+  /* ── Typography Scale (modular 1.25) ── */
+  --text-xs:   0.75rem;    /* 12px */
+  --text-sm:   0.875rem;   /* 14px */
+  --text-base: 1rem;       /* 16px */
+  --text-md:   1.125rem;   /* 18px */
+  --text-lg:   1.25rem;    /* 20px */
+  --text-xl:   1.5rem;     /* 24px */
+  --text-2xl:  1.875rem;   /* 30px */
+  --text-3xl:  2.25rem;    /* 36px */
+
+  /* ── Border Radius ── */
+  --radius-xs:    0.375rem;   /* 6px */
+  --radius-sm:    0.625rem;   /* 10px */
+  --radius-md:    0.875rem;   /* 14px */
+  --radius-lg:    1.25rem;    /* 20px */
+  --radius-xl:    1.75rem;    /* 28px */
+  --radius-2xl:   2rem;       /* 32px */
+  --radius-super: 3rem;       /* 48px */
+  --radius-full:  9999px;
+
+  /* ── Shadows ── */
+  --shadow-sm:      0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
+  --shadow-md:      0 4px 20px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.25);
+  --shadow-lg:      0 12px 40px rgba(0,0,0,0.4), 0 4px 16px rgba(0,0,0,0.3);
+  --shadow-xl:      0 24px 60px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.35);
+  --shadow-accent:  0 8px 24px rgba(96,165,250,0.25);
+  --shadow-glow:    0 0 40px rgba(96,165,250,0.15);
+
+  /* ── Spacing ── */
+  --space-1:  0.25rem;   /* 4px */
+  --space-2:  0.5rem;    /* 8px */
+  --space-3:  0.75rem;   /* 12px */
+  --space-4:  1rem;      /* 16px */
+  --space-5:  1.25rem;   /* 20px */
+  --space-6:  1.5rem;    /* 24px */
+  --space-8:  2rem;      /* 32px */
+  --space-10: 2.5rem;    /* 40px */
+  --space-12: 3rem;      /* 48px */
+  --space-16: 4rem;      /* 64px */
+
+  /* ── Layout ── */
+  --sidebar-width:           68px;
+  --sidebar-width-collapsed: 68px;
+  --sidebar-width-expanded:  240px;
+  --topbar-height:           48px;
+  --content-pad:             24px;
+
+  /* ── Transitions ── */
+  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
+  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
+  --duration-fast:   120ms;
+  --duration-base:   200ms;
+  --duration-slow:   350ms;
+  --duration-slower: 600ms;
+
+  /* ── Z-index ── */
+  --z-base:    1;
+  --z-panel:   10;
+  --z-topbar:  20;
+  --z-sidebar: 30;
+  --z-modal:   40;
+  --z-toast:   50;
+  --z-onboard: 60;
+}
+
+/* ═══════════════════════════════════════════════════════
+   LIGHT THEME
+   Active with: html[data-theme="light"]
+   ═══════════════════════════════════════════════════════ */
+[data-theme="light"] {
+
+  /* ── Surfaces ── */
+  --surface-0:  #EDEDF3;
+  --surface-1:  rgba(255, 255, 255, 0.70);
+  --surface-2:  rgba(255, 255, 255, 0.50);
+  --surface-3:  rgba(255, 255, 255, 0.65);
+  --surface-4:  rgba(0, 0, 0, 0.03);
+
+  /* ── Text ── */
+  --text-primary:   #111118;
+  --text-secondary: #55556A;
+  --text-muted:     #8888A0;
+  --text-accent:    #3B82F6;
+
+  /* ── Borders ── */
+  --border:        rgba(0, 0, 0, 0.06);
+  --border-strong: rgba(0, 0, 0, 0.14);
+  --border-glass:  rgba(0, 0, 0, 0.08);
+  --border-accent: rgba(59, 130, 246, 0.3);
+
+  /* ── Accent ── */
+  --accent:       #3B82F6;
+  --accent-hover: #60A5FA;
+  --accent-light: rgba(59, 130, 246, 0.10);
+  --accent-glow:  rgba(59, 130, 246, 0.20);
+
+  /* ── Glass ── */
+  --glass-bg:        rgba(255, 255, 255, 0.50);
+  --glass-bg-strong: rgba(255, 255, 255, 0.70);
+  --glass-bg-subtle: rgba(255, 255, 255, 0.35);
+  --glass-border:    rgba(0, 0, 0, 0.08);
+  --glass-shadow:    0 8px 32px rgba(0, 0, 0, 0.10);
+  --glass-inner:     inset 0 1px 0 rgba(255, 255, 255, 0.80);
+
+  --glass-border-hover: rgba(0, 0, 0, 0.14);
+
+  --bg-gradient: radial-gradient(ellipse 80% 50% at 20% 20%, rgba(180, 180, 200, 0.15), transparent 50%),
+                 radial-gradient(ellipse 60% 40% at 80% 80%, rgba(160, 160, 180, 0.10), transparent 50%),
+                 #EDEDF3;
+
+  /* ── Shadows (reduced opacity for light backgrounds) ── */
+  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
+  --shadow-md:     0 4px 20px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06);
+  --shadow-lg:     0 12px 40px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);
+  --shadow-xl:     0 24px 60px rgba(0,0,0,0.15), 0 8px 24px rgba(0,0,0,0.10);
+  --shadow-accent: 0 8px 24px rgba(59,130,246,0.20);
+
+  /* ── Status (light overrides) ── */
+  --success-light: rgba(74,222,128,0.10);
+  --warning-light: rgba(250,204,21,0.10);
+  --danger-light:  rgba(248,113,113,0.10);
+  --info-light:    rgba(34,211,238,0.10);
+}
+
+/* ═══════════════════════════════════════════════════════
+   LIGHT THEME – Component Overrides
+   ═══════════════════════════════════════════════════════ */
+
+/* Topbar */
+[data-theme="light"] .topbar {
+  background: rgba(248,249,252,0.88);
+}
+
+/* Terminal always dark */
+[data-theme="light"] .terminal-surface,
+[data-theme="light"] .terminal-output,
+[data-theme="light"] .console-panel {
+  background: #1a1f2e;
+  color: #94D4BC;
+}
+[data-theme="light"] .terminal-header {
+  background: rgba(255,255,255,0.04);
+  border-bottom-color: rgba(255,255,255,0.04);
+}
+[data-theme="light"] .console-panel-header {
+  background: rgba(255,255,255,0.02);
+}
+
+/* Time tracker card */
+[data-theme="light"] .time-tracker-card {
+  background: linear-gradient(135deg, #f0f2fb 0%, #ffffff 100%);
+  border-color: rgba(96,165,250,0.2);
+}
+
+/* Onboarding backdrop */
+[data-theme="light"] .onboarding-backdrop {
+  background: rgba(0,0,0,0.45);
+}
+
+/* Sidebar logo icon */
+[data-theme="light"] .sidebar-logo-icon {
+  box-shadow: 0 4px 12px rgba(59,130,246,0.3);
+}
+
+/* Topbar timer */
+[data-theme="light"] .topbar-timer {
+  background: #EDEDF3;
+  border-color: rgba(0,0,0,0.10);
+}
+
+/* Modal */
+[data-theme="light"] .modal {
+  background: #FFFFFF;
+  border-color: rgba(0,0,0,0.10);
+}
+
+/* Flash toast */
+[data-theme="light"] .flash {
+  background: #FFFFFF;
+  border-color: rgba(0,0,0,0.10);
+}
+
+/* ═══════════════════════════════════════════════════════
+   Theme Transition
+   ═══════════════════════════════════════════════════════ */
+html {
+  transition:
+    background-color var(--duration-slow) var(--ease-out),
+    color var(--duration-slow) var(--ease-out);
+}

package/ui/favicon.svg

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <rect width="32" height="32" rx="8" fill="#0F1117"/>
-  <path d="M16 16c-2.5-3.5-5-6-8-6a6 6 0 0 0 0 12c3 0 5.5-2.5 8-6z" fill="none" stroke="#6366F1" stroke-width="2.5" stroke-linecap="round"/>
-  <path d="M16 16c2.5 3.5 5 6 8 6a6 6 0 0 0 0-12c-3 0-5.5 2.5-8 6z" fill="none" stroke="#6366F1" stroke-width="2.5" stroke-linecap="round"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="8" fill="#0F1117"/>
+  <path d="M16 16c-2.5-3.5-5-6-8-6a6 6 0 0 0 0 12c3 0 5.5-2.5 8-6z" fill="none" stroke="#6366F1" stroke-width="2.5" stroke-linecap="round"/>
+  <path d="M16 16c2.5 3.5 5 6 8 6a6 6 0 0 0 0-12c-3 0-5.5 2.5-8 6z" fill="none" stroke="#6366F1" stroke-width="2.5" stroke-linecap="round"/>
+</svg>