From 4938b45ef63f128bbb13d4b5f183bdb3c60ad6d8 Mon Sep 17 00:00:00 2001
From: nando-bingani <n.bingani@saeon.nrf.ac.za>
Date: Wed, 7 Oct 2026 10:57:29 +0200
Subject: [PATCH] Tint the type badge in the type's colour instead of showing a
 dot

The project type badge now matches the other coloured badges, such as
the project count: the whole box is a light tint of the type's colour,
with the text in a darker shade of the same hue. The dot is gone. The
text shades read at 4.9:1 or better on their tint; the identity colours
themselves only reach about 3:1. Map and chart legends keep their dots.
---
 src/components/InterventionBadge.jsx | 12 ++++++------
 src/utils/typeColors.js              | 20 ++++++++++++++++++++
 src/utils/typeColors.test.js         |  9 +++++++++
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/components/InterventionBadge.jsx b/src/components/InterventionBadge.jsx
index 253bd14..304036f 100644
--- a/src/components/InterventionBadge.jsx
+++ b/src/components/InterventionBadge.jsx
@@ -1,13 +1,13 @@
 // ─────────────────────────────────────────────────────────────────────────────
-// InterventionBadge — project type in the shared boxed .badge style, with a
-// colour dot carrying the type colour (shared with the map and charts,
-// utils/typeColors.js); the text keeps the badge's readable colour.
+// InterventionBadge — project type in the shared boxed .badge style, the box
+// tinted in the type's colour (shared with the map and charts,
+// utils/typeColors.js) behind darker text of the same hue, like the other
+// coloured badges.
 // ─────────────────────────────────────────────────────────────────────────────
-import { typeColor } from '../utils/typeColors';
+import { typeTextColor, typeTint } from '../utils/typeColors';
 
 const InterventionBadge = ({ type }) => (
-    <span className="badge type-badge">
-        <span className="type-dot" style={{ background: typeColor(type) }} aria-hidden="true" />
+    <span className="badge type-badge" style={{ background: typeTint(type), color: typeTextColor(type) }}>
         {type || 'General'}
     </span>
 );
diff --git a/src/utils/typeColors.js b/src/utils/typeColors.js
index fadfb2e..443d7b7 100644
--- a/src/utils/typeColors.js
+++ b/src/utils/typeColors.js
@@ -17,6 +17,26 @@ export const OTHER_TYPE_COLOR = '#94a3b8';
 
 export const typeColor = (type) => TYPE_COLORS[type] ?? OTHER_TYPE_COLOR;
 
+/**
+ * Darker shades of the same hues, for text: each reads at 4.9:1 or better on
+ * its own badge tint (typeTint), where the identity colours above only reach
+ * about 3:1.
+ */
+const TYPE_TEXT_COLORS = {
+    Mitigation: '#8a5a00',
+    Adaptation: '#047857',
+    'Cross Cutting': '#4338ca',
+};
+
+export const typeTextColor = (type) => TYPE_TEXT_COLORS[type] ?? '#475569';
+
+/** The type colour as a light tint, for a badge's background. */
+export const typeTint = (type, alpha = 0.12) => {
+    const hex = typeColor(type).slice(1);
+    const [r, g, b] = [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16));
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
 /** Projects per type as [type, count] pairs, known types in their fixed order. */
 export const countByType = (projects) => {
     const counts = {};
diff --git a/src/utils/typeColors.test.js b/src/utils/typeColors.test.js
index ad4d004..e5a3dd8 100644
--- a/src/utils/typeColors.test.js
+++ b/src/utils/typeColors.test.js
@@ -12,3 +12,12 @@ describe('typeColors', () => {
         expect(typeColor(undefined)).toBe('#94a3b8');
     });
 });
+
+describe('badge colours', () => {
+    it('tints the type colour for the box and uses a darker shade for the text', async () => {
+        const { typeTint, typeTextColor } = await import('./typeColors');
+        expect(typeTint('Adaptation')).toBe('rgba(27, 175, 122, 0.12)');
+        expect(typeTextColor('Adaptation')).toBe('#047857');
+        expect(typeTextColor('Something else')).toBe('#475569');
+    });
+});