josedario87
95d498694a
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 1m2s
- Quitar efecto scale on hover/active de todos los botones cata-button - Quitar efecto hover:scale del avatar en UserInfo - Rediseñar toasts con estilo outline/terminal 100% acoplado al sistema - Toasts usan variables CSS del sistema (--cata-bg, --cata-fg, --cata-primary) - Texto con fuente mono y text-shadow en modo oscuro - Efectos glow sutiles en modo oscuro según tipo de notificación - Bordes outline coherentes con diseño del sistema de catación
253 lines
9.4 KiB
TypeScript
253 lines
9.4 KiB
TypeScript
export default defineAppConfig({
|
|
ui: {
|
|
// ========================================================================
|
|
// COLORES PERSONALIZADOS - MODO CLARO Y OSCURO
|
|
// ========================================================================
|
|
colors: {
|
|
// Modo claro: Paleta de azules (celeste a oscuro)
|
|
primary: {
|
|
50: '#e0f2fe', // Azul muy claro
|
|
100: '#bae6fd', // Azul celeste claro
|
|
200: '#87CEEB', // Azul celeste (SkyBlue)
|
|
300: '#7dd3fc', // Azul celeste medio
|
|
400: '#38bdf8', // Azul medio
|
|
500: '#4682B4', // Azul acero (SteelBlue)
|
|
600: '#0284c7', // Azul más intenso
|
|
700: '#0369a1', // Azul oscuro
|
|
800: '#075985', // Azul muy oscuro
|
|
900: '#00008B', // Azul oscuro intenso (DarkBlue)
|
|
950: '#000066', // Azul casi negro
|
|
},
|
|
},
|
|
|
|
// ========================================================================
|
|
// CONFIGURACIÓN DE VARIABLES CSS PERSONALIZADAS
|
|
// ========================================================================
|
|
variables: {
|
|
light: {
|
|
background: '0 0% 100%', // Blanco puro
|
|
foreground: '0 0% 0%', // Negro puro
|
|
|
|
// Colores primarios para modo claro (azul)
|
|
primary: '203 92% 54%', // #4682B4 (SteelBlue)
|
|
'primary-foreground': '0 0% 0%', // Texto negro sobre azul
|
|
|
|
// Bordes y outlines en azul
|
|
border: '203 50% 70%', // Azul celeste para bordes
|
|
muted: '203 30% 40%', // Azul oscuro para texto secundario
|
|
'muted-foreground': '0 0% 20%', // Gris oscuro
|
|
|
|
// Superficies con outline
|
|
elevated: '0 0% 100%', // Blanco (sin relleno)
|
|
accented: '203 92% 94%', // Azul muy claro para hover
|
|
},
|
|
dark: {
|
|
background: '0 0% 0%', // Negro puro
|
|
foreground: '120 100% 50%', // Verde terminal (#00FF00)
|
|
|
|
// Colores primarios para modo oscuro (verde terminal)
|
|
primary: '120 100% 50%', // #00FF00 (Verde terminal)
|
|
'primary-foreground': '0 0% 0%', // Negro sobre verde
|
|
|
|
// Bordes y outlines en verde
|
|
border: '120 100% 40%', // Verde oscuro para bordes
|
|
muted: '120 80% 30%', // Verde apagado
|
|
'muted-foreground': '120 50% 60%', // Verde claro para texto secundario
|
|
|
|
// Superficies con outline
|
|
elevated: '0 0% 0%', // Negro (sin relleno)
|
|
accented: '120 100% 10%', // Verde muy oscuro para hover
|
|
},
|
|
},
|
|
|
|
// ========================================================================
|
|
// PERSONALIZACIÓN DE COMPONENTES
|
|
// ========================================================================
|
|
|
|
// Accordion: Solo outlines, sin rellenos
|
|
accordion: {
|
|
slots: {
|
|
root: 'w-full',
|
|
item: 'border border-primary/30 last:border-b dark:border-primary/50',
|
|
header: 'flex',
|
|
trigger: 'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 px-4 focus-visible:outline-primary min-w-0 dark:font-mono',
|
|
content: 'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
|
|
body: 'text-sm pb-3.5 px-4',
|
|
leadingIcon: 'shrink-0 size-5',
|
|
trailingIcon: 'shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200',
|
|
label: 'text-start break-words dark:font-mono',
|
|
},
|
|
},
|
|
|
|
// Tabs: Estilo minimalista con outlines
|
|
tabs: {
|
|
slots: {
|
|
root: 'flex items-center gap-2',
|
|
list: 'relative flex p-0 group border-b border-primary/30 dark:border-primary/50',
|
|
indicator: 'absolute transition-[translate,width] duration-200 border-b-2 border-primary dark:border-primary',
|
|
trigger: [
|
|
'group relative inline-flex items-center min-w-0 px-4 py-2',
|
|
'data-[state=inactive]:text-muted hover:data-[state=inactive]:not-disabled:text-default',
|
|
'font-medium dark:font-mono',
|
|
'transition-colors',
|
|
'border-b-2 border-transparent',
|
|
'data-[state=active]:text-primary data-[state=active]:border-primary',
|
|
],
|
|
leadingIcon: 'shrink-0',
|
|
label: 'truncate dark:font-mono',
|
|
content: 'focus:outline-none w-full py-4',
|
|
},
|
|
variants: {
|
|
orientation: {
|
|
horizontal: {
|
|
root: 'flex-col',
|
|
list: 'w-full',
|
|
indicator: 'left-0 w-(--reka-tabs-indicator-size) translate-x-(--reka-tabs-indicator-position) bottom-0',
|
|
},
|
|
vertical: {
|
|
list: 'flex-col border-r border-b-0',
|
|
indicator: 'top-0 h-(--reka-tabs-indicator-size) translate-y-(--reka-tabs-indicator-position) right-0 border-r-2 border-b-0',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
// Slider: Personalización para intensidades
|
|
slider: {
|
|
slots: {
|
|
root: 'relative flex items-center select-none touch-none',
|
|
track: 'relative bg-transparent border border-primary/30 dark:border-primary/50 overflow-hidden rounded-full grow',
|
|
range: 'absolute rounded-full bg-primary/20 dark:bg-primary/30',
|
|
thumb: 'rounded-full bg-background ring-2 ring-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:ring-primary',
|
|
},
|
|
},
|
|
|
|
// CheckboxGroup: Estilo outline
|
|
checkboxGroup: {
|
|
slots: {
|
|
root: 'relative',
|
|
fieldset: 'flex gap-x-2',
|
|
legend: 'mb-1 block font-medium text-default dark:font-mono',
|
|
item: 'border border-primary/30 dark:border-primary/50 px-3 py-2 rounded-md has-data-[state=checked]:border-primary dark:has-data-[state=checked]:border-primary',
|
|
},
|
|
},
|
|
|
|
// Button: Estilo outline
|
|
button: {
|
|
slots: {
|
|
base: 'border border-primary/50 dark:border-primary dark:font-mono',
|
|
},
|
|
variants: {
|
|
variant: {
|
|
outline: {
|
|
base: 'bg-transparent border-2 border-primary text-primary hover:bg-primary/10 dark:hover:bg-primary/20',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
|
|
// Card: Solo outlines
|
|
card: {
|
|
slots: {
|
|
root: 'bg-transparent border border-primary/30 dark:border-primary/50 rounded-lg',
|
|
header: 'border-b border-primary/30 dark:border-primary/50 px-4 py-3',
|
|
body: 'px-4 py-3',
|
|
},
|
|
},
|
|
|
|
// Input: Outlines con focus
|
|
input: {
|
|
slots: {
|
|
root: 'bg-transparent border border-primary/50 dark:border-primary focus:ring-2 focus:ring-primary dark:font-mono',
|
|
},
|
|
},
|
|
|
|
// Notifications (Toast): Estilo outline/terminal del sistema de catación
|
|
notification: {
|
|
slots: {
|
|
root: [
|
|
'bg-[var(--cata-bg)] border border-[var(--cata-primary)]',
|
|
'dark:bg-black/95 dark:border-[var(--cata-primary)]',
|
|
'rounded-md p-4',
|
|
],
|
|
wrapper: 'w-full flex gap-3',
|
|
title: [
|
|
'text-[var(--cata-fg)] font-semibold text-sm',
|
|
'dark:font-mono dark:font-light',
|
|
'dark:[text-shadow:0_0_2px_currentColor]',
|
|
],
|
|
description: [
|
|
'text-[var(--cata-fg)] opacity-75 text-xs',
|
|
'dark:font-mono dark:font-light',
|
|
'dark:[text-shadow:0_0_1px_currentColor]',
|
|
],
|
|
icon: [
|
|
'shrink-0 w-5 h-5',
|
|
'text-[var(--cata-fg)]',
|
|
'dark:[filter:drop-shadow(0_0_2px_currentColor)]',
|
|
],
|
|
avatar: 'shrink-0',
|
|
actions: 'flex gap-1.5 shrink-0 mt-2',
|
|
close: [
|
|
'shrink-0',
|
|
'text-[var(--cata-fg)]',
|
|
'hover:opacity-80',
|
|
],
|
|
progress: 'absolute inset-x-0 bottom-0 h-0.5 bg-[var(--cata-primary)] opacity-50',
|
|
},
|
|
variants: {
|
|
color: {
|
|
primary: {
|
|
root: [
|
|
'border-[var(--cata-primary)]/50',
|
|
'dark:border-[var(--cata-primary)]',
|
|
'dark:shadow-[0_0_12px_rgba(0,255,0,0.2)]',
|
|
],
|
|
icon: 'text-[var(--cata-primary)]',
|
|
},
|
|
success: {
|
|
root: [
|
|
'border-green-600/50 dark:border-green-500',
|
|
'dark:shadow-[0_0_12px_rgba(0,255,0,0.25)]',
|
|
],
|
|
icon: 'text-green-600 dark:text-green-500',
|
|
progress: 'bg-green-600 dark:bg-green-500',
|
|
},
|
|
error: {
|
|
root: [
|
|
'border-red-600/50 dark:border-red-500',
|
|
'dark:shadow-[0_0_12px_rgba(255,0,0,0.25)]',
|
|
],
|
|
icon: 'text-red-600 dark:text-red-500',
|
|
progress: 'bg-red-600 dark:bg-red-500',
|
|
},
|
|
warning: {
|
|
root: [
|
|
'border-yellow-600/50 dark:border-yellow-500',
|
|
'dark:shadow-[0_0_12px_rgba(255,255,0,0.25)]',
|
|
],
|
|
icon: 'text-yellow-600 dark:text-yellow-500',
|
|
progress: 'bg-yellow-600 dark:bg-yellow-500',
|
|
},
|
|
info: {
|
|
root: [
|
|
'border-blue-600/50 dark:border-blue-500',
|
|
'dark:shadow-[0_0_12px_rgba(70,130,180,0.25)]',
|
|
],
|
|
icon: 'text-blue-600 dark:text-blue-500',
|
|
progress: 'bg-blue-600 dark:bg-blue-500',
|
|
},
|
|
neutral: {
|
|
root: [
|
|
'border-gray-500/50 dark:border-gray-500',
|
|
'dark:shadow-[0_0_12px_rgba(128,128,128,0.2)]',
|
|
],
|
|
icon: 'text-gray-600 dark:text-gray-400',
|
|
progress: 'bg-gray-600 dark:bg-gray-500',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
})
|