120 lines
3.2 KiB
TypeScript
120 lines
3.2 KiB
TypeScript
export default defineAppConfig({
|
|
ui: {
|
|
// Primary color for the app - Teal
|
|
colors: {
|
|
primary: 'primary',
|
|
neutral: 'slate',
|
|
success: 'success',
|
|
warning: 'warning',
|
|
error: 'red'
|
|
},
|
|
|
|
// Button customizations with custom gradient variants
|
|
button: {
|
|
defaultVariants: {
|
|
size: 'lg'
|
|
},
|
|
variants: {
|
|
variant: {
|
|
gradient:
|
|
'bg-gradient-to-br from-primary-500 to-cyan-500 text-white font-semibold rounded-xl shadow-lg shadow-primary-500/25 hover:from-cyan-500 hover:to-accent-500 hover:shadow-xl hover:shadow-primary-500/30 transition-all',
|
|
gradientOutline:
|
|
'bg-white dark:bg-gray-900 border-2 border-transparent bg-clip-padding font-semibold rounded-xl text-primary-600 dark:text-primary-400 ring-2 ring-primary-500 hover:bg-primary-50 dark:hover:bg-primary-950 transition-all'
|
|
}
|
|
}
|
|
},
|
|
|
|
// Card customizations with enhanced hover states and glass variant
|
|
card: {
|
|
slots: {
|
|
root: 'rounded-2xl overflow-hidden transition-all duration-300'
|
|
},
|
|
variants: {
|
|
variant: {
|
|
glass: ''
|
|
}
|
|
},
|
|
compoundVariants: [
|
|
{
|
|
variant: 'glass',
|
|
class: {
|
|
root: 'bg-white/70 dark:bg-black/40 backdrop-blur-xl border border-white/30 dark:border-white/10'
|
|
}
|
|
}
|
|
]
|
|
},
|
|
|
|
// Page Hero customizations for landing page
|
|
pageHero: {
|
|
slots: {
|
|
root: 'relative isolate overflow-hidden',
|
|
title: 'font-heading text-5xl sm:text-6xl lg:text-7xl text-pretty tracking-tight font-bold text-highlighted',
|
|
description: 'text-lg sm:text-xl text-muted max-w-3xl'
|
|
}
|
|
},
|
|
|
|
// Page Section customizations
|
|
pageSection: {
|
|
slots: {
|
|
title: 'font-heading text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted',
|
|
description: 'text-base sm:text-lg text-muted'
|
|
}
|
|
},
|
|
|
|
// Page Feature customizations
|
|
pageFeature: {
|
|
slots: {
|
|
title: 'text-lg font-semibold text-highlighted',
|
|
description: 'text-base text-muted'
|
|
}
|
|
},
|
|
|
|
// Page Card customizations
|
|
pageCard: {
|
|
slots: {
|
|
root: 'rounded-2xl transition-all duration-300',
|
|
title: 'text-lg font-semibold text-highlighted',
|
|
description: 'text-base text-muted'
|
|
}
|
|
},
|
|
|
|
// Page CTA customizations
|
|
pageCTA: {
|
|
slots: {
|
|
title: 'font-heading text-3xl sm:text-4xl text-pretty tracking-tight font-bold',
|
|
description: 'text-base sm:text-lg'
|
|
}
|
|
},
|
|
|
|
// Header customizations - transparent with blur
|
|
header: {
|
|
slots: {
|
|
root: 'bg-white/80 dark:bg-gray-950/80 backdrop-blur-xl border-b border-gray-200/50 dark:border-gray-800/50',
|
|
title: 'font-heading text-xl font-bold'
|
|
}
|
|
},
|
|
|
|
// Footer customizations
|
|
footer: {
|
|
slots: {
|
|
root: 'border-t border-gray-200 dark:border-gray-800'
|
|
}
|
|
},
|
|
|
|
// Input customizations for newsletter form
|
|
input: {
|
|
defaultVariants: {
|
|
size: 'lg'
|
|
}
|
|
},
|
|
|
|
// Accordion customizations
|
|
accordion: {
|
|
slots: {
|
|
trigger: 'text-base font-medium',
|
|
content: 'text-base text-muted'
|
|
}
|
|
}
|
|
}
|
|
})
|