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

Author: Pranav-IIITM

lib/svg/generator.test.ts

@@ -881,6 +881,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,10 +2,16 @@
 
 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 { sanitizeFont, sanitizeHexColor, sanitizeRadius, sanitizeGoogleFontUrl } from './sanitizer';
+import {
+  sanitizeFont,
+  sanitizeHexColor,
+  sanitizeRadius,
+  sanitizeGoogleFontUrl,
+  getLuminance,
+} from './sanitizer';
 
 import { SVG_WIDTH, SVG_HEIGHT, FONT_MAP } from './generatorConstants';
 
@@ -681,7 +687,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
@@ -1059,8 +1080,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/sanitizer.ts

@@ -114,3 +114,21 @@ export function sanitizeGoogleFontUrl(fontName: string | undefined | null): stri
   // Return the encoded font name suitable for Google Fonts API URL (spaces replaced with '+')
   return encodeURIComponent(cleaned).replace(/%20/g, '+');
 }
+
+/**
+ * Calculates the relative luminance of a hex color (without leading '#').
+ */
+export function getLuminance(hex: string): number {
+  let cleanHex = hex.trim().replace(/^#+/, '');
+  if (cleanHex.length === 3 || cleanHex.length === 4) {
+    cleanHex = `${cleanHex[0]}${cleanHex[0]}${cleanHex[1]}${cleanHex[1]}${cleanHex[2]}${cleanHex[2]}`;
+  }
+  const r = parseInt(cleanHex.slice(0, 2), 16) / 255 || 0;
+  const g = parseInt(cleanHex.slice(2, 4), 16) / 255 || 0;
+  const b = parseInt(cleanHex.slice(4, 6), 16) / 255 || 0;
+
+  const [R, G, B] = [r, g, b].map((c) =>
+    c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+  );
+  return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+}

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;
 }
 
 /**