atomicuilibrary 0.1.0 → 0.1.3

package/dist/collection/assets/js/demos/advanced-data-table-demo.js

@@ -122,7 +122,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Phoenix',
       skillset: 'React, Node.js',
       experience: '8 years',
-      avatar: 'https://i.pravatar.cc/150?img=1',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 2,
@@ -143,7 +143,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Alpha',
       skillset: 'SEO, Analytics',
       experience: '6 years',
-      avatar: 'https://i.pravatar.cc/150?img=5',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 3,
@@ -164,7 +164,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Phoenix',
       skillset: 'Python, AWS',
       experience: '10 years',
-      avatar: 'https://i.pravatar.cc/150?img=8',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 4,
@@ -185,7 +185,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Beta',
       skillset: 'CRM, Negotiation',
       experience: '4 years',
-      avatar: 'https://i.pravatar.cc/150?img=9',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 5,
@@ -206,7 +206,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Gamma',
       skillset: 'JavaScript, CSS',
       experience: '2 years',
-      avatar: 'https://i.pravatar.cc/150?img=12',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 6,
@@ -227,7 +227,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Delta',
       skillset: 'Recruitment, Policy',
       experience: '7 years',
-      avatar: 'https://i.pravatar.cc/150?img=20',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 7,
@@ -248,7 +248,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Alpha',
       skillset: 'Content, Copywriting',
       experience: '5 years',
-      avatar: 'https://i.pravatar.cc/150?img=13',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 8,
@@ -269,7 +269,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Beta',
       skillset: 'B2B Sales, Closing',
       experience: '6 years',
-      avatar: 'https://i.pravatar.cc/150?img=23',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 9,
@@ -290,7 +290,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Phoenix',
       skillset: 'Java, Spring',
       experience: '9 years',
-      avatar: 'https://i.pravatar.cc/150?img=14',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 10,
@@ -311,7 +311,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Omega',
       skillset: 'Figma, User Research',
       experience: '5 years',
-      avatar: 'https://i.pravatar.cc/150?img=25',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 11,
@@ -332,7 +332,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Gamma',
       skillset: 'Docker, Kubernetes',
       experience: '7 years',
-      avatar: 'https://i.pravatar.cc/150?img=15',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 12,
@@ -353,7 +353,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Alpha',
       skillset: 'Social Media, Ads',
       experience: '4 years',
-      avatar: 'https://i.pravatar.cc/150?img=26',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 13,
@@ -374,7 +374,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Beta',
       skillset: 'Leadership, Strategy',
       experience: '10 years',
-      avatar: 'https://i.pravatar.cc/150?img=16',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 14,
@@ -395,7 +395,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Phoenix',
       skillset: 'Testing, Automation',
       experience: '5 years',
-      avatar: 'https://i.pravatar.cc/150?img=27',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 15,
@@ -416,7 +416,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Beta',
       skillset: 'Management, Sales',
       experience: '12 years',
-      avatar: 'https://i.pravatar.cc/150?img=17',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 16,
@@ -437,7 +437,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Delta',
       skillset: 'Sourcing, Interviews',
       experience: '3 years',
-      avatar: 'https://i.pravatar.cc/150?img=28',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 17,
@@ -458,7 +458,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Sigma',
       skillset: 'Accounting, Excel',
       experience: '8 years',
-      avatar: 'https://i.pravatar.cc/150?img=18',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 18,
@@ -479,7 +479,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Omega',
       skillset: 'Photoshop, Illustrator',
       experience: '6 years',
-      avatar: 'https://i.pravatar.cc/150?img=29',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 19,
@@ -500,7 +500,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Phoenix',
       skillset: 'MERN, GraphQL',
       experience: '7 years',
-      avatar: 'https://i.pravatar.cc/150?img=19',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 20,
@@ -521,7 +521,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Alpha',
       skillset: 'Branding, Strategy',
       experience: '5 years',
-      avatar: 'https://i.pravatar.cc/150?img=30',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 21,
@@ -542,7 +542,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Gamma',
       skillset: 'Security, Pentesting',
       experience: '9 years',
-      avatar: 'https://i.pravatar.cc/150?img=21',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 22,
@@ -563,7 +563,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Phoenix',
       skillset: 'AI, ML, IoT',
       experience: '15 years',
