@o2vend/theme-cli 1.0.36 → 1.0.38

package/test-theme/snippets/mega-menu.liquid

@@ -74,6 +74,93 @@
 </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;
+  
+  /* Typography - mapped from settings */
+  --font-primary: {{ settings.font_primary | default: '' }}, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  
+  /* 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;
+  --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);
+}
+
   /* Menu Navigation Styles */
   .header-menu-nav {
     flex: 1 1 auto;
@@ -92,16 +179,16 @@
 
   .header-menu-nav__loading,
   .header-menu-nav__error {
-    padding: 0.5rem 0;
-    color: #000;
-    font-size: 1rem;
+    padding: var(--space-2) 0;
+    color: var(--color-black);
+    font-size: var(--text-base);
     opacity: 0.6;
   }
 
   .header-menu-nav__list {
     display: flex;
     align-items: center;
-    gap: 1.5rem;
+    gap: var(--space-5);
     list-style: none;
     margin: 0;
     padding: 0;
@@ -129,7 +216,7 @@
   }
 
   .header-menu-nav__link:hover {
-    color: #333;
+    color: var(--color-gray-700);
   }
 
   .header-menu-nav__item.has-children .header-menu-nav__link::after {
@@ -137,26 +224,26 @@
     display: inline-block;
     width: 0;
     height: 0;
-    border-left: 0.25rem solid transparent;
-    border-right: 0.25rem solid transparent;
-    border-top: 0.3125rem solid #000;
-    margin-left: 0.25rem;
+    border-left: var(--space-1) solid transparent;
+    border-right: var(--space-1) solid transparent;
+    border-top: 0.3125rem solid var(--color-black);
+    margin-left: var(--space-1);
   }
 
   .header-menu-nav__submenu {
     position: absolute;
-    top: calc(100% + 0.5rem);
+  top: 100%;
     left: 0;
     display: none;
     flex-direction: column;
-    background: #fff;
-    padding: 0.5rem 0;
-    border-radius: 8px;
-    box-shadow: 0 1rem 1.5rem rgba(0, 0, 0, 0.1);
+    background: var(--color-white);
+    padding: var(--space-2) 0;
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-md);
     min-width: 12.5rem;
     list-style: none;
     margin: 0;
-    z-index: 100;
+    z-index: var(--z-dropdown);
     border: 0.125rem solid rgba(0, 0, 0, 0.08);
   }
 
@@ -167,10 +254,10 @@
   .header-menu-nav__submenu-link {
     display: block;
     padding: 0.625rem 1.25rem;
-    color: #000;
+    color: var(--color-black);
     text-decoration: none;
-    font-size: 0.875rem;
-    transition: background-color 150ms ease;
+    font-size: var(--text-sm);
+    transition: background-color var(--duration-150) var(--ease-out);
   }
 
   .header-menu-nav__submenu-link:hover {
@@ -190,13 +277,13 @@
       width: 100% !important;
       height: 100vh !important;
       background-color: rgba(0, 0, 0, 0.5);
-      backdrop-filter: blur(2px);
-      z-index: 9999 !important;
+      backdrop-filter: blur(var(--space-0-5));
+      z-index: var(--z-modal) !important;
       pointer-events: none;
       display: block !important;
       opacity: 0;
       visibility: hidden;
-      transition: opacity 300ms ease, visibility 300ms ease;
+      transition: opacity var(--duration-300) var(--ease-out), visibility var(--duration-300) var(--ease-out);
       margin: 0 !important;
       padding: 0 !important;
     }
@@ -221,12 +308,12 @@
       width: 280px !important;
       max-width: 85vw !important;
       height: 100% !important;
-      background-color: #fff !important;
-      padding: 1.5rem !important;
+      background-color: var(--color-white) !important;
+      padding: var(--space-6) !important;
       overflow-y: auto !important;
       transform: translateX(-100%);
