fix(docs): improve ArgsTable border contrast in dark mode

[leno23]

Summary

Fixes #34691

Docs ArgsTable borders used theme.appBorderColor, which is only 10% white alpha in dark mode and was difficult to see.

Changes

• Use a stronger local border color (hsl(0 0% 100% / 0.2)) for ArgsTable cells in dark theme
• Forced-colors handling unchanged (CanvasText borders)

Surface area

• Docs ArgsTable styling only

Validation

• Pre-commit lint/format passed locally

Closes #34691

Made with Cursor

Summary by CodeRabbit

• Bug Fixes
  • Improved table border contrast in dark mode within the Args table for enhanced readability and better visual distinction of table elements.

[github-actions]

	Fails
🚫	PR is not labeled with one of: ["cleanup","BREAKING CHANGE","feature request","bug","documentation","maintenance","build","dependencies"]
🚫	PR is not labeled with one of: ["ci:normal","ci:merged","ci:daily","ci:docs"]
🚫	PR title must be in the format of "Area: Summary", With both Area and Summary starting with a capital letter Good examples: - "Docs: Describe Canvas Doc Block" - "Svelte: Support Svelte v4" Bad examples: - "add new api docs" - "fix: Svelte 4 support" - "Vue: improve docs"
🚫	PR description is missing the mandatory "#### Manual testing" section. Please add it so that reviewers know how to manually test your changes.

Generated by 🚫 dangerJS against 053840e

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 84fc8857-4b59-422c-bf1e-e05d28566d42

📥 Commits

Reviewing files that changed from the base of the PR and between ac3a378 and 053840e.

📒 Files selected for processing (1)

• code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx

---

📝 Walkthrough

Walkthrough

Updates TableWrapper styled component in the ArgsTable to improve dark mode border contrast by introducing a computed tableBorderColor derived from theme.base. All table border declarations now use this new color variable instead of theme.appBorderColor. The component also gains explicit TypeScript generic prop types for compact, inAddonPanel, inTabPanel, and isLoading.

Changes

Dark Mode Table Border Styling Refactor

Layer / File(s)	Summary
Table border styling and prop typing code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx	TableWrapper computes tableBorderColor based on theme.base (dark mode gets hsl(0 0% 100% / 0.2), light mode gets theme.appBorderColor) and applies it across all border-related CSS declarations; generic props are added for compact, inAddonPanel, inTabPanel, and isLoading.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• storybookjs/storybook#33034: Both PRs modify ArgsTable.tsx TableWrapper styles around tab-panel context and border rendering.
• storybookjs/storybook#34264: Both PRs refactor TableWrapper border styling; this PR updates the normal-theme border color source while the related PR adjusts forced-colors border override for high-contrast visibility.

---

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 and usage tips.}

[Sidnioulz]

AI spam