@svadmin/lite 0.16.10 → 0.17.0

package/dist/components/layout/LiteSidebar.svelte

@@ -44,10 +44,10 @@
     {/each}
   {/if}
   {#if userName}
-    <div style="position:absolute;bottom:0;left:0;right:0;padding:12px 16px;border-top:1px solid #334155;font-size:12px;color:#94a3b8;">
+    <div style="position:absolute;bottom:0;left:0;right:0;padding:12px 16px;border-top:1px solid #1D2129;font-size:12px;color:#86909C;">
       {userName}
       <form method="POST" action={`${basePath}/login?/logout`} style="display:inline;margin-left:8px;">
-        <button type="submit" class="lite-btn lite-btn-sm" style="color:#94a3b8;border-color:#475569;background:transparent;padding:2px 8px;">Logout</button>
+        <button type="submit" class="lite-btn lite-btn-sm" style="color:#86909C;border-color:#4E5969;background:transparent;padding:2px 8px;">Logout</button>
       </form>
     </div>
   {/if}

package/dist/components/pages/LiteForgotPasswordPage.svelte

@@ -18,11 +18,11 @@
   }: Props = $props();
 </script>
 
-<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f8fafc; padding: 20px;">
+<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #F7F8FA; padding: 20px;">
   <div class="lite-card" style="width: 100%; max-width: 400px; padding: 32px;">
     <div style="text-align: center; margin-bottom: 24px;">
-      <h1 style="font-size: 24px; font-weight: 600; color: #0f172a; margin: 0 0 8px;">{title}</h1>
-      <p style="font-size: 14px; color: #64748b; margin: 0;">{description}</p>
+      <h1 style="font-size: 24px; font-weight: 600; color: #1D2129; margin: 0 0 8px;">{title}</h1>
+      <p style="font-size: 14px; color: #4E5969; margin: 0;">{description}</p>
     </div>
 
     <form method="POST" {action} class="lite-stack-lg">
