From 2e9ada2d2c9b7fb8321135d4245a3ab5c8d21a17 Mon Sep 17 00:00:00 2001 From: CPAtoCybersecurity <150057814+CPAtoCybersecurity@users.noreply.github.com> Date: Thu, 23 Jul 2026 09:23:46 -0400 Subject: [PATCH 1/3] Match CSF function colors to the NIST CSF 2.0 wheel; use SC shield in header --- src/App.js | 4 ++-- src/components/CSFBadge.js | 14 +++++++------- src/index.css | 4 ++-- src/pages/Dashboard.js | 12 ++++++------ 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/App.js b/src/App.js index cb26ca85..460d6354 100644 --- a/src/App.js +++ b/src/App.js @@ -133,8 +133,8 @@ const AppContent = () => {
Simply Cyber Academy Logo
diff --git a/src/components/CSFBadge.js b/src/components/CSFBadge.js index 9fc6ffef..5dfe4100 100644 --- a/src/components/CSFBadge.js +++ b/src/components/CSFBadge.js @@ -5,14 +5,14 @@ import React from 'react'; * Displays CSF functions with appropriate color coding matching Confluence styling */ -// 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 46819cb8..88d82aa7 100644 --- a/src/index.css +++ b/src/index.css @@ -1234,7 +1234,7 @@ nav a:active { text-decoration: none !important; } 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 8b33191d..38f58fe4 100644 --- a/src/pages/Dashboard.js +++ b/src/pages/Dashboard.js @@ -468,12 +468,12 @@ 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', + 'GOVERN (GV)': '#E0B011', + 'IDENTIFY (ID)': '#3B9BD6', + 'PROTECT (PR)': '#8B7FD0', + 'DETECT (DE)': '#F39A1F', + 'RESPOND (RS)': '#D9534F', + 'RECOVER (RC)': '#47C97A', }; // Calculate quarterly trend data: average actualScore per function per quarter From 7761cbb46c543d2ddef1a8fa6063cf8dc80cecfd Mon Sep 17 00:00:00 2001 From: CPAtoCybersecurity <150057814+CPAtoCybersecurity@users.noreply.github.com> Date: Thu, 23 Jul 2026 09:36:59 -0400 Subject: [PATCH 2/3] Track the NIST wheel palette in the exported audit report legend The trend chart embedded in the audit report is captured live from the dashboard, so it already renders the new FUNCTION_LINE_COLORS. The legend beneath it was hand-written against the old palette, leaving the exported report showing a chart and a legend in different colors. --- src/utils/auditReportMarkdown.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/utils/auditReportMarkdown.js b/src/utils/auditReportMarkdown.js index 3fd4f714..330fdc41 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) { From 3ba931dcb9415df34bda258487aba4689173aeb7 Mon Sep 17 00:00:00 2001 From: CPAtoCybersecurity <150057814+CPAtoCybersecurity@users.noreply.github.com> Date: Thu, 23 Jul 2026 09:46:52 -0400 Subject: [PATCH 3/3] Hold the trend-line hues above WCAG 1.4.11 on both chart backgrounds The wheel hues are tuned for a filled wheel, not 2px strokes: on white, GOVERN sat at 2.02:1 and RECOVER at 2.12:1, below the 3:1 floor for graphical objects, and both were regressions from the colors they replaced. Darkening for white alone would have failed the dark-mode chart, and the audit report captures that chart onto white whatever theme is active, so one set has to clear both. These hold the same hue and saturation at the lightness where every function clears 3.8:1 on white and on #1f2937. Also aligns the dead BADGE_COLORS.function table and three stale comments that still described the pre-wheel palette. --- src/components/BadgeSystem.js | 18 ++++++++++-------- src/components/CSFBadge.js | 2 +- src/index.css | 4 ++-- src/pages/Dashboard.js | 16 ++++++++++------ src/utils/auditReportMarkdown.js | 12 ++++++------ 5 files changed, 29 insertions(+), 23 deletions(-) diff --git a/src/components/BadgeSystem.js b/src/components/BadgeSystem.js index 01e65a95..a7589fa2 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 5dfe4100..6530f599 100644 --- a/src/components/CSFBadge.js +++ b/src/components/CSFBadge.js @@ -2,7 +2,7 @@ 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 the official NIST CSF 2.0 wheel) diff --git a/src/index.css b/src/index.css index 88d82aa7..899f7632 100644 --- a/src/index.css +++ b/src/index.css @@ -1228,8 +1228,8 @@ 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; diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js index 38f58fe4..f22816b1 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)': '#E0B011', - 'IDENTIFY (ID)': '#3B9BD6', - 'PROTECT (PR)': '#8B7FD0', - 'DETECT (DE)': '#F39A1F', - 'RESPOND (RS)': '#D9534F', - 'RECOVER (RC)': '#47C97A', + // 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 330fdc41..859ff8e9 100644 --- a/src/utils/auditReportMarkdown.js +++ b/src/utils/auditReportMarkdown.js @@ -566,12 +566,12 @@ The organization's overall cybersecurity maturity is assessed at **${overallMatu maturitySection += `#### Score Trends by Quarter\n\nQuarterly score trends\n\n`; maturitySection += `
`; // 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 += `━━ Govern (GV)`; + maturitySection += `━━ Identify (ID)`; + maturitySection += `━━ Protect (PR)`; + maturitySection += `━━ Detect (DE)`; + maturitySection += `━━ Respond (RS)`; + maturitySection += `━━ Recover (RC)`; maturitySection += `
\n\n`; } if (!barChartUri && !radarChartUri && !trendChartUri) {