diff --git a/.changeset/shiny-crabs-flow.md b/.changeset/shiny-crabs-flow.md new file mode 100644 index 0000000000..627d1f12b5 --- /dev/null +++ b/.changeset/shiny-crabs-flow.md @@ -0,0 +1,6 @@ +--- +'@backstage/core-components': minor +'@backstage/theme': minor +--- + +Allow closeButton color in DismissableBanner to be configurable (via. theme.palette.banner.closeButtonColor) diff --git a/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx b/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx index c18f9b605f..186f38a111 100644 --- a/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx +++ b/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx @@ -73,6 +73,9 @@ const useStyles = makeStyles( color: theme.palette.banner.link, }, }, + button: { + color: theme.palette.banner.closeButtonColor, + }, info: { backgroundColor: theme.palette.banner.info, }, @@ -144,7 +147,7 @@ export const DismissableBanner = (props: Props) => { diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md index 92958c9c7e..60566266c7 100644 --- a/packages/theme/api-report.md +++ b/packages/theme/api-report.md @@ -70,6 +70,7 @@ export type BackstagePaletteAdditions = { error: string; text: string; link: string; + closeButtonColor: string; warning?: string; }; }; diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts index b048c70fec..eb2ef7ce41 100644 --- a/packages/theme/src/themes.ts +++ b/packages/theme/src/themes.ts @@ -55,6 +55,7 @@ export const lightTheme = createTheme({ error: '#E22134', text: '#FFFFFF', link: '#000000', + closeButtonColor: '#FFFFFF', warning: '#FF9800', }, border: '#E6E6E6', @@ -136,6 +137,7 @@ export const darkTheme = createTheme({ error: '#E22134', text: '#FFFFFF', link: '#000000', + closeButtonColor: '#FFFFFF', warning: '#FF9800', }, border: '#E6E6E6', diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts index 96b7c54f9b..ff5dce9e8b 100644 --- a/packages/theme/src/types.ts +++ b/packages/theme/src/types.ts @@ -85,6 +85,7 @@ export type BackstagePaletteAdditions = { error: string; text: string; link: string; + closeButtonColor: string; warning?: string; }; };