feat(ui): comprehensive design system improvements

This PR addresses 53 design issues identified in the UI codebase,
implementing a more consistent and polished neobrutalism design system.

Typography:
- Improved font stacks with proper fallbacks
- Added font smoothing for crisp text rendering

Color/Theme:
- Added neutral scale (50-900) for consistent grays
- Added semantic log level colors with dark mode variants
- Added category colors for feature cards
- Added GLM badge color variable
- Full dark mode support for all new variables

Design Tokens:
- Spacing scale (xs to 2xl)
- Z-index scale (dropdown to toast)
- Border radius tokens
- Inset shadow variants

Animations:
- New transition timing variables
- New easing curves (bounce, smooth, out-back)
- Slide-in animations (top/bottom/left)
- Bounce, shake, scale-pop animations
- Stagger delay utilities
- Enhanced YOLO fire effect with parallax layers

Components:
- Button size variants (sm/lg/icon) and loading state
- Input variants (error/disabled/textarea)
- Badge color and size variants
- Card elevation variants (elevated/flat/sunken)
- Progress bar shimmer animation
- Stronger modal backdrop with blur
- Neobrutalist tooltips
- Enhanced empty state with striped pattern

Component Fixes:
- Replaced hardcoded colors with CSS variables
- Fixed ProgressDashboard percentage alignment
- Improved ChatMessage role-specific styling
- Consistent category badge colors in FeatureModal
- Improved step input styling in forms

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
M Zubair
2026-01-14 22:14:29 +01:00
parent d1b8eb5f99
commit 501719f77a
26 changed files with 911 additions and 301 deletions

View File

@@ -1 +1 @@
{"root":["./src/app.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/addfeatureform.tsx","./src/components/agentcontrol.tsx","./src/components/agentthought.tsx","./src/components/assistantchat.tsx","./src/components/assistantfab.tsx","./src/components/assistantpanel.tsx","./src/components/chatmessage.tsx","./src/components/confirmdialog.tsx","./src/components/debuglogviewer.tsx","./src/components/devservercontrol.tsx","./src/components/editfeatureform.tsx","./src/components/expandprojectchat.tsx","./src/components/expandprojectmodal.tsx","./src/components/featurecard.tsx","./src/components/featuremodal.tsx","./src/components/folderbrowser.tsx","./src/components/kanbanboard.tsx","./src/components/kanbancolumn.tsx","./src/components/newprojectmodal.tsx","./src/components/progressdashboard.tsx","./src/components/projectselector.tsx","./src/components/questionoptions.tsx","./src/components/settingsmodal.tsx","./src/components/setupwizard.tsx","./src/components/speccreationchat.tsx","./src/components/terminal.tsx","./src/components/terminaltabs.tsx","./src/components/typingindicator.tsx","./src/hooks/useassistantchat.ts","./src/hooks/usecelebration.ts","./src/hooks/useexpandchat.ts","./src/hooks/usefeaturesound.ts","./src/hooks/useprojects.ts","./src/hooks/usespecchat.ts","./src/hooks/usewebsocket.ts","./src/lib/api.ts","./src/lib/types.ts"],"version":"5.6.3"}
{"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/AddFeatureForm.tsx","./src/components/AgentControl.tsx","./src/components/AgentThought.tsx","./src/components/AssistantChat.tsx","./src/components/AssistantFAB.tsx","./src/components/AssistantPanel.tsx","./src/components/ChatMessage.tsx","./src/components/ConfirmDialog.tsx","./src/components/DebugLogViewer.tsx","./src/components/DevServerControl.tsx","./src/components/EditFeatureForm.tsx","./src/components/ExpandProjectChat.tsx","./src/components/ExpandProjectModal.tsx","./src/components/FeatureCard.tsx","./src/components/FeatureModal.tsx","./src/components/FolderBrowser.tsx","./src/components/KanbanBoard.tsx","./src/components/KanbanColumn.tsx","./src/components/NewProjectModal.tsx","./src/components/ProgressDashboard.tsx","./src/components/ProjectSelector.tsx","./src/components/QuestionOptions.tsx","./src/components/SettingsModal.tsx","./src/components/SetupWizard.tsx","./src/components/SpecCreationChat.tsx","./src/components/Terminal.tsx","./src/components/TerminalTabs.tsx","./src/components/TypingIndicator.tsx","./src/hooks/useAssistantChat.ts","./src/hooks/useCelebration.ts","./src/hooks/useExpandChat.ts","./src/hooks/useFeatureSound.ts","./src/hooks/useProjects.ts","./src/hooks/useSpecChat.ts","./src/hooks/useWebSocket.ts","./src/lib/api.ts","./src/lib/types.ts"],"version":"5.6.3"}