consultoria-as/Autoparts-DB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: agregar design system completo con 2 temas (Industrial + Moderno)

Browse Source 
- Tokens CSS con variables para ambos temas (dark/light)
- 21 componentes reutilizables (buttons, cards, tables, modals, etc.)
- 10 pantallas POS (login, catálogo, POS, inventario, clientes, facturación, contabilidad, dashboard, configuración, reportes)
- Preview interactivo con selector de tema
- Generado por el equipo de Hugo (Milo-UX, Iris-UI, Zara-Frontend)
This commit is contained in:
Lucy
2026-04-01 01:41:04 +00:00
parent 5fc47473b6
commit 46360b6827
33 changed files with 32179 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
docs/design/design-system/components/index.html Normal file
View File

@@ -0,0 +1,268 @@
<!DOCTYPE html>
<html lang="es" data-theme="industrial">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nexus Autoparts — Design System Components</title>
<link rel="stylesheet" href="../tokens/tokens.css">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: var(--font-body); background: var(--color-bg-base);
color: var(--color-text-primary); padding: var(--space-8);
min-height: 100vh; transition: var(--transition-normal);
}
.theme-switcher {
position: sticky; top: 0; z-index: var(--z-sticky);
display: flex; gap: var(--space-2); align-items: center;
padding: var(--space-3) var(--space-4);
background: var(--color-bg-elevated);
border-bottom: 1px solid var(--color-border);
margin: calc(-1 * var(--space-8)); margin-bottom: var(--space-8);
}
.theme-switcher button {
padding: var(--space-2) var(--space-4);
border: 1px solid var(--color-border);
background: var(--color-bg-base); color: var(--color-text-primary);
border-radius: var(--radius-md); cursor: pointer;
font-family: var(--font-body); font-size: var(--text-body-sm);
transition: var(--transition-fast);
}
.theme-switcher button.active {
background: var(--color-primary); color: var(--color-text-inverse);
border-color: var(--color-primary);
}
.theme-switcher .logo {
font-family: var(--font-heading); font-weight: var(--heading-weight-primary);
font-size: var(--text-h5); color: var(--color-primary); margin-right: auto;
}
h1 { font-family: var(--font-heading); font-size: var(--text-h1);
font-weight: var(--heading-weight-primary); margin-bottom: var(--space-2);
color: var(--color-text-primary); line-height: var(--leading-h1); }
.accent { color: var(--color-text-accent); }
.subtitle { color: var(--color-text-muted); font-size: var(--text-body-lg);
margin-bottom: var(--space-10); max-width: 600px; line-height: var(--leading-body-lg); }
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-6);
}
.card {
background: var(--color-bg-elevated);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-6);
transition: var(--transition-normal);
text-decoration: none; color: inherit;
display: block;
}
.card:hover {
border-color: var(--color-primary);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
[data-theme="industrial"] .card {
border-radius: 0;
clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.card-icon {
font-size: 32px; margin-bottom: var(--space-3);
}
.card h3 {
font-family: var(--font-heading);
font-size: var(--text-h5); font-weight: var(--heading-weight-secondary);
margin-bottom: var(--space-2);
}
.card p {
font-size: var(--text-body-sm); color: var(--color-text-muted);
line-height: var(--leading-body-sm);
}
.card .status {
display: inline-block; margin-top: var(--space-3);
padding: 2px var(--space-2); font-size: 11px;
font-weight: var(--font-weight-semibold);
text-transform: uppercase; letter-spacing: var(--tracking-wider);
border-radius: var(--radius-sm);
}
.status-done { background: rgba(34,197,94,0.15); color: var(--color-success); }
.status-pending { background: rgba(234,179,8,0.15); color: var(--color-warning); }
.footer {
margin-top: var(--space-16);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border);
color: var(--color-text-muted);
font-size: var(--text-body-sm);
}
</style>
</head>
<body>
<div class="theme-switcher">
<span class="logo">NEXUS AUTOPARTS</span>
<button class="active" onclick="setTheme('industrial')">Industrial Robusto</button>
<button onclick="setTheme('modern')">Tecnico Moderno</button>
</div>
<h1>Design System <span class="accent">Components</span></h1>
<p class="subtitle">Componentes reutilizables del sistema POS para refaccionarias. Cada componente soporta ambos temas.</p>
<div class="grid">
<a class="card" href="buttons.html">
<div class="card-icon">&#128280;</div>
<h3>Buttons</h3>
<p>Primary, secondary, danger, ghost, icon buttons. Todos los tamanos, estados y grupos.</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="inputs.html">
<div class="card-icon">&#9999;</div>
<h3>Inputs</h3>
<p>Text, number, search, select, checkbox, radio y toggle. Validacion y estados.</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="cards.html">
<div class="card-icon">&#128196;</div>
<h3>Cards</h3>
<p>Tarjetas de producto, cliente y resumen/dashboard con datos reales del POS.</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="tables.html">
<div class="card-icon">&#128202;</div>
<h3>Tables</h3>
<p>Tablas de inventario y ventas con sorting, paginacion, filtros y acciones.</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="modals.html">
<div class="card-icon">&#128448;</div>
<h3>Modals</h3>
<p>Modales de formulario con overlay real e interactivos.</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="navigation.html">
<div class="card-icon">&#128209;</div>
<h3>Navigation</h3>
<p>Sidebar, breadcrumbs y tabs. Navegacion principal del sistema POS.</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="badges.html">
<div class="card-icon">&#128276;</div>
<h3>Badges & Tags</h3>
<p>Status badges, tags removibles, labels y contadores numericos.</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="alerts.html">
<div class="card-icon">&#9888;</div>
<h3>Alerts & Toasts</h3>
<p>Alert banners, toast notifications y alertas inline de validacion.</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="search.html">
<div class="card-icon">&#128269;</div>
<h3>Search</h3>
<p>Barra de busqueda con autocompletado y busqueda por vehiculo.</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="pagination.html">
<div class="card-icon">&#128218;</div>
<h3>Pagination</h3>
<p>Paginacion completa, simple y para datasets grandes (1.4M+ partes).</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="dropdowns.html">
<div class="card-icon">&#128203;</div>
<h3>Dropdowns</h3>
<p>Dropdown menus de acciones, select menus y context menus.</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="toggles.html">
<div class="card-icon">&#128280;</div>
<h3>Toggles & Switches</h3>
<p>Toggle switches, checkboxes y radio buttons con variantes de tamano.</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="progress.html">
<div class="card-icon">&#9203;</div>
<h3>Progress & Loading</h3>
<p>Progress bars, spinners, dot loaders y skeleton loaders.</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="avatars.html">
<div class="card-icon">&#128100;</div>
<h3>Avatars</h3>
<p>Avatares con iniciales, estados online/offline, grupos y contexto de usuario.</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="tooltips.html">
<div class="card-icon">&#128172;</div>
<h3>Tooltips & Popovers</h3>
<p>Tooltips informativos, info icons y popovers interactivos con acciones.</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="chips.html">
<div class="card-icon">&#127991;</div>
<h3>Chips</h3>
<p>Filter chips, action chips, choice chips y barra de filtros aplicados.</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="dialogs.html">
<div class="card-icon">&#128488;</div>
<h3>Dialogs</h3>
<p>Confirmaciones, advertencias, prompts de descuento y autorizacion PIN.</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="tabs.html">
<div class="card-icon">&#128209;</div>
<h3>Tabs (Contextuales)</h3>
<p>Tabs para inventario, contabilidad, detalle de producto y configuracion.</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="accordion.html">
<div class="card-icon">&#128220;</div>
<h3>Accordion</h3>
<p>Secciones colapsables para detalle de producto y FAQ. Interactivo.</p>
<span class="status status-done">Completo</span>
</a>
<a class="card" href="datepicker.html">
<div class="card-icon">&#128197;</div>
<h3>Date/Time Pickers</h3>
<p>Inputs de fecha, calendario, rango de fechas y presets rapidos.</p>
<span class="status status-done">Completo</span>
</a>
</div>
<div class="footer">
Nexus Autoparts Design System v1.0 &#183; 20 de 20 componentes &#183; Tokens: tokens.css
</div>
<script>
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
document.querySelectorAll('.theme-switcher button').forEach(btn => {
btn.classList.toggle('active', btn.textContent.toLowerCase().includes(theme === 'industrial' ? 'industrial' : 'tecnico'));
});
}
</script>
</body>
</html>