From 067844b6463023379db9e030fa4bf6bdc9faee4a Mon Sep 17 00:00:00 2001
From: Neil <4138956+nwparker@users.noreply.github.com>
Date: Sat, 26 Sep 2026 20:56:41 -0700
Subject: [PATCH] fix(design-system): replace hand-rolled diff draft-card
 shadow with shadow-xs (#23307)

The inline AI-note draft card in the diff view used a fourth, hand-rolled
box-shadow tier with raw rgba values instead of the documented shadow-xs
token, so it didn't track theme/token updates like the rest of the UI.
Restated the value under `.dark` too, since it shares selector specificity
with `.orca-diff-comment-popover`'s dark shadow later in the file and would
otherwise lose the cascade to that unrelated rule.
---
 ...ff-comment-draft-card-shadow-style.test.ts | 39 +++++++++++++++++++
 src/renderer/src/assets/main.css              | 12 +++---
 2 files changed, 45 insertions(+), 6 deletions(-)
 create mode 100644 src/renderer/src/assets/diff-comment-draft-card-shadow-style.test.ts

diff --git a/src/renderer/src/assets/diff-comment-draft-card-shadow-style.test.ts b/src/renderer/src/assets/diff-comment-draft-card-shadow-style.test.ts
new file mode 100644
index 00000000000..3a28acf95c6
--- /dev/null
+++ b/src/renderer/src/assets/diff-comment-draft-card-shadow-style.test.ts
@@ -0,0 +1,39 @@
+import fs from 'node:fs'
+import { describe, expect, it } from 'vitest'
+
+const mainCss = fs.readFileSync(new URL('./main.css', import.meta.url), 'utf8')
+
+function getCssRuleBody(selector: string): string {
+  const ruleMarker = mainCss.indexOf(`\n${selector} {`)
+  expect(ruleMarker).toBeGreaterThanOrEqual(0)
+
+  const ruleStart = ruleMarker + 1
+  const bodyStart = mainCss.indexOf('{', ruleStart) + 1
+  const bodyEnd = mainCss.indexOf('}', bodyStart)
+  return mainCss.slice(bodyStart, bodyEnd)
+}
+
+describe('diff comment draft card shadow', () => {
+  it('uses the documented shadow-xs tier instead of a hand-rolled fourth tier', () => {
+    const draftCard = getCssRuleBody('.orca-diff-comment-inline > .orca-diff-comment-draft-card')
+
+    // STYLEGUIDE.md caps elevation at border / shadow-xs / shadow-floating —
+    // no invented per-component shadow values.
+    expect(draftCard).toContain('shadow-xs')
+    expect(draftCard).not.toMatch(/box-shadow:\s*\n?\s*0/)
+    expect(draftCard).not.toContain('rgba(0, 0, 0,')
+  })
+
+  it('keeps the dark override at shadow-xs, not a hand-rolled or missing shadow', () => {
+    const darkDraftCard = getCssRuleBody(
+      '.dark .orca-diff-comment-inline > .orca-diff-comment-draft-card'
+    )
+
+    // Same selector specificity as `.dark .orca-diff-comment-popover` (its
+    // ancestor via the shared draft-card component), which sits later in the
+    // file — dropping this rule lets that popover's much larger floating
+    // shadow win the cascade in dark mode instead of shadow-xs.
+    expect(darkDraftCard).toContain('shadow-xs')
+    expect(darkDraftCard).not.toContain('rgba(0, 0, 0,')
+  })
+})
diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css
index 98b4a752dcf..64e49519800 100644
--- a/src/renderer/src/assets/main.css
+++ b/src/renderer/src/assets/main.css
@@ -2863,6 +2863,10 @@ html.native-shell .app-layout {
   max-width: 420px;
 }
 
+/* Why: embedded card in the diff flow, not a floating popup — use the
+   documented "subtle lift" tier (shadow-xs) rather than a hand-rolled shadow.
+   Restated under `.dark` (same value) so this still outranks the base
+   `.orca-diff-comment-popover` dark shadow at equal selector specificity. */
 .orca-diff-comment-inline > .orca-diff-comment-draft-card {
   position: relative;
   left: auto;
@@ -2870,15 +2874,11 @@ html.native-shell .app-layout {
   width: 100%;
   max-width: 420px;
   z-index: 1;
-  box-shadow:
-    0 2px 6px rgba(0, 0, 0, 0.08),
-    0 4px 12px rgba(0, 0, 0, 0.08);
+  @apply shadow-xs;
 }
 
 .dark .orca-diff-comment-inline > .orca-diff-comment-draft-card {
-  box-shadow:
-    0 2px 6px rgba(0, 0, 0, 0.35),
-    0 4px 14px rgba(0, 0, 0, 0.28);
+  @apply shadow-xs;
 }
 
 .orca-diff-comment-draft-margin {