From 4aa9b100fbec54daf6d30cc2c820140d855eab41 Mon Sep 17 00:00:00 2001
From: Elliot Greenwood <hello@elliotgreenwood.co.uk>
Date: Sun, 14 Feb 2021 01:43:14 +0000
Subject: [PATCH 1/3] Allow for theming inside the OwnershipCard

Signed-off-by: Elliot Greenwood <hello@elliotgreenwood.co.uk>
---
 .../OwnershipCard/OwnershipCard.stories.tsx   | 61 ++++++++++++++++---
 .../Cards/OwnershipCard/OwnershipCard.tsx     | 27 +++++---
 2 files changed, 70 insertions(+), 18 deletions(-)

diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx
index af42ef6759..b5f0fb9bde 100644
--- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx
+++ b/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>
 );
diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx
index 30f3bf0967..0c46b8e670 100644
--- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx
+++ b/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'),
     },
   }),
 );

From b25530b34ba8b3e831e61f4200d801a008ca9c97 Mon Sep 17 00:00:00 2001
From: Elliot Greenwood <hello@elliotgreenwood.co.uk>
Date: Thu, 18 Feb 2021 20:56:12 +0000
Subject: [PATCH 2/3] Add storybook theming to local theme

Signed-off-by: Elliot Greenwood <hello@elliotgreenwood.co.uk>
---
 .../OwnershipCard/OwnershipCard.stories.tsx   | 51 +++++++++----------
 1 file changed, 24 insertions(+), 27 deletions(-)

diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx
index b5f0fb9bde..bce1240434 100644
--- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx
+++ b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx
@@ -18,10 +18,10 @@ import React from 'react';
 import { MemoryRouter } from 'react-router';
 import { GroupEntity } from '@backstage/catalog-model';
 import {
-  lightTheme,
   createTheme,
   genPageTheme,
   shapes,
+  BackstageTheme,
 } from '@backstage/theme';
 import {
   EntityContext,
@@ -89,36 +89,33 @@ const apiRegistry = ApiRegistry.from([[catalogApiRef, catalogApi]]);
 
 export const Default = () => (
   <MemoryRouter>
-    <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>
+    <ApiProvider apis={apiRegistry}>
+      <EntityContext.Provider value={{ entity: defaultEntity, loading: false }}>
+        <Grid container spacing={4}>
+          <Grid item xs={12} md={6}>
+            <OwnershipCard />
           </Grid>
-        </EntityContext.Provider>
-      </ApiProvider>
-    </ThemeProvider>
+        </Grid>
+      </EntityContext.Provider>
+    </ApiProvider>
   </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),
-  },
-});
+const monochromeTheme = (outer: BackstageTheme) =>
+  createTheme({
+    ...outer,
+    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>

From e3bc5aad701dac40936ea2dbf487da75329259ff Mon Sep 17 00:00:00 2001
From: Elliot Greenwood <hello@elliotgreenwood.co.uk>
Date: Thu, 18 Feb 2021 20:59:59 +0000
Subject: [PATCH 3/3] Add change set

Signed-off-by: Elliot Greenwood <hello@elliotgreenwood.co.uk>
---
 .changeset/cyan-feet-hide.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/cyan-feet-hide.md

diff --git a/.changeset/cyan-feet-hide.md b/.changeset/cyan-feet-hide.md
new file mode 100644
index 0000000000..a1d58d8252
--- /dev/null
+++ b/.changeset/cyan-feet-hide.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Use the `pageTheme` to colour the OwnershipCard boxes with their respective theme colours.