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

@@ -92,7 +92,7 @@ export function DevServerControl({ projectName, status, url }: DevServerControlP
className="neo-btn text-sm py-2 px-3"
style={isCrashed ? {
backgroundColor: 'var(--color-neo-danger)',
color: '#ffffff',
color: 'var(--color-neo-text-on-bright)',
} : undefined}
title={isCrashed ? "Dev Server Crashed - Click to Restart" : "Start Dev Server"}
aria-label={isCrashed ? "Restart Dev Server (crashed)" : "Start Dev Server"}
@@ -112,7 +112,7 @@ export function DevServerControl({ projectName, status, url }: DevServerControlP
className="neo-btn text-sm py-2 px-3"
style={{
backgroundColor: 'var(--color-neo-progress)',
color: '#ffffff',
color: 'var(--color-neo-text-on-bright)',
}}
title="Stop Dev Server"
aria-label="Stop Dev Server"
@@ -134,7 +134,7 @@ export function DevServerControl({ projectName, status, url }: DevServerControlP
className="neo-btn text-sm py-2 px-3 gap-1"
style={{
backgroundColor: 'var(--color-neo-progress)',
color: '#ffffff',
color: 'var(--color-neo-text-on-bright)',
textDecoration: 'none',
}}
title={`Open ${url} in new tab`}