@o2vend/theme-cli 1.0.36 → 1.0.38

package/test-theme/sections/hero.liquid

@@ -1,136 +1,159 @@
-{% comment %}
-  Hero Section
-  
-  This section renders widgets from the "hero" section in order.
-  Widgets are rendered one below another, sorted by Position field.
-  Supports drag-and-drop ordering in visual editor.
-{% endcomment %}
-
-{% comment %}Hero Section - Always render, with widgets or fallback{% endcomment %}
-{% assign hero_widgets = widgets.hero %}
-{% if hero_widgets and hero_widgets.size > 0 %}
-  <section class="theme-section theme-section--hero" data-section="hero" data-section-id="{{ section.id }}">
-    {% for widget in hero_widgets %}
-      <div class="theme-widget-wrapper" 
-           data-widget-id="{{ widget.id }}" 
-           data-widget-type="{{ widget.type }}"
-           data-widget-position="{{ widget.Position | default: widget.position | default: forloop.index }}">
-        {{ widget | render_widget }}
-      </div>
-    {% endfor %}
-  </section>
-  <style>
-    .theme-section--hero .theme-widget-wrapper {
-      display: block;
-    }
-    .widget-error {
-      padding: 1rem;
-      background: #fee2e2;
-      border: 1px solid #fecaca;
-      border-radius: 0.5rem;
-      color: #991b1b;
-      font-size: 0.875rem;
-    }
-  </style>
-{% else %}
-  {% render 'sections/hero-fallback' %}
-{% endif %}
-
-{% schema %}
-{
-  "name": "Hero",
-  "settings": [
-    {
-      "type": "paragraph",
-      "content": "This section displays widgets from the 'hero' section. Widgets are automatically ordered by their Position field and can be reordered in the visual editor."
-    },
-    {
-      "type": "image_picker",
-      "id": "hero_image",
-      "label": "Hero Image",
-      "info": "Recommended size: 1920x800px"
-    },
-    {
-      "type": "text",
-      "id": "hero_title",
-      "label": "Hero Title",
-      "default": "Welcome to Our Store"
-    },
-    {
-      "type": "textarea",
-      "id": "hero_subtitle",
-      "label": "Hero Subtitle",
-      "default": "Discover amazing products at great prices"
-    },
-    {
-      "type": "text",
-      "id": "hero_button_text",
-      "label": "Primary Button Text",
-      "default": "Shop Now"
-    },
-    {
-      "type": "url",
-      "id": "hero_button_url",
-      "label": "Primary Button URL",
-      "default": "/collections/all"
-    },
-    {
-      "type": "text",
-      "id": "hero_button_2_text",
-      "label": "Secondary Button Text"
-    },
-    {
-      "type": "url",
-      "id": "hero_button_2_url",
-      "label": "Secondary Button URL"
-    },
-    {
-      "type": "select",
-      "id": "text_position",
-      "label": "Text Position",
-      "options": [
-        {
-          "value": "left",
-          "label": "Left"
-        },
-        {
-          "value": "center",
-          "label": "Center"
-        },
-        {
-          "value": "right",
-          "label": "Right"
-        }
-      ],
-      "default": "center"
-    },
-    {
-      "type": "color",
-      "id": "text_color",
-      "label": "Text Color",
-      "default": "#ffffff"
-    },
-    {
-      "type": "range",
-      "id": "overlay_opacity",
-      "label": "Overlay Opacity",
-      "min": 0,
-      "max": 0.8,
-      "step": 0.1,
-      "default": 0.4
-    }
-  ],
-  "presets": [
-    {
-      "name": "Hero",
-      "settings": {
-        "hero_title": "Welcome to Our Store",
-        "hero_subtitle": "Discover amazing products at great prices",
-        "hero_button_text": "Shop Now",
-        "hero_button_url": "/collections/all"
-      }
-    }
-  ]
-}
-{% endschema %}
-
+{% comment %}
+  Hero Section
+  
+  This section renders widgets from the "hero" section in order.
+  Widgets are rendered one below another, sorted by Position field.
+  Supports drag-and-drop ordering in visual editor.
+{% endcomment %}
+
+{% comment %}Hero Section - Always render, with widgets or fallback{% endcomment %}
+{% assign hero_widgets = widgets.hero %}
+
+{%- comment -%}
+  If other sections (content, main, sidebar, footer, header) have widgets,
+  we don't want to show the hero fallback when hero is empty.
+{%- endcomment -%}
+{% assign other_widget_sections = 'content,main,sidebar,footer,header' | split: ',' %}
+{% assign has_other_widgets = false %}
+{% for s in other_widget_sections %}
+  {% assign group = widgets[s] %}
+  {% if group and group.size > 0 %}
+    {% assign has_other_widgets = true %}
+  {% endif %}
+{% endfor %}
+
+{% if hero_widgets and hero_widgets.size > 0 %}
+  <section class="theme-section theme-section--hero" data-section="hero" data-section-id="{{ section.id }}">
+    {% for widget in hero_widgets %}
+      <div class="theme-widget-wrapper" 
+           data-widget-id="{{ widget.id }}" 
+           data-widget-type="{{ widget.type }}"
+           data-widget-position="{{ widget.Position | default: widget.position | default: forloop.index }}">
+        {% if widget and widget.template_path %}
+          {% render widget.template_path, widget: widget, settings: settings, shop: shop, is_hero_first: forloop.first %}
+        {% else %}
+          <div class="widget-error" data-widget-error>
+            <p>Widget template not found: {{ widget.template_path | default: 'unknown' }}</p>
+            <p>Widget type: {{ widget.type | default: 'unknown' }}</p>
+          </div>
+        {% endif %}
+      </div>
+    {% endfor %}
+  </section>
+  <style>
+    .theme-section--hero .theme-widget-wrapper {
+      display: block;
+    }
+    .widget-error {
+      padding: 1rem;
+      background: #fee2e2;
+      border: 1px solid #fecaca;
+      border-radius: 0.5rem;
+      color: #991b1b;
+      font-size: 0.875rem;
+    }
+  </style>
+{% elsif has_other_widgets %}
+  {%- comment -%} hero empty but other sections have widgets -> render nothing here {%- endcomment -%}
+{% else %}
+  {% render 'sections/hero-fallback' %}
+{% endif %}
+
+{% schema %}
+{
+  "name": "Hero",
+  "settings": [
+    {
+      "type": "paragraph",
+      "content": "This section displays widgets from the 'hero' section. Widgets are automatically ordered by their Position field and can be reordered in the visual editor."
+    },
+    {
+      "type": "image_picker",
+      "id": "hero_image",
+      "label": "Hero Image",
+      "info": "Recommended size: 1920x800px"
+    },
+    {
+      "type": "text",
+      "id": "hero_title",
+      "label": "Hero Title",
+      "default": "Welcome to Our Store"
+    },
+    {
+      "type": "textarea",
+      "id": "hero_subtitle",
+      "label": "Hero Subtitle",
+      "default": "Discover amazing products at great prices"
+    },
+    {
+      "type": "text",
+      "id": "hero_button_text",
+      "label": "Primary Button Text",
+      "default": "Shop Now"
+    },
+    {
+      "type": "url",
+      "id": "hero_button_url",
+      "label": "Primary Button URL",
+      "default": "/categories"
+    },
+    {
+      "type": "text",
+      "id": "hero_button_2_text",
+      "label": "Secondary Button Text"
+    },
+    {
+      "type": "url",
+      "id": "hero_button_2_url",
+      "label": "Secondary Button URL"
+    },
+    {
+      "type": "select",
+      "id": "text_position",
+      "label": "Text Position",
+      "options": [
+        {
+          "value": "left",
+          "label": "Left"
+        },
+        {
+          "value": "center",
+          "label": "Center"
+        },
+        {
+          "value": "right",
+          "label": "Right"
+        }
+      ],
+      "default": "center"
+    },
+    {
+      "type": "color",
+      "id": "text_color",
+      "label": "Text Color",
+      "default": "#ffffff"
+    },
+    {
+      "type": "range",
+      "id": "overlay_opacity",
+      "label": "Overlay Opacity",
+      "min": 0,
+      "max": 0.8,
+      "step": 0.1,
+      "default": 0.4
+    }
+  ],
+  "presets": [
+    {
+      "name": "Hero",
+      "settings": {
+        "hero_title": "Welcome to Our Store",
+        "hero_subtitle": "Discover amazing products at great prices",
+        "hero_button_text": "Shop Now",
+        "hero_button_url": "/categories"
+      }
+    }
+  ]
+}
+{% endschema %}
+

