aural-ui 3.0.7 → 4.0.1

package/dist/components/sheet/Sheet.stories.tsx

@@ -195,13 +195,13 @@ export const SidesAndVariants: Story = {
       {/* Control Panel */}
       <div className="fixed top-4 left-1/2 z-50 -translate-x-1/2 transform">
         <div className="space-y-4 rounded-lg bg-black/80 p-6 backdrop-blur-sm">
-          <h3 className="text-center text-sm font-medium text-white">
+          <h3 className="text-fm-primary text-center text-sm font-medium">
             Sheet Sides & Variants
           </h3>
 
           {/* Sides */}
           <div className="space-y-2">
-            <h4 className="text-xs font-medium tracking-wide text-white/70 uppercase">
+            <h4 className="text-fm-secondary text-xs font-medium tracking-wide uppercase">
               Sides
             </h4>
             <div className="grid grid-cols-2 gap-2">
@@ -221,8 +221,8 @@ export const SidesAndVariants: Story = {
                   </SheetHeader>
                   <div className="py-4">
                     <div className="space-y-4">
-                      <div className="rounded-lg bg-white/5 p-4">
-                        <h4 className="mb-2 font-medium text-white">
+                      <div className="bg-fm-surface-secondary rounded-lg p-4">
+                        <h4 className="text-fm-primary mb-2 font-medium">
                           Navigation Menu
                         </h4>
                         <div className="space-y-2">
@@ -230,10 +230,10 @@ export const SidesAndVariants: Story = {
                             (item) => (
                               <div
                                 key={item}
-                                className="flex items-center gap-3 rounded p-2 hover:bg-white/10"
+                                className="hover:bg-fm-surface-tertiary flex items-center gap-3 rounded p-2"
                               >
-                                <SiteLogoIcon className="h-4 w-4 text-white/60" />
-                                <span className="text-white">{item}</span>
+                                <SiteLogoIcon className="text-fm-secondary h-4 w-4" />
+                                <span className="text-fm-primary">{item}</span>
                               </div>
                             )
                           )}
@@ -259,14 +259,14 @@ export const SidesAndVariants: Story = {
                     </SheetDescription>
                   </SheetHeader>
                   <div className="py-4">
-                    <div className="rounded-lg border border-green-500/20 bg-green-500/10 p-4">
+                    <div className="border-fm-divider-positive bg-fm-surface-positive-sec rounded-lg border p-4">
                       <div className="mb-2 flex items-center gap-2">
-                        <TickCircleIcon className="h-5 w-5 text-green-400" />
-                        <h4 className="font-medium text-white">
+                        <TickCircleIcon className="text-fm-icon-positive h-5 w-5" />
+                        <h4 className="text-fm-primary font-medium">
                           Success Panel
                         </h4>
                       </div>
-                      <p className="text-sm text-white/80">
+                      <p className="text-fm-secondary text-sm">
                         This demonstrates the positive variant with green accent
                         border.
                       </p>
@@ -290,14 +290,14 @@ export const SidesAndVariants: Story = {
                     </SheetDescription>
                   </SheetHeader>
                   <div className="py-4">
-                    <div className="rounded-lg border border-yellow-500/20 bg-yellow-500/10 p-4">
+                    <div className="border-fm-divider-warning bg-fm-surface-warning-sec rounded-lg border p-4">
                       <div className="mb-2 flex items-center gap-2">
-                        <AlertIcon className="h-5 w-5 text-yellow-400" />
-                        <h4 className="font-medium text-white">
+                        <AlertIcon className="text-fm-warning h-5 w-5" />
+                        <h4 className="text-fm-primary font-medium">
                           Warning Notice
                         </h4>
                       </div>
-                      <p className="text-sm text-white/80">
+                      <p className="text-fm-secondary text-sm">
                         Top sheets are great for notifications and warnings.
                       </p>
                     </div>
@@ -320,14 +320,14 @@ export const SidesAndVariants: Story = {
                     </SheetDescription>
                   </SheetHeader>
                   <div className="py-4">
-                    <div className="rounded-lg border border-blue-500/20 bg-blue-500/10 p-4">
+                    <div className="border-fm-divider-secondary bg-fm-surface-info-sec rounded-lg border p-4">
                       <div className="mb-2 flex items-center gap-2">
-                        <FileChartIcon className="h-5 w-5 text-blue-400" />
-                        <h4 className="font-medium text-white">
+                        <FileChartIcon className="text-fm-icon-info h-5 w-5" />
+                        <h4 className="text-fm-primary font-medium">
                           Information Panel
                         </h4>
                       </div>
-                      <p className="text-sm text-white/80">
+                      <p className="text-fm-secondary text-sm">
                         Bottom sheets work well for mobile-style interactions.
                       </p>
                     </div>
@@ -339,7 +339,7 @@ export const SidesAndVariants: Story = {
 
           {/* Error Variant */}
           <div className="space-y-2">
-            <h4 className="text-xs font-medium tracking-wide text-white/70 uppercase">
+            <h4 className="text-fm-secondary text-xs font-medium tracking-wide uppercase">
               Error Variant
             </h4>
             <Sheet>
@@ -356,19 +356,21 @@ export const SidesAndVariants: Story = {
                   </SheetDescription>
                 </SheetHeader>
                 <div className="py-4">
-                  <div className="rounded-lg border border-red-500/20 bg-red-500/10 p-4">
+                  <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
                     <div className="mb-2 flex items-center gap-2">
-                      <AlertIcon className="h-5 w-5 text-red-400" />
-                      <h4 className="font-medium text-white">Error Details</h4>
+                      <AlertIcon className="text-fm-icon-negative h-5 w-5" />
+                      <h4 className="text-fm-primary font-medium">
+                        Error Details
+                      </h4>
                     </div>
-                    <p className="mb-3 text-sm text-white/80">
+                    <p className="text-fm-secondary mb-3 text-sm">
                       Something went wrong. Please check the details below.
                     </p>
                     <div className="space-y-2">
-                      <div className="text-xs text-red-200">
+                      <div className="text-fm-secondary text-xs">
                         • Network connection failed
                       </div>
-                      <div className="text-xs text-red-200">
+                      <div className="text-fm-secondary text-xs">
                         • Invalid response format
                       </div>
                     </div>
@@ -463,8 +465,8 @@ export const NavigationSheet: Story = {
                       href="#"
                       className={`flex items-center gap-3 rounded-lg p-3 transition-colors ${
                         item.active
-                          ? "bg-blue-500/20 text-blue-300"
-                          : "text-white hover:bg-white/10"
+                          ? "bg-fm-surface-info-sec text-fm-info"
+                          : "text-fm-primary hover:bg-fm-surface-secondary"
                       }`}
                     >
                       <item.icon className="h-5 w-5" />
@@ -483,8 +485,8 @@ export const NavigationSheet: Story = {
                 </nav>
 
                 <div className="mt-8 space-y-4">
-                  <div className="rounded-lg bg-white/5 p-4">
-                    <h4 className="mb-2 text-sm font-medium text-white">
+                  <div className="bg-fm-surface-secondary rounded-lg p-4">
+                    <h4 className="text-fm-primary mb-2 text-sm font-medium">
                       Quick Actions
                     </h4>
                     <div className="space-y-2">
@@ -511,11 +513,15 @@ export const NavigationSheet: Story = {
 
               <SheetFooter>
                 <div className="w-full space-y-2">
-                  <div className="flex items-center gap-3 rounded-lg bg-white/5 p-3">
+                  <div className="bg-fm-surface-secondary flex items-center gap-3 rounded-lg p-3">
                     <div className="h-8 w-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-500"></div>
                     <div>
-                      <p className="text-sm font-medium text-white">John Doe</p>
-                      <p className="text-xs text-white/60">john@example.com</p>
+                      <p className="text-fm-primary text-sm font-medium">
+                        John Doe
+                      </p>
+                      <p className="text-fm-secondary text-xs">
+                        john@example.com
+                      </p>
                     </div>
                   </div>
                   <SheetClose asChild>
@@ -528,7 +534,7 @@ export const NavigationSheet: Story = {
             </SheetContent>
           </Sheet>
 
-          <h1 className="text-lg font-semibold text-white">App Title</h1>
+          <h1 className="text-fm-primary text-lg font-semibold">App Title</h1>
 
           <IconButton
             variant="ghost"
@@ -665,8 +671,8 @@ export const FormSheet: Story = {
                     </Label>
                   </div>
 
-                  <div className="rounded-lg bg-blue-500/10 p-3">
-                    <p className="text-xs text-blue-200">
+                  <div className="bg-fm-surface-info-sec rounded-lg p-3">
+                    <p className="text-fm-info text-xs">
                       We typically respond within 24 hours. For urgent matters,
                       please call our support line.
                     </p>
@@ -749,12 +755,12 @@ export const SettingsPanelSheet: Story = {
                 <div className="space-y-6">
                   {/* Notifications Section */}
                   <div className="space-y-3">
-                    <h4 className="text-sm font-medium text-white">
+                    <h4 className="text-fm-primary text-sm font-medium">
                       Notifications
                     </h4>
                     <div className="space-y-3">
                       <div className="flex items-center justify-between">
-                        <span className="text-sm text-white">
+                        <span className="text-fm-primary text-sm">
                           Push Notifications
                         </span>
                         <Checkbox
@@ -764,7 +770,7 @@ export const SettingsPanelSheet: Story = {
                       </div>
 
                       <div className="flex items-center justify-between">
-                        <span className="text-sm text-white">
+                        <span className="text-fm-primary text-sm">
                           Email Updates
                         </span>
                         <Checkbox
@@ -774,7 +780,9 @@ export const SettingsPanelSheet: Story = {
                       </div>
 
                       <div className="flex items-center justify-between">
-                        <span className="text-sm text-white">Analytics</span>
+                        <span className="text-fm-primary text-sm">
+                          Analytics
+                        </span>
                         <Checkbox
                           checked={settings.analytics}
                           onCheckedChange={() => toggleSetting("analytics")}
@@ -785,12 +793,14 @@ export const SettingsPanelSheet: Story = {
 
                   {/* Appearance Section */}
                   <div className="space-y-3">
-                    <h4 className="text-sm font-medium text-white">
+                    <h4 className="text-fm-primary text-sm font-medium">
                       Appearance
                     </h4>
                     <div className="space-y-3">
                       <div className="flex items-center justify-between">
-                        <span className="text-sm text-white">Dark Mode</span>
+                        <span className="text-fm-primary text-sm">
+                          Dark Mode
+                        </span>
                         <Checkbox
                           checked={settings.darkMode}
                           onCheckedChange={() => toggleSetting("darkMode")}
@@ -801,10 +811,14 @@ export const SettingsPanelSheet: Story = {
 
                   {/* Advanced Section */}
                   <div className="space-y-3">
-                    <h4 className="text-sm font-medium text-white">Advanced</h4>
+                    <h4 className="text-fm-primary text-sm font-medium">
+                      Advanced
+                    </h4>
                     <div className="space-y-3">
                       <div className="flex items-center justify-between">
-                        <span className="text-sm text-white">Auto Save</span>
+                        <span className="text-fm-primary text-sm">
+                          Auto Save
+                        </span>
                         <Checkbox
                           checked={settings.autoSave}
                           onCheckedChange={() => toggleSetting("autoSave")}
@@ -861,7 +875,7 @@ export const OverlayVariations: Story = {
 
       <div className="fixed bottom-4 left-1/2 z-50 -translate-x-1/2 transform">
         <div className="space-y-2 rounded-lg bg-black/80 p-4 backdrop-blur-sm">
-          <h3 className="text-center text-sm font-medium text-white">
+          <h3 className="text-fm-primary text-center text-sm font-medium">
             Overlay Variations
           </h3>
           <div className="flex gap-2">
@@ -880,7 +894,7 @@ export const OverlayVariations: Story = {
                   </SheetDescription>
                 </SheetHeader>
                 <div className="py-4">
-                  <p className="text-sm text-white/80">
+                  <p className="text-fm-secondary text-sm">
                     This sheet uses low opacity overlay, allowing more of the
                     background content to remain visible.
                   </p>
@@ -903,7 +917,7 @@ export const OverlayVariations: Story = {
                   </SheetDescription>
                 </SheetHeader>
                 <div className="py-4">
-                  <p className="text-sm text-white/80">
+                  <p className="text-fm-secondary text-sm">
                     This sheet uses high opacity overlay, creating strong focus
                     on the sheet content by dimming the background
                     significantly.
@@ -927,7 +941,7 @@ export const OverlayVariations: Story = {
                   </SheetDescription>
                 </SheetHeader>
                 <div className="py-4">
-                  <p className="text-sm text-white/80">
+                  <p className="text-fm-secondary text-sm">
                     This sheet includes a glass effect with backdrop blur,
                     creating a modern frosted glass appearance.
                   </p>
@@ -950,7 +964,7 @@ export const OverlayVariations: Story = {
                   </SheetDescription>
                 </SheetHeader>
                 <div className="py-4">
-                  <p className="text-sm text-white/80">
+                  <p className="text-fm-secondary text-sm">
                     This sheet includes noise texture overlay, adding visual
                     interest and depth to the background.
                   </p>
@@ -1008,8 +1022,8 @@ export const MobileBottomSheet: Story = {
                       onClick={() => setSelectedOption(option.name)}
                       className={`flex flex-col items-center gap-2 rounded-lg p-3 transition-colors ${
                         selectedOption === option.name
-                          ? "bg-blue-500/20 text-blue-300"
-                          : "text-white hover:bg-white/10"
+                          ? "bg-fm-surface-info-sec text-fm-info"
+                          : "text-fm-primary hover:bg-fm-surface-secondary"
                       }`}
                     >
                       <option.icon className="h-6 w-6" />
@@ -1019,16 +1033,16 @@ export const MobileBottomSheet: Story = {
                 </div>
 
                 <div className="space-y-2">
-                  <h4 className="text-sm font-medium text-white">
+                  <h4 className="text-fm-primary text-sm font-medium">
                     Recent Contacts
                   </h4>
                   {Array.from({ length: 3 }, (_, i) => (
                     <div
                       key={i}
-                      className="flex items-center gap-3 rounded-lg p-2 hover:bg-white/10"
+                      className="hover:bg-fm-surface-secondary flex items-center gap-3 rounded-lg p-2"
                     >
                       <div className="h-8 w-8 rounded-full bg-gradient-to-r from-blue-500 to-purple-500"></div>
-                      <span className="text-sm text-white">
+                      <span className="text-fm-primary text-sm">
                         Contact {i + 1}
                       </span>
                     </div>