@@ -32,7 +32,7 @@
       </div>
 
       {#if errors.length > 0}
-        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
+        <div style="padding: 12px; background: #FFECE8; border-radius: 6px; color: #F53F3F; font-size: 13px;">
           <ul style="margin: 0; padding-left: 20px;">
             {#each errors as err, _i (_i)}
               <li>{err}</li>
@@ -42,7 +42,7 @@
       {/if}
 
       {#if successMessage}
-        <div style="padding: 12px; background: #ecfdf5; border-radius: 6px; color: #10b981; font-size: 13px;">
+        <div style="padding: 12px; background: #E8FFEA; border-radius: 6px; color: #00B42A; font-size: 13px;">
           {successMessage}
         </div>
       {/if}
@@ -51,8 +51,8 @@
         Send Reset Link
       </button>
 
-      <div style="text-align: center; font-size: 13px; color: #64748b; margin-top: 8px;">
-        Remember your password? <a href={loginUrl} style="color: #2563eb; text-decoration: none;">Back to Login</a>
+      <div style="text-align: center; font-size: 13px; color: #4E5969; margin-top: 8px;">
+        Remember your password? <a href={loginUrl} style="color: #165DFF; text-decoration: none;">Back to Login</a>
       </div>
     </form>
   </div>

package/dist/components/pages/LiteListPage.svelte

@@ -78,7 +78,7 @@
   </div>
 
   <div class="lite-card" style="margin-bottom: 20px;">
-    <div style="padding: 16px; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
+    <div style="padding: 16px; border-bottom: 1px solid #E5E6EB; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
       <form method="GET" class="lite-filter-bar" style="margin: 0;">
         <input
           type="text"
@@ -127,7 +127,7 @@
         {/if}
       </form>
 
-      <span style="font-size: 13px; color: #64748b;">
+      <span style="font-size: 13px; color: #4E5969;">
         {t("common.total") || "Total"}: <strong>{total}</strong>
       </span>
     </div>

package/dist/components/pages/LiteProfilePage.svelte

@@ -36,7 +36,7 @@
       <!-- Password update fields can be added here or handled in a separate form -->
 
       {#if errors.length > 0}
-        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
+        <div style="padding: 12px; background: #FFECE8; border-radius: 6px; color: #F53F3F; font-size: 13px;">
           <ul style="margin: 0; padding-left: 20px;">
             {#each errors as err, _i (_i)}
               <li>{err}</li>
@@ -46,7 +46,7 @@
       {/if}
 
       {#if successMessage}
-        <div style="padding: 12px; background: #ecfdf5; border-radius: 6px; color: #10b981; font-size: 13px;">
+        <div style="padding: 12px; background: #E8FFEA; border-radius: 6px; color: #00B42A; font-size: 13px;">
           {successMessage}
         </div>
       {/if}

package/dist/components/pages/LiteRegisterPage.svelte

@@ -17,11 +17,11 @@
   }: Props = $props();
 </script>
 
-<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f8fafc; padding: 20px;">
+<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #F7F8FA; padding: 20px;">
   <div class="lite-card" style="width: 100%; max-width: 400px; padding: 32px;">
     <div style="text-align: center; margin-bottom: 24px;">
-      <h1 style="font-size: 24px; font-weight: 600; color: #0f172a; margin: 0 0 8px;">{title}</h1>
-      <p style="font-size: 14px; color: #64748b; margin: 0;">{description}</p>
+      <h1 style="font-size: 24px; font-weight: 600; color: #1D2129; margin: 0 0 8px;">{title}</h1>
+      <p style="font-size: 14px; color: #4E5969; margin: 0;">{description}</p>
     </div>
 
     <form method="POST" {action} class="lite-stack-lg">
@@ -41,7 +41,7 @@
       </div>
 
       {#if errors.length > 0}
-        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
+        <div style="padding: 12px; background: #FFECE8; border-radius: 6px; color: #F53F3F; font-size: 13px;">
           <ul style="margin: 0; padding-left: 20px;">
             {#each errors as err, _i (_i)}
               <li>{err}</li>
@@ -54,8 +54,8 @@
         Register
       </button>
 
-      <div style="text-align: center; font-size: 13px; color: #64748b; margin-top: 8px;">
-        Already have an account? <a href={loginUrl} style="color: #2563eb; text-decoration: none;">Login</a>
+      <div style="text-align: center; font-size: 13px; color: #4E5969; margin-top: 8px;">
+        Already have an account? <a href={loginUrl} style="color: #165DFF; text-decoration: none;">Login</a>
       </div>
     </form>
   </div>

package/dist/components/pages/LiteShowPage.svelte

@@ -59,10 +59,10 @@
     <div class="lite-stack-lg">
       {#each showFields as field, _i (_i)}
         <div>
-          <div style="display: block; font-size: 13px; font-weight: 500; color: #64748b; margin-bottom: 8px;">
+          <div style="display: block; font-size: 13px; font-weight: 500; color: #4E5969; margin-bottom: 8px;">
             {field.label}
           </div>
-          <div style="color: #0f172a; font-size: 14px;">
+          <div style="color: #1D2129; font-size: 14px;">
             <LiteShowField {field} value={record[field.key]} {basePath} />
           </div>
         </div>

package/dist/components/pages/LiteUpdatePasswordPage.svelte

@@ -14,11 +14,11 @@
   }: Props = $props();
 </script>
 
-<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f8fafc; padding: 20px;">
+<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #F7F8FA; padding: 20px;">
   <div class="lite-card" style="width: 100%; max-width: 400px; padding: 32px;">
     <div style="text-align: center; margin-bottom: 24px;">
-      <h1 style="font-size: 24px; font-weight: 600; color: #0f172a; margin: 0 0 8px;">{title}</h1>
-      <p style="font-size: 14px; color: #64748b; margin: 0;">{description}</p>
+      <h1 style="font-size: 24px; font-weight: 600; color: #1D2129; margin: 0 0 8px;">{title}</h1>
+      <p style="font-size: 14px; color: #4E5969; margin: 0;">{description}</p>
     </div>
 
     <form method="POST" {action} class="lite-stack-lg">
@@ -33,7 +33,7 @@
       </div>
 
       {#if errors.length > 0}
-        <div style="padding: 12px; background: #fef2f2; border-radius: 6px; color: #ef4444; font-size: 13px;">
+        <div style="padding: 12px; background: #FFECE8; border-radius: 6px; color: #F53F3F; font-size: 13px;">
           <ul style="margin: 0; padding-left: 20px;">
             {#each errors as err, _i (_i)}
               <li>{err}</li>

package/dist/components/widgets/LiteAnomalyBadge.svelte

@@ -32,12 +32,12 @@
 </script>
 
 {#if !isAnomaly}
-  <span style="font-size: 14px; color: #64748b;">{formatter(value)}</span>
+  <span style="font-size: 14px; color: #4E5969;">{formatter(value)}</span>
 {:else}
   <span
     title="Baseline: {formatter(baseline)} ({diff > 0 ? '+' : '-'}{percentLabel})"
     class="lite-badge"
-    style="background: {isGood ? '#ecfdf5' : '#fef2f2'}; color: {isGood ? '#065f46' : '#991b1b'}; border: 1px solid {isGood ? '#a7f3d0' : '#fecaca'};"
+    style="background: {isGood ? '#E8FFEA' : '#FFECE8'}; color: {isGood ? '#009A29' : '#CB272D'}; border: 1px solid {isGood ? '#E8FFEA' : '#FDCDC5'};"
   >
     {arrow} {formatter(value)}
   </span>

package/dist/components/widgets/LiteBarChart.svelte

@@ -22,7 +22,7 @@
 
 <div class="lite-card" style="margin-bottom: 16px;">
   {#if title}
-    <div style="padding: 12px 16px; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 14px; color: #0f172a;">
+    <div style="padding: 12px 16px; border-bottom: 1px solid #E5E6EB; font-weight: 600; font-size: 14px; color: #1D2129;">
       {title}
     </div>
   {/if}
@@ -30,16 +30,16 @@
     {#each data as point, _i (_i)}
       <div>
         <div style="display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 13px;">
-          <span style="color: #334155;">{point.label}</span>
-          <span style="color: #64748b; font-weight: 500;">{point.value}</span>
+          <span style="color: #1D2129;">{point.label}</span>
+          <span style="color: #4E5969; font-weight: 500;">{point.value}</span>
         </div>
-        <div style="height: 20px; background: #f1f5f9; border-radius: 4px; overflow: hidden;">
-          <div style="height: 100%; width: {(point.value / maxValue) * 100}%; background: {point.color ?? '#6366f1'}; border-radius: 4px; transition: width 0.3s;"></div>
+        <div style="height: 20px; background: #F2F3F5; border-radius: 4px; overflow: hidden;">
+          <div style="height: 100%; width: {(point.value / maxValue) * 100}%; background: {point.color ?? '#165DFF'}; border-radius: 4px; transition: width 0.3s;"></div>
         </div>
       </div>
     {/each}
     {#if data.length === 0}
-      <p style="color: #94a3b8; font-style: italic; text-align: center;">No data</p>
+      <p style="color: #86909C; font-style: italic; text-align: center;">No data</p>
     {/if}
   </div>
 </div>

package/dist/components/widgets/LiteInsightCard.svelte

@@ -17,15 +17,15 @@
 </script>
 
 <div class="lite-card" style="margin-bottom: 16px;">
-  <div class="lite-inline-md" style="padding: 12px 16px; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 14px; color: #0f172a; align-items: center;">
-    <span style="color: #f59e0b;">✦</span>
+  <div class="lite-inline-md" style="padding: 12px 16px; border-bottom: 1px solid #E5E6EB; font-weight: 600; font-size: 14px; color: #1D2129; align-items: center;">
+    <span style="color: #FF7D00;">✦</span>
     {title}
   </div>
-  <div style="padding: 16px; font-size: 14px; color: #334155; line-height: 1.6;">
+  <div style="padding: 16px; font-size: 14px; color: #1D2129; line-height: 1.6;">
     {#if displayContent}
       <p style="white-space: pre-wrap; margin: 0;">{displayContent}</p>
     {:else}
-      <p style="color: #94a3b8; font-style: italic;">No insights available. AI analysis requires JavaScript.</p>
+      <p style="color: #86909C; font-style: italic;">No insights available. AI analysis requires JavaScript.</p>
     {/if}
   </div>
 </div>

package/dist/components/widgets/LiteLineChart.svelte

@@ -20,27 +20,27 @@
 
 <div class="lite-card" style="margin-bottom: 16px;">
   {#if title}
-    <div style="padding: 12px 16px; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 14px; color: #0f172a;">
+    <div style="padding: 12px 16px; border-bottom: 1px solid #E5E6EB; font-weight: 600; font-size: 14px; color: #1D2129;">
       {title}
     </div>
   {/if}
   <table style="width: 100%; border-collapse: collapse;">
     <thead>
       <tr>
-        <th style="text-align: left; padding: 10px 16px; font-size: 12px; color: #64748b; border-bottom: 1px solid #e2e8f0;">Label</th>
-        <th style="text-align: right; padding: 10px 16px; font-size: 12px; color: #64748b; border-bottom: 1px solid #e2e8f0;">{valueLabel}</th>
+        <th style="text-align: left; padding: 10px 16px; font-size: 12px; color: #4E5969; border-bottom: 1px solid #E5E6EB;">Label</th>
+        <th style="text-align: right; padding: 10px 16px; font-size: 12px; color: #4E5969; border-bottom: 1px solid #E5E6EB;">{valueLabel}</th>
       </tr>
     </thead>
     <tbody>
       {#each data as point, i (i)}
-        <tr style="background: {i % 2 === 0 ? '#ffffff' : '#f8fafc'};">
-          <td style="padding: 8px 16px; font-size: 13px; color: #334155;">{point.label}</td>
-          <td style="padding: 8px 16px; font-size: 13px; color: #0f172a; text-align: right; font-weight: 500;">{point.value}</td>
+        <tr style="background: {i % 2 === 0 ? '#ffffff' : '#F7F8FA'};">
+          <td style="padding: 8px 16px; font-size: 13px; color: #1D2129;">{point.label}</td>
+          <td style="padding: 8px 16px; font-size: 13px; color: #1D2129; text-align: right; font-weight: 500;">{point.value}</td>
         </tr>
       {/each}
       {#if data.length === 0}
         <tr>
-          <td colspan="2" style="padding: 16px; text-align: center; color: #94a3b8; font-style: italic;">No data</td>
+          <td colspan="2" style="padding: 16px; text-align: center; color: #86909C; font-style: italic;">No data</td>
         </tr>
       {/if}
     </tbody>

package/dist/components/widgets/LitePieChart.svelte

@@ -18,12 +18,12 @@
   let { data, title }: Props = $props();
 
   const total = $derived(data.reduce((sum, d) => sum + d.value, 0));
-  const defaultColors = ['#6366f1', '#f59e0b', '#10b981', '#ef4444', '#8b5cf6', '#06b6d4', '#f97316', '#ec4899'];
+  const defaultColors = ['#165DFF', '#FF7D00', '#00B42A', '#F53F3F', '#8b5cf6', '#06b6d4', '#f97316', '#ec4899'];
 </script>
 
 <div class="lite-card" style="margin-bottom: 16px;">
   {#if title}
-    <div style="padding: 12px 16px; border-bottom: 1px solid #e2e8f0; font-weight: 600; font-size: 14px; color: #0f172a;">
+    <div style="padding: 12px 16px; border-bottom: 1px solid #E5E6EB; font-weight: 600; font-size: 14px; color: #1D2129;">
       {title}
     </div>
   {/if}
@@ -32,13 +32,13 @@
       {@const pct = total > 0 ? ((point.value / total) * 100).toFixed(1) : '0.0'}
       <div class="lite-inline-lg" style="align-items: center; font-size: 13px;">
         <span style="width: 12px; height: 12px; border-radius: 50%; background: {point.color ?? defaultColors[i % defaultColors.length]}; flex-shrink: 0;"></span>
-        <span style="flex: 1; color: #334155;">{point.label}</span>
-        <span style="color: #64748b; font-weight: 500;">{point.value}</span>
-        <span style="color: #94a3b8; font-size: 12px; min-width: 48px; text-align: right;">{pct}%</span>
+        <span style="flex: 1; color: #1D2129;">{point.label}</span>
+        <span style="color: #4E5969; font-weight: 500;">{point.value}</span>
+        <span style="color: #86909C; font-size: 12px; min-width: 48px; text-align: right;">{pct}%</span>
       </div>
     {/each}
     {#if data.length === 0}
-      <p style="color: #94a3b8; font-style: italic; text-align: center;">No data</p>
+      <p style="color: #86909C; font-style: italic; text-align: center;">No data</p>
     {/if}
   </div>
 </div>