atomicuilibrary 0.1.0 → 0.1.3

package/dist/collection/assets/js/demos/callout-banner-demo.js

@@ -124,7 +124,7 @@ export function initCalloutBannerDemo() {
       container.innerHTML = `
         <div class="cb-grid" style="margin: -20px; padding: 20px;">
           <ui-callout-banner banner variant="info" heading="Site-Wide Maintenance" message="Facility systems will be offline for 2 hours for security patches.">
-            <ui-button slot="actions" variant="outline" color="primary" label="View Schedule" size="md"ui-button>
+            <ui-button slot="actions" variant="outline" color="primary" label="View Schedule" size="md"></ui-button>
           </ui-callout-banner>
           <ui-callout-banner banner variant="success" heading="Enterprise Mode Active" message="Dedicated cloud environment initialized. All security protocols enforced." closable="false"></ui-callout-banner>
         </div>
@@ -248,7 +248,7 @@ export function initCalloutBannerDemo() {
 
         <!-- 4 lifecycle states -->
         <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px;">
-          <div style="border-radius:10px; overflow:hidden; border:1px solid #e2e8f0; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
+          <div style="border-radius:10px; overflow:hidden; border:1px solid var(--border-default,#e2e8f0); box-shadow:0 2px 6px rgba(0,0,0,0.05);">
             <ui-progress percent="0" status-bar stroke-width="5"></ui-progress>
             <ui-callout-banner variant="neutral" heading="Database Backup" message="Task is queued and waiting to begin." no-icon></ui-callout-banner>
           </div>
@@ -269,7 +269,7 @@ export function initCalloutBannerDemo() {
         <!-- Custom labels -->
         <span class="cb-section-label" style="margin-top:8px;">Custom Labels — override any state text via <code>status-labels</code></span>
         <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px;">
-          <div style="border-radius:10px; overflow:hidden; border:1px solid #e2e8f0; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
+          <div style="border-radius:10px; overflow:hidden; border:1px solid var(--border-default,#e2e8f0); box-shadow:0 2px 6px rgba(0,0,0,0.05);">
             <ui-progress percent="0" status-bar stroke-width="5"
               status-labels='{"notStarted":"Queued","running":"Deploying","interrupted":"Rolled Back","completed":"Live"}'></ui-progress>
             <ui-callout-banner variant="neutral" heading="CI/CD Pipeline" message="Waiting in queue. Labels: Queued / Deploying / Rolled Back / Live." no-icon></ui-callout-banner>
@@ -294,15 +294,15 @@ export function initCalloutBannerDemo() {
         <!-- Badge alignment -->
         <span class="cb-section-label" style="margin-top:8px;">Badge Alignment — <code>status-bar-align</code>: left · center · right</span>
         <div style="display:flex; flex-direction:column; gap:10px;">
-          <div style="border-radius:10px; overflow:hidden; border:1px solid #e2e8f0; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
+          <div style="border-radius:10px; overflow:hidden; border:1px solid var(--border-default,#e2e8f0); box-shadow:0 2px 6px rgba(0,0,0,0.05);">
             <ui-progress percent="60" status-bar status-bar-align="left"   stroke-width="5" stroke-color="#3b82f6"></ui-progress>
             <ui-callout-banner variant="info" heading="Align: left (default)" message="Badge on left, percentage on right." no-icon></ui-callout-banner>
           </div>
-          <div style="border-radius:10px; overflow:hidden; border:1px solid #e2e8f0; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
+          <div style="border-radius:10px; overflow:hidden; border:1px solid var(--border-default,#e2e8f0); box-shadow:0 2px 6px rgba(0,0,0,0.05);">
             <ui-progress percent="60" status-bar status-bar-align="center" stroke-width="5" stroke-color="#8b5cf6"></ui-progress>
             <ui-callout-banner variant="neutral" heading="Align: center" message="Badge and percentage both centred." no-icon></ui-callout-banner>
           </div>
-          <div style="border-radius:10px; overflow:hidden; border:1px solid #e2e8f0; box-shadow:0 2px 6px rgba(0,0,0,0.05);">
+          <div style="border-radius:10px; overflow:hidden; border:1px solid var(--border-default,#e2e8f0); box-shadow:0 2px 6px rgba(0,0,0,0.05);">
             <ui-progress percent="60" status-bar status-bar-align="right"  stroke-width="5" stroke-color="#22c55e"></ui-progress>
             <ui-callout-banner variant="success" heading="Align: right" message="Percentage on left, badge on right." no-icon></ui-callout-banner>
           </div>
@@ -315,27 +315,27 @@ export function initCalloutBannerDemo() {
           <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
             <label style="font-size:13px; font-weight:600; white-space:nowrap;">Progress: <span id="cb-st-val">0</span>%</label>
             <input type="range" id="cb-st-slider" min="0" max="100" value="0" style="flex:1; min-width:120px;">
-            <button id="cb-st-interrupt" style="padding:4px 14px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #f59e0b; background:#fff7ed; color:#b45309; cursor:pointer; white-space:nowrap;">⛔ Interrupt</button>
-            <button id="cb-st-reset"     style="padding:4px 14px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #e2e8f0; background:#f8fafc; color:#475569; cursor:pointer;">↺ Reset</button>
+            <button id="cb-st-interrupt" style="padding:4px 14px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #f59e0b; background:var(--accent-orange-soft,#fff7ed); color:var(--accent-yellow,#b45309); cursor:pointer; white-space:nowrap;">⛔ Interrupt</button>
+            <button id="cb-st-reset"     style="padding:4px 14px; font-size:12px; font-weight:600; border-radius:6px; border:1.5px solid #e2e8f0; background:var(--bg-secondary,#f8fafc); color:#475569; cursor:pointer;">↺ Reset</button>
           </div>
           <!-- Alignment + label inputs row -->
-          <div style="display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start; padding:14px 16px; background:#f8fafc; border-radius:8px; border:1px solid #e2e8f0;">
+          <div style="display:flex; gap:12px; flex-wrap:wrap; align-items:flex-start; padding:14px 16px; background:var(--bg-secondary,#f8fafc); border-radius:8px; border:1px solid var(--border-default,#e2e8f0);">
             <div style="display:flex; align-items:center; gap:6px; flex-shrink:0;">
-              <span style="font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.05em;">Align</span>
-              <button id="cb-st-al-left"   style="padding:3px 10px; font-size:11px; font-weight:700; border-radius:6px; border:1.5px solid #3b82f6; background:#eff6ff; color:#2563eb; cursor:pointer;">Left</button>
-              <button id="cb-st-al-center" style="padding:3px 10px; font-size:11px; font-weight:700; border-radius:6px; border:1.5px solid #e2e8f0; background:#f8fafc; color:#475569; cursor:pointer;">Center</button>
-              <button id="cb-st-al-right"  style="padding:3px 10px; font-size:11px; font-weight:700; border-radius:6px; border:1.5px solid #e2e8f0; background:#f8fafc; color:#475569; cursor:pointer;">Right</button>
+              <span style="font-size:11px; font-weight:700; color:var(--text-secondary,#64748b); text-transform:uppercase; letter-spacing:.05em;">Align</span>
+              <button id="cb-st-al-left"   style="padding:3px 10px; font-size:11px; font-weight:700; border-radius:6px; border:1.5px solid #3b82f6; background:var(--accent-blue-soft,#eff6ff); color:var(--accent-blue,#2563eb); cursor:pointer;">Left</button>
+              <button id="cb-st-al-center" style="padding:3px 10px; font-size:11px; font-weight:700; border-radius:6px; border:1.5px solid #e2e8f0; background:var(--bg-secondary,#f8fafc); color:#475569; cursor:pointer;">Center</button>
+              <button id="cb-st-al-right"  style="padding:3px 10px; font-size:11px; font-weight:700; border-radius:6px; border:1.5px solid #e2e8f0; background:var(--bg-secondary,#f8fafc); color:#475569; cursor:pointer;">Right</button>
             </div>
             <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:8px; flex:1; min-width:280px;">
               ${['notStarted','running','interrupted','completed'].map((k,i) => `
-                <label style="display:flex; flex-direction:column; gap:3px; font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em;">
+                <label style="display:flex; flex-direction:column; gap:3px; font-size:10px; font-weight:700; color:var(--text-secondary,#64748b); text-transform:uppercase; letter-spacing:.05em;">
                   ${['Not Started','Running','Interrupted','Completed'][i]}
-                  <input id="cb-st-lbl-${k}" type="text" placeholder="${['Not Started','Running','Interrupted','Completed'][i]}" style="padding:4px 7px; font-size:12px; border-radius:6px; border:1px solid #e2e8f0; outline:none; background:white;">
+                  <input id="cb-st-lbl-${k}" type="text" placeholder="${['Not Started','Running','Interrupted','Completed'][i]}" style="padding:4px 7px; font-size:12px; border-radius:6px; border:1px solid var(--border-default,#e2e8f0); outline:none; background:var(--bg-primary,white);">
                 </label>`).join('')}
             </div>
           </div>
           <!-- Live banner -->
-          <div id="cb-st-wrapper" style="border-radius:10px; overflow:hidden; border:1px solid #e2e8f0; box-shadow:0 2px 8px rgba(0,0,0,0.06); transition:border-color 0.3s;">
+          <div id="cb-st-wrapper" style="border-radius:10px; overflow:hidden; border:1px solid var(--border-default,#e2e8f0); box-shadow:0 2px 8px rgba(0,0,0,0.06); transition:border-color 0.3s;">
             <ui-progress id="cb-st-prog" percent="0" status-bar status-bar-align="left" stroke-width="5"></ui-progress>
             <ui-callout-banner id="cb-st-banner" variant="neutral" heading="CI/CD Pipeline" message="Waiting to begin deployment." no-icon></ui-callout-banner>
           </div>
@@ -429,14 +429,14 @@ export function initCalloutBannerDemo() {
         <div class="demo-card-lite">
           <span class="cb-section-label">Industrial Map Simulator (Pointer Logics)</span>
           <div class="demo-map-sim">
-             <div class="map-point pulsed" style="top: 20%; left: 30%; color: #ef4444;"></div>
-             <ui-callout-banner variant="danger" placement="bottom" heading="PUMP_FAIL" pulse="true" size="md" style="position: absolute; top: 25%; left: 30%; transform: translateX(-50%); width: 180px;">Check valve 7.</ui-callout-banner>
+             <div class="map-point pulsed" style="top: 20%; left: 30%; color:var(--accent-red,#ef4444);"></div>
+             <ui-callout-banner variant="danger" placement="bottom" heading="PUMP_FAIL" pulse="true" size="sm" closable="false" style="position: absolute; top: 25%; left: 30%; transform: translateX(-50%); width: 210px;">Check valve 7.</ui-callout-banner>
 
              <div class="map-point" style="top: 70%; left: 75%; color: #22c55e;"></div>
-             <ui-callout-banner variant="success" placement="top" heading="BOILER_OK" size="md" style="position: absolute; top: 62%; left: 75%; transform: translateX(-50%); width: 140px;">Efficiency: 98%.</ui-callout-banner>
+             <ui-callout-banner variant="success" placement="top" heading="BOILER_OK" size="sm" closable="false" style="position: absolute; top: 62%; left: 75%; transform: translateX(-50%); width: 170px;">Efficiency: 98%.</ui-callout-banner>
 
              <div class="map-point" style="top: 50%; left: 10%; color: #10b981;"></div>
-             <ui-callout-banner variant="info" placement="right" heading="SENSOR_HUB" size="md" style="position: absolute; top: 50%; left: 14%; transform: translateY(-50%); width: 160px;">Link active.</ui-callout-banner>
+             <ui-callout-banner variant="info" placement="right" heading="SENSOR_HUB" size="sm" closable="false" style="position: absolute; top: 50%; left: 14%; transform: translateY(-50%); width: 180px;">Link active.</ui-callout-banner>
           </div>
         </div>
       `;
@@ -461,12 +461,12 @@ export function initCalloutBannerDemo() {
           <span class="cb-section-label">Industrial Market Ticker (Nasdaq style — Hover to Pause)</span>
           <ui-callout-banner banner="true" marquee="true" marquee-speed="15" variant="neutral" no-icon="true" size="md" pause-on-hover="true" style="background:#000; color:#fff; font-family:monospace; border-bottom:1px solid #333;">
             AAPL <span style="color:#22c55e">▲ 184.22 (+1.4%)</span> &bull; 
-            MSFT <span style="color:#ef4444">▼ 328.79 (-0.8%)</span> &bull; 
+            MSFT <span style="color:var(--accent-red,#ef4444)">▼ 328.79 (-0.8%)</span> &bull; 
             GOOGL <span style="color:#22c55e">▲ 138.21 (+0.5%)</span> &bull; 
-            TSLA <span style="color:#ef4444">▼ 214.50 (-3.2%)</span> &bull; 
+            TSLA <span style="color:var(--accent-red,#ef4444)">▼ 214.50 (-3.2%)</span> &bull; 
             NVDA <span style="color:#22c55e">▲ 485.42 (+4.1%)</span> &bull; 
             AMZN <span style="color:#22c55e">▲ 145.22 (+1.1%)</span> &bull;
-            META <span style="color:#ef4444">▼ 312.44 (-0.2%)</span> &bull;
+            META <span style="color:var(--accent-red,#ef4444)">▼ 312.44 (-0.2%)</span> &bull;
           </ui-callout-banner>
 
           <span class="cb-section-label">Global Forex Stream (Standard variant colors)</span>

package/dist/collection/assets/js/demos/card-demo.js

@@ -1,4 +1,4 @@
-// Card Demo Functions
+// Card Demo Functions
 export function initCardDemo() {
   const section = document.getElementById('card');
   if (!section) return;
@@ -18,7 +18,7 @@ export function initCardDemo() {
     section.addEventListener(eventName, (event) => {
       console.log(
         `%c[ui-card Event] %cEmitted: %c"${eventName}"`,
-        'color: #3b82f6; font-weight: bold;',
+        'color:var(--accent-blue,#3b82f6); font-weight: bold;',
         'color: #4b5563;',
         'color: #10b981; font-weight: bold;',
         {
@@ -33,7 +33,7 @@ export function initCardDemo() {
 
   section.innerHTML = `
     <div class="demo-header" style="margin-bottom: 32px;">
-      <h2 style="margin: 0 0 8px; font-size: 24px; color: #111827;">Unified Card Component</h2>
+      <h2 style="margin: 0 0 8px; font-size: 24px; color:var(--text-primary,#111827);">Unified Card Component</h2>
       <p style="margin: 0; opacity: 0.7; font-size: 15px; color: #4b5563;">A feature-rich, highly customizable card component that combines the best of both libraries.</p>
     </div>
 
@@ -53,7 +53,7 @@ export function initCardDemo() {
       .nav-pill {
         padding: 8px 16px;
         background: #f3f4f6;
-        border: 1px solid #e5e7eb;
+        border:1px solid var(--border-default,#e5e7eb);
         border-radius: 9999px;
         color: #4b5563;
         font-size: 14px;
@@ -61,10 +61,10 @@ export function initCardDemo() {
         cursor: pointer;
         transition: all 0.2s ease;
       }
-      .nav-pill:hover { background: #e5e7eb; color: #111827; }
+      .nav-pill:hover { background: #e5e7eb; color:var(--text-primary,#111827); }
       .nav-pill.active { background: #10b981; border-color: #10b981; color: white; }
       .demo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; margin-top: 16px; margin-bottom: 32px; }
-      .section-title { margin: 32px 0 16px; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; color: #111827; }
+      .section-title { margin: 32px 0 16px; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; color:var(--text-primary,#111827); }
     </style>
 
     <div id="cardDemoContainer"></div>
@@ -99,7 +99,7 @@ export function initCardDemo() {
       </div>
       
       <h3 class="section-title">Status Cards (New Variant)</h3>
-      <p style="color: #64748b; font-size: 14px; margin-top: -8px; margin-bottom: 16px;">
+      <p style="color:var(--text-secondary,#64748b); font-size: 14px; margin-top: -8px; margin-bottom: 16px;">
         Status cards tint the card background and border dynamically based on the <code>color</code> prop.
       </p>
       <div class="demo-grid">
@@ -128,22 +128,22 @@ export function initCardDemo() {
     container.innerHTML = `
       <h3 class="section-title" style="margin-top: 0;">Orientation Layouts</h3>
       <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 24px; margin-bottom: 32px;">
-         <ui-card layout="vertical" card-title="Vertical Layout" cover="https://images.unsplash.com/photo-1497366216548-37526070297c?w=600" description="The classic vertical card structure."></ui-card>
-         <ui-card layout="horizontal" card-title="Horizontal Layout" cover="https://images.unsplash.com/photo-1497366216548-37526070297c?w=600" description="Perfect for list items and detailed previews."></ui-card>
+         <ui-card layout="vertical" card-title="Vertical Layout" cover="/build/assets/images/nature_forest_1.png" description="The classic vertical card structure."></ui-card>
+         <ui-card layout="horizontal" card-title="Horizontal Layout" cover="/build/assets/images/nature_lake_2.png" description="Perfect for list items and detailed previews."></ui-card>
       </div>
 
       <h3 class="section-title">Design Patterns</h3>
       <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; margin-bottom: 32px;">
-         <ui-card pattern="product" card-title="Wireless Headphones" cover="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500" tag="Best Seller" button-text="Add to Cart">
+         <ui-card pattern="product" card-title="Wireless Headphones" cover="/build/assets/images/nature_desert_3.png" tag="Best Seller" button-text="Add to Cart">
            <div slot="content">
              <p style="font-size: 24px; font-weight: bold; margin: 8px 0;">$199.00</p>
-             <p style="color: #6b7280;">High-fidelity sound with noise cancellation.</p>
+             <p style="color: var(--text-secondary, #6b7280);">High-fidelity sound with noise cancellation.</p>
            </div>
          </ui-card>
 
          <ui-card pattern="shortcut" card-title="Security Settings" avatar-icon="fas fa-shield-alt" description="Manage your password, 2FA, and connected devices."></ui-card>
          
-         <ui-card pattern="shortcut" card-title="User Profile" avatar="https://i.pravatar.cc/150?u=a" description="Update your personal information and profile picture."></ui-card>
+         <ui-card pattern="shortcut" card-title="User Profile" avatar="/build/assets/images/logo.png" description="Update your personal information and profile picture."></ui-card>
       </div>
 
       <h3 class="section-title">Card Types (Nesting)</h3>
@@ -164,13 +164,13 @@ export function initCardDemo() {
     if (!container) return;
     container.innerHTML = `
       <h3 class="section-title" style="margin-top: 0;">Physical Interaction Engine</h3>
-      <p style="color: #64748b; font-size: 14px; margin-top: -8px; margin-bottom: 16px;">
+      <p style="color:var(--text-secondary,#64748b); font-size: 14px; margin-top: -8px; margin-bottom: 16px;">
         The component now supports 3D Tilt and Magnetic Attraction for high-end web experiences.
       </p>
       <div class="demo-grid">
         <ui-card tilt="true" variant="primary" importance="emphasized" card-title="3D Tilt Mode" description="Hover over this card to see it tilt in 3D space based on your mouse position."></ui-card>
         <ui-card magnetic="true" variant="success" card-title="Magnetic Attraction" description="This card follows your mouse cursor with a subtle organic movement."></ui-card>
-        <ui-card tilt="true" magnetic="true" glass="true" card-title="Total Physicality" ribbon="Elite" cover="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=500" description="Combining 3D tilt, magnetic attraction, and glassmorphism."></ui-card>
+        <ui-card tilt="true" magnetic="true" glass="true" card-title="Total Physicality" ribbon="Elite" cover="/build/assets/images/nature_lake_2.png" description="Combining 3D tilt, magnetic attraction, and glassmorphism."></ui-card>
       </div>
     `;
   };
@@ -183,14 +183,14 @@ export function initCardDemo() {
     container.innerHTML = `
       <h3 class="section-title" style="margin-top: 0;">Glassmorphism & Ribbons</h3>
       <div class="demo-grid">
-        <ui-card glass="true" card-title="Glass Design" ribbon="Premium" ribbon-color="#8b5cf6" cover="https://images.unsplash.com/photo-1550684848-fac1c5b4e853?w=500" description="Elegant translucent backdrop effect."></ui-card>
+        <ui-card glass="true" card-title="Glass Design" ribbon="Premium" ribbon-color="#8b5cf6" cover="/build/assets/images/nature_ocean_4.png" description="Elegant translucent backdrop effect."></ui-card>
         <ui-card variant="primary" card-title="Left Ribbon" ribbon="New" ribbon-position="top-left" ribbon-color="#10b981" description="Ribbons can be placed on the left side too."></ui-card>
         <ui-card variant="elevated" card-title="Custom Radius" border-radius="32px" border="2px dashed #10b981" description="Fully customizable borders and radius."></ui-card>
       </div>
 
       <h3 class="section-title">Headers & Content</h3>
       <div class="demo-grid">
-        <ui-card avatar="https://i.pravatar.cc/150?u=jane" card-title="Jane Cooper" extra="Active" description="Card with image avatar in header."></ui-card>
+        <ui-card avatar="/build/assets/images/logo.png" card-title="Jane Cooper" extra="Active" description="Card with image avatar in header."></ui-card>
         <ui-card avatar-icon="fas fa-rocket" card-title="Mission Alpha" extra="T-Minus 10s" description="Card with icon avatar in header."></ui-card>
         <ui-card card-title="Full Features" tag="V1.0" actions="Details, Docs, GitHub" button-text="Launch" description="Combining tags, quick actions, and buttons."></ui-card>
       </div>
@@ -286,7 +286,7 @@ export function initCardDemo() {
     if (!container) return;
     container.innerHTML = `
       <div class="playground-layout" style="display: grid; grid-template-columns: 350px 1fr; gap: 32px; align-items: start;">
-        <div class="controls-panel" style="background: white; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
+        <div class="controls-panel" style="border-radius: 12px; padding: 24px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);">
            <h4 style="margin: 0 0 20px; font-size: 18px;">Configuration</h4>
            
            <div style="display: flex; flex-direction: column; gap: 16px;">
@@ -354,14 +354,15 @@ export function initCardDemo() {
              </label>
            </div>
         </div>
-
-        <div class="result-panel" style="display: flex; flex-direction: column; align-items: center; gap: 32px;">
-           <div id="pg-container"></div>
+ 
+        <div class="result-panel" style="display: flex; flex-direction: column; align-items: center; gap: 32px; width: 100%;">
+           <div id="pg-container" class="playground-preview" style="width: 100%; box-sizing: border-box;"></div>
            
            <div style="width: 100%; background: #1f2937; border-radius: 8px; padding: 20px; color: #f9fafb; font-family: monospace; font-size: 13px; overflow-x: auto;">
              <code id="pg-code"></code>
            </div>
         </div>
+      </div>   </div>
       </div>
     `;
 
@@ -407,7 +408,7 @@ export function initCardDemo() {
   ${ribbon ? 'ribbon="' + ribbon + '"' : ''}
   ${type !== 'default' ? 'type="' + type + '"' : ''}
   ${importance !== 'standard' ? 'importance="' + importance + '"' : ''}
-  ${layout === 'horizontal' || pattern === 'product' ? 'cover="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?w=500"' : ''}
+  ${layout === 'horizontal' || pattern === 'product' ? 'cover="/build/assets/images/nature_forest_1.png"' : ''}
 >
   <div slot="content">
     <p>Flexible content area supporting any HTML or components.</p>
@@ -452,7 +453,7 @@ export function initCardDemo() {
                 description="Try expanding me if I'm at the bottom of your screen!"
               >
                 <div slot="content">
-                  <div style="height: 150px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 2px dashed #e5e7eb; color: #9ca3af;">
+                  <div style="height: 150px; background: var(--bg-secondary, #f3f4f6); border-radius: 8px; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--border-default, #e5e7eb); color: var(--text-muted, #9ca3af);">
                     <span>Detailed content for card ${i}</span>
                   </div>
                 </div>