commerce-components-follow-up

[sbolinger-godaddy]

Summary

Stores built in AAB sometimes have a mismatched background color on the catalog item list component. Removing the ability to set this background should make it very unlikely to happen by default.

A separate AAB PR is also updating the skill guidance https://github.com/gdcorp-partners/airo-app-builder/pull/11280

Setting --commerce-surface to theme controls and the cart drawer also painted catalog, product-card, and product-detail wrappers, producing contrasting blocks inside the host page. Keep those wrappers transparent so the host owns page and section backgrounds, while retaining opaque themed controls and the drawer.

Update the theme documentation and compiled CSS regression test to enforce this separation. Existing consumers that intentionally relied on the token painting wrappers should move those backgrounds onto their own layout elements.

Changeset

• Patch changeset added for @godaddy/gd-commerce-storefront.

Test Plan

• Built the storefront package and ran all 28 tests, typecheck, and Biome checks: passed.
• Confirmed the updated artifact regression fails against the original compiled CSS, then passes after removing the wrapper background declaration.
• Browser smoke test against the standalone demo: catalog and product wrappers remain transparent with light and dark surface tokens; the portalled drawer remains opaque with the configured surface color.
• Captured and inspected before/after demo screenshots. The before comparison restores the removed CSS declaration on the same rendered demo; it is not a rebuild of the reported customer site.

Bug-fix details

Reported directly during development: Commerce palette customization creates an unintended contrasting rectangle around the product collection. This changes the storefront's appearance while browsing products; no cart or checkout failure was reported.

[changeset-bot]

🦋 Changeset detected

Latest commit: 8b3072b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@godaddy/gd-commerce-storefront	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[wcole1-godaddy]

Checked out the branch, built, and ran test/typecheck/lint locally — all green (28/28). Verified the drawer stays opaque (Dialog.Content uses bg-white → var(--commerce-surface, #fff) in the compiled CSS) and that .commerce-storefront .bg-white exists as an exact selector in dist/styles.css, so the new artifact assertion is matching a real rule.

A few non-blocking suggestions:

1. The "guarantee" is weaker than described. StorefrontTheme is still CSSProperties & {...} (src/commerce-provider.tsx:52) and is spread onto the wrapper via style={theme} (src/storefront-surface.tsx:13). A theme={{ backgroundColor: '#f5f5f5' }} still paints the wrapper. If you want the README's "do not set background/backgroundColor/backgroundImage" to be enforced rather than advisory:

export type StorefrontTheme = Omit<CSSProperties, 'background' | 'backgroundColor' | 'backgroundImage'> & {
  '--commerce-accent'?: string;
  // ...
};

Still assignable to React's style. Fine as a follow-up given the AAB guidance PR is separate.

2. Dead CSS. .commerce-inline { background-color: transparent } (src/styles.css:35) existed to override the wrapper background for the inline cart button. With the wrapper no longer painting anything, the background-color: transparent half is a no-op and can be dropped (keep display: inline-block).

3. PR title. Recent history uses PR titles as squash-commit subjects. The commit message — "Keep commerce component wrappers transparent" — would be a better title than the branch name.

[sbolinger-godaddy]

@wcole1-godaddy addressed your comments