Merged
Conversation
- Add ChoreoTheme extending AcrylicBaseTheme with Choreo brand colors - Include primary indigo (#5567d5), violet accents, and optimized dark mode - Add button gradient, focus states, and branded syntax highlighting - Register theme in Storybook for visual testing
- Add ChoreoTheme to available themes list in AGENTS.md - Update theming.md with ChoreoTheme in table, imports, and examples - Keep .ai and .claude theming docs in sync
- Switch base theme from AcrylicBaseTheme to OxygenThemeBase - Update light/dark mode background colors for cleaner appearance - Add border radius and component overrides for Paper, AppBar, TextField, OutlinedInput - Add MuiButton root overrides for text transform and font weight - Remove radial gradient background effects from MuiCssBaseline
- Import ChoreoTheme and add to available themes list - Add Choreo logo support in Logo component with shared reference - Add Choreo-specific content for login page logo, slogan, and background
WalkthroughThis PR introduces a new Choreo theme to the Oxygen UI package. The implementation includes a comprehensive theme definition with color palettes, component overrides, gradients, and syntax highlighting, integrated into the package exports, Storybook documentation, and test application with corresponding UI assets. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
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. Comment |
Contributor
Author
|
|
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/oxygen-ui/.claude/theming.md (1)
59-75: AddChoreoThemeto the multi-theme import list.The snippet now references
ChoreoThemeinthemes[], but it isn’t imported, so the example won’t compile when copied.🛠️ Suggested fix
import { OxygenUIThemeProvider, OxygenTheme, AcrylicOrangeTheme, AcrylicPurpleTheme, + ChoreoTheme, ClassicTheme, HighContrastTheme } from '@wso2/oxygen-ui';packages/oxygen-ui/.ai/theming.md (1)
59-75: AddChoreoThemeto the multi-theme import list.The snippet references
ChoreoThemeinthemes[], but it isn’t imported, so the example won’t compile when copied.🛠️ Suggested fix
import { OxygenUIThemeProvider, OxygenTheme, AcrylicOrangeTheme, AcrylicPurpleTheme, + ChoreoTheme, ClassicTheme, HighContrastTheme } from '@wso2/oxygen-ui';
🧹 Nitpick comments (3)
samples/oxygen-ui-test-app/src/pages/LoginPage.tsx (3)
81-99: Extract shared Choreo logo to reduce duplication.The
acrylicPurpleandchoreovariants for Logo are identical. Consider extracting to a shared constant, similar to howLogo.tsxhandles this.♻️ Suggested refactor
+ const choreoLogo = ( + <ColorSchemeImage + src={{ + light: `${import.meta.env.BASE_URL}assets/images/choreo-logo.svg`, + dark: `${import.meta.env.BASE_URL}assets/images/choreo-logo.svg`, + }} + alt={{light: 'Choreo Logo (Light)', dark: 'Choreo Logo (Dark)'}} + height={40} + width="auto" + /> + ); + const Logo = useThemeContent({ default: ( <ColorSchemeImage src={{ light: `${import.meta.env.BASE_URL}assets/images/logo.svg`, dark: `${import.meta.env.BASE_URL}assets/images/logo-inverted.svg`, }} alt={{light: 'Asgardeo Logo (Light)', dark: 'Asgardeo Logo (Dark)'}} height={30} width="auto" />), - acrylicPurple: ( - <ColorSchemeImage - src={{ - light: `${import.meta.env.BASE_URL}assets/images/choreo-logo.svg`, - dark: `${import.meta.env.BASE_URL}assets/images/choreo-logo.svg`, - }} - alt={{light: 'Choreo Logo (Light)', dark: 'Choreo Logo (Dark)'}} - height={40} - width="auto" - />), - choreo: ( - <ColorSchemeImage - src={{ - light: `${import.meta.env.BASE_URL}assets/images/choreo-logo.svg`, - dark: `${import.meta.env.BASE_URL}assets/images/choreo-logo.svg`, - }} - alt={{light: 'Choreo Logo (Light)', dark: 'Choreo Logo (Dark)'}} - height={40} - width="auto" - />) + acrylicPurple: choreoLogo, + choreo: choreoLogo });
125-165: Extract shared Choreo slogan to reduce duplication.The
acrylicPurpleandchoreoSlogan variants are identical. Extract to a shared constant for maintainability.♻️ Suggested refactor
+ const choreoSlogan = ( + <> + <Typography variant="h3" sx={{ fontWeight: 'bold', mb: 0 }}> + Get Started with Choreo Internal Developer Platform + </Typography> + <Typography variant="body1" sx={{ color: 'text.secondary' }}> + A full-fledged platform for cloud native application development + </Typography> + <Stack sx={{gap: 2}}> + {sloganListItemsChoreo.map((item) => ( + <Stack key={item.title} direction="row" sx={{gap: 2}}> + {item.icon} + <div> + <Typography gutterBottom sx={{fontWeight: 'medium'}}> + {item.title} + </Typography> + </div> + </Stack> + ))} + </Stack> + </> + ); + const Slogan = useThemeContent({ default: ( // ... existing default content ), - acrylicPurple: ( - <> - // ... duplicated JSX - </>), - choreo: ( - <> - // ... duplicated JSX - </>) + acrylicPurple: choreoSlogan, + choreo: choreoSlogan });
181-201: Extract shared Choreo background image to reduce duplication.The
acrylicPurpleandchoreoBackgroundImage variants are identical. Extract to a shared constant for consistency with the suggested refactors above.♻️ Suggested refactor
+ const choreoBackgroundImage = ( + <ColorSchemeImage + src={{ + light: `${import.meta.env.BASE_URL}assets/images/idevp-login.svg`, + dark: `${import.meta.env.BASE_URL}assets/images/idevp-login-inverted.svg`, + }} + alt={{light: 'Login Screen Image (Light)', dark: 'Login Screen Image (Dark)'}} + height={450} + width="auto" + sx={{ position: 'absolute', bottom: 50, right: -100 }} + /> + ); + const BackgroundImage = useThemeContent({ default: ( // ... existing default content ), - acrylicPurple: ( - <ColorSchemeImage - // ... duplicated JSX - />), - choreo: ( - <ColorSchemeImage - // ... duplicated JSX - />) + acrylicPurple: choreoBackgroundImage, + choreo: choreoBackgroundImage });
kaviththiranga
approved these changes
Feb 1, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Purpose
This PR introduces ChoreoTheme, a new product-specific theme for Choreo with indigo-violet gradient styling and clean professional design. The theme features Choreo's brand color (#5567d5) with complementary violet accents and comprehensive light/dark mode support.
Key additions:
Integration:
@wso2/oxygen-uitheme collectionRelated Issues
Related PRs
Checklist
Security checks
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.