aural-ui 3.0.6 → 4.0.1

package/dist/components/aspect-ratio/AspectRatio.stories.tsx

@@ -40,54 +40,54 @@ const meta: Meta<typeof AspectRatio> = {
                 background: transparent !important;
               }
               body {
-                background: #0a0a0a !important;
+                background: var(--color-fm-surface-primary) !important;
               }
               #storybook-docs {
-                background: #0a0a0a !important;
+                background: var(--color-fm-surface-primary) !important;
               }
               .sbdocs-preview {
                 background: transparent !important;
                 border: none !important;
               }
               .sbdocs-h1, .sbdocs-h2, .sbdocs-h3, .sbdocs-h4, .sbdocs-h5, .sbdocs-h6 {
-                color: white !important;
+                color: var(--color-fm-icon-active) !important;
               }
               .sbdocs-p, .sbdocs-li {
-                color: rgba(255, 255, 255, 0.7) !important;
+                color: var(--color-fm-secondary) !important;
               }
               .sbdocs-code {
-                background: rgba(255, 255, 255, 0.1) !important;
-                color: rgba(168, 85, 247, 1) !important;
-                border: 1px solid rgba(255, 255, 255, 0.1) !important;
+                background: var(--color-fm-surface-secondary) !important;
+                color: var(--color-fm-secondary-500) !important;
+                border: 1px solid var(--color-fm-divider-secondary) !important;
               }
               .sbdocs-pre {
-                background: rgba(0, 0, 0, 0.4) !important;
-                border: 1px solid rgba(255, 255, 255, 0.1) !important;
+                background: var(--color-fm-surface-secondary) !important;
+                border: 1px solid var(--color-fm-divider-secondary) !important;
               }
               .sbdocs-table {
-                background: rgba(255, 255, 255, 0.05) !important;
-                border: 1px solid rgba(255, 255, 255, 0.1) !important;
+                background: var(--color-fm-surface-secondary) !important;
+                border: 1px solid var(--color-fm-divider-secondary) !important;
               }
               .sbdocs-table th {
-                background: rgba(255, 255, 255, 0.05) !important;
-                color: white !important;
-                border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+                background: var(--color-fm-surface-secondary) !important;
+                color: var(--color-fm-icon-active) !important;
+                border-bottom: 1px solid var(--color-fm-divider-secondary) !important;
               }
               .sbdocs-table td {
-                color: rgba(255, 255, 255, 0.7) !important;
-                border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
+                color: var(--color-fm-secondary) !important;
+                border-bottom: 1px solid var(--color-fm-divider-tertiary) !important;
               }
             `}
           </style>
 
-          <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900/20 to-gray-900">
+          <div className="bg-fm-surface-primary min-h-screen">
             {/* Header */}
-            <div className="relative overflow-hidden border-b border-white/10 bg-black/20 backdrop-blur-xl">
-              <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-transparent to-blue-500/10" />
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary/50 relative overflow-hidden border-b backdrop-blur-xl">
+              <div className="from-fm-secondary-500/10 to-fm-blue-500/10 absolute inset-0 bg-gradient-to-r via-transparent" />
               <div className="relative !mx-auto max-w-7xl px-6 py-16">
                 <div className="!space-y-6 text-center">
-                  <h1 className="!text-white">AspectRatio</h1>
-                  <p className="!mx-auto max-w-3xl text-xl leading-relaxed !text-white">
+                  <h1 className="!text-fm-primary">AspectRatio</h1>
+                  <p className="!text-fm-primary !mx-auto max-w-3xl text-xl leading-relaxed">
                     A utility component for maintaining consistent aspect ratios
                     across different content types and screen sizes. Built on
                     Radix UI primitives for reliability and accessibility.
@@ -96,28 +96,28 @@ const meta: Meta<typeof AspectRatio> = {
                   {/* Stats */}
                   <div className="flex items-center justify-center gap-8 pt-8">
                     <div className="text-center">
-                      <div className="text-3xl font-bold text-purple-300">
+                      <div className="text-fm-icon-brand-secondary text-3xl font-bold">
                         Responsive
                       </div>
-                      <div className="text-sm text-white/80">
+                      <div className="text-fm-tertiary text-sm">
                         Adapts to container
                       </div>
                     </div>
-                    <div className="h-8 w-px bg-white/20" />
+                    <div className="bg-fm-surface-tertiary h-8 w-px" />
                     <div className="text-center">
-                      <div className="text-3xl font-bold text-blue-300">
+                      <div className="text-fm-info text-3xl font-bold">
                         Flexible
                       </div>
-                      <div className="text-sm text-white/80">
+                      <div className="text-fm-tertiary text-sm">
                         Any content type
                       </div>
                     </div>
-                    <div className="h-8 w-px bg-white/20" />
+                    <div className="bg-fm-surface-tertiary h-8 w-px" />
                     <div className="text-center">
-                      <div className="text-3xl font-bold text-green-300">
+                      <div className="text-fm-positive text-3xl font-bold">
                         Consistent
                       </div>
-                      <div className="text-sm text-white/80">
+                      <div className="text-fm-tertiary text-sm">
                         Maintains ratio
                       </div>
                     </div>
@@ -130,35 +130,35 @@ const meta: Meta<typeof AspectRatio> = {
             <div className="!mx-auto max-w-7xl !space-y-16 px-6 py-12">
               {/* Features */}
               <div className="!space-y-8">
-                <h3 className="text-center text-2xl font-bold !text-white">
+                <h3 className="!text-fm-primary text-center text-2xl font-bold">
                   Key Features
                 </h3>
                 <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-                  <div className="space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
+                  <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-4 rounded-lg border p-6">
                     <div className="text-3xl">📐</div>
-                    <h4 className="text-lg font-semibold !text-white">
+                    <h4 className="!text-fm-primary text-lg font-semibold">
                       Consistent Ratios
                     </h4>
-                    <p className="text-sm !text-white/80">
+                    <p className="!text-fm-tertiary text-sm">
                       Maintains specified aspect ratios regardless of container
                       size changes
                     </p>
                   </div>
-                  <div className="space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
+                  <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-4 rounded-lg border p-6">
                     <div className="text-3xl">📱</div>
-                    <h4 className="text-lg font-semibold !text-white">
+                    <h4 className="!text-fm-primary text-lg font-semibold">
                       Responsive Design
                     </h4>
-                    <p className="text-sm !text-white/80">
+                    <p className="!text-fm-tertiary text-sm">
                       Adapts to parent container while preserving aspect ratio
                     </p>
                   </div>
-                  <div className="space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
+                  <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-4 rounded-lg border p-6">
                     <div className="text-3xl">🎨</div>
-                    <h4 className="text-lg font-semibold !text-white">
+                    <h4 className="!text-fm-primary text-lg font-semibold">
                       Flexible Content
                     </h4>
-                    <p className="text-sm !text-white/80">
+                    <p className="!text-fm-tertiary text-sm">
                       Works with images, videos, iframes, and any custom content
                     </p>
                   </div>
@@ -167,17 +167,17 @@ const meta: Meta<typeof AspectRatio> = {
 
               {/* API Reference */}
               <div className="!space-y-8">
-                <h3 className="text-center text-2xl font-bold !text-white">
+                <h3 className="!text-fm-primary text-center text-2xl font-bold">
                   API Reference
                 </h3>
 
                 {/* Component Signature */}
-                <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-                  <h4 className="mb-4 text-lg font-semibold !text-purple-300">
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+                  <h4 className="!text-fm-icon-brand-secondary mb-4 text-lg font-semibold">
                     Component Signature
                   </h4>
-                  <div className="rounded-lg bg-black/40 p-4">
-                    <pre className="text-sm !text-blue-300">
+                  <div className="bg-fm-surface-secondary rounded-lg p-4">
+                    <pre className="!text-fm-info text-sm">
                       {`import { AspectRatio } from "@/components/ui/aspect-ratio"
 
 <AspectRatio ratio={16 / 9}>
