Variable SECURITY_LEVEL_COLORS`Const`

SECURITY_LEVEL_COLORS: Record<SecurityLevel, SecurityLevelColorPair> = ...

Color mapping for security levels with background and text colors.

Colors are designed to provide intuitive visual feedback:

None (Red): Critical security gaps, immediate attention required
Low (Orange/Yellow): Basic security, needs improvement
Moderate (Yellow/Blue): Standard security, acceptable for most use cases
High (Green): Strong security, suitable for sensitive data
Very High (Blue/Purple): Maximum security, suitable for critical systems

Each level includes both background and text colors to support various display contexts (badges, cards, buttons, etc.).

Example

// Apply colors to a badge component
const level = 'High';
const colors = SECURITY_LEVEL_COLORS[level];

<Badge 
  style={{
    backgroundColor: colors.bg,
    color: colors.text
  }}
>
  {level}
</Badge>

Example

// Use in dynamic styling
const getLevelStyles = (level: SecurityLevel) => ({
  borderColor: SECURITY_LEVEL_COLORS[level].bg,
  color: SECURITY_LEVEL_COLORS[level].text
});