Initial commit - ACME demo version
This commit is contained in:
sujucu70
191
frontend/styles/colors.ts
Normal file
191
frontend/styles/colors.ts
Normal file
@@ -0,0 +1,191 @@
|
||||
/**
|
||||
* BeyondCX.ai Corporate Color Palette
|
||||
*
|
||||
* Colores corporativos de BeyondCX.ai para uso en backgrounds, cards, gradientes
|
||||
* Mantiene código de colores verde/amarillo/rojo para claridad en métricas
|
||||
*/
|
||||
|
||||
// ============================================
|
||||
// COLORES CORPORATIVOS BEYONDCX.AI
|
||||
// ============================================
|
||||
|
||||
export const brandColors = {
|
||||
// Colores corporativos principales
|
||||
accent1: '#E4E3E3', // Gris claro
|
||||
accent2: '#B1B1B0', // Gris medio
|
||||
accent3: '#6D84E3', // Azul corporativo
|
||||
accent4: '#3F3F3F', // Gris oscuro
|
||||
accent5: '#000000', // Negro
|
||||
|
||||
// Variantes del azul corporativo para gradientes
|
||||
primary: '#6D84E3',
|
||||
primaryLight: '#8A9EE8',
|
||||
primaryDark: '#5669D0',
|
||||
primaryPale: '#E8EBFA',
|
||||
|
||||
// Variantes de grises corporativos
|
||||
grayLight: '#E4E3E3',
|
||||
grayMedium: '#B1B1B0',
|
||||
grayDark: '#3F3F3F',
|
||||
grayDarkest: '#000000',
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// CÓDIGO DE COLORES PARA MÉTRICAS (Mantener)
|
||||
// ============================================
|
||||
|
||||
export const statusColors = {
|
||||
// Verde para positivo/excelente
|
||||
success: '#059669',
|
||||
successLight: '#D1FAE5',
|
||||
successDark: '#047857',
|
||||
|
||||
// Amarillo/Ámbar para warning/oportunidad
|
||||
warning: '#D97706',
|
||||
warningLight: '#FEF3C7',
|
||||
warningDark: '#B45309',
|
||||
|
||||
// Rojo para crítico/negativo
|
||||
critical: '#DC2626',
|
||||
criticalLight: '#FEE2E2',
|
||||
criticalDark: '#B91C1C',
|
||||
|
||||
// Azul para información
|
||||
info: '#3B82F6',
|
||||
infoLight: '#DBEAFE',
|
||||
infoDark: '#1D4ED8',
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// NEUTRALES (Usar grises corporativos)
|
||||
// ============================================
|
||||
|
||||
export const neutralColors = {
|
||||
darkest: brandColors.accent5, // #000000
|
||||
dark: brandColors.accent4, // #3F3F3F
|
||||
medium: brandColors.accent2, // #B1B1B0
|
||||
light: brandColors.accent1, // #E4E3E3
|
||||
lightest: '#F9FAFB',
|
||||
white: '#FFFFFF',
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// COLORES LEGACY (Para compatibilidad)
|
||||
// ============================================
|
||||
|
||||
export const colors = {
|
||||
// Primary Colors (Strategic Use) - Usar corporativo
|
||||
primary: {
|
||||
blue: brandColors.primary, // Azul corporativo
|
||||
green: statusColors.success, // Verde para positivo
|
||||
red: statusColors.critical, // Rojo para crítico
|
||||
amber: statusColors.warning, // Ámbar para warning
|
||||
},
|
||||
|
||||
// Neutral Colors (Context) - Usar grises corporativos
|
||||
neutral: {
|
||||
darkest: neutralColors.darkest,
|
||||
dark: neutralColors.dark,
|
||||
medium: neutralColors.medium,
|
||||
light: neutralColors.light,
|
||||
lightest: neutralColors.lightest,
|
||||
white: neutralColors.white,
|
||||
},
|
||||
|
||||
// Semantic Colors
|
||||
semantic: {
|
||||
success: statusColors.success,
|
||||
warning: statusColors.warning,
|
||||
error: statusColors.critical,
|
||||
info: brandColors.primary, // Usar azul corporativo
|
||||
},
|
||||
|
||||
// Chart Colors (Data Visualization) - Usar corporativo
|
||||
chart: {
|
||||
primary: brandColors.primary,
|
||||
secondary: statusColors.success,
|
||||
tertiary: statusColors.warning,
|
||||
quaternary: '#8B5CF6',
|
||||
quinary: '#EC4899',
|
||||
},
|
||||
|
||||
// Heatmap Scale (Performance) - Mantener código de colores
|
||||
heatmap: {
|
||||
critical: statusColors.critical, // <70 - Critical
|
||||
low: statusColors.warning, // 70-80 - Below average
|
||||
medium: '#FCD34D', // 80-85 - Average
|
||||
good: '#34D399', // 85-90 - Good
|
||||
excellent: statusColors.success, // 90-95 - Excellent
|
||||
bestInClass: statusColors.successDark, // 95+ - Best in class
|
||||
},
|
||||
|
||||
// Priority Matrix - Usar corporativo + código de colores
|
||||
matrix: {
|
||||
quickWins: statusColors.success, // High impact, high feasibility
|
||||
strategic: brandColors.primary, // High impact, low feasibility - Azul corporativo
|
||||
consider: statusColors.warning, // Low impact, high feasibility
|
||||
discard: neutralColors.medium, // Low impact, low feasibility - Gris corporativo
|
||||
},
|
||||
|
||||
// Gradients (For hero sections, highlights) - Usar corporativo
|
||||
gradients: {
|
||||
primary: `from-[${brandColors.primaryDark}] via-[${brandColors.primary}] to-[${brandColors.primaryLight}]`,
|
||||
success: 'from-green-500 to-emerald-600',
|
||||
warning: 'from-amber-500 to-orange-600',
|
||||
info: `from-[${brandColors.primary}] to-cyan-600`,
|
||||
},
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// GRADIENTES CORPORATIVOS
|
||||
// ============================================
|
||||
|
||||
export const gradients = {
|
||||
// Gradiente principal con azul corporativo
|
||||
primary: `linear-gradient(135deg, ${brandColors.primary} 0%, ${brandColors.primaryDark} 100%)`,
|
||||
|
||||
// Gradiente hero con azul corporativo
|
||||
hero: `linear-gradient(135deg, ${brandColors.primaryDark} 0%, ${brandColors.primary} 50%, ${brandColors.primaryLight} 100%)`,
|
||||
|
||||
// Gradiente sutil para backgrounds
|
||||
subtle: `linear-gradient(135deg, ${brandColors.primaryPale} 0%, ${neutralColors.lightest} 100%)`,
|
||||
|
||||
// Gradientes de estado (mantener para claridad)
|
||||
success: `linear-gradient(135deg, ${statusColors.success} 0%, ${statusColors.successDark} 100%)`,
|
||||
warning: `linear-gradient(135deg, ${statusColors.warning} 0%, ${statusColors.warningDark} 100%)`,
|
||||
critical: `linear-gradient(135deg, ${statusColors.critical} 0%, ${statusColors.criticalDark} 100%)`,
|
||||
};
|
||||
|
||||
// ============================================
|
||||
// HELPER FUNCTIONS
|
||||
// ============================================
|
||||
|
||||
// Helper function to get color by value (for heatmap)
|
||||
export const getHeatmapColor = (value: number): string => {
|
||||
if (value >= 95) return colors.heatmap.bestInClass;
|
||||
if (value >= 90) return colors.heatmap.excellent;
|
||||
if (value >= 85) return colors.heatmap.good;
|
||||
if (value >= 80) return colors.heatmap.medium;
|
||||
if (value >= 70) return colors.heatmap.low;
|
||||
return colors.heatmap.critical;
|
||||
};
|
||||
|
||||
// Helper function to get Tailwind class by value
|
||||
export const getHeatmapTailwindClass = (value: number): string => {
|
||||
if (value >= 95) return 'bg-emerald-600 text-white';
|
||||
if (value >= 90) return 'bg-emerald-500 text-white';
|
||||
if (value >= 85) return 'bg-green-400 text-green-900';
|
||||
if (value >= 80) return 'bg-yellow-300 text-yellow-900';
|
||||
if (value >= 70) return 'bg-amber-400 text-amber-900';
|
||||
return 'bg-red-500 text-white';
|
||||
};
|
||||
|
||||
// Helper function for priority matrix quadrant colors
|
||||
export const getMatrixQuadrantColor = (impact: number, feasibility: number): string => {
|
||||
if (impact >= 5 && feasibility >= 5) return colors.matrix.quickWins;
|
||||
if (impact >= 5 && feasibility < 5) return colors.matrix.strategic;
|
||||
if (impact < 5 && feasibility >= 5) return colors.matrix.consider;
|
||||
return colors.matrix.discard;
|
||||
};
|
||||
|
||||
export default colors;
|
||||
Reference in New Issue
Block a user