@@ -188,61 +188,69 @@ const meta: Meta<typeof AspectRatio> = {
                 </div>
 
                 {/* Props Table */}
-                <div className="overflow-hidden rounded-lg border border-white/10 bg-white/5">
-                  <div className="bg-white/5 p-4">
-                    <h4 className="text-lg font-semibold !text-white">Props</h4>
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary overflow-hidden rounded-lg border">
+                  <div className="bg-fm-surface-secondary p-4">
+                    <h4 className="!text-fm-primary text-lg font-semibold">
+                      Props
+                    </h4>
                   </div>
                   <table className="!my-0 w-full">
-                    <thead className="bg-white/5">
-                      <tr className="border-b border-white/10">
-                        <th className="px-6 py-4 text-left text-sm font-semibold !text-white">
+                    <thead className="bg-fm-surface-secondary">
+                      <tr className="border-fm-divider-secondary border-b">
+                        <th className="!text-fm-primary px-6 py-4 text-left text-sm font-semibold">
                           Prop
                         </th>
-                        <th className="px-6 py-4 text-left text-sm font-semibold !text-white">
+                        <th className="!text-fm-primary px-6 py-4 text-left text-sm font-semibold">
                           Type
                         </th>
-                        <th className="px-6 py-4 text-left text-sm font-semibold !text-white">
+                        <th className="!text-fm-primary px-6 py-4 text-left text-sm font-semibold">
                           Default
                         </th>
-                        <th className="px-6 py-4 text-left text-sm font-semibold !text-white">
+                        <th className="!text-fm-primary px-6 py-4 text-left text-sm font-semibold">
                           Description
                         </th>
                       </tr>
                     </thead>
                     <tbody>
-                      <tr className="border-b border-white/5">
-                        <td className="px-6 py-4 font-mono text-sm !text-purple-300">
+                      <tr className="border-fm-divider-secondary border-b">
+                        <td className="!text-fm-icon-brand-secondary px-6 py-4 font-mono text-sm">
                           ratio
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/80">
+                        <td className="!text-fm-tertiary px-6 py-4 text-sm">
                           number
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/60">1</td>
-                        <td className="px-6 py-4 text-sm !text-white/80">
+                        <td className="!text-fm-secondary px-6 py-4 text-sm">
+                          1
+                        </td>
+                        <td className="!text-fm-tertiary px-6 py-4 text-sm">
                           The desired aspect ratio (width / height)
                         </td>
                       </tr>
-                      <tr className="border-b border-white/5 !bg-transparent">
-                        <td className="px-6 py-4 font-mono text-sm !text-purple-300">
+                      <tr className="border-fm-divider-secondary border-b !bg-transparent">
+                        <td className="!text-fm-icon-brand-secondary px-6 py-4 font-mono text-sm">
                           children
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/80">
+                        <td className="!text-fm-tertiary px-6 py-4 text-sm">
                           ReactNode
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/60">-</td>
-                        <td className="px-6 py-4 text-sm !text-white/80">
+                        <td className="!text-fm-secondary px-6 py-4 text-sm">
+                          -
+                        </td>
+                        <td className="!text-fm-tertiary px-6 py-4 text-sm">
                           Content to maintain aspect ratio for
                         </td>
                       </tr>
                       <tr>
-                        <td className="px-6 py-4 font-mono text-sm !text-purple-300">
+                        <td className="!text-fm-icon-brand-secondary px-6 py-4 font-mono text-sm">
                           className
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/80">
+                        <td className="!text-fm-tertiary px-6 py-4 text-sm">
                           string
                         </td>
-                        <td className="px-6 py-4 text-sm !text-white/60">-</td>
-                        <td className="px-6 py-4 text-sm !text-white/80">
+                        <td className="!text-fm-secondary px-6 py-4 text-sm">
+                          -
+                        </td>
+                        <td className="!text-fm-tertiary px-6 py-4 text-sm">
                           Additional CSS classes
                         </td>
                       </tr>
@@ -253,17 +261,17 @@ const meta: Meta<typeof AspectRatio> = {
 
               {/* Usage Examples */}
               <div className="!space-y-8">
-                <h3 className="text-center text-2xl font-bold !text-white">
+                <h3 className="!text-fm-primary text-center text-2xl font-bold">
                   Usage Examples
                 </h3>
 
                 <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
                   <div className="space-y-4">
-                    <h4 className="text-lg font-semibold !text-purple-300">
+                    <h4 className="!text-fm-icon-brand-secondary text-lg font-semibold">
                       Basic Image
                     </h4>
-                    <div className="rounded-lg bg-black/40 p-4">
-                      <pre className="overflow-x-auto text-sm !text-green-300">
+                    <div className="bg-fm-surface-secondary rounded-lg p-4">
+                      <pre className="!text-fm-positive overflow-x-auto text-sm">
                         {`<AspectRatio ratio={16 / 9}>
   <img 
     src="/image.jpg" 
@@ -276,11 +284,11 @@ const meta: Meta<typeof AspectRatio> = {
                   </div>
 
                   <div className="space-y-4">
-                    <h4 className="text-lg font-semibold !text-purple-300">
+                    <h4 className="!text-fm-icon-brand-secondary text-lg font-semibold">
                       Video Embed
                     </h4>
-                    <div className="rounded-lg bg-black/40 p-4">
-                      <pre className="overflow-x-auto text-sm !text-blue-300">
+                    <div className="bg-fm-surface-secondary rounded-lg p-4">
+                      <pre className="!text-fm-info overflow-x-auto text-sm">
                         {`<AspectRatio ratio={16 / 9}>
   <iframe 
     src="https://www.youtube.com/embed/..."
@@ -292,11 +300,11 @@ const meta: Meta<typeof AspectRatio> = {
                   </div>
 
                   <div className="space-y-4">
-                    <h4 className="text-lg font-semibold !text-purple-300">
+                    <h4 className="!text-fm-icon-brand-secondary text-lg font-semibold">
                       Custom Content
                     </h4>
-                    <div className="rounded-lg bg-black/40 p-4">
-                      <pre className="overflow-x-auto text-sm !text-orange-300">
+                    <div className="bg-fm-surface-secondary rounded-lg p-4">
+                      <pre className="!text-fm-warning overflow-x-auto text-sm">
                         {`<AspectRatio ratio={1}>
   <div className="flex h-full w-full items-center 
                   justify-center bg-gradient-to-br 
@@ -309,11 +317,11 @@ const meta: Meta<typeof AspectRatio> = {
                   </div>
 
                   <div className="space-y-4">
-                    <h4 className="text-lg font-semibold !text-purple-300">
+                    <h4 className="!text-fm-icon-brand-secondary text-lg font-semibold">
                       Common Ratios
                     </h4>
-                    <div className="rounded-lg bg-black/40 p-4">
-                      <pre className="overflow-x-auto text-sm !text-pink-300">
+                    <div className="bg-fm-surface-secondary rounded-lg p-4">
+                      <pre className="!text-fm-secondary overflow-x-auto text-sm">
                         {`// Common aspect ratios
 16/9   // Widescreen, video
 4/3    // Traditional, photo
@@ -329,7 +337,7 @@ const meta: Meta<typeof AspectRatio> = {
 
               {/* Common Ratios Visual Guide */}
               <div className="!space-y-8">
-                <h3 className="text-center text-2xl font-bold !text-white">
+                <h3 className="!text-fm-primary text-center text-2xl font-bold">
                   Common Aspect Ratios
                 </h3>
                 <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
@@ -374,7 +382,7 @@ const meta: Meta<typeof AspectRatio> = {
                     <div key={item.label} className="space-y-3">
                       <AspectRatio ratio={item.ratio}>
                         <div
-                          className={`flex h-full w-full items-center justify-center rounded-lg bg-gradient-to-br ${item.color} text-white shadow-lg`}
+                          className={`flex h-full w-full items-center justify-center rounded-lg bg-gradient-to-br ${item.color} text-fm-primary shadow-lg`}
                         >
                           <div className="text-center">
                             <div className="text-sm font-bold">
@@ -384,10 +392,10 @@ const meta: Meta<typeof AspectRatio> = {
                         </div>
                       </AspectRatio>
                       <div className="text-center">
-                        <div className="text-sm font-medium text-white">
+                        <div className="text-fm-primary text-sm font-medium">
                           {item.name}
                         </div>
-                        <div className="text-xs text-white/60">
+                        <div className="text-fm-secondary text-xs">
                           {item.label}
                         </div>
                       </div>
@@ -398,62 +406,62 @@ const meta: Meta<typeof AspectRatio> = {
 
               {/* Use Cases */}
               <div className="!space-y-8">
-                <h3 className="text-center text-2xl font-bold !text-white">
+                <h3 className="!text-fm-primary text-center text-2xl font-bold">
                   Common Use Cases
                 </h3>
                 <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-                  <div className="space-y-3 rounded-lg border border-white/10 bg-white/5 p-6">
+                  <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-3 rounded-lg border p-6">
                     <div className="text-2xl">🖼️</div>
-                    <h4 className="text-lg font-semibold !text-white">
+                    <h4 className="!text-fm-primary text-lg font-semibold">
                       Image Galleries
                     </h4>
-                    <p className="text-sm !text-white/80">
+                    <p className="!text-fm-tertiary text-sm">
                       Consistent thumbnail sizes across different image
                       dimensions
                     </p>
                   </div>
-                  <div className="space-y-3 rounded-lg border border-white/10 bg-white/5 p-6">
+                  <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-3 rounded-lg border p-6">
                     <div className="text-2xl">🎬</div>
-                    <h4 className="text-lg font-semibold !text-white">
+                    <h4 className="!text-fm-primary text-lg font-semibold">
                       Video Players
                     </h4>
-                    <p className="text-sm !text-white/80">
+                    <p className="!text-fm-tertiary text-sm">
                       Standard video aspect ratios like 16:9 and 4:3
                     </p>
                   </div>
-                  <div className="space-y-3 rounded-lg border border-white/10 bg-white/5 p-6">
+                  <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-3 rounded-lg border p-6">
                     <div className="text-2xl">🃏</div>
-                    <h4 className="text-lg font-semibold !text-white">
+                    <h4 className="!text-fm-primary text-lg font-semibold">
                       Card Layouts
                     </h4>
-                    <p className="text-sm !text-white/80">
+                    <p className="!text-fm-tertiary text-sm">
                       Uniform card dimensions for consistent grid layouts
                     </p>
                   </div>
-                  <div className="space-y-3 rounded-lg border border-white/10 bg-white/5 p-6">
+                  <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-3 rounded-lg border p-6">
                     <div className="text-2xl">📺</div>
-                    <h4 className="text-lg font-semibold !text-white">
+                    <h4 className="!text-fm-primary text-lg font-semibold">
                       Media Embeds
                     </h4>
-                    <p className="text-sm !text-white/80">
+                    <p className="!text-fm-tertiary text-sm">
                       YouTube, Vimeo, and social media embeds
                     </p>
                   </div>
-                  <div className="space-y-3 rounded-lg border border-white/10 bg-white/5 p-6">
+                  <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-3 rounded-lg border p-6">
                     <div className="text-2xl">🛍️</div>
-                    <h4 className="text-lg font-semibold !text-white">
+                    <h4 className="!text-fm-primary text-lg font-semibold">
                       Product Images
                     </h4>
-                    <p className="text-sm !text-white/80">
+                    <p className="!text-fm-tertiary text-sm">
                       E-commerce product displays with consistent sizing
                     </p>
                   </div>
-                  <div className="space-y-3 rounded-lg border border-white/10 bg-white/5 p-6">
+                  <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-3 rounded-lg border p-6">
                     <div className="text-2xl">👤</div>
-                    <h4 className="text-lg font-semibold !text-white">
+                    <h4 className="!text-fm-primary text-lg font-semibold">
                       Profile Pictures
                     </h4>
-                    <p className="text-sm !text-white/80">
+                    <p className="!text-fm-tertiary text-sm">
                       Square avatar containers for user profiles
                     </p>
                   </div>
@@ -462,52 +470,52 @@ const meta: Meta<typeof AspectRatio> = {
 
               {/* Best Practices */}
               <div className="!space-y-8">
-                <h3 className="text-center text-2xl font-bold !text-white">
+                <h3 className="!text-fm-primary text-center text-2xl font-bold">
                   Best Practices
                 </h3>
                 <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
-                  <div className="space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
-                    <h4 className="text-lg font-semibold !text-green-300">
+                  <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-4 rounded-lg border p-6">
+                    <h4 className="!text-fm-positive text-lg font-semibold">
                       ✅ Do
                     </h4>
-                    <ul className="space-y-2 text-sm !text-white/80">
-                      <li className="!text-white/80">
+                    <ul className="!text-fm-tertiary space-y-2 text-sm">
+                      <li className="!text-fm-tertiary">
                         Use consistent ratios across similar content types
                       </li>
-                      <li className="!text-white/80">
+                      <li className="!text-fm-tertiary">
                         Choose ratios that match your content's natural
                         proportions
                       </li>
-                      <li className="!text-white/80">
+                      <li className="!text-fm-tertiary">
                         Apply object-fit: cover for images to maintain quality
                       </li>
-                      <li className="!text-white/80">
+                      <li className="!text-fm-tertiary">
                         Test ratios across different screen sizes
                       </li>
-                      <li className="!text-white/80">
+                      <li className="!text-fm-tertiary">
                         Use semantic aspect ratios (16:9 for video, 1:1 for
                         avatars)
                       </li>
                     </ul>
                   </div>
-                  <div className="space-y-4 rounded-lg border border-white/10 bg-white/5 p-6">
-                    <h4 className="text-lg font-semibold !text-red-300">
+                  <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-4 rounded-lg border p-6">
+                    <h4 className="!text-fm-negative text-lg font-semibold">
                       ❌ Don't
                     </h4>
-                    <ul className="space-y-2 text-sm !text-white/80">
-                      <li className="!text-white/80">
+                    <ul className="!text-fm-tertiary space-y-2 text-sm">
+                      <li className="!text-fm-tertiary">
                         Mix different ratios in the same content grid
                       </li>
-                      <li className="!text-white/80">
+                      <li className="!text-fm-tertiary">
                         Use extreme ratios that distort content
                       </li>
-                      <li className="!text-white/80">
+                      <li className="!text-fm-tertiary">
                         Forget to handle different content types gracefully
                       </li>
-                      <li className="!text-white/80">
+                      <li className="!text-fm-tertiary">
                         Ignore responsive behavior on mobile devices
                       </li>
-                      <li className="!text-white/80">
+                      <li className="!text-fm-tertiary">
                         Use ratios that don't match platform conventions
                       </li>
                     </ul>
@@ -517,14 +525,14 @@ const meta: Meta<typeof AspectRatio> = {
             </div>
 
             {/* Footer */}
-            <div className="border-t border-white/10 bg-black/20 backdrop-blur-xl">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary/50 border-t backdrop-blur-xl">
               <div className="!mx-auto max-w-7xl px-6 py-8">
                 <div className="space-y-4 text-center">
-                  <p className="!text-white/60">
+                  <p className="!text-fm-secondary">
                     AspectRatio component built on Radix UI primitives for
                     reliability and accessibility.
                   </p>
-                  <p className="text-sm !text-white/40">
+                  <p className="!text-fm-tertiary text-sm">
                     Maintains consistent aspect ratios while being fully
                     responsive and flexible.
                   </p>
@@ -547,8 +555,8 @@ const storyParameters = {
   backgrounds: {
     default: "dark",
     values: [
-      { name: "dark", value: "#0a0a0a" },
-      { name: "darker", value: "#000000" },
+      { name: "dark", value: "var(--color-fm-surface-primary)" },
+      { name: "darker", value: "var(--color-fm-neutral-0)" },
     ],
   },
 }
@@ -556,13 +564,13 @@ const storyParameters = {
 // 1. Common Aspect Ratios
 export const CommonRatios: Story = {
   render: () => (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900/10 to-gray-900 p-8">
+    <div className="from-fm-surface-primary via-fm-secondary-50/10 to-fm-surface-primary min-h-screen bg-linear-to-br p-8">
       <div className="mx-auto max-w-7xl space-y-12">
         <div className="text-center">
-          <h3 className="mb-4 bg-gradient-to-r from-white via-purple-200 to-white bg-clip-text text-3xl font-bold text-transparent">
+          <h3 className="from-fm-primary via-fm-icon-brand-secondary to-fm-primary mb-4 bg-linear-to-r bg-clip-text text-3xl font-bold text-transparent">
             Common Aspect Ratios
           </h3>
-          <p className="mx-auto max-w-2xl text-lg text-white/80">
+          <p className="text-fm-tertiary mx-auto max-w-2xl text-lg">
             Standard aspect ratios for different content types, each optimized
             for specific use cases
           </p>
@@ -573,7 +581,7 @@ export const CommonRatios: Story = {
           <div className="group space-y-4">
             <div className="mx-auto w-full max-w-sm">
               <AspectRatio ratio={1}>
-                <div className="flex h-full w-full items-center justify-center rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 text-white shadow-xl transition-transform duration-300 group-hover:scale-105">
+                <div className="text-fm-primary flex h-full w-full items-center justify-center rounded-lg bg-gradient-to-br from-purple-500 to-pink-500 shadow-xl transition-transform duration-300 group-hover:scale-105">
                   <div className="text-center">
                     <div className="text-2xl font-bold">1:1</div>
                     <div className="text-sm opacity-80">Square</div>
@@ -582,8 +590,10 @@ export const CommonRatios: Story = {
               </AspectRatio>
             </div>
             <div className="text-center">
-              <h4 className="text-lg font-semibold text-white">Square (1:1)</h4>
-              <p className="text-sm text-white/60">
+              <h4 className="text-fm-primary text-lg font-semibold">
+                Square (1:1)
+              </h4>
+              <p className="text-fm-secondary text-sm">
                 Profile pictures, avatars, social media posts
               </p>
             </div>
@@ -593,7 +603,7 @@ export const CommonRatios: Story = {
           <div className="group space-y-4">
             <div className="mx-auto w-full max-w-sm">
               <AspectRatio ratio={16 / 9}>
-                <div className="flex h-full w-full items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 text-white shadow-xl transition-transform duration-300 group-hover:scale-105">
+                <div className="text-fm-primary flex h-full w-full items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 shadow-xl transition-transform duration-300 group-hover:scale-105">
                   <div className="text-center">
                     <div className="text-2xl font-bold">16:9</div>
                     <div className="text-sm opacity-80">Widescreen</div>
@@ -602,10 +612,10 @@ export const CommonRatios: Story = {
               </AspectRatio>
             </div>
             <div className="text-center">
-              <h4 className="text-lg font-semibold text-white">
+              <h4 className="text-fm-primary text-lg font-semibold">
                 Widescreen (16:9)
               </h4>
-              <p className="text-sm text-white/60">
+              <p className="text-fm-secondary text-sm">
                 Videos, presentations, modern displays
               </p>
             </div>
@@ -615,7 +625,7 @@ export const CommonRatios: Story = {
           <div className="group space-y-4">
             <div className="mx-auto w-full max-w-sm">
               <AspectRatio ratio={4 / 3}>
-                <div className="flex h-full w-full items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-emerald-500 text-white shadow-xl transition-transform duration-300 group-hover:scale-105">
+                <div className="text-fm-primary flex h-full w-full items-center justify-center rounded-lg bg-gradient-to-br from-green-500 to-emerald-500 shadow-xl transition-transform duration-300 group-hover:scale-105">
                   <div className="text-center">
                     <div className="text-2xl font-bold">4:3</div>
                     <div className="text-sm opacity-80">Traditional</div>
@@ -624,10 +634,10 @@ export const CommonRatios: Story = {
               </AspectRatio>
             </div>
             <div className="text-center">
-              <h4 className="text-lg font-semibold text-white">
+              <h4 className="text-fm-primary text-lg font-semibold">
                 Traditional (4:3)
               </h4>
-              <p className="text-sm text-white/60">
+              <p className="text-fm-secondary text-sm">
                 Classic photos, old TV format
               </p>
             </div>
@@ -637,7 +647,7 @@ export const CommonRatios: Story = {
           <div className="group space-y-4">
             <div className="mx-auto w-full max-w-sm">
               <AspectRatio ratio={3 / 2}>
-                <div className="flex h-full w-full items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-red-500 text-white shadow-xl transition-transform duration-300 group-hover:scale-105">
+                <div className="text-fm-primary flex h-full w-full items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-red-500 shadow-xl transition-transform duration-300 group-hover:scale-105">
                   <div className="text-center">
                     <div className="text-2xl font-bold">3:2</div>
                     <div className="text-sm opacity-80">Photography</div>
@@ -646,10 +656,12 @@ export const CommonRatios: Story = {
               </AspectRatio>
             </div>
             <div className="text-center">
-              <h4 className="text-lg font-semibold text-white">
+              <h4 className="text-fm-primary text-lg font-semibold">
                 Photography (3:2)
               </h4>
-              <p className="text-sm text-white/60">35mm film, DSLR cameras</p>
+              <p className="text-fm-secondary text-sm">
+                35mm film, DSLR cameras
+              </p>
             </div>
           </div>
 
@@ -657,7 +669,7 @@ export const CommonRatios: Story = {
           <div className="group space-y-4">
             <div className="mx-auto w-full max-w-sm">
               <AspectRatio ratio={21 / 9}>
-                <div className="flex h-full w-full items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-500 text-white shadow-xl transition-transform duration-300 group-hover:scale-105">
+                <div className="text-fm-primary flex h-full w-full items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-purple-500 shadow-xl transition-transform duration-300 group-hover:scale-105">
                   <div className="text-center">
                     <div className="text-2xl font-bold">21:9</div>
                     <div className="text-sm opacity-80">Ultra-wide</div>
@@ -666,10 +678,10 @@ export const CommonRatios: Story = {
               </AspectRatio>
             </div>
             <div className="text-center">
-              <h4 className="text-lg font-semibold text-white">
+              <h4 className="text-fm-primary text-lg font-semibold">
                 Ultra-wide (21:9)
               </h4>
-              <p className="text-sm text-white/60">
+              <p className="text-fm-secondary text-sm">
                 Cinematic, gaming monitors
               </p>
             </div>
@@ -679,7 +691,7 @@ export const CommonRatios: Story = {
           <div className="group space-y-4">
             <div className="mx-auto w-full max-w-sm">
               <AspectRatio ratio={9 / 16}>
-                <div className="flex h-full w-full items-center justify-center rounded-lg bg-gradient-to-br from-pink-500 to-rose-500 text-white shadow-xl transition-transform duration-300 group-hover:scale-105">
+                <div className="text-fm-primary flex h-full w-full items-center justify-center rounded-lg bg-gradient-to-br from-pink-500 to-rose-500 shadow-xl transition-transform duration-300 group-hover:scale-105">
                   <div className="text-center">
                     <div className="text-2xl font-bold">9:16</div>
                     <div className="text-sm opacity-80">Portrait</div>
@@ -688,10 +700,10 @@ export const CommonRatios: Story = {
               </AspectRatio>
             </div>
             <div className="text-center">
-              <h4 className="text-lg font-semibold text-white">
+              <h4 className="text-fm-primary text-lg font-semibold">
                 Portrait (9:16)
               </h4>
-              <p className="text-sm text-white/60">
+              <p className="text-fm-secondary text-sm">
                 Mobile screens, stories, reels
               </p>
             </div>
@@ -714,13 +726,13 @@ export const CommonRatios: Story = {
 // 2. Image Gallery Example
 export const ImageGallery: Story = {
   render: () => (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900/10 to-gray-900 p-8">
+    <div className="from-fm-surface-primary via-fm-secondary-50/10 to-fm-surface-primary min-h-screen bg-linear-to-br p-8">
       <div className="mx-auto max-w-7xl space-y-8">
         <div className="text-center">
-          <h3 className="mb-4 bg-gradient-to-r from-white via-purple-200 to-white bg-clip-text text-3xl font-bold text-transparent">
+          <h3 className="from-fm-primary via-fm-icon-brand-secondary to-fm-primary mb-4 bg-linear-to-r bg-clip-text text-3xl font-bold text-transparent">
             Image Gallery
           </h3>
-          <p className="mx-auto max-w-2xl text-lg text-white/80">
+          <p className="text-fm-tertiary mx-auto max-w-2xl text-lg">
             Consistent image thumbnails using AspectRatio for a clean gallery
             layout
           </p>
@@ -730,7 +742,7 @@ export const ImageGallery: Story = {
           {Array.from({ length: 12 }).map((_, i) => (
             <div key={i} className="group cursor-pointer">
               <AspectRatio ratio={1}>
-                <div className="relative h-full w-full overflow-hidden rounded-lg bg-gradient-to-br from-gray-800 to-gray-900 transition-transform duration-300 group-hover:scale-105">
+                <div className="from-fm-surface-secondary to-fm-surface-primary relative h-full w-full overflow-hidden rounded-lg bg-linear-to-br transition-transform duration-300 group-hover:scale-105">
                   <div
                     className={`absolute inset-0 bg-gradient-to-br ${
                       [
@@ -743,7 +755,7 @@ export const ImageGallery: Story = {
                       ][i % 6]
                     } opacity-80`}
                   />
-                  <div className="absolute inset-0 flex items-center justify-center text-white">
+                  <div className="text-fm-primary absolute inset-0 flex items-center justify-center">
                     <div className="text-center">
                       <div className="text-lg font-semibold">Image {i + 1}</div>
                       <div className="text-sm opacity-75">1:1 Ratio</div>
@@ -772,13 +784,13 @@ export const ImageGallery: Story = {
 // 3. Video Players
 export const VideoPlayers: Story = {
   render: () => (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900/10 to-gray-900 p-8">
+    <div className="from-fm-surface-primary via-fm-secondary-50/10 to-fm-surface-primary min-h-screen bg-linear-to-br p-8">
       <div className="mx-auto max-w-7xl space-y-12">
         <div className="text-center">
-          <h3 className="mb-4 bg-gradient-to-r from-white via-purple-200 to-white bg-clip-text text-3xl font-bold text-transparent">
+          <h3 className="from-fm-primary via-fm-icon-brand-secondary to-fm-primary mb-4 bg-linear-to-r bg-clip-text text-3xl font-bold text-transparent">
             Video Players
           </h3>
-          <p className="mx-auto max-w-2xl text-lg text-white/80">
+          <p className="text-fm-tertiary mx-auto max-w-2xl text-lg">
             Standard video aspect ratios for different video content types
           </p>
         </div>
@@ -786,15 +798,15 @@ export const VideoPlayers: Story = {
         <div className="space-y-8">
           {/* Widescreen Video */}
           <div className="space-y-4">
-            <h4 className="text-xl font-semibold text-white">
+            <h4 className="text-fm-primary text-xl font-semibold">
               Widescreen Video (16:9)
             </h4>
             <div className="mx-auto max-w-4xl">
               <AspectRatio ratio={16 / 9}>
-                <div className="relative h-full w-full overflow-hidden rounded-lg bg-black shadow-2xl">
-                  <div className="absolute inset-0 bg-gradient-to-br from-gray-900 to-black" />
+                <div className="bg-fm-surface-primary relative h-full w-full overflow-hidden rounded-lg shadow-2xl">
+                  <div className="from-fm-surface-secondary to-fm-surface-primary absolute inset-0 bg-linear-to-br" />
                   <div className="absolute inset-0 flex items-center justify-center">
-                    <div className="text-center text-white">
+                    <div className="text-fm-primary text-center">
                       <div className="mb-4 text-6xl">▶️</div>
                       <div className="text-xl font-semibold">Video Player</div>
                       <div className="text-sm opacity-75">
@@ -805,11 +817,13 @@ export const VideoPlayers: Story = {
                   {/* Mock video controls */}
                   <div className="absolute right-0 bottom-0 left-0 bg-gradient-to-t from-black/80 to-transparent p-4">
                     <div className="flex items-center gap-4">
-                      <button className="text-white">⏸️</button>
-                      <div className="h-1 flex-1 rounded-full bg-white/20">
+                      <button className="text-fm-primary">⏸️</button>
+                      <div className="bg-fm-surface-tertiary h-1 flex-1 rounded-full">
                         <div className="h-full w-1/3 rounded-full bg-red-500" />
                       </div>
-                      <span className="text-sm text-white/75">1:23 / 4:56</span>
+                      <span className="text-fm-secondary text-sm">
+                        1:23 / 4:56
+                      </span>
                     </div>
                   </div>
                 </div>
@@ -819,15 +833,15 @@ export const VideoPlayers: Story = {
 
           {/* Traditional Video */}
           <div className="space-y-4">
-            <h4 className="text-xl font-semibold text-white">
+            <h4 className="text-fm-primary text-xl font-semibold">
               Traditional Video (4:3)
             </h4>
             <div className="mx-auto max-w-2xl">
               <AspectRatio ratio={4 / 3}>
-                <div className="relative h-full w-full overflow-hidden rounded-lg bg-black shadow-2xl">
-                  <div className="absolute inset-0 bg-gradient-to-br from-gray-900 to-black" />
+                <div className="bg-fm-surface-primary relative h-full w-full overflow-hidden rounded-lg shadow-2xl">
+                  <div className="from-fm-surface-secondary to-fm-surface-primary absolute inset-0 bg-linear-to-br" />
                   <div className="absolute inset-0 flex items-center justify-center">
-                    <div className="text-center text-white">
+                    <div className="text-fm-primary text-center">
                       <div className="mb-4 text-5xl">📺</div>
                       <div className="text-lg font-semibold">
                         Classic TV Format
@@ -842,15 +856,15 @@ export const VideoPlayers: Story = {
 
           {/* Mobile Video */}
           <div className="space-y-4">
-            <h4 className="text-xl font-semibold text-white">
+            <h4 className="text-fm-primary text-xl font-semibold">
               Mobile Video (9:16)
             </h4>
             <div className="mx-auto max-w-sm">
               <AspectRatio ratio={9 / 16}>
-                <div className="relative h-full w-full overflow-hidden rounded-lg bg-black shadow-2xl">
-                  <div className="absolute inset-0 bg-gradient-to-br from-gray-900 to-black" />
+                <div className="bg-fm-surface-primary relative h-full w-full overflow-hidden rounded-lg shadow-2xl">
+                  <div className="from-fm-surface-secondary to-fm-surface-primary absolute inset-0 bg-linear-to-br" />
                   <div className="absolute inset-0 flex items-center justify-center">
-                    <div className="text-center text-white">
+                    <div className="text-fm-primary text-center">
                       <div className="mb-4 text-4xl">📱</div>
                       <div className="text-lg font-semibold">
                         Stories & Reels
@@ -882,13 +896,13 @@ export const VideoPlayers: Story = {
 // 4. Card Layouts
 export const CardLayouts: Story = {
   render: () => (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900/10 to-gray-900 p-8">
+    <div className="from-fm-surface-primary via-fm-secondary-50/10 to-fm-surface-primary min-h-screen bg-linear-to-br p-8">
       <div className="mx-auto max-w-7xl space-y-8">
         <div className="text-center">
-          <h3 className="mb-4 bg-gradient-to-r from-white via-purple-200 to-white bg-clip-text text-3xl font-bold text-transparent">
+          <h3 className="from-fm-primary via-fm-icon-brand-secondary to-fm-primary mb-4 bg-linear-to-r bg-clip-text text-3xl font-bold text-transparent">
             Card Layouts
           </h3>
-          <p className="mx-auto max-w-2xl text-lg text-white/80">
+          <p className="text-fm-tertiary mx-auto max-w-2xl text-lg">
             Consistent card designs using AspectRatio for uniform layouts
           </p>
         </div>
@@ -934,22 +948,22 @@ export const CardLayouts: Story = {
           ].map((card, i) => (
             <div
               key={i}
-              className="group cursor-pointer overflow-hidden rounded-xl border border-white/10 bg-white/5 transition-all duration-300 hover:scale-105 hover:border-white/20 hover:bg-white/10"
+              className="group border-fm-divider-secondary bg-fm-surface-secondary hover:border-fm-divider-contrast hover:bg-fm-surface-frosted/15 cursor-pointer overflow-hidden rounded-xl border transition-all duration-300 hover:scale-105"
             >
               <AspectRatio ratio={card.ratio}>
                 <div
                   className={`relative h-full w-full bg-gradient-to-br ${
                     [
-                      "from-blue-500 to-purple-600",
-                      "from-green-500 to-teal-600",
-                      "from-orange-500 to-red-600",
-                      "from-purple-500 to-pink-600",
-                      "from-indigo-500 to-blue-600",
-                      "from-rose-500 to-orange-600",
+                      "from-fm-blue-500 to-fm-secondary-600",
+                      "from-fm-green-500 to-fm-emerald-600",
+                      "from-fm-red-500 to-fm-red-600",
+                      "from-fm-secondary-500 to-fm-hotpink-600",
+                      "from-fm-electricblue-500 to-fm-blue-600",
+                      "from-fm-hotpink-500 to-fm-red-600",
                     ][i % 6]
                   }`}
                 >
-                  <div className="absolute inset-0 flex items-center justify-center text-white">
+                  <div className="text-fm-primary absolute inset-0 flex items-center justify-center">
                     <div className="text-center">
                       <div className="mb-2 text-4xl">{card.icon}</div>
                       <div className="text-lg font-semibold">{card.title}</div>
@@ -959,9 +973,9 @@ export const CardLayouts: Story = {
                 </div>
               </AspectRatio>
               <div className="p-4">
-                <h4 className="font-semibold text-white">{card.title}</h4>
-                <p className="text-sm text-white/60">{card.desc}</p>
-                <div className="mt-2 text-xs text-purple-300">
+                <h4 className="text-fm-primary font-semibold">{card.title}</h4>
+                <p className="text-fm-secondary text-sm">{card.desc}</p>
+                <div className="text-fm-icon-brand-secondary mt-2 text-xs">
                   Ratio: {card.ratio.toFixed(2)}
                 </div>
               </div>
@@ -1004,13 +1018,13 @@ export const InteractivePlayground: Story = {
       selectedRatio === "custom" ? customWidth / customHeight : selectedRatio
 
     return (
-      <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900/10 to-gray-900 p-8">
+      <div className="from-fm-surface-primary via-fm-secondary-50/10 to-fm-surface-primary min-h-screen bg-linear-to-br p-8">
         <div className="mx-auto max-w-7xl space-y-8">
           <div className="text-center">
-            <h3 className="mb-4 bg-gradient-to-r from-white via-purple-200 to-white bg-clip-text text-3xl font-bold text-transparent">
+            <h3 className="from-fm-primary via-fm-icon-brand-secondary to-fm-primary mb-4 bg-linear-to-r bg-clip-text text-3xl font-bold text-transparent">
               Interactive Playground
             </h3>
-            <p className="mx-auto max-w-2xl text-lg text-white/80">
+            <p className="text-fm-tertiary mx-auto max-w-2xl text-lg">
               Experiment with different aspect ratios and see how they affect
               content layout
             </p>
@@ -1018,12 +1032,14 @@ export const InteractivePlayground: Story = {
 
           <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
             {/* Controls */}
-            <div className="space-y-6 rounded-xl border border-white/10 bg-white/5 p-6">
-              <h4 className="text-lg font-semibold text-white">Controls</h4>
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-6 rounded-xl border p-6">
+              <h4 className="text-fm-primary text-lg font-semibold">
+                Controls
+              </h4>
 
               {/* Preset Ratios */}
               <div className="space-y-3">
-                <label className="text-sm font-medium text-white">
+                <label className="text-fm-primary text-sm font-medium">
                   Preset Ratios
                 </label>
                 <div className="grid grid-cols-2 gap-2">
@@ -1033,8 +1049,8 @@ export const InteractivePlayground: Story = {
                       onClick={() => setSelectedRatio(preset.value)}
                       className={`rounded-lg px-3 py-2 text-sm transition-colors ${
                         selectedRatio === preset.value
-                          ? "bg-purple-500 text-white"
-                          : "bg-white/10 text-white/80 hover:bg-white/20"
+                          ? "text-fm-primary bg-fm-secondary-500"
+                          : "bg-fm-surface-secondary text-fm-tertiary hover:bg-fm-surface-tertiary"
                       }`}
                     >
                       {preset.label}
@@ -1045,7 +1061,7 @@ export const InteractivePlayground: Story = {
 
               {/* Custom Ratio */}
               <div className="space-y-3">
-                <label className="text-sm font-medium text-white">
+                <label className="text-fm-primary text-sm font-medium">
                   Custom Ratio
                 </label>
                 <div className="flex items-center gap-2">
@@ -1058,9 +1074,9 @@ export const InteractivePlayground: Story = {
                       setCustomWidth(Number(e.target.value))
                       setSelectedRatio("custom")
                     }}
-                    className="w-20 rounded-lg border border-white/20 bg-white/10 px-3 py-2 text-sm text-white placeholder-white/50"
+                    className="border-fm-divider-secondary bg-fm-surface-secondary text-fm-primary placeholder-fm-tertiary w-20 rounded-lg border px-3 py-2 text-sm"
                   />
-                  <span className="text-white">:</span>
+                  <span className="text-fm-primary">:</span>
                   <input
                     type="number"
                     min="1"
@@ -1070,26 +1086,26 @@ export const InteractivePlayground: Story = {
                       setCustomHeight(Number(e.target.value))
                       setSelectedRatio("custom")
                     }}
-                    className="w-20 rounded-lg border border-white/20 bg-white/10 px-3 py-2 text-sm text-white placeholder-white/50"
+                    className="border-fm-divider-secondary bg-fm-surface-secondary text-fm-primary placeholder-fm-tertiary w-20 rounded-lg border px-3 py-2 text-sm"
                   />
                 </div>
                 <button
                   onClick={() => setSelectedRatio(customWidth / customHeight)}
-                  className="w-full rounded-lg bg-purple-500/20 px-3 py-2 text-sm text-purple-300 transition-colors hover:bg-purple-500/30"
+                  className="bg-fm-secondary-500/20 hover:bg-fm-secondary-500/30 text-fm-icon-brand-secondary w-full rounded-lg px-3 py-2 text-sm transition-colors"
                 >
                   Apply Custom ({customWidth}:{customHeight})
                 </button>
               </div>
 
               {/* Current Info */}
-              <div className="space-y-2 rounded-lg bg-white/5 p-4">
-                <div className="text-sm font-medium text-white">
+              <div className="bg-fm-surface-secondary space-y-2 rounded-lg p-4">
+                <div className="text-fm-primary text-sm font-medium">
                   Current Ratio
                 </div>
-                <div className="text-lg font-bold text-purple-300">
+                <div className="text-fm-icon-brand-secondary text-lg font-bold">
                   {currentRatio.toFixed(3)}
                 </div>
-                <div className="text-xs text-white/60">
+                <div className="text-fm-secondary text-xs">
                   {selectedRatio === "custom"
                     ? `${customWidth}:${customHeight}`
                     : presetRatios.find((p) => p.value === selectedRatio)
@@ -1100,12 +1116,14 @@ export const InteractivePlayground: Story = {
 
             {/* Preview */}
             <div className="lg:col-span-2">
-              <div className="space-y-4 rounded-xl border border-white/10 bg-white/5 p-6">
-                <h4 className="text-lg font-semibold text-white">Preview</h4>
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary space-y-4 rounded-xl border p-6">
+                <h4 className="text-fm-primary text-lg font-semibold">
+                  Preview
+                </h4>
                 <div className="mx-auto max-w-lg">
                   <AspectRatio ratio={currentRatio}>
                     <div className="relative h-full w-full overflow-hidden rounded-lg bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 shadow-xl">
-                      <div className="absolute inset-0 flex items-center justify-center text-white">
+                      <div className="text-fm-primary absolute inset-0 flex items-center justify-center">
                         <div className="text-center">
                           <div className="text-2xl font-bold">
                             {selectedRatio === "custom"
@@ -1124,7 +1142,10 @@ export const InteractivePlayground: Story = {
                       <div className="absolute inset-0 opacity-20">
                         <div className="grid h-full w-full grid-cols-3 grid-rows-3 gap-px">
                           {Array.from({ length: 9 }).map((_, i) => (
-                            <div key={i} className="border border-white/30" />
+                            <div
+                              key={i}
+                              className="border-fm-divider-secondary border"
+                            />
                           ))}
                         </div>
                       </div>
@@ -1134,9 +1155,11 @@ export const InteractivePlayground: Story = {
 
                 {/* Code Example */}
                 <div className="space-y-2">
-                  <label className="text-sm font-medium text-white">Code</label>
-                  <div className="rounded-lg bg-black/40 p-4">
-                    <pre className="text-sm text-green-300">
+                  <label className="text-fm-primary text-sm font-medium">
+                    Code
+                  </label>
+                  <div className="bg-fm-surface-secondary rounded-lg p-4">
+                    <pre className="text-fm-positive text-sm">
                       {`<AspectRatio ratio={${currentRatio.toFixed(3)}}>
   <div className="h-full w-full bg-gradient-to-br 
                   from-blue-500 to-purple-500">
@@ -1167,42 +1190,42 @@ export const InteractivePlayground: Story = {
 // 6. Real World Examples
 export const RealWorldExamples: Story = {
   render: () => (
-    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900/10 to-gray-900 p-8">
+    <div className="from-fm-surface-primary via-fm-secondary-50/10 to-fm-surface-primary min-h-screen bg-linear-to-br p-8">
       <div className="mx-auto max-w-7xl space-y-12">
         <div className="text-center">
-          <h3 className="mb-4 bg-gradient-to-r from-white via-purple-200 to-white bg-clip-text text-3xl font-bold text-transparent">
+          <h3 className="from-fm-primary via-fm-icon-brand-secondary to-fm-primary mb-4 bg-linear-to-r bg-clip-text text-3xl font-bold text-transparent">
             Real World Examples
           </h3>
-          <p className="mx-auto max-w-2xl text-lg text-white/80">
+          <p className="text-fm-tertiary mx-auto max-w-2xl text-lg">
             Practical implementations of AspectRatio in common UI patterns
           </p>
         </div>
 
         {/* Social Media Feed */}
         <div className="space-y-6">
-          <h4 className="text-xl font-semibold text-white">
+          <h4 className="text-fm-primary text-xl font-semibold">
             Social Media Feed
           </h4>
           <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
             {Array.from({ length: 6 }).map((_, i) => (
               <div
                 key={i}
-                className="overflow-hidden rounded-xl border border-white/10 bg-white/5"
+                className="border-fm-divider-secondary bg-fm-surface-secondary overflow-hidden rounded-xl border"
               >
                 <AspectRatio ratio={1}>
                   <div
                     className={`relative h-full w-full bg-gradient-to-br ${
                       [
-                        "from-pink-500 to-rose-500",
-                        "from-blue-500 to-indigo-500",
-                        "from-green-500 to-emerald-500",
-                        "from-purple-500 to-violet-500",
-                        "from-orange-500 to-amber-500",
-                        "from-cyan-500 to-blue-500",
+                        "from-fm-hotpink-500 to-fm-primary-500",
+                        "from-fm-blue-500 to-fm-electricblue-500",
+                        "from-fm-green-500 to-fm-emerald-500",
+                        "from-fm-secondary-500 to-fm-hotpink-500",
+                        "from-fm-red-500 to-fm-yellow-500",
+                        "from-fm-blue-400 to-fm-blue-500",
                       ][i % 6]
                     }`}
                   >
-                    <div className="absolute inset-0 flex items-center justify-center text-white">
+                    <div className="text-fm-primary absolute inset-0 flex items-center justify-center">
                       <div className="text-4xl">
                         {["🌟", "🎨", "🚀", "💎", "🔥", "⚡"][i % 6]}
                       </div>
@@ -1211,15 +1234,17 @@ export const RealWorldExamples: Story = {
                 </AspectRatio>
                 <div className="p-4">
                   <div className="flex items-center gap-3">
-                    <div className="h-8 w-8 rounded-full bg-gradient-to-br from-gray-600 to-gray-700" />
+                    <div className="from-fm-surface-tertiary to-fm-surface-secondary h-8 w-8 rounded-full bg-linear-to-br" />
                     <div>
-                      <div className="text-sm font-medium text-white">
+                      <div className="text-fm-primary text-sm font-medium">
                         @user{i + 1}
                       </div>
-                      <div className="text-xs text-white/60">2 hours ago</div>
+                      <div className="text-fm-secondary text-xs">
+                        2 hours ago
+                      </div>
                     </div>
                   </div>
-                  <p className="mt-2 text-sm text-white/80">
+                  <p className="text-fm-tertiary mt-2 text-sm">
                     Beautiful post content with perfect aspect ratio!
                     #photography
                   </p>
@@ -1231,18 +1256,18 @@ export const RealWorldExamples: Story = {
 
         {/* E-commerce Grid */}
         <div className="space-y-6">
-          <h4 className="text-xl font-semibold text-white">
+          <h4 className="text-fm-primary text-xl font-semibold">
             E-commerce Product Grid
           </h4>
           <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
             {Array.from({ length: 8 }).map((_, i) => (
               <div
                 key={i}
-                className="group cursor-pointer overflow-hidden rounded-lg border border-white/10 bg-white/5 transition-transform duration-200 hover:scale-105"
+                className="group border-fm-divider-secondary bg-fm-surface-secondary cursor-pointer overflow-hidden rounded-lg border transition-transform duration-200 hover:scale-105"
               >
                 <AspectRatio ratio={1}>
-                  <div className="relative h-full w-full bg-gradient-to-br from-gray-700 to-gray-800">
-                    <div className="absolute inset-0 flex items-center justify-center text-white">
+                  <div className="from-fm-surface-secondary to-fm-surface-primary relative h-full w-full bg-linear-to-br">
+                    <div className="text-fm-primary absolute inset-0 flex items-center justify-center">
                       <div className="text-center">
                         <div className="mb-2 text-2xl">
                           {["👟", "👕", "⌚", "🎧", "📱", "💻", "🎒", "📷"][i]}
@@ -1253,17 +1278,19 @@ export const RealWorldExamples: Story = {
                       </div>
                     </div>
                     <div className="absolute top-2 right-2">
-                      <div className="rounded-full bg-red-500 px-2 py-1 text-xs text-white">
+                      <div className="text-fm-primary rounded-full bg-red-500 px-2 py-1 text-xs">
                         Sale
                       </div>
                     </div>
                   </div>
                 </AspectRatio>
                 <div className="p-3">
-                  <h5 className="text-sm font-medium text-white">
+                  <h5 className="text-fm-primary text-sm font-medium">
                     Product Name
                   </h5>
-                  <p className="text-lg font-bold text-purple-300">$99.99</p>
+                  <p className="text-fm-icon-brand-secondary text-lg font-bold">
+                    $99.99
+                  </p>
                 </div>
               </div>
             ))}
@@ -1272,39 +1299,41 @@ export const RealWorldExamples: Story = {
 
         {/* Video Thumbnails */}
         <div className="space-y-6">
-          <h4 className="text-xl font-semibold text-white">Video Thumbnails</h4>
+          <h4 className="text-fm-primary text-xl font-semibold">
+            Video Thumbnails
+          </h4>
           <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
             {Array.from({ length: 6 }).map((_, i) => (
               <div key={i} className="group cursor-pointer space-y-3">
                 <AspectRatio ratio={16 / 9}>
-                  <div className="relative h-full w-full overflow-hidden rounded-lg bg-gradient-to-br from-gray-800 to-black">
+                  <div className="from-fm-surface-secondary to-fm-surface-primary relative h-full w-full overflow-hidden rounded-lg bg-linear-to-br">
                     <div className="absolute inset-0 flex items-center justify-center">
-                      <div className="flex h-16 w-16 items-center justify-center rounded-full bg-white/20 text-white backdrop-blur-sm transition-transform group-hover:scale-110">
+                      <div className="bg-fm-surface-tertiary text-fm-primary flex h-16 w-16 items-center justify-center rounded-full backdrop-blur-sm transition-transform group-hover:scale-110">
                         <div className="text-2xl">▶️</div>
                       </div>
                     </div>
-                    <div className="absolute right-2 bottom-2 rounded bg-black/80 px-2 py-1 text-xs text-white">
+                    <div className="bg-fm-surface-primary/80 text-fm-primary absolute right-2 bottom-2 rounded px-2 py-1 text-xs">
                       {["12:34", "8:45", "15:22", "6:18", "20:15", "4:32"][i]}
                     </div>
                     <div
                       className={`absolute inset-0 bg-gradient-to-br opacity-60 ${
                         [
-                          "from-red-500 to-pink-500",
-                          "from-blue-500 to-cyan-500",
-                          "from-green-500 to-teal-500",
-                          "from-purple-500 to-indigo-500",
-                          "from-orange-500 to-yellow-500",
-                          "from-indigo-500 to-purple-500",
+                          "from-fm-red-500 to-fm-hotpink-500",
+                          "from-fm-blue-500 to-fm-blue-400",
+                          "from-fm-green-500 to-fm-emerald-500",
+                          "from-fm-secondary-500 to-fm-electricblue-500",
+                          "from-fm-red-500 to-fm-yellow-500",
+                          "from-fm-electricblue-500 to-fm-secondary-500",
                         ][i % 6]
                       }`}
                     />
                   </div>
                 </AspectRatio>
                 <div>
-                  <h5 className="text-sm font-medium text-white">
+                  <h5 className="text-fm-primary text-sm font-medium">
                     Video Title: Amazing Content #{i + 1}
                   </h5>
-                  <p className="text-xs text-white/60">
+                  <p className="text-fm-secondary text-xs">
                     Channel Name • 1.2M views • 2 days ago
                   </p>
                 </div>