diff --git a/.changeset/great-roses-pump.md b/.changeset/great-roses-pump.md index 16a49bd464..0e15d186d4 100644 --- a/.changeset/great-roses-pump.md +++ b/.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: diff --git a/.changeset/serious-houses-watch.md b/.changeset/serious-houses-watch.md index d3f82850f0..63d5253bcb 100644 --- a/.changeset/serious-houses-watch.md +++ b/.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. diff --git a/.changeset/tricky-ravens-visit.md b/.changeset/tricky-ravens-visit.md new file mode 100644 index 0000000000..8500c9b64e --- /dev/null +++ b/.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 diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 772e868635..92958c9c7e 100644 --- a/packages/theme/api-report.md +++ b/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 diff --git a/packages/theme/src/pageTheme.ts b/packages/theme/src/pageTheme.ts index 9d9e07fc93..5b5eb24be9 100644 --- a/packages/theme/src/pageTheme.ts +++ b/packages/theme/src/pageTheme.ts @@ -64,22 +64,22 @@ export const colorVariants: Record = { * 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, };