292 lines
8.3 KiB
TypeScript
292 lines
8.3 KiB
TypeScript
/**
|
|
* Module Color Configuration
|
|
* Single source of truth for module-specific colors throughout the UI
|
|
*
|
|
* DESIGN SYSTEM: All colors reference CSS variables from design-system.css
|
|
* This ensures consistency with the design system.
|
|
*
|
|
* Module Color Assignments (Updated Jan 3, 2026):
|
|
*
|
|
* PLANNER PIPELINE: Blue → Pink → Amber
|
|
* - Keywords: primary (blue #3B82F6)
|
|
* - Clusters: purple (pink #F63B82)
|
|
* - Ideas: warning (amber #F59E0B)
|
|
*
|
|
* WRITER PIPELINE: Navy → Blue → Green
|
|
* - Tasks: gray-base (navy #031D48)
|
|
* - Content: primary (blue #3B82F6)
|
|
* - Images: purple (pink #F63B82)
|
|
* - Review: warning (amber #F59E0B)
|
|
* - Approved/Published: success (green #10B981)
|
|
*
|
|
* These colors should be used consistently across:
|
|
* - Module icons
|
|
* - Progress bars
|
|
* - Metric cards
|
|
* - Badges
|
|
* - Chart segments
|
|
*/
|
|
|
|
/**
|
|
* CSS Variable names for colors - reference design-system.css
|
|
* Use getCSSColor() to get the computed value at runtime
|
|
*/
|
|
export const CSS_VAR_COLORS = {
|
|
primary: '--color-primary',
|
|
primaryDark: '--color-primary-dark',
|
|
success: '--color-success',
|
|
successDark: '--color-success-dark',
|
|
warning: '--color-warning',
|
|
warningDark: '--color-warning-dark',
|
|
danger: '--color-danger',
|
|
dangerDark: '--color-danger-dark',
|
|
purple: '--color-purple',
|
|
purpleDark: '--color-purple-dark',
|
|
grayBase: '--color-gray-base',
|
|
grayDark: '--color-gray-dark',
|
|
} as const;
|
|
|
|
/**
|
|
* Get computed CSS variable value at runtime
|
|
*/
|
|
export function getCSSColor(varName: string): string {
|
|
if (typeof window === 'undefined') return '';
|
|
return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
|
|
}
|
|
|
|
export const MODULE_COLORS = {
|
|
// Planner Module
|
|
keywords: {
|
|
bg: 'bg-brand-500',
|
|
bgLight: 'bg-brand-50',
|
|
text: 'text-brand-500',
|
|
textDark: 'text-brand-600',
|
|
border: 'border-brand-500',
|
|
gradient: 'from-brand-500 to-brand-600',
|
|
cssVar: CSS_VAR_COLORS.primary,
|
|
},
|
|
clusters: {
|
|
bg: 'bg-purple-500',
|
|
bgLight: 'bg-purple-50',
|
|
text: 'text-purple-500',
|
|
textDark: 'text-purple-600',
|
|
border: 'border-purple-500',
|
|
gradient: 'from-purple-500 to-purple-600',
|
|
cssVar: CSS_VAR_COLORS.purple,
|
|
},
|
|
ideas: {
|
|
bg: 'bg-warning-500',
|
|
bgLight: 'bg-warning-50',
|
|
text: 'text-warning-500',
|
|
textDark: 'text-warning-600',
|
|
border: 'border-warning-500',
|
|
gradient: 'from-warning-500 to-warning-600',
|
|
cssVar: CSS_VAR_COLORS.warning,
|
|
},
|
|
|
|
// Writer Module
|
|
tasks: {
|
|
bg: 'bg-gray-dark',
|
|
bgLight: 'bg-gray-100',
|
|
text: 'text-gray-dark',
|
|
textDark: 'text-gray-900',
|
|
border: 'border-gray-dark',
|
|
gradient: 'from-gray-700 to-gray-900',
|
|
cssVar: CSS_VAR_COLORS.grayBase,
|
|
},
|
|
content: {
|
|
bg: 'bg-brand-500',
|
|
bgLight: 'bg-brand-50',
|
|
text: 'text-brand-500',
|
|
textDark: 'text-brand-600',
|
|
border: 'border-brand-500',
|
|
gradient: 'from-brand-500 to-brand-600',
|
|
cssVar: CSS_VAR_COLORS.primary,
|
|
},
|
|
images: {
|
|
bg: 'bg-purple-500',
|
|
bgLight: 'bg-purple-50',
|
|
text: 'text-purple-500',
|
|
textDark: 'text-purple-600',
|
|
border: 'border-purple-500',
|
|
gradient: 'from-purple-500 to-purple-600',
|
|
cssVar: CSS_VAR_COLORS.purple,
|
|
},
|
|
review: {
|
|
bg: 'bg-warning-500',
|
|
bgLight: 'bg-warning-50',
|
|
text: 'text-warning-500',
|
|
textDark: 'text-warning-600',
|
|
border: 'border-warning-500',
|
|
gradient: 'from-warning-500 to-warning-600',
|
|
cssVar: CSS_VAR_COLORS.warning,
|
|
},
|
|
approved: {
|
|
bg: 'bg-success-500',
|
|
bgLight: 'bg-success-50',
|
|
text: 'text-success-500',
|
|
textDark: 'text-success-600',
|
|
border: 'border-success-500',
|
|
gradient: 'from-success-500 to-success-600',
|
|
cssVar: CSS_VAR_COLORS.success,
|
|
},
|
|
published: {
|
|
bg: 'bg-success-500',
|
|
bgLight: 'bg-success-50',
|
|
text: 'text-success-500',
|
|
textDark: 'text-success-600',
|
|
border: 'border-success-500',
|
|
gradient: 'from-success-500 to-success-600',
|
|
cssVar: CSS_VAR_COLORS.success,
|
|
},
|
|
|
|
// Automation & Dashboard
|
|
automation: {
|
|
bg: 'bg-brand-500',
|
|
bgLight: 'bg-brand-50',
|
|
text: 'text-brand-500',
|
|
textDark: 'text-brand-600',
|
|
border: 'border-brand-500',
|
|
gradient: 'from-brand-500 to-brand-600',
|
|
cssVar: CSS_VAR_COLORS.primary,
|
|
},
|
|
dashboard: {
|
|
bg: 'bg-brand-500',
|
|
bgLight: 'bg-brand-50',
|
|
text: 'text-brand-500',
|
|
textDark: 'text-brand-600',
|
|
border: 'border-brand-500',
|
|
gradient: 'from-brand-500 to-brand-600',
|
|
cssVar: CSS_VAR_COLORS.primary,
|
|
},
|
|
|
|
// Billing / Credits
|
|
billing: {
|
|
bg: 'bg-warning-500',
|
|
bgLight: 'bg-warning-50',
|
|
text: 'text-warning-500',
|
|
textDark: 'text-warning-600',
|
|
border: 'border-warning-500',
|
|
gradient: 'from-warning-500 to-warning-600',
|
|
cssVar: CSS_VAR_COLORS.warning,
|
|
},
|
|
credits: {
|
|
bg: 'bg-warning-500',
|
|
bgLight: 'bg-warning-50',
|
|
text: 'text-warning-500',
|
|
textDark: 'text-warning-600',
|
|
border: 'border-warning-500',
|
|
gradient: 'from-warning-500 to-warning-600',
|
|
cssVar: CSS_VAR_COLORS.warning,
|
|
},
|
|
|
|
// Status Colors
|
|
success: {
|
|
bg: 'bg-success-500',
|
|
bgLight: 'bg-success-50',
|
|
text: 'text-success-500',
|
|
textDark: 'text-success-600',
|
|
border: 'border-success-500',
|
|
gradient: 'from-success-500 to-success-600',
|
|
cssVar: CSS_VAR_COLORS.success,
|
|
},
|
|
error: {
|
|
bg: 'bg-error-500',
|
|
bgLight: 'bg-error-50',
|
|
text: 'text-error-500',
|
|
textDark: 'text-error-600',
|
|
border: 'border-error-500',
|
|
gradient: 'from-error-500 to-error-600',
|
|
cssVar: CSS_VAR_COLORS.danger,
|
|
},
|
|
warning: {
|
|
bg: 'bg-warning-500',
|
|
bgLight: 'bg-warning-50',
|
|
text: 'text-warning-500',
|
|
textDark: 'text-warning-600',
|
|
border: 'border-warning-500',
|
|
gradient: 'from-warning-500 to-warning-600',
|
|
cssVar: CSS_VAR_COLORS.warning,
|
|
},
|
|
} as const;
|
|
|
|
/**
|
|
* Pipeline colors for module stats widgets.
|
|
* Uses CSS variables for consistency with design system.
|
|
* Call getCSSColor() to get the computed value at runtime.
|
|
*
|
|
* Planner Pipeline: Blue → Pink → Amber
|
|
* Writer Pipeline: Navy → Blue → Green
|
|
*/
|
|
export const PIPELINE_COLORS = {
|
|
// Planner: Keywords(primary/blue) → Clusters(purple/pink) → Ideas(warning/amber)
|
|
planner: [CSS_VAR_COLORS.primary, CSS_VAR_COLORS.purple, CSS_VAR_COLORS.warning],
|
|
// Writer: Tasks(grayBase/navy) → Content(primary/blue) → Published(success/green)
|
|
writer: [CSS_VAR_COLORS.grayBase, CSS_VAR_COLORS.primary, CSS_VAR_COLORS.success],
|
|
} as const;
|
|
|
|
/**
|
|
* Get pipeline colors as computed CSS values for inline styles
|
|
*/
|
|
export function getPipelineColors(module: 'planner' | 'writer'): string[] {
|
|
return PIPELINE_COLORS[module].map(varName => getCSSColor(varName) || `var(${varName})`);
|
|
}
|
|
|
|
/**
|
|
* Workflow completion widget colors - CSS variable names
|
|
*
|
|
* Planner: Blue → Pink → Amber
|
|
* Writer: Navy → Blue → Green
|
|
*/
|
|
export const WORKFLOW_COLORS = {
|
|
planner: {
|
|
keywordsClustered: CSS_VAR_COLORS.primary, // Blue
|
|
clustersCreated: CSS_VAR_COLORS.purple, // Pink
|
|
ideasGenerated: CSS_VAR_COLORS.warning, // Amber
|
|
},
|
|
writer: {
|
|
tasksCreated: CSS_VAR_COLORS.grayBase, // Navy
|
|
contentPages: CSS_VAR_COLORS.primary, // Blue
|
|
imagesCreated: CSS_VAR_COLORS.purple, // Purple for images
|
|
pagesPublished: CSS_VAR_COLORS.success, // Green
|
|
},
|
|
} 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, // primary/blue
|
|
MODULE_COLORS.clusters, // purple/pink
|
|
MODULE_COLORS.tasks, // gray/navy
|
|
MODULE_COLORS.content, // primary/blue
|
|
MODULE_COLORS.ideas, // warning/amber
|
|
] 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];
|
|
}
|
|
|
|
/**
|
|
* Get the CSS variable value for a module color
|
|
*/
|
|
export function getModuleCSSColor(module: keyof typeof MODULE_COLORS): string {
|
|
const color = MODULE_COLORS[module];
|
|
return getCSSColor(color.cssVar) || `var(${color.cssVar})`;
|
|
}
|
|
|
|
export type ModuleColorKey = keyof typeof MODULE_COLORS;
|
|
export type ModuleColor = typeof MODULE_COLORS[ModuleColorKey];
|