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

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);
 }

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>
     );
   },