aural-ui 3.0.6 → 4.0.1

package/dist/components/popover/Popover.stories.tsx

@@ -64,8 +64,10 @@ export const PopoverRoot: Story = {
   render: () => (
     <div className="space-y-4">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">Popover Root Component</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">
+          Popover Root Component
+        </h3>
+        <p className="text-fm-secondary text-sm">
           The root Popover component manages state and provides context
         </p>
       </div>
@@ -76,9 +78,9 @@ export const PopoverRoot: Story = {
           <PopoverTrigger asChild>
             <Button variant="outline">Uncontrolled</Button>
           </PopoverTrigger>
-          <PopoverContent className="rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary rounded-lg border shadow-2xl">
             <div className="p-4">
-              <p className="text-sm text-white">
+              <p className="text-fm-primary text-sm">
                 This popover manages its own open/close state internally.
               </p>
             </div>
@@ -90,9 +92,9 @@ export const PopoverRoot: Story = {
           <PopoverTrigger asChild>
             <Button variant="outline">Default Closed</Button>
           </PopoverTrigger>
-          <PopoverContent className="rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary rounded-lg border shadow-2xl">
             <div className="p-4">
-              <p className="text-sm text-white">
+              <p className="text-fm-primary text-sm">
                 This popover starts in a closed state by default.
               </p>
             </div>
@@ -104,9 +106,9 @@ export const PopoverRoot: Story = {
           <PopoverTrigger asChild>
             <Button variant="outline">Modal Mode</Button>
           </PopoverTrigger>
-          <PopoverContent className="rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary rounded-lg border shadow-2xl">
             <div className="p-4">
-              <p className="text-sm text-white">
+              <p className="text-fm-primary text-sm">
                 This is a modal popover that captures focus and blocks
                 interaction.
               </p>
@@ -131,8 +133,10 @@ export const PopoverTriggerVariants: Story = {
   render: () => (
     <div className="space-y-6">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">PopoverTrigger Variants</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">
+          PopoverTrigger Variants
+        </h3>
+        <p className="text-fm-secondary text-sm">
           Different types of trigger elements using asChild prop
         </p>
       </div>
@@ -143,9 +147,9 @@ export const PopoverTriggerVariants: Story = {
           <PopoverTrigger asChild>
             <Button>Button Trigger</Button>
           </PopoverTrigger>
-          <PopoverContent className="rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary rounded-lg border shadow-2xl">
             <div className="p-3">
-              <p className="text-sm text-white">
+              <p className="text-fm-primary text-sm">
                 Triggered by a Button component
               </p>
             </div>
@@ -157,14 +161,16 @@ export const PopoverTriggerVariants: Story = {
           <PopoverTrigger asChild>
             <Button
               variant="text"
-              className="text-sm text-blue-400 underline hover:text-blue-300"
+              className="text-fm-info hover:text-fm-info-sec text-sm underline"
             >
               Click this link
             </Button>
           </PopoverTrigger>
-          <PopoverContent className="rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary rounded-lg border shadow-2xl">
             <div className="p-3">
-              <p className="text-sm text-white">Triggered by a text link</p>
+              <p className="text-fm-primary text-sm">
+                Triggered by a text link
+              </p>
             </div>
           </PopoverContent>
         </Popover>
@@ -177,9 +183,11 @@ export const PopoverTriggerVariants: Story = {
               icon={<FeatureShineIcon />}
             />
           </PopoverTrigger>
-          <PopoverContent className="rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary rounded-lg border shadow-2xl">
             <div className="p-3">
-              <p className="text-sm text-white">Triggered by an icon button</p>
+              <p className="text-fm-primary text-sm">
+                Triggered by an icon button
+              </p>
             </div>
           </PopoverContent>
         </Popover>
@@ -199,9 +207,11 @@ export const PopoverTriggerVariants: Story = {
               />
             </IconButton>
           </PopoverTrigger>
-          <PopoverContent className="rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary rounded-lg border shadow-2xl">
             <div className="p-3">
-              <p className="text-sm text-white">Triggered by an avatar image</p>
+              <p className="text-fm-primary text-sm">
+                Triggered by an avatar image
+              </p>
             </div>
           </PopoverContent>
         </Popover>
@@ -223,8 +233,10 @@ export const PopoverContentVariants: Story = {
   render: () => (
     <div className="space-y-6">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">PopoverContent Variants</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">
+          PopoverContent Variants
+        </h3>
+        <p className="text-fm-secondary text-sm">
           Different content layouts and styling options
         </p>
       </div>
@@ -237,9 +249,9 @@ export const PopoverContentVariants: Story = {
               Simple Content
             </Button>
           </PopoverTrigger>
-          <PopoverContent className="w-56 rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary w-56 rounded-lg border shadow-2xl">
             <div className="p-3">
-              <p className="text-sm text-white">
+              <p className="text-fm-primary text-sm">
                 Simple text content in a popover.
               </p>
             </div>
@@ -253,18 +265,22 @@ export const PopoverContentVariants: Story = {
               Rich Content
             </Button>
           </PopoverTrigger>
-          <PopoverContent className="w-72 rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary w-72 rounded-lg border shadow-2xl">
             <div className="space-y-3 p-4">
               <div className="flex items-center gap-3">
                 <div className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-600">
-                  <span className="text-sm font-medium text-white">JD</span>
+                  <span className="text-fm-primary text-sm font-medium">
+                    JD
+                  </span>
                 </div>
                 <div>
-                  <h4 className="font-medium text-white">John Doe</h4>
-                  <p className="text-xs text-white/60">Software Developer</p>
+                  <h4 className="text-fm-primary font-medium">John Doe</h4>
+                  <p className="text-fm-secondary text-xs">
+                    Software Developer
+                  </p>
                 </div>
               </div>
-              <p className="text-sm text-white/80">
+              <p className="text-fm-secondary text-sm">
                 Rich content with avatar, title, and description.
               </p>
             </div>
@@ -280,8 +296,8 @@ export const PopoverContentVariants: Story = {
           </PopoverTrigger>
           <PopoverContent className="w-64 rounded-lg border border-purple-500/30 bg-gradient-to-b from-purple-900/90 to-blue-900/90 shadow-2xl">
             <div className="p-4">
-              <h4 className="mb-2 font-medium text-white">Custom Theme</h4>
-              <p className="text-sm text-purple-200">
+              <h4 className="text-fm-primary mb-2 font-medium">Custom Theme</h4>
+              <p className="text-fm-secondary text-sm">
                 PopoverContent with custom gradient background and purple theme.
               </p>
             </div>
@@ -295,9 +311,9 @@ export const PopoverContentVariants: Story = {
               No Border
             </Button>
           </PopoverTrigger>
-          <PopoverContent className="w-56 rounded-xl bg-gray-800 shadow-2xl">
+          <PopoverContent className="bg-fm-surface-primary w-56 rounded-xl shadow-2xl">
             <div className="p-4">
-              <p className="text-sm text-white">
+              <p className="text-fm-primary text-sm">
                 Content without border, just shadow and background.
               </p>
             </div>
@@ -324,10 +340,10 @@ export const PopoverAnchorExample: Story = {
     return (
       <div className="space-y-6">
         <div className="text-center">
-          <h3 className="mb-2 font-medium text-white">
+          <h3 className="text-fm-primary mb-2 font-medium">
             PopoverAnchor Component
           </h3>
-          <p className="text-sm text-white/60">
+          <p className="text-fm-secondary text-sm">
             Position popover relative to a different element than the trigger
           </p>
         </div>
@@ -338,7 +354,7 @@ export const PopoverAnchorExample: Story = {
             ref={setAnchorEl}
             className="flex h-20 w-20 items-center justify-center rounded-lg border-2 border-dashed border-blue-400 bg-gradient-to-br from-blue-500 to-purple-600"
           >
-            <span className="text-center text-xs font-medium text-white">
+            <span className="text-fm-primary text-center text-xs font-medium">
               Anchor
               <br />
               Point
@@ -359,15 +375,17 @@ export const PopoverAnchorExample: Story = {
             <PopoverTrigger asChild>
               <Button variant="outline">Open at Anchor</Button>
             </PopoverTrigger>
-            <PopoverContent className="rounded-lg border border-white/10 shadow-2xl">
+            <PopoverContent className="border-fm-divider-secondary rounded-lg border shadow-2xl">
               <PopoverArrow className="fill-white/10" />
               <div className="space-y-2 p-4">
-                <h4 className="font-medium text-white">Anchored Popover</h4>
-                <p className="text-sm text-white/70">
+                <h4 className="text-fm-primary font-medium">
+                  Anchored Popover
+                </h4>
+                <p className="text-fm-secondary text-sm">
                   This popover is positioned relative to the blue anchor box,
                   not the trigger button.
                 </p>
-                <div className="rounded bg-white/5 p-2 text-xs text-white/50">
+                <div className="bg-fm-surface-secondary text-fm-tertiary rounded p-2 text-xs">
                   <strong>Note:</strong> The popover appears near the anchor
                   point even though the trigger is elsewhere.
                 </div>
@@ -378,7 +396,7 @@ export const PopoverAnchorExample: Story = {
 
         {/* Multiple Anchors Example */}
         <div className="mt-8">
-          <h4 className="mb-4 text-center font-medium text-white">
+          <h4 className="text-fm-primary mb-4 text-center font-medium">
             Multiple Anchor Points
           </h4>
           <div className="flex justify-center gap-4">
@@ -393,7 +411,7 @@ export const PopoverAnchorExample: Story = {
                     ref={setAnchor}
                     className="flex h-16 w-16 items-center justify-center rounded-lg border border-green-400 bg-green-600"
                   >
-                    <span className="text-xs font-medium text-white">
+                    <span className="text-fm-primary text-xs font-medium">
                       {label}
                     </span>
                   </div>
@@ -413,9 +431,9 @@ export const PopoverAnchorExample: Story = {
                         Open {label}
                       </Button>
                     </PopoverTrigger>
-                    <PopoverContent className="rounded-lg border border-white/10 shadow-2xl">
+                    <PopoverContent className="border-fm-divider-secondary rounded-lg border shadow-2xl">
                       <div className="p-3">
-                        <p className="text-sm text-white">
+                        <p className="text-fm-primary text-sm">
                           Content for {label}
                         </p>
                       </div>
@@ -444,8 +462,10 @@ export const PopoverArrowVariants: Story = {
   render: () => (
     <div className="space-y-6">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">PopoverArrow Variants</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">
+          PopoverArrow Variants
+        </h3>
+        <p className="text-fm-secondary text-sm">
           Different arrow styles and positioning options
         </p>
       </div>
@@ -456,10 +476,10 @@ export const PopoverArrowVariants: Story = {
           <PopoverTrigger asChild>
             <Button variant="outline">Default Arrow</Button>
           </PopoverTrigger>
-          <PopoverContent className="rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary rounded-lg border shadow-2xl">
             <PopoverArrow className="fill-white/10" />
             <div className="p-3">
-              <p className="text-sm text-white">
+              <p className="text-fm-primary text-sm">
                 Default semi-transparent arrow
               </p>
             </div>
@@ -471,10 +491,10 @@ export const PopoverArrowVariants: Story = {
           <PopoverTrigger asChild>
             <Button variant="outline">Solid Arrow</Button>
           </PopoverTrigger>
-          <PopoverContent className="rounded-lg border border-gray-600 bg-gray-800 shadow-2xl">
+          <PopoverContent className="bg-fm-surface-primary rounded-lg border border-gray-600 shadow-2xl">
             <PopoverArrow className="fill-gray-800" />
             <div className="p-3">
-              <p className="text-sm text-white">
+              <p className="text-fm-primary text-sm">
                 Solid arrow matching background
               </p>
             </div>
@@ -489,7 +509,7 @@ export const PopoverArrowVariants: Story = {
           <PopoverContent className="rounded-lg border border-blue-700 bg-blue-900 shadow-2xl">
             <PopoverArrow className="fill-blue-700" />
             <div className="p-3">
-              <p className="text-sm text-white">
+              <p className="text-fm-primary text-sm">
                 Colored arrow with theme accent
               </p>
             </div>
@@ -501,10 +521,10 @@ export const PopoverArrowVariants: Story = {
           <PopoverTrigger asChild>
             <Button variant="outline">Large Arrow</Button>
           </PopoverTrigger>
-          <PopoverContent className="rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary rounded-lg border shadow-2xl">
             <PopoverArrow className="h-4 w-4 fill-white/10" />
             <div className="p-3">
-              <p className="text-sm text-white">Larger arrow size</p>
+              <p className="text-fm-primary text-sm">Larger arrow size</p>
             </div>
           </PopoverContent>
         </Popover>
@@ -517,7 +537,7 @@ export const PopoverArrowVariants: Story = {
           <PopoverContent className="rounded-lg border border-purple-600 bg-gradient-to-b from-purple-800 to-pink-800 shadow-2xl">
             <PopoverArrow className="fill-purple-700" />
             <div className="p-3">
-              <p className="text-sm text-white">
+              <p className="text-fm-primary text-sm">
                 Arrow with gradient background
               </p>
             </div>
@@ -529,9 +549,9 @@ export const PopoverArrowVariants: Story = {
           <PopoverTrigger asChild>
             <Button variant="outline">No Arrow</Button>
           </PopoverTrigger>
-          <PopoverContent className="rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary rounded-lg border shadow-2xl">
             <div className="p-3">
-              <p className="text-sm text-white">Popover without arrow</p>
+              <p className="text-fm-primary text-sm">Popover without arrow</p>
             </div>
           </PopoverContent>
         </Popover>
@@ -539,7 +559,7 @@ export const PopoverArrowVariants: Story = {
 
       {/* Arrow Positioning */}
       <div className="mt-8">
-        <h4 className="mb-4 text-center font-medium text-white">
+        <h4 className="text-fm-primary mb-4 text-center font-medium">
           Arrow Positioning
         </h4>
         <div className="flex justify-center gap-4">
@@ -552,11 +572,11 @@ export const PopoverArrowVariants: Story = {
               </PopoverTrigger>
               <PopoverContent
                 side={side}
-                className="rounded-lg border border-white/10 shadow-2xl"
+                className="border-fm-divider-secondary rounded-lg border shadow-2xl"
               >
                 <PopoverArrow className="fill-white/10" />
                 <div className="p-3">
-                  <p className="text-sm text-white">Arrow on {side}</p>
+                  <p className="text-fm-primary text-sm">Arrow on {side}</p>
                 </div>
               </PopoverContent>
             </Popover>
@@ -580,8 +600,10 @@ export const PopoverCloseVariants: Story = {
   render: () => (
     <div className="space-y-6">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">PopoverClose Variants</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">
+          PopoverClose Variants
+        </h3>
+        <p className="text-fm-secondary text-sm">
           Different ways to implement close functionality
         </p>
       </div>
@@ -592,18 +614,18 @@ export const PopoverCloseVariants: Story = {
           <PopoverTrigger asChild>
             <Button variant="outline">Header Close</Button>
           </PopoverTrigger>
-          <PopoverContent className="w-72 rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary w-72 rounded-lg border shadow-2xl">
             <PopoverArrow className="fill-white/10" />
             <div className="p-4">
               <div className="mb-3 flex items-center justify-between">
-                <h4 className="font-medium text-white">Settings</h4>
+                <h4 className="text-fm-primary font-medium">Settings</h4>
                 <PopoverClose asChild>
                   <Button variant="text" size="sm">
                     ✕
                   </Button>
                 </PopoverClose>
               </div>
-              <p className="text-sm text-white/70">
+              <p className="text-fm-secondary text-sm">
                 Close button in the header
               </p>
             </div>
@@ -615,11 +637,11 @@ export const PopoverCloseVariants: Story = {
           <PopoverTrigger asChild>
             <Button variant="outline">Footer Close</Button>
           </PopoverTrigger>
-          <PopoverContent className="w-72 rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary w-72 rounded-lg border shadow-2xl">
             <PopoverArrow className="fill-white/10" />
             <div className="space-y-3 p-4">
-              <h4 className="font-medium text-white">Confirmation</h4>
-              <p className="text-sm text-white/70">
+              <h4 className="text-fm-primary font-medium">Confirmation</h4>
+              <p className="text-fm-secondary text-sm">
                 Are you sure you want to continue?
               </p>
               <div className="flex gap-2">
@@ -639,11 +661,11 @@ export const PopoverCloseVariants: Story = {
           <PopoverTrigger asChild>
             <Button variant="outline">Multiple Close</Button>
           </PopoverTrigger>
-          <PopoverContent className="w-80 rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary w-80 rounded-lg border shadow-2xl">
             <PopoverArrow className="fill-white/10" />
             <div className="space-y-4 p-4">
               <div className="flex items-center justify-between">
-                <h4 className="font-medium text-white">Actions</h4>
+                <h4 className="text-fm-primary font-medium">Actions</h4>
                 <PopoverClose asChild>
                   <Button variant="text" size="sm">
                     ✕
@@ -653,16 +675,16 @@ export const PopoverCloseVariants: Story = {
 
               <div className="space-y-2">
                 <PopoverClose asChild>
-                  <button className="w-full rounded px-3 py-2 text-left text-sm text-white hover:bg-white/10">
+                  <button className="text-fm-primary hover:bg-fm-surface-secondary w-full rounded px-3 py-2 text-left text-sm">
                     Save and Close
                   </button>
                 </PopoverClose>
                 <PopoverClose asChild>
-                  <button className="w-full rounded px-3 py-2 text-left text-sm text-white hover:bg-white/10">
+                  <button className="text-fm-primary hover:bg-fm-surface-secondary w-full rounded px-3 py-2 text-left text-sm">
                     Discard and Close
                   </button>
                 </PopoverClose>
-                <button className="w-full rounded px-3 py-2 text-left text-sm text-white hover:bg-white/10">
+                <button className="text-fm-primary hover:bg-fm-surface-secondary w-full rounded px-3 py-2 text-left text-sm">
                   Keep Open
                 </button>
               </div>
@@ -675,13 +697,13 @@ export const PopoverCloseVariants: Story = {
           <PopoverTrigger asChild>
             <Button variant="outline">Icon Close</Button>
           </PopoverTrigger>
-          <PopoverContent className="w-64 rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary w-64 rounded-lg border shadow-2xl">
             <PopoverArrow className="fill-white/10" />
             <div className="p-4">
               <div className="mb-3 flex items-start justify-between">
                 <div>
-                  <h4 className="font-medium text-white">Notification</h4>
-                  <p className="mt-1 text-sm text-white/70">
+                  <h4 className="text-fm-primary font-medium">Notification</h4>
+                  <p className="text-fm-secondary mt-1 text-sm">
                     New message received
                   </p>
                 </div>
@@ -712,16 +734,16 @@ export const PopoverCloseVariants: Story = {
           <PopoverTrigger asChild>
             <Button variant="outline">Text Close</Button>
           </PopoverTrigger>
-          <PopoverContent className="w-64 rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary w-64 rounded-lg border shadow-2xl">
             <PopoverArrow className="fill-white/10" />
             <div className="space-y-3 p-4">
-              <h4 className="font-medium text-white">Quick Tip</h4>
-              <p className="text-sm text-white/70">
+              <h4 className="text-fm-primary font-medium">Quick Tip</h4>
+              <p className="text-fm-secondary text-sm">
                 Use keyboard shortcuts to speed up your workflow.
               </p>
               <div className="text-right">
                 <PopoverClose asChild>
-                  <button className="text-sm text-blue-400 underline hover:text-blue-300">
+                  <button className="text-fm-info hover:text-fm-info-sec text-sm underline">
                     Got it, thanks!
                   </button>
                 </PopoverClose>
@@ -735,10 +757,10 @@ export const PopoverCloseVariants: Story = {
           <PopoverTrigger asChild>
             <Button variant="outline">Auto Close</Button>
           </PopoverTrigger>
-          <PopoverContent className="w-72 rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary w-72 rounded-lg border shadow-2xl">
             <PopoverArrow className="fill-white/10" />
             <div className="space-y-3 p-4">
-              <h4 className="font-medium text-white">Quick Actions</h4>
+              <h4 className="text-fm-primary font-medium">Quick Actions</h4>
               <div className="grid grid-cols-2 gap-2">
                 <PopoverClose asChild>
                   <Button size="sm" variant="outline">
@@ -761,7 +783,7 @@ export const PopoverCloseVariants: Story = {
                   </Button>
                 </PopoverClose>
               </div>
-              <p className="text-xs text-white/50">
+              <p className="text-fm-tertiary text-xs">
                 Actions will close the popover automatically
               </p>
             </div>
@@ -785,8 +807,10 @@ export const CompleteIntegration: Story = {
   render: () => (
     <div className="space-y-6">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">Complete Integration</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">
+          Complete Integration
+        </h3>
+        <p className="text-fm-secondary text-sm">
           All components working together in real-world scenarios
         </p>
       </div>
@@ -799,11 +823,11 @@ export const CompleteIntegration: Story = {
               <img
                 src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop&crop=face"
                 alt="Profile"
-                className="h-8 w-8 rounded-full border border-white/20"
+                className="border-fm-divider-secondary h-8 w-8 rounded-full border"
               />
               <span className="text-sm">John Doe</span>
               <svg
-                className="h-4 w-4 text-white/60"
+                className="text-fm-secondary h-4 w-4"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -819,13 +843,13 @@ export const CompleteIntegration: Story = {
           </PopoverTrigger>
           <PopoverContent
             align="end"
-            className="w-80 rounded-lg border border-white/10 shadow-2xl"
+            className="border-fm-divider-secondary w-80 rounded-lg border shadow-2xl"
           >
             <PopoverArrow className="fill-white/10" />
             <div className="space-y-4 p-4">
               {/* Header with close */}
               <div className="flex items-center justify-between">
-                <h4 className="font-medium text-white">Account Menu</h4>
+                <h4 className="text-fm-primary font-medium">Account Menu</h4>
                 <PopoverClose asChild>
                   <Button variant="text" size="sm">
                     ✕
@@ -834,15 +858,17 @@ export const CompleteIntegration: Story = {
               </div>
 
               {/* User Info */}
-              <div className="flex items-center gap-3 rounded-lg bg-white/5 p-3">
+              <div className="bg-fm-surface-secondary flex items-center gap-3 rounded-lg p-3">
                 <img
                   src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=48&h=48&fit=crop&crop=face"
                   alt="Profile"
-                  className="h-12 w-12 rounded-full border border-white/20"
+                  className="border-fm-divider-secondary h-12 w-12 rounded-full border"
                 />
                 <div>
-                  <div className="font-medium text-white">John Doe</div>
-                  <div className="text-sm text-white/60">john@example.com</div>
+                  <div className="text-fm-primary font-medium">John Doe</div>
+                  <div className="text-fm-secondary text-sm">
+                    john@example.com
+                  </div>
                 </div>
               </div>
 
@@ -863,7 +889,7 @@ export const CompleteIntegration: Story = {
               {/* Menu Items */}
               <div className="space-y-1">
                 <PopoverClose asChild>
-                  <button className="flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm text-white hover:bg-white/10">
+                  <button className="text-fm-primary hover:bg-fm-surface-secondary flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm">
                     <svg
                       className="h-4 w-4"
                       fill="none"
@@ -881,7 +907,7 @@ export const CompleteIntegration: Story = {
                   </button>
                 </PopoverClose>
                 <PopoverClose asChild>
-                  <button className="flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm text-white hover:bg-white/10">
+                  <button className="text-fm-primary hover:bg-fm-surface-secondary flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm">
                     <svg
                       className="h-4 w-4"
                       fill="none"
@@ -899,7 +925,7 @@ export const CompleteIntegration: Story = {
                   </button>
                 </PopoverClose>
                 <PopoverClose asChild>
-                  <button className="flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm text-white hover:bg-white/10">
+                  <button className="text-fm-primary hover:bg-fm-surface-secondary flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm">
                     <svg
                       className="h-4 w-4"
                       fill="none"
@@ -919,9 +945,9 @@ export const CompleteIntegration: Story = {
               </div>
 
               {/* Sign Out */}
-              <div className="border-t border-white/10 pt-3">
+              <div className="border-fm-divider-secondary border-t pt-3">
                 <PopoverClose asChild>
-                  <button className="flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm text-red-400 hover:bg-red-500/10">
+                  <button className="text-fm-icon-negative hover:bg-fm-surface-secondary flex w-full items-center gap-2 rounded px-3 py-2 text-left text-sm">
                     <svg
                       className="h-4 w-4"
                       fill="none"
@@ -948,12 +974,12 @@ export const CompleteIntegration: Story = {
           <PopoverTrigger asChild>
             <Button>Edit Profile</Button>
           </PopoverTrigger>
-          <PopoverContent className="w-96 rounded-lg border border-white/10 shadow-2xl">
+          <PopoverContent className="border-fm-divider-secondary w-96 rounded-lg border shadow-2xl">
             <PopoverArrow className="fill-white/10" />
             <div className="space-y-4 p-4">
               {/* Header */}
               <div className="flex items-center justify-between">
-                <h4 className="font-medium text-white">Edit Profile</h4>
+                <h4 className="text-fm-primary font-medium">Edit Profile</h4>
                 <PopoverClose asChild>
                   <Button variant="text" size="sm">
                     ✕
@@ -964,32 +990,32 @@ export const CompleteIntegration: Story = {
               {/* Form Fields */}
               <div className="space-y-3">
                 <div>
-                  <Label htmlFor="name" className="text-sm text-white/90">
+                  <Label htmlFor="name" className="text-fm-primary text-sm">
                     Full Name
                   </Label>
                   <Input
                     id="name"
                     defaultValue="John Doe"
-                    className="border-white/20 bg-white/5 text-white placeholder:text-white/40"
+                    className="border-fm-divider-secondary bg-fm-surface-secondary text-fm-primary placeholder:text-fm-tertiary"
                   />
                 </div>
                 <div>
-                  <Label htmlFor="email" className="text-sm text-white/90">
+                  <Label htmlFor="email" className="text-fm-primary text-sm">
                     Email
                   </Label>
                   <Input
                     id="email"
                     defaultValue="john@example.com"
-                    className="border-white/20 bg-white/5 text-white placeholder:text-white/40"
+                    className="border-fm-divider-secondary bg-fm-surface-secondary text-fm-primary placeholder:text-fm-tertiary"
                   />
                 </div>
                 <div>
-                  <Label htmlFor="role" className="text-sm text-white/90">
+                  <Label htmlFor="role" className="text-fm-primary text-sm">
                     Role
                   </Label>
                   <select
                     id="role"
-                    className="w-full rounded-md border border-white/20 bg-white/5 px-3 py-2 text-sm text-white focus-visible:ring-2 focus-visible:ring-white/20 focus-visible:outline-none"
+                    className="border-fm-divider-secondary bg-fm-surface-secondary text-fm-primary focus-visible:ring-fm-divider-secondary w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none"
                   >
                     <option value="developer">Developer</option>
                     <option value="designer">Designer</option>
@@ -997,13 +1023,13 @@ export const CompleteIntegration: Story = {
                   </select>
                 </div>
                 <div>
-                  <Label htmlFor="bio" className="text-sm text-white/90">
+                  <Label htmlFor="bio" className="text-fm-primary text-sm">
                     Bio
                   </Label>
                   <textarea
                     id="bio"
                     rows={3}
-                    className="w-full rounded-md border border-white/20 bg-white/5 px-3 py-2 text-sm text-white placeholder:text-white/40 focus-visible:ring-2 focus-visible:ring-white/20 focus-visible:outline-none"
+                    className="border-fm-divider-secondary bg-fm-surface-secondary text-fm-primary placeholder:text-fm-tertiary focus-visible:ring-fm-divider-secondary w-full rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none"
                     defaultValue="Software developer passionate about creating great user experiences."
                   />
                 </div>