pixelon 0.7.5 → 0.8.0

package/src/styles/domains/_chat.scss

@@ -16,19 +16,39 @@ $chat-component-prefix: "px-chat-";
 
   // Colores del tema chat
   --chat-color-primary: var(--chat-color-black);
+  --chat-color-on-primary: var(--chat-color-white);
+  --chat-color-primary-dark: #262626;
   --chat-color-secondary: #343541;
+  --chat-color-secondary-dark: #24242f;
+  --chat-color-accent: #3b82f6;
+  --chat-color-accent-dark: #2563eb;
   --chat-color-background: #ffffff;
   --chat-color-background-alt: #f7f7f8;
+  --chat-color-background-secondary: #f7f7f8;
+  --chat-color-bg-secondary: #f3f4f6;
+  --chat-color-background-hover: #eef0f2;
   --chat-color-text: #2d2d2d;
+  --chat-color-text-primary: #111827;
   --chat-color-text-secondary: #6b7280;
+  --chat-color-text-muted: #6b7280;
   --chat-color-text-inverse: #ffffff;
   --chat-color-border: #e5e7eb;
+  --chat-color-border-strong: #d1d5db;
+  --chat-color-surface: #ffffff;
+  --chat-color-surface-hover: #f3f4f6;
+  // Wash genérico para hovers/estados sobre una superficie que puede ser cualquiera (no siempre
+  // --chat-color-surface): evita que cada componente tenga que definir su propio par claro/oscuro.
+  --chat-color-overlay-hover: rgba(0, 0, 0, 0.04);
+  --chat-color-overlay-hover-strong: rgba(0, 0, 0, 0.08);
+  --chat-color-surface-muted: #e5e7eb;
 
   // Colores de estado del chat
   --chat-color-success: #10b981;
+  --chat-color-success-bg: rgba(22, 163, 74, 0.08);
   --chat-color-error: #ef4444;
   --chat-color-warning: #f59e0b;
   --chat-color-info: #3b82f6;
+  --chat-color-danger: #dc2626;
 
   // SPEC-015 — el aviso encima del input no se pinta con el color plano de estado: ese color es
   // para un filo o un icono, no para un fondo bajo texto. Cada tipo lleva su par tinte/texto,
@@ -59,8 +79,10 @@ $chat-component-prefix: "px-chat-";
   --chat-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --chat-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
   --chat-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --chat-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 
   // Espaciado del chat
+  --chat-spacing-xxs: 0.125rem;
   --chat-spacing-xs: 0.25rem;
   --chat-spacing-sm: 0.5rem;
   --chat-spacing-md: 1rem;
@@ -82,6 +104,7 @@ $chat-component-prefix: "px-chat-";
   --chat-font-size-xs: 0.75rem;
   --chat-font-size-sm: 0.875rem;
   --chat-font-size-base: 1rem;
+  --chat-font-size-md: 1rem;
   --chat-font-size-lg: 1.125rem;
   --chat-font-size-xl: 1.25rem;
   --chat-font-size-2xl: 1.5rem;
@@ -98,23 +121,53 @@ $chat-component-prefix: "px-chat-";
   --chat-line-height-relaxed: 1.75;
 }
 
