@goldencomm/create-baseline 0.0.1

package/templates/shopify-theme/README.md

@@ -0,0 +1,92 @@
+# Baseline — Shopify theme (`@goldencomm/baseline-shopify`)
+
+A minimal **Shopify Online Store 2.0** theme that consumes the Baseline design
+system: it loads the compiled token CSS from `@goldencomm/ds-core` and renders the
+Baseline **Button** through the shared `gcds-button` contract — the same classes,
+tokens, variants, and sizes as the React, HTML, and WordPress targets.
+
+It doubles as the **starter template** for new GoldenComm Shopify themes.
+
+## What's here
+
+```
+layout/theme.liquid              # HTML shell; loads assets/baseline.css
+templates/index.json             # home template — demos the buttons
+sections/baseline-components.liquid  # showcase section; accepts any Baseline block
+blocks/
+  button.liquid                  # the Button — variant (5) + size (3) → gcds-button classes
+  buttons.liquid                 # a Buttons container that ONLY accepts Button children
+config/                          # theme_info + (empty) settings data
+locales/                         # en.default.json (storefront) + en.default.schema.json (editor)
+assets/baseline.css              # synced from ds-core (committed; see "Tokens")
+scripts/sync-tokens.mjs          # copies ds-core/dist/baseline.css → assets/
+```
+
+### Button & Buttons (theme blocks)
+
+The Button lives in `blocks/` so it's available to any section that accepts
+`@theme` blocks. It maps 1:1 to the cross-target contract:
+
+```liquid
+<a class="gcds-button gcds-button--{variant} gcds-button--{size}">…</a>   {# or <button> when no link #}
+```
+
+- **variant** — `primary` (default) · `secondary` · `outline` · `ghost` · `destructive`
+- **size** — `sm` · `md` (default) · `lg`
+
+The **Buttons** block is a layout container that, by schema, accepts **only Button
+blocks** (`"blocks": [{ "type": "button" }]`) and renders them via
+`{% content_for 'blocks' %}`. This mirrors WordPress's `wp:buttons → wp:button` lock,
+so editors get the same "a group of buttons" model on every platform.
+
+## Tokens
+
+`assets/baseline.css` is generated from `@goldencomm/ds-core` (it defines every
+`--color-*`, `--button-*`, `--space-*` custom property plus the `gcds-*` component
+styles). It's **committed** so the theme is self-contained and pushable on a fresh
+checkout. Re-sync after changing tokens:
+
+```bash
+pnpm --filter @goldencomm/baseline-shopify build   # one-off sync
+pnpm --filter @goldencomm/baseline-shopify dev      # re-sync on every ds-core rebuild
+```
+
+From the repo root, `pnpm build` (Turborepo) syncs it after `ds-core` automatically.
+
+Brand per client by overriding the semantic CSS custom properties (e.g. in a small
+`assets/` override or `settings`), exactly as on the other targets — no Liquid changes.
+
+## Local development
+
+Two one-time prerequisites:
+
+1. A **development store** — create a free one at
+   [partners.shopify.com](https://partners.shopify.com) → *Stores → Add store →
+   Create development store* (any store you can log into works).
+2. The **Shopify CLI**: `npm install -g @shopify/cli@latest` (Node 18+).
+
+The token CSS is already vendored (`assets/baseline.css` is committed), so there's
+nothing to build first. From this directory:
+
+```bash
+shopify theme dev --store your-store.myshopify.com
+```
+
+First run opens a browser to authorize, then uploads a hidden **development theme**
+to the store and serves a live preview at <http://127.0.0.1:9292> with hot reload.
+Other useful commands: `shopify theme push`, `shopify theme pull`,
+`shopify theme check`. The `shopify:*` package scripts are thin aliases for these.
+
+### Verify it works
+
+- **Storefront** (`http://127.0.0.1:9292`) — the home page shows a *Variants* row
+  (primary/secondary/outline/ghost/destructive) and a *Sizes* row (small/medium/large),
+  all styled from the `gcds-button` tokens.
+- **Theme editor** (the *Customize* link, or Admin → Online Store → Themes) — add a
+  **Buttons** block and confirm it accepts **only Button** children, and that a
+  Button's variant/size dropdowns update the preview.
+- **Lint** — `shopify theme check`.
+
+> Two-plane workflow: run `ds-core`'s watcher (or root `pnpm dev`) in one terminal so
+> token changes recompile and re-sync into `assets/baseline.css`, and `shopify theme
+> dev` in another to preview them live.