- Navigation : btn-ghost, active-class, footer, nav mobile → CSS vars adaptatifs - Overrides light mode renforcés avec !important (scoped styles compatibles) - btn-primary garde text-white en light mode (fond coloré) - Logo : symbole § calligraphié SVG inline remplace lucide-book-open - Logo text : font-display weight 300 (ronde fine) + text-gradient - Logo SVG aussi exporté en /public/images/logo-section.svg - Header/footer : backgrounds et bordures via CSS vars Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
87 lines
3.2 KiB
TypeScript
87 lines
3.2 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: 'Outfit:400,500,600,700,800',
|
|
sans: 'Inter:300,400,500,600,700',
|
|
mono: 'JetBrains Mono:400,500,700',
|
|
calligraphy: 'Playfair Display:400,700',
|
|
},
|
|
}),
|
|
],
|
|
transformers: [
|
|
transformerDirectives(),
|
|
transformerVariantGroup(),
|
|
],
|
|
theme: {
|
|
colors: {
|
|
primary: {
|
|
DEFAULT: 'hsl(var(--color-primary))',
|
|
50: 'hsl(18, 80%, 95%)',
|
|
100: 'hsl(18, 80%, 88%)',
|
|
200: 'hsl(18, 80%, 76%)',
|
|
300: 'hsl(18, 80%, 64%)',
|
|
400: 'hsl(18, 80%, 56%)',
|
|
500: 'hsl(var(--color-primary))',
|
|
600: 'hsl(18, 80%, 38%)',
|
|
700: 'hsl(18, 80%, 30%)',
|
|
800: 'hsl(18, 80%, 24%)',
|
|
900: 'hsl(18, 80%, 16%)',
|
|
},
|
|
accent: {
|
|
DEFAULT: 'hsl(var(--color-accent))',
|
|
50: 'hsl(32, 85%, 95%)',
|
|
100: 'hsl(32, 85%, 88%)',
|
|
200: 'hsl(32, 85%, 76%)',
|
|
300: 'hsl(32, 85%, 66%)',
|
|
400: 'hsl(32, 85%, 58%)',
|
|
500: 'hsl(var(--color-accent))',
|
|
600: 'hsl(32, 85%, 42%)',
|
|
700: 'hsl(32, 85%, 34%)',
|
|
800: 'hsl(32, 85%, 26%)',
|
|
900: 'hsl(32, 85%, 18%)',
|
|
},
|
|
surface: {
|
|
DEFAULT: 'hsl(var(--color-surface))',
|
|
50: 'hsl(16, 12%, 22%)',
|
|
100: 'hsl(16, 12%, 18%)',
|
|
200: 'hsl(16, 12%, 13%)',
|
|
300: 'hsl(16, 12%, 10%)',
|
|
400: 'hsl(var(--color-surface))',
|
|
500: 'hsl(16, 12%, 6%)',
|
|
600: 'hsl(16, 12%, 4%)',
|
|
bg: 'hsl(var(--color-bg))',
|
|
},
|
|
},
|
|
},
|
|
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 border-none 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 border-none 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 border-none text-[hsl(var(--color-text)/0.7)] font-sans transition-all duration-200 hover:bg-[hsl(var(--color-text)/0.1)] hover:text-[hsl(var(--color-text))]',
|
|
'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-[hsl(var(--color-text)/0.6)]',
|
|
'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',
|
|
},
|
|
})
|