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

Design System: bootstrap tokens + paleta brand El Día #13

Merged
dmolinari merged 9 commits from chore/design-system-tokens into main 2026-04-16 15:00:27 +00:00
Conversation 0 Commits 9 Files Changed 27 +23 -12
3 changed files with 23 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 41b6882b5c - Show all commits

3
src/web/src/components/ui/card.tsx
View File

@@ -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: {

4
src/web/src/features/users/components/UsersTable.tsx
View File

@@ -25,10 +25,10 @@ export function UsersTable({ rows, onRowClick }: UsersTableProps) {
}
return (
<div className="rounded-md border border-border overflow-hidden">
<div className="surface overflow-hidden">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-border bg-muted/50">
<tr className="border-b border-border bg-muted/60">
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Usuario</th>
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Nombre</th>
<th className="px-4 py-3 text-left font-medium text-muted-foreground">Email</th>

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);