aural-ui 3.0.7 → 4.0.1

package/dist/components/resizable/Resizable.stories.tsx

@@ -148,18 +148,20 @@ export const BasicHorizontal: Story = {
   },
   render: (args) => (
     <div className="h-96 w-full p-8">
-      <h3 className="mb-4 text-lg font-medium text-white">
+      <h3 className="text-fm-primary mb-4 text-lg font-medium">
         Basic Horizontal Layout
       </h3>
       <ResizablePanelGroup
         {...args}
-        className="overflow-hidden rounded-lg border border-white/10"
+        className="border-fm-divider-secondary overflow-hidden rounded-lg border"
       >
         <ResizablePanel defaultSize={50}>
           <div className="flex h-full items-center justify-center bg-blue-500/10 p-4">
             <div className="text-center">
-              <h4 className="text-lg font-medium text-white">Left Panel</h4>
-              <p className="text-sm text-white/60">Resize me!</p>
+              <h4 className="text-fm-primary text-lg font-medium">
+                Left Panel
+              </h4>
+              <p className="text-fm-secondary text-sm">Resize me!</p>
             </div>
           </div>
         </ResizablePanel>
@@ -167,8 +169,10 @@ export const BasicHorizontal: Story = {
         <ResizablePanel defaultSize={50}>
           <div className="flex h-full items-center justify-center bg-purple-500/10 p-4">
             <div className="text-center">
-              <h4 className="text-lg font-medium text-white">Right Panel</h4>
-              <p className="text-sm text-white/60">I resize too!</p>
+              <h4 className="text-fm-primary text-lg font-medium">
+                Right Panel
+              </h4>
+              <p className="text-fm-secondary text-sm">I resize too!</p>
             </div>
           </div>
         </ResizablePanel>
@@ -189,18 +193,18 @@ export const BasicHorizontal: Story = {
 export const VerticalWithHandles: Story = {
   render: () => (
     <div className="h-96 w-full p-8">
-      <h3 className="mb-4 text-lg font-medium text-white">
+      <h3 className="text-fm-primary mb-4 text-lg font-medium">
         Vertical Layout with Visual Handles
       </h3>
       <ResizablePanelGroup
         direction="vertical"
-        className="overflow-hidden rounded-lg border border-white/10"
+        className="border-fm-divider-secondary overflow-hidden rounded-lg border"
       >
         <ResizablePanel defaultSize={40}>
           <div className="flex h-full items-center justify-center bg-green-500/10 p-4">
             <div className="text-center">
-              <h4 className="text-lg font-medium text-white">Top Panel</h4>
-              <p className="text-sm text-white/60">40% default size</p>
+              <h4 className="text-fm-primary text-lg font-medium">Top Panel</h4>
+              <p className="text-fm-secondary text-sm">40% default size</p>
             </div>
           </div>
         </ResizablePanel>
@@ -208,9 +212,11 @@ export const VerticalWithHandles: Story = {
         <ResizablePanel defaultSize={60}>
           <div className="flex h-full items-center justify-center bg-orange-500/10 p-4">
             <div className="text-center">
-              <h4 className="text-lg font-medium text-white">Bottom Panel</h4>
-              <p className="text-sm text-white/60">60% default size</p>
-              <p className="mt-2 text-xs text-white/40">
+              <h4 className="text-fm-primary text-lg font-medium">
+                Bottom Panel
+              </h4>
+              <p className="text-fm-secondary text-sm">60% default size</p>
+              <p className="text-fm-tertiary mt-2 text-xs">
                 Notice the rotated handle icon
               </p>
             </div>
@@ -233,36 +239,40 @@ export const VerticalWithHandles: Story = {
 export const ThreePanel: Story = {
   render: () => (
     <div className="h-96 w-full p-8">
-      <h3 className="mb-4 text-lg font-medium text-white">
+      <h3 className="text-fm-primary mb-4 text-lg font-medium">
         Three Panel Layout
       </h3>
       <ResizablePanelGroup
         direction="horizontal"
-        className="overflow-hidden rounded-lg border border-white/10"
+        className="border-fm-divider-secondary overflow-hidden rounded-lg border"
       >
         <ResizablePanel defaultSize={25} minSize={15}>
           <div className="flex h-full flex-col justify-center bg-red-500/10 p-4">
-            <h4 className="text-sm font-medium text-white">Sidebar</h4>
-            <p className="mt-1 text-xs text-white/60">25% default</p>
-            <p className="mt-1 text-xs text-white/40">15% minimum</p>
+            <h4 className="text-fm-primary text-sm font-medium">Sidebar</h4>
+            <p className="text-fm-secondary mt-1 text-xs">25% default</p>
+            <p className="text-fm-tertiary mt-1 text-xs">15% minimum</p>
           </div>
         </ResizablePanel>
         <ResizableHandle withHandle />
         <ResizablePanel defaultSize={50}>
           <div className="flex h-full items-center justify-center bg-blue-500/10 p-4">
             <div className="text-center">
-              <h4 className="text-lg font-medium text-white">Main Content</h4>
-              <p className="text-sm text-white/60">50% default size</p>
-              <p className="mt-2 text-xs text-white/40">Primary content area</p>
+              <h4 className="text-fm-primary text-lg font-medium">
+                Main Content
+              </h4>
+              <p className="text-fm-secondary text-sm">50% default size</p>
+              <p className="text-fm-tertiary mt-2 text-xs">
+                Primary content area
+              </p>
             </div>
           </div>
         </ResizablePanel>
         <ResizableHandle withHandle />
         <ResizablePanel defaultSize={25} minSize={20}>
           <div className="flex h-full flex-col justify-center bg-purple-500/10 p-4">
-            <h4 className="text-sm font-medium text-white">Right Panel</h4>
-            <p className="mt-1 text-xs text-white/60">25% default</p>
-            <p className="mt-1 text-xs text-white/40">20% minimum</p>
+            <h4 className="text-fm-primary text-sm font-medium">Right Panel</h4>
+            <p className="text-fm-secondary mt-1 text-xs">25% default</p>
+            <p className="text-fm-tertiary mt-1 text-xs">20% minimum</p>
           </div>
         </ResizablePanel>
       </ResizablePanelGroup>
@@ -282,21 +292,21 @@ export const ThreePanel: Story = {
 export const NestedLayouts: Story = {
   render: () => (
     <div className="h-96 w-full p-8">
-      <h3 className="mb-4 text-lg font-medium text-white">
+      <h3 className="text-fm-primary mb-4 text-lg font-medium">
         Nested Resizable Layouts
       </h3>
       <ResizablePanelGroup
         direction="horizontal"
-        className="overflow-hidden rounded-lg border border-white/10"
+        className="border-fm-divider-secondary overflow-hidden rounded-lg border"
       >
         <ResizablePanel defaultSize={30} minSize={25}>
           <div className="flex h-full flex-col justify-center bg-indigo-500/10 p-4">
-            <h4 className="text-sm font-medium text-white">Sidebar</h4>
-            <p className="mt-1 text-xs text-white/60">Navigation & Tools</p>
+            <h4 className="text-fm-primary text-sm font-medium">Sidebar</h4>
+            <p className="text-fm-secondary mt-1 text-xs">Navigation & Tools</p>
             <div className="mt-4 space-y-2">
-              <div className="h-2 rounded bg-white/10"></div>
-              <div className="h-2 rounded bg-white/5"></div>
-              <div className="h-2 rounded bg-white/5"></div>
+              <div className="bg-fm-surface-secondary h-2 rounded"></div>
+              <div className="bg-fm-surface-secondary h-2 rounded"></div>
+              <div className="bg-fm-surface-secondary h-2 rounded"></div>
             </div>
           </div>
         </ResizablePanel>
@@ -306,11 +316,11 @@ export const NestedLayouts: Story = {
             <ResizablePanel defaultSize={65}>
               <div className="flex h-full items-center justify-center bg-green-500/10 p-4">
                 <div className="text-center">
-                  <h4 className="text-lg font-medium text-white">
+                  <h4 className="text-fm-primary text-lg font-medium">
                     Main Content Area
                   </h4>
-                  <p className="text-sm text-white/60">Primary workspace</p>
-                  <p className="mt-2 text-xs text-white/40">
+                  <p className="text-fm-secondary text-sm">Primary workspace</p>
+                  <p className="text-fm-tertiary mt-2 text-xs">
                     This panel can be resized vertically
                   </p>
                 </div>
@@ -320,11 +330,13 @@ export const NestedLayouts: Story = {
             <ResizablePanel defaultSize={35} minSize={25}>
               <div className="flex h-full items-center justify-center bg-orange-500/10 p-4">
                 <div className="text-center">
-                  <h4 className="text-md font-medium text-white">
+                  <h4 className="text-md text-fm-primary font-medium">
                     Bottom Panel
                   </h4>
-                  <p className="text-sm text-white/60">Console / Terminal</p>
-                  <p className="mt-2 text-xs text-white/40">
+                  <p className="text-fm-secondary text-sm">
+                    Console / Terminal
+                  </p>
+                  <p className="text-fm-tertiary mt-2 text-xs">
                     Nested vertical layout
                   </p>
                 </div>
@@ -349,30 +361,32 @@ export const NestedLayouts: Story = {
 export const HandleVariations: 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">
         Handle Variations
       </h3>
 
       <div className="space-y-6">
         {/* Without Visual Handle */}
         <div className="space-y-2">
-          <h4 className="text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary text-sm font-medium">
             Without Visual Handle
           </h4>
           <div className="h-32">
             <ResizablePanelGroup
               direction="horizontal"
-              className="overflow-hidden rounded-lg border border-white/10"
+              className="border-fm-divider-secondary overflow-hidden rounded-lg border"
             >
               <ResizablePanel defaultSize={50}>
                 <div className="flex h-full items-center justify-center bg-blue-500/10 p-4">
-                  <span className="text-sm text-white">Minimal Handle</span>
+                  <span className="text-fm-primary text-sm">
+                    Minimal Handle
+                  </span>
                 </div>
               </ResizablePanel>
               <ResizableHandle />
               <ResizablePanel defaultSize={50}>
                 <div className="flex h-full items-center justify-center bg-purple-500/10 p-4">
-                  <span className="text-sm text-white">Clean Look</span>
+                  <span className="text-fm-primary text-sm">Clean Look</span>
                 </div>
               </ResizablePanel>
             </ResizablePanelGroup>
@@ -381,23 +395,25 @@ export const HandleVariations: Story = {
 
         {/* With Visual Handle */}
         <div className="space-y-2">
-          <h4 className="text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary text-sm font-medium">
             With Visual Handle
           </h4>
           <div className="h-32">
             <ResizablePanelGroup
               direction="horizontal"
-              className="overflow-hidden rounded-lg border border-white/10"
+              className="border-fm-divider-secondary overflow-hidden rounded-lg border"
             >
               <ResizablePanel defaultSize={50}>
                 <div className="flex h-full items-center justify-center bg-green-500/10 p-4">
-                  <span className="text-sm text-white">Clear Affordance</span>
+                  <span className="text-fm-primary text-sm">
+                    Clear Affordance
+                  </span>
                 </div>
               </ResizablePanel>
               <ResizableHandle withHandle />
               <ResizablePanel defaultSize={50}>
                 <div className="flex h-full items-center justify-center bg-orange-500/10 p-4">
-                  <span className="text-sm text-white">Easy to Spot</span>
+                  <span className="text-fm-primary text-sm">Easy to Spot</span>
                 </div>
               </ResizablePanel>
             </ResizablePanelGroup>
@@ -406,17 +422,19 @@ export const HandleVariations: Story = {
 
         {/* Custom Styled Handle */}
         <div className="space-y-2">
-          <h4 className="text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary text-sm font-medium">
             Custom Styled Handle
           </h4>
           <div className="h-32">
             <ResizablePanelGroup
               direction="horizontal"
-              className="overflow-hidden rounded-lg border border-white/10"
+              className="border-fm-divider-secondary overflow-hidden rounded-lg border"
             >
               <ResizablePanel defaultSize={50}>
                 <div className="flex h-full items-center justify-center bg-red-500/10 p-4">
-                  <span className="text-sm text-white">Custom Styling</span>
+                  <span className="text-fm-primary text-sm">
+                    Custom Styling
+                  </span>
                 </div>
               </ResizablePanel>
               <ResizableHandle
@@ -425,7 +443,7 @@ export const HandleVariations: Story = {
               />
               <ResizablePanel defaultSize={50}>
                 <div className="flex h-full items-center justify-center bg-indigo-500/10 p-4">
-                  <span className="text-sm text-white">Themed Handle</span>
+                  <span className="text-fm-primary text-sm">Themed Handle</span>
                 </div>
               </ResizablePanel>
             </ResizablePanelGroup>
@@ -448,28 +466,28 @@ export const HandleVariations: Story = {
 export const RealWorldExamples: 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">
         Real-world Examples
       </h3>
 
       <div className="space-y-8">
         {/* IDE Layout */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary text-sm font-medium">
             IDE / Code Editor Layout
           </h4>
           <div className="h-80">
             <ResizablePanelGroup
               direction="horizontal"
-              className="overflow-hidden rounded-lg border border-white/10"
+              className="border-fm-divider-secondary overflow-hidden rounded-lg border"
             >
               {/* File Explorer */}
               <ResizablePanel defaultSize={20} minSize={15}>
-                <div className="h-full bg-gray-900/50 p-3">
-                  <h5 className="mb-3 text-xs font-medium text-white">
+                <div className="bg-fm-surface-primary h-full p-3">
+                  <h5 className="text-fm-primary mb-3 text-xs font-medium">
                     EXPLORER
                   </h5>
-                  <div className="space-y-1 text-xs text-white/60">
+                  <div className="text-fm-secondary space-y-1 text-xs">
                     <div className="flex items-center gap-1">
                       <span>📁</span> src
                     </div>
@@ -492,28 +510,41 @@ export const RealWorldExamples: Story = {
                 <ResizablePanelGroup direction="vertical">
                   {/* Editor */}
                   <ResizablePanel defaultSize={70}>
-                    <div className="h-full bg-gray-900/30 p-4">
-                      <div className="mb-4 flex items-center gap-2 border-b border-white/10 pb-2">
-                        <span className="text-xs text-white/60">App.tsx</span>
-                        <span className="text-xs text-white/40">×</span>
+                    <div className="bg-fm-surface-primary h-full p-4">
+                      <div className="border-fm-divider-secondary mb-4 flex items-center gap-2 border-b pb-2">
+                        <span className="text-fm-secondary text-xs">
+                          App.tsx
+                        </span>
+                        <span className="text-fm-tertiary text-xs">×</span>
                       </div>
-                      <div className="space-y-2 font-mono text-xs text-white/70">
+                      <div className="text-fm-secondary space-y-2 font-mono text-xs">
                         <div>
-                          <span className="text-purple-400">import</span> React{" "}
-                          <span className="text-purple-400">from</span>{" "}
-                          <span className="text-green-400">'react'</span>
+                          <span className="text-fm-icon-brand-secondary">
+                            import
+                          </span>{" "}
+                          React{" "}
+                          <span className="text-fm-icon-brand-secondary">
+                            from
+                          </span>{" "}
+                          <span className="text-fm-positive">'react'</span>
                         </div>
                         <div></div>
                         <div>
-                          <span className="text-purple-400">function</span>{" "}
-                          <span className="text-blue-400">App</span>() {"{"}
+                          <span className="text-fm-icon-brand-secondary">
+                            function
+                          </span>{" "}
+                          <span className="text-fm-info">App</span>() {"{"}
                         </div>
                         <div className="ml-4">
-                          <span className="text-purple-400">return</span> (
+                          <span className="text-fm-icon-brand-secondary">
+                            return
+                          </span>{" "}
+                          (
                         </div>
                         <div className="ml-8">
-                          &lt;<span className="text-red-400">div</span>&gt;Hello
-                          World&lt;/<span className="text-red-400">div</span>
+                          &lt;<span className="text-fm-icon-negative">div</span>
+                          &gt;Hello World&lt;/
+                          <span className="text-fm-icon-negative">div</span>
                           &gt;
                         </div>
                         <div className="ml-4">)</div>
@@ -527,20 +558,20 @@ export const RealWorldExamples: Story = {
                   <ResizablePanel defaultSize={30} minSize={20}>
                     <div className="h-full bg-black/50 p-3">
                       <div className="mb-2 flex items-center gap-2">
-                        <h5 className="text-xs font-medium text-white">
+                        <h5 className="text-fm-primary text-xs font-medium">
                           TERMINAL
                         </h5>
-                        <span className="text-xs text-white/40">bash</span>
+                        <span className="text-fm-tertiary text-xs">bash</span>
                       </div>
-                      <div className="font-mono text-xs text-green-400">
+                      <div className="text-fm-positive font-mono text-xs">
                         <div>$ npm start</div>
-                        <div className="text-white/60">
+                        <div className="text-fm-secondary">
                           Starting development server...
                         </div>
-                        <div className="text-white/60">
+                        <div className="text-fm-secondary">
                           Local: http://localhost:3000
                         </div>
-                        <div className="text-green-400">
+                        <div className="text-fm-positive">
                           ✓ Compiled successfully!
                         </div>
                       </div>
@@ -552,11 +583,11 @@ export const RealWorldExamples: Story = {
 
               {/* Right Sidebar */}
               <ResizablePanel defaultSize={20} minSize={15}>
-                <div className="h-full bg-gray-900/50 p-3">
-                  <h5 className="mb-3 text-xs font-medium text-white">
+                <div className="bg-fm-surface-primary h-full p-3">
+                  <h5 className="text-fm-primary mb-3 text-xs font-medium">
                     OUTLINE
                   </h5>
-                  <div className="space-y-1 text-xs text-white/60">
+                  <div className="text-fm-secondary space-y-1 text-xs">
                     <div>📋 Components</div>
                     <div className="ml-3">⚛️ App</div>
                     <div className="ml-3">🎨 Header</div>
@@ -572,28 +603,28 @@ export const RealWorldExamples: Story = {
 
         {/* Dashboard Layout */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary text-sm font-medium">
             Dashboard Layout
           </h4>
           <div className="h-64">
             <ResizablePanelGroup
               direction="horizontal"
-              className="overflow-hidden rounded-lg border border-white/10"
+              className="border-fm-divider-secondary overflow-hidden rounded-lg border"
             >
               {/* Sidebar */}
               <ResizablePanel defaultSize={25} minSize={20}>
                 <div className="h-full bg-blue-900/20 p-4">
-                  <h5 className="mb-4 text-sm font-medium text-white">
+                  <h5 className="text-fm-primary mb-4 text-sm font-medium">
                     Navigation
                   </h5>
                   <div className="space-y-3">
-                    <div className="flex items-center gap-2 text-sm text-white/80">
+                    <div className="text-fm-primary flex items-center gap-2 text-sm">
                       <span>📊</span> Dashboard
                     </div>
-                    <div className="flex items-center gap-2 text-sm text-white/60">
+                    <div className="text-fm-secondary flex items-center gap-2 text-sm">
                       <span>👥</span> Users
                     </div>
-                    <div className="flex items-center gap-2 text-sm text-white/60">
+                    <div className="text-fm-secondary flex items-center gap-2 text-sm">
                       <span>⚙️</span> Settings
                     </div>
                   </div>
@@ -607,27 +638,31 @@ export const RealWorldExamples: Story = {
                   {/* Top Metrics */}
                   <ResizablePanel defaultSize={40}>
                     <div className="h-full bg-green-900/20 p-4">
-                      <h5 className="mb-3 text-sm font-medium text-white">
+                      <h5 className="text-fm-primary mb-3 text-sm font-medium">
                         Key Metrics
                       </h5>
                       <div className="grid h-20 grid-cols-3 gap-4">
-                        <div className="rounded bg-white/5 p-3 text-center">
-                          <div className="text-lg font-bold text-white">
+                        <div className="bg-fm-surface-secondary rounded p-3 text-center">
+                          <div className="text-fm-primary text-lg font-bold">
                             1,234
                           </div>
-                          <div className="text-xs text-white/60">Users</div>
+                          <div className="text-fm-secondary text-xs">Users</div>
                         </div>
-                        <div className="rounded bg-white/5 p-3 text-center">
-                          <div className="text-lg font-bold text-white">
+                        <div className="bg-fm-surface-secondary rounded p-3 text-center">
+                          <div className="text-fm-primary text-lg font-bold">
                             $12.3k
                           </div>
-                          <div className="text-xs text-white/60">Revenue</div>
+                          <div className="text-fm-secondary text-xs">
+                            Revenue
+                          </div>
                         </div>
-                        <div className="rounded bg-white/5 p-3 text-center">
-                          <div className="text-lg font-bold text-white">
+                        <div className="bg-fm-surface-secondary rounded p-3 text-center">
+                          <div className="text-fm-primary text-lg font-bold">
                             98.5%
                           </div>
-                          <div className="text-xs text-white/60">Uptime</div>
+                          <div className="text-fm-secondary text-xs">
+                            Uptime
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -637,11 +672,11 @@ export const RealWorldExamples: Story = {
                   {/* Bottom Charts */}
                   <ResizablePanel defaultSize={60}>
                     <div className="h-full bg-purple-900/20 p-4">
-                      <h5 className="mb-3 text-sm font-medium text-white">
+                      <h5 className="text-fm-primary mb-3 text-sm font-medium">
                         Analytics
                       </h5>
-                      <div className="flex h-full items-center justify-center rounded bg-white/5 p-4">
-                        <span className="text-white/60">📈 Chart Area</span>
+                      <div className="bg-fm-surface-secondary flex h-full items-center justify-center rounded p-4">
+                        <span className="text-fm-secondary">📈 Chart Area</span>
                       </div>
                     </div>
                   </ResizablePanel>
@@ -667,51 +702,58 @@ export const RealWorldExamples: Story = {
 export const AccessibilityDemo: Story = {
   render: () => (
     <div className="space-y-6 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-4">
         <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">
+          <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
-              resize handles
+              • <kbd className="bg-fm-surface-secondary rounded px-1">Tab</kbd>{" "}
+              to focus resize handles
             </li>
             <li>
-              • <kbd className="rounded bg-white/10 px-1">Arrow Keys</kbd> to
-              resize panels
+              •{" "}
+              <kbd className="bg-fm-surface-secondary rounded px-1">
+                Arrow Keys
+              </kbd>{" "}
+              to resize panels
             </li>
             <li>
-              • <kbd className="rounded bg-white/10 px-1">Enter</kbd> to
-              activate resize mode
+              •{" "}
+              <kbd className="bg-fm-surface-secondary rounded px-1">Enter</kbd>{" "}
+              to activate resize mode
             </li>
             <li>
-              • <kbd className="rounded bg-white/10 px-1">Escape</kbd> to exit
-              resize mode
+              •{" "}
+              <kbd className="bg-fm-surface-secondary rounded px-1">Escape</kbd>{" "}
+              to exit resize mode
             </li>
           </ul>
         </div>
 
         <div className="h-48">
-          <h4 className="mb-2 text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary mb-2 text-sm font-medium">
             Keyboard Accessible Resizing
           </h4>
           <ResizablePanelGroup
             direction="horizontal"
-            className="overflow-hidden rounded-lg border border-white/10"
+            className="border-fm-divider-secondary overflow-hidden rounded-lg border"
           >
             <ResizablePanel defaultSize={40}>
               <div className="flex h-full items-center justify-center bg-blue-500/10 p-4">
                 <div className="text-center">
-                  <h5 className="text-md font-medium text-white">Left Panel</h5>
-                  <p className="mt-1 text-xs text-white/60">
+                  <h5 className="text-md text-fm-primary font-medium">
+                    Left Panel
+                  </h5>
+                  <p className="text-fm-secondary mt-1 text-xs">
                     Tab to the handle and use arrow keys
                   </p>
                 </div>
@@ -721,10 +763,10 @@ export const AccessibilityDemo: Story = {
             <ResizablePanel defaultSize={60}>
               <div className="flex h-full items-center justify-center bg-purple-500/10 p-4">
                 <div className="text-center">
-                  <h5 className="text-md font-medium text-white">
+                  <h5 className="text-md text-fm-primary font-medium">
                     Right Panel
                   </h5>
-                  <p className="mt-1 text-xs text-white/60">
+                  <p className="text-fm-secondary mt-1 text-xs">
                     Focus ring visible when handle is focused
                   </p>
                 </div>
@@ -733,11 +775,11 @@ export const AccessibilityDemo: Story = {
           </ResizablePanelGroup>
         </div>
 
-        <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-          <h4 className="mb-3 text-sm font-medium text-white/70">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+          <h4 className="text-fm-secondary mb-3 text-sm font-medium">
             Screen Reader Support
           </h4>
-          <div className="space-y-1 text-xs text-white/60">
+          <div className="text-fm-secondary space-y-1 text-xs">
             <p>• Resize handles have proper ARIA labels</p>
             <p>• Panel relationships are properly communicated</p>
             <p>• Size changes are announced to screen readers</p>
@@ -764,30 +806,30 @@ export const InteractivePlayground: Story = {
 
     return (
       <div className="space-y-6 p-8">
-        <h3 className="text-center text-lg font-medium text-white">
+        <h3 className="text-fm-primary text-center text-lg font-medium">
           Interactive Playground
         </h3>
 
-        <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-          <h4 className="mb-2 text-sm font-medium text-white/70">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+          <h4 className="text-fm-secondary mb-2 text-sm font-medium">
             Current Panel Sizes
           </h4>
           <div className="grid grid-cols-3 gap-4 text-xs">
             <div className="text-center">
-              <div className="text-white">Left Panel</div>
-              <div className="font-mono text-blue-400">
+              <div className="text-fm-primary">Left Panel</div>
+              <div className="text-fm-info font-mono">
                 {sizes[0].toFixed(1)}%
               </div>
             </div>
             <div className="text-center">
-              <div className="text-white">Center Panel</div>
-              <div className="font-mono text-green-400">
+              <div className="text-fm-primary">Center Panel</div>
+              <div className="text-fm-positive font-mono">
                 {sizes[1].toFixed(1)}%
               </div>
             </div>
             <div className="text-center">
-              <div className="text-white">Right Panel</div>
-              <div className="font-mono text-purple-400">
+              <div className="text-fm-primary">Right Panel</div>
+              <div className="text-fm-icon-brand-secondary font-mono">
                 {sizes[2].toFixed(1)}%
               </div>
             </div>
@@ -797,16 +839,18 @@ export const InteractivePlayground: Story = {
         <div className="h-64">
           <ResizablePanelGroup
             direction="horizontal"
-            className="overflow-hidden rounded-lg border border-white/10"
+            className="border-fm-divider-secondary overflow-hidden rounded-lg border"
             onLayout={(newSizes) => setSizes(newSizes)}
           >
             <ResizablePanel defaultSize={25} minSize={15}>
               <div className="flex h-full items-center justify-center bg-blue-500/10 p-4">
                 <div className="text-center">
-                  <h5 className="text-md font-medium text-white">Panel 1</h5>
-                  <p className="mt-1 text-xs text-white/60">Min: 15%</p>
+                  <h5 className="text-md text-fm-primary font-medium">
+                    Panel 1
+                  </h5>
+                  <p className="text-fm-secondary mt-1 text-xs">Min: 15%</p>
                   <div className="mx-auto mt-3 flex h-16 w-16 items-center justify-center rounded-full bg-blue-500/20">
-                    <span className="font-mono text-xs text-blue-300">
+                    <span className="text-fm-info font-mono text-xs">
                       {sizes[0]?.toFixed(0)}%
                     </span>
                   </div>
@@ -818,10 +862,12 @@ export const InteractivePlayground: Story = {
             <ResizablePanel defaultSize={50}>
               <div className="flex h-full items-center justify-center bg-green-500/10 p-4">
                 <div className="text-center">
-                  <h5 className="text-md font-medium text-white">Panel 2</h5>
-                  <p className="mt-1 text-xs text-white/60">Flexible</p>
+                  <h5 className="text-md text-fm-primary font-medium">
+                    Panel 2
+                  </h5>
+                  <p className="text-fm-secondary mt-1 text-xs">Flexible</p>
                   <div className="mx-auto mt-3 flex h-16 w-16 items-center justify-center rounded-full bg-green-500/20">
-                    <span className="font-mono text-xs text-green-300">
+                    <span className="text-fm-positive font-mono text-xs">
                       {sizes[1]?.toFixed(0)}%
                     </span>
                   </div>
@@ -833,10 +879,12 @@ export const InteractivePlayground: Story = {
             <ResizablePanel defaultSize={25} minSize={20}>
               <div className="flex h-full items-center justify-center bg-purple-500/10 p-4">
                 <div className="text-center">
-                  <h5 className="text-md font-medium text-white">Panel 3</h5>
-                  <p className="mt-1 text-xs text-white/60">Min: 20%</p>
+                  <h5 className="text-md text-fm-primary font-medium">
+                    Panel 3
+                  </h5>
+                  <p className="text-fm-secondary mt-1 text-xs">Min: 20%</p>
                   <div className="mx-auto mt-3 flex h-16 w-16 items-center justify-center rounded-full bg-purple-500/20">
-                    <span className="font-mono text-xs text-purple-300">
+                    <span className="text-fm-icon-brand-secondary font-mono text-xs">
                       {sizes[2]?.toFixed(0)}%
                     </span>
                   </div>
@@ -846,7 +894,7 @@ export const InteractivePlayground: Story = {
           </ResizablePanelGroup>
         </div>
 
-        <div className="text-center text-xs text-white/60">
+        <div className="text-fm-secondary text-center text-xs">
           <p>
             Drag the handles to resize panels and see the live size updates
             above!