Latest feedback updates

Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com>

.changeset/great-roses-pump.md

@@ -4,7 +4,7 @@
 
 Previously, the color of the Entity Context Menu (in the Entity Page Header) was hardcoded as `white`.
 
-This was an issue for themes that use a header with a white background. By default, the color of the icon is now `theme.palette.bursts.fontColor`.
+This was an issue for themes that use a header with a white background. By default, the color of the icon is now `theme.page.fontColor`.
 
 It can now also be overridden in the theme, which is only necessary if the header title, subtitle and three-dots icon need to have different colors. For example:
 

.changeset/serious-houses-watch.md

@@ -3,3 +3,5 @@
 ---
 
 **DEPRECATED**: The `bursts` object from `BackstagePaletteAdditions` has been depreciated and will be removed in a future release
+
+The `genPageTheme` function now includes an optional options object with an optional `fontColor` which defaults to white if not provided.

.changeset/tricky-ravens-visit.md

@@ -0,0 +1,6 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-catalog': patch
+---
+
+Updated to remove usage of the `bursts` object in the theme palette

packages/theme/api-report.md

@@ -116,7 +116,13 @@ export function createThemeOverrides(theme: BackstageTheme): Overrides;
 export const darkTheme: BackstageTheme;
 
 // @public
-export function genPageTheme(colors: string[], shape: string): PageTheme;
+export function genPageTheme(props: {
+  colors: string[];
+  shape: string;
+  options?: {
+    fontColor?: string;
+  };
+}): PageTheme;
 
 // @public
 export const lightTheme: BackstageTheme;
@@ -126,6 +132,7 @@ export type PageTheme = {
   colors: string[];
   shape: string;
   backgroundImage: string;
+  fontColor: string;
 };
 
 // @public

packages/theme/src/pageTheme.ts

@@ -64,22 +64,22 @@ export const colorVariants: Record<string, string[]> = {
  * As the background shapes and colors are decorative, we place them onto the
  * page as a css background-image instead of an html element of its own.
  */
-export function genPageTheme(options: {
+export function genPageTheme(props: {
   colors: string[];
   shape: string;
-  fontColor?: string;
+  options?: {
+    fontColor?: string;
+  };
 }): PageTheme {
-  const gradientColors =
-    options.colors.length === 1
-      ? [options.colors[0], options.colors[0]]
-      : options.colors;
+  const { colors, shape, options } = props;
+  const gradientColors = colors.length === 1 ? [colors[0], colors[0]] : colors;
   const gradient = `linear-gradient(90deg, ${gradientColors.join(', ')})`;
-  const backgroundImage = `${options.shape},  ${gradient}`;
-  const fontColor = options.fontColor ?? '#FFFFFF';
+  const backgroundImage = `${shape},  ${gradient}`;
+  const fontColor = options?.fontColor ?? '#FFFFFF';
 
   return {
-    colors: options.colors,
-    shape: options.shape,
+    colors: colors,
+    shape: shape,
     backgroundImage: backgroundImage,
     fontColor: fontColor,
   };