aural-ui 3.0.6 → 4.0.1

package/dist/components/command/Command.stories.tsx

@@ -130,10 +130,10 @@ type Story = StoryObj<typeof Command>
 export const BasicCommand: Story = {
   render: () => (
     <div className="mx-auto max-w-lg p-8">
-      <h3 className="mb-4 text-lg font-medium text-white">
+      <h3 className="text-fm-primary mb-4 text-lg font-medium">
         Basic Command Menu
       </h3>
-      <Command className="rounded-lg border border-white/10">
+      <Command className="border-fm-divider-secondary rounded-lg border">
         <CommandInput placeholder="Type a command or search..." />
         <CommandList>
           <CommandEmpty>No results found.</CommandEmpty>
@@ -198,10 +198,10 @@ export const CommandDialogExample: Story = {
     return (
       <div className="space-y-8 p-8">
         <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">
             Command Dialog
           </h3>
-          <p className="text-sm text-white/60">
+          <p className="text-fm-secondary text-sm">
             Press{" "}
             <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
               <span className="text-xs">⌘</span>K
@@ -309,14 +309,14 @@ export const CommandDialogExample: Story = {
 export const FileManagementCommands: Story = {
   render: () => (
     <div className="mx-auto max-w-lg space-y-8 p-8">
-      <h3 className="text-lg font-medium text-white">File Management</h3>
-      <Command className="rounded-lg border border-white/10">
+      <h3 className="text-fm-primary text-lg font-medium">File Management</h3>
+      <Command className="border-fm-divider-secondary rounded-lg border">
         <CommandInput placeholder="Search files and actions..." />
         <CommandList>
           <CommandEmpty>
             <div className="py-6 text-center">
-              <SearchIcon className="mx-auto h-8 w-8 text-white/30" />
-              <p className="mt-2 text-sm text-white/60">
+              <SearchIcon className="text-fm-tertiary mx-auto h-8 w-8" />
+              <p className="text-fm-secondary mt-2 text-sm">
                 No files or actions found.
               </p>
             </div>
@@ -494,13 +494,15 @@ export const SearchAndFilterCommands: Story = {
     return (
       <div className="mx-auto max-w-lg space-y-8 p-8">
         <div className="space-y-2">
-          <h3 className="text-lg font-medium text-white">Search and Filter</h3>
-          <p className="text-sm text-white/60">
+          <h3 className="text-fm-primary text-lg font-medium">
+            Search and Filter
+          </h3>
+          <p className="text-fm-secondary text-sm">
             Dynamic filtering based on search input
           </p>
         </div>
 
-        <Command className="rounded-lg border border-white/10">
+        <Command className="border-fm-divider-secondary rounded-lg border">
           <CommandInput
             placeholder="Search apps, files, and more..."
             value={searchTerm}
@@ -509,11 +511,11 @@ export const SearchAndFilterCommands: Story = {
           <CommandList>
             <CommandEmpty>
               <div className="py-6 text-center">
-                <SearchIcon className="mx-auto h-8 w-8 text-white/30" />
-                <p className="mt-2 text-sm text-white/60">
+                <SearchIcon className="text-fm-tertiary mx-auto h-8 w-8" />
+                <p className="text-fm-secondary mt-2 text-sm">
                   No results for "{searchTerm}"
                 </p>
-                <p className="text-xs text-white/40">
+                <p className="text-fm-tertiary text-xs">
                   Try searching for something else
                 </p>
               </div>
@@ -538,9 +540,11 @@ export const SearchAndFilterCommands: Story = {
         </Command>
 
         {searchTerm && (
-          <div className="rounded-lg border border-white/10 bg-white/5 p-4">
-            <h4 className="text-sm font-medium text-white">Search Stats</h4>
-            <div className="mt-2 space-y-1 text-xs text-white/60">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+            <h4 className="text-fm-primary text-sm font-medium">
+              Search Stats
+            </h4>
+            <div className="text-fm-secondary mt-2 space-y-1 text-xs">
               <p>Search term: "{searchTerm}"</p>
               <p>Results found: {filteredItems.length}</p>
               <p>Groups: {Object.keys(groupedItems).length}</p>
@@ -564,16 +568,18 @@ export const SearchAndFilterCommands: Story = {
 export const CustomStylingVariants: 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">
         Custom Styling Variants
       </h3>
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
         {/* Elevated Command */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Elevated Style</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">
+            Elevated Style
+          </h4>
           <Command
-            className="rounded-lg border border-white/10"
+            className="border-fm-divider-secondary rounded-lg border"
             listProps={{ variant: "elevated", size: "lg" }}
           >
             <CommandInput placeholder="Elevated command menu..." />
@@ -599,9 +605,11 @@ export const CustomStylingVariants: Story = {
 
         {/* Compact Command */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Compact Style</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">
+            Compact Style
+          </h4>
           <Command
-            className="rounded-lg border border-white/10"
+            className="border-fm-divider-secondary rounded-lg border"
             listProps={{ size: "sm" }}
           >
             <CommandInput
@@ -634,9 +642,9 @@ export const CustomStylingVariants: Story = {
 
         {/* Flat Style */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Flat Style</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">Flat Style</h4>
           <Command
-            className="rounded-lg border border-white/10"
+            className="border-fm-divider-secondary rounded-lg border"
             listProps={{ variant: "flat", rounded: "lg" }}
           >
             <CommandInput placeholder="Flat design menu..." />
@@ -659,7 +667,9 @@ export const CustomStylingVariants: Story = {
 
         {/* Custom Classes */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Custom Classes</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">
+            Custom Classes
+          </h4>
           <Command
             className="rounded-lg border border-purple-500/30 bg-purple-900/10"
             classes={{
@@ -706,20 +716,20 @@ export const CustomStylingVariants: Story = {
 export const ComplexCommandStructure: Story = {
   render: () => (
     <div className="mx-auto max-w-lg space-y-8 p-8">
-      <h3 className="text-lg font-medium text-white">
+      <h3 className="text-fm-primary text-lg font-medium">
         Complex Command Structure
       </h3>
 
-      <Command className="rounded-lg border border-white/10">
+      <Command className="border-fm-divider-secondary rounded-lg border">
         <CommandInput placeholder="Search all commands..." />
         <CommandList>
           <CommandEmpty>
             <div className="py-8 text-center">
-              <SearchIcon className="mx-auto h-12 w-12 text-white/20" />
-              <h4 className="mt-2 text-sm font-medium text-white">
+              <SearchIcon className="text-fm-tertiary mx-auto h-12 w-12" />
+              <h4 className="text-fm-primary mt-2 text-sm font-medium">
                 No commands found
               </h4>
-              <p className="mt-1 text-xs text-white/60">
+              <p className="text-fm-secondary mt-1 text-xs">
                 Try adjusting your search to find what you're looking for.
               </p>
             </div>
@@ -912,17 +922,19 @@ export const PerformanceDemo: Story = {
     return (
       <div className="space-y-8 p-8">
         <div className="space-y-4 text-center">
-          <h3 className="text-lg font-medium text-white">Performance Demo</h3>
-          <p className="text-sm text-white/60">
+          <h3 className="text-fm-primary text-lg font-medium">
+            Performance Demo
+          </h3>
+          <p className="text-fm-secondary text-sm">
             Test command menu performance with large datasets
           </p>
 
           <div className="flex items-center justify-center gap-4">
-            <label className="text-sm text-white/70">Items:</label>
+            <label className="text-fm-secondary text-sm">Items:</label>
             <select
               value={itemCount}
               onChange={(e) => setItemCount(Number(e.target.value))}
-              className="rounded border border-white/20 bg-white/10 px-3 py-1 text-white"
+              className="border-fm-divider-secondary bg-fm-surface-secondary text-fm-primary rounded border px-3 py-1"
             >
               <option value={50}>50</option>
               <option value={100}>100</option>
@@ -934,7 +946,7 @@ export const PerformanceDemo: Story = {
         </div>
 
         <div className="mx-auto max-w-lg">
-          <Command className="rounded-lg border border-white/10">
+          <Command className="border-fm-divider-secondary rounded-lg border">
             <CommandInput placeholder={`Search ${itemCount} items...`} />
             <CommandList>
               <CommandEmpty>
@@ -970,9 +982,11 @@ export const PerformanceDemo: Story = {
           </Command>
         </div>
 
-        <div className="mx-auto max-w-lg rounded-lg border border-white/10 bg-white/5 p-4">
-          <h4 className="text-sm font-medium text-white">Performance Info</h4>
-          <div className="mt-2 grid grid-cols-2 gap-4 text-xs text-white/60">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary mx-auto max-w-lg rounded-lg border p-4">
+          <h4 className="text-fm-primary text-sm font-medium">
+            Performance Info
+          </h4>
+          <div className="text-fm-secondary mt-2 grid grid-cols-2 gap-4 text-xs">
             <div>Total Items: {itemCount}</div>
             <div>Categories: {Object.keys(groupedItems).length}</div>
             <div>