From 42fc0a4673f33e0dd0163d682a0a12cf6a5c06f3 Mon Sep 17 00:00:00 2001 From: Richa Patel Date: Tue, 4 Aug 2026 15:56:51 +1000 Subject: [PATCH 01/10] feat(checkout): CHECKOUT-10198 apply new style overrides for enhancedTheme in checkout --- assets/scss/optimized-checkout.scss | 46 +++++++++++++++++++++++++++++ 1 file changed, 46 insertions(+) diff --git a/assets/scss/optimized-checkout.scss b/assets/scss/optimized-checkout.scss index 75e84f2a89..217ffa4518 100644 --- a/assets/scss/optimized-checkout.scss +++ b/assets/scss/optimized-checkout.scss @@ -379,3 +379,49 @@ $optimizedCheckout-input--error-boxShadow: 0 0 3px transparentize(stencilColor(" background-color: stencilColor("optimizedCheckout-loadingToaster-backgroundColor"); color: stencilColor("optimizedCheckout-loadingToaster-textColor"); } + + +.enhancedTheme { + background-color: stencilColor("optimizedCheckout-header-backgroundColor"); + + .optimizedCheckout-form-select, + .optimizedCheckout-form-input { + background-color: stencilColor("optimizedCheckout-formField-backgroundColor"); + } + + .form-field:not(.form-field--error) .optimizedCheckout-form-input:not(:focus), + .form-field:not(.form-field--error) .optimizedCheckout-form-select:not(:focus) { + border-color: stencilColor("optimizedCheckout-formField-borderColor"); + } + + .optimizedCheckout-form-checkbox:checked + .optimizedCheckout-form-label::before, + .optimizedCheckout-form-checklist-checkbox:checked ~ .optimizedCheckout-form-label::before { + background-color: stencilColor("optimizedCheckout-formField-inputControlColor"); + border-color: stencilColor("optimizedCheckout-formField-inputControlColor"); + } + + .optimizedCheckout-form-checklist { + .optimizedCheckout-form-checklist-item { + border-color: stencilColor("optimizedCheckout-formChecklist-borderColor"); + } + + .optimizedCheckout-form-checklist-item--selected { + border-color: stencilColor("optimizedCheckout-formField-inputControlColor"); + background-color: stencilColor("optimizedCheckout-formChecklist-backgroundColorSelected"); + } + } + + .optimizedCheckout-contentPrimary { + .optimizedCheckout-checkoutStep { + background-color: transparentize(stencilColor("optimizedCheckout-body-backgroundColor"), 0.5); + + &.checkout-step--current { + background-color: stencilColor("optimizedCheckout-body-backgroundColor"); + } + + &:not(.checkout-step--current) .optimizedCheckout-buttonSecondary { + background-color: transparent; + } + } + } +} From 5c660f7f6924ba77c634d907242bd05eaa43030d Mon Sep 17 00:00:00 2001 From: Richa Patel Date: Tue, 4 Aug 2026 17:34:40 +1000 Subject: [PATCH 02/10] feat(checkout): CHECKOUT-10198 update form checklist colors --- assets/scss/optimized-checkout.scss | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/assets/scss/optimized-checkout.scss b/assets/scss/optimized-checkout.scss index 217ffa4518..176ee56e26 100644 --- a/assets/scss/optimized-checkout.scss +++ b/assets/scss/optimized-checkout.scss @@ -394,10 +394,13 @@ $optimizedCheckout-input--error-boxShadow: 0 0 3px transparentize(stencilColor(" border-color: stencilColor("optimizedCheckout-formField-borderColor"); } - .optimizedCheckout-form-checkbox:checked + .optimizedCheckout-form-label::before, .optimizedCheckout-form-checklist-checkbox:checked ~ .optimizedCheckout-form-label::before { - background-color: stencilColor("optimizedCheckout-formField-inputControlColor"); - border-color: stencilColor("optimizedCheckout-formField-inputControlColor"); + background-color: stencilColor("optimizedCheckout-formChecklist-color"); + border-color: stencilColor("optimizedCheckout-formChecklist-color"); + } + + .optimizedCheckout-form-checklist-checkbox:checked ~ .optimizedCheckout-form-label::after { + background-color: stencilColor("optimizedCheckout-formField-backgroundColor"); } .optimizedCheckout-form-checklist { @@ -406,7 +409,7 @@ $optimizedCheckout-input--error-boxShadow: 0 0 3px transparentize(stencilColor(" } .optimizedCheckout-form-checklist-item--selected { - border-color: stencilColor("optimizedCheckout-formField-inputControlColor"); + border-color: stencilColor("optimizedCheckout-formChecklist-color"); background-color: stencilColor("optimizedCheckout-formChecklist-backgroundColorSelected"); } } From d87d4ee01d2598528f5b632ca610cfd5a18bd9f2 Mon Sep 17 00:00:00 2001 From: Richa Patel Date: Thu, 6 Aug 2026 17:47:16 +1000 Subject: [PATCH 03/10] feat(checkout): CHECKOUT-10198 update order summary style --- assets/scss/optimized-checkout.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/assets/scss/optimized-checkout.scss b/assets/scss/optimized-checkout.scss index 176ee56e26..3419c22291 100644 --- a/assets/scss/optimized-checkout.scss +++ b/assets/scss/optimized-checkout.scss @@ -427,4 +427,10 @@ $optimizedCheckout-input--error-boxShadow: 0 0 3px transparentize(stencilColor(" } } } + + .optimizedCheckout-orderSummary { + svg { + fill: stencilColor("optimizedCheckout-link-color"); + } + } } From 9c3a174f16c700420d7b5040079704635d25d4b8 Mon Sep 17 00:00:00 2001 From: Richa Patel Date: Fri, 7 Aug 2026 12:31:08 +1000 Subject: [PATCH 04/10] feat(checkout): CHECKOUT-10198 add comment for new styles --- assets/scss/optimized-checkout.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/assets/scss/optimized-checkout.scss b/assets/scss/optimized-checkout.scss index 3419c22291..b372bda04e 100644 --- a/assets/scss/optimized-checkout.scss +++ b/assets/scss/optimized-checkout.scss @@ -381,6 +381,11 @@ $optimizedCheckout-input--error-boxShadow: 0 0 3px transparentize(stencilColor(" } +// +// Styles for enhanced theme, which is applied when the +// "Enhanced Checkout" option is enabled in the control panel. +// ----------------------------------------------------------------------------- + .enhancedTheme { background-color: stencilColor("optimizedCheckout-header-backgroundColor"); From 08c1c9ebcbc4d02b2c3b1262ef025d99e29692a6 Mon Sep 17 00:00:00 2001 From: Richa Patel Date: Fri, 7 Aug 2026 12:33:02 +1000 Subject: [PATCH 05/10] feat(checkout): CHECKOUT-10198 update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 138b5c1db1..66d236caf9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## Draft +- Add checkout style overrides for enhanced checkout theme.(CHECKOUT-10198) ## 6.21.0 (07-21-2026) - Display featured promotion callouts on product listing pages (product cards and list view) and the PDP, gated by the new `show_featured_promotions` theme setting and the `featured_promotions` context [#2695](https://github.com/bigcommerce/cornerstone/pull/2695) From 533ca36d811526c2620384d5638379f11b14f772 Mon Sep 17 00:00:00 2001 From: Richa Patel Date: Fri, 7 Aug 2026 12:59:13 +1000 Subject: [PATCH 06/10] feat(checkout): CHECKOUT-10198 update order summary style --- assets/scss/optimized-checkout.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/scss/optimized-checkout.scss b/assets/scss/optimized-checkout.scss index b372bda04e..2256232c66 100644 --- a/assets/scss/optimized-checkout.scss +++ b/assets/scss/optimized-checkout.scss @@ -434,6 +434,10 @@ $optimizedCheckout-input--error-boxShadow: 0 0 3px transparentize(stencilColor(" } .optimizedCheckout-orderSummary { + .optimizedCheckout-orderSummary-toggle { + color: stencilColor("optimizedCheckout-link-color"); + } + svg { fill: stencilColor("optimizedCheckout-link-color"); } From 116d648d852d2d1a6c5bfb9a2add3ac3c25adced Mon Sep 17 00:00:00 2001 From: Richa Patel Date: Mon, 10 Aug 2026 14:41:43 +1000 Subject: [PATCH 07/10] feat(checkout): CHECKOUT-10198 rename enhancedTheme to enhancedThemeV1 --- assets/scss/optimized-checkout.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/scss/optimized-checkout.scss b/assets/scss/optimized-checkout.scss index 2256232c66..9bfb9072de 100644 --- a/assets/scss/optimized-checkout.scss +++ b/assets/scss/optimized-checkout.scss @@ -386,7 +386,7 @@ $optimizedCheckout-input--error-boxShadow: 0 0 3px transparentize(stencilColor(" // "Enhanced Checkout" option is enabled in the control panel. // ----------------------------------------------------------------------------- -.enhancedTheme { +.enhancedThemeV1 { background-color: stencilColor("optimizedCheckout-header-backgroundColor"); .optimizedCheckout-form-select, From 0d8e79d4f1fd650fe2a809b758cc74ce8a53f57e Mon Sep 17 00:00:00 2001 From: Richa Patel Date: Tue, 11 Aug 2026 10:30:31 +1000 Subject: [PATCH 08/10] feat(checkout): CHECKOUT-10198 address comment --- assets/scss/optimized-checkout.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/scss/optimized-checkout.scss b/assets/scss/optimized-checkout.scss index 9bfb9072de..5b336c836e 100644 --- a/assets/scss/optimized-checkout.scss +++ b/assets/scss/optimized-checkout.scss @@ -394,8 +394,8 @@ $optimizedCheckout-input--error-boxShadow: 0 0 3px transparentize(stencilColor(" background-color: stencilColor("optimizedCheckout-formField-backgroundColor"); } - .form-field:not(.form-field--error) .optimizedCheckout-form-input:not(:focus), - .form-field:not(.form-field--error) .optimizedCheckout-form-select:not(:focus) { + .form-field:not(.form-field--error) .optimizedCheckout-form-input:not(:focus):not(:hover), + .form-field:not(.form-field--error) .optimizedCheckout-form-select:not(:focus):not(:hover) { border-color: stencilColor("optimizedCheckout-formField-borderColor"); } From e042c1f8e5ce25b649e7de38c4ea5639d44983a1 Mon Sep 17 00:00:00 2001 From: Richa Patel Date: Wed, 12 Aug 2026 16:04:43 +1000 Subject: [PATCH 09/10] feat(checkout): CHECKOUT-10198 refactor --- assets/scss/optimized-checkout.scss | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/assets/scss/optimized-checkout.scss b/assets/scss/optimized-checkout.scss index 5b336c836e..2297836a1a 100644 --- a/assets/scss/optimized-checkout.scss +++ b/assets/scss/optimized-checkout.scss @@ -389,16 +389,6 @@ $optimizedCheckout-input--error-boxShadow: 0 0 3px transparentize(stencilColor(" .enhancedThemeV1 { background-color: stencilColor("optimizedCheckout-header-backgroundColor"); - .optimizedCheckout-form-select, - .optimizedCheckout-form-input { - background-color: stencilColor("optimizedCheckout-formField-backgroundColor"); - } - - .form-field:not(.form-field--error) .optimizedCheckout-form-input:not(:focus):not(:hover), - .form-field:not(.form-field--error) .optimizedCheckout-form-select:not(:focus):not(:hover) { - border-color: stencilColor("optimizedCheckout-formField-borderColor"); - } - .optimizedCheckout-form-checklist-checkbox:checked ~ .optimizedCheckout-form-label::before { background-color: stencilColor("optimizedCheckout-formChecklist-color"); border-color: stencilColor("optimizedCheckout-formChecklist-color"); @@ -436,10 +426,10 @@ $optimizedCheckout-input--error-boxShadow: 0 0 3px transparentize(stencilColor(" .optimizedCheckout-orderSummary { .optimizedCheckout-orderSummary-toggle { color: stencilColor("optimizedCheckout-link-color"); - } - svg { - fill: stencilColor("optimizedCheckout-link-color"); + svg { + fill: stencilColor("optimizedCheckout-link-color"); + } } } } From 3daa6f09059f6c230557ea99091c55dcf6de7639 Mon Sep 17 00:00:00 2001 From: Richa Patel Date: Fri, 14 Aug 2026 14:19:11 +1000 Subject: [PATCH 10/10] feat(checkout): CHECKOUT-10198 update changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 66d236caf9..7651e94bd0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,7 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ## Draft -- Add checkout style overrides for enhanced checkout theme.(CHECKOUT-10198) +- Add checkout style overrides for enhanced checkout theme. [#2721](https://github.com/bigcommerce/cornerstone/pull/2721) ## 6.21.0 (07-21-2026) - Display featured promotion callouts on product listing pages (product cards and list view) and the PDP, gated by the new `show_featured_promotions` theme setting and the `featured_promotions` context [#2695](https://github.com/bigcommerce/cornerstone/pull/2695)