aural-ui 3.0.7 → 4.0.1

package/dist/components/hover-card/HoverCard.stories.tsx

@@ -179,10 +179,10 @@ export const Basic: Story = {
         </HoverCardTrigger>
         <HoverCardContent>
           <div className="space-y-2">
-            <h4 className="text-sm font-semibold text-white">
+            <h4 className="text-fm-primary text-sm font-semibold">
               Quick Information
             </h4>
-            <p className="text-sm text-white/70">
+            <p className="text-fm-secondary text-sm">
               This is a basic hover card that provides additional context when
               you hover over the trigger element.
             </p>
@@ -205,38 +205,40 @@ export const Basic: Story = {
 export const UserProfiles: Story = {
   render: () => (
     <div className="space-y-8 p-8">
-      <h3 className="text-center text-lg font-medium text-white">
+      <h3 className="text-fm-primary text-center text-lg font-medium">
         User Profile Cards
       </h3>
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
         {/* Basic Profile */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Basic Profile</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">
+            Basic Profile
+          </h4>
           <div className="text-center">
             <HoverCard>
               <HoverCardTrigger asChild>
-                <Button variant="text" className="text-blue-400">
+                <Button variant="text" className="text-fm-info">
                   @johndoe
                 </Button>
               </HoverCardTrigger>
               <HoverCardContent className="w-80">
                 <div className="flex space-x-4">
                   <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-blue-500 to-purple-600">
-                    <span className="font-semibold text-white">JD</span>
+                    <span className="text-fm-primary font-semibold">JD</span>
                   </div>
                   <div className="flex-1 space-y-1">
-                    <h4 className="text-sm font-semibold text-white">
+                    <h4 className="text-fm-primary text-sm font-semibold">
                       John Doe
                     </h4>
-                    <p className="text-sm text-white/70">
+                    <p className="text-fm-secondary text-sm">
                       Senior Software Engineer
                     </p>
-                    <p className="text-xs text-white/50">
+                    <p className="text-fm-tertiary text-xs">
                       Building amazing user experiences with React and
                       TypeScript
                     </p>
-                    <div className="flex items-center gap-4 pt-2 text-xs text-white/60">
+                    <div className="text-fm-secondary flex items-center gap-4 pt-2 text-xs">
                       <span>👥 1.2k followers</span>
                       <span>📍 San Francisco</span>
                     </div>
@@ -249,13 +251,13 @@ export const UserProfiles: Story = {
 
         {/* Detailed Profile */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary text-sm font-medium">
             Detailed Profile
           </h4>
           <div className="text-center">
             <HoverCard>
               <HoverCardTrigger asChild>
-                <Button variant="text" className="text-green-400">
+                <Button variant="text" className="text-fm-positive">
                   @sarahsmith
                 </Button>
               </HoverCardTrigger>
@@ -263,47 +265,47 @@ export const UserProfiles: Story = {
                 <div className="space-y-3">
                   <div className="flex space-x-4">
                     <div className="flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-green-500 to-teal-600">
-                      <span className="text-lg font-semibold text-white">
+                      <span className="text-fm-primary text-lg font-semibold">
                         SS
                       </span>
                     </div>
                     <div className="flex-1 space-y-1">
-                      <h4 className="text-base font-semibold text-white">
+                      <h4 className="text-fm-primary text-base font-semibold">
                         Sarah Smith
                       </h4>
-                      <p className="text-sm text-white/70">
+                      <p className="text-fm-secondary text-sm">
                         UX Designer & Product Manager
                       </p>
-                      <div className="flex items-center gap-2 text-xs text-white/60">
+                      <div className="text-fm-secondary flex items-center gap-2 text-xs">
                         <TickCircleIcon className="h-3 w-3" />
                         <span>Verified Account</span>
                       </div>
                     </div>
                   </div>
 
-                  <p className="text-sm text-white/70">
+                  <p className="text-fm-secondary text-sm">
                     Passionate about creating intuitive digital experiences.
                     Currently working on design systems and user research.
                   </p>
 
                   <div className="grid grid-cols-3 gap-4 pt-2 text-center">
                     <div>
-                      <div className="text-lg font-semibold text-white">
+                      <div className="text-fm-primary text-lg font-semibold">
                         248
                       </div>
-                      <div className="text-xs text-white/60">Posts</div>
+                      <div className="text-fm-secondary text-xs">Posts</div>
                     </div>
                     <div>
-                      <div className="text-lg font-semibold text-white">
+                      <div className="text-fm-primary text-lg font-semibold">
                         2.8k
                       </div>
-                      <div className="text-xs text-white/60">Followers</div>
+                      <div className="text-fm-secondary text-xs">Followers</div>
                     </div>
                     <div>
-                      <div className="text-lg font-semibold text-white">
+                      <div className="text-fm-primary text-lg font-semibold">
                         892
                       </div>
-                      <div className="text-xs text-white/60">Following</div>
+                      <div className="text-fm-secondary text-xs">Following</div>
                     </div>
                   </div>
 
@@ -337,34 +339,40 @@ export const UserProfiles: Story = {
 export const ProductPreviews: Story = {
   render: () => (
     <div className="space-y-8 p-8">
-      <h3 className="text-center text-lg font-medium text-white">
+      <h3 className="text-fm-primary text-center text-lg font-medium">
         Product Previews
       </h3>
 
       <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
         {/* Simple Product */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Simple Product</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">
+            Simple Product
+          </h4>
           <div className="text-center">
             <HoverCard>
               <HoverCardTrigger asChild>
-                <div className="cursor-pointer rounded-lg border border-white/10 bg-white/5 p-4 transition-colors hover:bg-white/10">
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary hover:bg-fm-surface-frosted/15 hover:border-fm-divider-contrast cursor-pointer rounded-lg border p-4 transition-colors">
                   <div className="mx-auto mb-2 flex h-20 w-20 items-center justify-center rounded-lg bg-gradient-to-br from-purple-500 to-pink-600">
-                    <FileChartIcon className="h-8 w-8 text-white" />
+                    <FileChartIcon className="text-fm-primary h-8 w-8" />
                   </div>
-                  <p className="text-sm text-white">Analytics Pro</p>
+                  <p className="text-fm-primary text-sm">Analytics Pro</p>
                 </div>
               </HoverCardTrigger>
               <HoverCardContent>
                 <div className="space-y-3">
                   <div>
-                    <h4 className="font-semibold text-white">Analytics Pro</h4>
-                    <p className="text-sm text-white/70">
+                    <h4 className="text-fm-primary font-semibold">
+                      Analytics Pro
+                    </h4>
+                    <p className="text-fm-secondary text-sm">
                       Advanced analytics dashboard with real-time insights
                     </p>
                   </div>
                   <div className="flex items-center justify-between">
-                    <span className="text-lg font-bold text-white">$29/mo</span>
+                    <span className="text-fm-primary text-lg font-bold">
+                      $29/mo
+                    </span>
                     <Button size="sm">
                       <PlusIcon className="mr-1 h-3 w-3" />
                       Add
@@ -378,30 +386,30 @@ export const ProductPreviews: Story = {
 
         {/* Detailed Product */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary text-sm font-medium">
             Detailed Product
           </h4>
           <div className="text-center">
             <HoverCard>
               <HoverCardTrigger asChild>
-                <div className="cursor-pointer rounded-lg border border-white/10 bg-white/5 p-4 transition-colors hover:bg-white/10">
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary hover:bg-fm-surface-frosted/15 hover:border-fm-divider-contrast cursor-pointer rounded-lg border p-4 transition-colors">
                   <div className="mx-auto mb-2 flex h-20 w-20 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-cyan-600">
-                    <SearchIcon className="h-8 w-8 text-white" />
+                    <SearchIcon className="text-fm-primary h-8 w-8" />
                   </div>
-                  <p className="text-sm text-white">Search Engine</p>
+                  <p className="text-fm-primary text-sm">Search Engine</p>
                 </div>
               </HoverCardTrigger>
               <HoverCardContent className="w-80">
                 <div className="space-y-4">
                   <div className="flex space-x-3">
                     <div className="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-blue-500 to-cyan-600">
-                      <SearchIcon className="h-8 w-8 text-white" />
+                      <SearchIcon className="text-fm-primary h-8 w-8" />
                     </div>
                     <div className="space-y-1">
-                      <h4 className="font-semibold text-white">
+                      <h4 className="text-fm-primary font-semibold">
                         Advanced Search Engine
                       </h4>
-                      <p className="text-sm text-white/70">
+                      <p className="text-fm-secondary text-sm">
                         AI-powered search with natural language processing
                       </p>
                       <div className="flex items-center gap-2">
@@ -409,13 +417,13 @@ export const ProductPreviews: Story = {
                           {[1, 2, 3, 4, 5].map((star) => (
                             <span
                               key={star}
-                              className="text-xs text-yellow-400"
+                              className="text-fm-warning text-xs"
                             >
                               ★
                             </span>
                           ))}
                         </div>
-                        <span className="text-xs text-white/60">
+                        <span className="text-fm-secondary text-xs">
                           (124 reviews)
                         </span>
                       </div>
@@ -424,9 +432,9 @@ export const ProductPreviews: Story = {
 
                   <div className="space-y-2">
                     <div className="flex justify-between text-sm">
-                      <span className="text-white/70">Features:</span>
+                      <span className="text-fm-secondary">Features:</span>
                     </div>
-                    <ul className="space-y-1 text-xs text-white/60">
+                    <ul className="text-fm-secondary space-y-1 text-xs">
                       <li>• Real-time search suggestions</li>
                       <li>• Advanced filtering options</li>
                       <li>• Analytics and insights</li>
@@ -434,12 +442,12 @@ export const ProductPreviews: Story = {
                     </ul>
                   </div>
 
-                  <div className="flex items-center justify-between border-t border-white/10 pt-2">
+                  <div className="border-fm-divider-secondary flex items-center justify-between border-t pt-2">
                     <div>
-                      <span className="text-xs text-white/60 line-through">
+                      <span className="text-fm-secondary text-xs line-through">
                         $99/mo
                       </span>
-                      <span className="ml-2 text-lg font-bold text-white">
+                      <span className="text-fm-primary ml-2 text-lg font-bold">
                         $79/mo
                       </span>
                     </div>
@@ -453,33 +461,37 @@ export const ProductPreviews: Story = {
 
         {/* Feature Product */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Feature Product</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">
+            Feature Product
+          </h4>
           <div className="text-center">
             <HoverCard>
               <HoverCardTrigger asChild>
-                <div className="cursor-pointer rounded-lg border border-white/10 bg-white/5 p-4 transition-colors hover:bg-white/10">
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary hover:bg-fm-surface-frosted/15 hover:border-fm-divider-contrast cursor-pointer rounded-lg border p-4 transition-colors">
                   <div className="mx-auto mb-2 flex h-20 w-20 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-red-600">
-                    <EditBigIcon className="h-8 w-8 text-white" />
+                    <EditBigIcon className="text-fm-primary h-8 w-8" />
                   </div>
-                  <p className="text-sm text-white">Editor Pro</p>
+                  <p className="text-fm-primary text-sm">Editor Pro</p>
                 </div>
               </HoverCardTrigger>
               <HoverCardContent className="w-72">
                 <div className="space-y-3">
                   <div className="flex items-start space-x-3">
                     <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-gradient-to-br from-orange-500 to-red-600">
-                      <EditBigIcon className="h-6 w-6 text-white" />
+                      <EditBigIcon className="text-fm-primary h-6 w-6" />
                     </div>
                     <div>
-                      <h4 className="font-semibold text-white">Editor Pro</h4>
-                      <p className="text-sm text-white/70">
+                      <h4 className="text-fm-primary font-semibold">
+                        Editor Pro
+                      </h4>
+                      <p className="text-fm-secondary text-sm">
                         Professional code editor
                       </p>
                       <div className="mt-1 flex items-center gap-1">
                         <span className="rounded bg-orange-500/20 px-2 py-0.5 text-xs text-orange-300">
                           Popular
                         </span>
-                        <span className="rounded bg-green-500/20 px-2 py-0.5 text-xs text-green-300">
+                        <span className="bg-fm-surface-positive/20 text-fm-positive rounded px-2 py-0.5 text-xs">
                           New
                         </span>
                       </div>
@@ -488,17 +500,19 @@ export const ProductPreviews: Story = {
 
                   <div className="grid grid-cols-2 gap-3 text-xs">
                     <div className="space-y-1">
-                      <div className="text-white/70">Languages:</div>
-                      <div className="text-white/60">20+ supported</div>
+                      <div className="text-fm-secondary">Languages:</div>
+                      <div className="text-fm-secondary">20+ supported</div>
                     </div>
                     <div className="space-y-1">
-                      <div className="text-white/70">Themes:</div>
-                      <div className="text-white/60">50+ themes</div>
+                      <div className="text-fm-secondary">Themes:</div>
+                      <div className="text-fm-secondary">50+ themes</div>
                     </div>
                   </div>
 
                   <div className="flex items-center justify-between">
-                    <span className="text-lg font-bold text-white">Free</span>
+                    <span className="text-fm-primary text-lg font-bold">
+                      Free
+                    </span>
                     <Button size="sm" variant="outline">
                       Download
                     </Button>
@@ -525,38 +539,38 @@ export const ProductPreviews: Story = {
 export const DocumentationLinks: Story = {
   render: () => (
     <div className="space-y-8 p-8">
-      <h3 className="text-center text-lg font-medium text-white">
+      <h3 className="text-fm-primary text-center text-lg font-medium">
         Documentation Links
       </h3>
 
       <div className="space-y-6">
         {/* API Documentation */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary text-sm font-medium">
             API Documentation
           </h4>
           <div className="space-y-2">
-            <p className="text-sm text-white/70">
+            <p className="text-fm-secondary text-sm">
               Learn more about our{" "}
               <HoverCard>
                 <HoverCardTrigger asChild>
                   <Button
                     variant="text"
-                    className="h-auto p-0 font-normal text-blue-400"
+                    className="text-fm-info h-auto p-0 font-normal"
                   >
                     REST API
                   </Button>
                 </HoverCardTrigger>
                 <HoverCardContent>
                   <div className="space-y-2">
-                    <h4 className="text-sm font-semibold text-white">
+                    <h4 className="text-fm-primary text-sm font-semibold">
                       REST API
                     </h4>
-                    <p className="text-sm text-white/70">
+                    <p className="text-fm-secondary text-sm">
                       Our REST API provides programmatic access to all platform
                       features.
                     </p>
-                    <div className="space-y-1 text-xs text-white/60">
+                    <div className="text-fm-secondary space-y-1 text-xs">
                       <div>• Rate limit: 1000 requests/hour</div>
                       <div>• Authentication: API Key required</div>
                       <div>• Response format: JSON</div>
@@ -572,20 +586,20 @@ export const DocumentationLinks: Story = {
                 <HoverCardTrigger asChild>
                   <Button
                     variant="text"
-                    className="h-auto p-0 font-normal text-blue-400"
+                    className="text-fm-info h-auto p-0 font-normal"
                   >
                     GraphQL endpoint
                   </Button>
                 </HoverCardTrigger>
                 <HoverCardContent>
                   <div className="space-y-2">
-                    <h4 className="text-sm font-semibold text-white">
+                    <h4 className="text-fm-primary text-sm font-semibold">
                       GraphQL API
                     </h4>
-                    <p className="text-sm text-white/70">
+                    <p className="text-fm-secondary text-sm">
                       Query exactly the data you need with our GraphQL API.
                     </p>
-                    <div className="space-y-1 text-xs text-white/60">
+                    <div className="text-fm-secondary space-y-1 text-xs">
                       <div>• Single endpoint for all queries</div>
                       <div>• Type-safe schema</div>
                       <div>• Real-time subscriptions</div>
@@ -608,13 +622,13 @@ export const DocumentationLinks: Story = {
 
         {/* Configuration Options */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary text-sm font-medium">
             Configuration Options
           </h4>
-          <div className="rounded-lg border border-white/10 bg-white/5 p-4">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
             <div className="space-y-3 text-sm">
               <div className="flex items-center justify-between">
-                <span className="text-white">Enable notifications</span>
+                <span className="text-fm-primary">Enable notifications</span>
                 <HoverCard>
                   <HoverCardTrigger asChild>
                     <Button variant="outline" size="sm" className="h-6 w-6 p-0">
@@ -623,18 +637,18 @@ export const DocumentationLinks: Story = {
                   </HoverCardTrigger>
                   <HoverCardContent className="w-72">
                     <div className="space-y-2">
-                      <h4 className="text-sm font-semibold text-white">
+                      <h4 className="text-fm-primary text-sm font-semibold">
                         Notification Settings
                       </h4>
-                      <p className="text-sm text-white/70">
+                      <p className="text-fm-secondary text-sm">
                         Control when and how you receive notifications from the
                         platform.
                       </p>
                       <div className="space-y-2">
-                        <div className="text-xs text-white/60">
+                        <div className="text-fm-secondary text-xs">
                           Available notification types:
                         </div>
-                        <ul className="ml-2 space-y-1 text-xs text-white/60">
+                        <ul className="text-fm-secondary ml-2 space-y-1 text-xs">
                           <li>• Email notifications</li>
                           <li>• Push notifications</li>
                           <li>• In-app notifications</li>
@@ -647,7 +661,7 @@ export const DocumentationLinks: Story = {
               </div>
 
               <div className="flex items-center justify-between">
-                <span className="text-white">Auto-save frequency</span>
+                <span className="text-fm-primary">Auto-save frequency</span>
                 <HoverCard>
                   <HoverCardTrigger asChild>
                     <Button variant="outline" size="sm" className="h-6 w-6 p-0">
@@ -656,13 +670,13 @@ export const DocumentationLinks: Story = {
                   </HoverCardTrigger>
                   <HoverCardContent>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-semibold text-white">
+                      <h4 className="text-fm-primary text-sm font-semibold">
                         Auto-save Settings
                       </h4>
-                      <p className="text-sm text-white/70">
+                      <p className="text-fm-secondary text-sm">
                         Automatically save your work at regular intervals.
                       </p>
-                      <div className="space-y-1 text-xs text-white/60">
+                      <div className="text-fm-secondary space-y-1 text-xs">
                         <div>• Every 30 seconds (recommended)</div>
                         <div>• Every 1 minute</div>
                         <div>• Every 5 minutes</div>
@@ -710,14 +724,16 @@ export const InteractiveElements: Story = {
 
     return (
       <div className="space-y-8 p-8">
-        <h3 className="text-center text-lg font-medium text-white">
+        <h3 className="text-fm-primary text-center text-lg font-medium">
           Interactive Elements
         </h3>
 
         <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
           {/* Team Members */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/70">Team Members</h4>
+            <h4 className="text-fm-secondary text-sm font-medium">
+              Team Members
+            </h4>
             <div className="space-y-2">
               {users.map((user) => (
                 <HoverCard key={user.id}>
@@ -725,8 +741,8 @@ export const InteractiveElements: Story = {
                     <div
                       className={`flex cursor-pointer items-center space-x-3 rounded-lg border p-3 transition-colors ${
                         selectedUser === user.id
-                          ? "border-blue-500 bg-blue-500/10"
-                          : "border-white/10 bg-white/5 hover:bg-white/10"
+                          ? "border-fm-divider-secondary bg-fm-surface-info-sec"
+                          : "border-fm-divider-secondary bg-fm-surface-secondary hover:bg-fm-surface-frosted/15 hover:border-fm-divider-contrast"
                       }`}
                       onClick={() =>
                         setSelectedUser(
@@ -737,13 +753,13 @@ export const InteractiveElements: Story = {
                       <div
                         className={`flex h-8 w-8 items-center justify-center rounded-full ${
                           user.status === "online"
-                            ? "bg-green-500"
+                            ? "bg-fm-surface-positive"
                             : user.status === "away"
-                              ? "bg-yellow-500"
-                              : "bg-gray-500"
+                              ? "bg-fm-surface-warning"
+                              : "bg-fm-surface-secondary"
                         }`}
                       >
-                        <span className="text-xs font-semibold text-white">
+                        <span className="text-fm-primary text-xs font-semibold">
                           {user.name
                             .split(" ")
                             .map((n) => n[0])
@@ -751,18 +767,20 @@ export const InteractiveElements: Story = {
                         </span>
                       </div>
                       <div className="flex-1">
-                        <div className="text-sm font-medium text-white">
+                        <div className="text-fm-primary text-sm font-medium">
                           {user.name}
                         </div>
-                        <div className="text-xs text-white/60">{user.role}</div>
+                        <div className="text-fm-secondary text-xs">
+                          {user.role}
+                        </div>
                       </div>
                       <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-warning"
+                              : "bg-fm-surface-secondary"
                         }`}
                       />
                     </div>
@@ -773,13 +791,13 @@ export const InteractiveElements: Story = {
                         <div
                           className={`flex h-16 w-16 items-center justify-center rounded-full ${
                             user.status === "online"
-                              ? "bg-green-500"
+                              ? "bg-fm-surface-positive"
                               : user.status === "away"
-                                ? "bg-yellow-500"
-                                : "bg-gray-500"
+                                ? "bg-fm-surface-warning"
+                                : "bg-fm-surface-secondary"
                           }`}
                         >
-                          <span className="font-semibold text-white">
+                          <span className="text-fm-primary font-semibold">
                             {user.name
                               .split(" ")
                               .map((n) => n[0])
@@ -787,28 +805,30 @@ export const InteractiveElements: Story = {
                           </span>
                         </div>
                         <div className="space-y-1">
-                          <h4 className="text-sm font-semibold text-white">
+                          <h4 className="text-fm-primary text-sm font-semibold">
                             {user.name}
                           </h4>
-                          <p className="text-sm text-white/70">{user.role}</p>
+                          <p className="text-fm-secondary text-sm">
+                            {user.role}
+                          </p>
                           <div className="flex items-center gap-2 text-xs">
                             <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-warning"
+                                    : "bg-fm-surface-secondary"
                               }`}
                             />
-                            <span className="text-white/60 capitalize">
+                            <span className="text-fm-secondary capitalize">
                               {user.status}
                             </span>
                           </div>
                         </div>
                       </div>
 
-                      <div className="text-sm text-white/70">
+                      <div className="text-fm-secondary text-sm">
                         {user.status === "online"
                           ? "Available for collaboration"
                           : user.status === "away"
@@ -833,7 +853,7 @@ export const InteractiveElements: Story = {
 
           {/* Product Analytics */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/70">
+            <h4 className="text-fm-secondary text-sm font-medium">
               Product Analytics
             </h4>
             <div className="space-y-2">
@@ -844,25 +864,25 @@ export const InteractiveElements: Story = {
                       className={`cursor-pointer rounded-lg border p-3 transition-colors ${
                         hoveredProduct === product.id
                           ? "border-purple-500 bg-purple-500/10"
-                          : "border-white/10 bg-white/5 hover:bg-white/10"
+                          : "border-fm-divider-secondary bg-fm-surface-secondary hover:bg-fm-surface-frosted/15 hover:border-fm-divider-contrast"
                       }`}
                       onMouseEnter={() => setHoveredProduct(product.id)}
                       onMouseLeave={() => setHoveredProduct(null)}
                     >
                       <div className="flex items-center justify-between">
                         <div>
-                          <div className="text-sm font-medium text-white">
+                          <div className="text-fm-primary text-sm font-medium">
                             {product.name}
                           </div>
-                          <div className="text-xs text-white/60">
+                          <div className="text-fm-secondary text-xs">
                             {product.sales} sales
                           </div>
                         </div>
                         <div className="text-right">
-                          <div className="text-sm font-semibold text-white">
+                          <div className="text-fm-primary text-sm font-semibold">
                             {product.price}
                           </div>
-                          <div className="text-xs text-green-400">↗ +12%</div>
+                          <div className="text-fm-positive text-xs">↗ +12%</div>
                         </div>
                       </div>
                     </div>
@@ -871,58 +891,66 @@ export const InteractiveElements: Story = {
                     <div className="space-y-4">
                       <div className="flex items-start justify-between">
                         <div>
-                          <h4 className="font-semibold text-white">
+                          <h4 className="text-fm-primary font-semibold">
                             {product.name}
                           </h4>
-                          <p className="text-sm text-white/70">
+                          <p className="text-fm-secondary text-sm">
                             Detailed product analytics
                           </p>
                         </div>
-                        <span className="text-lg font-bold text-white">
+                        <span className="text-fm-primary text-lg font-bold">
                           {product.price}
                         </span>
                       </div>
 
                       <div className="grid grid-cols-2 gap-4">
                         <div className="space-y-1">
-                          <div className="text-xs text-white/60">
+                          <div className="text-fm-secondary text-xs">
                             Total Sales
                           </div>
-                          <div className="text-lg font-semibold text-white">
+                          <div className="text-fm-primary text-lg font-semibold">
                             {product.sales}
                           </div>
-                          <div className="text-xs text-green-400">
+                          <div className="text-fm-positive text-xs">
                             +12% vs last month
                           </div>
                         </div>
                         <div className="space-y-1">
-                          <div className="text-xs text-white/60">Revenue</div>
-                          <div className="text-lg font-semibold text-white">
+                          <div className="text-fm-secondary text-xs">
+                            Revenue
+                          </div>
+                          <div className="text-fm-primary text-lg font-semibold">
                             $
                             {(
                               parseInt(product.price.slice(1)) * product.sales
                             ).toLocaleString()}
                           </div>
-                          <div className="text-xs text-green-400">
+                          <div className="text-fm-positive text-xs">
                             +8% vs last month
                           </div>
                         </div>
                       </div>
 
                       <div className="space-y-2">
-                        <div className="text-xs text-white/60">Top Markets</div>
+                        <div className="text-fm-secondary text-xs">
+                          Top Markets
+                        </div>
                         <div className="space-y-1">
                           <div className="flex justify-between text-xs">
-                            <span className="text-white/70">North America</span>
-                            <span className="text-white">45%</span>
+                            <span className="text-fm-secondary">
+                              North America
+                            </span>
+                            <span className="text-fm-primary">45%</span>
                           </div>
                           <div className="flex justify-between text-xs">
-                            <span className="text-white/70">Europe</span>
-                            <span className="text-white">32%</span>
+                            <span className="text-fm-secondary">Europe</span>
+                            <span className="text-fm-primary">32%</span>
                           </div>
                           <div className="flex justify-between text-xs">
-                            <span className="text-white/70">Asia Pacific</span>
-                            <span className="text-white">23%</span>
+                            <span className="text-fm-secondary">
+                              Asia Pacific
+                            </span>
+                            <span className="text-fm-primary">23%</span>
                           </div>
                         </div>
                       </div>
@@ -955,20 +983,20 @@ export const InteractiveElements: Story = {
 export const PositioningAndTiming: Story = {
   render: () => (
     <div className="space-y-8 p-8">
-      <h3 className="text-center text-lg font-medium text-white">
+      <h3 className="text-fm-primary text-center text-lg font-medium">
         Positioning & Timing
       </h3>
 
       <div className="space-y-8">
         {/* Positioning */}
         <div className="space-y-4">
-          <h4 className="text-center text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary text-center text-sm font-medium">
             Different Positions
           </h4>
           <div className="grid grid-cols-2 place-items-center gap-8 lg:grid-cols-4">
             {/* Top */}
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/70">Top</span>
+              <span className="text-fm-secondary text-sm">Top</span>
               <HoverCard>
                 <HoverCardTrigger asChild>
                   <Button variant="outline" size="sm">
@@ -977,10 +1005,10 @@ export const PositioningAndTiming: Story = {
                 </HoverCardTrigger>
                 <HoverCardContent side="top">
                   <div className="space-y-2">
-                    <h4 className="text-sm font-semibold text-white">
+                    <h4 className="text-fm-primary text-sm font-semibold">
                       Top Position
                     </h4>
-                    <p className="text-sm text-white/70">
+                    <p className="text-fm-secondary text-sm">
                       Card positioned above the trigger
                     </p>
                   </div>
@@ -990,7 +1018,7 @@ export const PositioningAndTiming: Story = {
 
             {/* Right */}
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/70">Right</span>
+              <span className="text-fm-secondary text-sm">Right</span>
               <HoverCard>
                 <HoverCardTrigger asChild>
                   <Button variant="outline" size="sm">
@@ -999,10 +1027,10 @@ export const PositioningAndTiming: Story = {
                 </HoverCardTrigger>
                 <HoverCardContent side="right">
                   <div className="space-y-2">
-                    <h4 className="text-sm font-semibold text-white">
+                    <h4 className="text-fm-primary text-sm font-semibold">
                       Right Position
                     </h4>
-                    <p className="text-sm text-white/70">
+                    <p className="text-fm-secondary text-sm">
                       Card positioned to the right
                     </p>
                   </div>
@@ -1012,7 +1040,7 @@ export const PositioningAndTiming: Story = {
 
             {/* Bottom */}
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/70">Bottom</span>
+              <span className="text-fm-secondary text-sm">Bottom</span>
               <HoverCard>
                 <HoverCardTrigger asChild>
                   <Button variant="outline" size="sm">
@@ -1021,10 +1049,10 @@ export const PositioningAndTiming: Story = {
                 </HoverCardTrigger>
                 <HoverCardContent side="bottom">
                   <div className="space-y-2">
-                    <h4 className="text-sm font-semibold text-white">
+                    <h4 className="text-fm-primary text-sm font-semibold">
                       Bottom Position
                     </h4>
-                    <p className="text-sm text-white/70">
+                    <p className="text-fm-secondary text-sm">
                       Card positioned below the trigger
                     </p>
                   </div>
@@ -1034,7 +1062,7 @@ export const PositioningAndTiming: Story = {
 
             {/* Left */}
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/70">Left</span>
+              <span className="text-fm-secondary text-sm">Left</span>
               <HoverCard>
                 <HoverCardTrigger asChild>
                   <Button variant="outline" size="sm">
@@ -1043,10 +1071,10 @@ export const PositioningAndTiming: Story = {
                 </HoverCardTrigger>
                 <HoverCardContent side="left">
                   <div className="space-y-2">
-                    <h4 className="text-sm font-semibold text-white">
+                    <h4 className="text-fm-primary text-sm font-semibold">
                       Left Position
                     </h4>
-                    <p className="text-sm text-white/70">
+                    <p className="text-fm-secondary text-sm">
                       Card positioned to the left
                     </p>
                   </div>
@@ -1058,7 +1086,7 @@ export const PositioningAndTiming: Story = {
 
         {/* Timing */}
         <div className="space-y-4">
-          <h4 className="text-center text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary text-center text-sm font-medium">
             Different Delays
           </h4>
           <div className="flex justify-center gap-4">
@@ -1070,8 +1098,10 @@ export const PositioningAndTiming: Story = {
               </HoverCardTrigger>
               <HoverCardContent>
                 <div className="space-y-2">
-                  <h4 className="text-sm font-semibold text-white">No Delay</h4>
-                  <p className="text-sm text-white/70">
+                  <h4 className="text-fm-primary text-sm font-semibold">
+                    No Delay
+                  </h4>
+                  <p className="text-fm-secondary text-sm">
                     Appears immediately on hover
                   </p>
                 </div>
@@ -1086,10 +1116,10 @@ export const PositioningAndTiming: Story = {
               </HoverCardTrigger>
               <HoverCardContent>
                 <div className="space-y-2">
-                  <h4 className="text-sm font-semibold text-white">
+                  <h4 className="text-fm-primary text-sm font-semibold">
                     Medium Delay
                   </h4>
-                  <p className="text-sm text-white/70">
+                  <p className="text-fm-secondary text-sm">
                     500ms delay before appearing
                   </p>
                 </div>
@@ -1104,10 +1134,10 @@ export const PositioningAndTiming: Story = {
               </HoverCardTrigger>
               <HoverCardContent>
                 <div className="space-y-2">
-                  <h4 className="text-sm font-semibold text-white">
+                  <h4 className="text-fm-primary text-sm font-semibold">
                     Long Delay
                   </h4>
-                  <p className="text-sm text-white/70">
+                  <p className="text-fm-secondary text-sm">
                     1000ms delay before appearing
                   </p>
                 </div>
@@ -1118,7 +1148,7 @@ export const PositioningAndTiming: Story = {
 
         {/* Size Variations */}
         <div className="space-y-4">
-          <h4 className="text-center text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary text-center text-sm font-medium">
             Different Sizes
           </h4>
           <div className="flex justify-center gap-4">
@@ -1130,10 +1160,12 @@ export const PositioningAndTiming: Story = {
               </HoverCardTrigger>
               <HoverCardContent className="w-48">
                 <div className="space-y-2">
-                  <h4 className="text-sm font-semibold text-white">
+                  <h4 className="text-fm-primary text-sm font-semibold">
                     Small Card
                   </h4>
-                  <p className="text-sm text-white/70">Compact information</p>
+                  <p className="text-fm-secondary text-sm">
+                    Compact information
+                  </p>
                 </div>
               </HoverCardContent>
             </HoverCard>
@@ -1146,10 +1178,10 @@ export const PositioningAndTiming: Story = {
               </HoverCardTrigger>
               <HoverCardContent className="w-80">
                 <div className="space-y-2">
-                  <h4 className="text-sm font-semibold text-white">
+                  <h4 className="text-fm-primary text-sm font-semibold">
                     Medium Card
                   </h4>
-                  <p className="text-sm text-white/70">
+                  <p className="text-fm-secondary text-sm">
                     Medium-sized card with more detailed information and
                     multiple lines of text.
                   </p>
@@ -1165,15 +1197,15 @@ export const PositioningAndTiming: Story = {
               </HoverCardTrigger>
               <HoverCardContent className="w-96">
                 <div className="space-y-3">
-                  <h4 className="text-sm font-semibold text-white">
+                  <h4 className="text-fm-primary text-sm font-semibold">
                     Large Card
                   </h4>
-                  <p className="text-sm text-white/70">
+                  <p className="text-fm-secondary text-sm">
                     Large card with extensive information, multiple sections,
                     and complex layouts. Perfect for detailed previews and
                     comprehensive information displays.
                   </p>
-                  <div className="border-t border-white/10 pt-2">
+                  <div className="border-fm-divider-secondary border-t pt-2">
                     <Button size="sm" className="w-full">
                       Learn More
                     </Button>
@@ -1200,27 +1232,28 @@ export const PositioningAndTiming: Story = {
 export const AccessibilityDemo: Story = {
   render: () => (
     <div className="space-y-8 p-8">
-      <h3 className="text-center text-lg font-medium text-white">
+      <h3 className="text-fm-primary text-center text-lg font-medium">
         Accessibility Features
       </h3>
 
       <div className="space-y-6">
-        <div className="rounded-lg border border-blue-500/30 bg-blue-900/10 p-4">
-          <h4 className="mb-2 text-sm font-medium text-blue-300">
+        <div className="border-fm-divider-secondary bg-fm-surface-info-sec rounded-lg border p-4">
+          <h4 className="text-fm-info mb-2 text-sm font-medium">
             Keyboard Navigation
           </h4>
-          <p className="mb-2 text-xs text-blue-200/70">
+          <p className="text-fm-info-sec mb-2 text-xs">
             Try these keyboard interactions:
           </p>
-          <ul className="space-y-1 text-xs text-blue-200/70">
+          <ul className="text-fm-info-sec space-y-1 text-xs">
             <li>
-              • <kbd className="rounded bg-white/10 px-1">Tab</kbd> to focus
-              hover card triggers
+              • <kbd className="bg-fm-surface-secondary rounded px-1">Tab</kbd>{" "}
+              to focus hover card triggers
             </li>
             <li>• Hover card appears automatically on focus</li>
             <li>
-              • <kbd className="rounded bg-white/10 px-1">Escape</kbd> to
-              dismiss hover card
+              •{" "}
+              <kbd className="bg-fm-surface-secondary rounded px-1">Escape</kbd>{" "}
+              to dismiss hover card
             </li>
             <li>• Content is announced by screen readers</li>
           </ul>
@@ -1228,7 +1261,7 @@ export const AccessibilityDemo: Story = {
 
         {/* Keyboard Accessible Examples */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary text-sm font-medium">
             Keyboard Accessible Hover Cards
           </h4>
           <div className="flex flex-wrap gap-4">
@@ -1238,10 +1271,10 @@ export const AccessibilityDemo: Story = {
               </HoverCardTrigger>
               <HoverCardContent>
                 <div className="space-y-2">
-                  <h4 className="text-sm font-semibold text-white">
+                  <h4 className="text-fm-primary text-sm font-semibold">
                     Keyboard Accessible
                   </h4>
-                  <p className="text-sm text-white/70">
+                  <p className="text-fm-secondary text-sm">
                     This hover card appears on both hover and keyboard focus.
                   </p>
                 </div>
@@ -1252,7 +1285,7 @@ export const AccessibilityDemo: Story = {
               <HoverCardTrigger asChild>
                 <a
                   href="#"
-                  className="inline-flex items-center gap-2 rounded px-3 py-2 text-sm text-blue-400 hover:text-blue-300 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                  className="text-fm-info inline-flex items-center gap-2 rounded px-3 py-2 text-sm hover:text-blue-300 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                   onClick={(e) => e.preventDefault()}
                 >
                   <AlertIcon className="h-4 w-4" />
@@ -1261,10 +1294,10 @@ export const AccessibilityDemo: Story = {
               </HoverCardTrigger>
               <HoverCardContent>
                 <div className="space-y-2">
-                  <h4 className="text-sm font-semibold text-white">
+                  <h4 className="text-fm-primary text-sm font-semibold">
                     Documentation
                   </h4>
-                  <p className="text-sm text-white/70">
+                  <p className="text-fm-secondary text-sm">
                     Comprehensive guides and API reference for developers.
                   </p>
                   <Button size="sm" className="w-full">
@@ -1276,22 +1309,22 @@ export const AccessibilityDemo: Story = {
 
             <HoverCard>
               <HoverCardTrigger asChild>
-                <button className="inline-flex items-center gap-2 rounded border border-white/20 bg-white/5 px-3 py-2 text-sm text-white hover:bg-white/10 focus:ring-2 focus:ring-purple-500 focus:outline-none">
+                <button className="border-fm-divider-secondary bg-fm-surface-secondary text-fm-primary hover:bg-fm-surface-frosted/15 hover:border-fm-divider-contrast inline-flex items-center gap-2 rounded border px-3 py-2 text-sm focus:ring-2 focus:ring-purple-500 focus:outline-none">
                   <TickCircleIcon className="h-4 w-4" />
                   Status Check
                 </button>
               </HoverCardTrigger>
               <HoverCardContent>
                 <div className="space-y-2">
-                  <h4 className="text-sm font-semibold text-white">
+                  <h4 className="text-fm-primary text-sm font-semibold">
                     System Status
                   </h4>
-                  <div className="space-y-1 text-sm text-white/70">
+                  <div className="text-fm-secondary space-y-1 text-sm">
                     <div className="flex items-center gap-2">
-                      <div className="h-2 w-2 rounded-full bg-green-500"></div>
+                      <div className="bg-fm-surface-positive h-2 w-2 rounded-full"></div>
                       <span>All systems operational</span>
                     </div>
-                    <div className="text-xs text-white/60">
+                    <div className="text-fm-secondary text-xs">
                       Last updated: 2 minutes ago
                     </div>
                   </div>
@@ -1301,11 +1334,11 @@ export const AccessibilityDemo: Story = {
           </div>
         </div>
 
-        <div className="rounded-lg border border-amber-500/30 bg-amber-900/10 p-4">
-          <h4 className="mb-2 text-sm font-medium text-amber-300">
+        <div className="border-fm-divider-warning bg-fm-surface-warning-sec rounded-lg border p-4">
+          <h4 className="text-fm-warning mb-2 text-sm font-medium">
             Best Practices
           </h4>
-          <ul className="space-y-1 text-xs text-amber-200/70">
+          <ul className="text-fm-warning space-y-1 text-xs">
             <li>• Ensure hover cards work with keyboard navigation</li>
             <li>• Don't put critical information only in hover cards</li>
             <li>• Keep content concise and scannable</li>