Skip to content

[pull] main from CPAtoCybersecurity:main #35

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pull merged 4 commits into from
Jul 23, 2026
Merged

[pull] main from CPAtoCybersecurity:main #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2e9ada2
Match CSF function colors to the NIST CSF 2.0 wheel; use SC shield in…
CPAtoCybersecurity Jul 23, 2026
7761cbb
Track the NIST wheel palette in the exported audit report legend
CPAtoCybersecurity Jul 23, 2026
3ba931d
Hold the trend-line hues above WCAG 1.4.11 on both chart backgrounds
CPAtoCybersecurity Jul 23, 2026
6e034f3
Merge pull request #322 from CPAtoCybersecurity/nist-wheel-colors
CPAtoCybersecurity Jul 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,8 +133,8 @@ const AppContent = () => {
<div className="flex items-center gap-3">
<div className="terminal-logo-disc">
<img
src="/SC_SimplyCyberAcademy.png"
alt="Simply Cyber Academy Logo"
src="/SC_Logo.png"
alt="Simply Cyber shield"
/>
</div>
<div className="h-6 w-px bg-gray-300 dark:bg-gray-600" />
Expand Down
18 changes: 10 additions & 8 deletions src/components/BadgeSystem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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' },
Expand Down
16 changes: 8 additions & 8 deletions src/components/CSFBadge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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")
Expand Down
8 changes: 4 additions & 4 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down
16 changes: 10 additions & 6 deletions src/pages/Dashboard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
13 changes: 7 additions & 6 deletions src/utils/auditReportMarkdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -565,12 +565,13 @@ The organization's overall cybersecurity maturity is assessed at **${overallMatu
if (trendChartUri) {
maturitySection += `#### Score Trends by Quarter\n\n<img src="${trendChartUri}" alt="Quarterly score trends" width="1400" />\n\n`;
maturitySection += `<div style="display:flex;gap:16px;flex-wrap:wrap;margin-top:4px;font-size:13px">`;
maturitySection += `<span><span style="color:#8b5cf6;font-weight:700">━━</span> Govern (GV)</span>`;
maturitySection += `<span><span style="color:#3b82f6;font-weight:700">━━</span> Identify (ID)</span>`;
maturitySection += `<span><span style="color:#10b981;font-weight:700">━━</span> Protect (PR)</span>`;
maturitySection += `<span><span style="color:#f59e0b;font-weight:700">━━</span> Detect (DE)</span>`;
maturitySection += `<span><span style="color:#ef4444;font-weight:700">━━</span> Respond (RS)</span>`;
maturitySection += `<span><span style="color:#6366f1;font-weight:700">━━</span> Recover (RC)</span>`;
// Must track FUNCTION_LINE_COLORS in Dashboard.js — the chart above is captured from it.
maturitySection += `<span><span style="color:#A07E0C;font-weight:700">━━</span> Govern (GV)</span>`;
maturitySection += `<span><span style="color:#2989C5;font-weight:700">━━</span> Identify (ID)</span>`;
maturitySection += `<span><span style="color:#8477CD;font-weight:700">━━</span> Protect (PR)</span>`;
maturitySection += `<span><span style="color:#BB710A;font-weight:700">━━</span> Detect (DE)</span>`;
maturitySection += `<span><span style="color:#DA5753;font-weight:700">━━</span> Respond (RS)</span>`;
maturitySection += `<span><span style="color:#2C9455;font-weight:700">━━</span> Recover (RC)</span>`;
maturitySection += `</div>\n\n`;
}
if (!barChartUri && !radarChartUri && !trendChartUri) {
Expand Down
Loading