Commit Graph

5 Commits

Author SHA1 Message Date
0dfbdca00c feat: lighten dark theme for softer, gentler appearance
Significantly lightened all dark theme colors for reduced contrast:

Background tones (lighter, softer):
- waveform-bg: 16% (was 10% - too dark)
- background: 18% (was 12% - lifted significantly)
- card: 22% (was 15% - more visible)
- muted: 25% (was 18% - lighter)
- secondary: 28% (was 20% - softer)
- accent: 30% (was 22% - warmer)
- border: 32% (was 25% - more subtle)

Foreground tones (softer, less harsh):
- foreground: 78% (was 85% - reduced contrast)
- card-foreground: 78% (was 85% - softer)
- secondary-foreground: 75% (was 80% - gentler)
- muted-foreground: 58% (was 60% - slightly muted)

Color adjustments:
- Reduced color intensity (0.14 vs 0.15)
- Softer blue primary: oklch(68% 0.14 240)
- More muted accent colors throughout

Benefits:
- Much softer, gentler appearance
- Reduced contrast reduces eye strain
- More comfortable for long editing sessions
- Warmer, more inviting feel
- Modern low-contrast aesthetic
- Similar to VSCode's "Dark+" or Figma's dark mode

The theme now has a beautiful, soft low-contrast aesthetic
that's easy on the eyes while maintaining readability.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 08:30:24 +01:00
f74c8abbf9 feat: harmonize light theme with soft gray tones
Replaced harsh whites with a soft, professional light gray palette:

Light tones (lightest to darkest):
- waveform-bg: 99% - near-white for waveform area
- card: 98% - soft white for cards/panels
- background: 96% - main background (was 100% harsh white)
- muted: 94% - muted elements
- secondary/accent: 92% - secondary/accent elements
- input: 92% - input backgrounds
- border: 88% - borders and dividers

Dark tones (text, darker):
- foreground: 20% - main text (was 9.8% too dark)
- card-foreground: 20% - card text
- secondary-foreground: 25% - secondary text
- muted-foreground: 45% - muted text (lighter for better contrast)

Primary color:
- Changed to pleasant blue: oklch(55% 0.15 240)
- Matches dark theme primary color concept
- More modern than pure black

Benefits:
- Softer, more pleasant appearance
- Reduced eye strain in light mode
- Better harmony with dark mode
- Professional appearance like Figma, Linear, etc.
- Maintains excellent readability
- Consistent gray palette across both themes

Both light and dark themes now have harmonized gray palettes
that are easy on the eyes and professional-looking.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 08:28:23 +01:00
46ce75f3a5 feat: harmonize dark theme with softer gray tones
Replaced harsh white contrasts with a harmonized gray palette:

Background tones (darkest to lightest):
- waveform-bg: 10% - deepest black for waveform area
- background: 12% - main app background
- card: 15% - card/panel backgrounds
- muted: 18% - muted elements
- secondary: 20% - secondary elements
- accent: 22% - accent elements
- border: 25% - borders and dividers

Foreground tones (lighter, softer):
- foreground: 85% - main text (was 98% harsh white)
- card-foreground: 85% - card text
- secondary-foreground: 80% - secondary text
- muted-foreground: 60% - muted text

Primary color:
- Changed from white to blue: oklch(70% 0.15 240)
- More pleasant, less harsh than pure white
- Better visual hierarchy

Benefits:
- Reduced eye strain with softer contrasts
- More professional, cohesive appearance
- Better visual hierarchy
- Maintains readability while being easier on the eyes
- Harmonized gray scale throughout the interface

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 08:26:43 +01:00
ee48f9475f feat: add advanced audio effects and improve UI
Phase 6.5 Advanced Effects:
- Add Pitch Shifter with semitones and cents adjustment
- Add Time Stretch with pitch preservation using overlap-add
- Add Distortion with soft/hard/tube types and tone control
- Add Bitcrusher with bit depth and sample rate reduction
- Add AdvancedParameterDialog with real-time waveform visualization
- Add 4 professional presets per effect type

Improvements:
- Fix undefined parameter errors by adding nullish coalescing operators
- Add global custom scrollbar styling with color-mix transparency
- Add custom-scrollbar utility class for side panel
- Improve theme-aware scrollbar appearance in light/dark modes
- Fix parameter initialization when switching effect types

Integration:
- All advanced effects support undo/redo via EffectCommand
- Effects accessible via command palette and side panel
- Selection-based processing support
- Toast notifications for all effects

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 20:03:40 +01:00
591f726899 feat: initialize Next.js 16 project with Tailwind CSS 4 and Docker support
Phase 1 Implementation:
- Set up Next.js 16 with React 19, TypeScript 5, and Turbopack
- Configure Tailwind CSS 4 with OKLCH color system
- Implement dark/light theme support
- Create core UI components: Button, Card, Slider, Progress, Toast
- Add ThemeToggle component for theme switching
- Set up project directory structure for audio editor
- Create storage utilities for settings management
- Add Dockerfile with multi-stage build (Node + nginx)
- Configure nginx for static file serving with caching
- Add docker-compose.yml for easy deployment
- Configure static export mode for production

Tech Stack:
- Next.js 16 with Turbopack
- React 19
- TypeScript 5
- Tailwind CSS 4
- pnpm 9.0.0
- nginx 1.27 (for Docker deployment)

Build verified and working ✓

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-17 15:23:00 +01:00