Feat: Agregar variable success y completar inputs de personalización de tema
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 49s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 49s
Cambios realizados: - Agregada variable success (#00dc82 Nuxt green) para botones de confirmación y elementos de éxito - Agregados inputs de color para todas las variables de café (Uva, Oreado, Mojado, Verde) - Agregados inputs de color para todas las variables de estados (Pendiente, Pagado, Anulado) - Actualizada interfaz ThemeColors con nueva propiedad success - Actualizados todos los temas preestablecidos (café, azul, verde, carbón) con variable success - Actualizada validación de importación de temas con nueva propiedad - Agregado CSS --brand-success en main.css Los usuarios ahora pueden personalizar completamente todos los colores del sistema: - 9 colores base (incluye success) - 4 colores de tipos de café - 3 colores de estados de pago Total: 16 variables personalizables La variable success se aplica a: - Botones de confirmación - Página seleccionada en sidebar - Indicadores de éxito
This commit is contained in:
@@ -25,6 +25,7 @@
|
||||
--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;
|
||||
|
||||
|
||||
@@ -26,6 +26,7 @@ export interface ThemeColors {
|
||||
primary: string
|
||||
primaryStrong: string
|
||||
accent: string
|
||||
success: string // Verde de éxito/confirmación
|
||||
text: string
|
||||
textMuted: string
|
||||
|
||||
@@ -52,6 +53,7 @@ export const defaultTheme: ThemeColors = {
|
||||
primary: '#e0c080',
|
||||
primaryStrong: '#c08040',
|
||||
accent: '#ffe0a0',
|
||||
success: '#00dc82', // Nuxt green
|
||||
text: '#fef9f0',
|
||||
textMuted: '#d8c7a6',
|
||||
|
||||
@@ -95,6 +97,7 @@ export const useTheme = () => {
|
||||
root.style.setProperty('--brand-primary', colors.primary)
|
||||
root.style.setProperty('--brand-primary-strong', colors.primaryStrong)
|
||||
root.style.setProperty('--brand-accent', colors.accent)
|
||||
root.style.setProperty('--brand-success', colors.success)
|
||||
root.style.setProperty('--brand-text', colors.text)
|
||||
root.style.setProperty('--brand-text-muted', colors.textMuted)
|
||||
|
||||
@@ -203,7 +206,7 @@ export const useTheme = () => {
|
||||
// Validar que tenga todas las propiedades requeridas
|
||||
const requiredKeys: (keyof ThemeColors)[] = [
|
||||
'bg', 'surface', 'border', 'primary',
|
||||
'primaryStrong', 'accent', 'text', 'textMuted',
|
||||
'primaryStrong', 'accent', 'success', 'text', 'textMuted',
|
||||
'coffeeUva', 'coffeeOreado', 'coffeeMojado', 'coffeeVerde',
|
||||
'statusPendiente', 'statusPagado', 'statusAnulado'
|
||||
]
|
||||
|
||||
@@ -28,6 +28,7 @@ const presetThemes: Record<string, ThemeColors> = {
|
||||
primary: '#60a5fa',
|
||||
primaryStrong: '#3b82f6',
|
||||
accent: '#93c5fd',
|
||||
success: '#00dc82',
|
||||
text: '#f0f4f8',
|
||||
textMuted: '#cbd5e1',
|
||||
// Colores de café (mantener consistentes)
|
||||
@@ -47,6 +48,7 @@ const presetThemes: Record<string, ThemeColors> = {
|
||||
primary: '#86efac',
|
||||
primaryStrong: '#4ade80',
|
||||
accent: '#bbf7d0',
|
||||
success: '#00dc82',
|
||||
text: '#f0fdf4',
|
||||
textMuted: '#d1fae5',
|
||||
// Colores de café (mantener consistentes)
|
||||
@@ -66,6 +68,7 @@ const presetThemes: Record<string, ThemeColors> = {
|
||||
primary: '#a3a3a3',
|
||||
primaryStrong: '#737373',
|
||||
accent: '#d4d4d4',
|
||||
success: '#00dc82',
|
||||
text: '#fafafa',
|
||||
textMuted: '#d4d4d4',
|
||||
// Colores de café (mantener consistentes)
|
||||
@@ -379,6 +382,30 @@ watch(() => theme.value, (newTheme) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Éxito/Confirmación -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
|
||||
Color de Éxito/Confirmación
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
v-model="theme.success"
|
||||
type="color"
|
||||
class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
|
||||
/>
|
||||
<UInput
|
||||
v-model="theme.success"
|
||||
placeholder="#00dc82"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-xs text-[var(--brand-text-muted)] mt-1">
|
||||
Se usa en botones de confirmar, página seleccionada en sidebar, etc.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Texto y Texto Muted -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
@@ -418,6 +445,158 @@ watch(() => theme.value, (newTheme) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Separador -->
|
||||
<div class="pt-6 border-t border-[var(--brand-border)]">
|
||||
<h4 class="text-sm font-semibold text-[var(--brand-text)] mb-4">
|
||||
Colores de Tipos de Café
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<!-- Café Uva y Oreado -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
|
||||
Café Uva
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
v-model="theme.coffeeUva"
|
||||
type="color"
|
||||
class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
|
||||
/>
|
||||
<UInput
|
||||
v-model="theme.coffeeUva"
|
||||
placeholder="#a855f7"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
|
||||
Café Oreado
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
v-model="theme.coffeeOreado"
|
||||
type="color"
|
||||
class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
|
||||
/>
|
||||
<UInput
|
||||
v-model="theme.coffeeOreado"
|
||||
placeholder="#f97316"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Café Mojado y Verde -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
|
||||
Café Mojado
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
v-model="theme.coffeeMojado"
|
||||
type="color"
|
||||
class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
|
||||
/>
|
||||
<UInput
|
||||
v-model="theme.coffeeMojado"
|
||||
placeholder="#06b6d4"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
|
||||
Café Verde
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
v-model="theme.coffeeVerde"
|
||||
type="color"
|
||||
class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
|
||||
/>
|
||||
<UInput
|
||||
v-model="theme.coffeeVerde"
|
||||
placeholder="#22c55e"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Separador -->
|
||||
<div class="pt-6 border-t border-[var(--brand-border)]">
|
||||
<h4 class="text-sm font-semibold text-[var(--brand-text)] mb-4">
|
||||
Colores de Estados
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
<!-- Estado Pendiente y Pagado -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
|
||||
Estado Pendiente
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
v-model="theme.statusPendiente"
|
||||
type="color"
|
||||
class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
|
||||
/>
|
||||
<UInput
|
||||
v-model="theme.statusPendiente"
|
||||
placeholder="#f59e0b"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
|
||||
Estado Pagado
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
v-model="theme.statusPagado"
|
||||
type="color"
|
||||
class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
|
||||
/>
|
||||
<UInput
|
||||
v-model="theme.statusPagado"
|
||||
placeholder="#10b981"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Estado Anulado -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-[var(--brand-text)] mb-2">
|
||||
Estado Anulado
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<input
|
||||
v-model="theme.statusAnulado"
|
||||
type="color"
|
||||
class="h-10 w-20 rounded-lg border border-[var(--brand-border)] cursor-pointer"
|
||||
/>
|
||||
<UInput
|
||||
v-model="theme.statusAnulado"
|
||||
placeholder="#6b7280"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Acciones -->
|
||||
<div class="space-y-3 pt-4 border-t border-[var(--brand-border)]">
|
||||
<!-- Botones principales -->
|
||||
|
||||
Reference in New Issue
Block a user