-// Tema oscuro del chat
+// Tema oscuro del chat — SPEC-157: negro real (no el gris de ChatGPT que había antes),
+// y COMPLETO: cubre también los tokens que antes vivían solo del fallback hex de cada
+// componente (surface, text-primary/-muted, danger, on-primary, border-strong...), para que
+// activar `data-theme="dark"` cambie de verdad todo el chat y no solo la mitad tokenizada.
 [data-theme="dark"] {
-  --chat-color-background: #343541;
-  --chat-color-background-alt: #444654;
-  --chat-color-text: #ffffff;
-  --chat-color-text-secondary: #9ca3af;
-  --chat-color-border: #4b5563;
-
-  --chat-color-user-bg: #444654;
-  --chat-color-assistant-bg: #343541;
-  --chat-color-input-bg: #40414f;
-  --chat-color-input-border: #4b5563;
+  --chat-color-background: #000000;
+  --chat-color-background-alt: #0a0a0a;
+  --chat-color-background-secondary: #0a0a0a;
+  --chat-color-bg-secondary: #111111;
+  --chat-color-background-hover: #1a1a1a;
+  --chat-color-text: #f5f5f2;
+  --chat-color-text-primary: #f5f5f2;
+  --chat-color-text-secondary: #9ba0a8;
+  --chat-color-text-muted: #9ba0a8;
+  --chat-color-border: rgba(245, 245, 242, 0.14);
+  --chat-color-border-strong: rgba(245, 245, 242, 0.24);
+  --chat-color-surface: #111111;
+  --chat-color-surface-hover: #1a1a1a;
+  --chat-color-surface-muted: rgba(245, 245, 242, 0.08);
+  --chat-color-overlay-hover: rgba(245, 245, 242, 0.06);
+  --chat-color-overlay-hover-strong: rgba(245, 245, 242, 0.12);
+
+  // El negro y el blanco se invierten: lo que era "primario" (negro sobre fondo blanco) pasa a
+  // ser blanco sobre fondo negro. Todo componente que pinta con --chat-color-primary como FONDO
+  // (ChatHeader, Button primario, Avatar, Loader) usa --chat-color-on-primary para el texto/ícono
+  // que va encima — así el par se invierte junto con el fondo, en vez de quedar blanco-sobre-blanco.
+  --chat-color-primary: #ffffff;
+  --chat-color-on-primary: #000000;
+  --chat-color-text-inverse: #000000;
+  --chat-color-primary-dark: #e5e5e5;
+  --chat-color-secondary: #9ba0a8;
+  --chat-color-secondary-dark: #c2c7d0;
+  --chat-color-accent: #60a5fa;
+  --chat-color-accent-dark: #93c5fd;
+
+  --chat-color-danger: #f87171;
+  --chat-color-success-bg: rgba(22, 163, 74, 0.22);
+
+  --chat-color-user-bg: #111111;
+  --chat-color-assistant-bg: #000000;
+  --chat-color-input-bg: #0a0a0a;
+  --chat-color-input-border: rgba(245, 245, 242, 0.18);
   --chat-color-input-focus: #ffffff;
 
   // En oscuro el compositor aclara sobre el fondo, que es como se separa aqui.
-  --chat-color-composer-bg: #40414f;
-  --chat-color-composer-bg-focus: #4a4b59;
+  --chat-color-composer-bg: #111111;
+  --chat-color-composer-bg-focus: #1a1a1a;
 
   // En oscuro el tinte oscurece y el texto aclara: al reves que en claro, mismo contraste.
   --chat-color-notice-success-bg: #1c3b33;
@@ -125,4 +178,98 @@ $chat-component-prefix: "px-chat-";
   --chat-color-notice-warning-text: #fcd34d;
   --chat-color-notice-info-bg: #26334d;
   --chat-color-notice-info-text: #93c5fd;
+
+  // Sombras oscuras no se ven sobre negro puro: se reemplazan por un borde sutil de luz.
+  --chat-shadow-sm: inset 0 0 0 1px rgba(245, 245, 242, 0.08);
+  --chat-shadow-md: inset 0 0 0 1px rgba(245, 245, 242, 0.1);
+  --chat-shadow-lg: inset 0 0 0 1px rgba(245, 245, 242, 0.12);
+  --chat-shadow-xl: inset 0 0 0 1px rgba(245, 245, 242, 0.14);
+
+  // --px-color-* (prefijo compartido con lumi, definido en global.scss): solo se sobreescribe
+  // AQUÍ, adentro de [data-theme="dark"] del chat — lumi nunca fija ese atributo, así que sus
+  // componentes (RecordCard, ScrollToEnd, FieldValue, CardList) no se ven afectados.
+  --px-color-primary: #f5f5f2;
+  --px-color-text: #f5f5f2;
+  --px-color-text-muted: rgba(245, 245, 242, 0.5);
+  --px-color-surface: #111111;
+  --px-color-surface-hover: #1a1a1a;
+  --px-color-surface-muted: rgba(245, 245, 242, 0.08);
+  --px-color-border: rgba(245, 245, 242, 0.14);
+  --px-color-border-strong: rgba(245, 245, 242, 0.24);
+  --px-color-success: #4ade80;
+  --px-color-warning: #fb923c;
+  --px-color-warning-bg: rgba(251, 146, 60, 0.14);
+  --px-color-danger: #f87171;
+  --px-color-danger-bg: rgba(248, 113, 113, 0.14);
+  --px-color-danger-border: rgba(248, 113, 113, 0.35);
+}
+
+// `theme="system"` (Chat/ChatWidget): sin `data-theme` explícito en la raíz del chat, se sigue
+// la preferencia del SO — escapado al propio nodo del chat (no `:root`/`<html>`), para que dos
+// chats en la misma página puedan tener cada uno su propio `theme` sin pisarse.
+// Mismos valores que el bloque de arriba — mantenerlos sincronizados si uno cambia.
+@media (prefers-color-scheme: dark) {
+  .#{$chat-component-prefix}layout:not([data-theme]),
+  .#{$chat-component-prefix}widget:not([data-theme]) {
+    --chat-color-background: #000000;
+    --chat-color-background-alt: #0a0a0a;
+    --chat-color-background-secondary: #0a0a0a;
+    --chat-color-bg-secondary: #111111;
+    --chat-color-background-hover: #1a1a1a;
+    --chat-color-text: #f5f5f2;
+    --chat-color-text-primary: #f5f5f2;
+    --chat-color-text-secondary: #9ba0a8;
+    --chat-color-text-muted: #9ba0a8;
+    --chat-color-border: rgba(245, 245, 242, 0.14);
+    --chat-color-border-strong: rgba(245, 245, 242, 0.24);
+    --chat-color-surface: #111111;
+    --chat-color-surface-hover: #1a1a1a;
+    --chat-color-surface-muted: rgba(245, 245, 242, 0.08);
+  --chat-color-overlay-hover: rgba(245, 245, 242, 0.06);
+  --chat-color-overlay-hover-strong: rgba(245, 245, 242, 0.12);
+    --chat-color-primary: #ffffff;
+    --chat-color-on-primary: #000000;
+    --chat-color-text-inverse: #000000;
+    --chat-color-primary-dark: #e5e5e5;
+    --chat-color-secondary: #9ba0a8;
+    --chat-color-secondary-dark: #c2c7d0;
+    --chat-color-accent: #60a5fa;
+    --chat-color-accent-dark: #93c5fd;
+    --chat-color-danger: #f87171;
+    --chat-color-success-bg: rgba(22, 163, 74, 0.22);
+    --chat-color-user-bg: #111111;
+    --chat-color-assistant-bg: #000000;
+    --chat-color-input-bg: #0a0a0a;
+    --chat-color-input-border: rgba(245, 245, 242, 0.18);
+    --chat-color-input-focus: #ffffff;
+    --chat-color-composer-bg: #111111;
+    --chat-color-composer-bg-focus: #1a1a1a;
+    --chat-color-notice-success-bg: #1c3b33;
+    --chat-color-notice-success-text: #6ee7b7;
+    --chat-color-notice-error-bg: #43272a;
+    --chat-color-notice-error-text: #fca5a5;
+    --chat-color-notice-warning-bg: #40341f;
+    --chat-color-notice-warning-text: #fcd34d;
+    --chat-color-notice-info-bg: #26334d;
+    --chat-color-notice-info-text: #93c5fd;
+    --chat-shadow-sm: inset 0 0 0 1px rgba(245, 245, 242, 0.08);
+    --chat-shadow-md: inset 0 0 0 1px rgba(245, 245, 242, 0.1);
+    --chat-shadow-lg: inset 0 0 0 1px rgba(245, 245, 242, 0.12);
+    --chat-shadow-xl: inset 0 0 0 1px rgba(245, 245, 242, 0.14);
+
+    --px-color-primary: #f5f5f2;
+    --px-color-text: #f5f5f2;
+    --px-color-text-muted: rgba(245, 245, 242, 0.5);
+    --px-color-surface: #111111;
+    --px-color-surface-hover: #1a1a1a;
+    --px-color-surface-muted: rgba(245, 245, 242, 0.08);
+    --px-color-border: rgba(245, 245, 242, 0.14);
+    --px-color-border-strong: rgba(245, 245, 242, 0.24);
+    --px-color-success: #4ade80;
+    --px-color-warning: #fb923c;
+    --px-color-warning-bg: rgba(251, 146, 60, 0.14);
+    --px-color-danger: #f87171;
+    --px-color-danger-bg: rgba(248, 113, 113, 0.14);
+    --px-color-danger-border: rgba(248, 113, 113, 0.35);
+  }
 }

