@getmicdrop/svelte-components 5.20.2 → 5.21.1

package/dist/stories/PatternsGallery.svelte

@@ -47,13 +47,13 @@
 
   // Section styling
   const sectionClass = (dark: boolean) =>
-    `rounded-xl p-6 ${dark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} border`;
+    `rounded-xl p-6 ${dark ? 'bg-bg-secondary border-stroke-primary' : 'bg-card border-border'} border`;
 
   const headingClass = (dark: boolean) =>
-    `text-xl font-semibold mb-1 ${dark ? 'text-white' : 'text-gray-900'}`;
+    `text-xl font-semibold mb-1 ${dark ? 'text-white' : 'text-text-primary'}`;
 
   const subheadingClass = (dark: boolean) =>
-    `text-sm mb-4 ${dark ? 'text-gray-400' : 'text-gray-500'}`;
+    `text-sm mb-4 ${dark ? 'text-muted-foreground' : 'text-muted-foreground'}`;
 
   // Demo data
   const sampleErrors: Record<string, string | null | undefined> = {
@@ -95,16 +95,16 @@
   ];
 </script>
 
-<div class="min-h-screen p-6 space-y-8 {isDark ? 'bg-gray-900' : 'bg-gray-50'}">
+<div class="min-h-screen p-6 space-y-8 {isDark ? 'bg-bg-primary' : 'bg-bg-secondary'}">
   <!-- Header -->
   <div class="flex items-center justify-between mb-8">
     <div>
-      <h1 class="text-3xl font-bold {isDark ? 'text-white' : 'text-gray-900'}">Patterns Gallery</h1>
-      <p class="{isDark ? 'text-gray-400' : 'text-gray-600'}">Layout & flow components (Layer 3)</p>
+      <h1 class="text-3xl font-bold {isDark ? 'text-white' : 'text-text-primary'}">Patterns Gallery</h1>
+      <p class="{isDark ? 'text-muted-foreground' : 'text-text-secondary'}">Layout & flow components (Layer 3)</p>
     </div>
     <button
       onclick={toggleDark}
-      class="px-4 py-2 rounded-lg font-medium {isDark ? 'bg-yellow-500 text-black' : 'bg-gray-800 text-white'}"
+      class="px-4 py-2 rounded-lg font-medium {isDark ? 'bg-accent-warning text-text-primary' : 'bg-bg-secondary text-white'}"
     >
       {isDark ? '☀️ Light' : '🌙 Dark'}
     </button>
@@ -115,15 +115,15 @@
     <h2 class={headingClass(isDark)}>PageHeader</h2>
     <p class={subheadingClass(isDark)}>Page title with optional actions and breadcrumb</p>
 
