Allow for theming inside the OwnershipCard

Signed-off-by: Elliot Greenwood <hello@elliotgreenwood.co.uk>

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

@@ -13,10 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Grid } from '@material-ui/core';
+import { Grid, ThemeProvider } from '@material-ui/core';
 import React from 'react';
 import { MemoryRouter } from 'react-router';
 import { GroupEntity } from '@backstage/catalog-model';
+import {
+  lightTheme,
+  createTheme,
+  genPageTheme,
+  shapes,
+} from '@backstage/theme';
 import {
   EntityContext,
   CatalogApi,
@@ -83,14 +89,51 @@ const apiRegistry = ApiRegistry.from([[catalogApiRef, catalogApi]]);
 
 export const Default = () => (
   <MemoryRouter>
-    <ApiProvider apis={apiRegistry}>
-      <EntityContext.Provider value={{ entity: defaultEntity, loading: false }}>
-        <Grid container spacing={4}>
-          <Grid item xs={12} md={6}>
-            <OwnershipCard variant="gridItem" />
+    <ThemeProvider theme={lightTheme}>
+      <ApiProvider apis={apiRegistry}>
+        <EntityContext.Provider
+          value={{ entity: defaultEntity, loading: false }}
+        >
+          <Grid container spacing={4}>
+            <Grid item xs={12} md={6}>
+              <OwnershipCard />
+            </Grid>
           </Grid>
-        </Grid>
-      </EntityContext.Provider>
-    </ApiProvider>
+        </EntityContext.Provider>
+      </ApiProvider>
+    </ThemeProvider>
+  </MemoryRouter>
+);
+
+const monochromeTheme = createTheme({
+  ...lightTheme,
+  defaultPageTheme: 'home',
+  pageTheme: {
+    home: genPageTheme(['#444'], shapes.wave2),
+    documentation: genPageTheme(['#474747'], shapes.wave2),
+    tool: genPageTheme(['#222'], shapes.wave2),
+    service: genPageTheme(['#aaa'], shapes.wave2),
+    website: genPageTheme(['#0e0e0e'], shapes.wave2),
+    library: genPageTheme(['#9d9d9d'], shapes.wave2),
+    other: genPageTheme(['#aaa'], shapes.wave2),
+    app: genPageTheme(['#666'], shapes.wave2),
+  },
+});
+
+export const Themed = () => (
+  <MemoryRouter>
+    <ThemeProvider theme={monochromeTheme}>
+      <ApiProvider apis={apiRegistry}>
+        <EntityContext.Provider
+          value={{ entity: defaultEntity, loading: false }}
+        >
+          <Grid container spacing={4}>
+            <Grid item xs={12} md={6}>
+              <OwnershipCard />
+            </Grid>
+          </Grid>
+        </EntityContext.Provider>
+      </ApiProvider>
+    </ThemeProvider>
   </MemoryRouter>
 );

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

@@ -21,13 +21,12 @@ import {
   isOwnerOf,
   useEntity,
 } from '@backstage/plugin-catalog-react';
-import { pageTheme } from '@backstage/theme';
+import { BackstageTheme, genPageTheme } from '@backstage/theme';
 import {
   Box,
   createStyles,
   Grid,
   makeStyles,
-  Theme,
   Typography,
 } from '@material-ui/core';
 import Alert from '@material-ui/lab/Alert';
@@ -43,7 +42,17 @@ type EntitiesTypes =
   | 'api'
   | 'tool';
 
-const useStyles = makeStyles((theme: Theme) =>
+const createPageTheme = (
+  theme: BackstageTheme,
+  shapeKey: string,
+  colorsKey: string,
+) => {
+  const { colors } = theme.getPageTheme({ themeId: colorsKey });
+  const { shape } = theme.getPageTheme({ themeId: shapeKey });
+  return genPageTheme(colors, shape).backgroundImage;
+};
+
+const useStyles = makeStyles((theme: BackstageTheme) =>
   createStyles({
     card: {
       border: `1px solid ${theme.palette.divider}`,
@@ -60,22 +69,22 @@ const useStyles = makeStyles((theme: Theme) =>
       fontWeight: theme.typography.fontWeightBold,
     },
     service: {
-      background: `${pageTheme.home.shape}, linear-gradient(90deg, ${pageTheme.service.colors})`,
+      background: createPageTheme(theme, 'home', 'service'),
     },
     website: {
-      background: `${pageTheme.home.shape}, linear-gradient(90deg, ${pageTheme.website.colors})`,
+      background: createPageTheme(theme, 'home', 'website'),
     },
     library: {
-      background: `${pageTheme.home.shape}, linear-gradient(90deg, ${pageTheme.library.colors})`,
+      background: createPageTheme(theme, 'home', 'library'),
     },
     documentation: {
-      background: `${pageTheme.home.shape}, linear-gradient(90deg, ${pageTheme.documentation.colors})`,
+      background: createPageTheme(theme, 'home', 'documentation'),
     },
     api: {
-      background: `${pageTheme.home.shape}, linear-gradient(90deg, #005B4B, #005B4B)`,
+      background: createPageTheme(theme, 'home', 'home'),
     },
     tool: {
-      background: `${pageTheme.home.shape}, linear-gradient(90deg, ${pageTheme.tool.colors})`,
+      background: createPageTheme(theme, 'home', 'tool'),
     },
   }),
 );