feat: soften light theme with gentler gray tones
Reduced contrast in light theme for softer, more comfortable appearance: Background tones (darker, gentler): - waveform-bg: 97% (was 99% - less bright) - card: 96% (was 98% - softer) - background: 93% (was 96% - more muted) - muted: 90% (was 94% - darker) - secondary/accent: 88% (was 92% - more visible) - border: 85% (was 88% - stronger definition) - input: 88% (was 92% - better contrast) Foreground tones (lighter, softer): - foreground: 28% (was 20% - less harsh) - card-foreground: 28% (was 20% - softer) - secondary-foreground: 32% (was 25% - lighter) - muted-foreground: 48% (was 45% - easier to read) Color adjustments: - Reduced color intensity from 0.15 to 0.14 - Softer primary: oklch(58% 0.14 240) - All colors slightly desaturated for gentler feel Benefits: - Reduced contrast reduces eye strain - Softer, warmer appearance - More comfortable for extended use - Better balance between light and dark themes - Modern low-contrast aesthetic - Similar to Figma, Linear, or Notion's light modes Both themes now have beautifully balanced, low-contrast palettes that are easy on the eyes and professional. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -19,51 +19,51 @@
|
||||
/* CSS Variables for theming */
|
||||
@layer base {
|
||||
:root {
|
||||
/* Light mode colors using OKLCH - harmonized gray palette */
|
||||
--background: oklch(96% 0.005 285.8);
|
||||
--foreground: oklch(20% 0.015 285.8);
|
||||
/* Light mode colors using OKLCH - soft, gentle gray palette */
|
||||
--background: oklch(93% 0.005 285.8);
|
||||
--foreground: oklch(28% 0.012 285.8);
|
||||
|
||||
--card: oklch(98% 0.003 285.8);
|
||||
--card-foreground: oklch(20% 0.015 285.8);
|
||||
--card: oklch(96% 0.003 285.8);
|
||||
--card-foreground: oklch(28% 0.012 285.8);
|
||||
|
||||
--popover: oklch(98% 0.003 285.8);
|
||||
--popover-foreground: oklch(20% 0.015 285.8);
|
||||
--popover: oklch(96% 0.003 285.8);
|
||||
--popover-foreground: oklch(28% 0.012 285.8);
|
||||
|
||||
--primary: oklch(55% 0.15 240);
|
||||
--primary-foreground: oklch(98% 0.003 285.8);
|
||||
--primary: oklch(58% 0.14 240);
|
||||
--primary-foreground: oklch(96% 0.003 285.8);
|
||||
|
||||
--secondary: oklch(92% 0.005 285.8);
|
||||
--secondary-foreground: oklch(25% 0.015 285.8);
|
||||
--secondary: oklch(88% 0.005 285.8);
|
||||
--secondary-foreground: oklch(32% 0.012 285.8);
|
||||
|
||||
--muted: oklch(94% 0.005 285.8);
|
||||
--muted-foreground: oklch(45% 0.01 285.9);
|
||||
--muted: oklch(90% 0.005 285.8);
|
||||
--muted-foreground: oklch(48% 0.008 285.9);
|
||||
|
||||
--accent: oklch(92% 0.005 285.8);
|
||||
--accent-foreground: oklch(25% 0.015 285.8);
|
||||
--accent: oklch(88% 0.005 285.8);
|
||||
--accent-foreground: oklch(32% 0.012 285.8);
|
||||
|
||||
--destructive: oklch(55% 0.18 29.2);
|
||||
--destructive-foreground: oklch(98% 0.003 285.8);
|
||||
--destructive: oklch(58% 0.16 29.2);
|
||||
--destructive-foreground: oklch(96% 0.003 285.8);
|
||||
|
||||
--border: oklch(88% 0.005 285.8);
|
||||
--input: oklch(92% 0.005 285.8);
|
||||
--ring: oklch(55% 0.15 240);
|
||||
--border: oklch(85% 0.005 285.8);
|
||||
--input: oklch(88% 0.005 285.8);
|
||||
--ring: oklch(58% 0.14 240);
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
--success: oklch(55% 0.15 145);
|
||||
--success-foreground: oklch(98% 0.003 285.8);
|
||||
--success: oklch(56% 0.14 145);
|
||||
--success-foreground: oklch(96% 0.003 285.8);
|
||||
|
||||
--warning: oklch(60% 0.15 85);
|
||||
--warning-foreground: oklch(20% 0.015 285.8);
|
||||
--warning: oklch(62% 0.14 85);
|
||||
--warning-foreground: oklch(28% 0.012 285.8);
|
||||
|
||||
--info: oklch(60% 0.15 240);
|
||||
--info-foreground: oklch(98% 0.003 285.8);
|
||||
--info: oklch(62% 0.14 240);
|
||||
--info-foreground: oklch(96% 0.003 285.8);
|
||||
|
||||
/* Audio-specific colors */
|
||||
--waveform: oklch(55% 0.15 240);
|
||||
--waveform-progress: oklch(55% 0.15 145);
|
||||
--waveform-selection: oklch(60% 0.15 240);
|
||||
--waveform-bg: oklch(99% 0.002 285.8);
|
||||
--waveform: oklch(58% 0.14 240);
|
||||
--waveform-progress: oklch(56% 0.14 145);
|
||||
--waveform-selection: oklch(62% 0.14 240);
|
||||
--waveform-bg: oklch(97% 0.002 285.8);
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
||||
Reference in New Issue
Block a user