164 lines
7.5 KiB
JavaScript
164 lines
7.5 KiB
JavaScript
import defaultTheme from 'tailwindcss/defaultTheme';
|
|
import forms from '@tailwindcss/forms';
|
|
import typography from '@tailwindcss/typography';
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
|
|
'./storage/framework/views/*.php',
|
|
'./resources/views/**/*.blade.php',
|
|
'./resources/js/**/*.vue',
|
|
],
|
|
darkMode: 'class',
|
|
|
|
theme: {
|
|
extend: {
|
|
// ─── COULEURS ────────────────────────────────────────────────
|
|
colors: {
|
|
// Palette principale — CABM
|
|
primary: {
|
|
DEFAULT: '#1a4b8c', // Bleu Méditerranée
|
|
dark: '#122f5a', // Bleu nuit
|
|
light: '#3a7abf', // Bleu ciel (ex: sky)
|
|
},
|
|
accent: {
|
|
DEFAULT: '#c8102e', // Rouge Occitan
|
|
soft: 'rgba(200,16,46,0.10)',
|
|
},
|
|
highlight: {
|
|
DEFAULT: '#f5a800', // Or du Midi
|
|
soft: 'rgba(245,168,0,0.12)',
|
|
dark: '#3a2800', // Texte sur fond or
|
|
},
|
|
// Neutres chauds
|
|
sand: '#e8e0d0', // Sable garrigue (ex: sand)
|
|
neutral: '#f0ece4', // Fond neutre warm
|
|
surface: '#faf9f7', // Surface carte (ex: white)
|
|
// Texte
|
|
ink: {
|
|
DEFAULT: '#2d2d2d', // Anthracite
|
|
muted: 'rgba(45,45,45,0.50)',
|
|
faint: 'rgba(45,45,45,0.28)',
|
|
},
|
|
// Dark mode
|
|
dark: {
|
|
bg: '#0f1923',
|
|
surface: '#162130',
|
|
sidebar: '#0a111a',
|
|
border: 'rgba(255,255,255,0.06)',
|
|
},
|
|
// Sémantiques
|
|
success: '#10b981',
|
|
warning: '#f5a800',
|
|
danger: '#c8102e',
|
|
info: '#3a7abf',
|
|
|
|
// Compat rétro (garde les anciens noms fonctionnels)
|
|
anthracite: '#2d2d2d',
|
|
sky: '#3a7abf',
|
|
},
|
|
|
|
// ─── TYPOGRAPHIE ─────────────────────────────────────────────
|
|
fontFamily: {
|
|
sans: ['Nunito', 'Helvetica Neue', 'Arial', 'sans-serif'],
|
|
serif: ['Merriweather', 'Georgia', 'serif'],
|
|
subtitle: ['Nunito', 'Gill Sans', 'sans-serif'],
|
|
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
|
|
},
|
|
fontSize: {
|
|
'2xs': ['0.625rem', { lineHeight: '1rem', letterSpacing: '0.12em' }], // 10px — labels caps
|
|
'xs': ['0.75rem', { lineHeight: '1.25rem' }], // 12px
|
|
'sm': ['0.8125rem',{ lineHeight: '1.375rem' }], // 13px
|
|
'base':['0.875rem', { lineHeight: '1.5rem' }], // 14px
|
|
'md': ['1rem', { lineHeight: '1.625rem' }], // 16px
|
|
'lg': ['1.0625rem',{ lineHeight: '1.75rem' }], // 17px
|
|
'xl': ['1.125rem', { lineHeight: '1.75rem' }], // 18px
|
|
'2xl': ['1.25rem', { lineHeight: '1.875rem' }], // 20px
|
|
'3xl': ['1.5rem', { lineHeight: '2rem' }], // 24px
|
|
'4xl': ['2rem', { lineHeight: '2.25rem', letterSpacing: '-0.02em'}], // 32px
|
|
},
|
|
|
|
// ─── ESPACEMENT ──────────────────────────────────────────────
|
|
// Garde l'échelle Tailwind standard + quelques tokens nommés
|
|
spacing: {
|
|
'sidebar': '220px',
|
|
'sidebar-sm': '64px',
|
|
'header': '60px',
|
|
'navbar': '40px',
|
|
},
|
|
|
|
// ─── BORDER RADIUS ───────────────────────────────────────────
|
|
borderRadius: {
|
|
'none': '0',
|
|
'sm': '6px',
|
|
'DEFAULT':'8px',
|
|
'md': '10px',
|
|
'lg': '12px',
|
|
'xl': '14px',
|
|
'2xl': '16px',
|
|
'3xl': '20px',
|
|
'4xl': '28px',
|
|
'full': '9999px',
|
|
// Tokens sémantiques
|
|
'card': '16px',
|
|
'btn': '10px',
|
|
'badge': '20px',
|
|
'input': '10px',
|
|
},
|
|
|
|
// ─── OMBRES ──────────────────────────────────────────────────
|
|
boxShadow: {
|
|
'xs': '0 1px 3px rgba(0,0,0,0.05)',
|
|
'sm': '0 1px 4px rgba(0,0,0,0.07)',
|
|
'DEFAULT':'0 2px 8px rgba(0,0,0,0.09)',
|
|
'md': '0 4px 16px rgba(0,0,0,0.10)',
|
|
'lg': '0 8px 28px rgba(0,0,0,0.12)',
|
|
'xl': '0 16px 48px rgba(0,0,0,0.14)',
|
|
// Sémantiques couleurs
|
|
'primary': '0 4px 16px rgba(26,75,140,0.20)',
|
|
'gold': '0 4px 16px rgba(245,168,0,0.30)',
|
|
'accent': '0 4px 16px rgba(200,16,46,0.18)',
|
|
// Dark mode
|
|
'dark-sm': '0 2px 12px rgba(0,0,0,0.30)',
|
|
'dark-md': '0 4px 24px rgba(0,0,0,0.40)',
|
|
'none': 'none',
|
|
},
|
|
|
|
// ─── TRANSITIONS ─────────────────────────────────────────────
|
|
transitionDuration: {
|
|
'fast': '120ms',
|
|
'DEFAULT': '180ms',
|
|
'slow': '300ms',
|
|
},
|
|
transitionTimingFunction: {
|
|
'smooth': 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
'spring': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
|
|
},
|
|
|
|
// ─── ANIMATIONS ──────────────────────────────────────────────
|
|
keyframes: {
|
|
'fade-in': {
|
|
from: { opacity: '0', transform: 'translateY(6px)' },
|
|
to: { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
'slide-in': {
|
|
from: { opacity: '0', transform: 'translateX(-8px)' },
|
|
to: { opacity: '1', transform: 'translateX(0)' },
|
|
},
|
|
'pulse-gold': {
|
|
'0%, 100%': { boxShadow: '0 0 0 0 rgba(245,168,0,0.3)' },
|
|
'50%': { boxShadow: '0 0 0 6px rgba(245,168,0,0)' },
|
|
},
|
|
},
|
|
animation: {
|
|
'fade-in': 'fade-in 0.2s ease-out',
|
|
'slide-in': 'slide-in 0.2s ease-out',
|
|
'pulse-gold':'pulse-gold 2s ease-in-out infinite',
|
|
},
|
|
},
|
|
},
|
|
|
|
plugins: [forms, typography],
|
|
};
|