/* Youcom Design System — tokens vendorizados (fuente: packages/tokens/css/tokens/*.css). Self-contained para el panel (sin build/CDN). Re-sincronizar desde el DS al actualizar. Activar en : data-mode="ops" data-accent="bronze" [data-theme]. */ /* ===== color-primitives.css ===== */ /* ============================================================ Capa 1 — PRIMITIVOS. Valores crudos, sin significado de uso. Derivados del logotipo Youcom (navy #113A4E, cian #119EBF). No consumir directamente en producto: usar la capa semántica. ============================================================ */ :root { /* cian — del cian del logotipo (#119EBF = 500) */ --yc-cyan-50: #EBF7FA; --yc-cyan-100: #D2EEF5; --yc-cyan-200: #A6DEEB; --yc-cyan-300: #6EC8DC; --yc-cyan-400: #35B0CC; --yc-cyan-500: #119EBF; --yc-cyan-600: #0E85A1; --yc-cyan-700: #0C6A81; --yc-cyan-800: #0A5163; --yc-cyan-900: #083D4B; /* navy — del azul petróleo del logotipo (#113A4E = 800) */ --yc-navy-50: #EEF4F7; --yc-navy-100: #D8E6ED; --yc-navy-200: #B3CDDA; --yc-navy-300: #85ACBF; --yc-navy-400: #55869E; --yc-navy-500: #356881; --yc-navy-600: #24506A; --yc-navy-700: #1A4258; --yc-navy-800: #113A4E; --yc-navy-900: #0B2836; /* gray — neutrales fríos (matiz ~202°, saturación mínima) */ --yc-gray-50: #F4F7F9; --yc-gray-100: #E9EEF2; --yc-gray-200: #D8E1E7; --yc-gray-300: #BCC9D2; --yc-gray-400: #93A5B1; --yc-gray-500: #6E8290; --yc-gray-600: #536575; --yc-gray-700: #40505D; --yc-gray-800: #2C3A45; --yc-gray-900: #1B2730; /* near-black para el modo Signal (NOC/wallboard) */ --yc-ink-950: #0B1116; --yc-ink-900: #0F171E; --yc-ink-850: #131C24; --yc-ink-800: #18242D; --yc-ink-700: #212F3A; --yc-ink-line: #22303B; /* estados semánticos — tono claro (base sobre superficies claras) */ --yc-success-500: #1C8A55; --yc-warning-500: #9A6700; --yc-error-500: #C93B3B; --yc-critical-500: #A11226; --yc-info-500: #2270C2; --yc-offline-500: #414E58; --yc-degraded-500: #B25409; --yc-maintenance-500: #6D5BD0; --yc-pending-500: #5B7186; --yc-processing-500: #0E85A1; /* estados semánticos — tono claro para tema oscuro (brillo elevado) */ --yc-success-dark: #3FBF82; --yc-warning-dark: #E0A93E; --yc-error-dark: #E7716B; --yc-critical-dark: #F2555F; --yc-info-dark: #6BA6E8; --yc-offline-dark: #8FA2AE; --yc-degraded-dark: #E8913F; --yc-maintenance-dark: #A493EE; --yc-pending-dark: #93AABF; --yc-processing-dark: #35B0CC; } /* ===== semantic.css ===== */ /* ============================================================ Capa 2 — SEMÁNTICO. Roles que el producto SÍ consume. Tema claro por defecto; [data-theme="dark"] hace override. El acento (--yc-brand-*) lo define accents.css según el producto. Los estados semánticos son IDÉNTICOS en todos los productos. ============================================================ */ :root, [data-theme="light"] { /* superficie / fondo */ --yc-bg: var(--yc-gray-50); --yc-bg-subtle: var(--yc-gray-100); --yc-surface: #FFFFFF; --yc-surface-elevated:#FFFFFF; --yc-border: var(--yc-gray-200); --yc-divider: var(--yc-gray-100); /* texto */ --yc-text: var(--yc-gray-900); --yc-text-secondary: var(--yc-gray-600); --yc-text-disabled: var(--yc-gray-400); --yc-text-on-brand: #FFFFFF; /* interacción (mapea al acento del producto) */ --yc-color-primary: var(--yc-brand-base); --yc-color-primary-hover: var(--yc-brand-strong); --yc-color-primary-active: var(--yc-brand-strong); --yc-color-primary-subtle: var(--yc-brand-subtle); --yc-focus-ring: var(--yc-cyan-200); /* estados semánticos (rol → primitivo, tono claro) */ --yc-color-success: var(--yc-success-500); --yc-color-warning: var(--yc-warning-500); --yc-color-error: var(--yc-error-500); --yc-color-critical: var(--yc-critical-500); --yc-color-info: var(--yc-info-500); --yc-color-offline: var(--yc-offline-500); --yc-color-degraded: var(--yc-degraded-500); --yc-color-maintenance: var(--yc-maintenance-500); --yc-color-pending: var(--yc-pending-500); --yc-color-processing: var(--yc-processing-500); /* fondos sutiles de estado */ --yc-success-bg: #E7F5EE; --yc-warning-bg: #FBF5E6; --yc-error-bg: #FBEFEF; --yc-critical-bg: #F9E9EC; --yc-info-bg: #ECF3FB; --yc-offline-bg: #EDF1F4; --yc-degraded-bg: #FBF1E7; --yc-maintenance-bg: #F1EFFB; --yc-pending-bg: #EFF3F6; --yc-processing-bg: #EBF7FA; } [data-theme="dark"] { --yc-bg: var(--yc-ink-950); --yc-bg-subtle: var(--yc-ink-900); --yc-surface: var(--yc-ink-850); --yc-surface-elevated:var(--yc-ink-700); --yc-border: var(--yc-ink-line); --yc-divider: #263544; --yc-text: #E9EEF2; --yc-text-secondary: #9DB0BD; --yc-text-disabled: #5D7180; --yc-text-on-brand: #06222B; /* en oscuro el primario usa el paso brillante del acento */ --yc-color-primary: var(--yc-brand-accent); --yc-color-primary-hover: var(--yc-brand-base); --yc-color-primary-active: var(--yc-brand-base); --yc-color-primary-subtle: color-mix(in srgb, var(--yc-brand-accent) 16%, transparent); --yc-focus-ring: var(--yc-cyan-400); --yc-color-success: var(--yc-success-dark); --yc-color-warning: var(--yc-warning-dark); --yc-color-error: var(--yc-error-dark); --yc-color-critical: var(--yc-critical-dark); --yc-color-info: var(--yc-info-dark); --yc-color-offline: var(--yc-offline-dark); --yc-color-degraded: var(--yc-degraded-dark); --yc-color-maintenance: var(--yc-maintenance-dark); --yc-color-pending: var(--yc-pending-dark); --yc-color-processing: var(--yc-processing-dark); --yc-success-bg: rgba(63,191,130,0.15); --yc-warning-bg: rgba(224,169,62,0.15); --yc-error-bg: rgba(231,113,107,0.15); --yc-critical-bg: rgba(242,85,95,0.15); --yc-info-bg: rgba(107,166,232,0.15); --yc-offline-bg: rgba(143,162,174,0.15); --yc-degraded-bg: rgba(232,145,63,0.15); --yc-maintenance-bg: rgba(164,147,238,0.15); --yc-pending-bg: rgba(147,170,191,0.15); --yc-processing-bg: rgba(53,176,204,0.15); } /* ===== modes.css ===== */ /* ============================================================ EJE A — MODOS. El "registro" visual, ligado a la audiencia/superficie (no al producto). Gobierna forma, sombra, densidad y tipografía display. Se activa con [data-mode="ops|bright|signal"]. ops → Carrier-class sobrio (herramientas internas densas, claro) bright → Vibrante moderno (portal, ventas, audiencias nuevas, claro) signal → Premium oscuro (NOC, monitoreo, wallboards; implica tema oscuro) Combinar con un acento (accents.css) y un tema (semantic.css). Signal debe usarse junto a [data-theme="dark"]. ============================================================ */ [data-mode="ops"] { --yc-radius-card: 10px; --yc-radius-control: 6px; --yc-shadow-card: var(--yc-shadow-sm); --yc-font-display: var(--yc-font-sans); --yc-density-row: 40px; /* fila estándar; compacta 32, cómoda 48 */ --yc-pad-card: 18px; --yc-metric-size: 38px; --yc-accent-gradient: none; } [data-mode="bright"] { --yc-radius-card: 20px; --yc-radius-control: 12px; --yc-shadow-card: 0 18px 40px -22px rgba(91,84,224,0.28), 0 2px 8px rgba(16,26,33,0.05); --yc-font-display: var(--yc-font-display-grotesk); --yc-density-row: 48px; --yc-pad-card: 22px; --yc-metric-size: 48px; /* degradado SOLO como acento puntual (botón/hero), nunca de fondo */ --yc-accent-gradient: linear-gradient(120deg, var(--yc-brand-accent), var(--yc-brand-base)); } [data-mode="signal"] { --yc-radius-card: 18px; --yc-radius-control: 12px; --yc-shadow-card: 0 20px 50px -24px rgba(34,199,230,0.22); --yc-font-display: var(--yc-font-display-grotesk); --yc-density-row: 44px; --yc-pad-card: 20px; --yc-metric-size: 48px; --yc-accent-gradient: linear-gradient(180deg, var(--yc-brand-accent), var(--yc-brand-base)); /* glow de acento reservado a datos/serie principal, con mesura */ --yc-signal-glow: 0 0 14px rgba(34,199,230,0.45); } /* ===== accents.css ===== */ /* ============================================================ EJE B — ACENTOS. El hue de identidad POR PRODUCTO. Se activa con [data-accent="cyan|teal|indigo|azure|bronze|plum"]. Define 4 tokens; la capa semántica los mapea a --yc-color-primary. Cambiar de producto = cambiar este atributo (o ~4 líneas). Recomendación de asignación (producto → modo × acento): NOC / Monitoreo signal × cyan Soporte / Tickets ops × teal CRM / Ventas bright × indigo Portal de clientes bright × azure Facturación / Cobranza ops × bronze RRHH / Admin ops × plum ============================================================ */ [data-accent="cyan"] { /* marca — NOC */ --yc-brand-subtle: var(--yc-cyan-50); --yc-brand-base: var(--yc-cyan-600); /* #0E85A1 */ --yc-brand-strong: var(--yc-cyan-800); /* #0A5163 */ --yc-brand-accent: var(--yc-cyan-500); /* #119EBF — series, dark */ } [data-accent="teal"] { /* soporte */ --yc-brand-subtle: #E5F6F2; --yc-brand-base: #0C8577; --yc-brand-strong: #095E54; --yc-brand-accent: #13A08F; } [data-accent="indigo"] { /* CRM / ventas */ --yc-brand-subtle: #ECEEFB; --yc-brand-base: #4453BE; --yc-brand-strong: #2F3C99; --yc-brand-accent: #6172D8; } [data-accent="azure"] { /* portal de clientes */ --yc-brand-subtle: #EAF2FC; --yc-brand-base: #1E6FD0; --yc-brand-strong: #154F97; --yc-brand-accent: #3A8BE4; } [data-accent="bronze"] { /* facturación / cobranza */ --yc-brand-subtle: #F8F0E2; --yc-brand-base: #9C6212; --yc-brand-strong: #6E440B; --yc-brand-accent: #C07E1E; } [data-accent="plum"] { /* RRHH / admin */ --yc-brand-subtle: #F3EBFB; --yc-brand-base: #8A4BC0; --yc-brand-strong: #5F3187; --yc-brand-accent: #A366D9; } /* Acentos vívidos opcionales para modo bright/signal cuando se busca máxima energía (portal marketing, wallboard). Úsense con criterio. */ [data-accent="cyan-vivid"] { --yc-brand-subtle: #E4F8FC; --yc-brand-base: #06AED4; --yc-brand-strong: #0C6A81; --yc-brand-accent: #22C7E6; } /* ===== type.css ===== */ /* ============================================================ TIPOGRAFÍA. IBM Plex como base de producto; Space Grotesk como display en los modos bright/signal; IBM Plex Mono para datos técnicos. Fuentes gratuitas (OFL). En producción, self-host recomendado. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap'); :root { /* familias */ --yc-font-sans: 'IBM Plex Sans', system-ui, 'Segoe UI', Helvetica, Arial, sans-serif; --yc-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --yc-font-display-grotesk: 'Space Grotesk', 'IBM Plex Sans', system-ui, sans-serif; /* --yc-font-display lo fija el modo (ops=sans, bright/signal=grotesk) */ --yc-font-display: var(--yc-font-sans); /* pesos */ --yc-weight-regular: 400; --yc-weight-medium: 500; --yc-weight-semibold:600; --yc-weight-bold: 700; /* escala (tamaño / interlínea) */ --yc-text-display: 32px; --yc-lh-display: 40px; --yc-text-h1: 24px; --yc-lh-h1: 32px; --yc-text-h2: 20px; --yc-lh-h2: 28px; --yc-text-h3: 16px; --yc-lh-h3: 24px; --yc-text-body: 14px; --yc-lh-body: 20px; --yc-text-body-sm: 13px; --yc-lh-body-sm: 18px; --yc-text-caption: 12px; --yc-lh-caption: 16px; /* cifras: métricas y tablas siempre tabulares */ --yc-numeric: tabular-nums; } /* ===== space-radius.css ===== */ /* ============================================================ ESPACIADO y RADIOS. Base de 4 px. Radios crudos; el radio de componente lo fija el modo (--yc-radius-card / --yc-radius-control). ============================================================ */ :root { --yc-space-0: 0; --yc-space-1: 2px; --yc-space-2: 4px; --yc-space-3: 8px; --yc-space-4: 12px; --yc-space-5: 16px; --yc-space-6: 20px; --yc-space-7: 24px; --yc-space-8: 32px; --yc-space-9: 40px; --yc-space-10: 48px; --yc-space-11: 64px; --yc-radius-sm: 4px; --yc-radius-md: 6px; --yc-radius-lg: 8px; --yc-radius-xl: 12px; --yc-radius-2xl: 20px; --yc-radius-full: 999px; } /* ===== elevation-motion.css ===== */ /* ============================================================ ELEVACIÓN y MOVIMIENTO. Sombras mínimas (marca sobria). Movimiento discreto y funcional; respeta prefers-reduced-motion. ============================================================ */ :root { --yc-shadow-sm: 0 1px 2px rgba(11,40,54,0.08); --yc-shadow-md: 0 2px 8px rgba(11,40,54,0.10); --yc-shadow-lg: 0 8px 24px rgba(11,40,54,0.14); --yc-duration-fast: 100ms; /* hover */ --yc-duration-base: 150ms; /* cambios de estado */ --yc-duration-slow: 240ms; /* drawer / modal */ --yc-ease: cubic-bezier(0.2, 0, 0, 1); } @media (prefers-reduced-motion: reduce) { :root { --yc-duration-fast: 0ms; --yc-duration-base: 0ms; --yc-duration-slow: 0ms; } } /* Pulso lento — reservado a severidad crítica / procesos en curso. */ @keyframes yc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { [style*="yc-pulse"] { animation: none !important; } } /* ===== layout.css ===== */ /* ============================================================ LAYOUT. Z-index, breakpoints, tamaños de icono, chrome de app. ============================================================ */ :root { /* z-index */ --yc-z-dropdown: 1000; --yc-z-sticky: 1100; --yc-z-drawer: 1200; --yc-z-modal: 1300; --yc-z-toast: 1400; --yc-z-tooltip: 1500; /* breakpoints (referencia; consumir en media queries) */ --yc-bp-sm: 640px; --yc-bp-md: 960px; --yc-bp-lg: 1280px; --yc-bp-xl: 1600px; --yc-bp-2xl: 1920px; /* iconos */ --yc-icon-xs: 14px; --yc-icon-sm: 16px; --yc-icon-md: 20px; --yc-icon-lg: 24px; --yc-icon-xl: 32px; /* chrome de aplicación */ --yc-sidebar-w: 240px; --yc-sidebar-collapsed-w:64px; --yc-header-h: 56px; --yc-content-max: 1440px; --yc-drawer-w: 400px; }