aural-ui 3.0.7 → 4.0.1

package/dist/components/divider/Divider.stories.tsx

@@ -222,10 +222,12 @@ export const Stylised: Story = {
 
 export const SizeVariations: Story = {
   render: () => (
-    <div className="w-full max-w-2xl space-y-8 rounded-lg bg-gray-900 p-6">
+    <div className="bg-fm-surface-primary w-full max-w-2xl space-y-8 rounded-lg p-6">
       <div className="text-center">
-        <h3 className="mb-2 text-lg font-medium text-white">Size Variations</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 text-lg font-medium">
+          Size Variations
+        </h3>
+        <p className="text-fm-secondary text-sm">
           Different thickness options for various use cases
         </p>
       </div>
@@ -257,8 +259,12 @@ export const SizeVariations: Story = {
         ).map((item) => (
           <div key={item.size} className="space-y-3">
             <div className="flex items-center justify-between">
-              <h4 className="text-sm font-medium text-white">{item.label}</h4>
-              <span className="text-xs text-white/40">{item.description}</span>
+              <h4 className="text-fm-primary text-sm font-medium">
+                {item.label}
+              </h4>
+              <span className="text-fm-tertiary text-xs">
+                {item.description}
+              </span>
             </div>
             <Divider variant="primary" size={item.size} />
           </div>
@@ -278,12 +284,12 @@ export const SizeVariations: Story = {
 
 export const VariantComparison: Story = {
   render: () => (
-    <div className="w-full max-w-2xl space-y-8 rounded-lg bg-gray-900 p-6">
+    <div className="bg-fm-surface-primary w-full max-w-2xl space-y-8 rounded-lg p-6">
       <div className="text-center">
-        <h3 className="mb-2 text-lg font-medium text-white">
+        <h3 className="text-fm-primary mb-2 text-lg font-medium">
           Variant Comparison
         </h3>
-        <p className="text-sm text-white/60">
+        <p className="text-fm-secondary text-sm">
           Different visual styles for various design needs
         </p>
       </div>
@@ -320,9 +326,13 @@ export const VariantComparison: Story = {
         ).map((item) => (
           <div key={item.variant} className="space-y-3">
             <div className="space-y-1">
-              <h4 className="text-sm font-medium text-white">{item.label}</h4>
-              <p className="text-xs text-white/60">{item.description}</p>
-              <p className="text-xs text-white/40">Use case: {item.useCase}</p>
+              <h4 className="text-fm-primary text-sm font-medium">
+                {item.label}
+              </h4>
+              <p className="text-fm-secondary text-xs">{item.description}</p>
+              <p className="text-fm-tertiary text-xs">
+                Use case: {item.useCase}
+              </p>
             </div>
             <Divider variant={item.variant} size="full_default" />
           </div>
@@ -342,19 +352,19 @@ export const VariantComparison: Story = {
 
 export const DashedVariations: Story = {
   render: () => (
-    <div className="w-full max-w-2xl space-y-8 rounded-lg bg-gray-900 p-6">
+    <div className="bg-fm-surface-primary w-full max-w-2xl space-y-8 rounded-lg p-6">
       <div className="text-center">
-        <h3 className="mb-2 text-lg font-medium text-white">
+        <h3 className="text-fm-primary mb-2 text-lg font-medium">
           Dashed Divider Variations
         </h3>
-        <p className="text-sm text-white/60">
+        <p className="text-fm-secondary text-sm">
           Different sizes and orientations of dashed dividers
         </p>
       </div>
 
       <div className="space-y-6">
         <div>
-          <h4 className="mb-4 text-sm font-medium text-white">
+          <h4 className="text-fm-primary mb-4 text-sm font-medium">
             Horizontal Dashed
           </h4>
           <div className="space-y-4">
@@ -367,7 +377,7 @@ export const DashedVariations: Story = {
               ] as const
             ).map((item) => (
               <div key={item.size} className="space-y-2">
-                <span className="text-xs text-white/60">{item.label}</span>
+                <span className="text-fm-secondary text-xs">{item.label}</span>
                 <Divider variant="dashed" size={item.size} />
               </div>
             ))}
@@ -375,7 +385,7 @@ export const DashedVariations: Story = {
         </div>
 
         <div>
-          <h4 className="mb-4 text-sm font-medium text-white">
+          <h4 className="text-fm-primary mb-4 text-sm font-medium">
             Vertical Dashed
           </h4>
           <div className="flex h-16 items-center gap-6">
@@ -388,7 +398,7 @@ export const DashedVariations: Story = {
               ] as const
             ).map((item) => (
               <div key={item.size} className="flex flex-col items-center gap-2">
-                <span className="text-xs text-white/60">{item.label}</span>
+                <span className="text-fm-secondary text-xs">{item.label}</span>
                 <Divider
                   variant="dashed"
                   size={item.size}
@@ -414,12 +424,12 @@ export const DashedVariations: Story = {
 
 export const OrientationExample: Story = {
   render: () => (
-    <div className="w-full max-w-2xl space-y-8 rounded-lg bg-gray-900 p-6">
+    <div className="bg-fm-surface-primary w-full max-w-2xl space-y-8 rounded-lg p-6">
       <div className="text-center">
-        <h3 className="mb-2 text-lg font-medium text-white">
+        <h3 className="text-fm-primary mb-2 text-lg font-medium">
           Orientation Examples
         </h3>
-        <p className="text-sm text-white/60">
+        <p className="text-fm-secondary text-sm">
           Horizontal and vertical divider usage in layouts
         </p>
       </div>
@@ -427,17 +437,19 @@ export const OrientationExample: Story = {
       <div className="space-y-8">
         {/* Horizontal Example */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white">
+          <h4 className="text-fm-primary text-sm font-medium">
             Horizontal Dividers
           </h4>
-          <div className="space-y-4 rounded-lg bg-white/5 p-4">
-            <div className="text-sm text-white/80">Section A: User Profile</div>
+          <div className="bg-fm-surface-secondary space-y-4 rounded-lg p-4">
+            <div className="text-fm-tertiary text-sm">
+              Section A: User Profile
+            </div>
             <Divider variant="primary" />
-            <div className="text-sm text-white/80">
+            <div className="text-fm-tertiary text-sm">
               Section B: Account Settings
             </div>
             <Divider variant="dashed" />
-            <div className="text-sm text-white/80">
+            <div className="text-fm-tertiary text-sm">
               Section C: Privacy Options
             </div>
           </div>
@@ -445,19 +457,21 @@ export const OrientationExample: Story = {
 
         {/* Vertical Example */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white">Vertical Dividers</h4>
-          <div className="flex items-center gap-6 rounded-lg bg-white/5 p-4">
-            <div className="text-sm text-white/80">Profile</div>
+          <h4 className="text-fm-primary text-sm font-medium">
+            Vertical Dividers
+          </h4>
+          <div className="bg-fm-surface-secondary flex items-center gap-6 rounded-lg p-4">
+            <div className="text-fm-tertiary text-sm">Profile</div>
             <Divider variant="primary" orientation="vertical" className="h-8" />
-            <div className="text-sm text-white/80">Settings</div>
+            <div className="text-fm-tertiary text-sm">Settings</div>
             <Divider variant="dashed" orientation="vertical" className="h-8" />
-            <div className="text-sm text-white/80">Help</div>
+            <div className="text-fm-tertiary text-sm">Help</div>
             <Divider
               variant="secondary"
               orientation="vertical"
               className="h-8"
             />
-            <div className="text-sm text-white/80">Logout</div>
+            <div className="text-fm-tertiary text-sm">Logout</div>
           </div>
         </div>
       </div>
@@ -475,12 +489,12 @@ export const OrientationExample: Story = {
 
 export const RealWorldUsage: Story = {
   render: () => (
-    <div className="w-full max-w-4xl space-y-8 rounded-lg bg-gray-900 p-6">
+    <div className="bg-fm-surface-primary w-full max-w-4xl space-y-8 rounded-lg p-6">
       <div className="text-center">
-        <h3 className="mb-2 text-lg font-medium text-white">
+        <h3 className="text-fm-primary mb-2 text-lg font-medium">
           Real World Usage
         </h3>
-        <p className="text-sm text-white/60">
+        <p className="text-fm-secondary text-sm">
           Practical examples in common UI patterns
         </p>
       </div>
@@ -488,22 +502,26 @@ export const RealWorldUsage: Story = {
       <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
         {/* Card Layout */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white">Card Layout</h4>
-          <div className="space-y-4 rounded-lg bg-white/5 p-4">
+          <h4 className="text-fm-primary text-sm font-medium">Card Layout</h4>
+          <div className="bg-fm-surface-secondary space-y-4 rounded-lg p-4">
             <div className="flex items-center gap-3">
               <div className="h-10 w-10 rounded-full bg-blue-600"></div>
               <div>
-                <div className="text-sm font-medium text-white">John Doe</div>
-                <div className="text-xs text-white/60">Product Designer</div>
+                <div className="text-fm-primary text-sm font-medium">
+                  John Doe
+                </div>
+                <div className="text-fm-secondary text-xs">
+                  Product Designer
+                </div>
               </div>
             </div>
             <Divider variant="dashed" />
-            <div className="text-sm text-white/80">
+            <div className="text-fm-tertiary text-sm">
               Passionate about creating intuitive user experiences and
               innovative design solutions.
             </div>
             <Divider variant="secondary" />
-            <div className="flex gap-4 text-xs text-white/60">
+            <div className="text-fm-secondary flex gap-4 text-xs">
               <span>Joined: Jan 2024</span>
               <span>Projects: 12</span>
             </div>
@@ -512,21 +530,23 @@ export const RealWorldUsage: Story = {
 
         {/* Navigation Layout */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white">Navigation Menu</h4>
-          <div className="space-y-3 rounded-lg bg-white/5 p-4">
-            <div className="cursor-pointer text-sm text-white hover:text-blue-400">
+          <h4 className="text-fm-primary text-sm font-medium">
+            Navigation Menu
+          </h4>
+          <div className="bg-fm-surface-secondary space-y-3 rounded-lg p-4">
+            <div className="text-fm-primary cursor-pointer text-sm hover:text-blue-400">
               Dashboard
             </div>
             <Divider variant="secondary" />
-            <div className="cursor-pointer text-sm text-white hover:text-blue-400">
+            <div className="text-fm-primary cursor-pointer text-sm hover:text-blue-400">
               Projects
             </div>
             <Divider variant="secondary" />
-            <div className="cursor-pointer text-sm text-white hover:text-blue-400">
+            <div className="text-fm-primary cursor-pointer text-sm hover:text-blue-400">
               Team
             </div>
             <Divider variant="dashed" />
-            <div className="cursor-pointer text-sm text-white hover:text-blue-400">
+            <div className="text-fm-primary cursor-pointer text-sm hover:text-blue-400">
               Settings
             </div>
             <Divider variant="primary" />
@@ -538,29 +558,33 @@ export const RealWorldUsage: Story = {
 
         {/* Timeline Layout */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white">Content Timeline</h4>
-          <div className="space-y-4 rounded-lg bg-white/5 p-4">
+          <h4 className="text-fm-primary text-sm font-medium">
+            Content Timeline
+          </h4>
+          <div className="bg-fm-surface-secondary space-y-4 rounded-lg p-4">
             <div className="space-y-2">
-              <div className="text-sm font-medium text-white">
+              <div className="text-fm-primary text-sm font-medium">
                 Project Started
               </div>
-              <div className="text-xs text-white/60">
+              <div className="text-fm-secondary text-xs">
                 Initial setup and planning phase
               </div>
             </div>
             <Divider variant="stylised" />
             <div className="space-y-2">
-              <div className="text-sm font-medium text-white">
+              <div className="text-fm-primary text-sm font-medium">
                 Development Phase
               </div>
-              <div className="text-xs text-white/60">
+              <div className="text-fm-secondary text-xs">
                 Core features implementation
               </div>
             </div>
             <Divider variant="dashed" />
             <div className="space-y-2">
-              <div className="text-sm font-medium text-white">Testing & QA</div>
-              <div className="text-xs text-white/60">
+              <div className="text-fm-primary text-sm font-medium">
+                Testing & QA
+              </div>
+              <div className="text-fm-secondary text-xs">
                 Quality assurance and bug fixes
               </div>
             </div>
@@ -569,10 +593,12 @@ export const RealWorldUsage: Story = {
 
         {/* Toolbar Layout */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white">Toolbar Actions</h4>
-          <div className="rounded-lg bg-white/5 p-4">
+          <h4 className="text-fm-primary text-sm font-medium">
+            Toolbar Actions
+          </h4>
+          <div className="bg-fm-surface-secondary rounded-lg p-4">
             <div className="flex items-center gap-4">
-              <button className="text-sm text-white/80 hover:text-white">
+              <button className="text-fm-tertiary hover:text-fm-primary text-sm">
                 Edit
               </button>
               <Divider
@@ -580,7 +606,7 @@ export const RealWorldUsage: Story = {
                 orientation="vertical"
                 className="h-6"
               />
-              <button className="text-sm text-white/80 hover:text-white">
+              <button className="text-fm-tertiary hover:text-fm-primary text-sm">
                 Share
               </button>
               <Divider
@@ -588,7 +614,7 @@ export const RealWorldUsage: Story = {
                 orientation="vertical"
                 className="h-6"
               />
-              <button className="text-sm text-white/80 hover:text-white">
+              <button className="text-fm-tertiary hover:text-fm-primary text-sm">
                 Export
               </button>
               <Divider

package/dist/components/dot-loader/DotLoader.stories.tsx

@@ -195,12 +195,12 @@ export const ColorVariations: Story = {
   render: () => (
     <div className="flex flex-col gap-8">
       <div className="text-center">
-        <h3 className="mb-4 text-lg text-white">Default Theme</h3>
+        <h3 className="text-fm-primary mb-4 text-lg">Default Theme</h3>
         <DotLoader text="Loading..." ariaLabel="Loading default content" />
       </div>
 
       <div className="text-center">
-        <h3 className="mb-4 text-lg text-white">Blue Theme</h3>
+        <h3 className="text-fm-primary mb-4 text-lg">Blue Theme</h3>
         <DotLoader
           text="Processing..."
           color="#1e293b"
@@ -211,7 +211,7 @@ export const ColorVariations: Story = {
       </div>
 
       <div className="text-center">
-        <h3 className="mb-4 text-lg text-white">Green Theme</h3>
+        <h3 className="text-fm-primary mb-4 text-lg">Green Theme</h3>
         <DotLoader
           text="Uploading..."
           color="#1f2937"
@@ -222,7 +222,7 @@ export const ColorVariations: Story = {
       </div>
 
       <div className="text-center">
-        <h3 className="mb-4 text-lg text-white">Red Theme</h3>
+        <h3 className="text-fm-primary mb-4 text-lg">Red Theme</h3>
         <DotLoader
           text="Deleting..."
           color="#1f2937"
@@ -247,8 +247,8 @@ export const ColorVariations: Story = {
 export const LoadingStates: Story = {
   render: () => (
     <div className="grid grid-cols-2 gap-8">
-      <div className="rounded-lg bg-slate-800 p-6 text-center">
-        <h4 className="mb-4 text-sm text-white">File Upload</h4>
+      <div className="bg-fm-surface-secondary rounded-lg p-6 text-center">
+        <h4 className="text-fm-primary mb-4 text-sm">File Upload</h4>
         <DotLoader
           text="Uploading files..."
           color="#374151"
@@ -258,8 +258,8 @@ export const LoadingStates: Story = {
         />
       </div>
 
-      <div className="rounded-lg bg-slate-800 p-6 text-center">
-        <h4 className="mb-4 text-sm text-white">Data Processing</h4>
+      <div className="bg-fm-surface-secondary rounded-lg p-6 text-center">
+        <h4 className="text-fm-primary mb-4 text-sm">Data Processing</h4>
         <DotLoader
           text="Processing data..."
           color="#374151"
@@ -269,8 +269,8 @@ export const LoadingStates: Story = {
         />
       </div>
 
-      <div className="rounded-lg bg-slate-800 p-6 text-center">
-        <h4 className="mb-4 text-sm text-white">Authentication</h4>
+      <div className="bg-fm-surface-secondary rounded-lg p-6 text-center">
+        <h4 className="text-fm-primary mb-4 text-sm">Authentication</h4>
         <DotLoader
           text="Signing in..."
           color="#374151"
@@ -280,8 +280,8 @@ export const LoadingStates: Story = {
         />
       </div>
 
-      <div className="rounded-lg bg-slate-800 p-6 text-center">
-        <h4 className="mb-4 text-sm text-white">Content Loading</h4>
+      <div className="bg-fm-surface-secondary rounded-lg p-6 text-center">
+        <h4 className="text-fm-primary mb-4 text-sm">Content Loading</h4>
         <DotLoader
           text="Loading content..."
           color="#374151"