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 +48 -18
3 changed files with 48 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 278e1cf378 - Show all commits

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

@@ -204,6 +204,21 @@
code, pre, kbd, samp {
font-family: var(--font-mono);
}
/* ── Browser autofill (Chrome/Safari): forzar tokens del DS ──
Sin esto, autofill aplica bg amarillo + texto blanco que se ve horrible
y rompe contraste con cualquier paleta. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
-webkit-text-fill-color: var(--foreground) !important;
-webkit-box-shadow: 0 0 0 1000px var(--input) inset !important;
caret-color: var(--foreground) !important;
transition: background-color 5000s ease-in-out 0s;
}
}
/* ================================================================
@@ -222,6 +237,21 @@
background-image: var(--gradient-mesh);
}
/* Grid texture overlay — usar como fondo decorativo en surfaces grandes
Light: 2.5% opacity (sutil pero visible). Dark: 5% (más presente) */
.grid-bg {
background-image:
linear-gradient(to right, currentColor 1px, transparent 1px),
linear-gradient(to bottom, currentColor 1px, transparent 1px);
background-size: 56px 56px;
color: var(--neutral-500);
opacity: 0.07;
}
.dark .grid-bg {
color: var(--neutral-400);
opacity: 0.10;
}
/* Brand glow para focus en inputs críticos */
.focus-glow:focus-visible {
box-shadow: var(--shadow-glow);

13
src/web/src/layouts/ProtectedLayout.tsx
View File

@@ -8,14 +8,21 @@ interface ProtectedLayoutProps {
export function ProtectedLayout({ children }: ProtectedLayoutProps) {
return (
<div className="flex h-svh overflow-hidden bg-background text-foreground">
<div className="relative flex h-svh overflow-hidden bg-background text-foreground">
{/* Grid texture — fondo cuadriculado para dar profundidad y resaltar glass */}
<div className="absolute inset-0 grid-bg pointer-events-none" />
{/* Subtle brand/violet glow accents — corners */}
<div className="absolute top-[-15%] right-[-8%] w-[500px] h-[500px] rounded-full bg-brand-500/10 dark:bg-brand-500/12 blur-[140px] pointer-events-none" />
<div className="absolute bottom-[-15%] left-[20%] w-[500px] h-[500px] rounded-full bg-violet-500/8 dark:bg-violet-500/10 blur-[140px] pointer-events-none" />
{/* Desktop sidebar */}
<div className="hidden lg:flex lg:w-60 lg:flex-col lg:shrink-0">
<div className="relative z-10 hidden lg:flex lg:w-60 lg:flex-col lg:shrink-0 border-r border-border">
<SidebarNav />
</div>
{/* Main column */}
<div className="flex flex-1 flex-col min-w-0 overflow-hidden">
<div className="relative z-10 flex flex-1 flex-col min-w-0 overflow-hidden">
<AppHeader />
<main className="flex-1 overflow-y-auto p-6">{children}</main>
</div>

23
src/web/src/layouts/PublicLayout.tsx
View File

@@ -7,23 +7,16 @@ interface PublicLayoutProps {
export function PublicLayout({ children }: PublicLayoutProps) {
return (
<div className="relative min-h-svh flex items-center justify-center p-4 overflow-hidden">
{/* Gradient mesh background — subtle radial blobs (brand cyan + violet) */}
<div className="relative min-h-svh flex items-center justify-center p-4 overflow-hidden bg-background">
{/* Grid texture — sutil en light, más presente en dark */}
<div className="absolute inset-0 grid-bg pointer-events-none" />
{/* Gradient mesh con radial blobs (brand cyan + violet) */}
<div className="absolute inset-0 gradient-mesh pointer-events-none" />
{/* Subtle grid texture overlay (visible on dark, fades on light) */}
<div
className="absolute inset-0 opacity-[0.015] dark:opacity-[0.04] pointer-events-none"
style={{
backgroundImage:
'linear-gradient(to right, currentColor 1px, transparent 1px), linear-gradient(to bottom, currentColor 1px, transparent 1px)',
backgroundSize: '64px 64px',
}}
/>
{/* Brand glow accents (positioned blobs) */}
<div className="absolute top-[-20%] right-[-10%] w-[500px] h-[500px] rounded-full bg-brand-500/10 dark:bg-brand-500/15 blur-[120px] pointer-events-none" />
<div className="absolute bottom-[-20%] left-[-10%] w-[500px] h-[500px] rounded-full bg-violet-500/10 dark:bg-violet-500/12 blur-[120px] pointer-events-none" />
{/* Brand glow accents — más intensos para que la profundidad funcione en light también */}
<div className="absolute top-[-20%] right-[-10%] w-[600px] h-[600px] rounded-full bg-brand-500/25 dark:bg-brand-500/20 blur-[120px] pointer-events-none" />
<div className="absolute bottom-[-20%] left-[-10%] w-[600px] h-[600px] rounded-full bg-violet-500/20 dark:bg-violet-500/18 blur-[120px] pointer-events-none" />
{/* Theme toggle — top-right, glass over gradient */}
<div className="absolute top-4 right-4 z-20">