diff --git a/CHANGELOG.md b/CHANGELOG.md index 138b5c1db1..7651e94bd0 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. [#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) diff --git a/assets/scss/optimized-checkout.scss b/assets/scss/optimized-checkout.scss index 75e84f2a89..2297836a1a 100644 --- a/assets/scss/optimized-checkout.scss +++ b/assets/scss/optimized-checkout.scss @@ -379,3 +379,57 @@ $optimizedCheckout-input--error-boxShadow: 0 0 3px transparentize(stencilColor(" background-color: stencilColor("optimizedCheckout-loadingToaster-backgroundColor"); color: stencilColor("optimizedCheckout-loadingToaster-textColor"); } + + +// +// Styles for enhanced theme, which is applied when the +// "Enhanced Checkout" option is enabled in the control panel. +// ----------------------------------------------------------------------------- + +.enhancedThemeV1 { + background-color: stencilColor("optimizedCheckout-header-backgroundColor"); + + .optimizedCheckout-form-checklist-checkbox:checked ~ .optimizedCheckout-form-label::before { + 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 { + .optimizedCheckout-form-checklist-item { + border-color: stencilColor("optimizedCheckout-formChecklist-borderColor"); + } + + .optimizedCheckout-form-checklist-item--selected { + border-color: stencilColor("optimizedCheckout-formChecklist-color"); + 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; + } + } + } + + .optimizedCheckout-orderSummary { + .optimizedCheckout-orderSummary-toggle { + color: stencilColor("optimizedCheckout-link-color"); + + svg { + fill: stencilColor("optimizedCheckout-link-color"); + } + } + } +}