-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Theming: Theme manager with CSS custom properties #25314
base: next
Are you sure you want to change the base?
Conversation
@JReinhold Thanks a lot for this first POC. I just added the list of main CSS variables we want to support for both light and dark theme. I think there's still some investigation to do to make sure we keep the old theme in place while implementing the new version. The main issue is that this is not a 1 to 1 mapping so just changing the set color in the old theme by the CSS variable will not be enough. I think one way to go with it would be to have new new CSS variables in place directly in the manager and we find a way to convert the old theme into css variables. Just as an example, |
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
☁️ Nx Cloud ReportCI is running/has finished running commands for commit a5269bb. As they complete they will appear below. Click to see the status, the terminal output, and the build insights. 📂 See all runs for this CI Pipeline Execution ✅ Successfully ran 1 targetSent with 💌 from NxCloud. |
Closes #27223
Theming 2.0
Over the years, much has changed in Storybook, but theming has remained the same. From users' perspective, the list of options felt like an in-between without a good support for multiple themes. For maintainers, it became quite a struggle to understand what colour which led to a lot of compromises and overrides. With this project, we intend to simplify the theming API for users while allowing maintainers more freedom on how to use these values.
To offer a nice transition, we introduced a function that will convert the existing theme into the new theme to make sure this work in backward compatible. Here is a quick highlight of what this update is about:
storybook/manager-head.html
.--sb-accent
.--sb-accent
, we automatically generate a set of colours for your text, background, icons, .. automatically.RFC available here - #24344
Following PR with all updated values in the manager - #26863
List of CSS variables available
--sb-accent
- Set the accent colour everywhere.--sb-background
- Set the background on the sidebar, toolbar and addon panel.--sb-accentSidebar
- Set a custom accent colour for your sidebar.--sb-backgroundSidebar
- Set a custom background for your sidebar.--sb-documentation
- To set the colour of the docs icon on the sidebar.--sb-directory
- To set the colour of the directory icon on the sidebar.--sb-component
- To set the colour of the component icon on the sidebar.--sb-story
- To set the colour of the story icon on the sidebar.Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
.storybook/manager-head.html
emulating a user writing a custom theme: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:merged
orci:daily
GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli/src/sandbox-templates.ts
Make 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/core
team 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>