From eb8a55c59fcf6665e036d1a2b41865daf3335be0 Mon Sep 17 00:00:00 2001
From: vkpdeveloper <vaibhavpathak9984@gmail.com>
Date: Tue, 27 Oct 2026 00:40:11 +0530
Subject: [PATCH] fix(web): New design dark mode puts emphasis on what matters

In the New design's dark theme, secondary text often outranked primary
text: bold labels read dimmer than body copy, settings sections dimmer than
their descriptions, zero counts and passing checks in alert colors, and
open panel toggles looked the same as closed ones.

Re-rank those surfaces so emphasis follows importance. All changes are
scoped to the New design.
---
 apps/web/src/components/ChatMarkdown.tsx      |  2 +-
 .../src/components/chat/ComposerControl.tsx   |  2 +-
 .../web/src/components/chat/DiffStatLabel.tsx | 16 +++++++--
 .../chat/threadDetailsPanelStyles.ts          |  2 +-
 .../pullRequest/PullRequestChecksPopover.tsx  |  9 ++++-
 .../pullRequest/PullRequestListGroups.tsx     |  6 ++--
 .../pullRequest/pullRequestPresentation.tsx   | 15 +++++++--
 .../settings/SettingsSidebarNav.tsx           |  2 +-
 .../components/sidebar/SidebarThreadRow.tsx   |  6 ++--
 apps/web/src/index.css                        | 33 +++++++++++++++++--
 apps/web/src/lib/diffRendering.ts             |  5 +++
 11 files changed, 82 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index e5691c8cbd35e..10d92a4be6f38 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -1628,7 +1628,7 @@ function ChatMarkdown({
       className={cn(
         "chat-markdown w-full min-w-0 [overflow-wrap:anywhere] [word-break:break-word]",
         !inline &&
-          "text-sm leading-relaxed text-foreground/[calc(90%+var(--appearance-contrast-boost)/10)]",
+          "text-sm leading-relaxed text-foreground/[calc(90%+var(--appearance-contrast-boost)/10)] redesign:dark:text-foreground/[calc(80%+var(--appearance-contrast-boost)/10)]",
         className,
       )}
       data-streaming={componentState.isStreaming ? "" : undefined}
diff --git a/apps/web/src/components/chat/ComposerControl.tsx b/apps/web/src/components/chat/ComposerControl.tsx
index 6f1824fd72642..5e9441ba2f3bd 100644
--- a/apps/web/src/components/chat/ComposerControl.tsx
+++ b/apps/web/src/components/chat/ComposerControl.tsx
@@ -15,7 +15,7 @@ function composerControlClassName(size: ComposerControlSize, className?: string)
     "[&_:is([data-composer-control-label],[data-chat-provider-model-picker-label])]:[text-box:trim-both_cap_alphabetic] supports-[text-box:trim-both_cap_alphabetic]:[&_:is([data-composer-control-label],[data-chat-provider-model-picker-label])]:py-1.5",
     size === "xs"
       ? "h-7 gap-1 px-1.75 font-normal text-foreground/70 text-sm hover:text-foreground dark:text-muted-foreground sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5 [&_svg[data-composer-control-chevron]]:ms-0 [&_svg[data-composer-control-chevron]]:-me-1"
-      : "h-7 gap-1.5 px-2 font-medium text-foreground/80 [&_svg:not([class*='text-'])]:text-muted-foreground hover:text-foreground sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4",
+      : "h-7 gap-1.5 px-2 font-medium text-foreground/80 redesign:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground hover:text-foreground sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4",
     "aria-pressed:bg-accent aria-pressed:text-accent-foreground aria-pressed:hover:bg-accent/80",
     className,
   );
diff --git a/apps/web/src/components/chat/DiffStatLabel.tsx b/apps/web/src/components/chat/DiffStatLabel.tsx
index 7f759a87eade5..5c971e83f0cae 100644
--- a/apps/web/src/components/chat/DiffStatLabel.tsx
+++ b/apps/web/src/components/chat/DiffStatLabel.tsx
@@ -40,10 +40,22 @@ export const DiffStatLabel = memo(function DiffStatLabel(props: {
           className,
         )}
       >
-        <span aria-hidden="true" className="font-mono text-diff-addition-foreground">
+        <span
+          aria-hidden="true"
+          className={cn(
+            "font-mono text-diff-addition-foreground",
+            additions === 0 && "redesign:text-muted-foreground/60",
+          )}
+        >
           +{formatCompactDiffCount(additions)}
         </span>
-        <span aria-hidden="true" className="font-mono text-diff-deletion-foreground">
+        <span
+          aria-hidden="true"
+          className={cn(
+            "font-mono text-diff-deletion-foreground",
+            deletions === 0 && "redesign:text-muted-foreground/60",
+          )}
+        >
           -{formatCompactDiffCount(deletions)}
         </span>
       </span>
diff --git a/apps/web/src/components/chat/threadDetailsPanelStyles.ts b/apps/web/src/components/chat/threadDetailsPanelStyles.ts
index a666427982f33..bf616de25c207 100644
--- a/apps/web/src/components/chat/threadDetailsPanelStyles.ts
+++ b/apps/web/src/components/chat/threadDetailsPanelStyles.ts
@@ -15,7 +15,7 @@ export const THREAD_DETAILS_PANEL_ROW_CONTENT_CLASS = "gap-2.5 px-2.5 text-left"
 export const THREAD_DETAILS_PANEL_LABEL_CLASS =
   "[text-box:trim-both_cap_alphabetic] overflow-x-clip overflow-y-visible";
 
-const THREAD_DETAILS_PANEL_CONTROL_CLASS = `h-8 min-w-0 rounded-lg border-transparent ${THREAD_DETAILS_PANEL_ROW_CONTENT_CLASS} text-[13px] font-medium text-foreground/80`;
+const THREAD_DETAILS_PANEL_CONTROL_CLASS = `h-8 min-w-0 rounded-lg border-transparent ${THREAD_DETAILS_PANEL_ROW_CONTENT_CLASS} text-[13px] font-medium text-foreground/80 redesign:text-muted-foreground redesign:hover:text-foreground`;
 
 export const THREAD_DETAILS_PANEL_ROW_CLASS = `${THREAD_DETAILS_PANEL_CONTROL_CLASS} w-full justify-start ${THREAD_DETAILS_PANEL_ROW_SURFACE_CLASS}`;
 
diff --git a/apps/web/src/components/pullRequest/PullRequestChecksPopover.tsx b/apps/web/src/components/pullRequest/PullRequestChecksPopover.tsx
index cfcea204a56ee..d68f9575cc75c 100644
--- a/apps/web/src/components/pullRequest/PullRequestChecksPopover.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestChecksPopover.tsx
@@ -9,6 +9,7 @@ import type {
 import { useState } from "react";
 
 import { useOpenLink } from "~/browser/useOpenLink";
+import { useClientSettings } from "~/hooks/useSettings";
 import { cn } from "~/lib/utils";
 import { pullRequestEnvironment } from "~/state/pullRequests";
 import { useEnvironmentQuery } from "~/state/query";
@@ -149,6 +150,12 @@ export function PullRequestChecksPopover({
   render?: React.ReactElement;
 }) {
   const presentation = pullRequestChecksStatePresentation(checksState);
+  const redesign = useClientSettings((s) => s.redesignEnabled);
+  // The bare glyph sits beside the green open-state icon and diff stat; passing is the quiet case.
+  const toneClassName =
+    redesign && variant === "icon" && checksState === "passing"
+      ? "text-muted-foreground"
+      : presentation.toneClassName;
   const incompleteCount =
     checks?.filter((check) => check.status === "pending" || check.status === "action-required")
       .length ?? 0;
@@ -178,7 +185,7 @@ export function PullRequestChecksPopover({
         }
         onClick={(event) => event.stopPropagation()}
       >
-        <presentation.Icon aria-hidden className={cn("size-3.5", presentation.toneClassName)} />
+        <presentation.Icon aria-hidden className={cn("size-3.5", toneClassName)} />
         {variant === "count" ? (
           <>
             {checks !== undefined && incompleteCount > 0 ? (
diff --git a/apps/web/src/components/pullRequest/PullRequestListGroups.tsx b/apps/web/src/components/pullRequest/PullRequestListGroups.tsx
index 7e8c4e3a26f10..712acbf40d578 100644
--- a/apps/web/src/components/pullRequest/PullRequestListGroups.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestListGroups.tsx
@@ -31,10 +31,12 @@ function PullRequestGroupHeader({
 }) {
   const Icon = GROUP_ICONS[group.key] ?? LayersIcon;
   return (
-    <div className="flex items-center gap-2 px-3 pb-1 text-xs font-medium text-muted-foreground/70">
+    <div className="flex items-center gap-2 px-3 pb-1 text-xs font-medium text-muted-foreground/70 redesign:text-muted-foreground">
       <Icon aria-hidden className="size-3.5 shrink-0" />
       <h2 className="shrink-0">{group.label}</h2>
-      <span className="shrink-0 tabular-nums text-muted-foreground/50">{group.entries.length}</span>
+      <span className="shrink-0 tabular-nums text-muted-foreground/50 redesign:font-normal redesign:text-muted-foreground/75">
+        {group.entries.length}
+      </span>
       <Separator className="min-w-2 flex-1" />
     </div>
   );
diff --git a/apps/web/src/components/pullRequest/pullRequestPresentation.tsx b/apps/web/src/components/pullRequest/pullRequestPresentation.tsx
index 1d077e337172c..58832d6f44cfd 100644
--- a/apps/web/src/components/pullRequest/pullRequestPresentation.tsx
+++ b/apps/web/src/components/pullRequest/pullRequestPresentation.tsx
@@ -466,8 +466,19 @@ export function PullRequestDiffStat({
   }
   return (
     <span className={cn("inline-flex items-baseline gap-1 tabular-nums", className)}>
-      <span className="text-diff-addition-foreground">+{formatDiffCount(additions)}</span>
-      <span className="text-diff-deletion">-{formatDiffCount(deletions)}</span>
+      <span
+        className={cn(
+          "text-diff-addition-foreground",
+          additions === 0 && "redesign:text-muted-foreground/60",
+        )}
+      >
+        +{formatDiffCount(additions)}
+      </span>
+      <span
+        className={cn("text-diff-deletion", deletions === 0 && "redesign:text-muted-foreground/60")}
+      >
+        -{formatDiffCount(deletions)}
+      </span>
     </span>
   );
 }
diff --git a/apps/web/src/components/settings/SettingsSidebarNav.tsx b/apps/web/src/components/settings/SettingsSidebarNav.tsx
index d4af916e5d061..109a4ae6ed27c 100644
--- a/apps/web/src/components/settings/SettingsSidebarNav.tsx
+++ b/apps/web/src/components/settings/SettingsSidebarNav.tsx
@@ -241,7 +241,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
           "max-md:absolute max-md:inset-y-0 max-md:start-0 max-md:z-10 max-md:w-full",
       )}
     >
-      <SidebarContent className="overflow-x-hidden">
+      <SidebarContent className="overflow-x-hidden" data-settings-nav>
         <SidebarGroup>
           <div className="flex flex-col gap-2">
             <div
diff --git a/apps/web/src/components/sidebar/SidebarThreadRow.tsx b/apps/web/src/components/sidebar/SidebarThreadRow.tsx
index 8837d47ae0eec..ac51b67479255 100644
--- a/apps/web/src/components/sidebar/SidebarThreadRow.tsx
+++ b/apps/web/src/components/sidebar/SidebarThreadRow.tsx
@@ -198,7 +198,7 @@ function SidebarProviderStack(props: {
       acpRegistryIconUrl={currentEntry.acpRegistryIconUrl}
       showBadge={showInstanceBadge}
       size="compact"
-      iconClassName="opacity-60"
+      iconClassName="opacity-60 redesign:grayscale"
     />
   );
   if (stack.length === 1) {
@@ -924,7 +924,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
             : "bg-transparent text-sidebar-foreground hover:bg-sidebar-row-hover",
     shouldRecede &&
       status === "working" &&
-      "opacity-70 transition-opacity hover:opacity-100 focus-within:opacity-100 motion-reduce:transition-none",
+      "opacity-70 transition-opacity hover:opacity-100 focus-within:opacity-100 motion-reduce:transition-none redesign:opacity-100",
     isFileDragOver && "ring-1 ring-inset ring-primary/70",
     isFileDragOver && !props.isActive && !isSelected && "bg-sidebar-row-hover",
     props.sortable?.isDragging &&
@@ -986,7 +986,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
           ? cn(
               "truncate",
               shouldRecede
-                ? "text-secondary-label redesign:text-foreground/75 redesign:group-hover/sidebar-row:text-foreground redesign:group-focus-visible/sidebar-row:text-foreground"
+                ? "text-secondary-label redesign:text-foreground/65 redesign:group-hover/sidebar-row:text-foreground redesign:group-focus-visible/sidebar-row:text-foreground"
                 : isUnread || isWoke || status === "input" || status === "request"
                   ? "text-foreground"
                   : status === "failed"
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 30bc1c0268975..62e74dc233fb7 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1293,6 +1293,8 @@ html.dark[data-redesign] {
   /* On black a gray mix stays as bright as the blue, so dim with transparency instead. */
   --diff-modified-icon: color-mix(in srgb, var(--info-foreground) 65%, transparent);
   --diff-added-icon: var(--success-foreground);
+  /* Matches the dithered deletion bar, so an all-new file is not a solid stripe. */
+  --diff-addition-bar-opacity: 0.5;
 }
 
 /* Blue-orange already spends blue on additions. */
@@ -1305,6 +1307,13 @@ html.dark[data-redesign][data-diff-color-scheme="blue-orange"] {
   --diff-modified-icon: color-mix(in srgb, var(--muted-foreground) 65%, transparent);
 }
 
+/* New design: settings sections at /80 read dimmer than the descriptions they lead to. */
+[data-redesign]
+  [data-settings-nav]
+  [data-sidebar="menu-button"]:not([data-active="true"], :hover, :active) {
+  color: var(--sidebar-muted-foreground);
+}
+
 /* New design: sections in the provider detail pane sit flat in its card instead of nesting
    cards inside it. Headings and row dividers still separate them. */
 [data-redesign] [data-provider-detail] [data-slot="settings-group"] {
@@ -1520,6 +1529,21 @@ html[data-theme-id] [data-workspace-titlebar-controls] [data-slot="tooltip-trigg
   color: color-mix(in oklab, var(--contrast-toolbar-foreground) 55%, var(--toolbar-background));
 }
 
+/* New design: an open panel's ghost accent matches hover and barely shows on black.
+   Closed panels read muted; open ones take full strength on a fill hover can't fake. */
+html[data-redesign]
+  :is([data-panel-layout-controls], [data-workspace-titlebar-controls])
+  :is([data-slot="toggle"], [data-slot="tooltip-trigger"]):not([data-pressed], :hover, :disabled) {
+  --control-icon-color: var(--muted-foreground);
+  color: var(--muted-foreground);
+}
+
+html[data-redesign]
+  :is([data-panel-layout-controls], [data-workspace-titlebar-controls])
+  :is([data-slot="toggle"], [data-slot="tooltip-trigger"])[data-pressed] {
+  background-color: color-mix(in srgb, var(--contrast-toolbar-foreground) 16%, transparent);
+}
+
 html[data-theme-id] [data-chat-header] [data-slot="button"]:hover,
 html[data-theme-id] [data-chat-header] [data-slot="button"][data-pressed],
 html[data-theme-id] [data-chat-header] [data-slot="menu-trigger"]:hover,
@@ -1735,10 +1759,10 @@ body {
   padding: 0;
 }
 
-/* New design: sidebar row metadata sits a step below read titles (75% white). */
+/* New design: sidebar row metadata sits a step below read titles (65% white). */
 [data-redesign] [data-app-sidebar] {
   @variant dark {
-    --secondary-label: #8f8f8f;
+    --secondary-label: #737373;
   }
 }
 
@@ -2154,6 +2178,11 @@ code {
   font-weight: 600;
 }
 
+/* New design: prose sits a step under full white, so bold labels and headings carry the scan. */
+[data-redesign] .chat-markdown :is(strong, h1, h2, h3, h4, h5, h6) {
+  color: var(--foreground);
+}
+
 .chat-markdown pre {
   max-width: 100%;
   overflow-x: auto;
diff --git a/apps/web/src/lib/diffRendering.ts b/apps/web/src/lib/diffRendering.ts
index cad519024869b..72071efbb2513 100644
--- a/apps/web/src/lib/diffRendering.ts
+++ b/apps/web/src/lib/diffRendering.ts
@@ -357,6 +357,11 @@ export const DIFF_SURFACE_THEME_UNSAFE_CSS = `
   color: var(--code-foreground) !important;
 }
 
+/* The library draws addition bars solid and deletion bars dithered at half coverage. */
+[data-indicators="bars"] [data-line-type="change-addition"][data-column-number]::before {
+  opacity: var(--diff-addition-bar-opacity, 1);
+}
+
 /* The library's change-icon colors are tuned for dark canvases; light mode takes the app's darker tokens. */
 [data-change-icon="new"] {
   color: var(