aural-ui 3.0.7 → 4.0.1

package/dist/components/tabs/Tabs.stories.tsx

@@ -227,74 +227,82 @@ export const Basic: Story = {
           <TabsTrigger value="reports">Reports</TabsTrigger>
         </TabsList>
         <TabsContent value="overview" className="mt-6">
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-            <h3 className="mb-4 text-lg font-semibold text-white">Overview</h3>
-            <p className="mb-4 text-white/70">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+            <h3 className="text-fm-primary mb-4 text-lg font-semibold">
+              Overview
+            </h3>
+            <p className="text-fm-secondary mb-4">
               Get a comprehensive view of your project's key metrics and
               performance indicators.
             </p>
             <div className="grid grid-cols-2 gap-4">
-              <div className="rounded-lg border border-blue-500/20 bg-blue-500/10 p-4">
-                <div className="text-2xl font-bold text-blue-400">1,234</div>
-                <div className="text-sm text-white/60">Total Users</div>
+              <div className="border-fm-divider-secondary bg-fm-surface-info-sec rounded-lg border p-4">
+                <div className="text-fm-info text-2xl font-bold">1,234</div>
+                <div className="text-fm-secondary text-sm">Total Users</div>
               </div>
-              <div className="rounded-lg border border-green-500/20 bg-green-500/10 p-4">
-                <div className="text-2xl font-bold text-green-400">98.5%</div>
-                <div className="text-sm text-white/60">Uptime</div>
+              <div className="border-fm-divider-positive bg-fm-surface-positive-sec rounded-lg border p-4">
+                <div className="text-fm-positive text-2xl font-bold">98.5%</div>
+                <div className="text-fm-secondary text-sm">Uptime</div>
               </div>
             </div>
           </div>
         </TabsContent>
         <TabsContent value="analytics" className="mt-6">
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-            <h3 className="mb-4 text-lg font-semibold text-white">Analytics</h3>
-            <p className="mb-4 text-white/70">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+            <h3 className="text-fm-primary mb-4 text-lg font-semibold">
+              Analytics
+            </h3>
+            <p className="text-fm-secondary mb-4">
               Deep dive into user behavior and engagement patterns across your
               platform.
             </p>
             <div className="space-y-4">
-              <div className="flex items-center justify-between rounded-lg bg-white/5 p-3">
-                <span className="text-white">Page Views</span>
-                <span className="font-semibold text-green-400">+12.5%</span>
+              <div className="bg-fm-surface-secondary flex items-center justify-between rounded-lg p-3">
+                <span className="text-fm-primary">Page Views</span>
+                <span className="text-fm-positive font-semibold">+12.5%</span>
               </div>
-              <div className="flex items-center justify-between rounded-lg bg-white/5 p-3">
-                <span className="text-white">Session Duration</span>
-                <span className="font-semibold text-blue-400">4:32 avg</span>
+              <div className="bg-fm-surface-secondary flex items-center justify-between rounded-lg p-3">
+                <span className="text-fm-primary">Session Duration</span>
+                <span className="text-fm-info font-semibold">4:32 avg</span>
               </div>
-              <div className="flex items-center justify-between rounded-lg bg-white/5 p-3">
-                <span className="text-white">Bounce Rate</span>
+              <div className="bg-fm-surface-secondary flex items-center justify-between rounded-lg p-3">
+                <span className="text-fm-primary">Bounce Rate</span>
                 <span className="font-semibold text-orange-400">32.1%</span>
               </div>
             </div>
           </div>
         </TabsContent>
         <TabsContent value="reports" className="mt-6">
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-            <h3 className="mb-4 text-lg font-semibold text-white">Reports</h3>
-            <p className="mb-4 text-white/70">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+            <h3 className="text-fm-primary mb-4 text-lg font-semibold">
+              Reports
+            </h3>
+            <p className="text-fm-secondary mb-4">
               Generate and download detailed reports for stakeholders and
               analysis.
             </p>
             <div className="space-y-3">
-              <button className="w-full rounded-lg bg-white/5 p-3 text-left transition-colors hover:bg-white/10">
-                <div className="font-medium text-white">
+              <button className="bg-fm-surface-secondary hover:bg-fm-surface-tertiary w-full rounded-lg p-3 text-left transition-colors">
+                <div className="text-fm-primary font-medium">
                   Monthly Performance Report
                 </div>
-                <div className="text-sm text-white/60">
+                <div className="text-fm-secondary text-sm">
                   Last generated: 2 days ago
                 </div>
               </button>
-              <button className="w-full rounded-lg bg-white/5 p-3 text-left transition-colors hover:bg-white/10">
-                <div className="font-medium text-white">
+              <button className="bg-fm-surface-secondary hover:bg-fm-surface-tertiary w-full rounded-lg p-3 text-left transition-colors">
+                <div className="text-fm-primary font-medium">
                   User Engagement Analysis
                 </div>
-                <div className="text-sm text-white/60">
+                <div className="text-fm-secondary text-sm">
                   Last generated: 1 week ago
                 </div>
               </button>
-              <button className="w-full rounded-lg bg-white/5 p-3 text-left transition-colors hover:bg-white/10">
-                <div className="font-medium text-white">Revenue Breakdown</div>
-                <div className="text-sm text-white/60">
+              <button className="bg-fm-surface-secondary hover:bg-fm-surface-tertiary w-full rounded-lg p-3 text-left transition-colors">
+                <div className="text-fm-primary font-medium">
+                  Revenue Breakdown
+                </div>
+                <div className="text-fm-secondary text-sm">
                   Last generated: 3 days ago
                 </div>
               </button>
@@ -339,40 +347,46 @@ export const WithIcons: Story = {
         </TabsList>
 
         <TabsContent value="dashboard" className="mt-6">
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
             <div className="mb-4 flex items-center gap-3">
-              <FileChartIcon className="h-6 w-6 text-blue-400" />
-              <h3 className="text-lg font-semibold text-white">Dashboard</h3>
+              <FileChartIcon className="text-fm-info h-6 w-6" />
+              <h3 className="text-fm-primary text-lg font-semibold">
+                Dashboard
+              </h3>
             </div>
             <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
               <div className="rounded-lg border border-blue-500/30 bg-gradient-to-br from-blue-500/20 to-purple-500/20 p-4">
-                <div className="text-2xl font-bold text-white">847</div>
-                <div className="text-sm text-white/70">Active Sessions</div>
-                <div className="mt-1 text-xs text-green-400">
+                <div className="text-fm-primary text-2xl font-bold">847</div>
+                <div className="text-fm-secondary text-sm">Active Sessions</div>
+                <div className="text-fm-positive mt-1 text-xs">
                   ↗ +15% from yesterday
                 </div>
               </div>
               <div className="rounded-lg border border-green-500/30 bg-gradient-to-br from-green-500/20 to-teal-500/20 p-4">
-                <div className="text-2xl font-bold text-white">$12,847</div>
-                <div className="text-sm text-white/70">Revenue Today</div>
-                <div className="mt-1 text-xs text-green-400">
+                <div className="text-fm-primary text-2xl font-bold">
+                  $12,847
+                </div>
+                <div className="text-fm-secondary text-sm">Revenue Today</div>
+                <div className="text-fm-positive mt-1 text-xs">
                   ↗ +8% from yesterday
                 </div>
               </div>
               <div className="rounded-lg border border-orange-500/30 bg-gradient-to-br from-orange-500/20 to-red-500/20 p-4">
-                <div className="text-2xl font-bold text-white">23</div>
-                <div className="text-sm text-white/70">Critical Issues</div>
-                <div className="mt-1 text-xs text-red-400">↗ +3 new issues</div>
+                <div className="text-fm-primary text-2xl font-bold">23</div>
+                <div className="text-fm-secondary text-sm">Critical Issues</div>
+                <div className="text-fm-icon-negative mt-1 text-xs">
+                  ↗ +3 new issues
+                </div>
               </div>
             </div>
           </div>
         </TabsContent>
 
         <TabsContent value="users" className="mt-6">
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
             <div className="mb-4 flex items-center gap-3">
-              <EyeOpenIcon className="h-6 w-6 text-green-400" />
-              <h3 className="text-lg font-semibold text-white">
+              <EyeOpenIcon className="text-fm-positive h-6 w-6" />
+              <h3 className="text-fm-primary text-lg font-semibold">
                 User Management
               </h3>
             </div>
@@ -405,30 +419,34 @@ export const WithIcons: Story = {
               ].map((user, index) => (
                 <div
                   key={index}
-                  className="flex items-center justify-between rounded-lg bg-white/5 p-3 transition-colors hover:bg-white/10"
+                  className="bg-fm-surface-secondary hover:bg-fm-surface-tertiary flex items-center justify-between rounded-lg p-3 transition-colors"
                 >
                   <div className="flex items-center gap-3">
                     <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-purple-500 to-pink-500">
-                      <span className="text-sm font-semibold text-white">
+                      <span className="text-fm-primary text-sm font-semibold">
                         {user.avatar}
                       </span>
                     </div>
                     <div>
-                      <div className="font-medium text-white">{user.name}</div>
-                      <div className="text-sm text-white/60">{user.role}</div>
+                      <div className="text-fm-primary font-medium">
+                        {user.name}
+                      </div>
+                      <div className="text-fm-secondary text-sm">
+                        {user.role}
+                      </div>
                     </div>
                   </div>
                   <div className="flex items-center gap-2">
                     <div
                       className={`h-2 w-2 rounded-full ${
                         user.status === "online"
-                          ? "bg-green-500"
+                          ? "bg-fm-surface-positive"
                           : user.status === "away"
                             ? "bg-yellow-500"
-                            : "bg-gray-500"
+                            : "bg-fm-surface-tertiary"
                       }`}
                     />
-                    <span className="text-xs text-white/60 capitalize">
+                    <span className="text-fm-secondary text-xs capitalize">
                       {user.status}
                     </span>
                   </div>
@@ -439,43 +457,47 @@ export const WithIcons: Story = {
         </TabsContent>
 
         <TabsContent value="settings" className="mt-6">
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
             <div className="mb-4 flex items-center gap-3">
               <EditBigIcon className="h-6 w-6 text-purple-400" />
-              <h3 className="text-lg font-semibold text-white">Settings</h3>
+              <h3 className="text-fm-primary text-lg font-semibold">
+                Settings
+              </h3>
             </div>
             <div className="space-y-4">
-              <div className="flex items-center justify-between rounded-lg bg-white/5 p-3">
+              <div className="bg-fm-surface-secondary flex items-center justify-between rounded-lg p-3">
                 <div>
-                  <div className="font-medium text-white">
+                  <div className="text-fm-primary font-medium">
                     Email Notifications
                   </div>
-                  <div className="text-sm text-white/60">
+                  <div className="text-fm-secondary text-sm">
                     Receive updates via email
                   </div>
                 </div>
-                <button className="relative h-6 w-12 rounded-full bg-blue-500">
-                  <div className="absolute top-0.5 right-0.5 h-5 w-5 rounded-full bg-white transition-transform"></div>
+                <button className="bg-fm-surface-info relative h-6 w-12 rounded-full">
+                  <div className="bg-fm-surface-primary absolute top-0.5 right-0.5 h-5 w-5 rounded-full transition-transform"></div>
                 </button>
               </div>
-              <div className="flex items-center justify-between rounded-lg bg-white/5 p-3">
+              <div className="bg-fm-surface-secondary flex items-center justify-between rounded-lg p-3">
                 <div>
-                  <div className="font-medium text-white">Dark Mode</div>
-                  <div className="text-sm text-white/60">Use dark theme</div>
+                  <div className="text-fm-primary font-medium">Dark Mode</div>
+                  <div className="text-fm-secondary text-sm">
+                    Use dark theme
+                  </div>
                 </div>
-                <button className="relative h-6 w-12 rounded-full bg-blue-500">
-                  <div className="absolute top-0.5 right-0.5 h-5 w-5 rounded-full bg-white transition-transform"></div>
+                <button className="bg-fm-surface-info relative h-6 w-12 rounded-full">
+                  <div className="bg-fm-surface-primary absolute top-0.5 right-0.5 h-5 w-5 rounded-full transition-transform"></div>
                 </button>
               </div>
-              <div className="flex items-center justify-between rounded-lg bg-white/5 p-3">
+              <div className="bg-fm-surface-secondary flex items-center justify-between rounded-lg p-3">
                 <div>
-                  <div className="font-medium text-white">Auto-save</div>
-                  <div className="text-sm text-white/60">
+                  <div className="text-fm-primary font-medium">Auto-save</div>
+                  <div className="text-fm-secondary text-sm">
                     Automatically save changes
                   </div>
                 </div>
-                <button className="relative h-6 w-12 rounded-full bg-gray-600">
-                  <div className="absolute top-0.5 left-0.5 h-5 w-5 rounded-full bg-white transition-transform"></div>
+                <button className="bg-fm-surface-tertiary relative h-6 w-12 rounded-full">
+                  <div className="bg-fm-surface-primary absolute top-0.5 left-0.5 h-5 w-5 rounded-full transition-transform"></div>
                 </button>
               </div>
             </div>
@@ -483,22 +505,24 @@ export const WithIcons: Story = {
         </TabsContent>
 
         <TabsContent value="alerts" className="mt-6">
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
             <div className="mb-4 flex items-center gap-3">
-              <AlertIcon className="h-6 w-6 text-red-400" />
-              <h3 className="text-lg font-semibold text-white">
+              <AlertIcon className="text-fm-icon-negative h-6 w-6" />
+              <h3 className="text-fm-primary text-lg font-semibold">
                 System Alerts
               </h3>
             </div>
             <div className="space-y-3">
-              <div className="flex items-start gap-3 rounded-lg border border-red-500/20 bg-red-500/10 p-3">
-                <AlertIcon className="mt-0.5 h-5 w-5 flex-shrink-0 text-red-400" />
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-start gap-3 rounded-lg border p-3">
+                <AlertIcon className="text-fm-icon-negative mt-0.5 h-5 w-5 flex-shrink-0" />
                 <div>
-                  <div className="font-medium text-white">High CPU Usage</div>
-                  <div className="text-sm text-white/70">
+                  <div className="text-fm-primary font-medium">
+                    High CPU Usage
+                  </div>
+                  <div className="text-fm-secondary text-sm">
                     Server load is above 90% threshold
                   </div>
-                  <div className="mt-1 text-xs text-white/50">
+                  <div className="text-fm-tertiary mt-1 text-xs">
                     2 minutes ago
                   </div>
                 </div>
@@ -506,25 +530,29 @@ export const WithIcons: Story = {
               <div className="flex items-start gap-3 rounded-lg border border-yellow-500/20 bg-yellow-500/10 p-3">
                 <AlertIcon className="mt-0.5 h-5 w-5 flex-shrink-0 text-yellow-400" />
                 <div>
-                  <div className="font-medium text-white">
+                  <div className="text-fm-primary font-medium">
                     Database Connection
                   </div>
-                  <div className="text-sm text-white/70">
+                  <div className="text-fm-secondary text-sm">
                     Intermittent connectivity issues detected
                   </div>
-                  <div className="mt-1 text-xs text-white/50">
+                  <div className="text-fm-tertiary mt-1 text-xs">
                     15 minutes ago
                   </div>
                 </div>
               </div>
-              <div className="flex items-start gap-3 rounded-lg border border-green-500/20 bg-green-500/10 p-3">
-                <TickCircleIcon className="mt-0.5 h-5 w-5 flex-shrink-0 text-green-400" />
+              <div className="border-fm-divider-positive bg-fm-surface-positive-sec flex items-start gap-3 rounded-lg border p-3">
+                <TickCircleIcon className="text-fm-positive mt-0.5 h-5 w-5 flex-shrink-0" />
                 <div>
-                  <div className="font-medium text-white">Backup Completed</div>
-                  <div className="text-sm text-white/70">
+                  <div className="text-fm-primary font-medium">
+                    Backup Completed
+                  </div>
+                  <div className="text-fm-secondary text-sm">
                     Daily backup finished successfully
                   </div>
-                  <div className="mt-1 text-xs text-white/50">1 hour ago</div>
+                  <div className="text-fm-tertiary mt-1 text-xs">
+                    1 hour ago
+                  </div>
                 </div>
               </div>
             </div>
@@ -548,7 +576,7 @@ export const SizeVariations: Story = {
   render: () => (
     <div className="w-full max-w-4xl space-y-8">
       <div className="space-y-4">
-        <h3 className="text-lg font-medium text-white">Small Size</h3>
+        <h3 className="text-fm-primary text-lg font-medium">Small Size</h3>
         <Tabs defaultValue="tab1" size="sm" className="w-full">
           <TabsList className="grid w-full grid-cols-3">
             <TabsTrigger value="tab1">Compact</TabsTrigger>
@@ -556,23 +584,23 @@ export const SizeVariations: Story = {
             <TabsTrigger value="tab3">Minimal</TabsTrigger>
           </TabsList>
           <TabsContent value="tab1" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+              <p className="text-fm-secondary">
                 Small tabs are perfect for compact interfaces and secondary
                 navigation.
               </p>
             </div>
           </TabsContent>
           <TabsContent value="tab2" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+              <p className="text-fm-secondary">
                 Ideal for sidebars, modal dialogs, and tight spaces.
               </p>
             </div>
           </TabsContent>
           <TabsContent value="tab3" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+              <p className="text-fm-secondary">
                 Minimal design with efficient use of space.
               </p>
             </div>
@@ -581,7 +609,7 @@ export const SizeVariations: Story = {
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-medium text-white">
+        <h3 className="text-fm-primary text-lg font-medium">
           Medium Size (Default)
         </h3>
         <Tabs defaultValue="tab1" size="md" className="w-full">
@@ -591,23 +619,23 @@ export const SizeVariations: Story = {
             <TabsTrigger value="tab3">Default</TabsTrigger>
           </TabsList>
           <TabsContent value="tab1" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+              <p className="text-fm-secondary">
                 Medium tabs provide the perfect balance between visibility and
                 space efficiency.
               </p>
             </div>
           </TabsContent>
           <TabsContent value="tab2" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+              <p className="text-fm-secondary">
                 Great for main content areas and primary navigation.
               </p>
             </div>
           </TabsContent>
           <TabsContent value="tab3" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+              <p className="text-fm-secondary">
                 The default choice for most tab implementations.
               </p>
             </div>
@@ -616,7 +644,7 @@ export const SizeVariations: Story = {
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-medium text-white">Large Size</h3>
+        <h3 className="text-fm-primary text-lg font-medium">Large Size</h3>
         <Tabs defaultValue="tab1" size="lg" className="w-full">
           <TabsList className="grid w-full grid-cols-3">
             <TabsTrigger value="tab1">Prominent</TabsTrigger>
@@ -624,24 +652,24 @@ export const SizeVariations: Story = {
             <TabsTrigger value="tab3">Bold</TabsTrigger>
           </TabsList>
           <TabsContent value="tab1" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-8">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-8">
+              <p className="text-fm-secondary">
                 Large tabs make a statement and are perfect for hero sections
                 and primary interfaces.
               </p>
             </div>
           </TabsContent>
           <TabsContent value="tab2" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-8">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-8">
+              <p className="text-fm-secondary">
                 Enhanced visibility and improved touch targets for mobile
                 interfaces.
               </p>
             </div>
           </TabsContent>
           <TabsContent value="tab3" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-8">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-8">
+              <p className="text-fm-secondary">
                 Bold design that commands attention and improves user
                 experience.
               </p>
@@ -666,10 +694,10 @@ export const IndividualSizeOverride: Story = {
   render: () => (
     <div className="w-full max-w-3xl space-y-6">
       <div className="text-center">
-        <h3 className="mb-2 text-lg font-medium text-white">
+        <h3 className="text-fm-primary mb-2 text-lg font-medium">
           Individual Size Override
         </h3>
-        <p className="text-sm text-white/70">
+        <p className="text-fm-secondary text-sm">
           Tabs component has size="md" set, but individual triggers can override
           with their own size prop
         </p>
@@ -688,23 +716,23 @@ export const IndividualSizeOverride: Story = {
         </TabsList>
 
         <TabsContent value="small" className="mt-6">
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-            <h3 className="mb-4 text-lg font-semibold text-white">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+            <h3 className="text-fm-primary mb-4 text-lg font-semibold">
               Small Override
             </h3>
-            <p className="text-white/70">
+            <p className="text-fm-secondary">
               This tab trigger has{" "}
-              <code className="rounded bg-white/10 px-2 py-1 text-sm">
+              <code className="bg-fm-surface-secondary rounded px-2 py-1 text-sm">
                 size="sm"
               </code>{" "}
               which overrides the parent Tabs component's{" "}
-              <code className="rounded bg-white/10 px-2 py-1 text-sm">
+              <code className="bg-fm-surface-secondary rounded px-2 py-1 text-sm">
                 size="md"
               </code>{" "}
               setting.
             </p>
-            <div className="mt-4 rounded-lg border border-blue-500/20 bg-blue-500/10 p-3">
-              <div className="text-sm text-blue-200">
+            <div className="border-fm-divider-secondary bg-fm-surface-info-sec mt-4 rounded-lg border p-3">
+              <div className="text-fm-info text-sm">
                 <strong>Use case:</strong> When you need most tabs to be medium
                 size but want to emphasize or de-emphasize specific tabs.
               </div>
@@ -713,21 +741,21 @@ export const IndividualSizeOverride: Story = {
         </TabsContent>
 
         <TabsContent value="normal" className="mt-6">
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-            <h3 className="mb-4 text-lg font-semibold text-white">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+            <h3 className="text-fm-primary mb-4 text-lg font-semibold">
               Normal Size
             </h3>
-            <p className="text-white/70">
+            <p className="text-fm-secondary">
               This tab uses the default size inherited from the parent Tabs
               component (
-              <code className="rounded bg-white/10 px-2 py-1 text-sm">
+              <code className="bg-fm-surface-secondary rounded px-2 py-1 text-sm">
                 size="md"
               </code>
               ).
             </p>
             <div className="mt-4 grid grid-cols-2 gap-4">
-              <div className="rounded-lg border border-green-500/20 bg-green-500/10 p-3">
-                <div className="text-sm text-green-200">
+              <div className="border-fm-divider-positive bg-fm-surface-positive-sec rounded-lg border p-3">
+                <div className="text-fm-positive text-sm">
                   Consistent sizing across most tabs
                 </div>
               </div>
@@ -741,30 +769,30 @@ export const IndividualSizeOverride: Story = {
         </TabsContent>
 
         <TabsContent value="normal2" className="mt-6">
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-            <h3 className="mb-4 text-lg font-semibold text-white">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+            <h3 className="text-fm-primary mb-4 text-lg font-semibold">
               Another Normal Tab
             </h3>
-            <p className="text-white/70">
+            <p className="text-fm-secondary">
               Another tab using the inherited medium size from the parent
               component.
             </p>
             <div className="mt-4 space-y-3">
-              <div className="flex items-center gap-3 rounded-lg bg-white/5 p-3">
-                <TickCircleIcon className="h-5 w-5 text-green-400" />
-                <span className="text-white/70">
+              <div className="bg-fm-surface-secondary flex items-center gap-3 rounded-lg p-3">
+                <TickCircleIcon className="text-fm-positive h-5 w-5" />
+                <span className="text-fm-secondary">
                   Inherits parent size automatically
                 </span>
               </div>
-              <div className="flex items-center gap-3 rounded-lg bg-white/5 p-3">
-                <TickCircleIcon className="h-5 w-5 text-green-400" />
-                <span className="text-white/70">
+              <div className="bg-fm-surface-secondary flex items-center gap-3 rounded-lg p-3">
+                <TickCircleIcon className="text-fm-positive h-5 w-5" />
+                <span className="text-fm-secondary">
                   No need to specify size prop
                 </span>
               </div>
-              <div className="flex items-center gap-3 rounded-lg bg-white/5 p-3">
-                <TickCircleIcon className="h-5 w-5 text-green-400" />
-                <span className="text-white/70">
+              <div className="bg-fm-surface-secondary flex items-center gap-3 rounded-lg p-3">
+                <TickCircleIcon className="text-fm-positive h-5 w-5" />
+                <span className="text-fm-secondary">
                   Maintains consistent appearance
                 </span>
               </div>
@@ -773,20 +801,20 @@ export const IndividualSizeOverride: Story = {
         </TabsContent>
 
         <TabsContent value="large" className="mt-6">
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-            <h3 className="mb-4 text-lg font-semibold text-white">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+            <h3 className="text-fm-primary mb-4 text-lg font-semibold">
               Large Override
             </h3>
-            <p className="text-white/70">
+            <p className="text-fm-secondary">
               This tab trigger has{" "}
-              <code className="rounded bg-white/10 px-2 py-1 text-sm">
+              <code className="bg-fm-surface-secondary rounded px-2 py-1 text-sm">
                 size="lg"
               </code>{" "}
               which overrides the parent's medium size setting, making it more
               prominent.
             </p>
-            <div className="mt-4 rounded-lg border border-orange-500/20 bg-orange-500/10 p-3">
-              <div className="text-sm text-orange-200">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary mt-4 rounded-lg border p-3">
+              <div className="text-fm-warning text-sm">
                 <strong>Use case:</strong> Call-to-action tabs, primary
                 navigation items, or tabs that need extra visual emphasis in
                 your interface.
@@ -794,24 +822,28 @@ export const IndividualSizeOverride: Story = {
             </div>
             <div className="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
               <div className="rounded-lg border border-blue-500/30 bg-gradient-to-br from-blue-500/20 to-purple-500/20 p-4">
-                <div className="text-lg font-semibold text-white">Enhanced</div>
-                <div className="text-sm text-white/70">Better visibility</div>
+                <div className="text-fm-primary text-lg font-semibold">
+                  Enhanced
+                </div>
+                <div className="text-fm-secondary text-sm">
+                  Better visibility
+                </div>
               </div>
               <div className="rounded-lg border border-green-500/30 bg-gradient-to-br from-green-500/20 to-teal-500/20 p-4">
-                <div className="text-lg font-semibold text-white">
+                <div className="text-fm-primary text-lg font-semibold">
                   Prominent
                 </div>
-                <div className="text-sm text-white/70">Draws attention</div>
+                <div className="text-fm-secondary text-sm">Draws attention</div>
               </div>
             </div>
           </div>
         </TabsContent>
       </Tabs>
 
-      <div className="space-y-1 text-center text-xs text-white/60">
+      <div className="text-fm-secondary space-y-1 text-center text-xs">
         <p>
           Parent Tabs component:{" "}
-          <code className="rounded bg-white/10 px-2 py-0.5 font-mono">
+          <code className="bg-fm-surface-secondary rounded px-2 py-0.5 font-mono">
             size="md"
           </code>
         </p>
@@ -856,10 +888,10 @@ export const ComplexContent: Story = {
         <TabsContent value="products" className="mt-6">
           <div className="space-y-4">
             <div className="flex items-center justify-between">
-              <h3 className="text-lg font-semibold text-white">
+              <h3 className="text-fm-primary text-lg font-semibold">
                 Product Catalog
               </h3>
-              <button className="flex items-center gap-2 rounded-lg bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600">
+              <button className="bg-fm-surface-info text-fm-surface-primary hover:bg-fm-surface-info flex items-center gap-2 rounded-lg px-4 py-2 transition-colors">
                 <PlusIcon className="h-4 w-4" />
                 Add Product
               </button>
@@ -906,22 +938,22 @@ export const ComplexContent: Story = {
               ].map((product, index) => (
                 <div
                   key={index}
-                  className="rounded-lg border border-white/10 bg-white/5 p-4 transition-colors hover:bg-white/10"
+                  className="border-fm-divider-secondary bg-fm-surface-secondary hover:bg-fm-surface-tertiary rounded-lg border p-4 transition-colors"
                 >
                   <div className="mb-3 flex aspect-square items-center justify-center rounded-lg bg-gradient-to-br from-purple-500/20 to-pink-500/20">
-                    <SearchIcon className="h-8 w-8 text-white/50" />
+                    <SearchIcon className="text-fm-tertiary h-8 w-8" />
                   </div>
-                  <h4 className="mb-1 font-medium text-white">
+                  <h4 className="text-fm-primary mb-1 font-medium">
                     {product.name}
                   </h4>
-                  <p className="mb-2 text-sm text-white/60">
+                  <p className="text-fm-secondary mb-2 text-sm">
                     {product.category}
                   </p>
                   <div className="flex items-center justify-between">
-                    <span className="font-semibold text-white">
+                    <span className="text-fm-primary font-semibold">
                       {product.price}
                     </span>
-                    <span className="text-xs text-white/60">
+                    <span className="text-fm-secondary text-xs">
                       {product.stock} in stock
                     </span>
                   </div>
@@ -934,14 +966,14 @@ export const ComplexContent: Story = {
         <TabsContent value="customers" className="mt-6">
           <div className="space-y-4">
             <div className="flex items-center justify-between">
-              <h3 className="text-lg font-semibold text-white">
+              <h3 className="text-fm-primary text-lg font-semibold">
                 Customer Directory
               </h3>
               <div className="flex gap-2">
-                <button className="rounded bg-white/10 px-3 py-1 text-sm text-white transition-colors hover:bg-white/20">
+                <button className="bg-fm-surface-secondary text-fm-primary hover:bg-fm-surface-tertiary rounded px-3 py-1 text-sm transition-colors">
                   Export
                 </button>
-                <button className="rounded bg-blue-500 px-3 py-1 text-sm text-white transition-colors hover:bg-blue-600">
+                <button className="bg-fm-surface-info text-fm-surface-primary hover:bg-fm-surface-info rounded px-3 py-1 text-sm transition-colors">
                   Add Customer
                 </button>
               </div>
@@ -982,11 +1014,11 @@ export const ComplexContent: Story = {
               ].map((customer, index) => (
                 <div
                   key={index}
-                  className="flex items-center justify-between rounded-lg border border-white/10 bg-white/5 p-4 transition-colors hover:bg-white/10"
+                  className="border-fm-divider-secondary bg-fm-surface-secondary hover:bg-fm-surface-tertiary flex items-center justify-between rounded-lg border p-4 transition-colors"
                 >
                   <div className="flex items-center gap-3">
                     <div className="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-purple-500">
-                      <span className="text-sm font-semibold text-white">
+                      <span className="text-fm-primary text-sm font-semibold">
                         {customer.name
                           .split(" ")
                           .map((n) => n[0])
@@ -994,19 +1026,19 @@ export const ComplexContent: Story = {
                       </span>
                     </div>
                     <div>
-                      <div className="font-medium text-white">
+                      <div className="text-fm-primary font-medium">
                         {customer.name}
                       </div>
-                      <div className="text-sm text-white/60">
+                      <div className="text-fm-secondary text-sm">
                         {customer.email}
                       </div>
                     </div>
                   </div>
                   <div className="text-right">
-                    <div className="font-medium text-white">
+                    <div className="text-fm-primary font-medium">
                       {customer.value}
                     </div>
-                    <div className="text-sm text-white/60">
+                    <div className="text-fm-secondary text-sm">
                       {customer.orders} orders
                     </div>
                   </div>
@@ -1019,11 +1051,11 @@ export const ComplexContent: Story = {
         <TabsContent value="orders" className="mt-6">
           <div className="space-y-4">
             <div className="flex items-center justify-between">
-              <h3 className="text-lg font-semibold text-white">
+              <h3 className="text-fm-primary text-lg font-semibold">
                 Recent Orders
               </h3>
               <div className="flex gap-2">
-                <select className="rounded border border-white/20 bg-white/10 px-3 py-1 text-sm text-white">
+                <select className="border-fm-divider-secondary bg-fm-surface-secondary text-fm-primary rounded border px-3 py-1 text-sm">
                   <option>All Status</option>
                   <option>Pending</option>
                   <option>Processing</option>
@@ -1073,32 +1105,36 @@ export const ComplexContent: Story = {
               ].map((order, index) => (
                 <div
                   key={index}
-                  className="flex items-center justify-between rounded-lg border border-white/10 bg-white/5 p-4 transition-colors hover:bg-white/10"
+                  className="border-fm-divider-secondary bg-fm-surface-secondary hover:bg-fm-surface-tertiary flex items-center justify-between rounded-lg border p-4 transition-colors"
                 >
                   <div className="flex items-center gap-4">
                     <div>
-                      <div className="font-medium text-white">{order.id}</div>
-                      <div className="text-sm text-white/60">
+                      <div className="text-fm-primary font-medium">
+                        {order.id}
+                      </div>
+                      <div className="text-fm-secondary text-sm">
                         {order.customer}
                       </div>
                     </div>
                   </div>
                   <div className="flex items-center gap-4">
                     <div className="text-right">
-                      <div className="font-medium text-white">
+                      <div className="text-fm-primary font-medium">
                         {order.total}
                       </div>
-                      <div className="text-sm text-white/60">{order.date}</div>
+                      <div className="text-fm-secondary text-sm">
+                        {order.date}
+                      </div>
                     </div>
                     <span
                       className={`rounded-full px-2 py-1 text-xs ${
                         order.status === "delivered"
-                          ? "bg-green-500/20 text-green-400"
+                          ? "text-fm-positive bg-green-500/20"
                           : order.status === "shipped"
-                            ? "bg-blue-500/20 text-blue-400"
+                            ? "text-fm-info bg-blue-500/20"
                             : order.status === "processing"
                               ? "bg-yellow-500/20 text-yellow-400"
-                              : "bg-gray-500/20 text-gray-400"
+                              : "bg-fm-surface-secondary text-fm-tertiary"
                       }`}
                     >
                       {order.status}
@@ -1113,50 +1149,58 @@ export const ComplexContent: Story = {
         <TabsContent value="analytics" className="mt-6">
           <div className="space-y-6">
             <div className="flex items-center gap-3">
-              <TickCircleIcon className="h-6 w-6 text-green-400" />
-              <h3 className="text-lg font-semibold text-white">
+              <TickCircleIcon className="text-fm-positive h-6 w-6" />
+              <h3 className="text-fm-primary text-lg font-semibold">
                 Sales Analytics
               </h3>
-              <span className="rounded-full bg-green-500/20 px-3 py-1 text-xs text-green-400">
+              <span className="text-fm-positive rounded-full bg-green-500/20 px-3 py-1 text-xs">
                 Large Tab
               </span>
             </div>
 
             <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
               <div className="rounded-lg border border-blue-500/30 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 p-4">
-                <div className="text-2xl font-bold text-white">$45,231</div>
-                <div className="text-sm text-white/70">Revenue This Month</div>
-                <div className="mt-1 text-xs text-green-400">
+                <div className="text-fm-primary text-2xl font-bold">
+                  $45,231
+                </div>
+                <div className="text-fm-secondary text-sm">
+                  Revenue This Month
+                </div>
+                <div className="text-fm-positive mt-1 text-xs">
                   ↗ +12% vs last month
                 </div>
               </div>
               <div className="rounded-lg border border-green-500/30 bg-gradient-to-br from-green-500/20 to-emerald-500/20 p-4">
-                <div className="text-2xl font-bold text-white">1,847</div>
-                <div className="text-sm text-white/70">Orders This Month</div>
-                <div className="mt-1 text-xs text-green-400">
+                <div className="text-fm-primary text-2xl font-bold">1,847</div>
+                <div className="text-fm-secondary text-sm">
+                  Orders This Month
+                </div>
+                <div className="text-fm-positive mt-1 text-xs">
                   ↗ +8% vs last month
                 </div>
               </div>
               <div className="rounded-lg border border-purple-500/30 bg-gradient-to-br from-purple-500/20 to-pink-500/20 p-4">
-                <div className="text-2xl font-bold text-white">324</div>
-                <div className="text-sm text-white/70">New Customers</div>
-                <div className="mt-1 text-xs text-green-400">
+                <div className="text-fm-primary text-2xl font-bold">324</div>
+                <div className="text-fm-secondary text-sm">New Customers</div>
+                <div className="text-fm-positive mt-1 text-xs">
                   ↗ +15% vs last month
                 </div>
               </div>
               <div className="rounded-lg border border-orange-500/30 bg-gradient-to-br from-orange-500/20 to-red-500/20 p-4">
-                <div className="text-2xl font-bold text-white">$24.50</div>
-                <div className="text-sm text-white/70">Avg Order Value</div>
-                <div className="mt-1 text-xs text-red-400">
+                <div className="text-fm-primary text-2xl font-bold">$24.50</div>
+                <div className="text-fm-secondary text-sm">Avg Order Value</div>
+                <div className="text-fm-icon-negative mt-1 text-xs">
                   ↘ -3% vs last month
                 </div>
               </div>
             </div>
 
-            <div className="rounded-lg border border-amber-500/20 bg-amber-500/10 p-4">
-              <div className="text-sm text-amber-200">
+            <div className="border-fm-divider-warning bg-fm-surface-warning-sec rounded-lg border p-4">
+              <div className="text-fm-warning text-sm">
                 <strong>Note:</strong> The Analytics tab uses{" "}
-                <code className="rounded bg-white/10 px-2 py-1">size="lg"</code>
+                <code className="bg-fm-surface-secondary rounded px-2 py-1">
+                  size="lg"
+                </code>
                 to emphasize its importance as the primary data view, while
                 other tabs inherit the default medium size.
               </div>
@@ -1181,7 +1225,7 @@ export const GlowDirectionVariations: Story = {
   render: () => (
     <div className="w-full max-w-4xl space-y-8">
       <div className="space-y-4">
-        <h3 className="text-lg font-medium text-white">
+        <h3 className="text-fm-primary text-lg font-medium">
           Bottom Glow (Default)
         </h3>
         <Tabs defaultValue="tab1" size="md" className="w-full">
@@ -1197,24 +1241,24 @@ export const GlowDirectionVariations: Story = {
             </TabsTrigger>
           </TabsList>
           <TabsContent value="tab1" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+              <p className="text-fm-secondary">
                 Bottom glow creates an underline effect that emphasizes the
                 tab's connection to content below.
               </p>
             </div>
           </TabsContent>
           <TabsContent value="tab2" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+              <p className="text-fm-secondary">
                 Perfect for interfaces where you want to draw attention to the
                 content area.
               </p>
             </div>
           </TabsContent>
           <TabsContent value="tab3" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+              <p className="text-fm-secondary">
                 Creates a strong visual connection between the tab and its
                 associated content.
               </p>
@@ -1224,7 +1268,7 @@ export const GlowDirectionVariations: Story = {
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-medium text-white">Top Glow</h3>
+        <h3 className="text-fm-primary text-lg font-medium">Top Glow</h3>
         <Tabs defaultValue="tab1" size="md" className="w-full">
           <TabsList className="grid w-full grid-cols-3">
             <TabsTrigger value="tab1" glowDirection="top">
@@ -1238,23 +1282,23 @@ export const GlowDirectionVariations: Story = {
             </TabsTrigger>
           </TabsList>
           <TabsContent value="tab1" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+              <p className="text-fm-secondary">
                 Top glow creates a subtle highlight effect above the active tab,
                 perfect for elevated interfaces.
               </p>
             </div>
           </TabsContent>
           <TabsContent value="tab2" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+              <p className="text-fm-secondary">
                 Alternative glow direction for different visual effects.
               </p>
             </div>
           </TabsContent>
           <TabsContent value="tab3" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+              <p className="text-fm-secondary">
                 Ideal for creating variety in your interface design.
               </p>
             </div>
@@ -1263,7 +1307,7 @@ export const GlowDirectionVariations: Story = {
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-lg font-medium text-white">
+        <h3 className="text-fm-primary text-lg font-medium">
           Mixed Glow Directions
         </h3>
         <Tabs defaultValue="tab1" size="md" className="w-full">
@@ -1282,32 +1326,32 @@ export const GlowDirectionVariations: Story = {
             </TabsTrigger>
           </TabsList>
           <TabsContent value="tab1" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+              <p className="text-fm-secondary">
                 You can mix and match glow directions for different visual
                 effects.
               </p>
             </div>
           </TabsContent>
           <TabsContent value="tab2" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+              <p className="text-fm-secondary">
                 Each tab can have its own glow direction for maximum
                 flexibility.
               </p>
             </div>
           </TabsContent>
           <TabsContent value="tab3" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+              <p className="text-fm-secondary">
                 Useful for creating visual hierarchy or emphasizing specific
                 tabs.
               </p>
             </div>
           </TabsContent>
           <TabsContent value="tab4" className="mt-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-              <p className="text-white/70">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+              <p className="text-fm-secondary">
                 Experiment with different combinations to achieve your desired
                 design.
               </p>
@@ -1316,8 +1360,8 @@ export const GlowDirectionVariations: Story = {
         </Tabs>
       </div>
 
-      <div className="rounded-lg border border-blue-500/20 bg-blue-500/10 p-4">
-        <div className="text-sm text-blue-200">
+      <div className="border-fm-divider-secondary bg-fm-surface-info-sec rounded-lg border p-4">
+        <div className="text-fm-info text-sm">
           <strong>Note:</strong> The glowDirection prop allows you to customize
           the visual effect of active tabs. Use "bottom" (default) for an
           underline-style glow or "top" for a subtle highlight effect. You can
@@ -1356,10 +1400,10 @@ export const InteractiveStates: Story = {
     return (
       <div className="w-full max-w-3xl space-y-6">
         <div className="text-center">
-          <h3 className="mb-2 text-lg font-medium text-white">
+          <h3 className="text-fm-primary mb-2 text-lg font-medium">
             Interactive States Demo
           </h3>
-          <p className="text-sm text-white/70">
+          <p className="text-fm-secondary text-sm">
             Click tabs to see loading states and transitions
           </p>
         </div>
@@ -1377,7 +1421,7 @@ export const InteractiveStates: Story = {
             </TabsTrigger>
             <TabsTrigger value="loading" className="gap-2" disabled={isLoading}>
               {isLoading && activeTab === "loading" ? (
-                <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+                <div className="border-fm-divider-secondary border-t-fm-primary h-4 w-4 animate-spin rounded-full border-2" />
               ) : (
                 <AlertIcon className="h-4 w-4" />
               )}
@@ -1394,62 +1438,66 @@ export const InteractiveStates: Story = {
           </TabsList>
 
           <TabsContent value="normal" className="mt-6">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-              <h3 className="mb-4 text-lg font-semibold text-white">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+              <h3 className="text-fm-primary mb-4 text-lg font-semibold">
                 Normal State
               </h3>
-              <p className="mb-4 text-white/70">
+              <p className="text-fm-secondary mb-4">
                 This is the default state of the component with all
                 functionality working normally.
               </p>
               <div className="grid grid-cols-2 gap-4">
-                <div className="rounded-lg border border-blue-500/20 bg-blue-500/10 p-3">
-                  <div className="text-lg font-semibold text-white">98.5%</div>
-                  <div className="text-sm text-white/70">System Uptime</div>
+                <div className="border-fm-divider-secondary bg-fm-surface-info-sec rounded-lg border p-3">
+                  <div className="text-fm-primary text-lg font-semibold">
+                    98.5%
+                  </div>
+                  <div className="text-fm-secondary text-sm">System Uptime</div>
                 </div>
-                <div className="rounded-lg border border-green-500/20 bg-green-500/10 p-3">
-                  <div className="text-lg font-semibold text-white">1,247</div>
-                  <div className="text-sm text-white/70">Active Users</div>
+                <div className="border-fm-divider-positive bg-fm-surface-positive-sec rounded-lg border p-3">
+                  <div className="text-fm-primary text-lg font-semibold">
+                    1,247
+                  </div>
+                  <div className="text-fm-secondary text-sm">Active Users</div>
                 </div>
               </div>
             </div>
           </TabsContent>
 
           <TabsContent value="loading" className="mt-6">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-6">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
               {isLoading ? (
                 <div className="py-8 text-center">
-                  <div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-                  <h3 className="mb-2 text-lg font-semibold text-white">
+                  <div className="border-fm-divider-secondary border-t-fm-primary mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-2" />
+                  <h3 className="text-fm-primary mb-2 text-lg font-semibold">
                     Loading Content...
                   </h3>
-                  <p className="text-white/70">
+                  <p className="text-fm-secondary">
                     Please wait while we fetch the latest data.
                   </p>
                 </div>
               ) : (
                 <>
-                  <h3 className="mb-4 text-lg font-semibold text-white">
+                  <h3 className="text-fm-primary mb-4 text-lg font-semibold">
                     Loading State Demo
                   </h3>
-                  <p className="mb-4 text-white/70">
+                  <p className="text-fm-secondary mb-4">
                     This tab demonstrates loading states and async content
                     fetching.
                   </p>
                   <div className="space-y-3">
-                    <div className="flex items-center gap-3 rounded-lg bg-white/5 p-3">
-                      <div className="flex h-5 w-5 items-center justify-center rounded-full bg-green-500">
-                        <TickCircleIcon className="h-3 w-3 text-white" />
+                    <div className="bg-fm-surface-secondary flex items-center gap-3 rounded-lg p-3">
+                      <div className="bg-fm-surface-positive flex h-5 w-5 items-center justify-center rounded-full">
+                        <TickCircleIcon className="text-fm-primary h-3 w-3" />
                       </div>
-                      <span className="text-white/70">
+                      <span className="text-fm-secondary">
                         Content loaded successfully
                       </span>
                     </div>
-                    <div className="flex items-center gap-3 rounded-lg bg-white/5 p-3">
-                      <div className="flex h-5 w-5 items-center justify-center rounded-full bg-blue-500">
-                        <AlertIcon className="h-3 w-3 text-white" />
+                    <div className="bg-fm-surface-secondary flex items-center gap-3 rounded-lg p-3">
+                      <div className="bg-fm-surface-info flex h-5 w-5 items-center justify-center rounded-full">
+                        <AlertIcon className="text-fm-primary h-3 w-3" />
                       </div>
-                      <span className="text-white/70">
+                      <span className="text-fm-secondary">
                         Data synchronized with server
                       </span>
                     </div>
@@ -1460,31 +1508,31 @@ export const InteractiveStates: Story = {
           </TabsContent>
 
           <TabsContent value="error" className="mt-6">
-            <div className="rounded-lg border border-red-500/20 bg-red-500/5 p-6">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
               <div className="mb-4 flex items-start gap-3">
-                <CrossIcon className="mt-0.5 h-6 w-6 flex-shrink-0 text-red-400" />
+                <CrossIcon className="text-fm-icon-negative mt-0.5 h-6 w-6 flex-shrink-0" />
                 <div>
-                  <h3 className="text-lg font-semibold text-white">
+                  <h3 className="text-fm-primary text-lg font-semibold">
                     Error State
                   </h3>
-                  <p className="text-white/70">
+                  <p className="text-fm-secondary">
                     Something went wrong while loading the content.
                   </p>
                 </div>
               </div>
 
-              <div className="mb-4 rounded-lg border border-red-500/20 bg-red-500/10 p-4">
-                <div className="text-sm text-red-200">
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary mb-4 rounded-lg border p-4">
+                <div className="text-fm-secondary text-sm">
                   <strong>Error:</strong> Failed to fetch data from the server.
                   Please check your connection and try again.
                 </div>
               </div>
 
               <div className="flex gap-2">
-                <button className="rounded-lg bg-red-500 px-4 py-2 text-white transition-colors hover:bg-red-600">
+                <button className="bg-fm-surface-negative text-fm-surface-primary hover:bg-fm-surface-negative rounded-lg px-4 py-2 transition-colors">
                   Retry
                 </button>
-                <button className="rounded-lg bg-white/10 px-4 py-2 text-white transition-colors hover:bg-white/20">
+                <button className="bg-fm-surface-secondary text-fm-primary hover:bg-fm-surface-tertiary rounded-lg px-4 py-2 transition-colors">
                   Report Issue
                 </button>
               </div>
@@ -1492,38 +1540,46 @@ export const InteractiveStates: Story = {
           </TabsContent>
 
           <TabsContent value="success" className="mt-6">
-            <div className="rounded-lg border border-green-500/20 bg-green-500/5 p-6">
+            <div className="border-fm-divider-positive bg-fm-surface-positive-sec rounded-lg border p-6">
               <div className="mb-4 flex items-start gap-3">
-                <TickCircleIcon className="mt-0.5 h-6 w-6 flex-shrink-0 text-green-400" />
+                <TickCircleIcon className="text-fm-positive mt-0.5 h-6 w-6 flex-shrink-0" />
                 <div>
-                  <h3 className="text-lg font-semibold text-white">
+                  <h3 className="text-fm-primary text-lg font-semibold">
                     Success State
                   </h3>
-                  <p className="text-white/70">
+                  <p className="text-fm-secondary">
                     Operation completed successfully!
                   </p>
                 </div>
               </div>
 
               <div className="space-y-3">
-                <div className="rounded-lg border border-green-500/20 bg-green-500/10 p-4">
-                  <div className="text-sm text-green-200">
+                <div className="border-fm-divider-positive bg-fm-surface-positive-sec rounded-lg border p-4">
+                  <div className="text-fm-positive text-sm">
                     ✅ All systems are operational and running smoothly.
                   </div>
                 </div>
 
                 <div className="grid grid-cols-3 gap-3">
-                  <div className="rounded-lg bg-white/5 p-3 text-center">
-                    <div className="text-lg font-semibold text-white">100%</div>
-                    <div className="text-xs text-white/60">Success Rate</div>
+                  <div className="bg-fm-surface-secondary rounded-lg p-3 text-center">
+                    <div className="text-fm-primary text-lg font-semibold">
+                      100%
+                    </div>
+                    <div className="text-fm-secondary text-xs">
+                      Success Rate
+                    </div>
                   </div>
-                  <div className="rounded-lg bg-white/5 p-3 text-center">
-                    <div className="text-lg font-semibold text-white">0ms</div>
-                    <div className="text-xs text-white/60">Error Rate</div>
+                  <div className="bg-fm-surface-secondary rounded-lg p-3 text-center">
+                    <div className="text-fm-primary text-lg font-semibold">
+                      0ms
+                    </div>
+                    <div className="text-fm-secondary text-xs">Error Rate</div>
                   </div>
-                  <div className="rounded-lg bg-white/5 p-3 text-center">
-                    <div className="text-lg font-semibold text-white">Fast</div>
-                    <div className="text-xs text-white/60">Performance</div>
+                  <div className="bg-fm-surface-secondary rounded-lg p-3 text-center">
+                    <div className="text-fm-primary text-lg font-semibold">
+                      Fast
+                    </div>
+                    <div className="text-fm-secondary text-xs">Performance</div>
                   </div>
                 </div>
               </div>
@@ -1531,10 +1587,10 @@ export const InteractiveStates: Story = {
           </TabsContent>
         </Tabs>
 
-        <div className="text-center text-xs text-white/60">
+        <div className="text-fm-secondary text-center text-xs">
           <p>
             Current active tab:{" "}
-            <span className="rounded bg-white/10 px-2 py-0.5 font-mono">
+            <span className="bg-fm-surface-secondary rounded px-2 py-0.5 font-mono">
               {activeTab}
             </span>
           </p>