master plan implemenattion

2025-12-30 08:51:31 +00:00
parent 96aaa4151a
commit 2af7bb725f
10 changed files with 900 additions and 26 deletions
--- a/frontend/src/config/colors.config.ts
+++ b/frontend/src/config/colors.config.ts
@@ -0,0 +1,162 @@
+/**
+ * Module Color Configuration
+ * Single source of truth for module-specific colors throughout the UI
+ * 
+ * These colors should be used consistently across:
+ * - Module icons
+ * - Progress bars
+ * - Metric cards
+ * - Badges
+ * - Chart segments
+ */
+
+export const MODULE_COLORS = {
+  // Planner Module
+  keywords: {
+    bg: 'bg-brand-500',
+    bgLight: 'bg-brand-50',
+    text: 'text-brand-600',
+    textDark: 'text-brand-700',
+    border: 'border-brand-500',
+    gradient: 'from-brand-500 to-brand-600',
+    hex: '#2C7AA1',
+  },
+  clusters: {
+    bg: 'bg-purple-500',
+    bgLight: 'bg-purple-50',
+    text: 'text-purple-600',
+    textDark: 'text-purple-700',
+    border: 'border-purple-500',
+    gradient: 'from-purple-500 to-purple-600',
+    hex: '#7c3aed',
+  },
+  ideas: {
+    bg: 'bg-purple-600',
+    bgLight: 'bg-purple-50',
+    text: 'text-purple-700',
+    textDark: 'text-purple-800',
+    border: 'border-purple-600',
+    gradient: 'from-purple-600 to-purple-700',
+    hex: '#6d28d9',
+  },
+
+  // Writer Module
+  tasks: {
+    bg: 'bg-success-600',
+    bgLight: 'bg-success-50',
+    text: 'text-success-600',
+    textDark: 'text-success-700',
+    border: 'border-success-600',
+    gradient: 'from-success-500 to-success-600',
+    hex: '#059669',
+  },
+  content: {
+    bg: 'bg-success-500',
+    bgLight: 'bg-success-50',
+    text: 'text-success-600',
+    textDark: 'text-success-700',
+    border: 'border-success-500',
+    gradient: 'from-success-500 to-success-600',
+    hex: '#10b981',
+  },
+  images: {
+    bg: 'bg-purple-500',
+    bgLight: 'bg-purple-50',
+    text: 'text-purple-600',
+    textDark: 'text-purple-700',
+    border: 'border-purple-500',
+    gradient: 'from-purple-500 to-purple-600',
+    hex: '#7c3aed',
+  },
+
+  // Automation
+  automation: {
+    bg: 'bg-brand-500',
+    bgLight: 'bg-brand-50',
+    text: 'text-brand-600',
+    textDark: 'text-brand-700',
+    border: 'border-brand-500',
+    gradient: 'from-brand-500 to-brand-600',
+    hex: '#2C7AA1',
+  },
+
+  // Billing / Credits
+  billing: {
+    bg: 'bg-warning-500',
+    bgLight: 'bg-warning-50',
+    text: 'text-warning-600',
+    textDark: 'text-warning-700',
+    border: 'border-warning-500',
+    gradient: 'from-warning-500 to-warning-600',
+    hex: '#D9A12C',
+  },
+  credits: {
+    bg: 'bg-warning-500',
+    bgLight: 'bg-warning-50',
+    text: 'text-warning-600',
+    textDark: 'text-warning-700',
+    border: 'border-warning-500',
+    gradient: 'from-warning-500 to-warning-600',
+    hex: '#D9A12C',
+  },
+
+  // Status Colors
+  success: {
+    bg: 'bg-success-500',
+    bgLight: 'bg-success-50',
+    text: 'text-success-600',
+    textDark: 'text-success-700',
+    border: 'border-success-500',
+    gradient: 'from-success-500 to-success-600',
+    hex: '#10b981',
+  },
+  error: {
+    bg: 'bg-error-500',
+    bgLight: 'bg-error-50',
+    text: 'text-error-600',
+    textDark: 'text-error-700',
+    border: 'border-error-500',
+    gradient: 'from-error-500 to-error-600',
+    hex: '#ef4444',
+  },
+  warning: {
+    bg: 'bg-warning-500',
+    bgLight: 'bg-warning-50',
+    text: 'text-warning-600',
+    textDark: 'text-warning-700',
+    border: 'border-warning-500',
+    gradient: 'from-warning-500 to-warning-600',
+    hex: '#D9A12C',
+  },
+} as const;
+
+/**
+ * Get balanced color sequence for multiple elements
+ * Ensures no more than 2 consecutive items share the same color family
+ */
+export const BALANCED_COLOR_SEQUENCE = [
+  MODULE_COLORS.keywords,    // blue
+  MODULE_COLORS.clusters,    // purple
+  MODULE_COLORS.content,     // green
+  MODULE_COLORS.billing,     // amber
+  MODULE_COLORS.ideas,       // purple (darker)
+  MODULE_COLORS.tasks,       // green (darker)
+] as const;
+
+/**
+ * Get module color by name
+ */
+export function getModuleColor(module: keyof typeof MODULE_COLORS) {
+  return MODULE_COLORS[module];
+}
+
+/**
+ * Get a color from the balanced sequence by index
+ * Cycles through to ensure visual balance
+ */
+export function getBalancedColor(index: number) {
+  return BALANCED_COLOR_SEQUENCE[index % BALANCED_COLOR_SEQUENCE.length];
+}
+
+export type ModuleColorKey = keyof typeof MODULE_COLORS;
+export type ModuleColor = typeof MODULE_COLORS[ModuleColorKey];