@o2vend/theme-cli 1.0.37 → 1.0.38

package/test-theme/templates/error.liquid

@@ -69,27 +69,29 @@
 </div>
 
 <style>
-  /* CSS Variables - Default Theme Colors */
+  /* Template-level variable mappings to global theme variables */
   :root {
-    --color-primary: #000000;
-    --color-secondary: #6b7280;
+    --color-primary: {{ settings.color_primary | default: '#000000' }};
+    --color-secondary: {{ settings.color_secondary | default: '#666666' }};
     --color-white: #ffffff;
-    --color-gray-50: #f9fafb;
-    --color-gray-100: #f3f4f6;
-    --color-gray-200: #e5e7eb;
-    --color-gray-300: #d1d5db;
-    --color-gray-400: #9ca3af;
-    --color-gray-500: #6b7280;
-    --color-gray-600: #4b5563;
-    --color-gray-700: #374151;
-    --color-gray-800: #1f2937;
-    --color-gray-900: #111827;
-    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    --font-display: 'Playfair Display', Georgia, serif;
-    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --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' }};
+    --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;
+    --shadow-sm: var(--shadow-sm);
+    --shadow: var(--shadow);
+    --shadow-md: var(--shadow-md);
+    --shadow-lg: var(--shadow-lg);
   }
 
   * {
@@ -358,14 +360,14 @@
 
 <script>
   // Wait for DOM to be ready
-  (function() {
+  (() => {
     'use strict';
     
     function initErrorPage() {
       const retryButton = document.getElementById('retry-button');
       
       if (retryButton) {
-        retryButton.addEventListener('click', function() {
+        retryButton.addEventListener('click', () => {
           // Reload the page
           window.location.reload();
         });

package/test-theme/templates/index.liquid

@@ -4,6 +4,35 @@
   Uses sections for better customization and widget support
 {% endcomment %}
 
+<!-- Template-level variable mappings to global theme variables -->
+<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-danger: {{ settings.color_error | default: '#ef4444' }};
+    --color-danger-light: {{ settings.color_error | default: '#ef4444' }};
+    --color-text: {{ settings.color_text | default: '#000000' }};
+    --color-text-light: {{ 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' }};
+    --shadow-sm: var(--shadow-sm);
+    --shadow-md: var(--shadow-md);
+    --shadow-lg: var(--shadow-lg);
+    --radius-md: var(--radius-md);
+    --radius-lg: var(--radius-lg);
+    --spacing-xs: var(--space-3);
+    --spacing-sm: var(--space-4);
+    --spacing-md: var(--space-6);
+    --spacing-lg: var(--space-8);
+    --spacing-xl: var(--space-12);
+  }
+</style>
+
 <!-- Hero Section -->
 {% section 'sections/hero' %}
 

package/test-theme/templates/login.liquid

@@ -61,6 +61,33 @@
 </div>
 
 <style>
+  /* Template-level variable mappings to global theme variables */
+  :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-danger: {{ settings.color_error | default: '#ef4444' }};
+    --color-danger-light: {{ settings.color_error | default: '#ef4444' }};
+    --color-text: {{ settings.color_text | default: '#000000' }};
+    --color-text-light: {{ 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' }};
+    --shadow-sm: var(--shadow-sm);
+    --shadow-md: var(--shadow-md);
+    --shadow-lg: var(--shadow-lg);
+    --radius-md: var(--radius-md);
+    --radius-lg: var(--radius-lg);
+    --spacing-xs: var(--space-3);
+    --spacing-sm: var(--space-4);
+    --spacing-md: var(--space-6);
+    --spacing-lg: var(--space-8);
+    --spacing-xl: var(--space-12);
+  }
+
   .customer-login {
     min-height: 60vh;
     display: flex;
@@ -117,10 +144,10 @@
     color: {{ settings.color_text }};
   }
 
-  .form-input {
+    .form-input {
     width: 100%;
     padding: 0.75rem 1rem;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--color-border);
     border-radius: 0.375rem;
     font-size: 1rem;
     transition: border-color 0.2s ease;
@@ -149,15 +176,15 @@
   }
 
   .form-errors {
-    background: #fee2e2;
-    border: 1px solid #fecaca;
+    background: var(--color-danger-light);
+    border: 1px solid var(--color-error);
     border-radius: 0.375rem;
     padding: 1rem;
     margin-bottom: 1.5rem;
   }
 
   .form-error {
-    color: #991b1b;
+    color: var(--color-error);
     margin: 0;
     font-size: 0.875rem;
   }
@@ -170,7 +197,7 @@
     text-align: center;
     margin-top: 1.5rem;
     padding-top: 1.5rem;
-    border-top: 1px solid #e5e7eb;
+    border-top: 1px solid var(--color-border);
   }
 
   .customer-login-footer a {

package/test-theme/templates/order-confirmation.liquid

@@ -1,5 +1,33 @@
 {% layout 'layout/theme' %}
 
+<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-danger: {{ settings.color_error | default: '#ef4444' }};
+    --color-danger-light: {{ settings.color_error | default: '#ef4444' }};
+    --color-text: {{ settings.color_text | default: '#000000' }};
+    --color-text-light: {{ 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' }};
+    --shadow-sm: var(--shadow-sm);
+    --shadow-md: var(--shadow-md);
+    --shadow-lg: var(--shadow-lg);
+    --radius-md: var(--radius-md);
+    --radius-lg: var(--radius-lg);
+    --spacing-xs: var(--space-3);
+    --spacing-sm: var(--space-4);
+    --spacing-md: var(--space-6);
+    --spacing-lg: var(--space-8);
+    --spacing-xl: var(--space-12);
+  }
+</style>
+
 <section class="order-confirmation-page">
   <div class="container">
 
@@ -20,7 +48,7 @@
           <strong>#{{ order.orderNumber }}</strong>
         </div>
         <div class="order-info">
-          <div><i class="far fa-calendar"></i> {{ order.createdAt | date: '%d-%m-%Y %H:%M' }}</div>
+          <div><i class="far fa-calendar"></i> {{ order.createdAt | date: '%d-%m-%Y' }}</div>
           <div><span class="status-badge status-{{ order.status | downcase | replace: ' ', '-' }}">{{ order.status }}</span></div>
         </div>
       {% endif %}
@@ -120,10 +148,13 @@
                 <div class="summary-row"><span>Discount{% if orderItem.couponCode %} ({{ orderItem.couponCode }}){% endif %}</span><span>-{{ orderItem.discount  | money_with_settings: shop.settings }}</span></div>
                 {% endif %}
                 <div class="summary-row"><span>Shipping</span><span>{% if orderItem.shipping > 0 %}{{ orderItem.shipping  | money_with_settings: shop.settings }}{% else %}FREE{% endif %}</span></div>
+                {% if orderItem.paymentFeeAmount and orderItem.paymentFeeAmount > 0 %}
+                <div class="summary-row"><span>Payment Fee</span><span>{{ orderItem.paymentFeeAmount  | money_with_settings: shop.settings }}</span></div>
+                {% endif %}
                 <div class="summary-row"><span>Tax</span><span>{{ orderItem.tax  | money_with_settings: shop.settings }}</span></div>
                 <div class="summary-row total-row"><strong>Total</strong><strong>{{ orderItem.total  | money_with_settings: shop.settings }}</strong></div>
               </div>
-              <div class="payment-method"><span>Payment:</span> <strong>{{ orderItem.paymentMethod | default: 'Online Payment' }}</strong></div>
+              <div class="payment-method"><span>Payment:</span> <strong>{{ orderItem.paymentMethod | default: 'Cash on Delivery' }}</strong></div>
             </div>
           </aside>
         </div>
@@ -237,10 +268,13 @@
               <div class="summary-row"><span>Discount{% if order.couponCode %} ({{ order.couponCode }}){% endif %}</span><span>-{{ order.discount  | money_with_settings: shop.settings }}</span></div>
               {% endif %}
               <div class="summary-row"><span>Shipping</span><span>{% if order.shipping > 0 %}{{ order.shipping  | money_with_settings: shop.settings }}{% else %}FREE{% endif %}</span></div>
+              {% if order.paymentFeeAmount and order.paymentFeeAmount > 0 %}
+              <div class="summary-row"><span>Payment Fee</span><span>{{ order.paymentFeeAmount  | money_with_settings: shop.settings }}</span></div>
+              {% endif %}
               <div class="summary-row"><span>Tax</span><span>{{ order.tax  | money_with_settings: shop.settings }}</span></div>
               <div class="summary-row total-row"><strong>Total</strong><strong>{{ order.total  | money_with_settings: shop.settings }}</strong></div>
             </div>
-            <div class="payment-method"><span>Payment:</span> <strong>{{ order.paymentMethod | default: 'Online Payment' }}</strong></div>
+            <div class="payment-method"><span>Payment:</span> <strong>{{ order.paymentMethod | default: 'Cash on Delivery' }}</strong></div>
           </div>
         </aside>
       </div>
@@ -512,11 +546,12 @@ body {
 
 .order-item {
   display: grid;
-  grid-template-columns: 80px 1fr auto;
+  grid-template-columns: 80px minmax(0, 1fr) auto;
   gap: 16px;
   background: #f9fafb;
   padding: 16px;
   border-radius: 8px;
+  align-items: center;
 }
 
 .item-image {
@@ -547,6 +582,7 @@ body {
   font-weight: 600;
   margin: 0 0 6px;
   color: #111;
+  overflow-wrap: anywhere;
 }
 
 .item-info div {
@@ -557,9 +593,12 @@ body {
 .item-total {
   display: flex;
   align-items: center;
+  justify-content: flex-end;
   font-size: 15px;
   font-weight: 700;
   color: #111;
+  white-space: nowrap;
+  text-align: right;
 }
 
 /* =========================================================
@@ -694,12 +733,14 @@ body {
 
 @media (max-width: 768px) {
   .order-item {
-    grid-template-columns: 60px 1fr;
+    grid-template-columns: 60px minmax(0, 1fr) auto;
+    gap: 12px;
   }
   .item-total {
-    grid-column: 2;
-    margin-top: 6px;
-    justify-content: flex-start;
+    grid-column: 3;
+    margin-top: 0;
+    justify-content: flex-end;
+    align-self: center;
   }
   .action-buttons {
     flex-direction: column;
@@ -717,4 +758,21 @@ body {
     padding: 10px 20px;
   }
 }
-</style>
+
+@media (max-width: 480px) {
+  .order-item {
+    grid-template-columns: 52px minmax(0, 1fr);
+  }
+
+  .item-image {
+    width: 52px;
+    height: 52px;
+  }
+
+  .item-total {
+    grid-column: 2;
+    justify-content: flex-start;
+    margin-top: 4px;
+  }
+}
+</style>