From 41b6882b5cbdddd12b913b085f012a07619a8c22 Mon Sep 17 00:00:00 2001 From: dmolinari Date: Thu, 16 Apr 2026 11:15:36 -0300 Subject: [PATCH] feat(web): mas contraste cards/tables sobre bg + utility .surface MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Cambios de tokens: - Light --background: 0.988 -> 0.962 (slate cool, hace pop el card white) - Dark --background: 0.135 -> 0.130 (mas oscuro) - Dark --card: 0.180 -> 0.220 (salto +0.090 vs bg, antes solo +0.045) - Dark --popover: 0.200 -> 0.245 (popovers/dropdowns aun mas elevados) - Dark --secondary/muted/accent/input: bumpeados al nivel correspondiente para que la jerarquia visual mantenga proporciones Card variants: - default: shadow-sm -> shadow-md (mas elevacion default) - nuevo variant 'flat' (sin shadow) para cuando se necesite Nueva utility .surface: - Mismo treatment visual que pero como clase CSS — para contenedores que no usan el componente Card (ej: tablas, listas custom). bg-card + border + radius + shadow-md. UsersTable refactorizado para usar .surface en lugar de border manual. Cualquier futura tabla/lista usa .surface por consistencia. Tests 136/136 verde. --- src/web/src/components/ui/card.tsx | 3 +- .../features/users/components/UsersTable.tsx | 4 +-- src/web/src/index.css | 28 +++++++++++++------ 3 files changed, 23 insertions(+), 12 deletions(-) diff --git a/src/web/src/components/ui/card.tsx b/src/web/src/components/ui/card.tsx index 3f2d85d..fd7f0de 100644 --- a/src/web/src/components/ui/card.tsx +++ b/src/web/src/components/ui/card.tsx @@ -6,9 +6,10 @@ import { cn } from '@/lib/utils' const cardVariants = cva('rounded-xl text-card-foreground transition-shadow', { variants: { variant: { - default: 'border border-border bg-card shadow-sm', + default: 'border border-border bg-card shadow-md', elevated: 'border border-border bg-card shadow-lg', glass: 'glass shadow-xl', + flat: 'border border-border bg-card', }, }, defaultVariants: { diff --git a/src/web/src/features/users/components/UsersTable.tsx b/src/web/src/features/users/components/UsersTable.tsx index 11f6151..f51e780 100644 --- a/src/web/src/features/users/components/UsersTable.tsx +++ b/src/web/src/features/users/components/UsersTable.tsx @@ -25,10 +25,10 @@ export function UsersTable({ rows, onRowClick }: UsersTableProps) { } return ( -
+
- + diff --git a/src/web/src/index.css b/src/web/src/index.css index a3f7cee..afca6c3 100644 --- a/src/web/src/index.css +++ b/src/web/src/index.css @@ -53,10 +53,10 @@ --warning-foreground: oklch(0.220 0.050 75); /* ── shadcn semantic mapping (LIGHT) ─────────────────── */ - --background: oklch(0.988 0.003 250); /* slate barely warm */ + --background: oklch(0.962 0.006 250); /* slate cool — pop con cards white */ --foreground: var(--neutral-900); - --card: oklch(1 0 0); /* pure white */ + --card: oklch(1 0 0); /* pure white — máximo contraste */ --card-foreground: var(--neutral-900); --popover: oklch(1 0 0); @@ -110,32 +110,32 @@ .dark { /* Background con shift sutil hacia violet → "tech" feel */ - --background: oklch(0.135 0.018 252); /* deep slate-violet */ + --background: oklch(0.130 0.018 252); /* deep slate-violet — más oscuro para contraste */ --foreground: var(--neutral-50); - --card: oklch(0.180 0.020 252); /* elevación visual */ + --card: oklch(0.220 0.024 252); /* elevación visual marcada — pop sobre bg */ --card-foreground: var(--neutral-50); - --popover: oklch(0.200 0.022 252); + --popover: oklch(0.245 0.024 252); /* dropdowns/popovers más elevados aún */ --popover-foreground: var(--neutral-50); --primary: var(--brand-400); /* brighter en dark, "neon" feel */ --primary-foreground: oklch(0.130 0.013 250); - --secondary: oklch(0.230 0.020 252); + --secondary: oklch(0.255 0.022 252); --secondary-foreground: var(--neutral-100); - --muted: oklch(0.220 0.020 252); + --muted: oklch(0.245 0.022 252); --muted-foreground: var(--neutral-400); - --accent: oklch(0.250 0.030 252); + --accent: oklch(0.275 0.032 252); --accent-foreground: var(--brand-300); --destructive: oklch(0.580 0.190 25); --destructive-foreground: oklch(0.990 0.000 0); --border: oklch(1 0 0 / 0.10); /* sutil glass-style border */ - --input: oklch(0.215 0.020 252); /* elevado del bg, contrast con texto */ + --input: oklch(0.245 0.022 252); /* elevado, mismo nivel que muted */ --input-border: oklch(1 0 0 / 0.14); --ring: var(--brand-400); @@ -252,6 +252,16 @@ opacity: 0.10; } + /* Surface utility — para contenedores que no usan (ej: tablas, listas) + Mismo treatment visual: bg elevado + border + shadow */ + .surface { + background-color: var(--card); + color: var(--card-foreground); + border: 1px solid var(--border); + border-radius: var(--radius); + box-shadow: var(--shadow-md); + } + /* Brand glow para focus en inputs críticos */ .focus-glow:focus-visible { box-shadow: var(--shadow-glow);
Usuario Nombre Email