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

refactor: Replace white & black colors with theme aware ones

.changeset/odd-oranges-tease.md

@@ -0,0 +1,21 @@
+---
+'@backstage/plugin-git-release-manager': patch
+'@backstage/plugin-microsoft-calendar': patch
+'@backstage/plugin-newrelic-dashboard': patch
+'@backstage/core-components': patch
+'@backstage/plugin-code-coverage': patch
+'@backstage/plugin-code-climate': patch
+'@backstage/plugin-azure-sites': patch
+'@backstage/plugin-firehydrant': patch
+'@backstage/plugin-scaffolder': patch
+'@backstage/plugin-tech-radar': patch
+'@backstage/plugin-gcalendar': patch
+'@backstage/plugin-shortcuts': patch
+'@backstage/plugin-techdocs': patch
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-explore': patch
+'@backstage/plugin-ilert': patch
+'@backstage/plugin-org': patch
+---
+
+Change black & white colors to be theme aware

packages/core-components/src/components/Avatar/Avatar.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import MaterialAvatar from '@material-ui/core/Avatar';
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
+import { makeStyles, Theme } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import React, { CSSProperties } from 'react';
 
@@ -24,19 +24,18 @@ import { extractInitials, stringToColor } from './utils';
 export type AvatarClassKey = 'avatar';
 
 const useStyles = makeStyles(
-  (theme: Theme) =>
-    createStyles({
-      avatar: {
-        width: '4rem',
-        height: '4rem',
-        color: '#fff',
-      },
-      avatarText: {
-        fontWeight: theme.typography.fontWeightBold,
-        letterSpacing: '1px',
-        textTransform: 'uppercase',
-      },
-    }),
+  (theme: Theme) => ({
+    avatar: {
+      width: '4rem',
+      height: '4rem',
+      color: theme.palette.common.white,
+    },
+    avatarText: {
+      fontWeight: theme.typography.fontWeightBold,
+      letterSpacing: '1px',
+      textTransform: 'uppercase',
+    },
+  }),
   { name: 'BackstageAvatar' },
 );
 

packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx

@@ -54,7 +54,8 @@ const useStyles = makeStyles<BackstageTheme>(
     code: {
       borderRadius: 6,
       margin: `${theme.spacing(2)}px 0px`,
-      background: theme.palette.type === 'dark' ? '#444' : '#fff',
+      background:
+        theme.palette.type === 'dark' ? '#444' : theme.palette.common.white,
     },
   }),
   { name: 'BackstageMissingAnnotationEmptyState' },

packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx

