From adec425353bdd90cc2225d8d562857bf51bba758 Mon Sep 17 00:00:00 2001
From: brsbl <57682038+brsbl@users.noreply.github.com>
Date: Thu, 27 Aug 2026 06:52:08 +0000
Subject: [PATCH] Lower composer control emphasis

---
 .../pickers/ModelReasoningPicker.test.tsx          | 14 ++++++++++++++
 .../components/pickers/ModelReasoningPicker.tsx    |  5 ++++-
 .../promptbox/FollowUpPromptBox.stories.tsx        | 12 +++++++++---
 .../promptbox/PromptBoxActionsMenu.test.tsx        |  7 +++----
 .../components/promptbox/PromptBoxActionsMenu.tsx  |  2 ++
 .../promptbox/PromptBoxInternal.test.tsx           |  8 +++++---
 .../src/components/promptbox/PromptBoxInternal.tsx |  3 ++-
 7 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/apps/app/src/components/pickers/ModelReasoningPicker.test.tsx b/apps/app/src/components/pickers/ModelReasoningPicker.test.tsx
index 0722fd60b9..12951966b2 100644
--- a/apps/app/src/components/pickers/ModelReasoningPicker.test.tsx
+++ b/apps/app/src/components/pickers/ModelReasoningPicker.test.tsx
@@ -159,6 +159,7 @@ function renderPicker({
   modelLoadError = null,
   compact = false,
   splitPane = false,
+  muted = false,
 }: {
   onSelectedProviderChange?: ((value: string) => void) | null;
   onModelChange?: (value: string) => void;
@@ -176,6 +177,7 @@ function renderPicker({
   modelLoadError?: SystemExecutionOptionsModelLoadError | null;
   compact?: boolean;
   splitPane?: boolean;
+  muted?: boolean;
 } = {}) {
   const { queryClient, wrapper } = createQueryClientTestHarness();
   queryClient.setQueryData(
@@ -215,6 +217,7 @@ function renderPicker({
         fastModeEnabled={false}
         onFastModeChange={vi.fn()}
         showFastModeToggle={false}
+        muted={muted}
         modal={false}
       />
       <button type="button">Composer action</button>
@@ -248,6 +251,17 @@ afterEach(() => {
 });
 
 describe("ModelReasoningPicker", () => {
+  it("uses the lower-emphasis chrome token for the composer caret", () => {
+    renderPicker({ muted: true });
+
+    const trigger = screen.getByRole("button", {
+      name: "Provider, model and reasoning",
+    });
+    expect(
+      trigger.querySelector('[data-icon="ChevronDown"]')?.classList,
+    ).toContain("text-subtle-foreground/75");
+  });
+
   it("gives a non-SVG provider mark the same 16px trigger size as button SVGs", () => {
     renderPicker({
       pickerProviderOptions: [
diff --git a/apps/app/src/components/pickers/ModelReasoningPicker.tsx b/apps/app/src/components/pickers/ModelReasoningPicker.tsx
index 08f99cfb71..e6ae8a0dfc 100644
--- a/apps/app/src/components/pickers/ModelReasoningPicker.tsx
+++ b/apps/app/src/components/pickers/ModelReasoningPicker.tsx
@@ -855,7 +855,10 @@ export function ModelReasoningPicker({
       {disabled ? null : (
         <Icon
           name="ChevronDown"
-          className="size-3.5 shrink-0 text-muted-foreground"
+          className={cn(
+            "size-3.5 shrink-0",
+            muted ? "text-subtle-foreground/75" : "text-muted-foreground",
+          )}
         />
       )}
       <AppCommandShortcutHint
diff --git a/apps/app/src/components/promptbox/FollowUpPromptBox.stories.tsx b/apps/app/src/components/promptbox/FollowUpPromptBox.stories.tsx
index 9b575e44f7..b00fc08336 100644
--- a/apps/app/src/components/promptbox/FollowUpPromptBox.stories.tsx
+++ b/apps/app/src/components/promptbox/FollowUpPromptBox.stories.tsx
@@ -30,9 +30,7 @@ import {
   getFollowUpPromptPlaceholder,
   getCompactFollowUpPromptPlaceholder,
 } from "@/components/promptbox/follow-up-placeholder";
-import {
-  getEnvironmentWorkspaceSummaryDisplay,
-} from "@/lib/environment-workspace-display";
+import { getEnvironmentWorkspaceSummaryDisplay } from "@/lib/environment-workspace-display";
 import {
   INERT_TYPEAHEAD_COMMAND_CONFIG,
   type AttachmentsConfig,
@@ -848,6 +846,14 @@ function StackedCardsWithPillsRow() {
   );
 }
 
+export function ControlEmphasis() {
+  return (
+    <div className="mx-auto flex min-h-[28rem] w-full max-w-3xl items-end p-4">
+      <Row submitMode={{ kind: "ready" }} />
+    </div>
+  );
+}
+
 export function Overview() {
   return (
     <StoryCard>
diff --git a/apps/app/src/components/promptbox/PromptBoxActionsMenu.test.tsx b/apps/app/src/components/promptbox/PromptBoxActionsMenu.test.tsx
index 76661136fb..e9363d6e46 100644
--- a/apps/app/src/components/promptbox/PromptBoxActionsMenu.test.tsx
+++ b/apps/app/src/components/promptbox/PromptBoxActionsMenu.test.tsx
@@ -43,10 +43,9 @@ describe("PromptBoxActionsMenu", () => {
     const onAttach = vi.fn();
     render(<PromptBoxActionsMenu onAction={() => {}} onAttach={onAttach} />);
 
-    fireEvent.pointerDown(
-      screen.getByRole("button", { name: "Prompt actions" }),
-      { button: 0 },
-    );
+    const trigger = screen.getByRole("button", { name: "Prompt actions" });
+    expect(trigger.classList).toContain("text-subtle-foreground/75");
+    fireEvent.pointerDown(trigger, { button: 0 });
     fireEvent.click(
       await screen.findByRole("menuitem", { name: "Attach files" }),
     );
diff --git a/apps/app/src/components/promptbox/PromptBoxActionsMenu.tsx b/apps/app/src/components/promptbox/PromptBoxActionsMenu.tsx
index c90e48e91b..a6a94b4fd3 100644
--- a/apps/app/src/components/promptbox/PromptBoxActionsMenu.tsx
+++ b/apps/app/src/components/promptbox/PromptBoxActionsMenu.tsx
@@ -17,6 +17,7 @@ import { useResolvedComposerPlusMenuItems } from "@/components/plugin/composer-s
 import { useOptionalPluginComposerView } from "@/components/plugin/plugin-composer-host";
 import { Icon, type IconName } from "@bb/shared-ui/icon";
 import { COARSE_POINTER_PROMPT_ICON_ACTION_BUTTON_CLASS } from "@bb/shared-ui/coarse-pointer-sizing";
+import { CHROME_SUBTLE_ICON_BUTTON_FOREGROUND_CLASS } from "@bb/shared-ui/chrome-style-tokens";
 import { CREATE_PLUGIN_PROMPT } from "@bb/client-core";
 import type { ProviderPromptActionCommand } from "@bb/client-core";
 
@@ -181,6 +182,7 @@ export function PromptBoxActionsMenu({
           aria-label="Prompt actions"
           className={cn(
             COARSE_POINTER_PROMPT_ICON_ACTION_BUTTON_CLASS,
+            CHROME_SUBTLE_ICON_BUTTON_FOREGROUND_CLASS,
             "-ml-1.5",
           )}
         >
diff --git a/apps/app/src/components/promptbox/PromptBoxInternal.test.tsx b/apps/app/src/components/promptbox/PromptBoxInternal.test.tsx
index 8df62039a1..90bf8b10d0 100644
--- a/apps/app/src/components/promptbox/PromptBoxInternal.test.tsx
+++ b/apps/app/src/components/promptbox/PromptBoxInternal.test.tsx
@@ -1648,9 +1648,11 @@ describe("PromptBoxInternal size controls", () => {
     expect(
       screen.queryByRole("button", { name: /Make prompt box/u }),
     ).toBeNull();
-    fireEvent.click(
-      screen.getByRole("button", { name: "Collapse prompt box" }),
-    );
+    const collapseButton = screen.getByRole("button", {
+      name: "Collapse prompt box",
+    });
+    expect(collapseButton.classList).toContain("text-subtle-foreground/75");
+    fireEvent.click(collapseButton);
 
     expect(onCollapse).toHaveBeenCalledOnce();
     expect(document.activeElement).not.toBe(getPromptEditorElement());
diff --git a/apps/app/src/components/promptbox/PromptBoxInternal.tsx b/apps/app/src/components/promptbox/PromptBoxInternal.tsx
index 940d37723f..daef24a565 100644
--- a/apps/app/src/components/promptbox/PromptBoxInternal.tsx
+++ b/apps/app/src/components/promptbox/PromptBoxInternal.tsx
@@ -68,6 +68,7 @@ import {
   COARSE_POINTER_PROMPT_ACTION_BUTTON_CLASS,
   COARSE_POINTER_PROMPT_ICON_ACTION_BUTTON_CLASS,
 } from "@bb/shared-ui/coarse-pointer-sizing";
+import { CHROME_SUBTLE_ICON_BUTTON_FOREGROUND_CLASS } from "@bb/shared-ui/chrome-style-tokens";
 import { usePointerCoarse } from "@bb/shared-ui/hooks/use-pointer-coarse";
 import {
   getMediaQuerySnapshot,
@@ -3030,7 +3031,7 @@ export function PromptBoxInternal({
                       onClick={collapsePromptBox}
                       aria-label="Collapse prompt box"
                       className={cn(
-                        "text-subtle-foreground hover:text-muted-foreground",
+                        CHROME_SUBTLE_ICON_BUTTON_FOREGROUND_CLASS,
                         COARSE_POINTER_PROMPT_ICON_ACTION_BUTTON_CLASS,
                       )}
                     >