-    <div class="space-y-6 border rounded-lg p-4 {isDark ? 'border-gray-700' : 'border-gray-200'}">
+    <div class="space-y-6 border rounded-lg p-4 {isDark ? 'border-stroke-primary' : 'border-border'}">
       <PageHeader title="Page Title">
         {#snippet actions()}{/snippet}
       </PageHeader>
-      <hr class="{isDark ? 'border-gray-700' : 'border-gray-200'}" />
+      <hr class="{isDark ? 'border-stroke-primary' : 'border-border'}" />
       <PageHeader title="With Subtitle" subtitle="This is a subtitle explaining the page">
         {#snippet actions()}{/snippet}
       </PageHeader>
-      <hr class="{isDark ? 'border-gray-700' : 'border-gray-200'}" />
+      <hr class="{isDark ? 'border-stroke-primary' : 'border-border'}" />
       <PageHeader title="With Actions">
         {#snippet actions()}
           <Button size="sm">Add New</Button>
@@ -191,7 +191,7 @@
     </FormGrid>
 
     <div class="mt-6">
-      <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">3 Columns</p>
+      <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-2">3 Columns</p>
       <FormGrid cols={3}>
         <Input label="City" placeholder="New York" />
         <Input label="State" placeholder="NY" />
@@ -207,17 +207,17 @@
 
     <div class="space-y-6">
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Default (right-aligned)</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-2">Default (right-aligned)</p>
         <FormActions submitLabel="Save Changes" cancelLabel="Cancel" />
       </div>
 
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">With loading state</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-2">With loading state</p>
         <FormActions submitLabel="Saving..." isSubmitting={true} />
       </div>
 
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Delete confirmation</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-2">Delete confirmation</p>
         <FormActions submitLabel="Delete" submitVariant="red" cancelVariant="alternative" />
       </div>
     </div>
@@ -266,8 +266,8 @@
         {#snippet children(data: typeof listItems[0], _index: number)}
           <div class="flex justify-between items-center">
             <div>
-              <p class="font-medium {isDark ? 'text-white' : 'text-gray-900'}">{data.primary}</p>
-              <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'}">{data.secondary}</p>
+              <p class="font-medium {isDark ? 'text-white' : 'text-text-primary'}">{data.primary}</p>
+              <p class="text-sm {isDark ? 'text-muted-foreground' : 'text-muted-foreground'}">{data.secondary}</p>
             </div>
             <Badge variant="info">Active</Badge>
           </div>
@@ -285,7 +285,7 @@
       {#snippet children(data: typeof gridItems[0], _index: number)}
         <Card>
           <h4 class="font-medium mb-1">{data.title}</h4>
-          <p class="text-sm text-gray-500">{data.description}</p>
+          <p class="text-sm text-muted-foreground">{data.description}</p>
         </Card>
       {/snippet}
     </DataGrid>
@@ -324,10 +324,10 @@
     <h2 class={headingClass(isDark)}>Sidebar</h2>
     <p class={subheadingClass(isDark)}>Sidebar + main content layout</p>
 
-    <div class="border rounded-lg overflow-hidden {isDark ? 'border-gray-700' : 'border-gray-200'}">
+    <div class="border rounded-lg overflow-hidden {isDark ? 'border-stroke-primary' : 'border-border'}">
       <Sidebar>
         {#snippet sidebar()}
-          <div class="p-4 {isDark ? 'bg-gray-900' : 'bg-gray-100'} h-48">
+          <div class="p-4 {isDark ? 'bg-bg-primary' : 'bg-muted'} h-48">
             <p class="font-medium mb-4">Navigation</p>
             <ul class="space-y-2 text-sm">
               <li>Dashboard</li>
@@ -350,8 +350,8 @@
     <h2 class={headingClass(isDark)}>Header</h2>
     <p class={subheadingClass(isDark)}>Top navigation bar with logo, nav links, and user menu</p>
 
-    <div class="border rounded-lg overflow-hidden {isDark ? 'border-gray-700' : 'border-gray-200'}">
-      <div class="flex items-center justify-between p-4 bg-white dark:bg-gray-800">
+    <div class="border rounded-lg overflow-hidden {isDark ? 'border-stroke-primary' : 'border-border'}">
+      <div class="flex items-center justify-between p-4 bg-card">
         <Header 
           name="John Doe" 
           email="john@example.com"
@@ -369,7 +369,7 @@
     <h2 class={headingClass(isDark)}>BottomNav</h2>
     <p class={subheadingClass(isDark)}>Mobile bottom navigation</p>
 
-    <div class="border rounded-lg overflow-hidden max-w-sm mx-auto {isDark ? 'border-gray-700' : 'border-gray-200'} flex">
+    <div class="border rounded-lg overflow-hidden max-w-sm mx-auto {isDark ? 'border-stroke-primary' : 'border-border'} flex">
       <BottomNav links={bottomNavLinks} />
     </div>
   </section>
@@ -379,7 +379,7 @@
     <h2 class={headingClass(isDark)}>PageLayout</h2>
     <p class={subheadingClass(isDark)}>Complete page structure with breadcrumb, title, and content</p>
 
-    <div class="border rounded-lg overflow-hidden {isDark ? 'border-gray-700' : 'border-gray-200'}">
+    <div class="border rounded-lg overflow-hidden {isDark ? 'border-stroke-primary' : 'border-border'}">
       <PageLayout 
         title="PageLayout Demo" 
         subtitle="Example page layout"

package/dist/stories/PrimitivesGallery.spec.js

@@ -27,8 +27,8 @@ describe('PrimitivesGallery Component Tests', () => {
     test('Initial theme is light mode', () => {
       const { container } = setupTest();
       const mainDiv = container.querySelector('.min-h-screen');
-      expect(mainDiv).toHaveClass('bg-gray-50');
-      expect(mainDiv).not.toHaveClass('bg-gray-900');
+      expect(mainDiv).toHaveClass('bg-bg-secondary');
+      expect(mainDiv).not.toHaveClass('bg-bg-primary');
     });
   });
 
@@ -45,7 +45,7 @@ describe('PrimitivesGallery Component Tests', () => {
 
       // Dark mode should be active
       const mainDiv = container.querySelector('.min-h-screen');
-      expect(mainDiv).toHaveClass('bg-gray-900');
+      expect(mainDiv).toHaveClass('bg-bg-primary');
     });
 
     test('Dark mode button shows correct emoji and text', async () => {
@@ -66,8 +66,8 @@ describe('PrimitivesGallery Component Tests', () => {
       await user.click(toggleButton);
 
       const mainDiv = container.querySelector('.min-h-screen');
-      expect(mainDiv).toHaveClass('bg-gray-900');
-      expect(mainDiv).not.toHaveClass('bg-gray-50');
+      expect(mainDiv).toHaveClass('bg-bg-primary');
+      expect(mainDiv).not.toHaveClass('bg-bg-secondary');
     });
   });
 
@@ -652,7 +652,7 @@ describe('PrimitivesGallery Component Tests', () => {
 
       // Dark mode should be active
       const mainDiv = container.querySelector('.min-h-screen');
-      expect(mainDiv).toHaveClass('bg-gray-900');
+      expect(mainDiv).toHaveClass('bg-bg-primary');
     });
 
     test('Disabled elements cannot be interacted with', async () => {
@@ -723,7 +723,7 @@ describe('PrimitivesGallery Component Tests', () => {
 
       // At least one section should have dark mode background
       const darkSections = Array.from(sections).filter(section =>
-        section.className.includes('bg-gray-800')
+        section.className.includes('bg-bg-secondary')
       );
       expect(darkSections.length).toBeGreaterThan(0);
     });
@@ -745,14 +745,14 @@ describe('PrimitivesGallery Component Tests', () => {
       // Enable dark mode
       await user.click(toggleButton);
       const mainDiv = container.querySelector('.min-h-screen');
-      expect(mainDiv).toHaveClass('bg-gray-900');
+      expect(mainDiv).toHaveClass('bg-bg-primary');
 
       // Interact with other elements
       const input = screen.getByPlaceholderText('Enter text...');
       await user.type(input, 'test');
 
       // Dark mode should still be active
-      expect(mainDiv).toHaveClass('bg-gray-900');
+      expect(mainDiv).toHaveClass('bg-bg-primary');
     });
   });
 

package/dist/stories/PrimitivesGallery.svelte

@@ -119,25 +119,25 @@
 
   // Section component for consistent styling
   const sectionClass = (dark: boolean) =>
-    `rounded-xl p-6 ${dark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'} border`;
+    `rounded-xl p-6 ${dark ? 'bg-bg-secondary border-stroke-primary' : 'bg-card border-border'} border`;
 
   const headingClass = (dark: boolean) =>
-    `text-xl font-semibold mb-1 ${dark ? 'text-white' : 'text-gray-900'}`;
+    `text-xl font-semibold mb-1 ${dark ? 'text-white' : 'text-text-primary'}`;
 
   const subheadingClass = (dark: boolean) =>
-    `text-sm mb-4 ${dark ? 'text-gray-400' : 'text-gray-500'}`;
+    `text-sm mb-4 ${dark ? 'text-muted-foreground' : 'text-muted-foreground'}`;
 </script>
 
-<div class="min-h-screen p-6 space-y-8 {isDark ? 'bg-gray-900' : 'bg-gray-50'}">
+<div class="min-h-screen p-6 space-y-8 {isDark ? 'bg-bg-primary' : 'bg-bg-secondary'}">
   <!-- Header -->
   <div class="flex items-center justify-between mb-8">
     <div>
-      <h1 class="text-3xl font-bold {isDark ? 'text-white' : 'text-gray-900'}">Primitives Gallery</h1>
-      <p class="{isDark ? 'text-gray-400' : 'text-gray-600'}">All primitive components with variants and states</p>
+      <h1 class="text-3xl font-bold {isDark ? 'text-white' : 'text-text-primary'}">Primitives Gallery</h1>
+      <p class="{isDark ? 'text-muted-foreground' : 'text-text-secondary'}">All primitive components with variants and states</p>
     </div>
     <button
       onclick={toggleDark}
-      class="px-4 py-2 rounded-lg font-medium {isDark ? 'bg-yellow-500 text-black' : 'bg-gray-800 text-white'}"
+      class="px-4 py-2 rounded-lg font-medium {isDark ? 'bg-accent-warning text-text-primary' : 'bg-bg-secondary text-white'}"
     >
       {isDark ? '☀️ Light' : '🌙 Dark'}
     </button>
@@ -150,7 +150,7 @@
 
     <div class="space-y-4">
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Variants</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-2">Variants</p>
         <div class="flex flex-wrap gap-3 items-center">
           <Button variant="default">Primary</Button>
           <Button variant="alternative">Secondary</Button>
@@ -166,8 +166,8 @@
       </div>
 
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">NavItem (Mobile Navigation)</p>
-        <div class="flex gap-6 items-end bg-gray-100 dark:bg-gray-800 p-4 rounded-lg">
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-2">NavItem (Mobile Navigation)</p>
+        <div class="flex gap-6 items-end bg-muted p-4 rounded-lg">
           <NavItem>
             <Home class="w-5 h-5" />
             <span>Home</span>
@@ -184,31 +184,31 @@
       </div>
 
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Avatar, Menu & Card Components</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-2">Avatar, Menu & Card Components</p>
         <div class="flex gap-6 items-start">
           <div class="flex flex-col items-center gap-2">
             <AvatarButton>
               <Avatar src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150'%3E%3Crect width='150' height='150' fill='%238b5cf6'/%3E%3Ccircle cx='75' cy='55' r='30' fill='%23fff'/%3E%3Cellipse cx='75' cy='130' rx='45' ry='35' fill='%23fff'/%3E%3C/svg%3E" rounded size="md" />
             </AvatarButton>
-            <span class="text-xs text-gray-500">AvatarButton</span>
+            <span class="text-xs text-muted-foreground">AvatarButton</span>
           </div>
-          <div class="w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden">
+          <div class="w-56 bg-card border border-border rounded-lg shadow-lg overflow-hidden">
             <MenuItem>Settings</MenuItem>
             <MenuItem>Profile</MenuItem>
-            <div class="h-px bg-gray-200 dark:bg-gray-700"></div>
+            <div class="h-px bg-bg-tertiary"></div>
             <MenuItem danger>Sign out</MenuItem>
           </div>
           <div class="w-64 space-y-2">
             <CardAction>
               <span class="flex flex-col">
                 <span class="font-medium">Select this option</span>
-                <span class="text-sm text-gray-500">Description text here</span>
+                <span class="text-sm text-muted-foreground">Description text here</span>
               </span>
             </CardAction>
             <CardAction>
               <span class="flex flex-col">
                 <span class="font-medium">Another option</span>
-                <span class="text-sm text-gray-500">More description</span>
+                <span class="text-sm text-muted-foreground">More description</span>
               </span>
             </CardAction>
           </div>
@@ -216,7 +216,7 @@
       </div>
 
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Sizes</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-2">Sizes</p>
         <div class="flex flex-wrap gap-3 items-end">
           <Button size="xs">Extra Small</Button>
           <Button size="sm">Small</Button>
@@ -227,7 +227,7 @@
       </div>
 
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">States</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-2">States</p>
         <div class="flex flex-wrap gap-3 items-center">
           <Button disabled>Disabled</Button>
           <Button loading>Loading</Button>
@@ -322,7 +322,7 @@
 
     <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-3">Checkbox</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-3">Checkbox</p>
         <div class="space-y-3">
           <Checkbox bind:checked={checkboxChecked}>Default checkbox</Checkbox>
           <Checkbox checked={true}>Checked by default</Checkbox>
@@ -332,7 +332,7 @@
       </div>
 
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-3">Radio</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-3">Radio</p>
         <div class="space-y-3">
           <Radio name="demo" value="option1" bind:group={radioValue}>Option 1</Radio>
           <Radio name="demo" value="option2" bind:group={radioValue}>Option 2</Radio>
@@ -342,7 +342,7 @@
       </div>
 
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-3">Toggle</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-3">Toggle</p>
         <div class="space-y-3">
           <Toggle bind:checked={toggleChecked}>Default toggle</Toggle>
           <Toggle checked={true}>On by default</Toggle>
@@ -360,7 +360,7 @@
 
     <div class="space-y-4">
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Colors</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-2">Colors</p>
         <div class="flex flex-wrap gap-3">
           <Badge variant="blue">Blue</Badge>
           <Badge variant="gray">Gray</Badge>
@@ -374,7 +374,7 @@
       </div>
 
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Sizes</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-2">Sizes</p>
         <div class="flex flex-wrap gap-3 items-center">
           <Badge size="xs">Extra Small</Badge>
           <Badge size="sm">Small</Badge>
@@ -412,15 +412,15 @@
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
       <Card>
         <h3 class="text-lg font-semibold mb-2">Default Card</h3>
-        <p class="text-gray-600">Basic card with default styling.</p>
+        <p class="text-text-secondary">Basic card with default styling.</p>
       </Card>
       <Card class="p-8">
         <h3 class="text-lg font-semibold mb-2">Large Padding</h3>
-        <p class="text-gray-600">Card with larger padding.</p>
+        <p class="text-text-secondary">Card with larger padding.</p>
       </Card>
       <Card hover>
         <h3 class="text-lg font-semibold mb-2">Hoverable</h3>
-        <p class="text-gray-600">Hover to see the effect.</p>
+        <p class="text-text-secondary">Hover to see the effect.</p>
       </Card>
     </div>
   </section>
@@ -434,15 +434,15 @@
       <Accordion>
         <AccordionItem>
           {#snippet header()}What is this component?{/snippet}
-          <p class="text-gray-600">This is an accordion component that allows you to show and hide content sections.</p>
+          <p class="text-text-secondary">This is an accordion component that allows you to show and hide content sections.</p>
         </AccordionItem>
         <AccordionItem>
           {#snippet header()}How do I use it?{/snippet}
-          <p class="text-gray-600">Wrap AccordionItem components inside an Accordion component. Each item uses a header snippet.</p>
+          <p class="text-text-secondary">Wrap AccordionItem components inside an Accordion component. Each item uses a header snippet.</p>
         </AccordionItem>
         <AccordionItem>
           {#snippet header()}Is it accessible?{/snippet}
-          <p class="text-gray-600">Yes! It includes proper ARIA attributes and keyboard navigation.</p>
+          <p class="text-text-secondary">Yes! It includes proper ARIA attributes and keyboard navigation.</p>
         </AccordionItem>
       </Accordion>
     </div>
@@ -457,17 +457,17 @@
       <Tabs bind:activeTabValue={activeTab}>
         <TabItem title="Profile">
           <div class="p-4">
-            <p class="text-gray-600">This is the Profile tab content.</p>
+            <p class="text-text-secondary">This is the Profile tab content.</p>
           </div>
         </TabItem>
         <TabItem title="Settings">
           <div class="p-4">
-            <p class="text-gray-600">This is the Settings tab content.</p>
+            <p class="text-text-secondary">This is the Settings tab content.</p>
           </div>
         </TabItem>
         <TabItem title="Messages">
           <div class="p-4">
-            <p class="text-gray-600">This is the Messages tab content.</p>
+            <p class="text-text-secondary">This is the Messages tab content.</p>
           </div>
         </TabItem>
       </Tabs>
@@ -483,7 +483,7 @@
       totalPages={10}
       bind:currentPage={currentPage}
     />
-    <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'} mt-3">Current page: {currentPage}</p>
+    <p class="text-sm {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-3">Current page: {currentPage}</p>
   </section>
 
   <!-- ========== SKELETON ========== -->
@@ -493,7 +493,7 @@
 
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Basic Skeleton</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-2">Basic Skeleton</p>
         <div class="space-y-2">
           <Skeleton class="h-4 w-full" />
           <Skeleton class="h-4 w-3/4" />
@@ -502,18 +502,18 @@
       </div>
 
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Image Placeholder</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-2">Image Placeholder</p>
         <ImagePlaceholder />
       </div>
 
       <div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">Card Placeholder</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-2">Card Placeholder</p>
         <CardPlaceholder />
       </div>
     </div>
 
     <div class="mt-6">
-      <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mb-2">List Placeholder</p>
+      <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mb-2">List Placeholder</p>
       <ListPlaceholder />
     </div>
   </section>
@@ -526,15 +526,15 @@
     <div class="flex flex-wrap gap-6 items-center">
       <div class="text-center">
         <Spinner size="sm" />
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">Small</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-2">Small</p>
       </div>
       <div class="text-center">
         <Spinner size="md" />
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">Medium</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-2">Medium</p>
       </div>
       <div class="text-center">
         <Spinner size="lg" />
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">Large</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-2">Large</p>
       </div>
     </div>
   </section>
@@ -547,27 +547,27 @@
     <div class="flex flex-wrap gap-4 items-end">
       <div class="text-center">
         <Avatar size="xs" />
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">XS</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-2">XS</p>
       </div>
       <div class="text-center">
         <Avatar size="sm" />
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">SM</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-2">SM</p>
       </div>
       <div class="text-center">
         <Avatar size="md" />
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">MD</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-2">MD</p>
       </div>
       <div class="text-center">
         <Avatar size="lg" />
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">LG</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-2">LG</p>
       </div>
       <div class="text-center">
         <Avatar size="xl" />
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">XL</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-2">XL</p>
       </div>
       <div class="text-center">
         <Avatar size="md" initials="JD" />
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-2">Initials</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-2">Initials</p>
       </div>
     </div>
   </section>
@@ -616,61 +616,61 @@
 
     <div class="flex flex-wrap gap-6">
       <div class="text-center">
-        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
+        <div class="w-12 h-12 flex items-center justify-center bg-muted rounded-lg">
           <Home />
         </div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Home</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-1">Home</p>
       </div>
       <div class="text-center">
-        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
+        <div class="w-12 h-12 flex items-center justify-center bg-muted rounded-lg">
           <Profile />
         </div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Profile</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-1">Profile</p>
       </div>
       <div class="text-center">
-        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
+        <div class="w-12 h-12 flex items-center justify-center bg-muted rounded-lg">
           <Notification />
         </div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Notification</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-1">Notification</p>
       </div>
       <div class="text-center">
-        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
+        <div class="w-12 h-12 flex items-center justify-center bg-muted rounded-lg">
           <Message />
         </div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Message</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-1">Message</p>
       </div>
       <div class="text-center">
-        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
+        <div class="w-12 h-12 flex items-center justify-center bg-muted rounded-lg">
           <CheckCircle />
         </div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">CheckCircle</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-1">CheckCircle</p>
       </div>
       <div class="text-center">
-        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
+        <div class="w-12 h-12 flex items-center justify-center bg-muted rounded-lg">
           <ErrorCircle />
         </div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">ErrorCircle</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-1">ErrorCircle</p>
       </div>
       <div class="text-center">
-        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
+        <div class="w-12 h-12 flex items-center justify-center bg-muted rounded-lg">
           <Info />
         </div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Info</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-1">Info</p>
       </div>
       <div class="text-center">
-        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
+        <div class="w-12 h-12 flex items-center justify-center bg-muted rounded-lg">
           <WarningIcon />
         </div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Warning</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-1">Warning</p>
       </div>
       <div class="text-center">
-        <div class="w-12 h-12 flex items-center justify-center bg-gray-100 rounded-lg">
+        <div class="w-12 h-12 flex items-center justify-center bg-muted rounded-lg">
           <Cross />
         </div>
-        <p class="text-xs {isDark ? 'text-gray-500' : 'text-gray-400'} mt-1">Cross</p>
+        <p class="text-xs {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-1">Cross</p>
       </div>
     </div>
-    <p class="text-sm {isDark ? 'text-gray-400' : 'text-gray-500'} mt-4">
+    <p class="text-sm {isDark ? 'text-muted-foreground' : 'text-muted-foreground'} mt-4">
       See <strong>IconGallery</strong> story for complete icon reference (30+ icons)
     </p>
   </section>
@@ -712,7 +712,7 @@
       <h3 class="text-lg font-semibold">Example Modal</h3>
     {/snippet}
     {#snippet body()}
-      <p class="text-gray-600">This is the modal content. Click outside or press ESC to close.</p>
+      <p class="text-text-secondary">This is the modal content. Click outside or press ESC to close.</p>
     {/snippet}
     {#snippet footer()}
       <Button variant="ghost" onclick={() => showModal = false}>Cancel</Button>
@@ -724,7 +724,7 @@
   <Drawer bind:open={showDrawer} placement="right">
     <div class="p-6">
       <h3 class="text-lg font-semibold mb-4">Drawer Content</h3>
-      <p class="text-gray-600">This drawer slides in from the right.</p>
+      <p class="text-text-secondary">This drawer slides in from the right.</p>
       <Button class="mt-4" onclick={() => showDrawer = false}>Close</Button>
     </div>
   </Drawer>
@@ -733,7 +733,7 @@
   <BottomSheet open={showBottomSheet} onclose={() => showBottomSheet = false}>
     <div class="p-6">
       <h3 class="text-lg font-semibold mb-4">Bottom Sheet</h3>
-      <p class="text-gray-600">This sheet slides up from the bottom on mobile.</p>
+      <p class="text-text-secondary">This sheet slides up from the bottom on mobile.</p>
       <Button class="mt-4" onclick={() => showBottomSheet = false}>Close</Button>
     </div>
   </BottomSheet>