diff --git a/.changeset/plenty-monkeys-share.md b/.changeset/plenty-monkeys-share.md
index 11c8d0a0fa..214b0e8546 100644
--- a/.changeset/plenty-monkeys-share.md
+++ b/.changeset/plenty-monkeys-share.md
@@ -2,6 +2,13 @@
'@backstage/ui': patch
---
-Added new `Alert` component with support for status variants, icons, loading states, and custom actions.
+Added new `Alert` component with support for status variants (info, success, warning, danger), icons, loading states, and custom actions.
+
+Updated status color tokens for improved contrast and consistency across light and dark themes:
+
+- Added new `--bui-bg-info` and `--bui-fg-info` tokens for info status
+- Updated `--bui-bg-danger`, `--bui-fg-danger` tokens
+- Updated `--bui-bg-warning`, `--bui-fg-warning` tokens
+- Updated `--bui-bg-success`, `--bui-fg-success` tokens
**Affected components**: Alert
diff --git a/packages/ui/src/components/Alert/Alert.module.css b/packages/ui/src/components/Alert/Alert.module.css
index 182aeec105..643a7d09b0 100644
--- a/packages/ui/src/components/Alert/Alert.module.css
+++ b/packages/ui/src/components/Alert/Alert.module.css
@@ -25,7 +25,6 @@
gap: var(--bui-space-6);
padding: var(--bui-space-3) var(--bui-space-3);
border-radius: var(--bui-radius-3);
- border: 1px solid var(--alert-border);
font-family: var(--bui-font-regular);
font-size: var(--bui-font-size-3);
line-height: 1.5;
diff --git a/packages/ui/src/components/Alert/Alert.stories.tsx b/packages/ui/src/components/Alert/Alert.stories.tsx
index d223d01a30..a81337fe71 100644
--- a/packages/ui/src/components/Alert/Alert.stories.tsx
+++ b/packages/ui/src/components/Alert/Alert.stories.tsx
@@ -145,12 +145,12 @@ export const CustomIcon = meta.story({
}
+ icon={}
title="This alert uses a custom cloud icon instead of the default info icon."
/>
}
+ icon={}
title="Custom icons work with any status variant."
/>
diff --git a/packages/ui/src/components/Alert/Alert.tsx b/packages/ui/src/components/Alert/Alert.tsx
index 5dfac37409..54eb9cffae 100644
--- a/packages/ui/src/components/Alert/Alert.tsx
+++ b/packages/ui/src/components/Alert/Alert.tsx
@@ -14,8 +14,6 @@
* limitations under the License.
*/
-'use client';
-
import { forwardRef, Ref, isValidElement, ReactElement } from 'react';
import { ProgressBar } from 'react-aria-components';
import {
@@ -107,14 +105,14 @@ export const Alert = forwardRef(
if (icon === true) {
switch (status) {
case 'success':
- return ;
+ return ;
case 'warning':
- return ;
+ return ;
case 'danger':
- return ;
+ return ;
case 'info':
default:
- return ;
+ return ;
}
}
@@ -129,9 +127,9 @@ export const Alert = forwardRef(
className={classes.root}
ref={ref}
style={{ ...style, ...utilityStyle }}
- data-has-description={description ? 'true' : 'false'}
{...dataAttributes}
{...restProps}
+ data-has-description={description ? 'true' : 'false'}
>
{loading ? (
diff --git a/packages/ui/src/components/Alert/types.ts b/packages/ui/src/components/Alert/types.ts
index 70d4d7fd90..b21fd6aa8c 100644
--- a/packages/ui/src/components/Alert/types.ts
+++ b/packages/ui/src/components/Alert/types.ts
@@ -18,7 +18,7 @@ import type { ReactElement, ReactNode, CSSProperties } from 'react';
import type {
ContainerSurfaceProps,
Responsive,
- SpaceProps,
+ MarginProps,
} from '../../types';
/** @public */
@@ -38,4 +38,4 @@ export type AlertOwnProps = ContainerSurfaceProps & {
*
* @public
*/
-export interface AlertProps extends SpaceProps, AlertOwnProps {}
+export interface AlertProps extends MarginProps, AlertOwnProps {}
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index 75a823d035..0b23dfd10e 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -92,7 +92,7 @@ export type Columns =
| 'auto';
/** @public */
-export interface SpaceProps {
+export interface MarginProps {
m?: Responsive;
mb?: Responsive;
ml?: Responsive;
@@ -100,6 +100,10 @@ export interface SpaceProps {
mt?: Responsive;
mx?: Responsive;
my?: Responsive;
+}
+
+/** @public */
+export interface PaddingProps {
p?: Responsive;
pb?: Responsive;
pl?: Responsive;
@@ -109,6 +113,9 @@ export interface SpaceProps {
py?: Responsive;
}
+/** @public */
+export interface SpaceProps extends MarginProps, PaddingProps {}
+
/** @public */
export type TextVariants =
| 'title-large'