package/src/styles/domains/_lumi.scss

@@ -74,16 +74,30 @@ $lumi-component-prefix: "px-lumi-";
   --lumi-color-secondary: #e5e7eb;                      // Gris claro para secondary
   --lumi-color-background: #ffffff;                     // Fondo blanco
   --lumi-color-background-alt: #f7f7f8;                 // Fondo alternativo
+  --lumi-color-background-hover: rgba(0, 0, 0, 0.05);   // Wash de hover sobre superficie variable
   --lumi-color-text: #2d2d2d;                          // Texto oscuro
   --lumi-color-text-secondary: #6b7280;                // Texto secundario
   --lumi-color-text-inverse: #ffffff;                  // Texto inverso (en botones primarios)
   --lumi-color-border: #e5e7eb;                        // Bordes sutiles
+  // 2026-09-28 — variante fuerte, igual que ya existe en el dominio chat (--chat-color-border-strong):
+  // para separaciones que sí tienen que notarse (un drawer encima de la página, no un hairline
+  // decorativo). No existía; varios componentes ya la referenciaban con fallback y por eso nunca
+  // se veía distinta de --lumi-color-border.
+  --lumi-color-border-strong: #d1d5db;
 
   // Colores de estado clásicos
   --lumi-color-success: #10b981;                       // Verde éxito
