aural-ui 3.0.6 → 4.0.1

package/dist/components/dialog/Dialog.stories.tsx

@@ -170,14 +170,14 @@ export const BorderConfigurations: Story = {
               <DialogDescription>{description}</DialogDescription>
             </DialogHeader>
             <div className="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-secondary space-y-1 text-xs">
                   <div>
-                    Variant: <span className="text-white">{variant}</span>
+                    Variant: <span className="text-fm-primary">{variant}</span>
                   </div>
                   <div>
                     Border Config:{" "}
-                    <span className="text-white">
+                    <span className="text-fm-primary">
                       {Array.isArray(borderConfig)
                         ? `[${borderConfig.join(", ")}]`
                         : borderConfig}
@@ -199,8 +199,10 @@ export const BorderConfigurations: Story = {
     return (
       <div className="space-y-8">
         <div className="text-center">
-          <h3 className="mb-2 font-medium text-white">Border Configurations</h3>
-          <p className="text-sm text-white/60">
+          <h3 className="text-fm-primary mb-2 font-medium">
+            Border Configurations
+          </h3>
+          <p className="text-fm-secondary text-sm">
             Explore different border configurations for dialog variants
           </p>
         </div>
@@ -208,7 +210,9 @@ export const BorderConfigurations: Story = {
         <div className="space-y-6">
           {/* All Borders */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/80">All Borders</h4>
+            <h4 className="text-fm-secondary text-sm font-medium">
+              All Borders
+            </h4>
             <div className="flex flex-wrap gap-2">
               <BorderConfigDialog
                 borderConfig="all"
@@ -233,7 +237,7 @@ export const BorderConfigurations: Story = {
 
           {/* Single Sides */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/80">
+            <h4 className="text-fm-secondary text-sm font-medium">
               Single Side Borders
             </h4>
             <div className="flex flex-wrap gap-2">
@@ -266,7 +270,7 @@ export const BorderConfigurations: Story = {
 
           {/* Two Sides */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/80">
+            <h4 className="text-fm-secondary text-sm font-medium">
               Two Side Borders
             </h4>
             <div className="flex flex-wrap gap-2">
@@ -299,7 +303,7 @@ export const BorderConfigurations: Story = {
 
           {/* Three Sides */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/80">
+            <h4 className="text-fm-secondary text-sm font-medium">
               Three Side Borders
             </h4>
             <div className="flex flex-wrap gap-2">
@@ -320,7 +324,9 @@ export const BorderConfigurations: Story = {
 
           {/* No Border */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/80">No Borders</h4>
+            <h4 className="text-fm-secondary text-sm font-medium">
+              No Borders
+            </h4>
             <div className="flex flex-wrap gap-2">
               <BorderConfigDialog
                 borderConfig="none"
@@ -362,7 +368,6 @@ export const DialogCleanupExample: Story = {
             <Button>Open Dialog with Cleanup</Button>
           </DialogTrigger>
           <DialogContent
-            borderConfig="all"
             variant="info"
             //@ts-expect-error onEscapeKeyDown available in Radix v2.0.0
             onEscapeKeyDown={handleClose}
@@ -376,8 +381,8 @@ export const DialogCleanupExample: Story = {
               </DialogDescription>
             </DialogHeader>
             <div className="py-4">
-              <div className="rounded-lg border border-blue-500/20 bg-blue-500/10 p-3">
-                <p className="text-sm text-blue-200">
+              <div className="border-fm-info bg-fm-surface-info-sec rounded-lg border p-3">
+                <p className="text-fm-info text-sm">
                   The useDialogCleanup hook ensures that pointer-events: none
                   doesn't get stuck on the body element when the dialog closes,
                   which was a common issue in React 18.
@@ -400,8 +405,10 @@ export const DialogCleanupExample: Story = {
     return (
       <div className="space-y-8">
         <div className="text-center">
-          <h3 className="mb-2 font-medium text-white">Dialog Cleanup Hook</h3>
-          <p className="text-sm text-white/60">
+          <h3 className="text-fm-primary mb-2 font-medium">
+            Dialog Cleanup Hook
+          </h3>
+          <p className="text-fm-secondary text-sm">
             Demonstrates useDialogCleanup hook for React 18 compatibility
           </p>
         </div>
@@ -466,10 +473,10 @@ export const BasicVariants: Story = {
     return (
       <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">
             Dialog Variants with Border Styles
           </h3>
-          <p className="text-sm text-white/60">
+          <p className="text-fm-secondary text-sm">
             Different dialog variants with customized border configurations
           </p>
         </div>
@@ -477,11 +484,10 @@ export const BasicVariants: Story = {
         <div className="flex flex-wrap justify-center gap-4">
           <DialogWithCleanupVariant
             variant="neutral"
-            borderConfig="top"
             title="Neutral Dialog"
             description="This is a neutral dialog with top border."
           >
-            <p className="text-sm text-white/80">
+            <p className="text-fm-secondary text-sm">
               Neutral dialogs with minimal top border accent are perfect for
               general information and settings.
             </p>
@@ -489,15 +495,14 @@ export const BasicVariants: Story = {
 
           <DialogWithCleanupVariant
             variant="positive"
-            borderConfig="all"
             title="Success Dialog"
             description="Operation completed successfully!"
           >
             <div className="mb-2 flex items-center gap-2">
-              <TickIcon className="h-5 w-5 text-green-400" />
-              <span className="font-medium text-green-400">Success!</span>
+              <TickIcon className="text-fm-positive h-5 w-5" />
+              <span className="text-fm-positive font-medium">Success!</span>
             </div>
-            <p className="text-sm text-white/80">
+            <p className="text-fm-secondary text-sm">
               Success dialogs with full border frame provide strong positive
               feedback.
             </p>
@@ -505,16 +510,15 @@ export const BasicVariants: Story = {
 
           <DialogWithCleanupVariant
             variant="warning"
-            borderConfig={["top", "bottom"]}
             title="Warning Dialog"
             description="Please review the following before proceeding."
           >
-            <div className="rounded-lg border border-yellow-500/20 bg-yellow-500/10 p-3">
+            <div className="border-fm-divider-warning bg-fm-surface-warning-alpha-15 rounded-lg border p-3">
               <div className="mb-2 flex items-center gap-2">
-                <AlertIcon className="h-4 w-4 text-yellow-400" />
-                <span className="font-medium text-yellow-400">Warning</span>
+                <AlertIcon className="text-fm-warning h-4 w-4" />
+                <span className="text-fm-warning font-medium">Warning</span>
               </div>
-              <p className="text-sm text-yellow-200">
+              <p className="text-fm-warning-sec text-sm">
                 Warning dialogs with horizontal borders create focused
                 attention.
               </p>
@@ -523,16 +527,15 @@ export const BasicVariants: Story = {
 
           <DialogWithCleanupVariant
             variant="negative"
-            borderConfig={["left", "right"]}
             title="Error Dialog"
             description="An error occurred that requires your attention."
           >
-            <div className="rounded-lg border border-red-500/20 bg-red-500/10 p-3">
+            <div className="border-fm-divider-negative bg-fm-surface-negative-alpha-15 rounded-lg border p-3">
               <div className="mb-2 flex items-center gap-2">
-                <AlertIcon className="h-4 w-4 text-red-400" />
-                <span className="font-medium text-red-400">Error</span>
+                <AlertIcon className="text-fm-negative h-4 w-4" />
+                <span className="text-fm-negative font-medium">Error</span>
               </div>
-              <p className="text-sm text-red-200">
+              <p className="text-fm-negative-sec text-sm">
                 Error dialogs with vertical borders provide urgent visual cues.
               </p>
             </div>
@@ -540,16 +543,15 @@ export const BasicVariants: Story = {
 
           <DialogWithCleanupVariant
             variant="info"
-            borderConfig="none"
             title="Information Dialog"
             description="Here's some important information for you."
           >
-            <div className="rounded-lg border border-blue-500/20 bg-blue-500/10 p-3">
+            <div className="border-fm-info bg-fm-surface-info-alpha-15 rounded-lg border p-3">
               <div className="mb-2 flex items-center gap-2">
-                <LightBulbSimpleIcon className="h-4 w-4 text-blue-400" />
-                <span className="font-medium text-blue-400">Information</span>
+                <LightBulbSimpleIcon className="text-fm-info h-4 w-4" />
+                <span className="text-fm-info font-medium">Information</span>
               </div>
-              <p className="text-sm text-blue-200">
+              <p className="text-fm-info-sec text-sm">
                 Clean info dialogs without borders for minimal, focused content
                 presentation.
               </p>
@@ -604,7 +606,6 @@ export const NestedModalWithCleanup: Story = {
             </DialogTrigger>
             <DialogContent
               className="max-w-md"
-              borderConfig={["top", "left", "right"]}
               variant="neutral"
               //@ts-expect-error onEscapeKeyDown available in Radix v2.0.0
               onEscapeKeyDown={handleEditClose}
@@ -651,7 +652,6 @@ export const NestedModalWithCleanup: Story = {
           <Dialog open={isDeleteOpen} onOpenChange={setIsDeleteOpen}>
             <DialogContent
               variant="negative"
-              borderConfig="all"
               classes={{
                 root: "max-w-sm",
                 overlay: "z-60",
@@ -663,7 +663,7 @@ export const NestedModalWithCleanup: Story = {
             >
               <DialogHeader>
                 <DialogTitle className="flex items-center gap-2">
-                  <AlertIcon className="h-5 w-5 text-red-400" />
+                  <AlertIcon className="text-fm-negative h-5 w-5" />
                   Delete Account
                 </DialogTitle>
                 <DialogDescription>
@@ -672,8 +672,8 @@ export const NestedModalWithCleanup: Story = {
               </DialogHeader>
 
               <div className="py-4">
-                <div className="rounded-lg border border-red-500/20 bg-red-500/10 p-3">
-                  <p className="text-sm text-red-200">
+                <div className="border-fm-divider-negative bg-fm-surface-negative-alpha-15 rounded-lg border p-3">
+                  <p className="text-fm-negative-sec text-sm">
                     Are you absolutely sure you want to delete this account?
                     This will permanently remove all associated data.
                   </p>
@@ -698,10 +698,10 @@ export const NestedModalWithCleanup: Story = {
     return (
       <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">
             Nested Modal with Custom Borders
           </h3>
-          <p className="text-sm text-white/60">
+          <p className="text-fm-secondary text-sm">
             Modal-on-modal with different border configurations
           </p>
         </div>
@@ -754,7 +754,6 @@ export const FormDialog: Story = {
           </DialogTrigger>
           <DialogContent
             className="max-w-md"
-            borderConfig={["top", "bottom"]}
             variant="info"
             //@ts-expect-error onEscapeKeyDown available in Radix v2.0.0
             onEscapeKeyDown={handleClose}
@@ -855,8 +854,8 @@ export const FormDialog: Story = {
     return (
       <div className="space-y-8">
         <div className="text-center">
-          <h3 className="mb-2 font-medium text-white">Form Dialog</h3>
-          <p className="text-sm text-white/60">
+          <h3 className="text-fm-primary mb-2 font-medium">Form Dialog</h3>
+          <p className="text-fm-secondary text-sm">
             Dialog containing form elements with horizontal border accent
           </p>
         </div>
@@ -908,21 +907,24 @@ export const OverlayVariations: Story = {
               <DialogDescription>{description}</DialogDescription>
             </DialogHeader>
             <div className="py-4">
-              <div className="grid grid-cols-2 gap-2 text-xs text-white/60">
+              <div className="text-fm-secondary 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>
                   Border:{" "}
-                  <span className="text-white">
+                  <span className="text-fm-primary">
                     {Array.isArray(borderConfig)
                       ? `[${borderConfig.join(", ")}]`
                       : borderConfig || "top"}
@@ -943,10 +945,10 @@ export const OverlayVariations: Story = {
     return (
       <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">
             Overlay Variations with Borders
           </h3>
-          <p className="text-sm text-white/60">
+          <p className="text-fm-secondary text-sm">
             Different overlay effects combined with border configurations
           </p>
         </div>
@@ -954,49 +956,41 @@ export const OverlayVariations: Story = {
         <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
           <OverlayDialog
             opacity="low"
-            borderConfig="top"
             title="Low Opacity"
             description="Subtle background dimming (40%)"
           />
           <OverlayDialog
             opacity="medium"
-            borderConfig={["top", "bottom"]}
             title="Medium Opacity"
             description="Balanced background dimming (60%)"
           />
           <OverlayDialog
             opacity="high"
-            borderConfig="all"
             title="High Opacity"
             description="Strong background dimming (80%)"
           />
           <OverlayDialog
             opacity="none"
-            borderConfig="none"
             title="Full Opacity"
             description="Complete background coverage (100%)"
           />
           <OverlayDialog
             glass="low"
-            borderConfig={["left", "right"]}
             title="Low Glass"
             description="Subtle backdrop blur effect"
           />
           <OverlayDialog
             glass="medium"
-            borderConfig="all"
             title="Medium Glass"
             description="Balanced backdrop blur effect"
           />
           <OverlayDialog
             glass="high"
-            borderConfig="top"
             title="High Glass"
             description="Strong backdrop blur effect"
           />
           <OverlayDialog
             noise="low"
-            borderConfig={["top", "left", "right"]}
             title="Low Noise"
             description="Subtle texture pattern"
           />
@@ -1026,7 +1020,6 @@ export const AccessibilityExample: Story = {
             <Button>Accessible Dialog Demo</Button>
           </DialogTrigger>
           <DialogContent
-            borderConfig="all"
             variant="info"
             //@ts-expect-error onEscapeKeyDown available in Radix v2.0.0
             onEscapeKeyDown={handleDialogClose}
@@ -1041,11 +1034,11 @@ export const AccessibilityExample: Story = {
             </DialogHeader>
 
             <div className="space-y-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">
                   Border Configuration
                 </h4>
-                <ul className="space-y-1 text-sm text-white/80">
+                <ul className="text-fm-secondary space-y-1 text-sm">
                   <li>• Complete border frame for maximum visual emphasis</li>
                   <li>• Customizable per dialog context and importance</li>
                   <li>• Maintains accessibility contrast ratios</li>
@@ -1053,35 +1046,47 @@ 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">
+              <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-secondary space-y-1 text-sm">
                   <li>
-                    • <kbd className="rounded bg-white/10 px-1">Tab</kbd> -
-                    Navigate between elements
+                    {"• "}
+                    <kbd className="bg-fm-surface-tertiary rounded px-1">
+                      Tab
+                    </kbd>{" "}
+                    - Navigate between elements
                   </li>
                   <li>
-                    • <kbd className="rounded bg-white/10 px-1">Escape</kbd> -
-                    Close dialog
+                    {"• "}
+                    <kbd className="bg-fm-surface-tertiary rounded px-1">
+                      Escape
+                    </kbd>{" "}
+                    - Close dialog
                   </li>
                   <li>
-                    • <kbd className="rounded bg-white/10 px-1">Enter</kbd> -
-                    Activate buttons
+                    {"• "}
+                    <kbd className="bg-fm-surface-tertiary 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-tertiary 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">
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
+                <h4 className="text-fm-primary mb-2 font-medium">
                   React 18 Compatibility
                 </h4>
-                <ul className="space-y-1 text-sm text-white/80">
+                <ul className="text-fm-secondary space-y-1 text-sm">
                   <li>• Cleanup hook prevents pointer-events issues</li>
                   <li>• Proper modal stacking support</li>
                   <li>• Body scroll restoration</li>
@@ -1103,10 +1108,10 @@ export const AccessibilityExample: Story = {
     return (
       <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">
             Accessibility Features
           </h3>
-          <p className="text-sm text-white/60">
+          <p className="text-fm-secondary text-sm">
             Dialog with comprehensive accessibility and border configuration
           </p>
         </div>