Add configurable gradient property to backstage theme

Signed-off-by: Benjamin <benjamin.mccain@onepeloton.com>

.changeset/witty-wombats-provide.md

@@ -0,0 +1,6 @@
+---
+'@backstage/core-components': patch
+'@backstage/theme': patch
+---
+
+Add a configurable `palette.bursts.gradient` property to the Backstage theme, to support customizing the gradients in the `ItemCard` header.

packages/core-components/api-report.md

@@ -28,6 +28,7 @@ import { LinkProps as LinkProps_2 } from '@material-ui/core';
 import { LinkProps as LinkProps_3 } from 'react-router-dom';
 import { MaterialTableProps } from '@material-table/core';
 import { NavLinkProps } from 'react-router-dom';
+import { Palette } from '@material-ui/core/styles/createPalette';
 import { ProfileInfoApi } from '@backstage/core-plugin-api';
 import { PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';

packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx

@@ -17,18 +17,18 @@
 import {
   createStyles,
   makeStyles,
-  Theme,
   Typography,
   WithStyles,
 } from '@material-ui/core';
 import React from 'react';
+import { BackstageTheme } from '../../../../theme/src';
 
-const styles = (theme: Theme) =>
+const styles = (theme: BackstageTheme) =>
   createStyles({
     root: {
       color: theme.palette.common.white,
       padding: theme.spacing(2, 2, 3),
-      backgroundImage: 'linear-gradient(-137deg,  #4BB8A5 0%,  #187656 100%)',
+      backgroundImage: theme.palette.bursts.gradient.linear,
       backgroundPosition: 0,
       backgroundSize: 'inherit',
     },

packages/theme/src/themes.ts

@@ -38,6 +38,9 @@ export const lightTheme = createTheme({
       backgroundColor: {
         default: '#7C3699',
       },
+      gradient: {
+        linear: 'linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)',
+      },
     },
     primary: {
       main: '#2E77D0',
@@ -100,6 +103,9 @@ export const darkTheme = createTheme({
       backgroundColor: {
         default: '#7C3699',
       },
+      gradient: {
+        linear: 'linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)',
+      },
     },
     primary: {
       main: '#9CC9FF',

packages/theme/src/types.ts

@@ -58,6 +58,9 @@ type PaletteAdditions = {
     backgroundColor: {
       default: string;
     };
+    gradient: {
+      linear: string;
+    };
   };
   pinSidebarButton: {
     icon: string;