-  --lumi-color-error: #ef4444;                         // Rojo error  
+  --lumi-color-error: #ef4444;                         // Rojo error
   --lumi-color-warning: #f59e0b;                       // Amarillo advertencia
   --lumi-color-info: #3b82f6;                          // Azul información
+  // SPEC-157 — tinte de fondo para texto de error/éxito (mismos valores que chat, para que un
+  // aviso se vea igual en las dos partes del producto).
+  --lumi-color-error-bg: #fdecec;
+  --lumi-color-success-bg: #e8f7f1;
+  // SPEC-157 — alias real: varios componentes usaban --lumi-color-danger(-bg) como fantasma con
+  // fallback (#dc2626/#ff4d4f/#ef4444 según el archivo) — mismo color que --lumi-color-error.
+  --lumi-color-danger: var(--lumi-color-error);
+  --lumi-color-danger-bg: var(--lumi-color-error-bg);
 
   // Espaciado del sistema
   --lumi-spacing-xs: 0.25rem;   // 4px
@@ -292,6 +306,35 @@ $lumi-component-prefix: "px-lumi-";
   --lumi-color-background: #2e2a1a;                     // Fondo dorado oscuro
 }
 
+// === MODO OSCURO ===
+// SPEC-157 (extensión a lumi) — hasta ahora "dark" solo tocaba el calendario; el resto de
+// componentes (DynamicForm, Input, Select, Table...) usan --lumi-color-background/-text/-border/
+// -background-alt/-text-inverse, que nunca tenían override oscuro. Sin esto, activar
+// data-lumi-theme="dark" no cambiaba nada fuera del calendario.
+[data-lumi-theme="dark"] {
+  --lumi-color-background: #000000;
+  --lumi-color-background-alt: #0a0a0a;
+  --lumi-color-background-hover: rgba(245, 245, 242, 0.06);
+  --lumi-color-text: #f5f5f2;
+  --lumi-color-text-secondary: #9ba0a8;
+  // Gris claro (botón "secondary") sobre negro se ve invisible-ish: pasa a una superficie oscura,
+  // igual que --chat-color-surface-hover.
+  --lumi-color-secondary: rgba(245, 245, 242, 0.08);
+  // El primario (violeta #6c63ff) ya tiene contraste suficiente sobre negro — no se invierte, a
+  // diferencia del negro/blanco puro del chat. Por eso --lumi-color-text-inverse (el texto que va
+  // ENCIMA de un fondo --lumi-color-primary) tampoco se invierte: sigue blanco en los dos modos.
+  --lumi-color-border: rgba(245, 245, 242, 0.14);
+  --lumi-color-border-strong: rgba(245, 245, 242, 0.24);
+  --lumi-color-error-bg: #43272a;
+  --lumi-color-success-bg: #1c3b33;
+  // SPEC-158 — mismo hueco que --lumi-color-border-strong: solo el *-bg tenía par oscuro, el
+  // color de TEXTO (error/éxito directo, sin fondo detrás) se quedaba con el tono de claro
+  // (#ef4444/#10b981), que sobre negro pierde contraste. Mismos valores que ya usaba towing-web
+  // a mano en LoginPage.css.
+  --lumi-color-error: #f87171;
+  --lumi-color-success: #4ade80;
+}
+
 // === CALENDARIO DARK MODE ===
 [data-lumi-theme="dark"],
 .px-lumi-calendar--dark {

package/src/styles/global.scss

@@ -3,3 +3,26 @@
 * {
   box-sizing: border-box;
 }
+
+// SPEC-157 — prefijo compartido `--px-*`: lo consumen componentes de AMBOS dominios (chat:
+// ReactiveCrudItemChat, DeadlineCountdown; lumi: RecordCard, ScrollToEnd, FieldValue, CardList),
+// pero nunca se había definido en ningún :root — cada sitio vivía de su propio fallback hex, y
+// esos fallbacks no siempre coincidían entre sí. Valores aquí = el fallback más usado en el
+// código real, para que definir el token no cambie nada visible en claro. El override para
+// oscuro vive en _chat.scss (solo el chat activa data-theme; lumi no se toca).
+:root {
+  --px-color-primary: #111827;
+  --px-color-text: #111827;
+  --px-color-text-muted: rgba(0, 0, 0, 0.45);
+  --px-color-surface: #ffffff;
+  --px-color-surface-hover: #f9fafb;
+  --px-color-surface-muted: #f9fafb;
+  --px-color-border: #e5e7eb;
+  --px-color-border-strong: #d1d5db;
+  --px-color-success: #16a34a;
+  --px-color-warning: #c2410c;
+  --px-color-warning-bg: #fff7ed;
+  --px-color-danger: #b91c1c;
+  --px-color-danger-bg: #fef2f2;
+  --px-color-danger-border: #fecaca;
+}