86 lines
3.0 KiB
TypeScript
86 lines
3.0 KiB
TypeScript
import {
|
|
defineConfig,
|
|
presetIcons,
|
|
presetUno,
|
|
presetWebFonts,
|
|
transformerDirectives,
|
|
transformerVariantGroup,
|
|
} from 'unocss'
|
|
|
|
export default defineConfig({
|
|
presets: [
|
|
presetUno({ dark: 'class' }),
|
|
presetIcons({
|
|
scale: 1.2,
|
|
collections: {
|
|
lucide: () => import('@iconify-json/lucide/icons.json').then(i => i.default),
|
|
ph: () => import('@iconify-json/ph/icons.json').then(i => i.default),
|
|
},
|
|
}),
|
|
presetWebFonts({
|
|
provider: 'bunny',
|
|
fonts: {
|
|
display: 'Syne:400,500,600,700,800',
|
|
sans: 'Space Grotesk:300,400,500,600,700',
|
|
mono: 'JetBrains Mono:400,500,700',
|
|
},
|
|
}),
|
|
],
|
|
transformers: [
|
|
transformerDirectives(),
|
|
transformerVariantGroup(),
|
|
],
|
|
theme: {
|
|
colors: {
|
|
primary: {
|
|
DEFAULT: 'hsl(12, 76%, 48%)',
|
|
50: 'hsl(12, 76%, 95%)',
|
|
100: 'hsl(12, 76%, 88%)',
|
|
200: 'hsl(12, 76%, 76%)',
|
|
300: 'hsl(12, 76%, 64%)',
|
|
400: 'hsl(12, 76%, 56%)',
|
|
500: 'hsl(12, 76%, 48%)',
|
|
600: 'hsl(12, 76%, 40%)',
|
|
700: 'hsl(12, 76%, 33%)',
|
|
800: 'hsl(12, 76%, 26%)',
|
|
900: 'hsl(12, 76%, 18%)',
|
|
},
|
|
accent: {
|
|
DEFAULT: 'hsl(36, 80%, 52%)',
|
|
50: 'hsl(36, 80%, 95%)',
|
|
100: 'hsl(36, 80%, 88%)',
|
|
200: 'hsl(36, 80%, 76%)',
|
|
300: 'hsl(36, 80%, 66%)',
|
|
400: 'hsl(36, 80%, 58%)',
|
|
500: 'hsl(36, 80%, 52%)',
|
|
600: 'hsl(36, 80%, 44%)',
|
|
700: 'hsl(36, 80%, 36%)',
|
|
800: 'hsl(36, 80%, 28%)',
|
|
900: 'hsl(36, 80%, 20%)',
|
|
},
|
|
surface: {
|
|
DEFAULT: 'hsl(20, 8%, 8%)',
|
|
50: 'hsl(20, 8%, 22%)',
|
|
100: 'hsl(20, 8%, 18%)',
|
|
200: 'hsl(20, 8%, 13%)',
|
|
300: 'hsl(20, 8%, 10%)',
|
|
400: 'hsl(20, 8%, 8%)',
|
|
500: 'hsl(20, 8%, 6%)',
|
|
600: 'hsl(20, 8%, 4%)',
|
|
bg: 'hsl(20, 8%, 3.5%)',
|
|
},
|
|
},
|
|
},
|
|
shortcuts: {
|
|
'btn-primary': 'inline-flex items-center justify-center px-6 py-3 rounded-lg bg-primary text-white font-display font-semibold tracking-wide transition-all duration-200 hover:bg-primary-600 hover:scale-105 active:scale-95',
|
|
'btn-accent': 'inline-flex items-center justify-center px-6 py-3 rounded-lg bg-accent text-surface-bg font-display font-semibold tracking-wide transition-all duration-200 hover:bg-accent-600 hover:scale-105 active:scale-95',
|
|
'btn-ghost': 'inline-flex items-center justify-center px-4 py-2 rounded-lg text-white/70 font-sans transition-all duration-200 hover:bg-white/10 hover:text-white',
|
|
'card-surface': 'rounded-xl bg-surface border border-white/8 p-6 transition-all duration-300 hover:border-primary/30 hover:shadow-lg hover:shadow-primary/5',
|
|
'text-gradient': 'bg-gradient-to-r from-primary-300 to-accent bg-clip-text text-transparent',
|
|
'text-muted': 'text-white/60',
|
|
'section-padding': 'px-4 py-16 md:px-8 lg:px-16 lg:py-24',
|
|
'container-content': 'mx-auto max-w-7xl w-full',
|
|
'heading-kicker': 'inline-block mb-2 font-mono text-sm tracking-widest uppercase',
|
|
},
|
|
})
|