fix(theme): restore Popover shadow with XProvider

[advance-hub]

🤔 This is a ...

• 🐞 Bug fix
• ✅ Test Case

🔗 Related Issues

Fixes #2021

💡 Background and Solution

Why

antd 6 renders Popover elevation with the dropShadowPopover alias token. XProvider's token formatter did not expose that newer alias. When X components generated a scoped CSS-variable class, --ant-drop-shadow-popover was missing, so Popover resolved filter to none and lost its elevation.

What

• add dropShadowPopover to the X alias-token contract
• generate the same three-layer drop shadow expected by antd Popover
• add a regression test covering an antd Popover rendered in the shared XProvider CSS-variable context

How

dropShadowPopover:
  'drop-shadow(0 6px 16px rgba(0, 0, 0, 0.08)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12)) drop-shadow(0 9px 28px rgba(0, 0, 0, 0.05))',

The fix restores the missing CSS variable instead of adding a component-specific override, so Popover keeps using antd's own filter: var(--ant-drop-shadow-popover) rule.

🔎 Browser verification

Before — official 2.9.0 playground: the Popover is visible but its computed filter is none.

After — patched source: the Popover receives the three-layer drop shadow.

✅ Validation

Test Suites: 2 passed, 2 total
Tests:       4 passed, 4 total
Snapshots:   0 total

• tsc --noEmit -p packages/x/tsconfig.json
• Biome check on all three changed files
• git diff --check
• real-browser comparison: filter: none before; three computed drop-shadow(...) layers after

📝 Change Log

Language	Changelog
🇺🇸 English	Restore Popover shadows when antd components share XProvider's CSS-variable theme context.
🇨🇳 Chinese	修复 antd 组件共用 XProvider CSS 变量主题时 Popover 阴影丢失的问题。

Summary by CodeRabbit

• 样式改进

  • 优化弹出层阴影效果，使其视觉层次更加清晰。
  • 为弹出层提供对应的 CSS 阴影变量，确保主题样式正确生效。

• 测试

  • 新增验证，确保弹出层阴影变量能够在主题提供组件中正确生成。

🎬 Before / After browser recording

The same reproduction was run in the same browser viewport. Each GIF preview links to the original MP4.

Before — Popover shadow missing (filter: none)

Open the original before MP4

After — three-layer drop-shadow(...) restored

Open the original after MP4

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: e9283766-6a5c-4d70-82c7-7e5902fdb856

📥 Commits

Reviewing files that changed from the base of the PR and between 25aad7b and c840366.

📒 Files selected for processing (3)

• packages/x/components/theme/interface/alias.ts
• packages/x/components/theme/util/alias.ts
• packages/x/components/x-provider/__tests__/cssVar.test.tsx

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

---

📝 Walkthrough

Walkthrough

新增 dropShadowPopover 主题令牌。该令牌包含三层 drop-shadow 滤镜。测试验证 XProvider 为打开状态的 Popover 生成对应 CSS 变量。

Changes

Popover 阴影令牌

Layer / File(s)	Summary
定义 Popover 阴影令牌 packages/x/components/theme/interface/alias.ts, packages/x/components/theme/util/alias.ts	AliasToken 新增 dropShadowPopover 属性。formatToken 为该属性生成三层 drop-shadow 值。
验证 CSS 变量输出 packages/x/components/x-provider/__tests__/cssVar.test.tsx	新增测试。测试验证打开状态的 Popover 具有 css-var- 类名，并生成包含 drop-shadow( 的 --ant-drop-shadow-popover CSS 变量。

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to c8403

This localized change restores the Popover shadow CSS variable for components sharing XProvider's theme context and includes regression coverage; no actionable merge-blocking risk remains beyond normal checks and review.

Poem

小兔拎来阴影串，
三层滤镜落窗前。
令牌写入主题中，
Popover 不再失去光，
CSS 变量稳稳显。

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	变更新增了 dropShadowPopover 主题别名令牌，生成 Popover 所需的三层阴影值，并增加了 XProvider 场景下的回归测试。该实现满足问题 #2021 中恢复 Popover 阴影的目标。
Out of Scope Changes check	✅ Passed	所有变更都直接服务于 Popover 阴影修复，包括主题令牌、令牌生成逻辑和回归测试。未发现与问题 #2021 无关的代码变更。
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 3 files.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	标题“fix(theme): restore Popover shadow with XProvider”准确概括了本次新增 Popover 阴影主题令牌及回归测试的主要变更。

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[nrps9909]

Reviewed exact head c840366 against base 25aad7b.

Blocking theme-algorithm mismatch: the new dropShadowPopover value is hardcoded to black, but the bundled antd 6.6.1 alias derives this token from mergedToken.colorShadow. That distinction is observable under theme.darkAlgorithm. Ant Design produces:

drop-shadow(... rgba(255,255,255,0.016)) ...

while this PRs XProvider CSS-variable class emits:

drop-shadow(... rgba(0, 0, 0, 0.08)) ...

I reproduced this by rendering Bubble plus an open Popover under XProvider theme={{ algorithm: theme.darkAlgorithm }}, locating the Popover css-var class, and comparing its --ant-drop-shadow-popover declaration with theme.getDesignToken({ algorithm: theme.darkAlgorithm }).dropShadowPopover. The exact-value assertion fails. The submitted test only checks that the declaration begins with drop-shadow(, so it passes despite replacing the dark-algorithm token with the default-light value.

Please derive the three alpha values from the merged colorShadow using the same alpha-preserving FastColor logic as antds current theme/util/alias, and add a dark-algorithm or exact-token regression. The default light value should remain unchanged.

Other validation on this exact head is clean: the submitted two-suite scope passes 4/4 tests; packages/x TypeScript noEmit passes; Biome passes all three changed files; git diff --check passes; live PR head still matches the tested SHA; remote checks are green.

AI assistance disclosure: Codex was used to inspect the exact diff and current bundled antd implementation, run the focused and static checks, construct the independent dark-token comparison, and draft this review. I verified the reported outputs.