Changes based on feedback

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

.changeset/serious-houses-watch.md

@@ -2,4 +2,4 @@
 '@backstage/theme': patch
 ---
 
-**DEPRECIATED**: The `bursts` object from BackstagePaletteAdditions has been depreciated and will be removed in a future release
+**DEPRECATED**: The `bursts` object from `BackstagePaletteAdditions` has been depreciated and will be removed in a future release

packages/core-components/src/layout/Header/Header.tsx

@@ -65,13 +65,13 @@ const useStyles = makeStyles<BackstageTheme>(
       width: 'auto',
     },
     title: {
-      color: theme.palette.bursts.fontColor,
+      color: theme.page.fontColor,
       wordBreak: 'break-word',
       fontSize: theme.typography.h3.fontSize,
       marginBottom: 0,
     },
     subtitle: {
-      color: theme.palette.bursts.fontColor,
+      color: theme.page.fontColor,
       opacity: 0.8,
       display: 'inline-block', // prevents margin collapse of adjacent siblings
       marginTop: theme.spacing(1),
@@ -82,10 +82,10 @@ const useStyles = makeStyles<BackstageTheme>(
       fontSize: 11,
       opacity: 0.8,
       marginBottom: theme.spacing(1),
-      color: theme.palette.bursts.fontColor,
+      color: theme.page.fontColor,
     },
     breadcrumb: {
-      color: theme.palette.bursts.fontColor,
+      color: theme.page.fontColor,
     },
     breadcrumbType: {
       fontSize: 'inherit',

packages/theme/src/pageTheme.ts

@@ -64,12 +64,25 @@ 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(colors: string[], shape: string): PageTheme {
-  const gradientColors = colors.length === 1 ? [colors[0], colors[0]] : colors;
+export function genPageTheme(options: {
+  colors: string[];
+  shape: string;
+  fontColor?: string;
+}): PageTheme {
+  const gradientColors =
+    options.colors.length === 1
+      ? [options.colors[0], options.colors[0]]
+      : options.colors;
   const gradient = `linear-gradient(90deg, ${gradientColors.join(', ')})`;
-  const backgroundImage = `${shape},  ${gradient}`;
+  const backgroundImage = `${options.shape},  ${gradient}`;
+  const fontColor = options.fontColor ?? '#FFFFFF';
 
-  return { colors, shape, backgroundImage };
+  return {
+    colors: options.colors,
+    shape: options.shape,
+    backgroundImage: backgroundImage,
+    fontColor: fontColor,
+  };
 }
 
 /**
@@ -78,14 +91,20 @@ export function genPageTheme(colors: string[], shape: string): PageTheme {
  * @public
  */
 export const pageTheme: Record<string, PageTheme> = {
-  home: genPageTheme(colorVariants.teal, shapes.wave),
-  documentation: genPageTheme(colorVariants.pinkSea, shapes.wave2),
-  tool: genPageTheme(colorVariants.purpleSky, shapes.round),
-  service: genPageTheme(colorVariants.marineBlue, shapes.wave),
-  website: genPageTheme(colorVariants.veryBlue, shapes.wave),
-  library: genPageTheme(colorVariants.rubyRed, shapes.wave),
-  other: genPageTheme(colorVariants.darkGrey, shapes.wave),
-  app: genPageTheme(colorVariants.toastyOrange, shapes.wave),
-  apis: genPageTheme(colorVariants.teal, shapes.wave2),
-  card: genPageTheme(colorVariants.greens, shapes.wave),
+  home: genPageTheme({ colors: colorVariants.teal, shape: shapes.wave }),
+  documentation: genPageTheme({
+    colors: colorVariants.pinkSea,
+    shape: shapes.wave2,
+  }),
+  tool: genPageTheme({ colors: colorVariants.purpleSky, shape: shapes.round }),
+  service: genPageTheme({
+    colors: colorVariants.marineBlue,
+    shape: shapes.wave,
+  }),
+  website: genPageTheme({ colors: colorVariants.veryBlue, shape: shapes.wave }),
+  library: genPageTheme({ colors: colorVariants.rubyRed, shape: shapes.wave }),
+  other: genPageTheme({ colors: colorVariants.darkGrey, shape: shapes.wave }),
+  app: genPageTheme({ colors: colorVariants.toastyOrange, shape: shapes.wave }),
+  apis: genPageTheme({ colors: colorVariants.teal, shape: shapes.wave2 }),
+  card: genPageTheme({ colors: colorVariants.greens, shape: shapes.wave }),
 };

packages/theme/src/types.ts

@@ -164,4 +164,5 @@ export type PageTheme = {
   colors: string[];
   shape: string;
   backgroundImage: string;
+  fontColor: string;
 };

plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx

@@ -40,7 +40,7 @@ const useStyles = makeStyles(
   (theme: BackstageTheme) => {
     return {
       button: {
-        color: theme.palette.bursts.fontColor,
+        color: theme.page.fontColor,
       },
     };
   },

plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx

@@ -110,14 +110,14 @@ const monochromeTheme = (outer: BackstageTheme) =>
     ...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),
+      home: genPageTheme({ colors: ['#444'], shape: shapes.wave2 }),
+      documentation: genPageTheme({ colors: ['#474747'], shape: shapes.wave2 }),
+      tool: genPageTheme({ colors: ['#222'], shape: shapes.wave2 }),
+      service: genPageTheme({ colors: ['#aaa'], shape: shapes.wave2 }),
+      website: genPageTheme({ colors: ['#0e0e0e'], shape: shapes.wave2 }),
+      library: genPageTheme({ colors: ['#9d9d9d'], shape: shapes.wave2 }),
+      other: genPageTheme({ colors: ['#aaa'], shape: shapes.wave2 }),
+      app: genPageTheme({ colors: ['#666'], shape: shapes.wave2 }),
     },
   });