-      transition: transform 300ms ease;
-      box-shadow: 0.125rem 0 0.5rem rgba(0, 0, 0, 0.15);
+      transition: transform var(--duration-300) var(--ease-out);
+      box-shadow: var(--shadow-md);
       display: flex !important;
       flex-direction: column !important;
       margin: 0 !important;
@@ -240,13 +327,13 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
-      margin-bottom: 1.5rem;
-      padding-bottom: 0.75rem;
+      margin-bottom: var(--space-6);
+      padding-bottom: var(--space-3);
       border-bottom: 0.125rem solid rgba(0, 0, 0, 0.08);
     }
 
     .header-menu-nav__mobile-drawer-title {
-      font-size: 1.125rem;
+      font-size: var(--text-2xl);
       font-weight: 600;
       margin: 0;
     }
@@ -260,7 +347,7 @@
       background: none;
       border: none;
       cursor: pointer;
-      border-radius: 0.25rem;
+      border-radius: var(--radius);
     }
 
     .header-menu-nav__mobile-drawer-close:hover {
@@ -284,17 +371,17 @@
 
     .header-menu-nav__mobile-drawer-link {
       display: block;
-      padding: 1rem 0;
-      color: #000;
+      padding: var(--spacing-sm) 0;
+      color: var(--color-black);
       text-decoration: none;
       font-weight: 500;
-      font-size: 1.2rem;
+      font-size: var(--text-lg);
     }
 
     .header-menu-nav__mobile-drawer-sublist {
       list-style: none;
       margin: 0;
-      padding: 0 0 0 1rem;
+      padding: 0 0 0 var(--spacing-sm);
       border-left: 0.125rem solid rgba(0, 0, 0, 0.08);
       display: none;
     }
@@ -305,10 +392,10 @@
 
     .header-menu-nav__mobile-drawer-sublink {
       display: block;
-      padding: 0.75rem 0;
-      color: #000;
+      padding: var(--space-3) 0;
+      color: var(--color-black);
       text-decoration: none;
-      font-size: 0.875rem;
+      font-size: var(--text-sm);
     }
   }
 
@@ -321,7 +408,7 @@
 </style>
 
 <script>
