feat: agregar design system completo con 2 temas (Industrial + Moderno)
- 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
340
docs/design/design-system/components/badges.html
Normal file
340
docs/design/design-system/components/badges.html
Normal file
@@ -0,0 +1,340 @@
|
||||
<!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 — Badges & Tags</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);
|
||||
transition: var(--transition-normal);
|
||||
}
|
||||
|
||||
.theme-switcher {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: var(--z-sticky);
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
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);
|
||||
}
|
||||
|
||||
h1 { font-family: var(--font-heading); font-size: var(--text-h2); font-weight: var(--heading-weight-primary); margin-bottom: var(--space-2); color: var(--color-text-accent); }
|
||||
.subtitle { color: var(--color-text-muted); font-size: var(--text-body); margin-bottom: var(--space-8); }
|
||||
section { margin-bottom: var(--space-10); }
|
||||
section h2 { font-family: var(--font-heading); font-size: var(--text-h4); font-weight: var(--heading-weight-secondary); color: var(--color-text-secondary); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
|
||||
.component-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-6); }
|
||||
.label { font-size: var(--text-caption); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-2); }
|
||||
|
||||
/* ====== Badge Base ====== */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: 2px var(--space-3);
|
||||
font-size: var(--text-caption);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--radius-full);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .badge {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Status Badges */
|
||||
.badge-success {
|
||||
background: var(--color-success-light);
|
||||
color: var(--color-success-dark);
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .badge-success {
|
||||
background: rgba(34, 197, 94, 0.15);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background: var(--color-warning-light);
|
||||
color: var(--color-warning-dark);
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .badge-warning {
|
||||
background: rgba(234, 179, 8, 0.15);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.badge-error {
|
||||
background: var(--color-error-light);
|
||||
color: var(--color-error-dark);
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .badge-error {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
background: var(--color-primary-muted);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.badge-neutral {
|
||||
background: var(--color-neutral-200);
|
||||
color: var(--color-neutral-700);
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .badge-neutral {
|
||||
background: var(--color-surface-3);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Dot indicator */
|
||||
.badge-dot::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: var(--radius-full);
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
/* ====== Tags ====== */
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-1) var(--space-3);
|
||||
font-size: var(--text-body-sm);
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .tag {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.tag-accent {
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
background: var(--color-primary-muted);
|
||||
}
|
||||
|
||||
/* Removable tag */
|
||||
.tag-close {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--text-caption);
|
||||
line-height: 1;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.tag-close:hover {
|
||||
background: var(--color-error);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* ====== Labels ====== */
|
||||
.status-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
font-size: var(--text-body-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .status-label {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.status-label-success {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border-color: var(--color-success);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.status-label-warning {
|
||||
background: rgba(234, 179, 8, 0.1);
|
||||
border-color: var(--color-warning);
|
||||
color: var(--color-warning-dark);
|
||||
}
|
||||
|
||||
[data-theme="industrial"] .status-label-warning {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.status-label-error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-color: var(--color-error);
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.status-label-info {
|
||||
background: var(--color-primary-muted);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* ====== Count Badge ====== */
|
||||
.count-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 20px;
|
||||
height: 20px;
|
||||
padding: 0 6px;
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
font-size: var(--text-caption);
|
||||
font-weight: var(--font-weight-bold);
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.count-badge-sm {
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
font-size: 10px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.count-badge-danger {
|
||||
background: var(--color-error);
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="theme-switcher">
|
||||
<button class="active" onclick="setTheme('industrial')">🔧 Industrial</button>
|
||||
<button onclick="setTheme('modern')">⚡ Moderno</button>
|
||||
</div>
|
||||
|
||||
<h1>Badges & Tags</h1>
|
||||
<p class="subtitle">Status badges, tags removibles y labels para el sistema POS</p>
|
||||
|
||||
<!-- Status Badges -->
|
||||
<section>
|
||||
<h2>Status Badges</h2>
|
||||
<div class="label">Indicadores de estado de inventario y pedidos</div>
|
||||
|
||||
<div class="component-row">
|
||||
<span class="badge badge-success">En stock</span>
|
||||
<span class="badge badge-warning">Bajo stock</span>
|
||||
<span class="badge badge-error">Agotado</span>
|
||||
<span class="badge badge-info">Pedido</span>
|
||||
<span class="badge badge-neutral">Inactivo</span>
|
||||
</div>
|
||||
|
||||
<div class="label">Con indicador de punto</div>
|
||||
<div class="component-row">
|
||||
<span class="badge badge-dot badge-success">Disponible</span>
|
||||
<span class="badge badge-dot badge-warning">Poco stock</span>
|
||||
<span class="badge badge-dot badge-error">Sin existencia</span>
|
||||
<span class="badge badge-dot badge-info">En tránsito</span>
|
||||
<span class="badge badge-dot badge-neutral">Descontinuado</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Tags -->
|
||||
<section>
|
||||
<h2>Tags</h2>
|
||||
<div class="label">Tags de categoría y filtro</div>
|
||||
|
||||
<div class="component-row">
|
||||
<span class="tag">Frenos</span>
|
||||
<span class="tag">Motor</span>
|
||||
<span class="tag">Suspensión</span>
|
||||
<span class="tag">Eléctrico</span>
|
||||
<span class="tag tag-accent">OEM</span>
|
||||
</div>
|
||||
|
||||
<div class="label">Tags removibles (filtros aplicados)</div>
|
||||
<div class="component-row">
|
||||
<span class="tag">Toyota <button class="tag-close" title="Eliminar">✕</button></span>
|
||||
<span class="tag">2020 <button class="tag-close" title="Eliminar">✕</button></span>
|
||||
<span class="tag tag-accent">Corolla <button class="tag-close" title="Eliminar">✕</button></span>
|
||||
<span class="tag">Frenos <button class="tag-close" title="Eliminar">✕</button></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Labels -->
|
||||
<section>
|
||||
<h2>Status Labels</h2>
|
||||
<div class="label">Labels de estado con borde (más prominentes)</div>
|
||||
|
||||
<div class="component-row">
|
||||
<span class="status-label status-label-success">✓ Pagado</span>
|
||||
<span class="status-label status-label-warning">⏳ Pendiente</span>
|
||||
<span class="status-label status-label-error">✕ Cancelado</span>
|
||||
<span class="status-label status-label-info">↗ Enviado</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Count Badges -->
|
||||
<section>
|
||||
<h2>Count Badges</h2>
|
||||
<div class="label">Contadores numéricos para notificaciones y carrito</div>
|
||||
|
||||
<div class="component-row">
|
||||
<span class="count-badge">3</span>
|
||||
<span class="count-badge">12</span>
|
||||
<span class="count-badge">99+</span>
|
||||
<span class="count-badge count-badge-sm">5</span>
|
||||
<span class="count-badge count-badge-danger">!</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
function setTheme(theme) {
|
||||
document.documentElement.setAttribute('data-theme', theme);
|
||||
document.querySelectorAll('.theme-switcher button').forEach(btn => {
|
||||
btn.classList.toggle('active', btn.textContent.includes(theme === 'industrial' ? 'Industrial' : 'Moderno'));
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user