-      avatar: 'https://i.pravatar.cc/150?img=22',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 23,
@@ -584,7 +584,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Beta',
       skillset: 'Enterprise, Contracts',
       experience: '7 years',
-      avatar: 'https://i.pravatar.cc/150?img=31',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 24,
@@ -605,7 +605,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Omega',
       skillset: 'UI Design, Prototyping',
       experience: '4 years',
-      avatar: 'https://i.pravatar.cc/150?img=32',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 25,
@@ -626,7 +626,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Gamma',
       skillset: 'React Native, Swift',
       experience: '6 years',
-      avatar: 'https://i.pravatar.cc/150?img=33',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 26,
@@ -647,7 +647,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Delta',
       skillset: 'Training, L&D',
       experience: '5 years',
-      avatar: 'https://i.pravatar.cc/150?img=34',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 27,
@@ -668,7 +668,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Alpha',
       skillset: 'Mailchimp, Automation',
       experience: '3 years',
-      avatar: 'https://i.pravatar.cc/150?img=35',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 28,
@@ -689,7 +689,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Phoenix',
       skillset: 'Node.js, MongoDB',
       experience: '7 years',
-      avatar: 'https://i.pravatar.cc/150?img=36',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 29,
@@ -710,7 +710,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Beta',
       skillset: 'Salesforce, Analytics',
       experience: '4 years',
-      avatar: 'https://i.pravatar.cc/150?img=37',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 30,
@@ -731,7 +731,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Sigma',
       skillset: 'Finance, Modeling',
       experience: '6 years',
-      avatar: 'https://i.pravatar.cc/150?img=38',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 31,
@@ -752,7 +752,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Omega',
       skillset: 'Creative Strategy, Art',
       experience: '11 years',
-      avatar: 'https://i.pravatar.cc/150?img=39',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 32,
@@ -773,7 +773,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Phoenix',
       skillset: 'AWS, Azure, GCP',
       experience: '12 years',
-      avatar: 'https://i.pravatar.cc/150?img=40',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 33,
@@ -794,7 +794,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Alpha',
       skillset: 'PR, Media Relations',
       experience: '6 years',
-      avatar: 'https://i.pravatar.cc/150?img=41',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 34,
@@ -815,7 +815,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Beta',
       skillset: 'Partnerships, B2B',
       experience: '5 years',
-      avatar: 'https://i.pravatar.cc/150?img=42',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 35,
@@ -836,7 +836,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Delta',
       skillset: 'HR Operations, Benefits',
       experience: '4 years',
-      avatar: 'https://i.pravatar.cc/150?img=43',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 36,
@@ -857,7 +857,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Gamma',
       skillset: 'ETL, Spark, SQL',
       experience: '8 years',
-      avatar: 'https://i.pravatar.cc/150?img=44',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 37,
@@ -878,7 +878,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Omega',
       skillset: 'Product Design, UX',
       experience: '7 years',
-      avatar: 'https://i.pravatar.cc/150?img=45',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 38,
@@ -899,7 +899,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Phoenix',
       skillset: 'Vue.js, TypeScript',
       experience: '6 years',
-      avatar: 'https://i.pravatar.cc/150?img=46',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 39,
@@ -920,7 +920,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Alpha',
       skillset: 'Analytics, Reporting',
       experience: '5 years',
-      avatar: 'https://i.pravatar.cc/150?img=47',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 40,
@@ -941,7 +941,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Beta',
       skillset: 'BD, Partnerships',
       experience: '8 years',
-      avatar: 'https://i.pravatar.cc/150?img=48',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 41,
@@ -962,7 +962,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Phoenix',
       skillset: 'Architecture, Design',
       experience: '14 years',
-      avatar: 'https://i.pravatar.cc/150?img=49',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 42,
@@ -983,7 +983,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Omega',
       skillset: 'Leadership, Design',
       experience: '9 years',
-      avatar: 'https://i.pravatar.cc/150?img=50',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 43,
@@ -1004,7 +1004,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Beta',
       skillset: 'Cold Calling, Demos',
       experience: '2 years',
-      avatar: 'https://i.pravatar.cc/150?img=51',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 44,
@@ -1025,7 +1025,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Alpha',
       skillset: 'Events, Coordination',
       experience: '6 years',
-      avatar: 'https://i.pravatar.cc/150?img=52',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 45,
@@ -1046,7 +1046,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Delta',
       skillset: 'Benefits, Payroll',
       experience: '3 years',
