@spwig/theme-cli 1.1.0 → 2.0.0

package/dist/templates/theme/README.md.template

@@ -6,54 +6,84 @@
 
 - **Author**: {{author}}
 - **Version**: 1.0.0
+- **SDK Version**: 2.0
 - **License**: {{license}}
+- **Min Platform Version**: 2.0.0
 
 ## Features
 
 - Responsive design optimized for all devices
-- Modern and clean aesthetics
-- Customizable color schemes via design tokens
-- Performance optimized
+- Mobile-first approach
+- Fully customizable via design tokens
+- Header and footer presets included
 - Accessible and SEO-friendly
 
+## Theme Structure
+
+```
+{{themeName}}/
+├── manifest.json          # Theme metadata and configuration
+├── tokens.json            # Design tokens (colors, typography, spacing, etc.)
+├── presets/
+│   ├── header.json        # Default header layout preset
+│   └── footer.json        # Default footer layout preset
+├── css/
+│   └── theme.css          # Custom CSS overrides (optional)
+├── preview.png            # Theme preview image
+└── README.md
+```
+
 ## Development
 
 ```bash
-# Start development server
+# Start development server with live preview
 spwig dev
 
-# Validate theme
+# Validate theme structure and tokens
 spwig validate
 
 # Package for distribution
 spwig package
 ```
 
-## Bundled Components
+## Customization
 
-This theme includes the following components:
+### Design Tokens
 
-- **Default Header** - Site header with navigation
-- **Default Footer** - Site footer with links
-- **Hero Section** - Eye-catching hero banner
+The `tokens.json` file is the primary deliverable of your theme. It controls every visual aspect of the storefront:
 
-## Customization
+- **Colors** - Primary, secondary, accent, text, backgrounds, borders, status colors
+- **Typography** - Font families, sizes, weights, line heights, letter spacing
+- **Spacing** - Consistent spacing scale used throughout the layout
+- **Borders** - Border widths and radius values
+- **Shadows** - Elevation levels from subtle to prominent
+- **Transitions** - Animation durations and easing functions
+- **Breakpoints** - Responsive design breakpoints
+- **Z-Index** - Layering system for overlapping elements
+- **Container** - Max width and padding for page content
+- **Menu** - Navigation styling and behavior
+- **Header** - Header zones, backgrounds, text colors, and per-layout-type overrides
+- **Footer** - Footer zones, backgrounds, text colors
+- **Search** - Search input, button, and dropdown styling
+- **Buttons** - Primary, secondary, neutral, and danger button variants (solid, outline, ghost)
+- **Cards** - Default, elevated, bordered, and minimal card variants
+- **Elements** - Hero, heading, body text, form, product card, gallery, modal, and more
+- **Widgets** - Account, cart, logo, language, currency, announcement, newsletter, social, links, text, payment, trust badges, contact
 
-### Design Tokens
+Edit `tokens.json` to customize any of these values. The platform converts tokens into CSS custom properties automatically.
+
+### Header & Footer Presets
 
-Edit `design_tokens.json` to customize colors, typography, spacing, and more.
+The `presets/` directory contains default header and footer configurations:
 
-### Components
+- **header.json** - Defines the header layout type, sticky behavior, zone layout, and widget placements
+- **footer.json** - Defines the footer layout type, zone layout, and widget placements
 
-Components are located in the `components/` directory. Each component has:
-- `manifest.json` - Component configuration
-- `template.html` - Component template
-- `schema.json` - Component settings schema
-- `styles.css` - Component styles (optional)
+These presets are applied when a merchant activates your theme, giving them a ready-to-use layout that matches your design vision.
 
-### Pages
+### Custom CSS (Optional)
 
-Page schemas are in the `pages/` directory. Configure which components appear on each page type.
+For advanced customization beyond tokens, add a `css/theme.css` file. This CSS is loaded after the token-generated styles and can override specific rules.
 
 ## Support
 

package/dist/templates/theme/manifest.json.template

@@ -1,40 +1,18 @@
 {
   "name": "{{themeName}}",
   "version": "1.0.0",
+  "sdk_version": "2.0",
   "display_name": "{{displayName}}",
   "description": "{{description}}",
   "author": "{{author}}",
   "license": "{{license}}",
-  "bundled_components": [
-    {
-      "type": "header",
-      "name": "default_header",
-      "path": "components/headers/default_header"
-    },
-    {
-      "type": "footer",
-      "name": "default_footer",
-      "path": "components/footers/default_footer"
-    },
-    {
-      "type": "section",
-      "name": "hero_section",
-      "path": "components/sections/hero_section"
-    }
-  ],
-  "page_schemas": {
-    "home": "pages/home.json",
-    "product": "pages/product.json",
-    "collection": "pages/collection.json",
-    "cart": "pages/cart.json"
-  },
-  "design_tokens": "design_tokens.json",
+  "min_platform_version": "2.0.0",
   "tags": ["ecommerce", "modern"],
   "categories": ["general"],
   "features": [
     "Responsive design",
-    "Modern aesthetics",
-    "Customizable color schemes",
-    "Performance optimized"
-  ]
+    "Mobile-first",
+    "Customizable via design tokens"
+  ],
+  "preview_image": "preview.png"
 }