From 3323df40e838663d03f9afb78412e42df22e048b Mon Sep 17 00:00:00 2001
From: Bob Lee <liwenbo628@gmail.com>
Date: Sat, 29 Aug 2026 09:57:07 +0800
Subject: [PATCH] fix(flow-chat): make composer context background opaque

---
 .../packages/ui/src/flow-chat/composer/ChatComposer.meta.ts  | 1 -
 .../ui/src/flow-chat/composer/ChatComposer.module.css        | 2 +-
 design-system/packages/ui/tests/chat-composer.test.mjs       | 5 ++++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/design-system/packages/ui/src/flow-chat/composer/ChatComposer.meta.ts b/design-system/packages/ui/src/flow-chat/composer/ChatComposer.meta.ts
index 0f18b8714f..09c43ce6fe 100644
--- a/design-system/packages/ui/src/flow-chat/composer/ChatComposer.meta.ts
+++ b/design-system/packages/ui/src/flow-chat/composer/ChatComposer.meta.ts
@@ -22,7 +22,6 @@ export const chatComposerMeta = {
     "color.border.default",
     "color.content.primary",
     "color.surface.panel",
-    "color.surface.subtle",
     "control.chatComposer.compactGap",
     "control.chatComposer.compactHeight",
     "control.chatComposer.compactPaddingBlock",
diff --git a/design-system/packages/ui/src/flow-chat/composer/ChatComposer.module.css b/design-system/packages/ui/src/flow-chat/composer/ChatComposer.module.css
index fd822ce62e..f154805f94 100644
--- a/design-system/packages/ui/src/flow-chat/composer/ChatComposer.module.css
+++ b/design-system/packages/ui/src/flow-chat/composer/ChatComposer.module.css
@@ -11,7 +11,7 @@
   }
 
   .root[data-has-context="true"] {
-    background: var(--bf-color-surface-subtle);
+    background: var(--bf-color-surface-panel);
   }
 
   .context {
diff --git a/design-system/packages/ui/tests/chat-composer.test.mjs b/design-system/packages/ui/tests/chat-composer.test.mjs
index 018686a0ad..2891d34e4e 100644
--- a/design-system/packages/ui/tests/chat-composer.test.mjs
+++ b/design-system/packages/ui/tests/chat-composer.test.mjs
@@ -92,8 +92,11 @@ test("ChatComposer geometry is driven by public system and semantic tokens", asy
   assert.match(styles, /--bf-control-chat-composer-control-height/);
   assert.match(styles, /--bf-space-8/);
   assert.match(styles, /--bf-radius-2xl/);
-  assert.match(styles, /--bf-color-surface-subtle/);
   assert.match(styles, /--bf-color-surface-panel/);
+  assert.match(
+    styles,
+    /\.\w+\[data-has-context=(?:"true"|true)\][^{]*\{[^}]*background:\s*var\(--bf-color-surface-panel\)/,
+  );
   assert.match(styles, /--bf-color-action-neutral-border/);
   assert.match(styles, /--bf-shadow-base/);
   assert.match(