From 305f4edf008e4d99017c404850f3cd7723aed7a9 Mon Sep 17 00:00:00 2001
From: Patrik Oldsberg <poldsberg@gmail.com>
Date: Tue, 17 Mar 2026 14:08:36 +0100
Subject: [PATCH] Fix toast surface tokens for current BUI theme

Update the toast surface and interaction styles to use the current overlay token set so notifications render with the intended background and focus treatment after the BUI token changes.

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
Made-with: Cursor
---
 .../app/src/components/Toast/Toast.module.css | 33 +++++-----
 plugins/app/src/components/Toast/Toast.tsx    | 63 +++++++++++--------
 2 files changed, 54 insertions(+), 42 deletions(-)

diff --git a/plugins/app/src/components/Toast/Toast.module.css b/plugins/app/src/components/Toast/Toast.module.css
index eeb6e92084..4111ce9c23 100644
--- a/plugins/app/src/components/Toast/Toast.module.css
+++ b/plugins/app/src/components/Toast/Toast.module.css
@@ -45,16 +45,7 @@
   width: 100%;
   margin: 0 auto;
   box-sizing: border-box;
-  display: flex;
-  align-items: flex-start;
-  padding: var(--bui-space-4);
-  gap: var(--bui-space-3);
 
-  /* Appearance */
-  border-radius: var(--bui-radius-3);
-  background-color: var(--bui-bg-surface-1);
-  font-family: var(--bui-font-regular);
-  font-size: var(--bui-font-size-3);
   outline: none;
   cursor: default;
   user-select: none;
@@ -64,13 +55,25 @@
   /* Stacking */
   z-index: calc(1000 - var(--toast-index));
   transform-origin: bottom center;
+}
 
-  /* Shadow */
-  box-shadow: 0 4px 12px -2px rgba(0 0 0 / 0.4);
+.surface {
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  padding: var(--bui-space-4);
+  gap: var(--bui-space-3);
+  border-radius: var(--bui-radius-3);
+  font-size: var(--bui-font-size-3);
+  background-color: var(--bui-bg-app);
+  border: 1px solid var(--bui-border-1);
+  color: var(--bui-fg-primary);
+  box-shadow: var(--bui-shadow);
 }
 
 .toast:focus-visible {
-  outline: 2px solid var(--bui-border-focus);
+  outline: 2px solid var(--bui-ring);
   outline-offset: 2px;
 }
 
@@ -211,14 +214,14 @@
 }
 
 .closeButton:hover {
-  background-color: var(--bui-bg-neutral-on-surface-1-hover);
+  background-color: var(--bui-bg-neutral-1-hover);
 }
 
 .closeButton:focus-visible {
-  outline: 2px solid var(--bui-border-focus);
+  outline: 2px solid var(--bui-ring);
   outline-offset: 1px;
 }
 
 .closeButton:active {
-  background-color: var(--bui-bg-neutral-on-surface-1-pressed);
+  background-color: var(--bui-bg-neutral-1-pressed);
 }
diff --git a/plugins/app/src/components/Toast/Toast.tsx b/plugins/app/src/components/Toast/Toast.tsx
index 331a53958a..3f81629c38 100644
--- a/plugins/app/src/components/Toast/Toast.tsx
+++ b/plugins/app/src/components/Toast/Toast.tsx
@@ -18,6 +18,7 @@ import { forwardRef, Ref, useRef, useLayoutEffect, useState } from 'react';
 import { useToast } from '@react-aria/toast';
 import { useButton } from '@react-aria/button';
 import { motion } from 'motion/react';
+import { Box } from '@backstage/ui';
 import {
   RiInformationLine,
   RiCheckLine,
@@ -27,6 +28,8 @@ import {
 } from '@remixicon/react';
 import type { ToastApiMessageProps } from './types';
 import styles from './Toast.module.css';
+// eslint-disable-next-line @backstage/no-relative-monorepo-imports
+import { BgReset } from '../../../../../packages/ui/src/hooks/useBg';
 
 // Track which toasts are being manually closed (vs auto-timeout)
 // This allows different exit animations for each case
@@ -225,34 +228,40 @@ export const Toast = forwardRef(
         transition={{ type: 'spring', stiffness: 400, damping: 35 }}
         data-status={finalStatus}
       >
-        <div className={styles.wrapper}>
-          {statusIcon && <div className={styles.icon}>{statusIcon}</div>}
-          <div className={styles.content}>
-            <div {...titleProps} className={styles.title}>
-              {content.title}
-            </div>
-            {content.description && (
-              <div className={styles.description}>{content.description}</div>
-            )}
-            {content.links && content.links.length > 0 && (
-              <div className={styles.links}>
-                {content.links.map(link => (
-                  <a key={link.href} href={link.href}>
-                    {link.label}
-                  </a>
-                ))}
+        <BgReset>
+          <Box className={styles.surface}>
+            <div className={styles.wrapper}>
+              {statusIcon && <div className={styles.icon}>{statusIcon}</div>}
+              <div className={styles.content}>
+                <div {...titleProps} className={styles.title}>
+                  {content.title}
+                </div>
+                {content.description && (
+                  <div className={styles.description}>
+                    {content.description}
+                  </div>
+                )}
+                {content.links && content.links.length > 0 && (
+                  <div className={styles.links}>
+                    {content.links.map(link => (
+                      <a key={link.href} href={link.href}>
+                        {link.label}
+                      </a>
+                    ))}
+                  </div>
+                )}
               </div>
-            )}
-          </div>
-        </div>
-        {/* eslint-disable-next-line react/forbid-elements */}
-        <button
-          {...buttonProps}
-          ref={closeButtonRef}
-          className={styles.closeButton}
-        >
-          <RiCloseLine aria-hidden="true" />
-        </button>
+            </div>
+            {/* eslint-disable-next-line react/forbid-elements */}
+            <button
+              {...buttonProps}
+              ref={closeButtonRef}
+              className={styles.closeButton}
+            >
+              <RiCloseLine aria-hidden="true" />
+            </button>
+          </Box>
+        </BgReset>
       </motion.div>
     );
   },