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', }, }, // Toasts: Usar clases personalizadas definidas en main.css toast: { slots: { root: 'cata-toast-root', wrapper: 'cata-toast-wrapper', title: 'cata-toast-title', description: 'cata-toast-description', icon: 'cata-toast-icon', avatar: 'shrink-0', actions: 'cata-toast-actions', close: 'cata-toast-close', progress: 'cata-toast-progress', }, variants: { color: { primary: { root: 'cata-toast-primary', }, success: { root: 'cata-toast-success', }, error: { root: 'cata-toast-error', }, warning: { root: 'cata-toast-warning', }, info: { root: 'cata-toast-info', }, neutral: { root: 'cata-toast-neutral', }, }, }, }, }, })