aural-ui 3.0.7 → 4.0.1

package/dist/components/tooltip/Tooltip.stories.tsx

@@ -242,7 +242,7 @@ export const VariantComparison: Story = {
   render: () => (
     <div className="grid grid-cols-1 gap-8 p-8 lg:grid-cols-2">
       <div className="space-y-4">
-        <h3 className="text-center text-lg font-medium text-white">
+        <h3 className="text-fm-primary text-center text-lg font-medium">
           Dark Variant (Default)
         </h3>
         <div className="flex justify-center">
@@ -258,7 +258,7 @@ export const VariantComparison: Story = {
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-center text-lg font-medium text-white">
+        <h3 className="text-fm-primary text-center text-lg font-medium">
           Light Variant
         </h3>
         <div className="flex justify-center">
@@ -288,18 +288,20 @@ export const VariantComparison: Story = {
 export const CompletePositioningMatrix: Story = {
   render: () => (
     <div className="space-y-12 p-12">
-      <h3 className="text-center text-xl font-medium text-white">
+      <h3 className="text-fm-primary text-center text-xl font-medium">
         Complete Positioning Matrix - All Combinations
       </h3>
 
       {/* Top Side - All Alignments */}
       <div className="space-y-6">
-        <h4 className="text-center text-lg font-medium text-white/80">
+        <h4 className="text-fm-tertiary text-center text-lg font-medium">
           Top Side Tooltips
         </h4>
         <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
           <div className="flex flex-col items-center gap-4">
-            <span className="text-sm text-white/60">Top + Start (Dark)</span>
+            <span className="text-fm-secondary text-sm">
+              Top + Start (Dark)
+            </span>
             <Tooltip variant="dark">
               <TooltipTrigger asChild>
                 <Button variant="outline" size="lg">
@@ -313,7 +315,9 @@ export const CompletePositioningMatrix: Story = {
           </div>
 
           <div className="flex flex-col items-center gap-4">
-            <span className="text-sm text-white/60">Top + Center (Light)</span>
+            <span className="text-fm-secondary text-sm">
+              Top + Center (Light)
+            </span>
             <Tooltip variant="light">
               <TooltipTrigger asChild>
                 <Button variant="outline" size="lg">
@@ -329,7 +333,7 @@ export const CompletePositioningMatrix: Story = {
           </div>
 
           <div className="flex flex-col items-center gap-4">
-            <span className="text-sm text-white/60">Top + End (Dark)</span>
+            <span className="text-fm-secondary text-sm">Top + End (Dark)</span>
             <Tooltip variant="dark">
               <TooltipTrigger asChild>
                 <Button variant="outline" size="lg">
@@ -346,12 +350,12 @@ export const CompletePositioningMatrix: Story = {
 
       {/* Right & Left Side */}
       <div className="space-y-6">
-        <h4 className="text-center text-lg font-medium text-white/80">
+        <h4 className="text-fm-tertiary text-center text-lg font-medium">
           Left & Right Side Tooltips
         </h4>
         <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
           <div className="flex flex-col items-center gap-4">
-            <span className="text-sm text-white/60">Left Side (Light)</span>
+            <span className="text-fm-secondary text-sm">Left Side (Light)</span>
             <Tooltip variant="light">
               <TooltipTrigger asChild>
                 <Button variant="outline" size="lg">
@@ -365,7 +369,7 @@ export const CompletePositioningMatrix: Story = {
           </div>
 
           <div className="flex flex-col items-center gap-4">
-            <span className="text-sm text-white/60">Right Side (Dark)</span>
+            <span className="text-fm-secondary text-sm">Right Side (Dark)</span>
             <Tooltip variant="dark">
               <TooltipTrigger asChild>
                 <Button variant="outline" size="lg">
@@ -382,12 +386,12 @@ export const CompletePositioningMatrix: Story = {
 
       {/* Bottom Side - All Alignments */}
       <div className="space-y-6">
-        <h4 className="text-center text-lg font-medium text-white/80">
+        <h4 className="text-fm-tertiary text-center text-lg font-medium">
           Bottom Side Tooltips
         </h4>
         <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
           <div className="flex flex-col items-center gap-4">
-            <span className="text-sm text-white/60">
+            <span className="text-fm-secondary text-sm">
               Bottom + Start (Light)
             </span>
             <Tooltip variant="light">
@@ -403,7 +407,7 @@ export const CompletePositioningMatrix: Story = {
           </div>
 
           <div className="flex flex-col items-center gap-4">
-            <span className="text-sm text-white/60">
+            <span className="text-fm-secondary text-sm">
               Bottom + Center (Dark)
             </span>
             <Tooltip variant="dark">
@@ -421,7 +425,9 @@ export const CompletePositioningMatrix: Story = {
           </div>
 
           <div className="flex flex-col items-center gap-4">
-            <span className="text-sm text-white/60">Bottom + End (Light)</span>
+            <span className="text-fm-secondary text-sm">
+              Bottom + End (Light)
+            </span>
             <Tooltip variant="light">
               <TooltipTrigger asChild>
                 <Button variant="outline" size="lg">
@@ -436,7 +442,7 @@ export const CompletePositioningMatrix: Story = {
         </div>
       </div>
 
-      <div className="space-y-2 text-center text-xs text-white/60">
+      <div className="text-fm-secondary space-y-2 text-center text-xs">
         <p>
           All 8 positioning combinations shown with unique gradient backgrounds
         </p>
@@ -466,13 +472,13 @@ export const CompletePositioningMatrix: Story = {
 export const OffsetVariations: 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">
         Side Offset Variations
       </h3>
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-4">
         <div className="flex flex-col items-center gap-4">
-          <span className="text-sm text-white/60">No Offset (0px)</span>
+          <span className="text-fm-secondary text-sm">No Offset (0px)</span>
           <Tooltip variant="dark">
             <TooltipTrigger asChild>
               <Button variant="outline">No Gap</Button>
@@ -484,7 +490,7 @@ export const OffsetVariations: Story = {
         </div>
 
         <div className="flex flex-col items-center gap-4">
-          <span className="text-sm text-white/60">Small Offset (4px)</span>
+          <span className="text-fm-secondary text-sm">Small Offset (4px)</span>
           <Tooltip variant="light">
             <TooltipTrigger asChild>
               <Button variant="outline">Small Gap</Button>
@@ -496,7 +502,7 @@ export const OffsetVariations: Story = {
         </div>
 
         <div className="flex flex-col items-center gap-4">
-          <span className="text-sm text-white/60">Medium Offset (8px)</span>
+          <span className="text-fm-secondary text-sm">Medium Offset (8px)</span>
           <Tooltip variant="dark">
             <TooltipTrigger asChild>
               <Button variant="outline">Medium Gap</Button>
@@ -508,7 +514,7 @@ export const OffsetVariations: Story = {
         </div>
 
         <div className="flex flex-col items-center gap-4">
-          <span className="text-sm text-white/60">Large Offset (16px)</span>
+          <span className="text-fm-secondary text-sm">Large Offset (16px)</span>
           <Tooltip variant="light">
             <TooltipTrigger asChild>
               <Button variant="outline">Large Gap</Button>
@@ -520,7 +526,7 @@ export const OffsetVariations: Story = {
         </div>
       </div>
 
-      <div className="text-center text-xs text-white/60">
+      <div className="text-fm-secondary text-center text-xs">
         <p>
           Side offset controls the distance between tooltip and trigger element
         </p>
@@ -541,14 +547,14 @@ export const OffsetVariations: Story = {
 export const ContentVariations: 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">
         Content Variations with Gradient Backgrounds
       </h3>
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
         {/* Short Text */}
         <div className="flex flex-col items-center gap-4">
-          <span className="text-sm text-white/60">Short Text (Dark)</span>
+          <span className="text-fm-secondary text-sm">Short Text (Dark)</span>
           <Tooltip variant="dark">
             <TooltipTrigger asChild>
               <Button variant="outline">Save</Button>
@@ -561,7 +567,7 @@ export const ContentVariations: Story = {
 
         {/* Long Text */}
         <div className="flex flex-col items-center gap-4">
-          <span className="text-sm text-white/60">Long Text (Light)</span>
+          <span className="text-fm-secondary text-sm">Long Text (Light)</span>
           <Tooltip variant="light">
             <TooltipTrigger asChild>
               <Button variant="outline">Learn More</Button>
@@ -577,7 +583,7 @@ export const ContentVariations: Story = {
 
         {/* Rich Content - Dark */}
         <div className="flex flex-col items-center gap-4">
-          <span className="text-sm text-white/60">Rich Content (Dark)</span>
+          <span className="text-fm-secondary text-sm">Rich Content (Dark)</span>
           <Tooltip variant="dark">
             <TooltipTrigger asChild>
               <Button variant="outline">
@@ -586,10 +592,12 @@ export const ContentVariations: Story = {
             </TooltipTrigger>
             <TooltipContent className="max-w-sm" side="right">
               <div className="space-y-2">
-                <div className="font-medium text-white">Keyboard Shortcut</div>
-                <div className="text-xs text-white/80">
+                <div className="text-fm-primary font-medium">
+                  Keyboard Shortcut
+                </div>
+                <div className="text-fm-tertiary text-xs">
                   Use{" "}
-                  <kbd className="rounded bg-white/20 px-1 py-0.5 text-xs">
+                  <kbd className="bg-fm-surface-tertiary rounded px-1 py-0.5 text-xs">
                     Ctrl+S
                   </kbd>{" "}
                   to save your work quickly.
@@ -601,7 +609,9 @@ export const ContentVariations: Story = {
 
         {/* List Content - Light */}
         <div className="flex flex-col items-center gap-4">
-          <span className="text-sm text-white/60">List Content (Light)</span>
+          <span className="text-fm-secondary text-sm">
+            List Content (Light)
+          </span>
           <Tooltip variant="light">
             <TooltipTrigger asChild>
               <Button variant="outline">
@@ -646,14 +656,14 @@ export const ContentVariations: Story = {
 export const DelayVariations: 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">
         Delay Variations with TooltipProvider
       </h3>
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
         {/* No Delay */}
         <div className="flex flex-col items-center gap-4">
-          <span className="text-sm text-white/60">No Delay (0ms)</span>
+          <span className="text-fm-secondary text-sm">No Delay (0ms)</span>
           <TooltipProvider delayDuration={0}>
             <Tooltip variant="dark">
               <TooltipTrigger asChild>
@@ -668,7 +678,9 @@ export const DelayVariations: Story = {
 
         {/* Medium Delay */}
         <div className="flex flex-col items-center gap-4">
-          <span className="text-sm text-white/60">Medium Delay (500ms)</span>
+          <span className="text-fm-secondary text-sm">
+            Medium Delay (500ms)
+          </span>
           <TooltipProvider delayDuration={500}>
             <Tooltip variant="light">
               <TooltipTrigger asChild>
@@ -683,7 +695,7 @@ export const DelayVariations: Story = {
 
         {/* Long Delay */}
         <div className="flex flex-col items-center gap-4">
-          <span className="text-sm text-white/60">Long Delay (1000ms)</span>
+          <span className="text-fm-secondary text-sm">Long Delay (1000ms)</span>
           <TooltipProvider delayDuration={1000}>
             <Tooltip variant="dark">
               <TooltipTrigger asChild>
@@ -697,7 +709,7 @@ export const DelayVariations: Story = {
         </div>
       </div>
 
-      <div className="text-center text-xs text-white/60">
+      <div className="text-fm-secondary text-center text-xs">
         <p>Hover over each button to experience different delay timings</p>
       </div>
     </div>
@@ -716,17 +728,17 @@ export const DelayVariations: Story = {
 export const IconTooltipsShowcase: 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">
         Icon Tooltips with Gradient Styling
       </h3>
 
       <div className="grid grid-cols-2 gap-8 lg:grid-cols-4">
         <div className="flex flex-col items-center gap-4">
-          <span className="text-sm text-white/60">Info (Dark)</span>
+          <span className="text-fm-secondary text-sm">Info (Dark)</span>
           <Tooltip variant="dark">
             <TooltipTrigger asChild>
-              <button className="rounded-full p-3 transition-colors hover:bg-white/10">
-                <AlertIcon className="h-6 w-6 text-blue-400" />
+              <button className="hover:bg-fm-surface-secondary rounded-full p-3 transition-colors">
+                <AlertIcon className="text-fm-icon-info h-6 w-6" />
               </button>
             </TooltipTrigger>
             <TooltipContent side="top" align="center">
@@ -736,11 +748,11 @@ export const IconTooltipsShowcase: Story = {
         </div>
 
         <div className="flex flex-col items-center gap-4">
-          <span className="text-sm text-white/60">Search (Light)</span>
+          <span className="text-fm-secondary text-sm">Search (Light)</span>
           <Tooltip variant="light">
             <TooltipTrigger asChild>
-              <button className="rounded-full p-3 transition-colors hover:bg-white/10">
-                <SearchIcon className="h-6 w-6 text-green-400" />
+              <button className="hover:bg-fm-surface-secondary rounded-full p-3 transition-colors">
+                <SearchIcon className="text-fm-icon-positive h-6 w-6" />
               </button>
             </TooltipTrigger>
             <TooltipContent side="top" align="center">
@@ -750,11 +762,11 @@ export const IconTooltipsShowcase: Story = {
         </div>
 
         <div className="flex flex-col items-center gap-4">
-          <span className="text-sm text-white/60">Edit (Dark)</span>
+          <span className="text-fm-secondary text-sm">Edit (Dark)</span>
           <Tooltip variant="dark">
             <TooltipTrigger asChild>
-              <button className="rounded-full p-3 transition-colors hover:bg-white/10">
-                <EditBigIcon className="h-6 w-6 text-purple-400" />
+              <button className="hover:bg-fm-surface-secondary rounded-full p-3 transition-colors">
+                <EditBigIcon className="text-fm-icon-brand-secondary h-6 w-6" />
               </button>
             </TooltipTrigger>
             <TooltipContent side="top" align="center">
@@ -764,11 +776,11 @@ export const IconTooltipsShowcase: Story = {
         </div>
 
         <div className="flex flex-col items-center gap-4">
-          <span className="text-sm text-white/60">Delete (Light)</span>
+          <span className="text-fm-secondary text-sm">Delete (Light)</span>
           <Tooltip variant="light">
             <TooltipTrigger asChild>
-              <button className="rounded-full p-3 transition-colors hover:bg-white/10">
-                <TrashIcon className="h-6 w-6 text-red-400" />
+              <button className="hover:bg-fm-surface-secondary rounded-full p-3 transition-colors">
+                <TrashIcon className="text-fm-icon-negative h-6 w-6" />
               </button>
             </TooltipTrigger>
             <TooltipContent side="top" align="center">
@@ -793,30 +805,30 @@ export const IconTooltipsShowcase: Story = {
 export const AdvancedToolbarExample: 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">
         Advanced Toolbar with Mixed Variants & Positioning
       </h3>
 
       <div className="flex items-center justify-center">
-        <div className="flex items-center gap-1 rounded-lg border border-white/10 bg-white/5 p-2">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-center gap-1 rounded-lg border p-2">
           <Tooltip variant="dark">
             <TooltipTrigger asChild>
-              <button className="rounded p-2 transition-colors hover:bg-white/10">
-                <EditBigIcon className="h-5 w-5 text-white/70" />
+              <button className="hover:bg-fm-surface-secondary rounded p-2 transition-colors">
+                <EditBigIcon className="text-fm-secondary h-5 w-5" />
               </button>
             </TooltipTrigger>
             <TooltipContent side="top" align="start">
               <div className="space-y-1">
                 <p>Edit</p>
-                <p className="text-xs text-white/60">Ctrl+E</p>
+                <p className="text-fm-secondary text-xs">Ctrl+E</p>
               </div>
             </TooltipContent>
           </Tooltip>
 
           <Tooltip variant="light">
             <TooltipTrigger asChild>
-              <button className="rounded p-2 transition-colors hover:bg-white/10">
-                <SearchIcon className="h-5 w-5 text-white/70" />
+              <button className="hover:bg-fm-surface-secondary rounded p-2 transition-colors">
+                <SearchIcon className="text-fm-secondary h-5 w-5" />
               </button>
             </TooltipTrigger>
             <TooltipContent side="top" align="center">
@@ -829,22 +841,22 @@ export const AdvancedToolbarExample: Story = {
 
           <Tooltip variant="dark">
             <TooltipTrigger asChild>
-              <button className="rounded p-2 transition-colors hover:bg-white/10">
-                <PlusIcon className="h-5 w-5 text-white/70" />
+              <button className="hover:bg-fm-surface-secondary rounded p-2 transition-colors">
+                <PlusIcon className="text-fm-secondary h-5 w-5" />
               </button>
             </TooltipTrigger>
             <TooltipContent side="top" align="center">
               <div className="space-y-1">
                 <p>Add New</p>
-                <p className="text-xs text-white/60">Ctrl+N</p>
+                <p className="text-fm-secondary text-xs">Ctrl+N</p>
               </div>
             </TooltipContent>
           </Tooltip>
 
           <Tooltip variant="light">
             <TooltipTrigger asChild>
-              <button className="rounded p-2 transition-colors hover:bg-white/10">
-                <FileChartIcon className="h-5 w-5 text-white/70" />
+              <button className="hover:bg-fm-surface-secondary rounded p-2 transition-colors">
+                <FileChartIcon className="text-fm-secondary h-5 w-5" />
               </button>
             </TooltipTrigger>
             <TooltipContent side="top" align="center">
@@ -857,21 +869,21 @@ export const AdvancedToolbarExample: Story = {
 
           <Tooltip variant="dark">
             <TooltipTrigger asChild>
-              <button className="rounded p-2 transition-colors hover:bg-white/10">
-                <TrashIcon className="h-5 w-5 text-white/70" />
+              <button className="hover:bg-fm-surface-secondary rounded p-2 transition-colors">
+                <TrashIcon className="text-fm-secondary h-5 w-5" />
               </button>
             </TooltipTrigger>
             <TooltipContent side="top" align="end">
               <div className="space-y-1">
                 <p>Delete</p>
-                <p className="text-xs text-white/60">Del</p>
+                <p className="text-fm-secondary text-xs">Del</p>
               </div>
             </TooltipContent>
           </Tooltip>
         </div>
       </div>
 
-      <div className="text-center text-xs text-white/60">
+      <div className="text-fm-secondary text-center text-xs">
         <p>
           Each tooltip uses different variants and alignments for demonstration
         </p>
@@ -896,27 +908,27 @@ export const InteractiveStates: 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 States with Dynamic Variants
         </h3>
 
         <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
           {/* Stateful Tooltips */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/70">
+            <h4 className="text-fm-secondary text-sm font-medium">
               State-Based Variants
             </h4>
             <div className="flex gap-4">
               <Tooltip variant={showPassword ? "light" : "dark"}>
                 <TooltipTrigger asChild>
                   <button
-                    className="rounded-full p-3 transition-colors hover:bg-white/10"
+                    className="hover:bg-fm-surface-secondary rounded-full p-3 transition-colors"
                     onClick={() => setShowPassword(!showPassword)}
                   >
                     {showPassword ? (
-                      <EyeCloseIcon className="h-6 w-6 text-blue-400" />
+                      <EyeCloseIcon className="text-fm-icon-info h-6 w-6" />
                     ) : (
-                      <EyeOpenIcon className="h-6 w-6 text-white/50" />
+                      <EyeOpenIcon className="text-fm-tertiary h-6 w-6" />
                     )}
                   </button>
                 </TooltipTrigger>
@@ -928,11 +940,11 @@ export const InteractiveStates: Story = {
               <Tooltip variant={isCompleted ? "light" : "dark"}>
                 <TooltipTrigger asChild>
                   <button
-                    className="rounded-full p-3 transition-colors hover:bg-white/10"
+                    className="hover:bg-fm-surface-secondary rounded-full p-3 transition-colors"
                     onClick={() => setIsCompleted(!isCompleted)}
                   >
                     <TickCircleIcon
-                      className={`h-6 w-6 ${isCompleted ? "text-green-400" : "text-white/50"}`}
+                      className={`h-6 w-6 ${isCompleted ? "text-fm-icon-positive" : "text-fm-tertiary"}`}
                     />
                   </button>
                 </TooltipTrigger>
@@ -943,14 +955,14 @@ export const InteractiveStates: Story = {
                 </TooltipContent>
               </Tooltip>
             </div>
-            <div className="text-xs text-white/60">
+            <div className="text-fm-secondary text-xs">
               <p>Tooltip variants change based on component state</p>
             </div>
           </div>
 
           {/* Complex Content */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/70">
+            <h4 className="text-fm-secondary text-sm font-medium">
               Complex Content Example
             </h4>
             <Tooltip variant="light">
@@ -971,7 +983,7 @@ export const InteractiveStates: Story = {
                 </div>
               </TooltipContent>
             </Tooltip>
-            <div className="text-xs text-white/60">
+            <div className="text-fm-secondary text-xs">
               <p>Complex tooltip content with gradient backgrounds</p>
             </div>
           </div>
@@ -993,37 +1005,37 @@ export const InteractiveStates: Story = {
 export const CompleteShowcase: Story = {
   render: () => (
     <div className="space-y-12 p-8">
-      <h3 className="text-center text-xl font-medium text-white">
+      <h3 className="text-fm-primary text-center text-xl font-medium">
         Complete Tooltip System Showcase
       </h3>
 
       {/* Status Indicators */}
       <div className="space-y-4">
-        <h4 className="text-sm font-medium text-white/70">
+        <h4 className="text-fm-secondary text-sm font-medium">
           Status Indicators with Positioning
         </h4>
         <div className="flex gap-6">
           <div className="flex items-center gap-2">
             <Tooltip variant="dark">
               <TooltipTrigger asChild>
-                <div className="h-3 w-3 cursor-help rounded-full bg-green-500"></div>
+                <div className="bg-fm-surface-positive h-3 w-3 cursor-help rounded-full"></div>
               </TooltipTrigger>
               <TooltipContent side="top" align="start">
                 <div className="space-y-1">
-                  <div className="font-medium text-white">Online</div>
-                  <div className="text-xs text-white/80">
+                  <div className="text-fm-primary font-medium">Online</div>
+                  <div className="text-fm-tertiary text-xs">
                     Last seen: Just now
                   </div>
                 </div>
               </TooltipContent>
             </Tooltip>
-            <span className="text-sm text-white">Active User</span>
+            <span className="text-fm-primary text-sm">Active User</span>
           </div>
 
           <div className="flex items-center gap-2">
             <Tooltip variant="light">
               <TooltipTrigger asChild>
-                <div className="h-3 w-3 cursor-help rounded-full bg-yellow-500"></div>
+                <div className="bg-fm-surface-warning h-3 w-3 cursor-help rounded-full"></div>
               </TooltipTrigger>
               <TooltipContent side="top" align="center">
                 <div className="space-y-1">
@@ -1034,31 +1046,31 @@ export const CompleteShowcase: Story = {
                 </div>
               </TooltipContent>
             </Tooltip>
-            <span className="text-sm text-white">Away User</span>
+            <span className="text-fm-primary text-sm">Away User</span>
           </div>
 
           <div className="flex items-center gap-2">
             <Tooltip variant="dark">
               <TooltipTrigger asChild>
-                <div className="h-3 w-3 cursor-help rounded-full bg-gray-500"></div>
+                <div className="bg-fm-surface-secondary h-3 w-3 cursor-help rounded-full"></div>
               </TooltipTrigger>
               <TooltipContent side="top" align="end">
                 <div className="space-y-1">
-                  <div className="font-medium text-white">Offline</div>
-                  <div className="text-xs text-white/80">
+                  <div className="text-fm-primary font-medium">Offline</div>
+                  <div className="text-fm-tertiary text-xs">
                     Last seen: 2 hours ago
                   </div>
                 </div>
               </TooltipContent>
             </Tooltip>
-            <span className="text-sm text-white">Offline User</span>
+            <span className="text-fm-primary text-sm">Offline User</span>
           </div>
         </div>
       </div>
 
       {/* Data Metrics */}
       <div className="space-y-4">
-        <h4 className="text-sm font-medium text-white/70">
+        <h4 className="text-fm-secondary text-sm font-medium">
           Data Metrics with Various Positioning
         </h4>
         <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
@@ -1102,11 +1114,13 @@ export const CompleteShowcase: Story = {
           ].map((metric, index) => (
             <Tooltip key={index} variant={metric.variant}>
               <TooltipTrigger asChild>
-                <div className="cursor-help rounded-lg border border-white/10 bg-white/5 p-4 transition-colors hover:bg-white/10">
-                  <div className="text-2xl font-bold text-white">
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary hover:bg-fm-surface-secondary cursor-help rounded-lg border p-4 transition-colors">
+                  <div className="text-fm-primary text-2xl font-bold">
                     {metric.value}
                   </div>
-                  <div className="text-sm text-white/70">{metric.label}</div>
+                  <div className="text-fm-secondary text-sm">
+                    {metric.label}
+                  </div>
                 </div>
               </TooltipTrigger>
               <TooltipContent side={metric.side} align={metric.align}>
@@ -1117,11 +1131,11 @@ export const CompleteShowcase: Story = {
                       className={
                         metric.change.startsWith("+")
                           ? metric.variant === "dark"
-                            ? "text-green-400"
-                            : "text-green-600"
+                            ? "text-fm-icon-positive"
+                            : "text-fm-icon-positive"
                           : metric.variant === "dark"
-                            ? "text-red-400"
-                            : "text-red-600"
+                            ? "text-fm-icon-negative"
+                            : "text-fm-icon-negative"
                       }
                     >
                       {metric.change}
@@ -1129,7 +1143,7 @@ export const CompleteShowcase: Story = {
                     <span
                       className={
                         metric.variant === "dark"
-                          ? "text-white/60"
+                          ? "text-fm-secondary"
                           : "opacity-70"
                       }
                     >
@@ -1144,7 +1158,7 @@ export const CompleteShowcase: Story = {
         </div>
       </div>
 
-      <div className="space-y-1 text-center text-xs text-white/60">
+      <div className="text-fm-secondary space-y-1 text-center text-xs">
         <p>
           Complete demonstration of the tooltip system with gradient backgrounds
         </p>
@@ -1172,32 +1186,32 @@ export const CompleteShowcase: Story = {
 export const AllCombinationsMatrix: Story = {
   render: () => (
     <div className="min-h-screen space-y-16 p-12">
-      <h3 className="text-center text-2xl font-bold text-white">
+      <h3 className="text-fm-primary text-center text-2xl font-bold">
         Complete Tooltip Matrix - All Combinations
       </h3>
-      <p className="text-center text-white/70">
+      <p className="text-fm-secondary text-center">
         Every possible combination of side, align, and variant
       </p>
 
       {/* Dark Variant - All Combinations */}
       <div className="space-y-8">
-        <h4 className="text-center text-xl font-semibold text-purple-300">
+        <h4 className="text-fm-icon-brand-secondary text-center text-xl font-semibold">
           Dark Variant - All Sides & Alignments
         </h4>
 
         {/* Top Side - Dark */}
         <div className="space-y-4">
-          <h5 className="text-center text-lg font-medium text-white/80">
+          <h5 className="text-fm-tertiary text-center text-lg font-medium">
             Top Side (Dark)
           </h5>
           <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/60">
+              <span className="text-fm-secondary text-sm">
                 side="top" align="start"
               </span>
               <Tooltip variant="dark">
                 <TooltipTrigger asChild>
-                  <div className="rounded-lg border border-purple-500/30 bg-purple-900/20 px-6 py-3 text-white">
+                  <div className="text-fm-primary rounded-lg border border-purple-500/30 bg-purple-900/20 px-6 py-3">
                     Top Start
                   </div>
                 </TooltipTrigger>
@@ -1208,12 +1222,12 @@ export const AllCombinationsMatrix: Story = {
             </div>
 
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/60">
+              <span className="text-fm-secondary text-sm">
                 side="top" align="center"
               </span>
               <Tooltip variant="dark">
                 <TooltipTrigger asChild>
-                  <div className="rounded-lg border border-purple-500/30 bg-purple-900/20 px-6 py-3 text-white">
+                  <div className="text-fm-primary rounded-lg border border-purple-500/30 bg-purple-900/20 px-6 py-3">
                     Top Center
                   </div>
                 </TooltipTrigger>
@@ -1224,12 +1238,12 @@ export const AllCombinationsMatrix: Story = {
             </div>
 
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/60">
+              <span className="text-fm-secondary text-sm">
                 side="top" align="end"
               </span>
               <Tooltip variant="dark">
                 <TooltipTrigger asChild>
-                  <div className="rounded-lg border border-purple-500/30 bg-purple-900/20 px-6 py-3 text-white">
+                  <div className="text-fm-primary rounded-lg border border-purple-500/30 bg-purple-900/20 px-6 py-3">
                     Top End
                   </div>
                 </TooltipTrigger>
@@ -1243,15 +1257,15 @@ export const AllCombinationsMatrix: Story = {
 
         {/* Right & Left Side - Dark */}
         <div className="space-y-4">
-          <h5 className="text-center text-lg font-medium text-white/80">
+          <h5 className="text-fm-tertiary text-center text-lg font-medium">
             Right & Left Sides (Dark)
           </h5>
           <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/60">side="right"</span>
+              <span className="text-fm-secondary text-sm">side="right"</span>
               <Tooltip variant="dark">
                 <TooltipTrigger asChild>
-                  <div className="rounded-lg border border-purple-500/30 bg-purple-900/20 px-6 py-3 text-white">
+                  <div className="text-fm-primary rounded-lg border border-purple-500/30 bg-purple-900/20 px-6 py-3">
                     Right Side
                   </div>
                 </TooltipTrigger>
@@ -1262,10 +1276,10 @@ export const AllCombinationsMatrix: Story = {
             </div>
 
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/60">side="left"</span>
+              <span className="text-fm-secondary text-sm">side="left"</span>
               <Tooltip variant="dark">
                 <TooltipTrigger asChild>
-                  <div className="rounded-lg border border-purple-500/30 bg-purple-900/20 px-6 py-3 text-white">
+                  <div className="text-fm-primary rounded-lg border border-purple-500/30 bg-purple-900/20 px-6 py-3">
                     Left Side
                   </div>
                 </TooltipTrigger>
@@ -1279,17 +1293,17 @@ export const AllCombinationsMatrix: Story = {
 
         {/* Bottom Side - Dark */}
         <div className="space-y-4">
-          <h5 className="text-center text-lg font-medium text-white/80">
+          <h5 className="text-fm-tertiary text-center text-lg font-medium">
             Bottom Side (Dark)
           </h5>
           <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/60">
+              <span className="text-fm-secondary text-sm">
                 side="bottom" align="start"
               </span>
               <Tooltip variant="dark">
                 <TooltipTrigger asChild>
-                  <div className="rounded-lg border border-purple-500/30 bg-purple-900/20 px-6 py-3 text-white">
+                  <div className="text-fm-primary rounded-lg border border-purple-500/30 bg-purple-900/20 px-6 py-3">
                     Bottom Start
                   </div>
                 </TooltipTrigger>
@@ -1300,12 +1314,12 @@ export const AllCombinationsMatrix: Story = {
             </div>
 
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/60">
+              <span className="text-fm-secondary text-sm">
                 side="bottom" align="center"
               </span>
               <Tooltip variant="dark">
                 <TooltipTrigger asChild>
-                  <div className="rounded-lg border border-purple-500/30 bg-purple-900/20 px-6 py-3 text-white">
+                  <div className="text-fm-primary rounded-lg border border-purple-500/30 bg-purple-900/20 px-6 py-3">
                     Bottom Center
                   </div>
                 </TooltipTrigger>
@@ -1316,12 +1330,12 @@ export const AllCombinationsMatrix: Story = {
             </div>
 
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/60">
+              <span className="text-fm-secondary text-sm">
                 side="bottom" align="end"
               </span>
               <Tooltip variant="dark">
                 <TooltipTrigger asChild>
-                  <div className="rounded-lg border border-purple-500/30 bg-purple-900/20 px-6 py-3 text-white">
+                  <div className="text-fm-primary rounded-lg border border-purple-500/30 bg-purple-900/20 px-6 py-3">
                     Bottom End
                   </div>
                 </TooltipTrigger>
@@ -1336,23 +1350,23 @@ export const AllCombinationsMatrix: Story = {
 
       {/* Light Variant - All Combinations */}
       <div className="space-y-8">
-        <h4 className="text-center text-xl font-semibold text-purple-300">
+        <h4 className="text-fm-icon-brand-secondary text-center text-xl font-semibold">
           Light Variant - All Sides & Alignments
         </h4>
 
         {/* Top Side - Light */}
         <div className="space-y-4">
-          <h5 className="text-center text-lg font-medium text-white/80">
+          <h5 className="text-fm-tertiary text-center text-lg font-medium">
             Top Side (Light)
           </h5>
           <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/60">
+              <span className="text-fm-secondary text-sm">
                 side="top" align="start"
               </span>
               <Tooltip variant="light">
                 <TooltipTrigger asChild>
-                  <div className="rounded-lg border border-purple-300/50 bg-purple-100/10 px-6 py-3 text-white">
+                  <div className="text-fm-primary rounded-lg border border-purple-300/50 bg-purple-100/10 px-6 py-3">
                     Top Start
                   </div>
                 </TooltipTrigger>
@@ -1363,12 +1377,12 @@ export const AllCombinationsMatrix: Story = {
             </div>
 
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/60">
+              <span className="text-fm-secondary text-sm">
                 side="top" align="center"
               </span>
               <Tooltip variant="light">
                 <TooltipTrigger asChild>
-                  <div className="rounded-lg border border-purple-300/50 bg-purple-100/10 px-6 py-3 text-white">
+                  <div className="text-fm-primary rounded-lg border border-purple-300/50 bg-purple-100/10 px-6 py-3">
                     Top Center
                   </div>
                 </TooltipTrigger>
@@ -1379,12 +1393,12 @@ export const AllCombinationsMatrix: Story = {
             </div>
 
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/60">
+              <span className="text-fm-secondary text-sm">
                 side="top" align="end"
               </span>
               <Tooltip variant="light">
                 <TooltipTrigger asChild>
-                  <div className="rounded-lg border border-purple-300/50 bg-purple-100/10 px-6 py-3 text-white">
+                  <div className="text-fm-primary rounded-lg border border-purple-300/50 bg-purple-100/10 px-6 py-3">
                     Top End
                   </div>
                 </TooltipTrigger>
@@ -1398,15 +1412,15 @@ export const AllCombinationsMatrix: Story = {
 
         {/* Right & Left Side - Light */}
         <div className="space-y-4">
-          <h5 className="text-center text-lg font-medium text-white/80">
+          <h5 className="text-fm-tertiary text-center text-lg font-medium">
             Right & Left Sides (Light)
           </h5>
           <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/60">side="right"</span>
+              <span className="text-fm-secondary text-sm">side="right"</span>
               <Tooltip variant="light">
                 <TooltipTrigger asChild>
-                  <div className="rounded-lg border border-purple-300/50 bg-purple-100/10 px-6 py-3 text-white">
+                  <div className="text-fm-primary rounded-lg border border-purple-300/50 bg-purple-100/10 px-6 py-3">
                     Right Side
                   </div>
                 </TooltipTrigger>
@@ -1417,10 +1431,10 @@ export const AllCombinationsMatrix: Story = {
             </div>
 
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/60">side="left"</span>
+              <span className="text-fm-secondary text-sm">side="left"</span>
               <Tooltip variant="light">
                 <TooltipTrigger asChild>
-                  <div className="rounded-lg border border-purple-300/50 bg-purple-100/10 px-6 py-3 text-white">
+                  <div className="text-fm-primary rounded-lg border border-purple-300/50 bg-purple-100/10 px-6 py-3">
                     Left Side
                   </div>
                 </TooltipTrigger>
@@ -1434,17 +1448,17 @@ export const AllCombinationsMatrix: Story = {
 
         {/* Bottom Side - Light */}
         <div className="space-y-4">
-          <h5 className="text-center text-lg font-medium text-white/80">
+          <h5 className="text-fm-tertiary text-center text-lg font-medium">
             Bottom Side (Light)
           </h5>
           <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/60">
+              <span className="text-fm-secondary text-sm">
                 side="bottom" align="start"
               </span>
               <Tooltip variant="light">
                 <TooltipTrigger asChild>
-                  <div className="rounded-lg border border-purple-300/50 bg-purple-100/10 px-6 py-3 text-white">
+                  <div className="text-fm-primary rounded-lg border border-purple-300/50 bg-purple-100/10 px-6 py-3">
                     Bottom Start
                   </div>
                 </TooltipTrigger>
@@ -1455,12 +1469,12 @@ export const AllCombinationsMatrix: Story = {
             </div>
 
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/60">
+              <span className="text-fm-secondary text-sm">
                 side="bottom" align="center"
               </span>
               <Tooltip variant="light">
                 <TooltipTrigger asChild>
-                  <div className="rounded-lg border border-purple-300/50 bg-purple-100/10 px-6 py-3 text-white">
+                  <div className="text-fm-primary rounded-lg border border-purple-300/50 bg-purple-100/10 px-6 py-3">
                     Bottom Center
                   </div>
                 </TooltipTrigger>
@@ -1471,12 +1485,12 @@ export const AllCombinationsMatrix: Story = {
             </div>
 
             <div className="flex flex-col items-center gap-4">
-              <span className="text-sm text-white/60">
+              <span className="text-fm-secondary text-sm">
                 side="bottom" align="end"
               </span>
               <Tooltip variant="light">
                 <TooltipTrigger asChild>
-                  <div className="rounded-lg border border-purple-300/50 bg-purple-100/10 px-6 py-3 text-white">
+                  <div className="text-fm-primary rounded-lg border border-purple-300/50 bg-purple-100/10 px-6 py-3">
                     Bottom End
                   </div>
                 </TooltipTrigger>
@@ -1490,12 +1504,14 @@ export const AllCombinationsMatrix: Story = {
       </div>
 
       {/* Code Example */}
-      <div className="mx-auto max-w-4xl space-y-4 rounded-lg border border-white/10 bg-black/20 p-6">
-        <h5 className="text-lg font-medium text-white">Code Examples</h5>
+      <div className="border-fm-divider-secondary mx-auto max-w-4xl space-y-4 rounded-lg border bg-black/20 p-6">
+        <h5 className="text-fm-primary text-lg font-medium">Code Examples</h5>
         <div className="space-y-4 text-sm">
           <div className="space-y-2">
-            <p className="text-white/70">Dark variant with top positioning:</p>
-            <pre className="overflow-x-auto rounded bg-black/40 p-3 text-purple-300">
+            <p className="text-fm-secondary">
+              Dark variant with top positioning:
+            </p>
+            <pre className="text-fm-icon-brand-secondary overflow-x-auto rounded bg-black/40 p-3">
               {`<Tooltip variant="dark">
   <TooltipTrigger>Trigger Element</TooltipTrigger>
   <TooltipContent side="top" align="center" sideOffset={8}>
@@ -1505,10 +1521,10 @@ export const AllCombinationsMatrix: Story = {
             </pre>
           </div>
           <div className="space-y-2">
-            <p className="text-white/70">
+            <p className="text-fm-secondary">
               Light variant with right positioning:
             </p>
-            <pre className="overflow-x-auto rounded bg-black/40 p-3 text-purple-300">
+            <pre className="text-fm-icon-brand-secondary overflow-x-auto rounded bg-black/40 p-3">
               {`<Tooltip variant="light">
   <TooltipTrigger>Trigger Element</TooltipTrigger>
   <TooltipContent side="right" sideOffset={12}>
@@ -1520,7 +1536,7 @@ export const AllCombinationsMatrix: Story = {
         </div>
       </div>
 
-      <div className="space-y-2 text-center text-sm text-white/60">
+      <div className="text-fm-secondary space-y-2 text-center text-sm">
         <p>
           <strong>16 total combinations:</strong> 2 variants × 8 positioning
           combinations