package/test-theme/snippets/account-sidebar.liquid

@@ -28,19 +28,111 @@
   </div>
 </nav>
 
-<style>/* ===============================
+<style>
+:root {
+  --color-primary: {{ settings.color_primary | default: '#000000' }};
+  --color-primary-hover: {{ settings.color_primary_dark | default: '#333333' }};
+  --color-primary-light: {{ settings.color_primary_light | default: '#666666' }};
+  --color-success: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-light: {{ settings.color_success | default: '#22c55e' }};
+  --color-success-dark: {{ settings.color_success | default: '#22c55e' }};
+  --color-danger: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-light: {{ settings.color_error | default: '#ef4444' }};
+  --color-danger-dark: {{ settings.color_error | default: '#ef4444' }};
+  --color-text: {{ settings.color_text | default: '#000000' }};
+  --color-text-light: {{ settings.color_text_light | default: '#999999' }};
+  --color-text-muted: {{ settings.color_text_muted | default: '#666666' }};
+  --color-background: {{ settings.color_background | default: '#ffffff' }};
+  --color-card-bg: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-border: {{ settings.color_border | default: '#cccccc' }};
+  --color-border-light: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-white: #ffffff;
+  --color-black: {{ settings.color_primary_dark | default: '#333333' }};
+  --color-gray-25: {{ settings.color_background | default: '#ffffff' }};
+  --color-gray-50: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-gray-100: {{ settings.color_surface | default: '#f5f5f5' }};
+  --color-gray-200: {{ settings.color_border | default: '#cccccc' }};
+  --color-gray-300: {{ settings.color_border | default: '#cccccc' }};
+  --color-gray-400: {{ settings.color_text_muted | default: '#666666' }};
+  --color-gray-500: {{ settings.color_text_muted | default: '#666666' }};
+  --color-gray-600: {{ settings.color_text_muted | default: '#666666' }};
+  --color-gray-700: {{ settings.color_text | default: '#000000' }};
+  --color-gray-800: {{ settings.color_text | default: '#000000' }};
+  --color-gray-900: {{ settings.color_text | default: '#000000' }};
+  /* Shadow variables - mapped from settings */
+  --shadow-opacity: {{ settings.shadow_opacity | default: 0.1 }};
+  --shadow-blur: {{ settings.shadow_blur | default: 8 }}px;
+  --shadow-spread: {{ settings.shadow_spread | default: 0 }}px;
+  
+  /* Border radius - mapped from settings */
+  --radius-sm: {{ settings.border_radius_small | default: 6 }}px;
+  --radius-md: {{ settings.border_radius_medium | default: 10 }}px;
+  --radius-lg: {{ settings.border_radius_large | default: 16 }}px;
+  --radius-xl: 24px;
+  --radius-2xl: 32px;
+  --radius-full: 9999px;
+  
+  /* Spacing - mapped from settings */
+  --spacing-xs: {{ settings.spacing_xsmall | default: 4 }}px;
+  --spacing-sm: {{ settings.spacing_small | default: 8 }}px;
+  --spacing-md: {{ settings.spacing_element | default: 16 }}px;
+  --spacing-lg: {{ settings.spacing_component | default: 24 }}px;
+  --spacing-xl: {{ settings.spacing_large | default: 32 }}px;
+  
+  /* Typography - mapped from settings */
+  --font-primary: {{ settings.font_primary | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-heading: {{ settings.font_heading | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-display: {{ settings.font_display | default: '' }}, 'Georgia', 'Times New Roman', serif;
+  --font-body: {{ settings.font_body | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  --font-weight-bold: {{ settings.font_weight_bold | default: 700 }};
+  --font-weight-medium: {{ settings.font_weight_medium | default: 500 }};
+  --line-height-heading: {{ settings.line_height_heading | default: 1.2 }};
+  
+  /* Text sizes - based on font_size_base from settings (12px, 14px, 14px, 16px, 18px, 21px) */
+  --text-xs: 12px;
+  --text-sm: {{ settings.font_size_base | default: 14 }}px;
+  --text-base: {{ settings.font_size_base | default: 14 }}px;
+  --text-lg: 16px;
+  --text-xl: 18px;
+  --text-2xl: 21px;
+  
+  /* Transitions - mapped from settings */
+  --transition-fast: 133ms cubic-bezier(0, 0, 0.2, 1);
+  --transition: {{ settings.button_transition_speed | default: 200 }}ms cubic-bezier(0, 0, 0.2, 1);
+  --transition-slow: 300ms cubic-bezier(0, 0, 0.2, 1);
+  --duration-150: 150ms;
+  --duration-300: 300ms;
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  
+  /* Z-index values */
+  --z-10: 10;
+  --z-modal: 1050;
+  --z-dropdown: 1000;
+  
+  /* Line heights - mapped from settings */
+  --leading-none: 1;
+  --leading-normal: {{ settings.line_height_base | default: 1.6 }};
+  --leading-snug: 1.375;
+  
+  /* Letter spacing - mapped from settings */
+  --tracking-wider: {{ settings.letter_spacing_uppercase | default: 0.05 }}em;
+}
+
+/* ===============================
    Account Menu Toggle Button
 ================================ */
 .account-menu-toggle {
   display: none;
   align-items: center;
-  gap: 8px;
-  background: white;
-  color: black;
-  padding: 12px 16px;
-  border-radius: 10px;
+  gap: var(--space-2);
+  background: var(--color-white);
+  color: var(--color-black);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--radius-xl);
   border: none;
-  font-size: 15px;
+  font-size: var(--text-lg);
   font-weight: 500;
   cursor: pointer;
   z-index: 9997;
@@ -53,10 +145,10 @@
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.45);
-  backdrop-filter: blur(4px);
+  backdrop-filter: blur(var(--space-1));
   opacity: 0;
   visibility: hidden;
-  transition: opacity 0.35s ease, visibility 0.35s ease;
+  transition: opacity var(--duration-300) var(--ease-out), visibility var(--duration-300) var(--ease-out);
   z-index: 9998;
 }
 
@@ -76,9 +168,9 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #eee;
-  font-size: 18px;
+  padding-bottom: var(--space-4);
+  border-bottom: 1px solid var(--color-gray-200);
+  font-size: var(--text-xl);
   font-weight: 600;
 }
 
@@ -87,36 +179,36 @@
   display: none;
   background: none;
   border: none;
-  font-size: 22px;
+  font-size: var(--text-2xl);
   cursor: pointer;
-  line-height: 1;
+  line-height: var(--leading-none);
 }
 
 /* ===============================
    Sidebar Links
 ================================ */
 .account-nav-links {
-  margin-top: 16px;
+  margin-top: var(--space-4);
   display: flex;
   flex-direction: column;
 }
 
 .account-nav-link {
-  padding: 14px 14px;
-  border-radius: 10px;
-  font-size: 15px;
-  color: #333;
+  padding: var(--space-3-5) var(--space-3-5);
+  border-radius: var(--radius-xl);
+  font-size: var(--text-lg);
+  color: var(--color-gray-700);
   text-decoration: none;
-  transition: background 0.25s ease, color 0.25s ease;
+  transition: background var(--transition-slow), color var(--transition-slow);
 }
 
 .account-nav-link:hover {
-  background: #f5f5f5;
+  background: var(--color-gray-50);
 }
 
 .account-nav-link.active {
-  background: #111;
-  color: #fff;
+  background: var(--color-gray-900);
+  color: var(--color-white);
 }
 
 /* ===============================
@@ -137,10 +229,10 @@
     left: 0;
     width: 300px;
     height: 100vh;
-    background: #fff;
-    padding: 20px;
+    background: var(--color-white);
+    padding: var(--space-5);
     transform: translateX(-100%);
-    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform var(--transition-slow) var(--ease-in-out);
     box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
     overflow-y: auto;
   }
@@ -165,11 +257,11 @@
   .account-nav-header {
     position: sticky;
     top: 0;
-    background: #fff;
-    z-index: 1;
+    background: var(--color-white);
+    z-index: var(--z-10);
   }
   .account-sidebar {
-    z-index:999;
+    z-index: var(--z-modal);
   }
 }