126 lines
4.0 KiB
TypeScript
126 lines
4.0 KiB
TypeScript
|
import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'
|
||
|
|
|
||
|
|
export default defineConfig({
|
||
|
|
// Scan Rust files in component library + frontend
|
||
|
|
content: {
|
||
|
|
filesystem: [
|
||
|
|
'crates/vapora-leptos-ui/src/**/*.rs',
|
||
|
|
'crates/vapora-frontend/src/**/*.rs',
|
||
|
|
],
|
||
|
|
},
|
||
|
|
|
||
|
|
// Presets
|
||
|
|
presets: [
|
||
|
|
presetUno(), // Core Tailwind-like utilities
|
||
|
|
presetAttributify(), // Attribute syntax support
|
||
|
|
presetIcons({
|
||
|
|
cdn: 'https://esm.sh/',
|
||
|
|
}),
|
||
|
|
],
|
||
|
|
|
||
|
|
// Safelist critical utilities (prevent purgation)
|
||
|
|
safelist: [
|
||
|
|
// Layout
|
||
|
|
'flex', 'grid', 'block', 'inline-block', 'inline-flex', 'hidden',
|
||
|
|
'items-center', 'items-start', 'items-end',
|
||
|
|
'justify-center', 'justify-between', 'justify-end',
|
||
|
|
'flex-col', 'flex-row', 'flex-wrap',
|
||
|
|
|
||
|
|
// Spacing
|
||
|
|
'gap-2', 'gap-3', 'gap-4', 'gap-6',
|
||
|
|
'p-2', 'p-4', 'p-6', 'px-2', 'px-2.5', 'px-3', 'px-4', 'px-6',
|
||
|
|
'py-0.5', 'py-1.5', 'py-2', 'py-3',
|
||
|
|
'm-2', 'm-4', 'mx-auto',
|
||
|
|
|
||
|
|
// Sizing
|
||
|
|
'w-4', 'w-8', 'w-12', 'w-full', 'h-4', 'h-8', 'h-12', 'h-full', 'min-h-screen',
|
||
|
|
|
||
|
|
// Rounded
|
||
|
|
'rounded', 'rounded-md', 'rounded-lg', 'rounded-xl', 'rounded-full',
|
||
|
|
|
||
|
|
// Colors (glassmorphism)
|
||
|
|
'bg-white/5', 'bg-white/8', 'bg-transparent',
|
||
|
|
'border', 'border-2', 'border-white/20', 'border-cyan-400/70',
|
||
|
|
'border-cyan-500/30', 'border-t-cyan-400',
|
||
|
|
'text-xs', 'text-sm', 'text-base', 'text-lg',
|
||
|
|
'text-white', 'text-cyan-400', 'text-purple-400', 'text-red-400',
|
||
|
|
'placeholder-gray-400',
|
||
|
|
'font-medium',
|
||
|
|
|
||
|
|
// Effects
|
||
|
|
'backdrop-blur-sm', 'backdrop-blur-md', 'backdrop-blur-lg', 'backdrop-blur-xl',
|
||
|
|
'shadow-lg', 'shadow-cyan-500/40', 'shadow-cyan-500/50', 'shadow-purple-500/40',
|
||
|
|
|
||
|
|
// Transitions
|
||
|
|
'transition-all', 'duration-200', 'duration-300', 'animate-spin',
|
||
|
|
|
||
|
|
// States
|
||
|
|
'opacity-50', 'cursor-pointer', 'cursor-not-allowed',
|
||
|
|
'focus:outline-none', 'focus:ring-2', 'focus:ring-cyan-500/50', 'focus:border-cyan-400/70',
|
||
|
|
'hover:bg-white/5', 'hover:bg-white/8', 'hover:border-cyan-400/70',
|
||
|
|
'disabled:opacity-50', 'disabled:cursor-not-allowed',
|
||
|
|
|
||
|
|
// Gradients
|
||
|
|
'bg-gradient-to-r',
|
||
|
|
'from-cyan-500/90', 'from-cyan-400/90',
|
||
|
|
'via-purple-600/90', 'via-purple-500/90',
|
||
|
|
'to-pink-500/90', 'to-pink-400/90',
|
||
|
|
'from-red-500/90', 'from-red-400/90',
|
||
|
|
'to-pink-600/90',
|
||
|
|
'hover:from-cyan-400/90', 'hover:via-purple-500/90', 'hover:to-pink-400/90',
|
||
|
|
'hover:from-red-400/90', 'hover:to-pink-500/90',
|
||
|
|
|
||
|
|
// Accessibility
|
||
|
|
'sr-only',
|
||
|
|
|
||
|
|
// Role attributes
|
||
|
|
'role',
|
||
|
|
'aria-label',
|
||
|
|
],
|
||
|
|
|
||
|
|
// Shortcuts (design system utilities)
|
||
|
|
shortcuts: {
|
||
|
|
// Buttons
|
||
|
|
'ds-btn': 'rounded-lg font-medium transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-cyan-500/50',
|
||
|
|
'ds-btn-sm': 'px-3 py-1.5 text-sm',
|
||
|
|
'ds-btn-md': 'px-4 py-2 text-base',
|
||
|
|
'ds-btn-lg': 'px-6 py-3 text-lg',
|
||
|
|
|
||
|
|
// Cards
|
||
|
|
'ds-card': 'bg-white/5 backdrop-blur-md border border-white/20 rounded-xl shadow-lg transition-all duration-300',
|
||
|
|
'ds-card-hover': 'hover:bg-white/8 hover:shadow-cyan-500/20',
|
||
|
|
|
||
|
|
// Glassmorphism glass effect
|
||
|
|
'glass-effect': 'bg-white/5 backdrop-blur-md border border-white/20',
|
||
|
|
|
||
|
|
// Gradient backgrounds
|
||
|
|
'gradient-primary': 'bg-gradient-to-r from-cyan-500/90 via-purple-600/90 to-pink-500/90',
|
||
|
|
'gradient-secondary': 'bg-gradient-to-r from-cyan-400/90 via-purple-500/90 to-pink-400/90',
|
||
|
|
},
|
||
|
|
|
||
|
|
// Theme (CSS variables)
|
||
|
|
theme: {
|
||
|
|
colors: {
|
||
|
|
'bg-primary': '#0a0118',
|
||
|
|
'bg-glass': 'rgba(255, 255, 255, 0.05)',
|
||
|
|
'accent-cyan': '#22d3ee',
|
||
|
|
'accent-purple': '#a855f7',
|
||
|
|
'accent-pink': '#ec4899',
|
||
|
|
},
|
||
|
|
animation: {
|
||
|
|
keyframes: {
|
||
|
|
fadeIn: '{from{opacity:0}to{opacity:1}}',
|
||
|
|
scaleIn: '{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}',
|
||
|
|
},
|
||
|
|
durations: {
|
||
|
|
fadeIn: '200ms',
|
||
|
|
scaleIn: '200ms',
|
||
|
|
},
|
||
|
|
timingFns: {
|
||
|
|
fadeIn: 'ease-out',
|
||
|
|
scaleIn: 'ease-out',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
})
|