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/pagination-demo.js CHANGED Viewed

@@ -218,8 +218,8 @@ export function initPaginationDemo() {
             </div>
           </div>
-          <div style="margin-top: 20px; padding: 12px; background-color: #f0fdf4; border-radius: 6px;">
-            <p style="margin: 0; color: #166534; font-size: 14px;">
+          <div style="margin-top: 20px; padding: 12px; background-color:var(--accent-green-soft,#f0fdf4); border-radius: 6px;">
+            <p style="margin: 0; color: var(--accent-green,#166534); font-size: 14px;">
               💡 Dropdown pagination is ideal when you need quick access to any page. Use <strong>compact</strong> mode for minimal space usage.
             </p>
           </div>
@@ -278,8 +278,8 @@ export function initPaginationDemo() {
             </div>
           </div>
-          <div style="margin-top: 20px; padding: 12px; background-color: #eff6ff; border-radius: 6px;">
-            <p style="margin: 0; color: #1e40af; font-size: 14px;">
+          <div style="margin-top: 20px; padding: 12px; background-color:var(--accent-blue-soft,#eff6ff); border-radius: 6px;">
+            <p style="margin: 0; color:var(--accent-blue,#1e40af); font-size: 14px;">
               💡 Input pagination validates your entry - try entering invalid values (text, negative numbers, or numbers beyond range) to see error messages. Press Enter or click Go to navigate.
             </p>
           </div>
@@ -341,7 +341,7 @@ export function initPaginationDemo() {
           </div>
           <div style="margin-top: 20px; 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;">
               💡 Icon-only mode is perfect for compact layouts where space is limited.
             </p>
           </div>
@@ -359,8 +359,8 @@ export function initPaginationDemo() {
           <h3>🎮 Interactive Playground</h3>
           <p style="color: #6b7280; margin-bottom: 20px;">Customize the pagination properties and see changes in real-time!</p>
-          <div style="background-color: white; padding: 24px; border-radius: 12px; margin-bottom: 24px; border: 1px solid #e5e7eb; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);">
-            <h4 style="margin: 0 0 20px; color: #111827; font-size: 1.1rem; border-bottom: 1px solid #f3f4f6; padding-bottom: 12px;">Settings</h4>
+          <div style="background-color:var(--bg-primary,white); padding: 24px; border-radius: 12px; margin-bottom: 24px; border:1px solid var(--border-default,#e5e7eb); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);">
+            <h4 style="margin: 0 0 20px; color:var(--text-primary,#111827); font-size: 1.1rem; border-bottom: 1px solid #f3f4f6; padding-bottom: 12px;">Settings</h4>
             <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px;">
               <!-- Numeric Inputs -->
@@ -437,9 +437,9 @@ export function initPaginationDemo() {
             <div style="margin-top: 24px;">
                <h4 style="margin: 0 0 12px; color: #374151;">Component Code:</h4>
-               <div style="flex: 1; min-width: 300px; background: #1e293b; padding: 20px; border-radius: 12px; position: relative; box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);">
+               <div style="flex: 1; min-width: 300px; background: var(--bg-secondary, #f8fafc); padding: 20px; border-radius: 12px; position: relative; border: 1px solid var(--border-default); box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);">
                   <ui-button label="Copy Code" id="copyPaginationBtn" variant="outline" color="secondary" size="md"click="copyPaginationCode()" style="position: absolute; top: 12px; right: 12px;"></ui-button>
-                  <code id="paginationCodeBlock" style="color: #cbd5e1; font-family: 'Fira Code', monospace; font-size: 13px; display: block; overflow-x: auto; white-space: pre-wrap; line-height: 1.5;">
+                  <code id="paginationCodeBlock" style="color: var(--text-primary, #1e293b); font-family: 'Fira Code', monospace; font-size: 13px; display: block; overflow-x: auto; white-space: pre-wrap; line-height: 1.5;">
                     &lt;ui-pagination ...&gt;&lt;/ui-pagination&gt;
                   </code>
                </div>
@@ -651,13 +651,13 @@ export function initPaginationDemo() {
           <h3>⌨️ Keyboard Navigation</h3>
           <p style="color: #6b7280; margin-bottom: 20px;">Navigate using keyboard shortcuts</p>
-          <div style="background-color: #eff6ff; padding: 20px; border-radius: 8px; margin-bottom: 24px;">
+          <div style="background-color:var(--accent-blue-soft,#eff6ff); padding: 20px; border-radius: 8px; margin-bottom: 24px;">
             <h4 style="margin-top: 0;">Keyboard Shortcuts:</h4>
             <ul style="margin: 0; padding-left: 20px;">
-              <li><kbd style="background: white; padding: 2px 6px; border: 1px solid #d1d5db; border-radius: 3px;">←</kbd> Arrow Left - Previous page</li>
-              <li><kbd style="background: white; padding: 2px 6px; border: 1px solid #d1d5db; border-radius: 3px;">→</kbd> Arrow Right - Next page</li>
-              <li><kbd style="background: white; padding: 2px 6px; border: 1px solid #d1d5db; border-radius: 3px;">Home</kbd> - First page</li>
-              <li><kbd style="background: white; padding: 2px 6px; border: 1px solid #d1d5db; border-radius: 3px;">End</kbd> - Last page</li>
+              <li><kbd style="background:var(--bg-primary,white); padding: 2px 6px; border: 1px solid #d1d5db; border-radius: 3px;">←</kbd> Arrow Left - Previous page</li>
+              <li><kbd style="background:var(--bg-primary,white); padding: 2px 6px; border: 1px solid #d1d5db; border-radius: 3px;">→</kbd> Arrow Right - Next page</li>
+              <li><kbd style="background:var(--bg-primary,white); padding: 2px 6px; border: 1px solid #d1d5db; border-radius: 3px;">Home</kbd> - First page</li>
+              <li><kbd style="background:var(--bg-primary,white); padding: 2px 6px; border: 1px solid #d1d5db; border-radius: 3px;">End</kbd> - Last page</li>
             </ul>
           </div>
@@ -684,8 +684,8 @@ export function initPaginationDemo() {
           <h3>📱 Responsive Pagination</h3>
           <p style="color: #6b7280; margin-bottom: 20px;">Auto-adapts to mobile screens</p>
-          <div style="background-color: #fef3c7; padding: 16px; border-radius: 8px; margin-bottom: 24px;">
-            <p style="margin: 0; color: #92400e;">
+          <div style="background-color: var(--accent-yellow-soft,#fef3c7); padding: 16px; border-radius: 8px; margin-bottom: 24px;">
+            <p style="margin: 0; color:var(--accent-yellow,#92400e);">
               💡 <strong>Tip:</strong> Resize your browser window to see the pagination automatically switch to compact mode on mobile!
             </p>
           </div>
@@ -766,8 +766,8 @@ window.showResponsivePagination = function () {
           <h3> Responsive Pagination</h3>
           <p style="color: #6b7280; margin-bottom: 20px;">Auto-adapts to mobile screens</p>
-          <div style="background-color: #fef3c7; padding: 16px; border-radius: 8px; margin-bottom: 24px;">
-            <p style="margin: 0; color: #92400e;">
+          <div style="background-color: var(--accent-yellow-soft,#fef3c7); padding: 16px; border-radius: 8px; margin-bottom: 24px;">
+            <p style="margin: 0; color:var(--accent-yellow,#92400e);">
                <strong>Tip:</strong> Resize your browser window below 768px to see automatic compact mode!
             </p>
           </div>
@@ -843,8 +843,8 @@ window.showStickyDemo = function () {
           <h3> Sticky Positioning</h3>
           <p style="color: #6b7280; margin-bottom: 20px;">Pagination stays fixed while scrolling</p>
-          <div style="background-color: #fef3c7; padding: 16px; border-radius: 8px; margin-bottom: 24px;">
-            <p style="margin: 0; color: #92400e;">
+          <div style="background-color: var(--accent-yellow-soft,#fef3c7); padding: 16px; border-radius: 8px; margin-bottom: 24px;">
+            <p style="margin: 0; color:var(--accent-yellow,#92400e);">
                <strong>Note:</strong> Sticky positioning works best in scrollable containers. Try scrolling to see the effect!
             </p>
           </div>
@@ -874,7 +874,7 @@ window.showSmartFeaturesDemo = function () {
           <h4 style="margin-top: 24px; margin-bottom: 12px;">Auto-Hide (Single Page)</h4>
           <p style="color: #6b7280; font-size: 14px; margin-bottom: 12px;">Pagination hides when there's only 1 page</p>
-          <div style="display: flex; justify-content: center; margin-bottom: 24px; min-height: 60px; background: #f9fafb; border-radius: 8px; align-items: center;">
+          <div style="display: flex; justify-content: center; margin-bottom: 24px; min-height: 60px; background:var(--bg-secondary,#f9fafb); border-radius: 8px; align-items: center;">
             <ui-pagination auto-hide="true" total-items="5" items-per-page="10" current-page="1"></ui-pagination>
             <p style="color: #9ca3af; font-style: italic;"> Pagination is hidden (only 1 page)</p>
           </div>
@@ -942,7 +942,7 @@ window.showPaginationVariants = function () {
       <h4 style="margin-top: 24px; margin-bottom: 12px;">Floating</h4>
       <p style="color: #6b7280; font-size: 14px; margin-bottom: 12px;">Elevated card-like appearance with shadow</p>
-      <div style="display: flex; justify-content: center; margin-bottom: 24px; padding: 24px; background: #f1f5f9; border-radius: 12px;">
+      <div style="display: flex; justify-content: center; margin-bottom: 24px; padding: 24px; background:var(--bg-tertiary,#f1f5f9); border-radius: 12px;">
         <ui-pagination variant="floating" theme="primary" total-items="100" items-per-page="10" current-page="3"></ui-pagination>
       </div>
@@ -954,13 +954,13 @@ window.showPaginationVariants = function () {
       <h4 style="margin-top: 24px; margin-bottom: 12px;">Modern</h4>
       <p style="color: #6b7280; font-size: 14px; margin-bottom: 12px;">Clean dark-elevated style with subtle shadow</p>
-      <div style="display: flex; justify-content: center; margin-bottom: 24px; padding: 24px; background: #0f172a; border-radius: 12px;">
+      <div style="display: flex; justify-content: center; margin-bottom: 24px; padding: 24px; background: var(--bg-tertiary, #f1f5f9); border-radius: 12px; border: 1px solid var(--border-default);">
         <ui-pagination variant="modern" total-items="100" items-per-page="10" current-page="3"></ui-pagination>
       </div>
       <h4 style="margin-top: 24px; margin-bottom: 12px;">Premium</h4>
       <p style="color: #6b7280; font-size: 14px; margin-bottom: 12px;">High-contrast premium look with deep shadow</p>
-      <div style="display: flex; justify-content: center; margin-bottom: 24px; padding: 24px; background: #0f172a; border-radius: 12px;">
+      <div style="display: flex; justify-content: center; margin-bottom: 24px; padding: 24px; background: var(--bg-tertiary, #f1f5f9); border-radius: 12px; border: 1px solid var(--border-default);">
         <ui-pagination variant="premium" theme="primary" total-items="100" items-per-page="10" current-page="3"></ui-pagination>
       </div>
@@ -970,8 +970,8 @@ window.showPaginationVariants = function () {
         <ui-pagination segmented="true" theme="primary" total-items="100" items-per-page="10" current-page="3"></ui-pagination>
       </div>
-      <div style="margin-top: 20px; padding: 12px; background-color: #f0fdf4; border-radius: 6px;">
-        <p style="margin: 0; color: #166534; font-size: 14px;">
+      <div style="margin-top: 20px; 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>Tip:</strong> Glass, Modern, and Premium variants look best on dark or coloured backgrounds.
           Use <code>theme</code> to change the active-page colour across all variants.
         </p>
@@ -991,7 +991,7 @@ window.showActionBarDemo = function () {
       <p style="color: #6b7280; margin-bottom: 24px;">Premium pill-shaped containers that group totals, page selection, and page size into a single unified component.</p>
       <h4 style="margin-bottom: 16px;">Premium Action Bar (Dropdown)</h4>
-      <div style="display: flex; justify-content: center; margin-bottom: 40px; padding: 24px; background: #0f172a; border-radius: 16px;">
+      <div style="display: flex; justify-content: center; margin-bottom: 40px; padding: 24px; background: var(--bg-tertiary, #f1f5f9); border-radius: 16px; border: 1px solid var(--border-default);">
         <ui-pagination
           type="dropdown"
           variant="premium"
@@ -1005,7 +1005,7 @@ window.showActionBarDemo = function () {
       </div>
       <h4 style="margin-bottom: 16px;">Modern Action Bar (Input)</h4>
-      <div style="display: flex; justify-content: center; margin-bottom: 40px; padding: 24px; background: #f8fafc; border-radius: 16px; border: 1px solid #e2e8f0;">
+      <div style="display: flex; justify-content: center; margin-bottom: 40px; padding: 24px; background:var(--bg-secondary,#f8fafc); border-radius: 16px; border:1px solid var(--border-default,#e2e8f0);">
         <ui-pagination
           type="input"
           variant="modern"
@@ -1032,7 +1032,7 @@ window.showActionBarDemo = function () {
       </div>
       <div style="margin-top: 20px; padding: 16px; background-color: #f0f9ff; border-radius: 12px; border: 1px solid #d0e7ff;">
-        <p style="margin: 0; color: #1e40af; font-size: 14px; line-height: 1.6;">
+        <p style="margin: 0; color:var(--accent-blue,#1e40af); font-size: 14px; line-height: 1.6;">
           <strong>Design Note:</strong> These "Action Bar" styles are automatically applied when using <code>type="dropdown"</code> or <code>type="input"</code> combined with modern variants like <code>premium</code>, <code>modern</code>, or <code>glass</code>. The items-per-page dropdown is now fully integrated into these pill designs for a clean, professional workspace.
         </p>
       </div>

package/dist/collection/assets/js/demos/panel-demo.js CHANGED Viewed

@@ -155,7 +155,7 @@ export function initPanelDemo() {
         <h3>🖱️ Draggable Panels</h3>
         <p style="color: #6b7280; margin-bottom: 16px;">Click and drag the panel header to move it around</p>
-        <div style="position: relative; height: 500px; background: #f9fafb; border-radius: 8px; padding: 16px;">
+        <div style="position: relative; height: 500px; background:var(--bg-secondary,#f9fafb); border-radius: 8px; padding: 16px;">
           <ui-panel
             panel-title="Draggable Panel 1"
             is-draggable
@@ -254,7 +254,7 @@ export function initPanelDemo() {
         <h3>💾 State Persistence</h3>
         <p style="color: #6b7280; margin-bottom: 16px;">Panels can remember their size, position, and collapsed state even after a page refresh.</p>
-        <div style="position: relative; height: 500px; background: #f9fafb; border-radius: 8px; padding: 16px;">
+        <div style="position: relative; height: 500px; background:var(--bg-secondary,#f9fafb); border-radius: 8px; padding: 16px;">
           <ui-panel
             panel-title="Persistent Panel"
             persist-key="demo-persistence"
@@ -345,10 +345,10 @@ export function initPanelDemo() {
   // Playground Demo
   window.showPlayground = function () {
     panelDemoArea.innerHTML = `
-      <div class="demo-block playground-block" style="padding: 0; overflow: hidden; border-radius: 12px; background: #0f172a; border: 1px solid #334155; display: grid; grid-template-columns: 320px 1fr; height: 700px;">
+      <div class="demo-block playground-block" style="padding: 0; overflow: hidden; border-radius: 12px; background: var(--bg-tertiary, #f1f5f9); border: 1px solid var(--border-default); display: grid; grid-template-columns: 320px 1fr; height: 700px;">
         <!-- Controls -->
-        <div class="playground-controls" style="padding: 20px; background: #1e293b; border-right: 1px solid #334155; overflow-y: auto; color: #f1f5f9; scrollbar-width: thin;">
-          <h4 style="margin: 0 0 20px 0; color: #10b981; text-transform: uppercase; font-size: 12px; letter-spacing: 1px; border-bottom: 1px solid rgba(59, 130, 246, 0.2); padding-bottom: 5px;">✨ Visuals</h4>
+        <div class="playground-controls" style="padding: 20px; background: var(--bg-secondary, #f8fafc); border-right: 1px solid var(--border-default); overflow-y: auto; color:var(--text-primary,#1e293b); scrollbar-width: thin;">
+          <h4 style="margin: 0 0 20px 0; color: var(--text-secondary, #64748b); text-transform: uppercase; font-size: 12px; letter-spacing: 1px; border-bottom: 1px solid var(--border-default); padding-bottom: 5px;">✨ Visuals</h4>
           <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px;">
             <div>
@@ -365,7 +365,7 @@ export function initPanelDemo() {
           </div>
           <div style="margin-bottom: 12px;">
-            <label style="display: block; font-size: 11px; color: #94a3b8; margin-bottom: 4px; text-transform: uppercase;">Background Color</label>
+            <label style="display: block; font-size: 11px; color:var(--text-secondary,#64748b); margin-bottom: 4px; text-transform: uppercase;">Background Color</label>
             <ui-color-picker id="playBgColor" value="#ffffff"></ui-color-picker>
           </div>
@@ -408,14 +408,14 @@ export function initPanelDemo() {
           <ui-button onclick="updatePlay()" variant="outline" color="success" label="Apply Changes" style="width: 100%"></ui-button>
-          <div style="margin-top: 20px; background: #0f172a; padding: 12px; border-radius: 6px; position: relative;">
-             <ui-button onclick="copyPanelCode()" id="copyPanelBtn" style="position: absolute; top: 6px; right: 6px; background: rgba(255,255,255,0.1); color: white; border: none; padding: 2px 6px; border-radius: 4px; font-size: 10px; cursor: pointer;">Copy</ui-button>
-             <code id="panelCodeBlock" style="color: #e2e8f0; font-family: monospace; font-size: 11px; display: block; overflow-x: auto; white-space: pre-wrap;"></code>
+          <div style="margin-top: 20px; background: var(--bg-tertiary, #f1f5f9); padding: 12px; border-radius: 6px; position: relative; border: 1px solid var(--border-default);">
+             <ui-button onclick="copyPanelCode()" id="copyPanelBtn" style="position: absolute; top: 6px; right: 6px; background: var(--bg-primary, #fff); color: var(--text-primary); border: 1px solid var(--border-default); padding: 2px 6px; border-radius: 4px; font-size: 10px; cursor: pointer;">Copy</ui-button>
+             <code id="panelCodeBlock" style="color: var(--text-primary); font-family: monospace; font-size: 11px; display: block; overflow-x: auto; white-space: pre-wrap;"></code>
           </div>
         </div>
         <!-- Canvas -->
-        <div id="playCanvas" style="position: relative; padding: 40px; background-image: radial-gradient(#334155 1px, transparent 1px); background-size: 20px 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #0f172a;">
+        <div id="playCanvas" style="position: relative; padding: 40px; background-image: radial-gradient(var(--border-default, #e2e8f0) 1px, transparent 1px); background-size: 20px 20px; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: var(--bg-tertiary, #f1f5f9);">
           <ui-panel
             id="playPanel"
             panel-title="Interactive Panel"
@@ -433,23 +433,16 @@ export function initPanelDemo() {
               <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 15px;">
                 <div style="width: 40px; height: 40px; background: #10b981; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">🚀</div>
                 <div>
-                  <h4 style="margin: 0; color: #fff; font-size: 15px;">Live Playground</h4>
-                  <p style="margin: 0; color: #94a3b8; font-size: 12px;">Premium ui-panel component</p>
+                  <h4 style="margin: 0; color: var(--text-primary); font-size: 15px;">Live Playground</h4>
+                  <p style="margin: 0; color:var(--text-secondary,#64748b); font-size: 12px;">Premium ui-panel component</p>
                 </div>
               </div>
-              <p style="color: #cbd5e1; font-size: 13px; line-height: 1.5;">
+              <p style="color: var(--text-primary); font-size: 13px; line-height: 1.5;">
                 This playground allows you to test all premium features in real-time. Use the sidebar to configure visual styles, layouts, and interactive behaviors.
               </p>
             </div>
           </ui-panel>
         </div>
-        <div style="margin-top: 20px; background: #1e293b; padding: 16px; border-radius: 8px; position: relative;">
-          <ui-button onclick="copyPanelCode()" id="copyPanelBtn" style="position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.1); color: white; border: none; padding: 4px 10px; border-radius: 4px; font-size: 11px; cursor: pointer; transition: all 0.2s;">Copy</ui-button>
-          <code id="panelCodeBlock" style="color: #e2e8f0; font-family: monospace; font-size: 13px; display: block; overflow-x: auto; padding-right: 50px; white-space: pre-wrap;">
-            <ui-panel ...></ui-panel>
-          </code>
-        </div>
       </div>
     `;
@@ -569,7 +562,7 @@ export function initPanelDemo() {
           </div>
           <!-- Glass Panel Trigger -->
-          <div style="flex: 1; min-width: 250px; padding: 20px; background: url('https://images.unsplash.com/photo-1557683316-973673baf926?auto=format&fit=crop&w=500&q=80') center/cover; border-radius: 8px; text-align: center;">
+          <div style="flex: 1; min-width: 250px; padding: 20px; background: url('/build/assets/images/slide1.png') center/cover; border-radius: 8px; text-align: center;">
             <h4 style="color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.5);">Glass Panel</h4>
             <p style="font-size: 14px; margin-bottom: 16px; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.5);">Frosted glass effect overlay</p>
             <ui-button onclick="openGlassPanel()" variant="outline" color="primary" label="Open Glass Panel" style="backdrop-filter: blur(4px)"></ui-button>
@@ -600,7 +593,7 @@ export function initPanelDemo() {
       panel.innerHTML = `
             <div slot="content" style="text-align: center; padding: 20px;">
-                <div style="background: #eff6ff; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;">
+                <div style="background:var(--accent-blue-soft,#eff6ff); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;">
                     <svg viewBox="0 0 24 24" fill="none" class="icon" stroke="#10b981" stroke-width="2" style="width: 32px; height: 32px;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
                 </div>
                 <h4 style="margin: 0 0 8px; color: #1f2937; font-weight: 800;">Apex Security Protocol</h4>
@@ -657,7 +650,7 @@ export function initPanelDemo() {
                         <span style="display: flex; align-items: center; gap: 12px; color: #374151; font-weight: 500;">
                             <span>${item.icon}</span> ${item.label}
                         </span>
-                        ${item.badge ? `<span style="background: #ef4444; color: white; font-size: 11px; padding: 2px 6px; border-radius: 10px; font-weight: 600;">${item.badge}</span>` : '<span style="color: #9ca3af;">›</span>'}
+                        ${item.badge ? `<span style="background: var(--accent-red,#ef4444); color: white; font-size: 11px; padding: 2px 6px; border-radius: 10px; font-weight: 600;">${item.badge}</span>` : '<span style="color: #9ca3af;">›</span>'}
                     </div>
                 `,
                   )
@@ -727,7 +720,7 @@ export function initPanelDemo() {
         <h3>🚀 All Features Combined</h3>
         <p style="color: #6b7280; margin-bottom: 16px;">A panel with all features enabled</p>
-        <div style="position: relative; height: 600px; background: #f9fafb; border-radius: 8px; padding: 16px;">
+        <div style="position: relative; height: 600px; background:var(--bg-secondary,#f9fafb); border-radius: 8px; padding: 16px;">
           <ui-panel
             panel-title="Super Panel"
             panel-subtitle="All features enabled"
@@ -761,7 +754,7 @@ export function initPanelDemo() {
                 <li>⌨️ <strong>Keyboard:</strong> ESC to close, Space to toggle</li>
                 <li>✨ <strong>Animation:</strong> Scale effect</li>
               </ul>
-              <p style="margin-top: 16px; padding: 12px; background: #eff6ff; border-radius: 6px; border-left: 4px solid #10b981;">
+              <p style="margin-top: 16px; padding: 12px; background:var(--accent-blue-soft,#eff6ff); border-radius: 6px; border-left: 4px solid #10b981;">
                 <strong>Try it:</strong> Drag, resize, minimize, maximize, collapse, or press ESC/Space!
               </p>
             </div>