-      avatar: 'https://i.pravatar.cc/150?img=53',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 46,
@@ -1067,7 +1067,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Gamma',
       skillset: 'ML, TensorFlow, PyTorch',
       experience: '10 years',
-      avatar: 'https://i.pravatar.cc/150?img=54',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 47,
@@ -1088,7 +1088,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Omega',
       skillset: 'Interaction, Motion',
       experience: '7 years',
-      avatar: 'https://i.pravatar.cc/150?img=55',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 48,
@@ -1109,7 +1109,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Beta',
       skillset: 'Account Management',
       experience: '11 years',
-      avatar: 'https://i.pravatar.cc/150?img=56',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 49,
@@ -1130,7 +1130,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Sigma',
       skillset: 'Finance, Compliance',
       experience: '13 years',
-      avatar: 'https://i.pravatar.cc/150?img=57',
+      avatar: '/build/assets/images/logo.png',
     },
     {
       id: 50,
@@ -1151,7 +1151,7 @@ export function initAdvancedDataTableDemo() {
       project: 'Phoenix',
       skillset: 'SRE, Monitoring',
       experience: '9 years',
-      avatar: 'https://i.pravatar.cc/150?img=58',
+      avatar: '/build/assets/images/logo.png',
     },
   ];
 
@@ -1199,8 +1199,8 @@ export function initAdvancedDataTableDemo() {
           
           <div style="display: grid; grid-template-columns: 1fr; gap: 40px;">
             <div>
-              <h4 style="margin-bottom: 12px; color: #0f172a; display: flex; align-items: center; gap: 8px;">
-                <span style="width: 8px; height: 8px; background: #2563eb; border-radius: 50%;"></span>
+              <h4 style="margin-bottom: 12px; color:var(--text-primary,#0f172a); display: flex; align-items: center; gap: 8px;">
+                <span style="width: 8px; height: 8px; background: var(--accent-blue,#2563eb); border-radius: 50%;"></span>
                 Glassmorphism Substrate
               </h4>
               <div style="padding: 40px; background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); border-radius: 12px;">
@@ -1209,7 +1209,7 @@ export function initAdvancedDataTableDemo() {
             </div>
 
             <div>
-              <h4 style="margin-bottom: 12px; color: #0f172a; display: flex; align-items: center; gap: 8px;">
+              <h4 style="margin-bottom: 12px; color:var(--text-primary,#0f172a); display: flex; align-items: center; gap: 8px;">
                 <span style="width: 8px; height: 8px; background: #10b981; border-radius: 50%;"></span>
                 Raised Relief (Light Theme)
               </h4>
@@ -1217,8 +1217,8 @@ export function initAdvancedDataTableDemo() {
             </div>
 
             <div>
-              <h4 style="margin-bottom: 12px; color: #0f172a; display: flex; align-items: center; gap: 8px;">
-                <span style="width: 8px; height: 8px; background: #ef4444; border-radius: 50%;"></span>
+              <h4 style="margin-bottom: 12px; color:var(--text-primary,#0f172a); display: flex; align-items: center; gap: 8px;">
+                <span style="width: 8px; height: 8px; background: var(--accent-red,#ef4444); border-radius: 50%;"></span>
                 Diagnostic Atmospheric Glow (Danger)
               </h4>
               <ui-advanced-data-table id="dangerTable" color="danger"></ui-advanced-data-table>
@@ -1252,12 +1252,12 @@ export function initAdvancedDataTableDemo() {
     tableContainer.innerHTML = `
         <div class="demo-block">
           <h3>Basic Data Table - 50 Records with Scrolling</h3>
-          <div style="overflow: auto; max-height: 600px; border: 1px solid #e5e7eb; border-radius: 8px;">
+          <div style="overflow: auto; max-height: 600px; border:1px solid var(--border-default,#e5e7eb); border-radius: 8px;">
             <ui-advanced-data-table id="basicTable"></ui-advanced-data-table>
           </div>
           
           <div style="margin-top: 16px; padding: 12px; background-color: #f0f9ff; border-radius: 6px;">
-            <p style="margin: 0; color: #1e40af; font-size: 14px;">
+            <p style="margin: 0; color:var(--accent-blue,#1e40af); font-size: 14px;">
               💡 Table with 50 records and 15 columns. Scroll horizontally and vertically to view all data. Click column headers to sort.
             </p>
           </div>
@@ -1283,8 +1283,8 @@ export function initAdvancedDataTableDemo() {
           <p style="color: #6b7280; margin-bottom: 12px;">Select single or multiple rows with checkboxes</p>
           <ui-advanced-data-table id="selectTable"></ui-advanced-data-table>
           
-          <div id="selectionInfo" style="margin-top: 16px; padding: 12px; background-color: #dcfce7; border-radius: 6px;">
-            <p style="margin: 0; color: #065f46; font-size: 14px;">
+          <div id="selectionInfo" style="margin-top: 16px; padding: 12px; background-color: var(--accent-green-soft,#dcfce7); border-radius: 6px;">
+            <p style="margin: 0; color:var(--accent-green,#065f46); font-size: 14px;">
               Selected rows: <strong>0</strong>
             </p>
           </div>
@@ -1304,7 +1304,7 @@ export function initAdvancedDataTableDemo() {
           const infoDiv = document.getElementById('selectionInfo');
           if (infoDiv) {
             infoDiv.innerHTML = `
-                <p style="margin: 0; color: #065f46; font-size: 14px;">
+                <p style="margin: 0; color:var(--accent-green,#065f46); font-size: 14px;">
                   Selected rows: <strong>${e.detail.selectedRows.length}</strong>
                 </p>
               `;
@@ -1315,7 +1315,7 @@ export function initAdvancedDataTableDemo() {
           const infoDiv = document.getElementById('selectionInfo');
           if (infoDiv) {
             infoDiv.innerHTML = `
-                <p style="margin: 0; color: #065f46; font-size: 14px;">
+                <p style="margin: 0; color:var(--accent-green,#065f46); font-size: 14px;">
                   Selected rows: <strong>${e.detail.selectedRows.length}</strong>
                 </p>
               `;
@@ -1332,8 +1332,8 @@ export function initAdvancedDataTableDemo() {
           <p style="color: #6b7280; margin-bottom: 12px;">3-dot menu for each row with edit/delete actions</p>
           <ui-advanced-data-table id="actionsTable"></ui-advanced-data-table>
           
-          <div id="actionLog" style="margin-top: 16px; padding: 12px; background-color: #fef3c7; border-radius: 6px;">
-            <h4 style="margin: 0 0 8px 0; color: #92400e; font-size: 14px;">Action Log:</h4>
+          <div id="actionLog" style="margin-top: 16px; padding: 12px; background-color: var(--accent-yellow-soft,#fef3c7); border-radius: 6px;">
+            <h4 style="margin: 0 0 8px 0; color:var(--accent-yellow,#92400e); font-size: 14px;">Action Log:</h4>
             <div id="logContent" style="color: #78350f; font-size: 14px; font-family: monospace;">
               <p style="margin: 0;">Click the 3-dot menu on any row to perform actions...</p>
             </div>
@@ -1397,14 +1397,14 @@ export function initAdvancedDataTableDemo() {
           <ui-advanced-data-table id="editableTable"></ui-advanced-data-table>
           
           <div id="editLog" style="margin-top: 16px; padding: 12px; background-color: #ecfdf5; border-radius: 6px;">
-            <h4 style="margin: 0 0 8px 0; color: #065f46; font-size: 14px;">Edit Log:</h4>
-            <div id="editLogContent" style="color: #047857; font-size: 13px; font-family: monospace; max-height: 200px; overflow-y: auto;">
+            <h4 style="margin: 0 0 8px 0; color:var(--accent-green,#065f46); font-size: 14px;">Edit Log:</h4>
+            <div id="editLogContent" style="color:var(--accent-green,#047857); font-size: 13px; font-family: monospace; max-height: 200px; overflow-y: auto;">
               <p style="margin: 0;">Edit any cell to see changes logged here...</p>
             </div>
           </div>
 
-          <div style="margin-top: 16px; padding: 12px; background-color: #eff6ff; border-radius: 6px;">
-            <p style="margin: 0; color: #1e40af; font-size: 14px;">
+          <div style="margin-top: 16px; padding: 12px; background-color:var(--accent-blue-soft,#eff6ff); border-radius: 6px;">
+            <p style="margin: 0; color:var(--accent-blue,#1e40af); font-size: 14px;">
               💡 <strong>Features:</strong> Each column type renders appropriate input (text, number, date, email, checkbox, switch, rating, select, etc.)
             </p>
           </div>
@@ -1526,7 +1526,7 @@ export function initAdvancedDataTableDemo() {
           <div id="skeletonDemo"></div>
           
           <div style="margin-top: 16px; padding: 12px; background-color: #f0f9ff; border-radius: 6px;">
-            <p style="margin: 0; color: #1e40af; font-size: 14px;">
+            <p style="margin: 0; color:var(--accent-blue,#1e40af); font-size: 14px;">
               ✨ Skeleton loading provides better perceived performance by showing content placeholders.
             </p>
           </div>
@@ -1589,8 +1589,8 @@ export function initAdvancedDataTableDemo() {
           <p style="color: #6b7280; margin-bottom: 12px;">Group related columns under common parent headers</p>
           <ui-advanced-data-table id="columnGroupTable"></ui-advanced-data-table>
           
-          <div style="margin-top: 16px; padding: 12px; background-color: #f0fdf4; border-radius: 6px;">
-            <p style="margin: 0; color: #166534; font-size: 14px;">
+          <div style="margin-top: 16px; padding: 12px; background-color:var(--accent-green-soft,#f0fdf4); border-radius: 6px;">
+            <p style="margin: 0; color: var(--accent-green,#166534); font-size: 14px;">
               ✓ Column grouping organizes related data with hierarchical headers for better visual structure.
             </p>
           </div>
@@ -1657,8 +1657,8 @@ export function initAdvancedDataTableDemo() {
           
           <ui-advanced-data-table id="rowGroupTable"></ui-advanced-data-table>
           
-          <div style="margin-top: 16px; padding: 12px; background-color: #fef3c7; border-radius: 6px;">
-            <p style="margin: 0; color: #92400e; font-size: 14px;">
+          <div style="margin-top: 16px; padding: 12px; background-color: var(--accent-yellow-soft,#fef3c7); border-radius: 6px;">
+            <p style="margin: 0; color:var(--accent-yellow,#92400e); font-size: 14px;">
               💡 Click on group headers to expand/collapse groups. Each group shows item count.
             </p>
           </div>
@@ -1728,11 +1728,11 @@ export function initAdvancedDataTableDemo() {
           <p style="color: #6b7280; margin-bottom: 12px;">Rich input types with editable cells - double-click to edit</p>
           <ui-advanced-data-table id="inputTypesTable" editable="true"></ui-advanced-data-table>
           
-          <div style="margin-top: 16px; padding: 12px; background-color: #eff6ff; border-radius: 6px;">
-            <p style="margin: 0; color: #1e40af; font-size: 14px;">
+          <div style="margin-top: 16px; padding: 12px; background-color:var(--accent-blue-soft,#eff6ff); border-radius: 6px;">
+            <p style="margin: 0; color:var(--accent-blue,#1e40af); font-size: 14px;">
               🎨 Double-click cells to edit. Available types:
             </p>
-            <ul style="margin: 8px 0 0 20px; color: #1e40af; font-size: 13px; line-height: 1.8;">
+            <ul style="margin: 8px 0 0 20px; color:var(--accent-blue,#1e40af); font-size: 13px; line-height: 1.8;">
               <li><strong>Text, Number, Email, URL, Tel:</strong> Standard inputs</li>
               <li><strong>Date, Time, DateTime:</strong> Date/time pickers</li>
               <li><strong>Checkbox, Switch:</strong> Toggle controls</li>
@@ -1810,8 +1810,8 @@ export function initAdvancedDataTableDemo() {
             show-skeleton="true"
             skeleton-rows="6"></ui-advanced-data-table>
           
-          <div style="margin-top: 16px; padding: 12px; background-color: #f0fdf4; border-radius: 6px;">
-            <p style="margin: 0; color: #166534; font-size: 14px;">
+          <div style="margin-top: 16px; padding: 12px; background-color:var(--accent-green-soft,#f0fdf4); border-radius: 6px;">
+            <p style="margin: 0; color: var(--accent-green,#166534); font-size: 14px;">
               🎯 <strong>Interactive Features:</strong> Skeleton Loading, Column Grouping, Row Grouping, Selection, Row Actions, Editable Mode, Sorting, Filtering, Pagination
             </p>
           </div>
@@ -2024,7 +2024,7 @@ export function initAdvancedDataTableDemo() {
           <h3>📌 Column Pinning</h3>
           <p style="color: #6b7280; margin-bottom: 16px;">Pin important columns to keep them visible while scrolling horizontally. Pinned columns stay fixed on the left or right side of the table.</p>
           
-          <div style="margin-bottom: 16px; padding: 16px; background-color: #fef3c7; border-radius: 6px; border-left: 4px solid #f59e0b;">
+          <div style="margin-bottom: 16px; padding: 16px; background-color: var(--accent-yellow-soft,#fef3c7); border-radius: 6px; border-left: 4px solid #f59e0b;">
             <p style="margin: 0 0 8px 0; color: #78350f; font-size: 14px; font-weight: 600;">
               📖 How to use:
             </p>
@@ -2046,11 +2046,11 @@ export function initAdvancedDataTableDemo() {
             <ui-button id="btnUnpinDept" variant="outline" color="secondary" label="❌ Unpin Dept" size="md"ui-button>
           </div>
           <ui-advanced-data-table id="pinningTable" column-pinning="true"></ui-advanced-data-table>
-          <div id="pinningInfo" style="margin-top: 16px; padding: 12px; background-color: #eff6ff; border-radius: 6px;">
-            <p style="margin: 0; color: #1e40af; font-size: 14px;">
+          <div id="pinningInfo" style="margin-top: 16px; padding: 12px; background-color:var(--accent-blue-soft,#eff6ff); border-radius: 6px;">
+            <p style="margin: 0; color:var(--accent-blue,#1e40af); font-size: 14px;">
               💡 <strong>Currently Pinned:</strong> <span id="pinnedColumnsText" style="font-weight: 600;">None</span>
             </p>
-            <p style="margin: 8px 0 0 0; color: #1e40af; font-size: 12px;">
+            <p style="margin: 8px 0 0 0; color:var(--accent-blue,#1e40af); font-size: 12px;">
               Try scrolling the table horizontally after pinning columns to see them stay fixed!
             </p>
           </div>
@@ -2097,7 +2097,7 @@ export function initAdvancedDataTableDemo() {
             active: i % 2 === 0,
             verified: i % 3 === 0,
             startDate: '2022-01-' + ((i % 28) + 1).toString().padStart(2, '0'),
-            avatar: 'https://i.pravatar.cc/150?img=' + (i % 70),
+            avatar: '/build/assets/images/logo.png' + (i % 70),
           });
         }
         table.data = sampleData.concat(moreRows);
@@ -2161,8 +2161,8 @@ export function initAdvancedDataTableDemo() {
 
           <ui-advanced-data-table id="rowPinningTable" row-pinning="true"></ui-advanced-data-table>
           
-          <div id="rowPinningInfo" style="margin-top: 16px; padding: 12px; background-color: #f0fdf4; border-radius: 6px;">
-            <p style="margin: 0; color: #065f46; font-size: 14px;">
+          <div id="rowPinningInfo" style="margin-top: 16px; padding: 12px; background-color:var(--accent-green-soft,#f0fdf4); border-radius: 6px;">
+            <p style="margin: 0; color:var(--accent-green,#065f46); font-size: 14px;">
               💡 Pinned rows: <strong id="pinnedRowsText">None</strong>
             </p>
           </div>
@@ -2217,7 +2217,7 @@ export function initAdvancedDataTableDemo() {
 
           <ui-advanced-data-table id="reorderTable" row-reorder="true"></ui-advanced-data-table>
           
-          <div id="reorderInfo" style="margin-top: 16px; padding: 12px; background-color: #fef3c7; border-radius: 6px;">
+          <div id="reorderInfo" style="margin-top: 16px; padding: 12px; background-color: var(--accent-yellow-soft,#fef3c7); border-radius: 6px;">
             <p style="margin: 0; color: #78350f; font-size: 14px;">
               💡 <strong>Drag the drag handle (⋮⋮)</strong> on each row to reorder. Last reorder: <strong id="lastReorderText">None</strong>
             </p>
@@ -2258,7 +2258,7 @@ export function initAdvancedDataTableDemo() {
 
           <ui-advanced-data-table id="filterTable" multi-filter="true"></ui-advanced-data-table>
           
-          <div id="filterInfo" style="margin-top: 16px; padding: 12px; background-color: #dbeafe; border-radius: 6px;">
+          <div id="filterInfo" style="margin-top: 16px; padding: 12px; background-color: var(--accent-blue-soft,#dbeafe); border-radius: 6px;">
             <p style="margin: 0; color: #1e3a8a; font-size: 14px;">
               💡 Active filters: <strong id="activeFiltersText">None</strong>
             </p>
@@ -2315,7 +2315,7 @@ export function initAdvancedDataTableDemo() {
           
           <div style="margin-top: 16px;">
             <h4 style="margin-bottom: 8px;">Event Log:</h4>
-            <div id="eventLog" style="padding: 12px; background-color: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; max-height: 300px; overflow-y: auto; font-family: monospace; font-size: 12px;">
+            <div id="eventLog" style="padding: 12px; background-color: #f9fafb; border:1px solid var(--border-default,#e5e7eb); border-radius: 6px; max-height: 300px; overflow-y: auto; font-family: monospace; font-size: 12px;">
               <div style="color: #6b7280;">Waiting for events...</div>
             </div>
           </div>
@@ -2382,7 +2382,7 @@ export function initAdvancedDataTableDemo() {
 
           <ui-advanced-data-table id="panelsTable" show-filter-panel="false" show-column-panel="false"></ui-advanced-data-table>
           
-          <div style="margin-top: 16px; padding: 12px; background-color: #fef3c7; border-radius: 6px;">
+          <div style="margin-top: 16px; padding: 12px; background-color: var(--accent-yellow-soft,#fef3c7); border-radius: 6px;">
             <p style="margin: 0; color: #78350f; font-size: 14px;">
               💡 Status: <strong id="panelStatus">Both panels hidden</strong>
             </p>
@@ -2437,7 +2437,7 @@ export function initAdvancedDataTableDemo() {
             <ui-button id="btnTogFiltDemo" variant="outline" color="primary" label="🔍 Toggle Filter Panel" size="md"ui-button>
           </div>
           <ui-advanced-data-table id="searchFilterTable" multi-filter="true" show-filter-panel="false" searchable="true"></ui-advanced-data-table>
-          <div id="searchFilterInfo" style="margin-top: 16px; padding: 12px; background-color: #dbeafe; border-radius: 6px;">
+          <div id="searchFilterInfo" style="margin-top: 16px; padding: 12px; background-color: var(--accent-blue-soft,#dbeafe); border-radius: 6px;">
             <p style="margin: 0; color: #1e3a8a; font-size: 14px;">Active filters: <strong id="activeSearchFiltersText">None</strong></p>
           </div>
         </div>
@@ -2481,8 +2481,8 @@ export function initAdvancedDataTableDemo() {
           <h3>🔍 Advanced Filter Panel</h3>
           <p style="color: #6b7280; margin-bottom: 12px;">Build complex filters with multiple operators and conditions</p>
           
-          <div style="margin-bottom: 16px; padding: 12px; background-color: #eff6ff; border-radius: 6px;">
-            <p style="margin: 0; color: #1e40af; font-size: 14px;">
+          <div style="margin-bottom: 16px; padding: 12px; background-color:var(--accent-blue-soft,#eff6ff); border-radius: 6px;">
+            <p style="margin: 0; color:var(--accent-blue,#1e40af); font-size: 14px;">
               💡 <strong>Try this:</strong> Click the "🔍 Filters" button in the toolbar to open the advanced filter panel. 
               Select a column, choose an operator, enter a value, and click "+ Add" to create filters.
             </p>
@@ -2490,9 +2490,9 @@ export function initAdvancedDataTableDemo() {
 
           <ui-advanced-data-table id="filterPanelTable" show-filter-panel="false"></ui-advanced-data-table>
           
-          <div style="margin-top: 16px; padding: 12px; background-color: #f0fdf4; border-radius: 6px;">
-            <h4 style="margin: 0 0 8px 0; color: #166534; font-size: 14px;">Available Operators:</h4>
-            <ul style="margin: 0; padding-left: 20px; color: #166534; font-size: 13px; line-height: 1.8;">
+          <div style="margin-top: 16px; padding: 12px; background-color:var(--accent-green-soft,#f0fdf4); border-radius: 6px;">
+            <h4 style="margin: 0 0 8px 0; color: var(--accent-green,#166534); font-size: 14px;">Available Operators:</h4>
+            <ul style="margin: 0; padding-left: 20px; color: var(--accent-green,#166534); font-size: 13px; line-height: 1.8;">
               <li><strong>Text fields:</strong> Equals, Not Equals, Contains, Not Contains, Starts With, Ends With</li>
               <li><strong>Number/Date fields:</strong> Equals, Not Equals, Greater Than, Less Than, Between</li>
               <li><strong>Filter chips:</strong> Click the × button to remove individual filters, or use "Clear All"</li>
@@ -2528,8 +2528,8 @@ export function initAdvancedDataTableDemo() {
           
           <ui-advanced-data-table id="treeTable" tree-data="true"></ui-advanced-data-table>
           
-          <div style="margin-top: 16px; padding: 12px; background-color: #f0fdf4; border-radius: 6px;">
-            <p style="margin: 0; color: #166534; font-size: 14px;">
+          <div style="margin-top: 16px; padding: 12px; background-color:var(--accent-green-soft,#f0fdf4); border-radius: 6px;">
+            <p style="margin: 0; color: var(--accent-green,#166534); font-size: 14px;">
               💡 Rows with children display an expand/collapse icon. Indentation shows depth level.
             </p>
           </div>
@@ -2676,7 +2676,7 @@ export function initAdvancedDataTableDemo() {
           <h3>PDF Export & Print Optimization</h3>
           <p style="color: #6b7280; margin-bottom: 12px;">Export data to formatted PDF documents</p>
           <ui-advanced-data-table id="pdfTable"></ui-advanced-data-table>
-          <div style="margin-top: 16px; padding: 12px; background-color: #fef2f2; border-radius: 6px;">
+          <div style="margin-top: 16px; padding: 12px; background-color:var(--accent-red-soft,#fef2f2); border-radius: 6px;">
             <p style="margin: 0; color: #991b1b; font-size: 14px;">
               📄 Click "Export" -> "PDF" in the toolbar/footer (if implemented) or use the button below.
             </p>
@@ -2731,8 +2731,8 @@ export function initAdvancedDataTableDemo() {
           <h3>Undo / Redo</h3>
           <p style="color: #6b7280; margin-bottom: 12px;">History tracking for Sort, Filter, Search, Selection</p>
           <ui-advanced-data-table id="undoTable"></ui-advanced-data-table>
-          <div style="margin-top: 16px; padding: 12px; background-color: #fef3c7; border-radius: 6px;">
-            <p style="margin: 0; color: #92400e; font-size: 14px;">
+          <div style="margin-top: 16px; padding: 12px; background-color: var(--accent-yellow-soft,#fef3c7); border-radius: 6px;">
+            <p style="margin: 0; color:var(--accent-yellow,#92400e); font-size: 14px;">
               ⌨️ <strong>Shortcuts:</strong> Ctrl+Z (Undo), Ctrl+Y (Redo).<br>
               Try sorting, filtering, or selecting rows, then undo.
             </p>
@@ -2825,8 +2825,8 @@ export function initAdvancedDataTableDemo() {
           <h3>📊 Sales Report Aggregation</h3>
           <p style="color: #6b7280; margin-bottom: 12px;">Real-world example: Summarizing quarterly sales performance.</p>
           <ui-advanced-data-table id="aggTable"></ui-advanced-data-table>
-          <div style="margin-top: 16px; padding: 12px; background-color: #f0fdf4; border-radius: 6px;">
-            <p style="margin: 0; color: #15803d; font-size: 14px;">
+          <div style="margin-top: 16px; padding: 12px; background-color:var(--accent-green-soft,#f0fdf4); border-radius: 6px;">
+            <p style="margin: 0; color:var(--accent-green,#15803d); font-size: 14px;">
               <strong>Key Metrics Calculated:</strong><br>
               💰 <strong>Total Revenue:</strong> Sum of all sales.<br>
               📦 <strong>Total Units:</strong> Sum of quantity sold.<br>
@@ -2891,7 +2891,7 @@ export function initAdvancedDataTableDemo() {
           column-aggregation="true">
         </ui-advanced-data-table>
         
-        <div style="margin-top: 16px; padding: 12px; background-color: #fdf2f8; border-radius: 6px;">
+        <div style="margin-top: 16px; padding: 12px; background-color: var(--accent-pink-soft,#fdf2f8); border-radius: 6px;">
           <p style="margin: 0; color: #9d174d; font-size: 14px;">
             💡 <strong>Testing Validation:</strong> Try editing the <strong>Email</strong> field and deleting its content or entering an invalid email. Try entering a <strong>Salary</strong> below 50,000.
           </p>