Docs-Blocks: Improve ArgsTable border visibility in dark mode by kimjune01 · Pull Request #34756 · storybookjs/storybook

kimjune01 · 2026-05-09T16:31:07Z

What I did

appBorderColor uses white at 10% opacity, which is nearly invisible against dark backgrounds. The ArgsTable borders disappear in dark mode.

Boost the border opacity in dark mode using polished/opacify so table borders are distinguishable from the background. Also increase the dark-mode drop-shadow strength from 0.20 to 0.40 for better depth separation.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

Run a sandbox with yarn task --task sandbox --start-from auto --template react-vite/default-ts
Open Storybook, switch to dark theme
Navigate to any Docs page with an ArgsTable
Before: table borders are invisible against the dark background
After: borders are visible with slightly boosted opacity

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update MIGRATION.MD

Summary by CodeRabbit

Style
- Improved Arguments table styling for better visual appearance in dark mode with enhanced border rendering and contrast
- Updated table border colors to improve visibility across light and dark themes
- Enhanced drop-shadow effects to render appropriately for both light and dark theme modes
- Refined overall table row styling for consistent visual presentation

appBorderColor uses white at 10% opacity, which is nearly invisible against dark backgrounds. Boost opacity with polished/opacify so table borders are distinguishable. Also increase dark-mode drop-shadow strength from 0.20 to 0.40 for better contrast. Refs storybookjs#34000

coderabbitai · 2026-05-09T16:33:16Z

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: ab3b1941-79db-49e4-a67f-761be8c42996

📥 Commits

Reviewing files that changed from the base of the PR and between b2167d6 and 3ace246.

📒 Files selected for processing (1)

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

📝 Walkthrough

Walkthrough

This PR updates ArgsTable.tsx to compute table border colors conditionally based on theme mode. It adds an opacify import, introduces a tableBorderColor variable that applies opacity transformation in dark mode, and refactors all tbody border styling to use this derived color instead of the theme's direct appBorderColor property. The drop-shadow filter alpha is also tuned per theme base.

Changes

ArgsTable Dark Mode Table Border Styling

Layer / File(s)	Summary
Import Dependencies `code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx`	Adds `opacify` utility import from `polished` library.
Theme-aware Color Computation `code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx`	Introduces `tableBorderColor` variable that conditionally applies `opacify` transformation to `theme.appBorderColor` when `theme.base` is `dark`.
Styling Application `code/addons/docs/src/blocks/components/ArgsTable/ArgsTable.tsx`	Updates `tbody` drop-shadow alpha conditionally by theme base and replaces all border color sources from `theme.appBorderColor` to `tableBorderColor` for cell and edge borders.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

storybookjs/storybook#33034: Modifies ArgsTable.tsx's TableWrapper styling related to shadow and border rendering in table cells.
storybookjs/storybook#34264: Updates ArgsTable.tsx's TableWrapper styling for tbody border color and drop-shadow filter behavior.

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

Generate code and open pull requests
Plan features and break down work
Investigate incidents and troubleshoot customer tickets together
Automate recurring tasks and respond to alerts with triggers
Summarize progress and report instantly

Built for teams:

Shared memory across your entire org—no repeating context
Per-thread sandboxes to safely plan and execute work
Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

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

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

Sidnioulz · 2026-05-21T12:23:43Z

+  // In dark mode, appBorderColor (white at 10% opacity) is nearly invisible.
+  // Boost opacity so table borders are distinguishable from the background.
+  const tableBorderColor =
+    theme.base === 'dark' ? opacify(0.1, theme.appBorderColor) : theme.appBorderColor;


This helps us move from a 1.36 contrast to a 1.91 contrast, both under the 3.0 requirement set by WCAG SC 1.4.11.

We'd need to go all the way to 34% opacity (compared to 10% in next and 20% here) to reach the required ratio.

@MichaelArestad @domyen I'll put the question to you: do we want to change contrast ratios all the way till we reach 3.0? Do we want to find other treatments (alternating background colours)? Do we want to argue that visual grouping and alignment are enough to identify the table element, and so SC 1.4.11 doesn't apply?

See examples reaching 3.0:

Hey @kimjune01!!! Thanks for the PR. I took a look at this and the accessibility guidelines and, ultimately, I don't think I we should make this change for a few reasons:

The specification largely refers to that contrast level being necessary on controls or important imagery. I don't think that quite applies here.

It would have a pretty big visual impact on the base theme. That could result in a significant increase in visual noise across the UI requiring us to do some serious design work to reduce the number of borders used.

If we made that change in the dark theme, we would probably want to bump contrast on the light theme.

I am hoping, in the future, to make it easier for users to bump the contrast of borders and more on their individual Storybooks (possible now by making a custom theme), but we need to push a bit further with work on Design Tokens and the elusive Theming 2.0. I am also hoping that work can unlock specific themes just for accessibility purposes like a high contrast theme.

Thanks Michael. I'll close the PR for now. Thanks again for your contribution @kimjune01!

Sidnioulz

Thanks for the PR @kimjune01!

This change is an improvement to visibility, but if contrast requirements apply here, the change isn't strong enough to meet them.

I've asked our design team to provide guidance on how to best fix this.

github-actions Bot added agentscan:automated-account agent-scan:automated labels May 9, 2026

valentinpalkovic added this to Core Team Projects May 11, 2026

valentinpalkovic moved this to Empathy Queue (prioritized) in Core Team Projects May 11, 2026

valentinpalkovic added bug addon: docs block: argstable labels May 11, 2026

This was referenced May 12, 2026

try: storybookjs/storybook#34756 — ArgsTable dark-mode border visibility valentinpalkovic/storybook#15

Open

feat(scripts): agentic PR verification harness (v6 single-round — author + execute in one run) #34762

Open

valentinpalkovic assigned Sidnioulz May 21, 2026

Sidnioulz reviewed May 21, 2026

View reviewed changes

Sidnioulz requested changes May 21, 2026

View reviewed changes

Sidnioulz moved this from Empathy Queue (prioritized) to On Hold in Core Team Projects May 21, 2026

Sidnioulz closed this May 22, 2026

github-project-automation Bot moved this from On Hold to Done in Core Team Projects May 22, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Docs-Blocks: Improve ArgsTable border visibility in dark mode#34756

Docs-Blocks: Improve ArgsTable border visibility in dark mode#34756
kimjune01 wants to merge 1 commit into
storybookjs:nextfrom
kimjune01:fix/argstable-dark-mode-border-visibility

kimjune01 commented May 9, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 9, 2026

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

Sidnioulz May 21, 2026

Uh oh!

MichaelArestad May 21, 2026

Uh oh!

Sidnioulz May 22, 2026

Uh oh!

Sidnioulz left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

kimjune01 commented May 9, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented May 9, 2026

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

Sidnioulz May 21, 2026

Choose a reason for hiding this comment

Uh oh!

MichaelArestad May 21, 2026

Choose a reason for hiding this comment

Uh oh!

Sidnioulz May 22, 2026

Choose a reason for hiding this comment

Uh oh!

Sidnioulz left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kimjune01 commented May 9, 2026 •

edited by coderabbitai Bot

Loading