@o2vend/theme-cli 1.0.36 → 1.0.38

package/test-theme/snippets/breadcrumbs.liquid

@@ -16,7 +16,7 @@
     
     # Collection page
     if collection
-      assign breadcrumbs = breadcrumbs | append: ' / <a href="/collections">Collections</a>'
+      assign breadcrumbs = breadcrumbs | append: ' / <a href="/categories">Categories</a>'
       assign breadcrumbs = breadcrumbs | append: ' / <span>' | append: collection.title | append: '</span>'
     endif
     
@@ -57,7 +57,7 @@
       {% if collection %}
         <li class="breadcrumbs-item">
           <span class="breadcrumbs-separator">/</span>
-          <a href="/collections" class="breadcrumbs-link">Collections</a>
+          <a href="/categories" class="breadcrumbs-link">Categories</a>
         </li>
         <li class="breadcrumbs-item">
           <span class="breadcrumbs-separator">/</span>
@@ -90,9 +90,96 @@
 </nav>
 
 <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 */
+  --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;
+  --leading-none: var(--leading-none);
+  --leading-normal: var(--leading-normal);
+  --leading-snug: var(--leading-snug);
+  --tracking-wider: var(--tracking-wider);
+}
+
   .breadcrumbs {
-    padding: 1rem 0;
-    font-size: 0.875rem;
+    padding: var(--spacing-sm) 0;
+    font-size: var(--text-sm);
   }
 
   .breadcrumbs-list {
@@ -102,32 +189,32 @@
     list-style: none;
     margin: 0;
     padding: 0;
-    gap: 0.5rem;
+    gap: var(--space-2);
   }
 
   .breadcrumbs-item {
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: var(--space-2);
   }
 
   .breadcrumbs-separator {
-    color: {{ settings.color_text_light }};
+    color: var(--color-text-light);
   }
 
   .breadcrumbs-link {
-    color: {{ settings.color_text_light }};
+    color: var(--color-text-light);
     text-decoration: none;
-    transition: color 0.2s ease;
+    transition: color var(--transition);
   }
 
   .breadcrumbs-link:hover {
-    color: {{ settings.color_primary }};
+    color: var(--color-primary);
     text-decoration: underline;
   }
 
   .breadcrumbs-current {
-    color: {{ settings.color_text }};
+    color: var(--color-text);
     font-weight: 500;
   }
 </style>

package/test-theme/snippets/cart-drawer.liquid

@@ -62,6 +62,99 @@
 </div>
 
 <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;
+  --spacing-component: {{ settings.spacing_component | default: 24 }}px;
+  --spacing-element: {{ settings.spacing_element | default: 16 }}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 */
+  --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;
+}
+
 .cart-drawer {
   position: fixed;
   inset: 0;

package/test-theme/snippets/delivery-zone-city-selector.liquid

@@ -19,6 +19,92 @@
 </div>
 
 <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-sm: var(--shadow-sm);
+  --shadow-md: var(--shadow-md);
+  --shadow-lg: var(--shadow-lg);
+  --shadow-opacity: {{ settings.shadow_opacity | default: 0.1 }};
+  --shadow-blur: {{ settings.shadow_blur | default: 8 }}px;
+  --radius-sm: var(--radius-md);
+  --radius-md: var(--radius-lg);
+  --radius-lg: var(--radius-xl);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-full: var(--radius-full);
+  --spacing-xs: var(--space-2);
+  --spacing-sm: var(--space-4);
+  --spacing-md: var(--space-6);
+  --spacing-lg: var(--space-8);
+  --spacing-xl: var(--space-12);
+  --space-0: var(--space-0);
+  --space-0-5: var(--space-0-5);
+  --space-1: var(--space-1);
+  --space-1-5: var(--space-1-5);
+  --space-2: var(--space-2);
+  --space-3: var(--space-3);
+  --space-3-5: var(--space-3-5);
+  --space-4: var(--space-4);
+  --space-5: var(--space-5);
+  --space-6: var(--space-6);
+  --text-xs: var(--text-xs);
+  --text-sm: var(--text-sm);
+  --text-base: var(--text-base);
+  --text-lg: var(--text-lg);
+  --text-xl: var(--text-xl);
+  --text-2xl: var(--text-2xl);
+  --transition: var(--transition);
+  --transition-fast: var(--transition-fast);
+  --transition-slow: var(--transition-slow);
+  --duration-150: var(--duration-150);
+  --duration-300: var(--duration-300);
+  --ease-out: var(--ease-out);
+  --ease-in: var(--ease-in);
+  --ease-in-out: var(--ease-in-out);
+  --z-10: var(--z-10);
+  --z-modal: var(--z-modal);
+  --z-dropdown: var(--z-dropdown);
+  --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 }};
+  --leading-none: var(--leading-none);
+  --leading-normal: var(--leading-normal);
+  --leading-snug: var(--leading-snug);
+  --tracking-wider: var(--tracking-wider);
+}
+
 .delivery-zone-city-container {
   position: relative;
   width: 100%;
@@ -26,18 +112,18 @@
 
 .delivery-zone-city-select {
   width: 100%;
-  padding: 14px 16px;
+  padding: var(--space-3-5) var(--space-4);
   border: 2px solid #a78bfa;
-  border-radius: 12px;
-  font-size: 16px;
-  background: white;
+  border-radius: var(--radius-lg);
+  font-size: var(--text-lg);
+  background: var(--color-white);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all var(--transition);
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
-  background-position: right 16px center;
-  padding-right: 40px;
+  background-position: right var(--space-4) center;
+  padding-right: 2.5rem;
 }
 
 .delivery-zone-city-select:focus {
@@ -49,14 +135,14 @@
 .delivery-zone-loading-cities {
   display: none;
   position: absolute;
-  right: 16px;
+  right: var(--space-4);
   top: 50%;
   transform: translateY(-50%);
   display: none;
   align-items: center;
-  gap: 8px;
-  font-size: 12px;
-  color: #6b7280;
+  gap: var(--spacing-xs);
+  font-size: var(--text-xs);
+  color: var(--color-gray-400);
 }
 
 .delivery-zone-loading-cities.active {
@@ -64,11 +150,11 @@
 }
 
 .spinner-small {
-  width: 16px;
-  height: 16px;
-  border: 2px solid #e5e7eb;
+  width: var(--space-4);
+  height: var(--space-4);
+  border: 2px solid var(--color-gray-200);
   border-top-color: #a78bfa;
-  border-radius: 50%;
+  border-radius: var(--radius-full);
   animation: spin 0.8s linear infinite;
 }