Merge pull request #4586 from egnwd/feat/org-themed-ownership-card

Org: Themed ownership card

.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.

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 {
+  createTheme,
+  genPageTheme,
+  shapes,
+  BackstageTheme,
+} from '@backstage/theme';
 import {
   EntityContext,
   CatalogApi,
@@ -87,10 +93,44 @@ export const Default = () => (
       <EntityContext.Provider value={{ entity: defaultEntity, loading: false }}>
         <Grid container spacing={4}>
           <Grid item xs={12} md={6}>
-            <OwnershipCard variant="gridItem" />
+            <OwnershipCard />
           </Grid>
         </Grid>
       </EntityContext.Provider>
     </ApiProvider>
   </MemoryRouter>
 );
+
+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>
+    <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'),
     },
   }),
 );