feat(checkout): CHECKOUT-10198 update themeV2 styles to work with dark variant from cornerstone - #3228
Conversation
|
cursor review |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
|
cursor review |
There was a problem hiding this comment.
✅ Bugbot reviewed your changes and found no new issues!
Comment @cursor review or bugbot run to trigger another review on this PR
Reviewed by Cursor Bugbot for commit 583eae0. Configure here.
richapatel1510
changed the title
richapatel1510
changed the title
ad560a7 to
583eae0
Compare
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 583eae0. Configure here.
|
Nice work @richapatel1510 I have one question, if we really want to call this |
9d81113 to
28da560
Compare
28da560 to
906008d
Compare
bc-maxy
left a comment
bc-maxy
left a comment
There was a problem hiding this comment.
A few nits about renaming, otherwise looks great to me 🤩
| describe('themeV2 (billing captured on the payment step)', () => { | ||
| const getThemeV2Config = () => ({ | ||
| describe('enhancedThemeV1 (billing captured on the payment step)', () => { | ||
| const getEnhancedThemeConfig = () => ({ |
There was a problem hiding this comment.
| const getEnhancedThemeConfig = () => ({ | |
| const getEnhancedThemeV1Config = () => ({ |
| @@ -497,7 +497,7 @@ describe('getCheckoutStepStatuses()', () => { | |||
| }); | |||
|
|
|||
| beforeEach(() => { | |||
| jest.spyOn(state.data, 'getConfig').mockReturnValue(getThemeV2Config()); | |||
| jest.spyOn(state.data, 'getConfig').mockReturnValue(getEnhancedThemeConfig()); | |||
There was a problem hiding this comment.
| jest.spyOn(state.data, 'getConfig').mockReturnValue(getEnhancedThemeConfig()); | |
| jest.spyOn(state.data, 'getConfig').mockReturnValue(getEnhancedThemeV1Config()); |
| @@ -79,4 +79,4 @@ | |||
| // THEME V2 | |||
There was a problem hiding this comment.
| // THEME V2 | |
| // ENHANCED THEME V1 |
|
checkout-js deployed to Staging US |
⚡️ Lighthouse results🖥️ Desktop:
📱 Mobile:
|
|
checkout-js deployed to Integration US |
|
checkout-js deployed to Production US |
4 participants
What/Why?
themeV2toenhancedThemeto be inline with the checkout setting.optimizedCheckout-classes wherever needed.Rollout/Rollback
Rever this PR.
Testing
BEFORE
BOLDTheme-BEFORE.mov
AFTER
BOLDTheme-AFTER.mov
Note
Medium Risk
Wide rename and class/CSS changes touch checkout navigation (billing step omission), payment submit gating, and Stripe OCS appearance; regressions would show as wrong step order, styling on non-enhanced checkout, or wallet payment UI mismatches.
Overview
Renames the checkout theme V2 flag and SCSS surface to
enhancedThemeV1(isEnhancedThemeV1Enabled, contextenhancedThemeV1, root classenhancedThemeV1, mixin@include enhancedThemeV1, StripeCheckoutTheme.ENHANCED_THEME_V1) while keeping the samecheckoutV2Themesetting and experiment gates.Styling shifts the enhanced layout away from hard-coded palette colors toward
optimizedCheckout-*theme tokens (content, headings, order summary, form inputs) across checkout UI—addresses, cart, coupons, customer, payment, shipping, and modals. SCSS underenhancedThemeV1/drops many static$color-*rules (page background, borders, checklist selection colors, coupon button colors) so Cornerstone/dark variants can drive appearance; cart summary drawer and checklist borders use generic border width/style where colors were removed.Behavior tweaks: active checkout steps get
checkout-step--current; step header titles pair body classes with the matchingoptimizedCheckout-heading*classes. Cart summary drawer V2 addsenhancedThemeV1on the drawer root andoptimizedCheckout-orderSummary/ toggle classes on backdrop and labels.Reviewed by Cursor Bugbot for commit 0ee5aec. Bugbot is set up for automated code reviews on this repo. Configure here.