Bert Hausmans
b984e83e2b
Applied ui-ux-pro-max design system recommendations: - Tailwind theme: study purple primary + correct green accent - Inter + Plus Jakarta Sans typography - Glassmorphic surfaces with soft shadows and mesh background - Real 3D card flip with spring physics + answer feedback flash - Gradient stat cards, progress bar, animated done screen with score ring - Polished Layout, Dashboard, Admin, AdminLesson, CardTable, ImportDialog, PracticeSetup, Practice, PracticeDone - E2E smoke updated for new accessible names
81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
import type { Config } from 'tailwindcss';
|
|
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{ts,tsx}'],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
brand: {
|
|
50: '#FAF5FF',
|
|
100: '#F3E8FF',
|
|
200: '#E9D5FF',
|
|
300: '#D8B4FE',
|
|
400: '#A78BFA',
|
|
500: '#8B5CF6',
|
|
600: '#7C3AED',
|
|
700: '#6D28D9',
|
|
800: '#5B21B6',
|
|
900: '#4C1D95',
|
|
},
|
|
success: {
|
|
50: '#ECFDF5',
|
|
100: '#D1FAE5',
|
|
400: '#34D399',
|
|
500: '#10B981',
|
|
600: '#059669',
|
|
700: '#047857',
|
|
},
|
|
danger: {
|
|
50: '#FEF2F2',
|
|
400: '#F87171',
|
|
500: '#EF4444',
|
|
600: '#DC2626',
|
|
700: '#B91C1C',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
display: ['"Plus Jakarta Sans"', 'Inter', 'system-ui', 'sans-serif'],
|
|
},
|
|
boxShadow: {
|
|
soft: '0 6px 24px -8px rgba(124, 58, 237, 0.18), 0 2px 8px -2px rgba(15, 23, 42, 0.06)',
|
|
glow: '0 10px 40px -12px rgba(124, 58, 237, 0.4)',
|
|
'success-glow': '0 10px 40px -12px rgba(16, 185, 129, 0.45)',
|
|
'danger-glow': '0 10px 40px -12px rgba(239, 68, 68, 0.45)',
|
|
},
|
|
backgroundImage: {
|
|
'brand-gradient': 'linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%)',
|
|
'success-gradient': 'linear-gradient(135deg, #34D399 0%, #059669 100%)',
|
|
'danger-gradient': 'linear-gradient(135deg, #F87171 0%, #DC2626 100%)',
|
|
'mesh-light': 'radial-gradient(at 0% 0%, #F3E8FF 0px, transparent 50%), radial-gradient(at 100% 0%, #ECFDF5 0px, transparent 50%), radial-gradient(at 50% 100%, #FAF5FF 0px, transparent 60%)',
|
|
},
|
|
animation: {
|
|
'flip': 'flip 0.4s ease-out forwards',
|
|
'pulse-correct': 'pulseCorrect 0.6s ease-out',
|
|
'pulse-wrong': 'pulseWrong 0.6s ease-out',
|
|
'shimmer': 'shimmer 2s linear infinite',
|
|
},
|
|
keyframes: {
|
|
flip: {
|
|
'0%': { transform: 'rotateY(0)' },
|
|
'100%': { transform: 'rotateY(180deg)' },
|
|
},
|
|
pulseCorrect: {
|
|
'0%, 100%': { boxShadow: '0 0 0 0 rgba(16, 185, 129, 0)' },
|
|
'50%': { boxShadow: '0 0 0 16px rgba(16, 185, 129, 0.2)' },
|
|
},
|
|
pulseWrong: {
|
|
'0%, 100%': { boxShadow: '0 0 0 0 rgba(239, 68, 68, 0)' },
|
|
'50%': { boxShadow: '0 0 0 16px rgba(239, 68, 68, 0.2)' },
|
|
},
|
|
shimmer: {
|
|
'0%': { backgroundPosition: '-1000px 0' },
|
|
'100%': { backgroundPosition: '1000px 0' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
} satisfies Config;
|