From 6b1afe8c005141ed089b8b6ee86dbdf4422820fc Mon Sep 17 00:00:00 2001
From: Benjamin <benjamin.mccain@onepeloton.com>
Date: Tue, 10 Aug 2021 12:56:25 -0400
Subject: [PATCH] Add configurable gradient property to backstage theme

Signed-off-by: Benjamin <benjamin.mccain@onepeloton.com>
---
 .changeset/witty-wombats-provide.md                         | 6 ++++++
 packages/core-components/api-report.md                      | 1 +
 .../core-components/src/layout/ItemCard/ItemCardHeader.tsx  | 6 +++---
 packages/theme/src/themes.ts                                | 6 ++++++
 packages/theme/src/types.ts                                 | 3 +++
 5 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/witty-wombats-provide.md

diff --git a/.changeset/witty-wombats-provide.md b/.changeset/witty-wombats-provide.md
new file mode 100644
index 0000000000..1dad4be781
--- /dev/null
+++ b/.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.
diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md
index 42404fb0c0..b4402f67ac 100644
--- a/packages/core-components/api-report.md
+++ b/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';
diff --git a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx b/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx
index 6f8b17701d..58c7c1501d 100644
--- a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx
+++ b/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',
     },
diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts
index b31786aae9..d7a4a6d785 100644
--- a/packages/theme/src/themes.ts
+++ b/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',
diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts
index c2758c29e7..76a1b7eb5c 100644
--- a/packages/theme/src/types.ts
+++ b/packages/theme/src/types.ts
@@ -58,6 +58,9 @@ type PaletteAdditions = {
     backgroundColor: {
       default: string;
     };
+    gradient: {
+      linear: string;
+    };
   };
   pinSidebarButton: {
     icon: string;