/* ========================================================================== Zelanda OS — Design Tokens canónicos Archivo: zelanda-tokens.css · Versión: 1.0.0 Fuente de verdad visual del ecosistema. Copia vendored idéntica en cada producto (ver TOKENS.md). ADITIVO: no pisa estilos existentes; la adopción visual es gradual. Los valores canónicos provienen de: - Repo/zelanda_mockup/design-tokens.html (paleta corporativa) - zelanda_api/apps/webui/products.py (brand_color por producto) - zelanda.css compartido de los productos CI4 (tokens --zel-* vigentes) ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. Paleta corporativa Zelanda ------------------------------------------------------------------ */ --zel-navy: #0D1B2A; /* Zelanda Navy — sidebar, fondos oscuros, marca */ --zel-blue: #2563EB; /* Zelanda Blue — acento corporativo principal */ --zel-blue-dark: #1D4ED8; /* hover de --zel-blue */ --zel-blue-darker: #1E40AF; /* active/pressed de --zel-blue */ --zel-teal: #14B8A6; --zel-teal-light: #5EEAD4; --zel-green: #22C55E; --zel-mint: #5ED6BF; --zel-pale: #DDF3EF; --zel-crimson: #C62533; /* rojo de marca (Security/Sentry). NO usar --zel-red: en el Hub ya significa "danger" */ --zel-purple: #8B5CF6; --zel-amber: #F59E0B; --zel-orange: #F97316; --zel-sky: #0EA5E9; --zel-gold: #E5A52D; /* acento dorado legacy (--brand-gold) */ --zel-gray: #636463; /* gris marca legacy (--brand-gray) */ /* Semáforo / estados */ --zel-danger: #D64545; --zel-warning: #D99A1E; --zel-success: #22C55E; --zel-info: #2563EB; --zel-red: #D64545; /* alias legacy del Hub: --zel-red = danger */ /* ------------------------------------------------------------------ 2. Color de marca por producto Fuente: zelanda_api/apps/webui/products.py → 'brand_color' ------------------------------------------------------------------ */ --zel-app-erp: #2563EB; /* zelanda / zelandav1 */ --zel-app-demo: #14B8A6; /* zelanda_demo */ --zel-app-portal: #F97316; /* zelanda_portal */ --zel-app-community: #22C55E; /* zelanda_community */ --zel-app-support: #8B5CF6; /* zelanda_support */ --zel-app-academy: #2563EB; /* zelanda_academy */ --zel-app-analytics: #F59E0B; /* zelanda_analytics (ver nota TOKENS.md: su layout main usa hoy #7C3AED) */ --zel-app-automate: #0EA5E9; /* zelanda_automate */ --zel-app-security: #C62533; /* security_zelanda */ --zel-app-sentry: #C62533; /* zelanda_sentry */ --zel-app-connector: #0D1B2A; /* zelanda_connector */ /* Acento activo del producto actual. Los productos CI4 ya sobreescriben --brand-500/--brand-600/--brand-700 inline en sus layouts (y el ERP permite al usuario elegir acento con [data-preferred-color]). --zel-brand respeta ese override y cae al azul corporativo si el producto no define nada. */ --zel-brand: var(--brand-500, var(--zel-blue)); --zel-brand-hover: var(--brand-600, var(--zel-blue-dark)); --zel-brand-active: var(--brand-700, var(--zel-blue-darker)); /* Alias legacy del Hub: --zel-product-color = acento del producto */ --zel-product-color: var(--zel-brand); /* ------------------------------------------------------------------ 3. Tokens --zel-* ya vigentes en todos los productos (se redeclaran con los MISMOS valores canónicos) ------------------------------------------------------------------ */ --zel-deep: var(--zel-navy); --zel-primary: var(--zel-blue); --zel-primary-dark: var(--zel-blue-dark); /* --zel-teal, --zel-green, --zel-mint, --zel-pale ya están en §1 con los mismos valores que hoy tienen en producción */ /* Superficies — modo claro */ --zel-bg: #F8FAFC; --zel-card: #FFFFFF; --zel-text: #0F172A; --zel-muted: #64748B; --zel-border: rgba(226, 232, 240, 0.8); /* Superficies — modo oscuro (valores fijos, como hoy) */ --zel-bg-dark: #0B1220; --zel-card-dark: #1E293B; --zel-text-dark: #E2E8F0; --zel-muted-dark: #94A3B8; --zel-border-dark: rgba(51, 65, 85, 0.8); /* ------------------------------------------------------------------ 4. Capa semántica con auto-switch (NUEVA — uso recomendado a futuro) Cambia sola bajo html.dark o [data-theme="dark"]; permite escribir componentes sin duplicar reglas .dark. ------------------------------------------------------------------ */ --zel-surface: var(--zel-bg); --zel-surface-card: var(--zel-card); --zel-surface-text: var(--zel-text); --zel-surface-muted: var(--zel-muted); --zel-surface-border: var(--zel-border); /* ------------------------------------------------------------------ 5. Tipografía ------------------------------------------------------------------ */ --zel-font-brand: 'Montserrat', system-ui, sans-serif; /* títulos, marca */ --zel-font-body: 'Inter', system-ui, -apple-system, sans-serif; --zel-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --zel-weight-regular: 400; --zel-weight-medium: 500; --zel-weight-semibold: 600; --zel-weight-bold: 700; /* Escala de tamaños (rem sobre 16px) */ --zel-text-xs: 0.75rem; --zel-text-sm: 0.875rem; --zel-text-base: 1rem; --zel-text-lg: 1.125rem; --zel-text-xl: 1.25rem; --zel-text-2xl: 1.5rem; --zel-text-3xl: 1.75rem; --zel-text-4xl: 2rem; /* ------------------------------------------------------------------ 6. Radios ------------------------------------------------------------------ */ --zel-radius-sm: 0.5rem; --zel-radius-md: 0.75rem; /* = --card-radius actual */ --zel-radius: 1rem; /* radio base de tarjetas (mockup) */ --zel-radius-lg: 1.5rem; --zel-radius-full: 9999px; /* ------------------------------------------------------------------ 7. Sombras (tinta marca rgba(23,43,77,*)) ------------------------------------------------------------------ */ --zel-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.06); --zel-shadow: 0 4px 20px -4px rgba(23, 43, 77, 0.08); --zel-shadow-md: 0 10px 40px -10px rgba(23, 43, 77, 0.12); --zel-shadow-lg: 0 20px 60px -16px rgba(23, 43, 77, 0.16); /* ------------------------------------------------------------------ 8. Spacing (escala 0.25rem) ------------------------------------------------------------------ */ --zel-space-1: 0.25rem; --zel-space-2: 0.5rem; --zel-space-3: 0.75rem; --zel-space-4: 1rem; --zel-space-5: 1.25rem; --zel-space-6: 1.5rem; --zel-space-8: 2rem; --zel-space-10: 2.5rem; --zel-space-12: 3rem; --zel-space-16: 4rem; /* ------------------------------------------------------------------ 9. Motion (alineado con motion.css: --motion-* / --ease-*) ------------------------------------------------------------------ */ --zel-motion-fast: 150ms; --zel-motion-normal: 220ms; --zel-motion-medium: 300ms; --zel-motion-slow: 400ms; --zel-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --zel-ease-emphasized: cubic-bezier(0.2, 1, 0.2, 1); --zel-ease-decelerate: cubic-bezier(0, 0.8, 0.2, 1); --zel-ease-accelerate: cubic-bezier(0.4, 0, 1, 1); --zel-transition: 220ms cubic-bezier(0.2, 0, 0, 1); /* ------------------------------------------------------------------ 10. Gradientes corporativos ------------------------------------------------------------------ */ --zel-gradient: linear-gradient(135deg, var(--zel-navy) 0%, var(--zel-blue) 50%, var(--zel-teal) 100%); --zel-gradient-teal: linear-gradient(135deg, var(--zel-blue) 0%, var(--zel-teal) 60%, var(--zel-green) 100%); /* alias legacy usado en view-patterns.html */ --zelanda-gradient: var(--zel-gradient); } /* ========================================================================== Modo oscuro — convención dominante del ecosistema: (localStorage 'zelanda_theme' + prefers-color-scheme). Se soporta también [data-theme="dark"] por compatibilidad futura. Solo reasigna la capa semántica --zel-surface-*; los tokens --zel-*-dark siguen disponibles como valores fijos. ========================================================================== */ html.dark, [data-theme="dark"] { --zel-surface: var(--zel-bg-dark); --zel-surface-card: var(--zel-card-dark); --zel-surface-text: var(--zel-text-dark); --zel-surface-muted: var(--zel-muted-dark); --zel-surface-border: var(--zel-border-dark); color-scheme: dark; }