Changes based on feedback

Signed-off-by: Andre Wanlin <awanlin@rapidrtc.com>

.changeset/serious-houses-watch.md

@@ -1,29 +1,5 @@
 ---
-'@backstage/theme': minor
+'@backstage/theme': patch
 ---
 
-**BREAKING**: Removed the following unused properties from BackstagePaletteAdditions under the `bursts` property:
-
-```ts
-slackChannelText: string;
-backgroundColor: {
-    default: string;
-};
-```
-
-If these were being used you can add them back to your custom theme, for example like this:
-
-```diff
- bursts: {
-     fontColor: '#FEFEFE',
-+    slackChannelText: '#ddd',
-+    backgroundColor: {
-+       default: '#7C3699',
-+    },
-     gradient: {
-        linear: 'linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)',
-     },
-},
-```
-
-The [Customize the look-and-feel of your App](https://backstage.io/docs/getting-started/app-custom-theme) documentation has more details on creating and using a custom theme.
+**DEPRECIATED**: The `bursts` object from BackstagePaletteAdditions has been depreciated and will be removed in a future release

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

@@ -27,7 +27,7 @@ const styles = (theme: BackstageTheme) =>
     root: {
       color: theme.palette.common.white,
       padding: theme.spacing(2, 2, 3),
-      backgroundImage: theme.palette.bursts.gradient.linear,
+      backgroundImage: theme.getPageTheme({ themeId: 'card' }).backgroundImage,
       backgroundPosition: 0,
       backgroundSize: 'inherit',
     },

packages/theme/src/pageTheme.ts

@@ -52,6 +52,7 @@ export const colorVariants: Record<string, string[]> = {
   eveningSea: ['#00FFF2', '#035355'],
   teal: ['#005B4B'],
   pinkSea: ['#C8077A', '#C2297D'],
+  greens: ['#4BB8A5', '#187656'],
 };
 
 /**
@@ -86,4 +87,5 @@ export const pageTheme: Record<string, PageTheme> = {
   other: genPageTheme(colorVariants.darkGrey, shapes.wave),
   app: genPageTheme(colorVariants.toastyOrange, shapes.wave),
   apis: genPageTheme(colorVariants.teal, shapes.wave2),
+  card: genPageTheme(colorVariants.greens, shapes.wave),
 };

packages/theme/src/themes.ts

@@ -39,6 +39,10 @@ export const lightTheme = createTheme({
     },
     bursts: {
       fontColor: '#FEFEFE',
+      slackChannelText: '#ddd',
+      backgroundColor: {
+        default: '#7C3699',
+      },
       gradient: {
         linear: 'linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)',
       },
@@ -112,6 +116,10 @@ export const darkTheme = createTheme({
     },
     bursts: {
       fontColor: '#FEFEFE',
+      slackChannelText: '#ddd',
+      backgroundColor: {
+        default: '#7C3699',
+      },
       gradient: {
         linear: 'linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)',
       },

packages/theme/src/types.ts

@@ -63,8 +63,15 @@ export type BackstagePaletteAdditions = {
   tabbar: {
     indicator: string;
   };
+  /**
+   * @deprecated The entire `bursts` section will be removed in a future release
+   */
   bursts: {
     fontColor: string;
+    slackChannelText: string;
+    backgroundColor: {
+      default: string;
+    };
     gradient: {
       linear: string;
     };