fix(themes): replace hardcoded negative delta color with dynamic contrast-aware resolution (JhaSourav07#1691)

## Description
Fixes JhaSourav07#1684 


The negative monthly delta text color in `generateMonthlySVG` was
hardcoded to `#ff4444` for all static themes. On light backgrounds or
themes with red/pink undertones (e.g. `rose`, `sunset`), this color had
extremely low contrast, making the vs-last-month stat completely
unreadable.

**Changes made:**
- Added an optional `negative` property of type `HexColor` to the
`BadgeTheme` interface in `types/index.ts`
- Added custom high-contrast negative colors for all 19 static theme
presets in `lib/svg/themes.ts` (e.g. `#ff4b72` for `rose`, `#ff4d4d` for
`sunset`, `#cf222e` for `light`)
- Implemented a `getLuminance` relative luminance utility in
`lib/svg/sanitizer.ts` for dynamic background lightness detection
- Updated `generateMonthlySVG` in `lib/svg/generator.ts` to use
theme-specific negative colors or fall back dynamically based on
background luminance (`#cf222e` for light backgrounds, `#f85149` for
dark)
- Updated `generateAutoThemeMonthlySVG` to use `--cp-negative` CSS
variables for auto theme pairs
- Added test cases in `generator.test.ts` to verify correct delta color
resolution across themes
- Updated `themes.test.ts` to assert every theme defines a valid
`negative` hex property
- All 150 tests pass

## Pillar
- [x] 🎨 Pillar 1 — New Theme Design
- [ ] 📐 Pillar 2 — Geometric SVG Improvement
- [ ] 🕐 Pillar 3 — Timezone Logic Optimization
- [ ] 🛠️ Other (Bug fix, refactoring, docs)

## Checklist before requesting a review:
- [x] I have read the `CONTRIBUTING.md` file.
- [x] I have tested these changes locally
(`localhost:3000/api/streak?user=Pranav-IIITM&view=monthly&theme=light`).
- [x] I have run `npm run format` and `npm run lint` locally and
resolved all errors (CI will fail otherwise).
- [x] My commits follow the Conventional Commits format (e.g.,
`feat(themes): ...`, `fix(calculate): ...`).
- [ ] I have updated `README.md` if I added a new theme or URL
parameter.
- [x] I have started the repo.
- [x] I have made sure that i have only one commit to merge in this PR.
- [x] The SVG output matches the CommitPulse "premium quality" aesthetic
standard (no raw elements, smooth animations, correct fonts).
- [x] (Recommended) I joined the CommitPulse Discord community for
contributor discussions, mentorship, and faster PR support.

Author: JhaSourav07

lib/svg/generator.test.ts

@@ -901,6 +901,37 @@ describe('generateMonthlySVG', () => {
     expect(svg).toContain('-12 commits');
   });
 
+  it('resolves high-contrast negative delta colors based on theme and luminance', () => {
+    const negativeStats: MonthlyStats = {
+      currentMonthTotal: 18,
+      previousMonthTotal: 30,
+      deltaPercentage: -40,
+      deltaAbsolute: -12,
+      currentMonthName: 'June',
+    };
+
+    // 1. Default dark theme (bg: '0d1117') should resolve to high-contrast red '#f85149'
+    const svgDefault = generateMonthlySVG(negativeStats, {
+      user: 'octocat',
+      bg: '0d1117',
+    } as unknown as BadgeParams);
+    expect(svgDefault).toContain('fill: #f85149');
+
+    // 2. Custom light background (bg: 'ffffff') should resolve to light-mode red '#cf222e'
+    const svgLight = generateMonthlySVG(negativeStats, {
+      user: 'octocat',
+      bg: 'ffffff',
+    } as unknown as BadgeParams);
+    expect(svgLight).toContain('fill: #cf222e');
+
+    // 3. Rose theme background (bg: '1f0d14') should resolve to custom rose negative color '#ff4b72'
+    const svgRose = generateMonthlySVG(negativeStats, {
+      user: 'octocat',
+      bg: '1f0d14',
+    } as unknown as BadgeParams);
+    expect(svgRose).toContain('fill: #ff4b72');
+  });
+
   it('renders monthly stats correctly with percentage delta', () => {
     const svg = generateMonthlySVG(mockMonthlyStats, {
       user: 'octocat',

lib/svg/generator.ts

@@ -2,7 +2,7 @@
 
 import type { BadgeParams, ContributionCalendar, StreakStats, MonthlyStats } from '../../types';
 import { getLabels, type BadgeLabels } from '../i18n/badgeLabels';
-import { AUTO_THEME_DARK, AUTO_THEME_LIGHT } from './themes';
+import { AUTO_THEME_DARK, AUTO_THEME_LIGHT, themes } from './themes';
 import { TOWER_ANIMATION_CSS } from './animations';
 import { computeTowers, type TowerData } from './layout';
 import {
@@ -708,7 +708,22 @@ export function generateMonthlySVG(stats: MonthlyStats, params: BadgeParams): st
             ? `${stats.deltaPercentage}%`
             : `0%`;
   }
-  const deltaColor = stats.deltaAbsolute >= 0 ? accent : '#ff4444';
+  // Resolve negative color
+  let negativeColor = '#ff4444';
+  const cleanBg = sanitizeHexColor(params.bg, '0d1117');
+  const matchedTheme = Object.values(themes).find(
+    (t) => t.bg.toLowerCase() === cleanBg.toLowerCase()
+  );
+
+  if (matchedTheme && matchedTheme.negative) {
+    negativeColor = `#${matchedTheme.negative}`;
+  } else {
+    // Dynamic fallback based on background luminance
+    const luminance = getLuminance(cleanBg);
+    negativeColor = luminance > 0.5 ? '#cf222e' : '#f85149';
+  }
+
+  const deltaColor = stats.deltaAbsolute >= 0 ? accent : negativeColor;
 
   return `
 <svg
@@ -1086,8 +1101,8 @@ function generateAutoThemeMonthlySVG(stats: MonthlyStats, params: BadgeParams):
   <style>
   @import url('https://fonts.googleapis.com/css2?family=Fira+Code&amp;family=JetBrains+Mono&amp;family=Roboto&amp;family=Syncopate:wght@400;700&amp;family=Space+Grotesk:wght@400;500;600;700&amp;display=swap');
   ${googleFontsImport}
-  :root { --cp-bg: #${light.bg}; --cp-text: #${light.text}; --cp-accent: #${light.accent}; --cp-negative: #ff4444; }
-  @media (prefers-color-scheme: dark) { :root { --cp-bg: #${dark.bg}; --cp-text: #${dark.text}; --cp-accent: #${dark.accent}; --cp-negative: #ff6666; } }
+  :root { --cp-bg: #${light.bg}; --cp-text: #${light.text}; --cp-accent: #${light.accent}; --cp-negative: #${light.negative || 'cf222e'}; }
+  @media (prefers-color-scheme: dark) { :root { --cp-bg: #${dark.bg}; --cp-text: #${dark.text}; --cp-accent: #${dark.accent}; --cp-negative: #${dark.negative || 'f85149'}; } }
   .cp-bg-fill { fill: var(--cp-bg); } 
   .cp-text-fill { fill: var(--cp-text); color: var(--cp-text); } 
   .cp-accent-fill { fill: var(--cp-accent); color: var(--cp-accent); }

lib/svg/themes.test.ts

@@ -2,20 +2,22 @@ import { describe, expect, it } from 'vitest';
 import { themes, AUTO_THEME_LIGHT, AUTO_THEME_DARK } from './themes';
 
 describe('themes', () => {
-  it('validates every theme has bg, text, and accent as valid 6-character hex strings', () => {
+  it('validates every theme has bg, text, accent, and negative as valid 6-character hex strings', () => {
     const hexRegex = /^#[0-9a-f]{6}$/i;
 
     Object.entries(themes).forEach(([name, theme]) => {
-      // Validate every theme has bg, text, and accent
+      // Validate every theme has bg, text, accent, and negative
       expect(theme).toHaveProperty('bg');
       expect(theme).toHaveProperty('text');
       expect(theme).toHaveProperty('accent');
+      expect(theme).toHaveProperty('negative');
 
       // Assert they are valid 6-character hex strings using the requested regex.
       // We prepend '#' because the sanitizer strips it from the final object.
       expect(`#${theme.bg}`, `Theme "${name}" bg is invalid`).toMatch(hexRegex);
       expect(`#${theme.text}`, `Theme "${name}" text is invalid`).toMatch(hexRegex);
       expect(`#${theme.accent}`, `Theme "${name}" accent is invalid`).toMatch(hexRegex);
+      expect(`#${theme.negative}`, `Theme "${name}" negative is invalid`).toMatch(hexRegex);
     });
   });
 

lib/svg/themes.ts

@@ -2,34 +2,35 @@
 import { BadgeTheme } from '../../types';
 import { hexColor } from './sanitizer';
 
-function makeTheme(bg: string, text: string, accent: string): BadgeTheme {
+function makeTheme(bg: string, text: string, accent: string, negative?: string): BadgeTheme {
   return {
     bg: hexColor(bg),
     text: hexColor(text),
     accent: hexColor(accent),
+    negative: negative ? hexColor(negative) : undefined,
   };
 }
 
 export const themes: Record<string, BadgeTheme> = {
-  dark: makeTheme('0d1117', 'c9d1d9', '58a6ff'),
-  light: makeTheme('ffffff', '24292f', '0969da'),
-  neon: makeTheme('000000', '00ffcc', 'ff00ff'),
-  github: makeTheme('0d1117', 'ffffff', '39d353'),
-  dracula: makeTheme('282a36', 'f8f8f2', 'bd93f9'),
-  ocean: makeTheme('0a192f', 'ccd6f6', '64ffda'),
-  sunset: makeTheme('1a0a0a', 'ffd6c0', 'ff6b35'),
-  forest: makeTheme('0d1f0d', 'c8f0c8', '39d353'),
-  rose: makeTheme('1f0d14', 'f0c8d4', 'ff6b9d'),
-  nord: makeTheme('2e3440', 'd8dee9', '88c0d0'),
-  synthwave: makeTheme('0d0221', 'f8f8f2', 'ff2d78'),
-  gruvbox: makeTheme('282828', 'ebdbb2', 'fe8019'),
-  aurora_cyberpunk: makeTheme('090B13', 'EAF2FF', '9D5CFF'),
-  highcontrast: makeTheme('0a0a0a', 'ffffff', 'ff4500'),
-  catppuccin_latte: makeTheme('eff1f5', '4c4f69', '1e66f5'),
-  solarized_light: makeTheme('fdf6e3', '586e75', '268bd2'),
-  gruvbox_light: makeTheme('fbf1c7', '3c3836', 'd65d0e'),
-  nord_light: makeTheme('eceff4', '2e3440', '5e81ac'),
-  'cyber-pulse': makeTheme('000000', 'ffffff', '00ffee'),
+  dark: makeTheme('0d1117', 'c9d1d9', '58a6ff', 'f85149'),
+  light: makeTheme('ffffff', '24292f', '0969da', 'cf222e'),
+  neon: makeTheme('000000', '00ffcc', 'ff00ff', 'ff0055'),
+  github: makeTheme('0d1117', 'ffffff', '39d353', 'f85149'),
+  dracula: makeTheme('282a36', 'f8f8f2', 'bd93f9', 'ff5555'),
+  ocean: makeTheme('0a192f', 'ccd6f6', '64ffda', 'ff6b6b'),
+  sunset: makeTheme('1a0a0a', 'ffd6c0', 'ff6b35', 'ff4d4d'),
+  forest: makeTheme('0d1f0d', 'c8f0c8', '39d353', 'ff6b6b'),
+  rose: makeTheme('1f0d14', 'f0c8d4', 'ff6b9d', 'ff4b72'),
+  nord: makeTheme('2e3440', 'd8dee9', '88c0d0', 'bf616a'),
+  synthwave: makeTheme('0d0221', 'f8f8f2', 'ff2d78', 'ff3864'),
+  gruvbox: makeTheme('282828', 'ebdbb2', 'fe8019', 'fb4934'),
+  aurora_cyberpunk: makeTheme('090B13', 'EAF2FF', '9D5CFF', 'FF3366'),
+  highcontrast: makeTheme('0a0a0a', 'ffffff', 'ff4500', 'ff3333'),
+  catppuccin_latte: makeTheme('eff1f5', '4c4f69', '1e66f5', 'd20f39'),
+  solarized_light: makeTheme('fdf6e3', '586e75', '268bd2', 'dc322f'),
+  gruvbox_light: makeTheme('fbf1c7', '3c3836', 'd65d0e', '9d0006'),
+  nord_light: makeTheme('eceff4', '2e3440', '5e81ac', 'bf616a'),
+  'cyber-pulse': makeTheme('000000', 'ffffff', '00ffee', 'ff0055'),
 };
 
 // Auto-theme pairs: the SVG switches between these two palettes

types/index.ts

@@ -37,6 +37,9 @@ export interface BadgeTheme {
 
   /** Tower and glow accent color as a hex string WITHOUT the leading '#' (e.g. '58a6ff'). */
   accent: HexColor;
+
+  /** Negative/error state color as a hex string WITHOUT the leading '#' (e.g. 'ff4444'). Optional. */
+  negative?: HexColor;
 }
 
 /**