# Styling Differences with PWA Kit

PWA Kit styling is largely Chakra CSS-in-JS with prop-based responsive and variant systems. Storefront Next styling centers on Tailwind utility classes, CSS variables, and class-variant composition. The migration is primarily a syntax and architecture shift from style props/theme objects to utility classes and typed variant helpers.

## Key Differences

| Aspect            | PWA Kit (Chakra)                         | Storefront Next (Tailwind/shadcn)               |
| ----------------- | ---------------------------------------- | ----------------------------------------------- |
| Approach          | CSS-in-JS with JavaScript objects        | Utility-first CSS with class strings            |
| Theme Location    | `app/theme/` directory                   | `src/app.css` CSS variables                     |
| Component Styling | `useMultiStyleConfig` hook               | `cva()` + `cn()` utilities                      |
| Design Tokens     | JavaScript objects (colors.js, space.js) | CSS custom properties (--primary, --background) |
| Variants          | Props-based (`colorScheme`, `variant`)   | Class-based via CVA                             |
| Responsive        | Array syntax `[base, sm, md, lg]`        | Prefix syntax `sm:` `md:` `lg:`                 |
| Runtime           | Generates styles at run time             | Pre-compiled utilities                          |
| Dark Mode         | Theme color mode provider                | CSS variables + `dark:` prefix                  |
| Bundle            | Includes Chakra UI runtime               | Zero runtime (utility classes)                  |
| Type Safety       | PropTypes                                | Full TypeScript with `VariantProps`             |

## Styling Declaration Comparison

### Responsive Container

PWA Kit (Chakra):

```jsx
<Box px={[4, 4, 6, 6, 8]} maxWidth="container.xxxl" marginX="auto">
  {children}
</Box>
```

Storefront Next (Tailwind):

```tsx
<div className="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">{children}</div>
```

### Button Variants

PWA Kit (Chakra):

```jsx
<Button variant="solid" colorScheme="blue" size="md">
    Primary
</Button>
<Button variant="outline" colorScheme="black">
    Secondary
</Button>
```

Storefront Next (Tailwind):

```tsx
<Button variant="default" size="default">
    Primary
</Button>
<Button variant="outline">
    Secondary
</Button>
```

### Conditional Visibility

PWA Kit (Chakra):

```jsx
<Box display={["none", "none", "none", "block"]}>Desktop only content</Box>
```

Storefront Next (Tailwind):

```tsx
<div className="hidden lg:block">Desktop only content</div>
```

## Key Similarities

- Component-based architecture: Both use composable UI components.
- Design token systems: Both define colors, spacing, and other tokens centrally.
- Variant support: Both support multiple variants and sizes for components.
- Responsive design: Both provide breakpoint-based responsive utilities.
- Dark mode: Both support light and dark theme switching.
- Accessibility: Both use accessible UI primitives (Chakra built-in, Radix UI in shadcn).

## Storefront Conversion Considerations

Keep these considerations in mind when converting a storefront from PWA Kit to Storefront Next.

- Theme Conversion: Convert JavaScript theme tokens to CSS custom properties.
- Responsive Syntax: Convert array-based responsive values `[a, b, c]` to prefix-based `sm:b md:c`.
- Component Props to Classes: Replace Chakra style props with Tailwind utility classes.
- Layer Styles: Convert layer styles to Tailwind `@apply` directives or component classes.
- Multi-part Components: Replace `useMultiStyleConfig` with compound component patterns.
- Variant Logic: Use CVA for variant management instead of Chakra's variant system.
- Pseudo-selectors: Convert `_hover`, `_active`, and so on to Tailwind modifiers `hover:`, `active:`.

<!-- For detailed component mapping between Chakra and Tailwind/shadcn, see the UI Component Mapping guide (to be created).>