Revamp chart colors: replace bland cyan/teal with vibrant blue/indigo/amber palette + fix tooltip indicators

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/globals.css

@@ -313,3 +313,27 @@ div[class*="recharts-tooltip"] {
   background-color: hsl(var(--card)) !important;
   border-color: hsl(var(--border)) !important;
 }
+
+/* Tremor/Recharts tooltip color indicator icons — fix rendering */
+.recharts-tooltip-wrapper svg.recharts-surface {
+  display: inline-block !important;
+  overflow: visible !important;
+}
+
+/* Tremor custom tooltip color dots */
+[class*="tremor"] [role="tooltip"] span[class*="bg-"],
+[class*="tremor"] [role="tooltip"] span[style*="background"] {
+  border-radius: 2px !important;
+  min-width: 10px !important;
+  min-height: 10px !important;
+  flex-shrink: 0 !important;
+}
+
+/* Recharts default tooltip icon fix — ensure SVG paths have correct fill */
+.recharts-default-tooltip .recharts-tooltip-item-list {
+  padding: 0 !important;
+}
+
+.recharts-default-tooltip .recharts-tooltip-item svg {
+  border: none !important;
+}

src/components/charts/chart-theme.ts

@@ -20,31 +20,31 @@ export const BRAND_COLORS = [
 
 // Tremor named colors for chart components
 // These are the official Tremor palette names that render correctly
-export const TREMOR_BRAND = 'cyan' as const
+export const TREMOR_BRAND = 'blue' as const
-export const TREMOR_ACCENT = 'teal' as const
+export const TREMOR_ACCENT = 'indigo' as const
 export const TREMOR_CHART_COLORS = [
-  'cyan',
-  'teal',
   'blue',
   'emerald',
   'amber',
   'violet',
   'rose',
   'indigo',
-  'lime',
+  'sky',
   'fuchsia',
+  'lime',
+  'orange',
 ] as const
 
 // Donut / status chart colors (mapped to Tremor names)
 export const TREMOR_STATUS_COLORS: Record<string, string> = {
-  SUBMITTED: 'slate',
+  SUBMITTED: 'sky',
-  ELIGIBLE: 'cyan',
+  ELIGIBLE: 'blue',
   ASSIGNED: 'violet',
   SEMIFINALIST: 'amber',
   FINALIST: 'emerald',
   REJECTED: 'rose',
   DRAFT: 'gray',
-  WITHDRAWN: 'neutral',
+  WITHDRAWN: 'slate',
 }
 
 // Project status colors — mapped to actual ProjectStatus enum values

src/components/charts/criteria-scores.tsx

@@ -43,7 +43,7 @@ export function CriteriaScoresChart({ data }: CriteriaScoresProps) {
           data={chartData}
           index="criterion"
           categories={['Avg Score']}
-          colors={['teal']}
+          colors={['indigo']}
           maxValue={10}
           layout="vertical"
           yAxisWidth={160}

src/components/charts/cross-round-comparison.tsx

@@ -56,7 +56,7 @@ export function CrossStageComparisonChart({
                 data={baseData}
                 index="name"
                 categories={['Projects']}
-                colors={['cyan']}
+                colors={['blue']}
                 showLegend={false}
                 yAxisWidth={40}
                 className="h-[200px]"
@@ -75,7 +75,7 @@ export function CrossStageComparisonChart({
                 data={baseData}
                 index="name"
                 categories={['Evaluations']}
-                colors={['teal']}
+                colors={['violet']}
                 showLegend={false}
                 yAxisWidth={40}
                 className="h-[200px]"

src/components/charts/diversity-metrics.tsx

@@ -136,7 +136,7 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
                 data={categoryData}
                 index="category"
                 categories={['Count']}
-                colors={['cyan']}
+                colors={['indigo']}
                 layout="horizontal"
                 yAxisWidth={120}
                 showLegend={false}
@@ -160,7 +160,7 @@ export function DiversityMetricsChart({ data }: DiversityMetricsProps) {
               data={oceanIssueData}
               index="issue"
               categories={['Count']}
-              colors={['teal']}
+              colors={['blue']}
               showLegend={false}
               yAxisWidth={40}
               className="h-[400px]"

src/components/charts/evaluation-timeline.tsx

@@ -43,7 +43,7 @@ export function EvaluationTimelineChart({ data }: EvaluationTimelineProps) {
           data={chartData}
           index="date"
           categories={['Cumulative', 'Daily']}
-          colors={['cyan', 'teal']}
+          colors={['indigo', 'amber']}
           curveType="monotone"
           showGradient={true}
           yAxisWidth={50}

src/components/charts/juror-consistency.tsx

@@ -76,7 +76,7 @@ export function JurorConsistencyChart({ data }: JurorConsistencyProps) {
             y="Std Deviation"
             category="category"
             size="size"
-            colors={['cyan', 'rose']}
+            colors={['blue', 'rose']}
             className="h-[400px]"
           />
           <p className="text-xs text-muted-foreground mt-2 text-center">

src/components/charts/juror-workload.tsx

@@ -48,7 +48,7 @@ export function JurorWorkloadChart({ data }: JurorWorkloadProps) {
           data={chartData}
           index="juror"
           categories={['Completed', 'Remaining']}
-          colors={['cyan', 'gray']}
+          colors={['blue', 'slate']}
           layout="horizontal"
           stack={true}
           yAxisWidth={160}

src/components/charts/project-rankings.tsx

@@ -51,7 +51,7 @@ export function ProjectRankingsChart({
           data={chartData}
           index="project"
           categories={['Score']}
-          colors={['teal']}
+          colors={['blue']}
           layout="horizontal"
           yAxisWidth={200}
           maxValue={10}

src/components/charts/score-distribution.tsx

@@ -36,7 +36,7 @@ export function ScoreDistributionChart({
           data={chartData}
           index="score"
           categories={['Count']}
-          colors={['cyan']}
+          colors={['blue']}
           yAxisWidth={40}
           showLegend={false}
           className="h-[300px]"