Invite d'Audit des Systèmes de Conception Forensique

{ "colors": { "primary": ["#0070f3", "rgb(37, 99, 235)", "var(--primary)"], "secondary": ["#6b7280", "rgb(107, 114, 128)", "var(--secondary)"], "accent": ["#f59e0b", "rgb(245, 158, 11)", "var(--accent)"], "neutral": ["#ffffff", "#f9fafb", "#f3f4f6", "#e5e7eb", "#d1d5db", "#9ca3af", "#4b5563", "#1f2937", "#111827"], "semantic": { "success": ["#10b981", "rgb(16, 185, 129)"], "warning": ["#f59e0b", "rgb(245, 158, 11)"], "error": ["#ef4444", "rgb(239, 68, 68)"], "info": ["#3b82f6", "rgb(59, 130, 246)"] }, "inconsistencies": [ "Three different grays used for borders: #e5e7eb, #d1d5db, #9ca3af", "Opacity variations: rgba(0,0,0,0.5) used for overlays, rgba(0,0,0,0.1) for shadows", "Dark mode mappings present in CSS variables but not consistently applied across components" ], "cssVariables": { "--primary": "#0070f3", "--secondary": "#6b7280", "--accent": "#f59e0b", "--background": "#ffffff", "--foreground": "#111827", "--muted": "#f3f4f6", "--muted-foreground": "#6b7280", "--border": "#e5e7eb", "--input": "#d1d5db", "--ring": "#0070f3", "--success": "#10b981", "--warning": "#f59e0b", "--error": "#ef4444", "--info": "#3b82f6" }, "fallbacks": { "--primary": "#0070f3", "--secondary": "#6b7280", "--accent": "#f59e0b", "--background": "#ffffff", "--foreground": "#111827", "--muted": "#f3f4f6", "--muted-foreground": "#6b7280", "--border": "#e5e7eb", "--input": "#d1d5db", "--ring": "#0070f3", "--success": "#10b981", "--warning": "#f59e0b", "--error": "#ef4444", "--info": "#3b82f6" } }, "typography": { "families": [ "Inter", "system-ui", "-apple-system", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif" ], "scale": [ "12px", "14px", "16px", "18px", "20px", "24px", "30px", "32px", "36px", "48px", "0.75rem", "0.875rem", "1rem", "1.125rem", "1.25rem", "1.5rem", "1.875rem", "2rem", "2.25rem", "3rem" ], "weights": { "Inter": [400, 500, 600, 700], "system-ui": [400, 500, 600, 700] }, "lineHeights": { "12px": "1.5", "14px": "1.5", "16px": "1.5", "18px": "1.5", "20px": "1.4", "24px": "1.3", "30px": "1.2", "32px": "1.2", "36px": "1.1", "48px": "1.1" }, "letterSpacing": { "12px": "0.02em", "14px": "0.01em", "16px": "0", "18px": "0", "20px": "-0.01em", "24px": "-0.02em", "30px": "-0.02em", "32px": "-0.02em", "36px": "-0.03em", "48px": "-0.03em" }, "styles": [ "heading-large = Inter 32px/700/1.2", "heading-medium = Inter 24px/600/1.3", "heading-small = Inter 20px/600/1.4", "body-large = Inter 18px/400/1.5", "body = Inter 16px/400/1.5", "body-small = Inter 14px/400/1.5", "caption = Inter 12px/500/1.5" ], "responsive": { "mobile": { "heading-large": "24px", "heading-medium": "20px", "heading-small": "18px", "body-large": "16px", "body": "14px", "body-small": "12px", "caption": "12px" }, "desktop": { "heading-large": "32px", "heading-medium": "24px", "heading-small": "20px", "body-large": "18px", "body": "16px", "body-small": "14px", "caption": "12px" } } }, "spacing": { "scale": [ "0px", "2px", "4px", "6px", "8px", "10px", "12px", "14px", "16px", "20px", "24px", "28px", "32px", "36px", "40px", "48px", "56px", "64px", "80px", "96px", "128px" ], "containers": { "maxWidth": "1280px", "maxWidthNarrow": "768px", "maxWidthWide": "1536px", "paddingX": "16px", "paddingY": "24px" }, "grid": { "columns": 12, "gutter": "24px", "breakpoints": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px" } }, "breakpoints": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px" }, "zIndex": { "0": "default", "10": "sticky header", "20": "dropdown", "30": "modal backdrop", "40": "modal", "50": "tooltip", "100": "toast/notification" }, "borderRadius": { "none": "0px", "sm": "4px", "md": "6px", "lg": "8px", "xl": "12px", "2xl": "16px", "full": "9999px" } }, "components": [ { "name": "Button", "path": "src/components/ui/Button.tsx", "props": { "variant": "primary | secondary | outline | ghost | destructive", "size": "sm | md | lg", "disabled": "boolean", "loading": "boolean", "fullWidth": "boolean", "asChild": "boolean" }, "variants": [ "primary - bg-primary text-white", "secondary - bg-secondary text-white", "outline - border border-border text-foreground", "ghost - bg-transparent text-foreground", "destructive - bg-error text-white" ], "spacingTokens": { "sm": "px-3 py-1.5 text-sm", "md": "px-4 py-2 text-base", "lg": "px-6 py-3 text-lg" }, "dependencies": ["Loader", "Slot"], "usageCount": 87 }, { "name": "Card", "path": "src/components/ui/Card.tsx", "props": { "variant": "default | outlined | elevated", "padding": "none | sm | md | lg", "hoverable": "boolean" }, "variants": [ "default - bg-background border border-border", "outlined - bg-transparent border border-border", "elevated - bg-background shadow-lg" ], "spacingTokens": { "sm": "p-3", "md": "p-4", "lg": "p-6" }, "dependencies": [], "usageCount": 42 }, { "name": "Input", "path": "src/components/ui/Input.tsx", "props": { "type": "text | email | password | number", "placeholder": "string", "error": "boolean", "disabled": "boolean", "size": "sm | md | lg" }, "variants": [ "default - border border-input bg-background", "error - border border-error", "disabled - opacity-50 cursor-not-allowed" ], "spacingTokens": { "sm": "px-2 py-1 text-sm", "md": "px-3 py-2 text-base", "lg": "px-4 py-3 text-lg" }, "dependencies": [], "usageCount": 56 }, { "name": "Modal", "path": "src/components/ui/Modal.tsx", "props": { "open": "boolean", "onClose": "() => void", "title": "string", "size": "sm | md | lg" }, "variants": [ "sm - max-w-md", "md - max-w-lg", "lg - max-w-2xl" ], "spacingTokens": { "padding": "p-6", "gap": "gap-4" }, "dependencies": ["Portal", "IconButton"], "usageCount": 12 }, { "name": "Badge", "path": "src/components/ui/Badge.tsx", "props": { "variant": "default | success | warning | error | info", "size": "sm | md" }, "variants": [ "default - bg-muted text-muted-foreground", "success - bg-success text-white", "warning - bg-warning text-white", "error - bg-error text-white", "info - bg-info text-white" ], "spacingTokens": { "sm": "px-2 py-0.5 text-xs", "md": "px-2.5 py-1 text-sm" }, "dependencies": [], "usageCount": 34 }, { "name": "Dropdown", "path": "src/components/ui/Dropdown.tsx", "props": { "items": "Array<{label: string, value: string}>", "onSelect": "(value: string) => void", "placeholder": "string", "disabled": "boolean" }, "variants": [], "spacingTokens": { "triggerPadding": "px-3 py-2", "menuPadding": "p-1", "itemPadding": "px-2 py-1.5" }, "dependencies": ["Button", "ChevronDownIcon"], "usageCount": 18 }, { "name": "Tabs", "path": "src/components/ui/Tabs.tsx", "props": { "tabs": "Array<{label: string, value: string}>", "activeTab": "string", "onChange": "(value: string) => void" }, "variants": [], "spacingTokens": { "tabPadding": "px-4 py-2", "gap": "gap-1" }, "dependencies": [], "usageCount": 9 }, { "name": "Tooltip", "path": "src/components/ui/Tooltip.tsx", "props": { "content": "string", "position": "top | bottom | left | right" }, "variants": [], "spacingTokens": { "padding": "px-2 py-1", "gap": "gap-2" }, "dependencies": ["Portal"], "usageCount": 15 } ], "motion": { "durations": ["150ms", "200ms", "300ms", "500ms"], "easings": ["ease", "ease-in", "ease-out", "ease-in-out", "cubic-bezier(0.4, 0, 0.2, 1)"], "animations": [ "fade-in - opacity 0 to 1", "fade-out - opacity 1 to 0", "slide-in-right - translateX(100%) to 0", "slide-in-left - translateX(-100%) to 0", "scale-in - scale(0.95) to 1", "spin - rotate 0 to 360deg" ], "hoverTransitions": { "button": "background-color 150ms ease, transform 150ms ease", "card": "box-shadow 200ms ease, transform 200ms ease", "link": "color 150ms ease" }, "focusTransitions": { "input": "border-color 150ms ease, box-shadow 150ms ease", "button": "box-shadow 150ms ease" }, "activeTransitions": { "button": "transform 100ms ease" }, "pageTransitions": "fade-in 300ms ease-in-out", "scrollAnimations": "none detected - no Framer Motion or GSAP imports found" }, "icons": { "system": "Lucide", "sizes": ["16px", "20px", "24px", "32px"], "count": 23 }, "inconsistencies": [ { "type": "duplicate_values", "description": "#1a1a1a used 47 times but not defined as a CSS variable", "severity": "high" }, { "type": "conflicting_patterns", "description": "Some buttons use padding-based sizing (px-4 py-2) while others use fixed height (h-10)", "severity": "medium" }, { "type": "missing_states", "description": "Several components lack hover/focus/disabled states: Badge, Tabs, Tooltip", "severity": "medium" }, { "type": "accessibility_gaps", "description": "Missing focus rings on Card and Dropdown components", "severity": "high" }, { "type": "accessibility_gaps", "description": "Insufficient color contrast: text-muted-foreground (#6b7280) on background (#f3f4f6) fails WCAG AA", "severity": "high" }, { "type": "duplicate_values", "description": "Border radius values 4px, 6px, 8px used directly in multiple components instead of using tokens", "severity": "low" }, { "type": "conflicting_patterns", "description": "Some components use rem-based spacing (p-4) while others use px-based (p-16px)", "severity": "medium" } ] }