aural-ui 3.0.6 → 4.0.1

package/dist/components/drawer/Drawer.stories.tsx

@@ -255,14 +255,17 @@ export const DirectionExamples: Story = {
               <DrawerDescription>{description}</DrawerDescription>
             </DrawerHeader>
             <div className="p-2 py-4">
-              <div className="rounded-lg border border-white/10 bg-white/5 p-3">
-                <div className="space-y-1 text-xs text-white/60">
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-3">
+                <div className="text-fm-primary/60 space-y-1 text-xs">
                   <div>
-                    Direction: <span className="text-white">{direction}</span>
+                    Direction:{" "}
+                    <span className="text-fm-primary">{direction}</span>
                   </div>
                   <div>
                     Content:{" "}
-                    <span className="text-white">Slides from {direction}</span>
+                    <span className="text-fm-primary">
+                      Slides from {direction}
+                    </span>
                   </div>
                 </div>
               </div>
@@ -280,8 +283,10 @@ export const DirectionExamples: Story = {
     return (
       <div className="space-y-8">
         <div className="text-center">
-          <h3 className="mb-2 font-medium text-white">Drawer Directions</h3>
-          <p className="text-sm text-white/60">
+          <h3 className="text-fm-primary mb-2 font-medium">
+            Drawer Directions
+          </h3>
+          <p className="text-fm-primary/60 text-sm">
             Explore different slide directions for various use cases
           </p>
         </div>
@@ -289,7 +294,7 @@ export const DirectionExamples: Story = {
         <div className="space-y-6">
           {/* Bottom Direction */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/80">
+            <h4 className="text-fm-primary/80 text-sm font-medium">
               Bottom Direction (Default)
             </h4>
             <div className="flex flex-wrap gap-2">
@@ -303,7 +308,9 @@ export const DirectionExamples: Story = {
 
           {/* Top Direction */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/80">Top Direction</h4>
+            <h4 className="text-fm-primary/80 text-sm font-medium">
+              Top Direction
+            </h4>
             <div className="flex flex-wrap gap-2">
               <DirectionDrawer
                 direction="top"
@@ -315,7 +322,7 @@ export const DirectionExamples: Story = {
 
           {/* Left Direction */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/80">
+            <h4 className="text-fm-primary/80 text-sm font-medium">
               Left Direction
             </h4>
             <div className="flex flex-wrap gap-2">
@@ -329,7 +336,7 @@ export const DirectionExamples: Story = {
 
           {/* Right Direction */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/80">
+            <h4 className="text-fm-primary/80 text-sm font-medium">
               Right Direction
             </h4>
             <div className="flex flex-wrap gap-2">
@@ -791,33 +798,47 @@ export const AccessibilityExample: Story = {
           </DrawerHeader>
 
           <div className="space-y-4 overflow-auto p-4">
-            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-              <h4 className="mb-2 font-medium text-white">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+              <h4 className="text-fm-primary mb-2 font-medium">
                 Keyboard Navigation
               </h4>
-              <ul className="space-y-1 text-sm text-white/80">
+              <ul className="text-fm-primary/80 space-y-1 text-sm">
                 <li>
-                  • <kbd className="rounded bg-white/10 px-1">Tab</kbd> -
-                  Navigate between elements
+                  •{" "}
+                  <kbd className="bg-fm-surface-secondary rounded px-1">
+                    Tab
+                  </kbd>{" "}
+                  - Navigate between elements
                 </li>
                 <li>
-                  • <kbd className="rounded bg-white/10 px-1">Escape</kbd> -
-                  Close drawer
+                  •{" "}
+                  <kbd className="bg-fm-surface-secondary rounded px-1">
+                    Escape
+                  </kbd>{" "}
+                  - Close drawer
                 </li>
                 <li>
-                  • <kbd className="rounded bg-white/10 px-1">Enter</kbd> -
-                  Activate buttons
+                  •{" "}
+                  <kbd className="bg-fm-surface-secondary rounded px-1">
+                    Enter
+                  </kbd>{" "}
+                  - Activate buttons
                 </li>
                 <li>
-                  • <kbd className="rounded bg-white/10 px-1">Space</kbd> -
-                  Activate buttons
+                  •{" "}
+                  <kbd className="bg-fm-surface-secondary rounded px-1">
+                    Space
+                  </kbd>{" "}
+                  - Activate buttons
                 </li>
               </ul>
             </div>
 
-            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-              <h4 className="mb-2 font-medium text-white">Focus Management</h4>
-              <ul className="space-y-1 text-sm text-white/80">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+              <h4 className="text-fm-primary mb-2 font-medium">
+                Focus Management
+              </h4>
+              <ul className="text-fm-primary/80 space-y-1 text-sm">
                 <li>• Automatic focus trapping within drawer</li>
                 <li>• Focus restoration when drawer closes</li>
                 <li>• Proper focus order for all interactive elements</li>
@@ -825,9 +846,9 @@ export const AccessibilityExample: Story = {
               </ul>
             </div>
 
-            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-              <h4 className="mb-2 font-medium text-white">Drag Support</h4>
-              <ul className="space-y-1 text-sm text-white/80">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+              <h4 className="text-fm-primary mb-2 font-medium">Drag Support</h4>
+              <ul className="text-fm-primary/80 space-y-1 text-sm">
                 <li>• Drag to close functionality</li>
                 <li>• Smooth animations during drag</li>
                 <li>• Haptic feedback on mobile devices</li>
@@ -919,20 +940,23 @@ export const OverlayVariations: Story = {
               <DrawerDescription>{description}</DrawerDescription>
             </DrawerHeader>
             <div className="py-4">
-              <div className="grid grid-cols-2 gap-2 text-xs text-white/60">
+              <div className="text-fm-primary/60 grid grid-cols-2 gap-2 text-xs">
                 <div>
                   Opacity:{" "}
-                  <span className="text-white">{opacity || "default"}</span>
+                  <span className="text-fm-primary">
+                    {opacity || "default"}
+                  </span>
                 </div>
                 <div>
                   Glass:{" "}
-                  <span className="text-white">{glass || "default"}</span>
+                  <span className="text-fm-primary">{glass || "default"}</span>
                 </div>
                 <div>
-                  Noise: <span className="text-white">{noise || "none"}</span>
+                  Noise:{" "}
+                  <span className="text-fm-primary">{noise || "none"}</span>
                 </div>
                 <div>
-                  Variant: <span className="text-white">neutral</span>
+                  Variant: <span className="text-fm-primary">neutral</span>
                 </div>
               </div>
             </div>
@@ -949,8 +973,10 @@ export const OverlayVariations: Story = {
     return (
       <div className="space-y-8">
         <div className="text-center">
-          <h3 className="mb-2 font-medium text-white">Overlay Variations</h3>
-          <p className="text-sm text-white/60">
+          <h3 className="text-fm-primary mb-2 font-medium">
+            Overlay Variations
+          </h3>
+          <p className="text-fm-primary/60 text-sm">
             Different overlay effects for various visual styles
           </p>
         </div>
@@ -1033,15 +1059,15 @@ export const VariantExamples: Story = {
     return (
       <div className="space-y-8">
         <div className="text-center">
-          <h3 className="mb-2 font-medium text-white">Drawer Variants</h3>
-          <p className="text-sm text-white/60">
+          <h3 className="text-fm-primary mb-2 font-medium">Drawer Variants</h3>
+          <p className="text-fm-primary/60 text-sm">
             Compare the neutral (default) and gradient variants
           </p>
         </div>
 
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
           <div className="space-y-4">
-            <h4 className="text-center font-medium text-white">
+            <h4 className="text-fm-primary text-center font-medium">
               Neutral Variant (Default)
             </h4>
             <Drawer>
@@ -1059,9 +1085,11 @@ export const VariantExamples: Story = {
                   </DrawerDescription>
                 </DrawerHeader>
                 <div className="py-4">
-                  <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-                    <h5 className="mb-2 font-medium text-white">Features:</h5>
-                    <ul className="space-y-1 text-sm text-white/70">
+                  <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+                    <h5 className="text-fm-primary mb-2 font-medium">
+                      Features:
+                    </h5>
+                    <ul className="text-fm-primary/70 space-y-1 text-sm">
                       <li>• Frosted glass background</li>
                       <li>• Subtle border</li>
                       <li>• Backdrop blur effect</li>
@@ -1079,7 +1107,7 @@ export const VariantExamples: Story = {
           </div>
 
           <div className="space-y-4">
-            <h4 className="text-center font-medium text-white">
+            <h4 className="text-fm-primary text-center font-medium">
               Gradient Variant
             </h4>
             <Drawer>
@@ -1097,9 +1125,11 @@ export const VariantExamples: Story = {
                   </DrawerDescription>
                 </DrawerHeader>
                 <div className="py-4">
-                  <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-                    <h5 className="mb-2 font-medium text-white">Features:</h5>
-                    <ul className="space-y-1 text-sm text-white/70">
+                  <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+                    <h5 className="text-fm-primary mb-2 font-medium">
+                      Features:
+                    </h5>
+                    <ul className="text-fm-primary/70 space-y-1 text-sm">
                       <li>• White gradient background</li>
                       <li>• No border</li>
                       <li>• Clean, modern appearance</li>

package/dist/components/drawer/index.tsx

@@ -65,7 +65,7 @@ function DrawerOverlay({
 }
 
 export const drawerVariants = cva(
-  "flex flex-col gap-5 w-full rounded-fm-s p-4  relative group/drawer-content fixed z-50 h-auto py-2 text-white",
+  "flex flex-col gap-5 w-full rounded-fm-s p-4  relative group/drawer-content fixed z-50 h-auto py-2 text-fm-primary",
   {
     variants: {
       variant: {
@@ -175,7 +175,7 @@ function DrawerTitle({
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
-      className={cn("font-semibold text-white", className)}
+      className={cn("text-fm-primary font-semibold", className)}
       {...props}
     />
   )
@@ -188,7 +188,7 @@ function DrawerDescription({
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
-      className={cn("text-sm text-white", className)}
+      className={cn("text-fm-primary text-sm", className)}
       {...props}
     />
   )

package/dist/components/dropdown/Dropdown.stories.tsx

@@ -138,8 +138,10 @@ export const BasicDropdown: Story = {
   render: () => (
     <div className="space-y-8">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">Basic Dropdown Menus</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">
+          Basic Dropdown Menus
+        </h3>
+        <p className="text-fm-secondary text-sm">
           Simple dropdown menus with different trigger styles and grouped
           content
         </p>
@@ -253,8 +255,10 @@ export const InteractiveStates: Story = {
     return (
       <div className="space-y-8">
         <div className="text-center">
-          <h3 className="mb-2 font-medium text-white">Interactive States</h3>
-          <p className="text-sm text-white/60">
+          <h3 className="text-fm-primary mb-2 font-medium">
+            Interactive States
+          </h3>
+          <p className="text-fm-secondary text-sm">
             Checkboxes, radio groups, and stateful interactions with logical
             grouping
           </p>
@@ -320,11 +324,11 @@ export const InteractiveStates: Story = {
 
         {/* State Display */}
         <div className="text-center">
-          <div className="inline-block rounded-lg border border-white/10 bg-white/5 p-4">
-            <h4 className="mb-2 text-sm font-medium text-white">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary inline-block rounded-lg border p-4">
+            <h4 className="text-fm-primary mb-2 text-sm font-medium">
               Current State
             </h4>
-            <div className="space-y-1 text-xs text-white/60">
+            <div className="text-fm-secondary space-y-1 text-xs">
               <div>Notifications: {notifications ? "On" : "Off"}</div>
               <div>Marketing: {marketing ? "On" : "Off"}</div>
               <div>Theme: {theme}</div>
@@ -349,8 +353,8 @@ export const NestedMenus: Story = {
   render: () => (
     <div className="space-y-8">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">Nested Sub-menus</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">Nested Sub-menus</h3>
+        <p className="text-fm-secondary text-sm">
           Multi-level menus with sub-menu navigation and logical grouping
         </p>
       </div>
@@ -450,8 +454,8 @@ export const KeyboardShortcuts: Story = {
   render: () => (
     <div className="space-y-8">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">Keyboard Shortcuts</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">Keyboard Shortcuts</h3>
+        <p className="text-fm-secondary text-sm">
           Menu items with keyboard shortcut indicators and logical grouping
         </p>
       </div>
@@ -535,8 +539,8 @@ export const CustomStyling: Story = {
   render: () => (
     <div className="space-y-8">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">Custom Styling</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">Custom Styling</h3>
+        <p className="text-fm-secondary text-sm">
           Dropdown menus with custom styling using the classes prop
         </p>
       </div>
@@ -660,8 +664,8 @@ export const ComplexMenu: Story = {
     return (
       <div className="space-y-8">
         <div className="text-center">
-          <h3 className="mb-2 font-medium text-white">Complex Menu</h3>
-          <p className="text-sm text-white/60">
+          <h3 className="text-fm-primary mb-2 font-medium">Complex Menu</h3>
+          <p className="text-fm-secondary text-sm">
             Full-featured dropdown menu with all component types and logical
             grouping
           </p>
@@ -793,11 +797,11 @@ export const ComplexMenu: Story = {
 
         {/* State Display */}
         <div className="text-center">
-          <div className="inline-block rounded-lg border border-white/10 bg-white/5 p-4">
-            <h4 className="mb-2 text-sm font-medium text-white">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary inline-block rounded-lg border p-4">
+            <h4 className="text-fm-primary mb-2 text-sm font-medium">
               Current Settings
             </h4>
-            <div className="space-y-1 text-xs text-white/60">
+            <div className="text-fm-secondary space-y-1 text-xs">
               <div>Bookmarked: {bookmarked ? "Yes" : "No"}</div>
               <div>Notifications: {notifications ? "Enabled" : "Disabled"}</div>
               <div>View Mode: {viewMode}</div>
@@ -822,8 +826,10 @@ export const PositioningExamples: Story = {
   render: () => (
     <div className="space-y-8">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">Positioning Examples</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">
+          Positioning Examples
+        </h3>
+        <p className="text-fm-secondary text-sm">
           Different positioning and alignment options with grouped content
         </p>
       </div>
@@ -831,7 +837,7 @@ export const PositioningExamples: Story = {
       <div className="grid grid-cols-2 gap-8">
         {/* Top Row */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/80">
+          <h4 className="text-fm-secondary text-sm font-medium">
             Alignment Options
           </h4>
           <div className="flex gap-2">
@@ -881,7 +887,7 @@ export const PositioningExamples: Story = {
 
         {/* Bottom Row */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/80">Side Offset</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">Side Offset</h4>
           <div className="flex gap-2">
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
@@ -944,10 +950,10 @@ export const GroupingShowcase: Story = {
   render: () => (
     <div className="space-y-8">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">
+        <h3 className="text-fm-primary mb-2 font-medium">
           DropdownMenuGroup Showcase
         </h3>
-        <p className="text-sm text-white/60">
+        <p className="text-fm-secondary text-sm">
           Demonstrating logical grouping for better organization and
           accessibility
         </p>
@@ -1051,8 +1057,10 @@ export const ArrowShowcase: Story = {
   render: () => (
     <div className="space-y-8">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">DropdownArrow Showcase</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">
+          DropdownArrow Showcase
+        </h3>
+        <p className="text-fm-secondary text-sm">
           Dropdown menus with arrow pointers for better visual connection to
           triggers
         </p>
@@ -1061,7 +1069,7 @@ export const ArrowShowcase: Story = {
       <div className="flex flex-wrap justify-center gap-8">
         {/* Basic Arrow */}
         <div className="space-y-4">
-          <h4 className="text-center text-sm font-medium text-white/80">
+          <h4 className="text-fm-secondary text-center text-sm font-medium">
             Basic Arrow
           </h4>
           <DropdownMenu>
@@ -1094,7 +1102,7 @@ export const ArrowShowcase: Story = {
 
         {/* Custom Styled Arrow */}
         <div className="space-y-4">
-          <h4 className="text-center text-sm font-medium text-white/80">
+          <h4 className="text-fm-secondary text-center text-sm font-medium">
             Custom Styled Arrow
           </h4>
           <DropdownMenu>
@@ -1136,7 +1144,7 @@ export const ArrowShowcase: Story = {
 
         {/* Arrow with Sub-menu */}
         <div className="space-y-4">
-          <h4 className="text-center text-sm font-medium text-white/80">
+          <h4 className="text-fm-secondary text-center text-sm font-medium">
             Arrow with Sub-menu
           </h4>
           <DropdownMenu>
@@ -1186,9 +1194,11 @@ export const ArrowShowcase: Story = {
       </div>
 
       <div className="text-center">
-        <div className="inline-block max-w-lg rounded-lg border border-white/10 bg-white/5 p-4">
-          <h4 className="mb-2 text-sm font-medium text-white">Arrow Usage</h4>
-          <p className="text-xs leading-relaxed text-white/60">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary inline-block max-w-lg rounded-lg border p-4">
+          <h4 className="text-fm-primary mb-2 text-sm font-medium">
+            Arrow Usage
+          </h4>
+          <p className="text-fm-secondary text-xs leading-relaxed">
             The DropdownArrow component creates a visual pointer from the menu
             to its trigger. It automatically inherits the menu's background
             color and can be customized with the className prop. Use it to

package/dist/components/helper-text/HelperText.stories.tsx

@@ -154,7 +154,7 @@ export const WithFormField: Story = {
         <label className="mb-2 block text-sm font-medium">Email Address</label>
         <input
           type="email"
-          className="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+          className="border-fm-divider-secondary w-full rounded-md border px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
           placeholder="Enter your email"
         />
         <div className="mt-1">
@@ -224,7 +224,7 @@ export const AccessibilityExample: Story = {
         <input
           id="accessible-input"
           type="email"
-          className="w-full rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+          className="border-fm-divider-secondary w-full rounded-md border px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
           placeholder="Enter your email"
           aria-describedby="email-helper"
           required