diff --git a/src/App.js b/src/App.js index cb26ca8..460d635 100644 --- a/src/App.js +++ b/src/App.js @@ -133,8 +133,8 @@ const AppContent = () => {
Simply Cyber Academy Logo
diff --git a/src/components/BadgeSystem.js b/src/components/BadgeSystem.js index 01e65a9..a7589fa 100644 --- a/src/components/BadgeSystem.js +++ b/src/components/BadgeSystem.js @@ -6,7 +6,7 @@ import React from 'react'; * * Badge Types and Colors: * - Framework: Blue (#dbeafe / #2563eb) - * - CSF Function: Matches function (DETECT=red, PROTECT=green, etc.) + * - CSF Function: Matches the NIST CSF 2.0 wheel (GOVERN=yellow, PROTECT=purple, DETECT=orange, etc.) * - Subcategory: Amber/Orange (#ffedd5 / #f59e0b) * - Artifact: Green (#dcfce7 / #16a34a) * - Finding: Red/Orange (#fee2e2 / #ef4444) @@ -16,14 +16,16 @@ import React from 'react'; // Color definitions for consistency export const BADGE_COLORS = { - // CSF Functions + // CSF Functions — light values track CSFBadge.js FUNCTION_COLORS (NIST CSF 2.0 wheel). + // darkBg/darkText are still the pre-wheel values; dark-palette work lands with the + // design tokens. Nothing renders this table today (no caller passes colorScheme="function"). function: { - GOVERN: { bg: '#E8DEF8', text: '#6B21A8', darkBg: '#581c87', darkText: '#e9d5ff' }, - IDENTIFY: { bg: '#DBEAFE', text: '#1E40AF', darkBg: '#1e3a8a', darkText: '#bfdbfe' }, - PROTECT: { bg: '#DCFCE7', text: '#166534', darkBg: '#14532d', darkText: '#bbf7d0' }, - DETECT: { bg: '#FEE2E2', text: '#991B1B', darkBg: '#7f1d1d', darkText: '#fecaca' }, - RESPOND: { bg: '#FFEDD5', text: '#C2410C', darkBg: '#7c2d12', darkText: '#fed7aa' }, - RECOVER: { bg: '#FEF3C7', text: '#B45309', darkBg: '#78350f', darkText: '#fde68a' }, + GOVERN: { bg: '#FBF0BF', text: '#6B5200', darkBg: '#581c87', darkText: '#e9d5ff' }, + IDENTIFY: { bg: '#D6EBF7', text: '#10527D', darkBg: '#1e3a8a', darkText: '#bfdbfe' }, + PROTECT: { bg: '#E5E0F5', text: '#463C8A', darkBg: '#14532d', darkText: '#bbf7d0' }, + DETECT: { bg: '#FCE6C6', text: '#9A5300', darkBg: '#7f1d1d', darkText: '#fecaca' }, + RESPOND: { bg: '#F8D9D7', text: '#9E2B27', darkBg: '#7c2d12', darkText: '#fed7aa' }, + RECOVER: { bg: '#D5F3E1', text: '#16713E', darkBg: '#78350f', darkText: '#fde68a' }, }, // Entity types framework: { bg: '#dbeafe', text: '#1e40af', darkBg: '#1e3a8a', darkText: '#bfdbfe' }, diff --git a/src/components/CSFBadge.js b/src/components/CSFBadge.js index 9fc6ffe..6530f59 100644 --- a/src/components/CSFBadge.js +++ b/src/components/CSFBadge.js @@ -2,17 +2,17 @@ import React from 'react'; /** * CSF Function Badge Component - * Displays CSF functions with appropriate color coding matching Confluence styling + * Displays CSF functions with appropriate color coding matching the NIST CSF 2.0 wheel */ -// Color mapping for CSF functions (matching Confluence UI) +// Color mapping for CSF functions (matching the official NIST CSF 2.0 wheel) const FUNCTION_COLORS = { - 'GOVERN': { bg: '#E8DEF8', text: '#6B21A8' }, // Purple - 'IDENTIFY': { bg: '#DBEAFE', text: '#1E40AF' }, // Blue - 'PROTECT': { bg: '#DCFCE7', text: '#166534' }, // Green - 'DETECT': { bg: '#FEE2E2', text: '#991B1B' }, // Red - 'RESPOND': { bg: '#FFEDD5', text: '#C2410C' }, // Orange - 'RECOVER': { bg: '#FEF3C7', text: '#B45309' } // Amber + 'GOVERN': { bg: '#FBF0BF', text: '#6B5200' }, // Yellow + 'IDENTIFY': { bg: '#D6EBF7', text: '#10527D' }, // Blue + 'PROTECT': { bg: '#E5E0F5', text: '#463C8A' }, // Purple + 'DETECT': { bg: '#FCE6C6', text: '#9A5300' }, // Orange + 'RESPOND': { bg: '#F8D9D7', text: '#9E2B27' }, // Red + 'RECOVER': { bg: '#D5F3E1', text: '#16713E' } // Green }; // Extract function code from full function name (e.g., "DETECT (DE)" -> "DETECT") diff --git a/src/index.css b/src/index.css index 46819cb..899f763 100644 --- a/src/index.css +++ b/src/index.css @@ -1228,13 +1228,13 @@ nav a:active { text-decoration: none !important; } } .dark .terminal-app-header { background-color: var(--bg-primary); } -/* Black circular disc behind the Simply Cyber white-on-transparent logo - so it doesn't wash out on the light cream/blue paper background. */ +/* White circular disc behind the Simply Cyber shield, which is dark-on-transparent + and would otherwise disappear against the dark navy header bar. */ .terminal-logo-disc { width: 56px; height: 56px; border-radius: 9999px; - background: #000000; + background: #ffffff; display: inline-flex; align-items: center; justify-content: center; @@ -1249,7 +1249,7 @@ nav a:active { text-decoration: none !important; } display: block; } .dark .terminal-logo-disc { - background: #000000; + background: #ffffff; border-color: var(--accent); } .terminal-statusbar-segment { diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js index 8b33191..f22816b 100644 --- a/src/pages/Dashboard.js +++ b/src/pages/Dashboard.js @@ -468,12 +468,16 @@ const Dashboard = () => { // Colors for each CSF function in the trend line chart const FUNCTION_LINE_COLORS = { - 'GOVERN (GV)': '#8b5cf6', - 'IDENTIFY (ID)': '#3b82f6', - 'PROTECT (PR)': '#10b981', - 'DETECT (DE)': '#f59e0b', - 'RESPOND (RS)': '#ef4444', - 'RECOVER (RC)': '#6366f1', + // NIST CSF 2.0 wheel hues, held at the lightness that clears WCAG 1.4.11 (3:1) + // against BOTH chart backgrounds — white and the dark-mode #1f2937 (see line 178). + // The audit report captures this chart onto white whatever theme is active, so a + // single set has to satisfy both. Keep any edit above 3:1 on each. + 'GOVERN (GV)': '#A07E0C', + 'IDENTIFY (ID)': '#2989C5', + 'PROTECT (PR)': '#8477CD', + 'DETECT (DE)': '#BB710A', + 'RESPOND (RS)': '#DA5753', + 'RECOVER (RC)': '#2C9455', }; // Calculate quarterly trend data: average actualScore per function per quarter diff --git a/src/utils/auditReportMarkdown.js b/src/utils/auditReportMarkdown.js index 3fd4f71..859ff8e 100644 --- a/src/utils/auditReportMarkdown.js +++ b/src/utils/auditReportMarkdown.js @@ -565,12 +565,13 @@ The organization's overall cybersecurity maturity is assessed at **${overallMatu if (trendChartUri) { maturitySection += `#### Score Trends by Quarter\n\nQuarterly score trends\n\n`; maturitySection += `
`; - maturitySection += `━━ Govern (GV)`; - maturitySection += `━━ Identify (ID)`; - maturitySection += `━━ Protect (PR)`; - maturitySection += `━━ Detect (DE)`; - maturitySection += `━━ Respond (RS)`; - maturitySection += `━━ Recover (RC)`; + // Must track FUNCTION_LINE_COLORS in Dashboard.js — the chart above is captured from it. + maturitySection += `━━ Govern (GV)`; + maturitySection += `━━ Identify (ID)`; + maturitySection += `━━ Protect (PR)`; + maturitySection += `━━ Detect (DE)`; + maturitySection += `━━ Respond (RS)`; + maturitySection += `━━ Recover (RC)`; maturitySection += `
\n\n`; } if (!barChartUri && !radarChartUri && !trendChartUri) {