salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

many changes for modules widgets and colors and styling

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-12-31 23:52:43 +00:00
parent b61bd6e64d
commit 89b64cd737
34 changed files with 2450 additions and 1985 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
frontend/src/config/colors.config.ts
View File

@@ -2,6 +2,19 @@
* Module Color Configuration
* Single source of truth for module-specific colors throughout the UI
*
* DESIGN SYSTEM: All colors reference CSS variables from tokens.css
* This ensures consistency with the design system.
*
* Based on section 4.5 of MASTER-IMPLEMENTATION-PLAN.md:
* - Keywords: blue (primary)
* - Clusters: purple
* - Ideas: amber/warning (NOT purple!)
* - Tasks: blue (primary)
* - Content: green/success
* - Images: purple
* - Review: amber/warning
* - Approved/Published: green/success
*
* These colors should be used consistently across:
* - Module icons
* - Progress bars
@@ -10,123 +23,219 @@
* - Chart segments
*/
/**
* CSS Variable names for colors - reference tokens.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',
} 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-600',
textDark: 'text-brand-700',
text: 'text-brand-500',
textDark: 'text-brand-600',
border: 'border-brand-500',
gradient: 'from-brand-500 to-brand-600',
hex: '#2C7AA1',
cssVar: CSS_VAR_COLORS.primary,
},
clusters: {
bg: 'bg-purple-500',
bgLight: 'bg-purple-50',
text: 'text-purple-600',
textDark: 'text-purple-700',
text: 'text-purple-500',
textDark: 'text-purple-600',
border: 'border-purple-500',
gradient: 'from-purple-500 to-purple-600',
hex: '#7c3aed',
cssVar: CSS_VAR_COLORS.purple,
},
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',
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-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',
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,
},
content: {
bg: 'bg-success-500',
bgLight: 'bg-success-50',
text: 'text-success-600',
textDark: 'text-success-700',
text: 'text-success-500',
textDark: 'text-success-600',
border: 'border-success-500',
gradient: 'from-success-500 to-success-600',
hex: '#10b981',
cssVar: CSS_VAR_COLORS.success,
},
images: {
bg: 'bg-purple-500',
bgLight: 'bg-purple-50',
text: 'text-purple-600',
textDark: 'text-purple-700',
text: 'text-purple-500',
textDark: 'text-purple-600',
border: 'border-purple-500',
gradient: 'from-purple-500 to-purple-600',
hex: '#7c3aed',
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
// Automation & Dashboard
automation: {
bg: 'bg-brand-500',
bgLight: 'bg-brand-50',
text: 'text-brand-600',
textDark: 'text-brand-700',
text: 'text-brand-500',
textDark: 'text-brand-600',
border: 'border-brand-500',
gradient: 'from-brand-500 to-brand-600',
hex: '#2C7AA1',
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-600',
textDark: 'text-warning-700',
text: 'text-warning-500',
textDark: 'text-warning-600',
border: 'border-warning-500',
gradient: 'from-warning-500 to-warning-600',
hex: '#D9A12C',
cssVar: CSS_VAR_COLORS.warning,
},
credits: {
bg: 'bg-warning-500',
bgLight: 'bg-warning-50',
text: 'text-warning-600',
textDark: 'text-warning-700',
text: 'text-warning-500',
textDark: 'text-warning-600',
border: 'border-warning-500',
gradient: 'from-warning-500 to-warning-600',
hex: '#D9A12C',
cssVar: CSS_VAR_COLORS.warning,
},
// Status Colors
success: {
bg: 'bg-success-500',
bgLight: 'bg-success-50',
text: 'text-success-600',
textDark: 'text-success-700',
text: 'text-success-500',
textDark: 'text-success-600',
border: 'border-success-500',
gradient: 'from-success-500 to-success-600',
hex: '#10b981',
cssVar: CSS_VAR_COLORS.success,
},
error: {
bg: 'bg-error-500',
bgLight: 'bg-error-50',
text: 'text-error-600',
textDark: 'text-error-700',
text: 'text-error-500',
textDark: 'text-error-600',
border: 'border-error-500',
gradient: 'from-error-500 to-error-600',
hex: '#ef4444',
cssVar: CSS_VAR_COLORS.danger,
},
warning: {
bg: 'bg-warning-500',
bgLight: 'bg-warning-50',
text: 'text-warning-600',
textDark: 'text-warning-700',
text: 'text-warning-500',
textDark: 'text-warning-600',
border: 'border-warning-500',
gradient: 'from-warning-500 to-warning-600',
hex: '#D9A12C',
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.
*/
export const PIPELINE_COLORS = {
// Planner: Keywords(primary) → Clusters(purple) → Ideas(warning)
planner: [CSS_VAR_COLORS.primary, CSS_VAR_COLORS.purple, CSS_VAR_COLORS.warning],
// Writer: Tasks(primary) → Content(purple) → Published(success)
writer: [CSS_VAR_COLORS.primary, CSS_VAR_COLORS.purple, 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
*/
export const WORKFLOW_COLORS = {
planner: {
keywordsClustered: CSS_VAR_COLORS.primary,
clustersCreated: CSS_VAR_COLORS.purple,
ideasGenerated: CSS_VAR_COLORS.warning,
},
writer: {
contentPages: CSS_VAR_COLORS.primary,
imagesCreated: CSS_VAR_COLORS.purple,
pagesPublished: CSS_VAR_COLORS.success,
},
} as const;
@@ -135,12 +244,11 @@ export const MODULE_COLORS = {
* Ensures no more than 2 consecutive items share the same color family
*/
export const BALANCED_COLOR_SEQUENCE = [
MODULE_COLORS.keywords, // blue
MODULE_COLORS.keywords, // primary/blue
MODULE_COLORS.clusters, // purple
MODULE_COLORS.content, // green
MODULE_COLORS.billing, // amber
MODULE_COLORS.ideas, // purple (darker)
MODULE_COLORS.tasks, // green (darker)
MODULE_COLORS.content, // success/green
MODULE_COLORS.ideas, // warning/amber
MODULE_COLORS.images, // purple
] as const;
/**
@@ -158,5 +266,13 @@ 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];