[Bug]: Vitest status values can cause color contrast issues on the sidebar

[JamesIves]

Describe the bug

When you run the Vitest addon you can end up in a situation where you have color contrast accessibility issues based on your existing theme configuration as the values are hardcoded without a way to override via a class.

Reproduction link

N/A

Reproduction steps

1. Run the Vitest plugin.
2. Activate an error or warning state.
3. Depending on your theme you may end up with color contrast issues.

System

"@storybook/addon-vitest": "9.0.0-beta.11"

Additional context

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
The Vitest status colors appear to be hardcoded in the addon-vitest package. To fix the color contrast issues: 1. Modify @storybook/addon-vitest/src/components/TestResults.tsx to use CSS variables for status colors that respect the theme: tsx // Replace hardcoded colors with CSS variables const statusStyles = { PASS: { color: 'var(--sb-test-status-pass, #66BF3C)' }, FAIL: { color: 'var(--sb-test-status-fail, #FF4400)' }, ERROR: { color: 'var(--sb-test-status-error, #E64980)' }, RUNNING: { color: 'var(--sb-test-status-running, #66BF3C)' }, TODO: { color: 'var(--sb-test-status-todo, #737373)' }, }; 2. Add these variables to the theme in @storybook/addon-vitest/src/preset/manager.ts: ts addons.setConfig({ theme: { vars: { 'sb-test-status-pass': '#66BF3C', 'sb-test-status-fail': '#FF4400', 'sb-test-status-error': '#E64980', 'sb-test-status-running': '#66BF3C', 'sb-test-status-todo': '#737373' } } });

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile

[JamesIves]

Possible solution in #31463 - needs discussion.