From 89546d52d8f0c9f7c57c7461b846aaa994526b3d Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Mon, 26 Jan 2026 18:58:15 +0000
Subject: [PATCH] Cleaning up props and types on Alert

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
---
 .changeset/plenty-monkeys-share.md                 |  9 ++++++++-
 packages/ui/src/components/Alert/Alert.module.css  |  1 -
 packages/ui/src/components/Alert/Alert.stories.tsx |  4 ++--
 packages/ui/src/components/Alert/Alert.tsx         | 12 +++++-------
 packages/ui/src/components/Alert/types.ts          |  4 ++--
 packages/ui/src/types.ts                           |  9 ++++++++-
 6 files changed, 25 insertions(+), 14 deletions(-)

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({
     <Flex direction="column" gap="4">
       <Alert
         status="info"
-        icon={<RiCloudLine />}
+        icon={<RiCloudLine aria-hidden="true" />}
         title="This alert uses a custom cloud icon instead of the default info icon."
       />
       <Alert
         status="success"
-        icon={<RiCloudLine />}
+        icon={<RiCloudLine aria-hidden="true" />}
         title="Custom icons work with any status variant."
       />
     </Flex>
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 <RiCheckLine />;
+            return <RiCheckLine aria-hidden="true" />;
           case 'warning':
-            return <RiErrorWarningLine />;
+            return <RiErrorWarningLine aria-hidden="true" />;
           case 'danger':
-            return <RiAlertLine />;
+            return <RiAlertLine aria-hidden="true" />;
           case 'info':
           default:
-            return <RiInformationLine />;
+            return <RiInformationLine aria-hidden="true" />;
         }
       }
 
@@ -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'}
       >
         <div className={classes.contentWrapper}>
           {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<Space>;
   mb?: Responsive<Space>;
   ml?: Responsive<Space>;
@@ -100,6 +100,10 @@ export interface SpaceProps {
   mt?: Responsive<Space>;
   mx?: Responsive<Space>;
   my?: Responsive<Space>;
+}
+
+/** @public */
+export interface PaddingProps {
   p?: Responsive<Space>;
   pb?: Responsive<Space>;
   pl?: Responsive<Space>;
@@ -109,6 +113,9 @@ export interface SpaceProps {
   py?: Responsive<Space>;
 }
 
+/** @public */
+export interface SpaceProps extends MarginProps, PaddingProps {}
+
 /** @public */
 export type TextVariants =
   | 'title-large'