npm - atomicuilibrary - Versions diffs - 0.0.1 → 0.1.3 - Mend

atomicuilibrary 0.0.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (675) hide show

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

@@ -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>
@@ -1540,45 +1540,45 @@ export function initAdvancedDataTableDemo() {
       if (bSpin) bSpin.addEventListener('click', () => loadWithSpinner());
       loadWithSkeleton();
     }, 100);
-  }
-  function loadWithSkeleton() {
-    const container = document.getElementById('skeletonDemo');
-    if (container) {
-      container.innerHTML = '<ui-advanced-data-table id="skeletonTable" loading="true" show-skeleton="true" skeleton-rows="5"></ui-advanced-data-table>';
-      setTimeout(() => {
-        const table = document.getElementById('skeletonTable');
-        if (table) {
-          table.columns = columns.slice(0, 5);
+    function loadWithSkeleton() {
+      const container = document.getElementById('skeletonDemo');
+      if (container) {
+        container.innerHTML = '<ui-advanced-data-table id="skeletonTable" loading="true" show-skeleton="true" skeleton-rows="5"></ui-advanced-data-table>';
-          setTimeout(() => {
-            table.data = sampleData.slice(0, 5);
-            table.loading = false;
-            table.pagination = false;
-          }, 2000);
-        }
-      }, 100);
+        setTimeout(() => {
+          const table = document.getElementById('skeletonTable');
+          if (table) {
+            table.columns = columns.slice(0, 5);
+            setTimeout(() => {
+              table.data = sampleData.slice(0, 5);
+              table.loading = false;
+              table.pagination = false;
+            }, 2000);
+          }
+        }, 100);
+      }
     }
-  }
-  function loadWithSpinner() {
-    const container = document.getElementById('skeletonDemo');
-    if (container) {
-      container.innerHTML = '<ui-advanced-data-table id="spinnerTable" loading="true" show-skeleton="false"></ui-advanced-data-table>';
+    function loadWithSpinner() {
+      const container = document.getElementById('skeletonDemo');
+      if (container) {
+        container.innerHTML = '<ui-advanced-data-table id="spinnerTable" loading="true" show-skeleton="false"></ui-advanced-data-table>';
-      setTimeout(() => {
-        const table = document.getElementById('spinnerTable');
-        if (table) {
-          table.columns = columns.slice(0, 5);
-          setTimeout(() => {
-            table.data = sampleData.slice(0, 5);
-            table.loading = false;
-            table.pagination = false;
-          }, 2000);
-        }
-      }, 100);
+        setTimeout(() => {
+          const table = document.getElementById('spinnerTable');
+          if (table) {
+            table.columns = columns.slice(0, 5);
+            setTimeout(() => {
+              table.data = sampleData.slice(0, 5);
+              table.loading = false;
+              table.pagination = false;
+            }, 2000);
+          }
+        }, 100);
+      }
     }
   }
@@ -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>
@@ -1694,32 +1694,32 @@ export function initAdvancedDataTableDemo() {
         if (bClear) bClear.addEventListener('click', () => clearGrouping());
       }
     }, 100);