-(function() {
+(() => {
   'use strict';
   
   // Prevent multiple initializations
@@ -395,7 +482,7 @@
         toggle.dataset.menuListenerAttached = 'true';
         
         // Toggle button click handler (only on mobile)
-        toggle.addEventListener('click', function(e) {
+        toggle.addEventListener('click', (e) => {
           // Double check we're on mobile
           if (window.innerWidth > 768) {
             console.log('[HeaderMenu] Ignoring toggle click on desktop');
@@ -420,7 +507,7 @@
         
         // Close button handler
         if (drawerClose) {
-          drawerClose.addEventListener('click', function(e) {
+          drawerClose.addEventListener('click', (e) => {
             e.preventDefault();
             e.stopPropagation();
             console.log('[HeaderMenu] Close button clicked');
@@ -433,7 +520,7 @@
         
         // Close on Escape key (only add once)
         if (!window.__headerMenuEscapeHandler) {
-          window.__headerMenuEscapeHandler = function(e) {
+          window.__headerMenuEscapeHandler = (e) => {
             if (e.key === 'Escape' && window.innerWidth <= 768) {
               const currentDrawer = document.getElementById('header-menu-mobile-drawer');
               if (currentDrawer && currentDrawer.classList.contains('active')) {
@@ -447,7 +534,7 @@
         
         // Close on outside click (only add once)
         if (!window.__headerMenuOverlayHandler) {
-          window.__headerMenuOverlayHandler = function(e) {
+          window.__headerMenuOverlayHandler = (e) => {
             if (window.innerWidth > 768) return;
             const currentDrawer = document.getElementById('header-menu-mobile-drawer');
             if (currentDrawer && currentDrawer.classList.contains('active')) {
@@ -743,7 +830,7 @@
         const newLink = link.cloneNode(true);
         link.parentNode.replaceChild(newLink, link);
         
-        newLink.addEventListener('click', function(e) {
+        newLink.addEventListener('click', (e) => {
           const submenu = item.querySelector('.header-menu-nav__mobile-drawer-sublist');
           if (submenu) {
             e.preventDefault();
@@ -800,7 +887,7 @@
   }
 
   if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', () => {
       init();
       normalizeServerRenderedLinks();
     });

package/test-theme/snippets/news-thumbnail.liquid

@@ -33,7 +33,7 @@
 {% assign news_category = news_item.category | default: news_item.Category %}
 
 <div class="news-thumbnail">
-  <a href="/news/{{ news_slug }}" class="news-thumbnail__link">
+  <a href="/{{ news_slug }}" class="news-thumbnail__link">
     {% if news_image and news_image != blank %}
       <div class="news-thumbnail__image">
         {% if news_image contains 'http://' or news_image contains 'https://' %}
@@ -76,19 +76,111 @@
 </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 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;
+  
+  /* Line heights - mapped from settings */
+  --leading-none: 1;
+  --leading-normal: {{ settings.line_height_base | default: 1.6 }};
+  --leading-snug: 1.375;
+  --tracking-wider: var(--tracking-wider);
+}
+
   .news-thumbnail {
     width: 100%;
     height: 100%;
-    background: #fff;
-    border-radius: 8px;
+    background: var(--color-white);
+    border-radius: var(--radius-md);
     overflow: hidden;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    box-shadow: var(--shadow-sm);
+    transition: transform var(--transition), box-shadow var(--transition);
   }
 
   .news-thumbnail:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    transform: translateY(calc(-1 * var(--space-1)));
+    box-shadow: var(--shadow-md);
   }
 
   .news-thumbnail__link {
@@ -103,7 +195,7 @@
     width: 100%;
     aspect-ratio: 16 / 9;
     overflow: hidden;
-    background: #f5f5f5;
+    background: var(--color-gray-50);
   }
 
   .news-thumbnail__image img {
@@ -119,32 +211,32 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: #f5f5f5;
-    color: #999;
+    background: var(--color-gray-50);
+    color: var(--color-gray-400);
   }
 
   .news-thumbnail__content {
-    padding: 16px;
+    padding: var(--spacing-element);
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: 8px;
+    gap: var(--space-2);
   }
 
   .news-thumbnail__category {
-    font-size: 12px;
-    font-weight: 600;
+    font-size: var(--text-xs);
+    font-weight: var(--font-weight-bold);
     text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: #666;
+    letter-spacing: var(--tracking-wider);
+    color: var(--color-gray-400);
   }
 
   .news-thumbnail__title {
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 1.4;
+    font-size: var(--text-base);
+    font-weight: var(--font-weight-bold);
+    line-height: var(--leading-tight);
     margin: 0;
-    color: #111;
+    color: var(--color-gray-900);
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
@@ -152,9 +244,9 @@
   }
 
   .news-thumbnail__excerpt {
-    font-size: 14px;
-    line-height: 1.6;
-    color: #666;
+    font-size: var(--text-sm);
+    line-height: var(--leading-normal);
+    color: var(--color-gray-400);
     margin: 0;
     display: -webkit-box;
     -webkit-line-clamp: 3;
@@ -164,22 +256,22 @@
   }
 
   .news-thumbnail__date {
-    font-size: 12px;
-    color: #999;
+    font-size: var(--text-xs);
+    color: var(--color-gray-400);
     margin-top: auto;
   }
 
   @media (max-width: 768px) {
     .news-thumbnail__content {
-      padding: 12px;
+      padding: var(--space-3);
     }
 
     .news-thumbnail__title {
-      font-size: 14px;
+      font-size: var(--text-sm);
     }
 
     .news-thumbnail__excerpt {
-      font-size: 13px;
+      font-size: var(--text-sm);
       -webkit-line-clamp: 2;
     }
   }

package/test-theme/snippets/pagination.liquid

@@ -88,7 +88,7 @@
   
   <script>
   // Preserve URL parameters when navigating pagination
-  (function() {
+  (() => {
     'use strict';
     
     const paginationContainer = document.getElementById('pagination-container');