diff --git a/.changeset/dry-spies-cover.md b/.changeset/dry-spies-cover.md
new file mode 100644
index 0000000000..7006dee5c4
--- /dev/null
+++ b/.changeset/dry-spies-cover.md
@@ -0,0 +1,6 @@
+---
+'@backstage/core-components': patch
+'@backstage/theme': patch
+---
+
+Will Add warning variant to `DismissableBanner` component.
diff --git a/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx b/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx
index a64514be61..e0e9a89c9f 100644
--- a/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx
+++ b/packages/core-components/src/components/DismissableBanner/DismissableBanner.stories.tsx
@@ -105,3 +105,14 @@ export const Fixed = () => (
);
+export const Warning = () => (
+
+);
diff --git a/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx b/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx
index 1213111c9d..40082925c6 100644
--- a/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx
+++ b/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx
@@ -79,12 +79,15 @@ const useStyles = makeStyles(
error: {
backgroundColor: theme.palette.banner.error,
},
+ warning: {
+ backgroundColor: theme.palette.banner.warning,
+ },
}),
{ name: 'BackstageDismissableBanner' },
);
type Props = {
- variant: 'info' | 'error';
+ variant: 'info' | 'error' | 'warning';
message: ReactNode;
id: string;
fixed?: boolean;
diff --git a/packages/theme/api-report.md b/packages/theme/api-report.md
index 72d7887214..30dcb7b040 100644
--- a/packages/theme/api-report.md
+++ b/packages/theme/api-report.md
@@ -64,6 +64,7 @@ export type BackstagePaletteAdditions = {
error: string;
text: string;
link: string;
+ warning: string;
};
};
diff --git a/packages/theme/src/themes.ts b/packages/theme/src/themes.ts
index 3eb1bcc252..7e99ce8e8a 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',
+ warning: '#FF9800',
},
border: '#E6E6E6',
textContrast: '#000000',
@@ -129,6 +130,7 @@ export const darkTheme = createTheme({
error: '#E22134',
text: '#FFFFFF',
link: '#000000',
+ warning: '#FF9800',
},
border: '#E6E6E6',
textContrast: '#FFFFFF',
diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts
index db3e89fa4b..40f45ee739 100644
--- a/packages/theme/src/types.ts
+++ b/packages/theme/src/types.ts
@@ -76,6 +76,7 @@ export type BackstagePaletteAdditions = {
error: string;
text: string;
link: string;
+ warning: string;
};
};