Tint the type badge in the type's colour instead of showing a dot

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>
 );

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 = {};

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');
+    });
+});