Provide ability to leverage CSS variables for status values provided by Vitest #31463
Conversation
JamesIves
changed the title
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
LGTM
1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile
|
View your CI Pipeline Execution ↗ for commit 2cc4972.
☁️ Nx Cloud last updated this comment at |
|
Hi @JamesIves, Our theming system is currently not built around CSS variables but rather the Emotion ThemeProvider. We have plans to switch to a system based on CSS variables, hopefully this fall. If you have ideas or opinions around this I would love to get your feedback on that RFC. Regarding this PR, I would rather not merge it as-is because it doesn't align with current practices and also makes it harder to holistically switch to CSS variables later. The proper solution (for now) would be to swap the CSS color strings for a color theme variable keys (probably |
|
Is the warning theme colour something I can provide via the theme object? I'm really just looking for a way I can select the warning/error state so I can override it with my own variable. |
|
@JamesIves Yes, you can override theme colors. Here's an example Storybook that does this. |
Closes #31462
What I did
Attaches CSS variables to status values, with fallbacks to their existing values. This allows things to work as-is with the ability to change them based on needs.
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>Greptile Summary
Based on the provided information, I'll create a concise summary of the PR changes:
Introduces CSS variables for status value colors in the Storybook UI's sidebar, focusing on warning and error states to improve accessibility and theme customization.
--status-value-color-warningCSS variable with fallback to#A15C20incode/core/src/manager/utils/status.tsx--status-value-color-errorCSS variable with fallback tobrownincode/core/src/manager/utils/status.tsx💡 (2/5) Greptile learns from your feedback when you react with 👍/👎!