@@ -41,7 +41,7 @@ export type FeatureCalloutCircleClassKey =
   | 'text';
 
 const useStyles = makeStyles(
-  {
+  theme => ({
     '@keyframes pulsateSlightly': {
       '0%': { transform: 'scale(1.0)' },
       '100%': { transform: 'scale(1.1)' },
@@ -78,7 +78,7 @@ const useStyles = makeStyles(
       height: '100%',
       backgroundColor: 'transparent',
       borderRadius: '100%',
-      border: '2px solid white',
+      border: `2px solid ${theme.palette.common.white}`,
       zIndex: 2001,
       transformOrigin: 'center center',
       animation:
@@ -86,10 +86,10 @@ const useStyles = makeStyles(
     },
     text: {
       position: 'absolute',
-      color: 'white',
+      color: theme.palette.common.white,
       zIndex: 2003,
     },
-  },
+  }),
   { name: 'BackstageFeatureCalloutCircular' },
 );
 

packages/core-components/src/components/Lifecycle/Lifecycle.tsx

@@ -26,9 +26,9 @@ type Props = CSS.Properties & {
 export type LifecycleClassKey = 'alpha' | 'beta';
 
 const useStyles = makeStyles(
-  {
+  theme => ({
     alpha: {
-      color: '#ffffff',
+      color: theme.palette.common.white,
       fontFamily: 'serif',
       fontWeight: 'normal',
       fontStyle: 'italic',
@@ -39,7 +39,7 @@ const useStyles = makeStyles(
       fontWeight: 'normal',
       fontStyle: 'italic',
     },
-  },
+  }),
   { name: 'BackstageLifecycle' },
 );
 

packages/core-components/src/layout/HeaderActionMenu/HeaderActionMenu.tsx

@@ -24,6 +24,7 @@ import ListItemText, {
 } from '@material-ui/core/ListItemText';
 import Popover from '@material-ui/core/Popover';
 import MoreVert from '@material-ui/icons/MoreVert';
+import { useTheme } from '@material-ui/core/styles';
 
 /**
  * @public
@@ -73,6 +74,11 @@ export type HeaderActionMenuProps = {
  * @public
  */
 export function HeaderActionMenu(props: HeaderActionMenuProps) {
+  const {
+    palette: {
+      common: { white },
+    },
+  } = useTheme();
   const { actionItems } = props;
   const [open, setOpen] = React.useState(false);
   const anchorElRef = React.useRef(null);
@@ -84,7 +90,7 @@ export function HeaderActionMenu(props: HeaderActionMenuProps) {
         data-testid="header-action-menu"
         ref={anchorElRef}
         style={{
-          color: 'white',
+          color: white,
           height: 56,
           width: 56,
           marginRight: -4,

packages/core-components/src/layout/Sidebar/SidebarSubmenu.tsx

@@ -80,7 +80,7 @@ const useStyles = makeStyles<
     title: {
       fontSize: theme.typography.h5.fontSize,
       fontWeight: theme.typography.fontWeightMedium,
-      color: '#FFF',
+      color: theme.palette.common.white,
       padding: theme.spacing(2.5),
       [theme.breakpoints.down('xs')]: {
         display: 'none',

packages/core-components/src/layout/Sidebar/SidebarSubmenuItem.tsx

@@ -35,7 +35,8 @@ const useStyles = makeStyles<BackstageTheme>(
       height: 48,
       width: '100%',
       '&:hover': {
-        background: '#6f6f6f',
+        background:
+          theme.palette.navigation.navItem?.hoverBackground || '#6f6f6f',
         color: theme.palette.navigation.selectedColor,
       },
       display: 'flex',
@@ -52,7 +53,7 @@ const useStyles = makeStyles<BackstageTheme>(
     },
     selected: {
       background: '#6f6f6f',
-      color: '#FFF',
+      color: theme.palette.common.white,
     },
     label: {
       margin: theme.spacing(1.75),
@@ -82,7 +83,8 @@ const useStyles = makeStyles<BackstageTheme>(
       width: '100%',
       padding: '10px 0 10px 0',
       '&:hover': {
-        background: '#6f6f6f',
+        background:
+          theme.palette.navigation.navItem?.hoverBackground || '#6f6f6f',
         color: theme.palette.navigation.selectedColor,
       },
     },

plugins/airbrake/dev/components/ApiBar/ApiBar.tsx

@@ -17,20 +17,20 @@ import React from 'react';
 import { makeStyles, TextField } from '@material-ui/core';
 import { Context } from '../ContextProvider';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex',
     gap: '1em',
     flexWrap: 'wrap',
   },
   label: {
-    color: '#fff !important',
+    color: `${theme.palette.common.white} !important`,
   },
   outline: {
-    color: '#fff !important',
-    borderColor: '#fff !important',
+    color: `${theme.palette.common.white} !important`,
+    borderColor: `${theme.palette.common.white} !important`,
   },
-});
+}));
 
 export const ApiBar = () => {
   const classes = useStyles();

plugins/azure-sites/src/components/AzureSitesOverviewTableComponent/AzureSitesOverviewTable.test.tsx

@@ -15,7 +15,6 @@
  */
 
 import React from 'react';
-import { render } from '@testing-library/react';
 import {
   AnyApiRef,
   configApiRef,
@@ -24,6 +23,7 @@ import {
 } from '@backstage/core-plugin-api';
 import { rest } from 'msw';
 import {
+  renderInTestApp,
   setupRequestMockHandlers,
   TestApiProvider,
 } from '@backstage/test-utils';
@@ -65,7 +65,7 @@ describe('AzureSitesOverviewWidget', () => {
   });
 
   it('should display an overview table with the data from the requests', async () => {
-    const rendered = render(
+    const rendered = await renderInTestApp(
       <TestApiProvider apis={apis}>
         <AzureSitesOverviewTable data={[siteMock]} loading={false} />
       </TestApiProvider>,

plugins/azure-sites/src/components/AzureSitesOverviewTableComponent/AzureSitesOverviewTable.tsx

@@ -28,6 +28,7 @@ import {
 import { default as MuiAlert } from '@material-ui/lab/Alert';
 import { AzureSite } from '@backstage/plugin-azure-sites-common';
 import { Table, TableColumn, Link } from '@backstage/core-components';
+import { useTheme } from '@material-ui/core/styles';
 import FlashOnIcon from '@material-ui/icons/FlashOn';
 import PublicIcon from '@material-ui/icons/Public';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
@@ -38,18 +39,27 @@ import OpenInNewIcon from '@material-ui/icons/OpenInNew';
 import { DateTime } from 'luxon';
 import { useApi } from '@backstage/core-plugin-api';
 import { azureSiteApiRef } from '../../api';
+import { BackstageTheme } from '@backstage/theme';
 
 type States = 'Waiting' | 'Running' | 'Paused' | 'Failed' | 'Stopped';
 type Kinds = 'app' | 'functionapp';
 
 const State = ({ value }: { value: States }) => {
+  const {
+    palette: {
+      common: { black },
+      status: { ok, error },
+    },
+  } = useTheme<BackstageTheme>();
+
   const colorMap = {
     Waiting: '#dcbc21',
-    Running: 'green',
-    Paused: 'black',
-    Failed: 'red',
-    Stopped: 'black',
+    Running: ok,
+    Paused: black,
+    Failed: error,
+    Stopped: black,
   };
+
   return (
     <Box display="flex" alignItems="center">
       <Typography

plugins/catalog/src/components/EntityLabelsCard/EntityLabelsEmptyState.tsx

@@ -29,7 +29,8 @@ const useStyles = makeStyles<BackstageTheme>(
     code: {
       borderRadius: 6,
       margin: `${theme.spacing(2)}px 0px`,
-      background: theme.palette.type === 'dark' ? '#444' : '#fff',
+      background:
+        theme.palette.type === 'dark' ? '#444' : theme.palette.common.white,
     },
   }),
   { name: 'PluginCatalogEntityLabelsEmptyState' },

plugins/catalog/src/components/EntityLinksCard/EntityLinksEmptyState.tsx

@@ -34,7 +34,8 @@ const useStyles = makeStyles<BackstageTheme>(
     code: {
       borderRadius: 6,
       margin: `${theme.spacing(2)}px 0px`,
-      background: theme.palette.type === 'dark' ? '#444' : '#fff',
+      background:
+        theme.palette.type === 'dark' ? '#444' : theme.palette.common.white,
     },
   }),
   { name: 'PluginCatalogEntityLinksEmptyState' },

plugins/code-climate/src/components/CodeClimateTable/CodeClimateTable.tsx

@@ -20,32 +20,32 @@ import { Link } from '@backstage/core-components';
 import { Box, makeStyles, Typography } from '@material-ui/core';
 import { BackstageTheme } from '@backstage/theme';
 
-const letterStyle = {
-  color: 'white',
+const letterStyle = (theme: BackstageTheme) => ({
+  color: theme.palette.common.white,
   border: 0,
   borderRadius: '3px',
   fontSize: '40px',
   padding: '5px 20px',
-};
+});
 
 const fontSize = {
   fontSize: '25px',
 };
 
-const letterColor = (letter: string) => {
+const letterColor = (letter: string, theme: BackstageTheme) => {
   if (letter === 'A') {
-    return '#45d298';
+    return theme.palette.success.main || '#45d298';
   } else if (letter === 'B') {
-    return '#a5d86e';
+    return theme.palette.success.light || '#a5d86e';
   } else if (letter === 'C') {
-    return '#f1ce0c';
+    return theme.palette.warning.light || '#f1ce0c';
   } else if (letter === 'D') {
-    return '#f29141';
+    return theme.palette.warning.main || '#f29141';
   } else if (letter === 'F') {
-    return '#df5869';
+    return theme.palette.error.light || '#df5869';
   }
 
-  return '#45d298';
+  return theme.palette.success.main || '#45d298';
 };
 
 const useStyles = makeStyles<
@@ -54,7 +54,7 @@ const useStyles = makeStyles<
     maintainabilityLetter: string;
     testCoverageLetter: string;
   }
->({
+>(theme => ({
   spaceAround: {
     display: 'flex',
     justifyContent: 'space-around',
@@ -65,12 +65,12 @@ const useStyles = makeStyles<
     alignItems: 'center',
   },
   maintainabilityLetterColor: {
-    ...letterStyle,
-    backgroundColor: props => letterColor(props.maintainabilityLetter),
+    ...letterStyle(theme),
+    backgroundColor: props => letterColor(props.maintainabilityLetter, theme),
   },
   testCoverageLetterColor: {
-    ...letterStyle,
-    backgroundColor: props => letterColor(props.testCoverageLetter),
+    ...letterStyle(theme),
+    backgroundColor: props => letterColor(props.testCoverageLetter, theme),
   },
   fontSize: {
     ...fontSize,
@@ -82,7 +82,7 @@ const useStyles = makeStyles<
   paddingSides20: {
     padding: '0px 20px',
   },
-});
+}));
 
 export const CodeClimateTable = ({
   codeClimateData,

plugins/code-coverage/src/components/FileExplorer/CodeRow.tsx

@@ -29,7 +29,7 @@ const useStyles = makeStyles(theme => ({
     width: '50px',
     borderRight: `1px solid ${theme.palette.grey[500]}`,
     textAlign: 'center',
-    color: 'white', // need to enforce this color since it needs to stand out against colored background
+    color: theme.palette.common.white, // need to enforce this color since it needs to stand out against colored background
     paddingLeft: theme.spacing(1),
     paddingRight: theme.spacing(1),
   },

plugins/code-coverage/src/components/FileExplorer/FileContent.tsx

@@ -37,7 +37,7 @@ const useStyles = makeStyles(theme => ({
     margin: 'auto',
     top: '2em',
     width: '80%',
-    border: '2px solid #000',
+    border: `2px solid ${theme.palette.common.black}`,
     boxShadow: theme.shadows[5],
     padding: theme.spacing(2, 4, 3),
     overflow: 'scroll',

plugins/explore/src/components/GroupsExplorerContent/GroupsDiagram.tsx

@@ -64,7 +64,7 @@ const useStyles = makeStyles((theme: BackstageTheme) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    color: 'black',
+    color: theme.palette.common.black,
   },
   legend: {
     position: 'absolute',

plugins/explore/src/components/ToolCard/ToolCard.tsx

@@ -41,7 +41,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
   },
   lifecycle: {
     lineHeight: '0.8em',
-    color: 'white',
+    color: theme.palette.common.white,
   },
   ga: {
     backgroundColor: theme.palette.status.ok,

plugins/firehydrant/src/components/ServiceDetailsCard/ServiceDetailsCard.tsx

@@ -66,7 +66,7 @@ const useStyles = makeStyles(theme => ({
   },
   buttonLink: {
     backgroundColor: '#3b2492',
-    color: '#FFF',
+    color: theme.palette.common.white,
     textTransform: 'none',
     '&:hover': {
       backgroundColor: '#614ab6',

plugins/gcalendar/src/components/CalendarCard/AttendeeChip.tsx

@@ -44,7 +44,7 @@ const useStyles = makeStyles((theme: BackstageTheme) => {
       '& svg': {
         height: 16,
         width: 16,
-        background: '#fff',
+        background: theme.palette.common.white,
       },
     },
   };

plugins/git-release-manager/src/features/Stats/Info/InDepth/InDepth.tsx

@@ -21,6 +21,7 @@ import {
   Tooltip as MaterialTooltip,
   Typography,
 } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
 import { BarChart, Bar, XAxis, YAxis, Legend, Tooltip } from 'recharts';
 
 import { AverageReleaseTime } from './AverageReleaseTime';
@@ -30,6 +31,12 @@ import { useGetReleaseTimes } from '../hooks/useGetReleaseTimes';
 import { useReleaseStatsContext } from '../../contexts/ReleaseStatsContext';
 
 export function InDepth() {
+  const {
+    palette: {
+      success,
+      common: { black },
+    },
+  } = useTheme();
   const { releaseStats } = useReleaseStatsContext();
   const { averageReleaseTime, progress, releaseCommitPairs, run } =
     useGetReleaseTimes();
@@ -112,9 +119,9 @@ export function InDepth() {
         >
           <XAxis type="number" />
           <YAxis dataKey="version" type="category" />
-          <Tooltip labelStyle={{ color: '#000', fontWeight: 'bold' }} />
+          <Tooltip labelStyle={{ color: black, fontWeight: 'bold' }} />
           <Legend />
-          <Bar dataKey="days" fill="#82ca9d" />
+          <Bar dataKey="days" fill={success.light} />
         </BarChart>
 
         {progress > 0 && progress < 100 && (

plugins/ilert/src/components/AlertsPage/StatusChip.tsx

@@ -17,28 +17,28 @@ import { Chip, withStyles } from '@material-ui/core';
 import React from 'react';
 import { ACCEPTED, Alert, PENDING, RESOLVED } from '../../types';
 
-const ResolvedChip = withStyles({
+const ResolvedChip = withStyles(theme => ({
   root: {
     backgroundColor: '#4caf50',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
+}))(Chip);
 
-const AcceptedChip = withStyles({
+const AcceptedChip = withStyles(theme => ({
   root: {
     backgroundColor: '#ffb74d',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
-const PendingChip = withStyles({
+}))(Chip);
+const PendingChip = withStyles(theme => ({
   root: {
     backgroundColor: '#d32f2f',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
+}))(Chip);
 
 export const alertStatusLabels = {
   [RESOLVED]: 'Resolved',

plugins/ilert/src/components/ILertCard/ILertCardEmptyState.tsx

@@ -41,7 +41,8 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
   code: {
     borderRadius: 6,
     margin: theme.spacing(2, 0),
-    background: theme.palette.type === 'dark' ? '#444' : '#fff',
+    background:
+      theme.palette.type === 'dark' ? '#444' : theme.palette.common.white,
   },
   header: {
     display: 'inline-block',

plugins/ilert/src/components/ILertCard/ILertCardHeaderStatus.tsx

@@ -18,13 +18,13 @@ import Chip from '@material-ui/core/Chip';
 import { withStyles } from '@material-ui/core/styles';
 import { AlertSource } from '../../types';
 
-const MaintenanceChip = withStyles({
+const MaintenanceChip = withStyles(theme => ({
   root: {
     backgroundColor: '#92949c',
-    color: 'white',
+    color: theme.palette.common.white,
     marginTop: 8,
   },
-})(Chip);
+}))(Chip);
 
 export const ILertCardHeaderStatus = ({
   alertSource,

plugins/ilert/src/components/ServicesPage/StatusChip.tsx

@@ -24,42 +24,42 @@ import {
   UNDER_MAINTENANCE,
 } from '../../types';
 
-const OperationalChip = withStyles({
+const OperationalChip = withStyles(theme => ({
   root: {
     backgroundColor: '#388E3D',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
+}))(Chip);
 
-const UnderMaintenanceChip = withStyles({
+const UnderMaintenanceChip = withStyles(theme => ({
   root: {
     backgroundColor: '#616161',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
-const DegradedChip = withStyles({
+}))(Chip);
+const DegradedChip = withStyles(theme => ({
   root: {
     backgroundColor: '#FBC02D',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
-const PartialOutageChip = withStyles({
+}))(Chip);
+const PartialOutageChip = withStyles(theme => ({
   root: {
     backgroundColor: '#F57C02',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
-const MajorOutageChip = withStyles({
+}))(Chip);
+const MajorOutageChip = withStyles(theme => ({
   root: {
     backgroundColor: '#D22F2E',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
+}))(Chip);
 
 const serviceStatusLabels = {
   [OPERATIONAL]: 'Operational',

plugins/ilert/src/components/StatusPagePage/StatusChip.tsx

@@ -24,42 +24,42 @@ import {
   UNDER_MAINTENANCE,
 } from '../../types';
 
-const OperationalChip = withStyles({
+const OperationalChip = withStyles(theme => ({
   root: {
     backgroundColor: '#388E3D',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
+}))(Chip);
 
-const UnderMaintenanceChip = withStyles({
+const UnderMaintenanceChip = withStyles(theme => ({
   root: {
     backgroundColor: '#616161',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
-const DegradedChip = withStyles({
+}))(Chip);
+const DegradedChip = withStyles(theme => ({
   root: {
     backgroundColor: '#FBC02D',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
-const PartialOutageChip = withStyles({
+}))(Chip);
+const PartialOutageChip = withStyles(theme => ({
   root: {
     backgroundColor: '#F57C02',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
-const MajorOutageChip = withStyles({
+}))(Chip);
+const MajorOutageChip = withStyles(theme => ({
   root: {
     backgroundColor: '#D22F2E',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
+}))(Chip);
 
 const statusPageStatusLabels = {
   [OPERATIONAL]: 'Operational',

plugins/ilert/src/components/StatusPagePage/VisibilityChip.tsx

@@ -17,21 +17,21 @@ import { Chip, withStyles } from '@material-ui/core';
 import React from 'react';
 import { PRIVATE, PUBLIC, StatusPage } from '../../types';
 
-const PrivateChip = withStyles({
+const PrivateChip = withStyles(theme => ({
   root: {
     backgroundColor: '#4caf50',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
+}))(Chip);
 
-const PublicChip = withStyles({
+const PublicChip = withStyles(theme => ({
   root: {
     backgroundColor: '#ffb74d',
-    color: 'white',
+    color: theme.palette.common.white,
     margin: 0,
   },
-})(Chip);
+}))(Chip);
 
 const statusPageVisibilityLabels = {
   [PUBLIC]: 'Public',

plugins/microsoft-calendar/src/components/AttendeeChip.tsx

@@ -44,7 +44,7 @@ const useStyles = makeStyles((theme: BackstageTheme) => {
       '& svg': {
         height: 16,
         width: 16,
-        background: '#fff',
+        background: theme.palette.common.white,
       },
     },
   };

plugins/newrelic-dashboard/src/components/NewRelicDashboard/DashboardSnapshotList/DashboardSnapshot.tsx

@@ -16,6 +16,7 @@
 
 import React from 'react';
 import { Box, Grid, MenuItem, Select } from '@material-ui/core';
+import { useTheme } from '@material-ui/core/styles';
 import { useApi, storageApiRef } from '@backstage/core-plugin-api';
 import useAsync from 'react-use/lib/useAsync';
 import {
@@ -36,6 +37,11 @@ export const DashboardSnapshot = (props: {
   name: string;
   permalink: string;
 }) => {
+  const {
+    palette: {
+      common: { black },
+    },
+  } = useTheme();
   const { guid, name, permalink } = props;
   const newRelicDashboardAPI = useApi(newRelicDashboardApiRef);
   const storageApi = useApi(storageApiRef).forBucket('newrelic-dashboard');
@@ -99,7 +105,7 @@ export const DashboardSnapshot = (props: {
               {url ? (
                 <img
                   alt={`${name} Dashbord`}
-                  style={{ border: 'solid 1px black' }}
+                  style={{ border: `solid 1px ${black}` }}
                   src={url}
                 />
               ) : (

plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx

@@ -37,7 +37,7 @@ const useStyles = makeStyles((theme: BackstageTheme) =>
       boxShadow: theme.shadows[2],
       borderRadius: '4px',
       padding: theme.spacing(2),
-      color: '#fff',
+      color: theme.palette.common.white,
       transition: `${theme.transitions.duration.standard}ms`,
       '&:hover': {
         boxShadow: theme.shadows[4],

plugins/scaffolder/src/components/ScaffolderPage/ScaffolderPageContextMenu.tsx

@@ -34,11 +34,11 @@ import {
   scaffolderListTaskRouteRef,
 } from '../../routes';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   button: {
-    color: 'white',
+    color: theme.palette.common.white,
   },
-});
+}));
 
 export type ScaffolderPageContextMenuProps = {
   editor?: boolean;

plugins/scaffolder/src/components/TemplateCard/TemplateCard.tsx

@@ -103,7 +103,7 @@ const useStyles = makeStyles(theme => ({
     top: theme.spacing(0.5),
     right: theme.spacing(0.5),
     padding: '0.25rem',
-    color: '#fff',
+    color: theme.palette.common.white,
   },
 }));
 

plugins/scaffolder/src/next/TemplateListPage/ContextMenu.tsx

@@ -34,11 +34,11 @@ import {
   nextScaffolderListTaskRouteRef,
 } from '../routes';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   button: {
-    color: 'white',
+    color: theme.palette.common.white,
   },
-});
+}));
 
 export type ScaffolderPageContextMenuProps = {
   editor?: boolean;

plugins/shortcuts/src/ShortcutItem.tsx

@@ -25,7 +25,7 @@ import { ShortcutApi } from './api';
 import { Shortcut } from './types';
 import { SidebarItem } from '@backstage/core-components';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles(theme => ({
   root: {
     '&:hover #edit': {
       visibility: 'visible',
@@ -35,10 +35,10 @@ const useStyles = makeStyles({
     visibility: 'hidden',
   },
   icon: {
-    color: 'white',
+    color: theme.palette.common.white,
     fontSize: 16,
   },
-});
+}));
 
 const getIconText = (title: string) =>
   title.split(' ').length === 1

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',

plugins/techdocs/src/reader/components/TechDocsReaderPageHeader/TechDocsReaderPageHeader.tsx

@@ -19,6 +19,7 @@ import Helmet from 'react-helmet';
 
 import { Grid } from '@material-ui/core';
 import { Skeleton } from '@material-ui/lab';
+import { useTheme } from '@material-ui/core/styles';
 import CodeIcon from '@material-ui/icons/Code';
 
 import {
@@ -64,6 +65,11 @@ export type TechDocsReaderPageHeaderProps = PropsWithChildren<{
 export const TechDocsReaderPageHeader = (
   props: TechDocsReaderPageHeaderProps,
 ) => {
+  const {
+    palette: {
+      common: { white },
+    },
+  } = useTheme();
   const { children } = props;
   const addons = useTechDocsAddons();
   const configApi = useApi(configApiRef);
@@ -138,7 +144,7 @@ export const TechDocsReaderPageHeader = (
               container
               direction="column"
               alignItems="center"
-              style={{ color: '#fff' }}
+              style={{ color: white }}
             >
               <Grid style={{ padding: 0 }} item>
                 <CodeIcon style={{ marginTop: '-25px' }} />