-  }
-  const groupByDepartment = function () {
-    const table = document.getElementById('rowGroupTable');
-    if (table) {
-      table.groupBy = 'department';
-      table.expandGroupsByDefault = true;
-      table.showGroupCount = true;
+    function groupByDepartment() {
+      const table = document.getElementById('rowGroupTable');
+      if (table) {
+        table.groupBy = 'department';
+        table.expandGroupsByDefault = true;
+        table.showGroupCount = true;
+      }
     }
-  };
-  const groupByStatus = function () {
-    const table = document.getElementById('rowGroupTable');
-    if (table) {
-      table.groupBy = 'status';
-      table.expandGroupsByDefault = true;
-      table.showGroupCount = true;
+    function groupByStatus() {
+      const table = document.getElementById('rowGroupTable');
+      if (table) {
+        table.groupBy = 'status';
+        table.expandGroupsByDefault = true;
+        table.showGroupCount = true;
+      }
     }
-  };
-  const clearGrouping = function () {
-    const table = document.getElementById('rowGroupTable');
-    if (table) {
-      table.groupBy = '';
+    function clearGrouping() {
+      const table = document.getElementById('rowGroupTable');
+      if (table) {
+        table.groupBy = '';
+      }
     }
-  };
+  }
   function showInputTypes() {
     tableContainer.innerHTML = `
@@ -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>
@@ -1837,185 +1837,184 @@ export function initAdvancedDataTableDemo() {
       loadCombinedDemo();
     }, 100);
-  }
-  function loadCombinedDemo() {
-    const table = document.getElementById('combinedTable');
-    if (table) {
-      table.loading = true;
-      updatePlaygroundStatus();
+    function loadCombinedDemo() {
+      const table = document.getElementById('combinedTable');
+      if (table) {
+        table.loading = true;
+        updatePlaygroundStatus();
-      setTimeout(() => {
-        table.columns = [
-          { id: 'id', field: 'id', label: 'ID', width: '70px', sortable: true },
-          {
-            id: 'personal',
-            label: 'Personal Info',
-            children: [
-              {
-                id: 'avatar',
-                field: 'avatar',
-                label: 'Avatar',
-                type: 'image',
-                align: 'center',
-                width: '80px',
-                imageStyle: { width: '40px', height: '40px', borderRadius: '50%' },
-              },
-              { id: 'name', field: 'name', label: 'Name', sortable: true, editable: true },
-              { id: 'email', field: 'email', label: 'Email', type: 'email', editable: true },
-            ],
-          },
-          {
-            id: 'work',
-            label: 'Work Details',
-            children: [
-              { id: 'department', field: 'department', label: 'Department', sortable: true, groupable: true },
-              { id: 'role', field: 'role', label: 'Role' },
-              {
-                id: 'salary',
-                field: 'salary',
-                label: 'Salary',
-                format: function (v) {
-                  return '$' + v.toLocaleString();
+        setTimeout(() => {
+          table.columns = [
+            { id: 'id', field: 'id', label: 'ID', width: '70px', sortable: true },
+            {
+              id: 'personal',
+              label: 'Personal Info',
+              children: [
+                {
+                  id: 'avatar',
+                  field: 'avatar',
+                  label: 'Avatar',
+                  type: 'image',
+                  align: 'center',
+                  width: '80px',
+                  imageStyle: { width: '40px', height: '40px', borderRadius: '50%' },
                 },
-              },
-            ],
-          },
-          {
-            id: 'status_group',
-            label: 'Status & Performance',
-            children: [
-              { id: 'status', field: 'status', label: 'Status', groupable: true },
-              { id: 'rating', field: 'rating', label: 'Rating', type: 'rating', editable: true, maxRating: 5, align: 'center' },
-              { id: 'active', field: 'active', label: 'Active', type: 'switch', editable: true, align: 'center' },
-            ],
-          },
-        ];
-        table.data = sampleData;
-        table.loading = false;
-        table.columnGrouping = true;
-        table.sortable = true;
-        table.filterable = true;
-        table.searchable = true;
-        table.pagination = true;
-        table.pageSize = 5;
-        table.editable = false;
-        table.groupBy = '';
-        table.showActions = false;
-        updatePlaygroundStatus();
-      }, 2000);
+                { id: 'name', field: 'name', label: 'Name', sortable: true, editable: true },
+                { id: 'email', field: 'email', label: 'Email', type: 'email', editable: true },
+              ],
+            },
+            {
+              id: 'work',
+              label: 'Work Details',
+              children: [
+                { id: 'department', field: 'department', label: 'Department', sortable: true, groupable: true },
+                { id: 'role', field: 'role', label: 'Role' },
+                {
+                  id: 'salary',
+                  field: 'salary',
+                  label: 'Salary',
+                  format: function (v) {
+                    return '$' + v.toLocaleString();
+                  },
+                },
+              ],
+            },
+            {
+              id: 'status_group',
+              label: 'Status & Performance',
+              children: [
+                { id: 'status', field: 'status', label: 'Status', groupable: true },
+                { id: 'rating', field: 'rating', label: 'Rating', type: 'rating', editable: true, maxRating: 5, align: 'center' },
+                { id: 'active', field: 'active', label: 'Active', type: 'switch', editable: true, align: 'center' },
+              ],
+            },
+          ];
+          table.data = sampleData;
+          table.loading = false;
+          table.columnGrouping = true;
+          table.sortable = true;
+          table.filterable = true;
+          table.searchable = true;
+          table.pagination = true;
+          table.pageSize = 5;
+          table.editable = false;
+          table.groupBy = '';
+          table.showActions = false;
+          updatePlaygroundStatus();
+        }, 2000);
+      }
     }
-  }
-  function updatePlaygroundStatus() {
-    const table = document.getElementById('combinedTable');
-    const statusText = document.getElementById('statusText');
-    if (!table || !statusText) return;
-    const features = [];
-    if (table.loading) features.push('Loading');
-    if (table.selectable) features.push('Selection');
-    if (table.editable) features.push('Editable');
-    if (table.groupBy) features.push('Grouped by ' + table.groupBy);
-    if (table.showActions) features.push('Row Actions');
-    if (table.columnGrouping) features.push('Column Groups');
-    if (table.sortable) features.push('Sortable');
-    if (table.filterable) features.push('Filterable');
-    if (table.filterable) features.push('Filterable');
-    if (table.pagination) features.push('Pagination');
-    if (table.treeData) features.push('Tree Data');
-    statusText.textContent = features.length > 0 ? features.join(', ') : 'None';
-  }
-  const toggleSkeleton = function () {
-    const table = document.getElementById('combinedTable');
-    if (table) {
-      table.loading = !table.loading;
-      updatePlaygroundStatus();
+    function updatePlaygroundStatus() {
+      const table = document.getElementById('combinedTable');
+      const statusText = document.getElementById('statusText');
+      if (!table || !statusText) return;
+      const features = [];
+      if (table.loading) features.push('Loading');
+      if (table.selectable) features.push('Selection');
+      if (table.editable) features.push('Editable');
+      if (table.groupBy) features.push('Grouped by ' + table.groupBy);
+      if (table.showActions) features.push('Row Actions');
+      if (table.columnGrouping) features.push('Column Groups');
+      if (table.sortable) features.push('Sortable');
+      if (table.filterable) features.push('Filterable');
+      if (table.pagination) features.push('Pagination');
+      if (table.treeData) features.push('Tree Data');
+      statusText.textContent = features.length > 0 ? features.join(', ') : 'None';
     }
-  };
-  const toggleGrouping = function () {
-    const table = document.getElementById('combinedTable');
-    if (table) {
-      if (table.groupBy) {
-        table.groupBy = '';
-      } else {
-        table.groupBy = 'department';
-        table.expandGroupsByDefault = true;
-        table.showGroupCount = true;
+    function toggleSkeleton() {
+      const table = document.getElementById('combinedTable');
+      if (table) {
+        table.loading = !table.loading;
+        updatePlaygroundStatus();
       }
-      updatePlaygroundStatus();
     }
-  };
-  const toggleSelection = function () {
-    const table = document.getElementById('combinedTable');
-    if (table) {
-      table.selectable = !table.selectable;
-      updatePlaygroundStatus();
+    function toggleGrouping() {
+      const table = document.getElementById('combinedTable');
+      if (table) {
+        if (table.groupBy) {
+          table.groupBy = '';
+        } else {
+          table.groupBy = 'department';
+          table.expandGroupsByDefault = true;
+          table.showGroupCount = true;
+        }
+        updatePlaygroundStatus();
+      }
     }
-  };
-  const toggleActions = function () {
-    const table = document.getElementById('combinedTable');
-    if (table) {
-      table.showActions = !table.showActions;
-      updatePlaygroundStatus();
+    function toggleSelection() {
+      const table = document.getElementById('combinedTable');
+      if (table) {
+        table.selectable = !table.selectable;
+        updatePlaygroundStatus();
+      }
     }
-  };
-  const toggleEditable = function () {
-    const table = document.getElementById('combinedTable');
-    if (table) {
-      table.editable = !table.editable;
-      updatePlaygroundStatus();
+    function toggleActions() {
+      const table = document.getElementById('combinedTable');
+      if (table) {
+        table.showActions = !table.showActions;
+        updatePlaygroundStatus();
+      }
     }
-  };
-  const toggleTreeMode = function () {
-    const table = document.getElementById('combinedTable');
-    if (table) {
-      table.treeData = !table.treeData;
+    function toggleEditable() {
+      const table = document.getElementById('combinedTable');
+      if (table) {
+        table.editable = !table.editable;
+        updatePlaygroundStatus();
+      }
+    }
-      if (table.treeData) {
-        // Switch to tree data structure
-        table.data = [
-          {
-            id: 'd1',
-            name: 'Engineering',
-            role: 'Department',
-            status: 'Active',
-            children: [
-              { id: 1, name: 'John Doe', role: 'Senior Developer', status: 'Active' },
-              { id: 2, name: 'Jane Smith', role: 'Junior Developer', status: 'Active' },
-            ],
-          },
-          {
-            id: 'd2',
-            name: 'Marketing',
-            role: 'Department',
-            status: 'Active',
-            children: [{ id: 4, name: 'Alice Williams', role: 'Sales Rep', status: 'On Leave' }],
-          },
-        ];
-        // Simplified columns for tree view
-        table.columns = [
-          { id: 'name', field: 'name', label: 'Name', sortable: true, width: '250px' },
-          { id: 'role', field: 'role', label: 'Role', sortable: true },
-          { id: 'status', field: 'status', label: 'Status', sortable: true },
-        ];
-        table.pagination = false;
-      } else {
-        // Revert to sample flat data
-        table.data = sampleData;
-        table.columns = columns; // Reset to full columns
-        table.pagination = true;
+    function toggleTreeMode() {
+      const table = document.getElementById('combinedTable');
+      if (table) {
+        table.treeData = !table.treeData;
+        if (table.treeData) {
+          // Switch to tree data structure
+          table.data = [
+            {
+              id: 'd1',
+              name: 'Engineering',
+              role: 'Department',
+              status: 'Active',
+              children: [
+                { id: 1, name: 'John Doe', role: 'Senior Developer', status: 'Active' },
+                { id: 2, name: 'Jane Smith', role: 'Junior Developer', status: 'Active' },
+              ],
+            },
+            {
+              id: 'd2',
+              name: 'Marketing',
+              role: 'Department',
+              status: 'Active',
+              children: [{ id: 4, name: 'Alice Williams', role: 'Sales Rep', status: 'On Leave' }],
+            },
+          ];
+          // Simplified columns for tree view
+          table.columns = [
+            { id: 'name', field: 'name', label: 'Name', sortable: true, width: '250px' },
+            { id: 'role', field: 'role', label: 'Role', sortable: true },
+            { id: 'status', field: 'status', label: 'Status', sortable: true },
+          ];
+          table.pagination = false;
+        } else {
+          // Revert to sample flat data
+          table.data = sampleData;
+          table.columns = columns; // Reset to full columns
+          table.pagination = true;
+        }
+        updatePlaygroundStatus();
       }
-      updatePlaygroundStatus();
     }
-  };
+  }
   // NEW ADVANCED FEATURES DEMOS
@@ -2025,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>
@@ -2047,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>
@@ -2098,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);
@@ -2162,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>
@@ -2218,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>
@@ -2259,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>
@@ -2316,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>
@@ -2383,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>
@@ -2438,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>
@@ -2482,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>
@@ -2491,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>
@@ -2529,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>
@@ -2677,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>
@@ -2732,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>
@@ -2826,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>
@@ -2892,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>