From ff4f56eb4954f8eeac98d50d0e65852c943a9462 Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Sat, 12 Mar 2022 11:17:28 -0600 Subject: [PATCH 01/11] Removed properties from BackstagePaletteAdditions Signed-off-by: Andre Wanlin --- .changeset/serious-houses-watch.md | 29 +++++++++++++++++++++++++++++ packages/theme/api-report.md | 4 ---- packages/theme/src/themes.ts | 8 -------- packages/theme/src/types.ts | 4 ---- 4 files changed, 29 insertions(+), 16 deletions(-) create mode 100644 .changeset/serious-houses-watch.md diff --git a/.changeset/serious-houses-watch.md b/.changeset/serious-houses-watch.md new file mode 100644 index 0000000000..5bfcbc5050 --- /dev/null +++ b/.changeset/serious-houses-watch.md @@ -0,0 +1,29 @@ +--- +'@backstage/theme': patch +--- + +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. diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 772e868635..043d7d37ac 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -53,10 +53,6 @@ export type BackstagePaletteAdditions = { }; bursts: { fontColor: string; - slackChannelText: string; - backgroundColor: { - default: string; - }; gradient: { linear: string; }; diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index b048c70fec..e5551f7796 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/themes.ts @@ -39,10 +39,6 @@ export const lightTheme = createTheme({ }, bursts: { fontColor: '#FEFEFE', - slackChannelText: '#ddd', - backgroundColor: { - default: '#7C3699', - }, gradient: { linear: 'linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)', }, @@ -116,10 +112,6 @@ export const darkTheme = createTheme({ }, bursts: { fontColor: '#FEFEFE', - slackChannelText: '#ddd', - backgroundColor: { - default: '#7C3699', - }, gradient: { linear: 'linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)', }, diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index b921154005..ec71e6d090 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -65,10 +65,6 @@ export type BackstagePaletteAdditions = { }; bursts: { fontColor: string; - slackChannelText: string; - backgroundColor: { - default: string; - }; gradient: { linear: string; }; From e591c242efdd034900857c41c1aa8ed6844336c0 Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Tue, 15 Mar 2022 14:30:01 -0500 Subject: [PATCH 02/11] Suggested changes Signed-off-by: Andre Wanlin --- .changeset/serious-houses-watch.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/serious-houses-watch.md b/.changeset/serious-houses-watch.md index 5bfcbc5050..4da1466c1f 100644 --- a/.changeset/serious-houses-watch.md +++ b/.changeset/serious-houses-watch.md @@ -1,8 +1,8 @@ --- -'@backstage/theme': patch +'@backstage/theme': minor --- -Removed the following unused properties from BackstagePaletteAdditions under the `bursts` property: +**BREAKING**: Removed the following unused properties from BackstagePaletteAdditions under the `bursts` property: ```ts slackChannelText: string; From d348095890005273faecfdf8325727490715ea90 Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Mon, 28 Mar 2022 12:44:56 -0500 Subject: [PATCH 03/11] Changes based on feedback Signed-off-by: Andre Wanlin --- .changeset/serious-houses-watch.md | 28 ++----------------- .../src/layout/ItemCard/ItemCardHeader.tsx | 2 +- packages/theme/src/pageTheme.ts | 2 ++ packages/theme/src/themes.ts | 8 ++++++ packages/theme/src/types.ts | 7 +++++ 5 files changed, 20 insertions(+), 27 deletions(-) diff --git a/.changeset/serious-houses-watch.md b/.changeset/serious-houses-watch.md index 4da1466c1f..07c4e9eaf6 100644 --- a/.changeset/serious-houses-watch.md +++ b/.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 diff --git a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx b/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx index a34d773ce3..d9443ffc9a 100644 --- a/packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx +++ b/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', }, diff --git a/packages/theme/src/pageTheme.ts b/packages/theme/src/pageTheme.ts index ae81dc8534..1a5ea75394 100644 --- a/packages/theme/src/pageTheme.ts +++ b/packages/theme/src/pageTheme.ts @@ -52,6 +52,7 @@ export const colorVariants: Record = { eveningSea: ['#00FFF2', '#035355'], teal: ['#005B4B'], pinkSea: ['#C8077A', '#C2297D'], + greens: ['#4BB8A5', '#187656'], }; /** @@ -86,4 +87,5 @@ export const pageTheme: Record = { other: genPageTheme(colorVariants.darkGrey, shapes.wave), app: genPageTheme(colorVariants.toastyOrange, shapes.wave), apis: genPageTheme(colorVariants.teal, shapes.wave2), + card: genPageTheme(colorVariants.greens, shapes.wave), }; diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index e5551f7796..b048c70fec 100644 --- a/packages/theme/src/themes.ts +++ b/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%)', }, diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index ec71e6d090..566bffb2e4 100644 --- a/packages/theme/src/types.ts +++ b/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; }; From 4de88868b909a7a7c57262b96dd3f0b1dcb09741 Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Mon, 4 Apr 2022 07:59:37 -0500 Subject: [PATCH 04/11] Fixed MobileSidebar Signed-off-by: Andre Wanlin --- packages/core-components/src/layout/Sidebar/MobileSidebar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx index b51e3cbc0d..c85e6d11f2 100644 --- a/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx +++ b/packages/core-components/src/layout/Sidebar/MobileSidebar.tsx @@ -85,14 +85,14 @@ const useStyles = makeStyles( overlayHeader: { display: 'flex', - color: theme.palette.bursts.fontColor, + color: theme.palette.text.primary, alignItems: 'center', justifyContent: 'space-between', padding: theme.spacing(2, 3), }, overlayHeaderClose: { - color: theme.palette.bursts.fontColor, + color: theme.palette.text.primary, }, marginMobileSidebar: props => ({ From 322195ee4dcb92ca1cde6c2b5b19f466cade3b4b Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Mon, 4 Apr 2022 08:04:35 -0500 Subject: [PATCH 05/11] Updated API Report Signed-off-by: Andre Wanlin --- packages/theme/api-report.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 043d7d37ac..772e868635 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -53,6 +53,10 @@ export type BackstagePaletteAdditions = { }; bursts: { fontColor: string; + slackChannelText: string; + backgroundColor: { + default: string; + }; gradient: { linear: string; }; From 4298a0dc49aeac21a3709f982a0a67a78574fb70 Mon Sep 17 00:00:00 2001 From: Andre Wanlin <67169551+awanlin@users.noreply.github.com> Date: Sat, 18 Jun 2022 16:18:36 -0500 Subject: [PATCH 06/11] Changes based on feedback Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com> --- .changeset/serious-houses-watch.md | 2 +- .../src/layout/Header/Header.tsx | 8 ++-- packages/theme/src/pageTheme.ts | 47 +++++++++++++------ packages/theme/src/types.ts | 1 + .../EntityContextMenu/EntityContextMenu.tsx | 2 +- .../OwnershipCard/OwnershipCard.stories.tsx | 16 +++---- 6 files changed, 48 insertions(+), 28 deletions(-) diff --git a/.changeset/serious-houses-watch.md b/.changeset/serious-houses-watch.md index 07c4e9eaf6..d3f82850f0 100644 --- a/.changeset/serious-houses-watch.md +++ b/.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 diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx index bb4d19b949..2bb0bc6f6a 100644 --- a/packages/core-components/src/layout/Header/Header.tsx +++ b/packages/core-components/src/layout/Header/Header.tsx @@ -65,13 +65,13 @@ const useStyles = makeStyles( 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( 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', diff --git a/packages/theme/src/pageTheme.ts b/packages/theme/src/pageTheme.ts index 1a5ea75394..9d9e07fc93 100644 --- a/packages/theme/src/pageTheme.ts +++ b/packages/theme/src/pageTheme.ts @@ -64,12 +64,25 @@ 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(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 = { - 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 }), }; diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index 566bffb2e4..96b7c54f9b 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -164,4 +164,5 @@ export type PageTheme = { colors: string[]; shape: string; backgroundImage: string; + fontColor: string; }; diff --git a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx b/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx index db50eeab84..fc2ec8d864 100644 --- a/plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx +++ b/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, }, }; }, diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx index c07815f39e..fc050feb2a 100644 --- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx +++ b/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 }), }, }); From 593c0c0d3b2f64d74ad80879117d50262f964886 Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Sat, 12 Mar 2022 11:17:28 -0600 Subject: [PATCH 07/11] Removed properties from BackstagePaletteAdditions Signed-off-by: Andre Wanlin --- packages/theme/api-report.md | 4 ---- packages/theme/src/themes.ts | 8 -------- packages/theme/src/types.ts | 4 ---- 3 files changed, 16 deletions(-) diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 772e868635..043d7d37ac 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -53,10 +53,6 @@ export type BackstagePaletteAdditions = { }; bursts: { fontColor: string; - slackChannelText: string; - backgroundColor: { - default: string; - }; gradient: { linear: string; }; diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index b048c70fec..e5551f7796 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/themes.ts @@ -39,10 +39,6 @@ export const lightTheme = createTheme({ }, bursts: { fontColor: '#FEFEFE', - slackChannelText: '#ddd', - backgroundColor: { - default: '#7C3699', - }, gradient: { linear: 'linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)', }, @@ -116,10 +112,6 @@ export const darkTheme = createTheme({ }, bursts: { fontColor: '#FEFEFE', - slackChannelText: '#ddd', - backgroundColor: { - default: '#7C3699', - }, gradient: { linear: 'linear-gradient(-137deg, #4BB8A5 0%, #187656 100%)', }, diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index 96b7c54f9b..ed7e9fdd25 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -68,10 +68,6 @@ export type BackstagePaletteAdditions = { */ bursts: { fontColor: string; - slackChannelText: string; - backgroundColor: { - default: string; - }; gradient: { linear: string; }; From 1fa7f7448e89499dae91abd86387e0da86c4ae1c Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Tue, 15 Mar 2022 14:30:01 -0500 Subject: [PATCH 08/11] Suggested changes Signed-off-by: Andre Wanlin --- .changeset/serious-houses-watch.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/serious-houses-watch.md b/.changeset/serious-houses-watch.md index d3f82850f0..08979a5012 100644 --- a/.changeset/serious-houses-watch.md +++ b/.changeset/serious-houses-watch.md @@ -1,5 +1,5 @@ --- -'@backstage/theme': patch +'@backstage/theme': minor --- **DEPRECATED**: The `bursts` object from `BackstagePaletteAdditions` has been depreciated and will be removed in a future release From e1dbedbefca85fe709549bd91cf4d2c30f76c523 Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Mon, 28 Mar 2022 12:44:56 -0500 Subject: [PATCH 09/11] Changes based on feedback Signed-off-by: Andre Wanlin --- .changeset/serious-houses-watch.md | 2 +- packages/theme/src/themes.ts | 8 ++++++++ packages/theme/src/types.ts | 4 ++++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/.changeset/serious-houses-watch.md b/.changeset/serious-houses-watch.md index 08979a5012..d3f82850f0 100644 --- a/.changeset/serious-houses-watch.md +++ b/.changeset/serious-houses-watch.md @@ -1,5 +1,5 @@ --- -'@backstage/theme': minor +'@backstage/theme': patch --- **DEPRECATED**: The `bursts` object from `BackstagePaletteAdditions` has been depreciated and will be removed in a future release diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index e5551f7796..b048c70fec 100644 --- a/packages/theme/src/themes.ts +++ b/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%)', }, diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index ed7e9fdd25..96b7c54f9b 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -68,6 +68,10 @@ export type BackstagePaletteAdditions = { */ bursts: { fontColor: string; + slackChannelText: string; + backgroundColor: { + default: string; + }; gradient: { linear: string; }; From 6e20959b5a3fdc8e0a2297dcc7235df60239bd02 Mon Sep 17 00:00:00 2001 From: Andre Wanlin Date: Mon, 4 Apr 2022 08:04:35 -0500 Subject: [PATCH 10/11] Updated API Report Signed-off-by: Andre Wanlin --- packages/theme/api-report.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 043d7d37ac..772e868635 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -53,6 +53,10 @@ export type BackstagePaletteAdditions = { }; bursts: { fontColor: string; + slackChannelText: string; + backgroundColor: { + default: string; + }; gradient: { linear: string; }; From 385389d23c68aee51abe47159908107b6d02ba21 Mon Sep 17 00:00:00 2001 From: Andre Wanlin <67169551+awanlin@users.noreply.github.com> Date: Mon, 20 Jun 2022 14:23:17 -0500 Subject: [PATCH 11/11] Latest feedback updates Signed-off-by: Andre Wanlin <67169551+awanlin@users.noreply.github.com> --- .changeset/great-roses-pump.md | 2 +- .changeset/serious-houses-watch.md | 2 ++ .changeset/tricky-ravens-visit.md | 6 ++++++ packages/theme/api-report.md | 9 ++++++++- packages/theme/src/pageTheme.ts | 20 ++++++++++---------- 5 files changed, 27 insertions(+), 12 deletions(-) create mode 100644 .changeset/tricky-ravens-visit.md 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, };