Merge pull request #16521 from luchillo17/fix/BCKSTG-102-theme-aware-colors

refactor: Replace white & black colors with theme aware ones

plugins/tech-radar/src/components/RadarBubble/RadarBubble.tsx

@@ -24,7 +24,7 @@ export type Props = {
   y: number;
 };
 
-const useStyles = makeStyles<Theme>(() => ({
+const useStyles = makeStyles<Theme>(theme => ({
   bubble: {
     pointerEvents: 'none',
     userSelect: 'none',
@@ -42,7 +42,7 @@ const useStyles = makeStyles<Theme>(() => ({
     pointerEvents: 'none',
     userSelect: 'none',
     fontSize: '10px',
-    fill: '#fff',
+    fill: theme.palette.common.white,
   },
 }));
 

plugins/tech-radar/src/components/RadarEntry/RadarEntry.tsx

@@ -33,12 +33,12 @@ export type Props = {
   onClick?: (event: React.MouseEvent<SVGGElement, MouseEvent>) => void;
 };
 
-const useStyles = makeStyles<Theme>(() => ({
+const useStyles = makeStyles<Theme>(theme => ({
   text: {
     pointerEvents: 'none',
     userSelect: 'none',
     fontSize: '9px',
-    fill: '#fff',
+    fill: theme.palette.common.white,
     textAnchor: 'middle',
   },
 

plugins/tech-radar/src/components/RadarLegend/RadarLegend.tsx

@@ -74,7 +74,7 @@ const useStyles = makeStyles<Theme>(theme => ({
     userSelect: 'none',
     fontSize: '11px',
     background: '#6f6f6f',
-    color: '#FFF',
+    color: theme.palette.common.white,
   },
   entryLink: {
     pointerEvents: 'visiblePainted',