Repository navigation
fix(apollo-vertex): theme Toaster through CSS variables - #1407
ruudandriessen wants to merge 1 commit into
Conversation
Toaster read resolvedTheme from the shell ThemeProvider only to set Sonner's theme attribute. Its colors already come from CSS variables and dark: classes, so drop the hook and cover the remaining Sonner dark-theme styles (description, close button, cancel button) with token classes. The toaster now follows the .dark class without a provider, and the registry entry no longer pulls in @uipath/shell. Assisted-by: Anthropic:claude-opus-5-5
There was a problem hiding this comment.
🟢 Approval recommended
The implementation, registry metadata, tests, and documentation consistently remove provider coupling, with no unresolved findings.
No open issues 🎉
What changed in this PR
Decouples Apollo Vertex’s Toaster from the shell theme provider, using CSS variables and .dark classes instead.
Changes:
- Adds theme overrides while continuing to ignore the
themeprop. - Removes the shell registry dependency.
- Updates tests, documentation, and examples for provider-free usage.
| File | Description |
|---|---|
| packages/apollo-vertex/registry/sonner/sonner.tsx | Replaces the theme hook with CSS overrides. |
| packages/apollo-vertex/registry/sonner/sonner.test.tsx | Tests provider-free rendering and ignored theme input. |
| packages/apollo-vertex/registry.json | Removes the shell dependency. |
| apps/apollo-vertex/content/docs/guidelines/notifications/notification-examples.tsx | Removes the example’s theme provider. |
| apps/apollo-vertex/content/docs/components/sonner.mdx | Documents provider-free setup and CSS-driven theming. |
Review effort: Balanced
Dependency License Review
License distribution
Excluded packages
|
📊 Coverage + size by packagePer-package coverage and bundle size on this PR. New-line coverage = of the source lines this PR adds or changes, the % hit by tests.
"Coverage" is each package's own |
Storybook visual diff✅ No stories are affected by this PR's changes; nothing to compare. Logs Updated (PT): Oct 19, 2026, 02:15:53 AM |
Follow-up to bb4a5b4 ("follow the shell theme in Toaster"). That change swapped
next-themesfor the shell'suseTheme, so the Toaster still needs a theme provider, and the registry entry pulls in all of@uipath/shellfor it.The hook only fed Sonner's
themeprop, which setsdata-sonner-theme. Almost everything that attribute drives is already overridden by our CSS variables (--normal-bg/text/border) and thedark:classes on the status toasts. What was left were three Sonner dark-theme rules: description color, close button color and cancel button background. This PR covers those with token classes and drops the hook.Result:
<Toaster />follows the.darkclass on the document. No provider needed.sonnerregistry entry no longer depends on@uipath/shell.themeprop stays ignored, so it can't disagree with the.darkclass.<Toaster />.Trade-offs:
.darkon an ancestor (the shell provider,next-themesand the docs all do).Testing: unit test, typecheck, lint and format pass. I checked plain, info, success, warning and error toasts, including a plain toast with a Cancel button, on the docs page in light and dark mode.