josedario87
b4ba9eaa80
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 47s
Mapear --ui-color-success-* a --brand-success para que color="success" en componentes de Nuxt UI use los colores del tema personalizado. Antes: - text-success buscaba --ui-color-success-* (no definidas) - El color no se conectaba con --brand-success del tema Después: - Paleta completa de success (50-950) generada con color-mix - success-500 apunta directamente a --brand-success - Variaciones más claras/oscuras con mezclas de white/black - NavigationMenu con color="success" ahora usa el color del tema Flujo de colores: color="success" → text-success (Tailwind) → --color-success-500 → --ui-color-success-500 → --brand-success (tema personalizado) Esto completa la integración del sistema de temas con los colores semánticos de Nuxt UI v4.
169 lines
5.1 KiB
CSS
169 lines
5.1 KiB
CSS
@import "tailwindcss";
|
|
@import "@nuxt/ui";
|
|
|
|
@theme {
|
|
/* Definir color café personalizado con todos los shades
|
|
Optimizado para dark mode - los valores más altos son más claros */
|
|
--color-coffee-50: #1b1209;
|
|
--color-coffee-100: #2a1f14;
|
|
--color-coffee-200: #3a2a16;
|
|
--color-coffee-300: #5a3a18;
|
|
--color-coffee-400: #805020;
|
|
--color-coffee-500: #c08040;
|
|
--color-coffee-600: #d09050;
|
|
--color-coffee-700: #e0c080;
|
|
--color-coffee-800: #f0d0a0;
|
|
--color-coffee-900: #fde5c0;
|
|
--color-coffee-950: #fef9f0;
|
|
}
|
|
|
|
:root {
|
|
/* Colores base del tema */
|
|
--brand-bg: #14100b;
|
|
--brand-surface: #1f180f;
|
|
--brand-border: #3a2a16;
|
|
--brand-primary: #e0c080;
|
|
--brand-primary-strong: #c08040;
|
|
--brand-accent: #ffe0a0;
|
|
--brand-success: #00dc82; /* Nuxt green - éxito/confirmación */
|
|
--brand-text: #fef9f0;
|
|
--brand-text-muted: #d8c7a6;
|
|
|
|
/* Colores para tipos de café */
|
|
--coffee-uva: #a855f7; /* Purple - Café Uva */
|
|
--coffee-oreado: #f97316; /* Orange - Café Oreado */
|
|
--coffee-mojado: #06b6d4; /* Cyan - Café Mojado */
|
|
--coffee-verde: #22c55e; /* Green - Café Verde */
|
|
|
|
/* Colores para estados */
|
|
--status-pendiente: #f59e0b; /* Amber - Pendiente de pago */
|
|
--status-pagado: #10b981; /* Emerald - Pagado */
|
|
--status-anulado: #6b7280; /* Gray - Anulado */
|
|
|
|
/* Mapear variables UI neutral a nuestras variables dinámicas --brand-*
|
|
Esto permite que los componentes de Nuxt UI respondan a cambios de tema
|
|
IMPORTANTE: Nuxt UI usa neutral-50 para fondos oscuros y neutral-950 para texto claro en dark mode */
|
|
--ui-color-neutral-50: var(--brand-text);
|
|
--ui-color-neutral-100: var(--brand-text-muted);
|
|
--ui-color-neutral-200: var(--brand-primary);
|
|
--ui-color-neutral-300: var(--brand-primary);
|
|
--ui-color-neutral-400: var(--brand-primary-strong);
|
|
--ui-color-neutral-500: var(--brand-border);
|
|
--ui-color-neutral-600: var(--brand-border);
|
|
--ui-color-neutral-700: var(--brand-surface);
|
|
--ui-color-neutral-800: var(--brand-surface);
|
|
--ui-color-neutral-900: var(--brand-bg);
|
|
--ui-color-neutral-950: var(--brand-bg);
|
|
|
|
/* Mapear variables UI success a nuestro color de éxito del tema
|
|
Esto permite que color="success" en componentes use --brand-success */
|
|
--ui-color-success-50: color-mix(in srgb, var(--brand-success) 5%, white);
|
|
--ui-color-success-100: color-mix(in srgb, var(--brand-success) 10%, white);
|
|
--ui-color-success-200: color-mix(in srgb, var(--brand-success) 20%, white);
|
|
--ui-color-success-300: color-mix(in srgb, var(--brand-success) 40%, white);
|
|
--ui-color-success-400: color-mix(in srgb, var(--brand-success) 60%, white);
|
|
--ui-color-success-500: var(--brand-success);
|
|
--ui-color-success-600: color-mix(in srgb, var(--brand-success) 80%, black);
|
|
--ui-color-success-700: color-mix(in srgb, var(--brand-success) 60%, black);
|
|
--ui-color-success-800: color-mix(in srgb, var(--brand-success) 40%, black);
|
|
--ui-color-success-900: color-mix(in srgb, var(--brand-success) 20%, black);
|
|
--ui-color-success-950: color-mix(in srgb, var(--brand-success) 10%, black);
|
|
}
|
|
|
|
/* Critical: Prevent white flash on load */
|
|
html,
|
|
body {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
background-color: #1b1209 !important;
|
|
color: var(--brand-text);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.brand-shell {
|
|
background: radial-gradient(circle at 20% 20%, rgba(255, 224, 160, 0.08), transparent 55%),
|
|
radial-gradient(circle at 80% 10%, rgba(192, 128, 64, 0.08), transparent 45%),
|
|
var(--brand-bg);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.brand-card {
|
|
background: linear-gradient(145deg, rgba(20, 16, 11, 0.95), rgba(31, 24, 15, 0.85));
|
|
border: 1px solid rgba(224, 192, 128, 0.12);
|
|
box-shadow: 0 12px 40px rgba(12, 8, 4, 0.55);
|
|
}
|
|
|
|
.brand-divider {
|
|
border-top: 1px solid rgba(224, 192, 128, 0.16);
|
|
}
|
|
|
|
.brand-chip {
|
|
background: rgba(255, 224, 160, 0.08);
|
|
border: 1px solid rgba(255, 224, 160, 0.18);
|
|
color: var(--brand-accent);
|
|
}
|
|
|
|
.brand-table thead {
|
|
background: linear-gradient(90deg, rgba(32, 24, 15, 0.95), rgba(24, 18, 11, 0.95));
|
|
}
|
|
|
|
.brand-table tbody tr {
|
|
transition: background 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
.brand-table tbody tr:hover {
|
|
background: rgba(255, 224, 160, 0.06);
|
|
}
|
|
|
|
.brand-pill {
|
|
background: rgba(224, 192, 128, 0.14);
|
|
border: 1px solid rgba(224, 192, 128, 0.28);
|
|
color: var(--brand-primary);
|
|
}
|
|
|
|
.brand-badge {
|
|
color: var(--brand-bg);
|
|
background: var(--brand-primary);
|
|
}
|
|
|
|
.brand-section-title {
|
|
color: var(--brand-primary);
|
|
}
|
|
|
|
/* Custom Scrollbar Styles */
|
|
/* Firefox */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--brand-primary-strong) var(--brand-surface);
|
|
}
|
|
|
|
/* WebKit browsers (Chrome, Safari, Edge) */
|
|
*::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-track {
|
|
background: var(--brand-surface);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background: var(--brand-primary-strong);
|
|
border-radius: 4px;
|
|
border: 2px solid var(--brand-surface);
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: var(--brand-primary);
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:active {
|
|
background: var(--brand-accent);
|
|
}
|
|
|
|
/* Scrollbar corner (when both scrollbars are visible) */
|
|
*::-webkit-scrollbar-corner {
|
|
background: var(--brand-surface);
|
|
}
|