From bae72d6f4d124f9987c3f54377a87319f72f72b6 Mon Sep 17 00:00:00 2001
From: Jonathan Ash <jonathan-ash@users.noreply.github.com>
Date: Fri, 4 Mar 2022 17:47:20 +0000
Subject: [PATCH] Tech Radar ring names are now coloured by theme (via
 theme.palette.text.primary)

Signed-off-by: Jonathan Ash <jonathan-ash@users.noreply.github.com>
---
 .changeset/shaggy-apricots-hug.md                         | 5 +++++
 plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/shaggy-apricots-hug.md

diff --git a/.changeset/shaggy-apricots-hug.md b/.changeset/shaggy-apricots-hug.md
new file mode 100644
index 0000000000..62bea4c3bd
--- /dev/null
+++ b/.changeset/shaggy-apricots-hug.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-tech-radar': patch
+---
+
+Tech Radar Ring names are now coloured from theme via theme.palette.text.primary (instead of a hard coded colour)
diff --git a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx
index 94ef2b1bda..ef62b8abd9 100644
--- a/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx
+++ b/plugins/tech-radar/src/components/RadarGrid/RadarGrid.tsx
@@ -23,7 +23,7 @@ export type Props = {
   rings: Ring[];
 };
 
-const useStyles = makeStyles<Theme>(() => ({
+const useStyles = makeStyles<Theme>(theme => ({
   ring: {
     fill: 'none',
     stroke: '#bbb',
@@ -37,7 +37,7 @@ const useStyles = makeStyles<Theme>(() => ({
   text: {
     pointerEvents: 'none',
     userSelect: 'none',
-    fill: '#e5e5e5',
+    fill: theme.palette.text.primary,
     fontSize: '25px',
     fontWeight: 800,
   },