@base44/app-plugin-commerce 0.4.1 → 0.5.0

package/skills/commerce/references/storefront-styling.md

@@ -1,99 +0,0 @@
----
-read_when: "You are writing the CSS for the cart, drawer, checkout or receipt — the parts' look."
----
-
-# Styling the parts
-
-The parts ship **layout geometry and nothing else** (`src/commerce/storefront/parts/parts.css`,
-loaded automatically by `@/commerce/storefront`): field grids, labels above
-full-width controls, media as a fixed square, rows as media + content +
-controls with the money pushed right, totals as label-left/value-right, the
-drawer as a right-hand panel over a full-viewport overlay. Nothing in it
-carries color, background, border, radius, shadow, font or text decoration — a
-release check enforces that — so an unstyled store reads as *unfinished*, never
-as broken, and the look is entirely yours.
-
-**Every rule is wrapped in `:where()`, so its specificity is 0.** A plain
-`[data-part="row"] { display: grid }` in your stylesheet wins — no `!important`,
-no cascade fights, no need to know what the sheet did.
-
-## Two ways in, one vocabulary
-
-```css
-/* index.css — selectors, next to the store's design classes */
-[data-part="control"] { … }
-[data-part="option"][data-state="selected"] { … }
-[data-part="row"][data-pending] { opacity: .55; }
-```
-
-```jsx
-{/* or classes, keyed by the same data-part names */}
-<Cart.Lines className="bag" classes={{ row: "bag-row", media: "bag-thumb", "line-total": "price" }} />
-```
-
-Tailwind reaches inner parts with arbitrary variants
-(`className="[&_[data-part=option]]:choice-row"`) or `@apply` inside a design
-class. Either way the names are the ones below.
-
-## The minimum that makes a store look designed
-
-⚑ **Style the controls.** Browser-default inputs are a white box in a system
-font — on a dark or branded storefront that alone reads as unfinished:
-
-```css
-[data-part="control"], [data-part="input"] {
-  border: …; background: …; color: inherit; font: inherit; padding: …;
-}
-[data-part="control"]:focus-visible { outline: …; }      /* keep a visible focus ring */
-[data-part="field"][data-invalid] [data-part="control"] { border-color: …; }
-```
-
-Then, in the store's own values: the labels (`[data-part="label"]` — size,
-tracking, case), the option rows (`[data-part="option"]` — padding, border,
-and the `[data-state="selected"]` treatment, which is the one control customers
-look for), the totals (`[data-part="value"]`, `[data-emphasis]` for the total
-line), the buttons (`[data-part="place-order"]`, `apply`, `remove`,
-`increase`/`decrease`), the notices (`[data-part="error"]`, `blocker`, `hint` —
-`[data-severity="error"]` marks the loud ones), and the drawer surface
-(`[data-part="panel"]` needs a background of its own, `[data-part="overlay"]` a
-scrim).
-
-**The parts add no outer margins** — space *between* sections comes from the
-containers you wrap them in (`gap` on your checkout grid, your aside, your
-drawer panel's column).
-
-## Tuning the built-in geometry
-
-Set these anywhere — `:root`, a page, one part — instead of rewriting the rules:
-
-| Custom property | Default | Controls |
-|---|---|---|
-| `--commerce-gap` | `1rem` | fields, rows, options, panel sections |
-| `--commerce-gap-tight` | `0.4rem` | label→control, name→attributes, stepper |
-| `--commerce-field-columns` | `2` | address-form columns (set `1` in a narrow aside or a media query) |
-| `--commerce-media-size` | `4rem` | cart/summary thumbnail edge |
-| `--commerce-drawer-width` | `28rem` | drawer panel width |
-| `--commerce-drawer-z` | `50` | drawer stacking order (raise above a sticky header) |
-
-## `data-part` inventory
-
-| Part root | Inner `data-part`s | State attributes |
-|---|---|---|
-| `address-fields`; `ship-to-different` | field · label · required · control · error | `data-which`, `data-key`, `data-span`, `data-invalid` |
-| `shipping-methods` `payment-methods` | hint · option · option-input · option-label · option-cost / option-description · chosen | `data-state="selected"`, `data-syncing`, `data-severity` |
-| `lines` `items`; `notices` | row · media · content · name · attributes · controls · stepper · increase · decrease · quantity · remove · line-total · error; notice | `data-pending`, `data-empty`, `data-code` |
-| `totals`; `payment-instructions` | row · label · value; description · account | `data-key`, `data-emphasis` |
-| `coupon-field` | input · apply · error · applied · code · remove | `data-busy` |
-| `place-order` · `order-error` · `blockers` | blocker | `data-state="placing"`, `data-code` |
-| `trigger` · `drawer` | overlay · panel; `close` | `data-state="open\|closed"` |
-
-`media` is an `<img>` when the line has an image and an empty `<div
-data-part="media" data-empty>` when it doesn't — same box either way, so style
-the placeholder (`[data-empty]`) rather than letting it render as a hole.
-
-## When CSS isn't enough
-
-A control that needs different markup takes the part's render override
-(`inputRender`, `optionRender`, `lineRender`, `itemRender`, `fieldRender`) —
-your element, the part's wiring. A whole section that needs different structure
-drops to its hook: [`./storefront-custom.md`](./storefront-custom.md).