allow appearance to be set on session

[pbennett1-godaddy]

Summary

This pull request introduces a robust and consistent approach for handling CSS variable case conversion between kebab-case (used in CSS and local context) and camelCase (required by GraphQL APIs). It refactors the theme and appearance logic to prioritize session-based overrides and ensures that variable merging and conversion are handled correctly throughout the checkout flow.

Case Conversion Utilities:

• Added new utility functions in case-conversion.ts for converting between kebab-case and camelCase, including helpers to convert entire objects for use with GraphQL and CSS.

Theme and Appearance Logic:

• Updated use-theme.tsx to prioritize session appearance over context appearance, ensuring the theme reflects the most relevant user/session data.
• Enhanced use-variables.tsx to merge CSS variables with the following priority: override variables > session appearance variables > context appearance variables. Session variables are converted from camelCase to kebab-case for CSS application. [1] [2]

GraphQL Integration and Type Safety:

• Refactored createCheckoutSession in godaddy.ts to accept appearance variables in kebab-case, convert them to camelCase for GraphQL, and ensure correct typing for input objects. [1] [2]
• Extended the GraphQL mutation in mutations.ts to support all appearance variable fields in camelCase, matching the updated conversion and merging logic.

These changes streamline appearance customization, improve code clarity, and ensure seamless communication between the frontend and GraphQL backend.

Changeset

• Changeset added (docs)

Test Plan

[changeset-bot]

🦋 Changeset detected

Latest commit: dcffd92

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

This PR includes changesets to release 2 packages

Name	Type
@godaddy/react	Patch
nextjs	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

[Copilot]

Pull Request Overview

This PR enables session-based appearance customization for checkout by implementing case conversion utilities and establishing a clear priority hierarchy for appearance settings (session > context overrides). The changes ensure proper transformation between kebab-case CSS variables and camelCase GraphQL fields.

Key Changes:

• Added case conversion utilities to transform between kebab-case and camelCase for CSS/GraphQL interoperability
• Updated theme and variable hooks to prioritize session appearance over context appearance
• Extended GraphQL mutation and session creation to support full appearance configuration

Reviewed Changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
mutations.ts	Added appearance fields (theme and all CSS variables) to the CreateCheckoutSession GraphQL mutation
godaddy.ts	Implemented case conversion from kebab-case to camelCase for appearance variables before sending to GraphQL API
use-variables.tsx	Enhanced variable merging logic to include session variables with proper priority ordering
use-theme.tsx	Updated to prioritize session appearance theme over context appearance
case-conversion.ts	New utility file providing bidirectional case conversion functions for CSS variables
nasty-maps-bathe.md	Added changeset documenting the new feature

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.