9232ebe294
Implemented complete design system and foundational infrastructure: **Design System Components:** - Button (all variants: primary, secondary, ghost, danger) - Input & Textarea (with validation and error states) - Card (elevated, outlined, flat variants) - Modal/Dialog (with focus trap and accessibility) - Avatar (with fallback initials) - Badge (all color variants) - Form helpers (FormField, Checkbox, Select) - Link component with Next.js integration - Navigation (Header, Footer with responsive design) **Layouts:** - MainLayout (with Header/Footer for public pages) - AuthLayout (minimal layout for auth flows) - DashboardLayout (with sidebar navigation) **Hooks & Utilities:** - useAuth() - authentication state management - useApi() - API calls with loading/error states - useLocalStorage() - persistent state management - apiClient - Axios instance with token refresh - authStore - Zustand store for auth state **Configuration:** - Tailwind config with design tokens - Dark mode support via CSS variables - Global styles with accessibility focus - WCAG 2.2 AA+ compliant focus indicators All components follow accessibility best practices with proper ARIA labels, keyboard navigation, and screen reader support. Job ID: MTAD-IMPL-2025-11-18-CL
110 lines
2.7 KiB
TypeScript
110 lines
2.7 KiB
TypeScript
import type { Config } from 'tailwindcss'
|
|
|
|
const config: Config = {
|
|
content: [
|
|
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: {
|
|
DEFAULT: '#3B82F6',
|
|
50: '#EFF6FF',
|
|
100: '#DBEAFE',
|
|
200: '#BFDBFE',
|
|
300: '#93C5FD',
|
|
400: '#60A5FA',
|
|
500: '#3B82F6',
|
|
600: '#2563EB',
|
|
700: '#1D4ED8',
|
|
800: '#1E40AF',
|
|
900: '#1E3A8A',
|
|
},
|
|
secondary: {
|
|
DEFAULT: '#8B5CF6',
|
|
50: '#F5F3FF',
|
|
100: '#EDE9FE',
|
|
200: '#DDD6FE',
|
|
300: '#C4B5FD',
|
|
400: '#A78BFA',
|
|
500: '#8B5CF6',
|
|
600: '#7C3AED',
|
|
700: '#6D28D9',
|
|
800: '#5B21B6',
|
|
900: '#4C1D95',
|
|
},
|
|
error: {
|
|
DEFAULT: '#EF4444',
|
|
50: '#FEF2F2',
|
|
100: '#FEE2E2',
|
|
200: '#FECACA',
|
|
300: '#FCA5A5',
|
|
400: '#F87171',
|
|
500: '#EF4444',
|
|
600: '#DC2626',
|
|
700: '#B91C1C',
|
|
800: '#991B1B',
|
|
900: '#7F1D1D',
|
|
},
|
|
success: {
|
|
DEFAULT: '#10B981',
|
|
50: '#ECFDF5',
|
|
100: '#D1FAE5',
|
|
200: '#A7F3D0',
|
|
300: '#6EE7B7',
|
|
400: '#34D399',
|
|
500: '#10B981',
|
|
600: '#059669',
|
|
700: '#047857',
|
|
800: '#065F46',
|
|
900: '#064E3B',
|
|
},
|
|
warning: {
|
|
DEFAULT: '#F59E0B',
|
|
50: '#FFFBEB',
|
|
100: '#FEF3C7',
|
|
200: '#FDE68A',
|
|
300: '#FCD34D',
|
|
400: '#FBBF24',
|
|
500: '#F59E0B',
|
|
600: '#D97706',
|
|
700: '#B45309',
|
|
800: '#92400E',
|
|
900: '#78350F',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
},
|
|
fontSize: {
|
|
xs: ['12px', { lineHeight: '1.5' }],
|
|
sm: ['14px', { lineHeight: '1.5' }],
|
|
base: ['16px', { lineHeight: '1.5' }],
|
|
lg: ['18px', { lineHeight: '1.5' }],
|
|
xl: ['20px', { lineHeight: '1.5' }],
|
|
'2xl': ['24px', { lineHeight: '1.25' }],
|
|
'3xl': ['32px', { lineHeight: '1.25' }],
|
|
'4xl': ['48px', { lineHeight: '1.25' }],
|
|
},
|
|
borderRadius: {
|
|
sm: '4px',
|
|
DEFAULT: '8px',
|
|
md: '8px',
|
|
lg: '12px',
|
|
full: '9999px',
|
|
},
|
|
boxShadow: {
|
|
sm: '0 1px 2px rgba(0, 0, 0, 0.05)',
|
|
DEFAULT: '0 4px 6px rgba(0, 0, 0, 0.1)',
|
|
md: '0 4px 6px rgba(0, 0, 0, 0.1)',
|
|
lg: '0 10px 15px rgba(0, 0, 0, 0.15)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|
|
|
|
export default config
|