dmolinari/SIG-CM2.0
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): mas contraste cards/tables sobre bg + utility .surface

Browse Source 
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 <Card variant='default'> 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.
This commit is contained in:
dmolinari
2026-04-16 11:15:36 -03:00
parent 278e1cf378
commit 41b6882b5c
3 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/web/src/index.css
View File

@@ -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 <Card> (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);