aural-ui 3.0.7 → 4.0.1

package/dist/components/char-count/CharCount.stories.tsx

@@ -161,7 +161,7 @@ export const WithTextarea: Story = {
           <textarea
             value={text}
             onChange={(e) => setText(e.target.value)}
-            className="w-full resize-none 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 resize-none rounded-md border px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
             placeholder="What's happening?"
             rows={4}
             aria-describedby="tweet-count"
@@ -194,12 +194,12 @@ export const WithInput: Story = {
             type="text"
             value={username}
             onChange={(e) => setUsername(e.target.value)}
-            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 username"
             aria-describedby="username-count"
           />
           <div className="mt-2 flex items-center justify-between">
-            <span className="text-sm text-gray-500">
+            <span className="text-fm-secondary text-sm">
               Must be unique and memorable
             </span>
             <CharCount
@@ -230,7 +230,7 @@ export const MultipleInputs: Story = {
             type="text"
             value={title}
             onChange={(e) => setTitle(e.target.value)}
-            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 post title"
             aria-describedby="title-count"
           />
@@ -248,7 +248,7 @@ export const MultipleInputs: Story = {
           <textarea
             value={description}
             onChange={(e) => setDescription(e.target.value)}
-            className="w-full resize-none 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 resize-none rounded-md border px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
             placeholder="Describe your post"
             rows={3}
             aria-describedby="description-count"
@@ -270,12 +270,12 @@ export const MultipleInputs: Story = {
             type="text"
             value={tags}
             onChange={(e) => setTags(e.target.value)}
-            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="react, typescript, ui"
             aria-describedby="tags-count"
           />
           <div className="mt-1 flex items-center justify-between">
-            <span className="text-xs text-gray-500">
+            <span className="text-fm-secondary text-xs">
               Separate tags with commas
             </span>
             <CharCount
@@ -313,7 +313,7 @@ export const AccessibilityExample: Story = {
             className={`w-full resize-none rounded-md border px-3 py-2 focus:ring-2 focus:outline-none ${
               isOverLimit
                 ? "border-red-300 focus:ring-red-500"
-                : "border-gray-300 focus:ring-blue-500"
+                : "border-fm-divider-secondary focus:ring-blue-500"
             }`}
             placeholder="Enter your message"
             rows={4}
@@ -322,7 +322,7 @@ export const AccessibilityExample: Story = {
             required
           />
           <div className="mt-2 flex items-start justify-between">
-            <div id="message-help" className="text-sm text-gray-500">
+            <div id="message-help" className="text-fm-secondary text-sm">
               {isOverLimit
                 ? "Message is too long. Please shorten it."
                 : "Share your thoughts with the community."}

package/dist/components/circular-loader/CircularLoader.stories.tsx

@@ -174,7 +174,7 @@ export const Default: Story = {
   },
   parameters: storyParameters,
   render: (args) => (
-    <div className="flex h-32 items-center justify-center rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8 text-white">
+    <div className="bg-fm-surface-primary flex h-32 items-center justify-center rounded-lg p-8">
       <CircularLoader {...args} />
     </div>
   ),
@@ -192,46 +192,48 @@ export const Variants: Story = {
     },
   },
   render: () => (
-    <div className="space-y-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8 text-white">
+    <div className="bg-fm-surface-primary space-y-8 rounded-lg p-8">
       <div className="text-center">
-        <h3 className="mb-4 text-xl font-bold text-white">Spinner Variants</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-4 text-xl font-bold">
+          Spinner Variants
+        </h3>
+        <p className="text-fm-secondary text-sm">
           Three distinct visual styles with full accessibility support
         </p>
       </div>
 
       <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
         <div className="text-center">
-          <div className="mb-4 flex h-32 items-center justify-center rounded-lg border border-white/10 bg-white/5">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary mb-4 flex h-32 items-center justify-center rounded-lg border">
             <CircularLoader variant="v1" text="Gradient" size="lg" />
           </div>
           <div className="space-y-1">
-            <div className="font-medium text-white">Variant V1</div>
-            <div className="text-xs text-white/60">
+            <div className="text-fm-primary font-medium">Variant V1</div>
+            <div className="text-fm-secondary text-xs">
               Gradient spinner with smooth transitions
             </div>
           </div>
         </div>
 
         <div className="text-center">
-          <div className="mb-4 flex h-32 items-center justify-center rounded-lg border border-white/10 bg-white/5">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary mb-4 flex h-32 items-center justify-center rounded-lg border">
             <CircularLoader variant="v2" text="Solid" size="lg" />
           </div>
           <div className="space-y-1">
-            <div className="font-medium text-white">Variant V2</div>
-            <div className="text-xs text-white/60">
+            <div className="text-fm-primary font-medium">Variant V2</div>
+            <div className="text-fm-secondary text-xs">
               Solid spinner with consistent theming
             </div>
           </div>
         </div>
 
         <div className="text-center">
-          <div className="mb-4 flex h-32 items-center justify-center rounded-lg border border-white/10 bg-white/5">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary mb-4 flex h-32 items-center justify-center rounded-lg border">
             <CircularLoader variant="v3" text="Neutral" size="lg" />
           </div>
           <div className="space-y-1">
-            <div className="font-medium text-white">Variant V3</div>
-            <div className="text-xs text-white/60">
+            <div className="text-fm-primary font-medium">Variant V3</div>
+            <div className="text-fm-secondary text-xs">
               Neutral spinner for any theme
             </div>
           </div>
@@ -253,56 +255,62 @@ export const Sizes: Story = {
     },
   },
   render: () => (
-    <div className="space-y-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8 text-white">
+    <div className="bg-fm-surface-primary space-y-8 rounded-lg p-8">
       <div className="text-center">
-        <h3 className="mb-4 text-xl font-bold text-white">Size Variations</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-4 text-xl font-bold">
+          Size Variations
+        </h3>
+        <p className="text-fm-secondary text-sm">
           Four predefined sizes for different contexts and use cases
         </p>
       </div>
 
       <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
         <div className="text-center">
-          <div className="mb-4 flex h-24 items-center justify-center rounded-lg border border-white/10 bg-white/5">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary mb-4 flex h-24 items-center justify-center rounded-lg border">
             <CircularLoader size="sm" text="Small" />
           </div>
           <div className="space-y-1">
-            <div className="font-medium text-white">Small</div>
-            <div className="text-xs text-white/60">
+            <div className="text-fm-primary font-medium">Small</div>
+            <div className="text-fm-secondary text-xs">
               16×16px - Inline elements
             </div>
           </div>
         </div>
 
         <div className="text-center">
-          <div className="mb-4 flex h-24 items-center justify-center rounded-lg border border-white/10 bg-white/5">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary mb-4 flex h-24 items-center justify-center rounded-lg border">
             <CircularLoader size="md" text="Medium" />
           </div>
           <div className="space-y-1">
-            <div className="font-medium text-white">Medium</div>
-            <div className="text-xs text-white/60">24×24px - Default size</div>
+            <div className="text-fm-primary font-medium">Medium</div>
+            <div className="text-fm-secondary text-xs">
+              24×24px - Default size
+            </div>
           </div>
         </div>
 
         <div className="text-center">
-          <div className="mb-4 flex h-24 items-center justify-center rounded-lg border border-white/10 bg-white/5">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary mb-4 flex h-24 items-center justify-center rounded-lg border">
             <CircularLoader size="lg" text="Large" />
           </div>
           <div className="space-y-1">
-            <div className="font-medium text-white">Large</div>
-            <div className="text-xs text-white/60">
+            <div className="text-fm-primary font-medium">Large</div>
+            <div className="text-fm-secondary text-xs">
               32×32px - Prominent loading
             </div>
           </div>
         </div>
 
         <div className="text-center">
-          <div className="mb-4 flex h-24 items-center justify-center rounded-lg border border-white/10 bg-white/5">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary mb-4 flex h-24 items-center justify-center rounded-lg border">
             <CircularLoader size="xl" text="Extra Large" />
           </div>
           <div className="space-y-1">
-            <div className="font-medium text-white">Extra Large</div>
-            <div className="text-xs text-white/60">48×48px - Page loading</div>
+            <div className="text-fm-primary font-medium">Extra Large</div>
+            <div className="text-fm-secondary text-xs">
+              48×48px - Page loading
+            </div>
           </div>
         </div>
       </div>
@@ -322,32 +330,32 @@ export const AccessibilityFeatures: Story = {
     },
   },
   render: () => (
-    <div className="space-y-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8 text-white">
+    <div className="bg-fm-surface-primary space-y-8 rounded-lg p-8">
       <div className="text-center">
-        <h3 className="mb-4 text-xl font-bold text-white">
+        <h3 className="text-fm-primary mb-4 text-xl font-bold">
           Accessibility Features
         </h3>
-        <p className="text-sm text-white/60">
+        <p className="text-fm-secondary text-sm">
           Built with comprehensive screen reader support and ARIA attributes
         </p>
       </div>
 
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
         <div className="space-y-6">
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-            <h4 className="mb-4 text-lg font-semibold text-white">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+            <h4 className="text-fm-primary mb-4 text-lg font-semibold">
               Visual + Screen Reader
             </h4>
             <div className="mb-4 flex items-center justify-center">
               <CircularLoader text="Loading data..." size="lg" />
             </div>
-            <div className="text-sm text-white/70">
+            <div className="text-fm-secondary text-sm">
               Shows visible text and provides the same message to screen readers
             </div>
           </div>
 
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-            <h4 className="mb-4 text-lg font-semibold text-white">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+            <h4 className="text-fm-primary mb-4 text-lg font-semibold">
               Screen Reader Only
             </h4>
             <div className="mb-4 flex items-center justify-center">
@@ -356,15 +364,15 @@ export const AccessibilityFeatures: Story = {
                 size="lg"
               />
             </div>
-            <div className="text-sm text-white/70">
+            <div className="text-fm-secondary text-sm">
               No visible text but provides descriptive label for screen readers
             </div>
           </div>
         </div>
 
         <div className="space-y-6">
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-            <h4 className="mb-4 text-lg font-semibold text-white">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+            <h4 className="text-fm-primary mb-4 text-lg font-semibold">
               Custom Loading Message
             </h4>
             <div className="mb-4 flex items-center justify-center">
@@ -374,13 +382,13 @@ export const AccessibilityFeatures: Story = {
                 size="lg"
               />
             </div>
-            <div className="text-sm text-white/70">
+            <div className="text-fm-secondary text-sm">
               Visual text differs from detailed screen reader message
             </div>
           </div>
 
-          <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-            <h4 className="mb-4 text-lg font-semibold text-white">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+            <h4 className="text-fm-primary mb-4 text-lg font-semibold">
               Assertive Announcements
             </h4>
             <div className="mb-4 flex items-center justify-center">
@@ -390,23 +398,21 @@ export const AccessibilityFeatures: Story = {
                 size="lg"
               />
             </div>
-            <div className="text-sm text-white/70">
+            <div className="text-fm-secondary text-sm">
               Immediately announces changes to screen readers
             </div>
           </div>
         </div>
       </div>
 
-      <div className="rounded-lg border border-blue-500/20 bg-blue-500/10 p-6">
-        <h4 className="mb-4 text-lg font-semibold text-blue-200">
+      <div className="border-fm-divider-secondary bg-fm-surface-info-sec rounded-lg border p-6">
+        <h4 className="text-fm-info mb-4 text-lg font-semibold">
           Accessibility Best Practices
         </h4>
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
           <div>
-            <h5 className="mb-2 font-medium text-blue-200">
-              Built-in Features
-            </h5>
-            <ul className="space-y-1 text-sm text-blue-200/80">
+            <h5 className="text-fm-info mb-2 font-medium">Built-in Features</h5>
+            <ul className="text-fm-info-sec space-y-1 text-sm">
               <li>• Role="status" for loading states</li>
               <li>• ARIA-live regions for dynamic updates</li>
               <li>• ARIA-hidden on decorative elements</li>
@@ -415,8 +421,8 @@ export const AccessibilityFeatures: Story = {
             </ul>
           </div>
           <div>
-            <h5 className="mb-2 font-medium text-blue-200">Usage Guidelines</h5>
-            <ul className="space-y-1 text-sm text-blue-200/80">
+            <h5 className="text-fm-info mb-2 font-medium">Usage Guidelines</h5>
+            <ul className="text-fm-info-sec space-y-1 text-sm">
               <li>• Always provide context about what's loading</li>
               <li>• Use "polite" for non-critical updates</li>
               <li>• Use "assertive" for important changes</li>
@@ -462,12 +468,12 @@ export const UsageExamples: Story = {
     }
 
     return (
-      <div className="space-y-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8 text-white">
+      <div className="bg-fm-surface-primary space-y-8 rounded-lg p-8">
         <div className="text-center">
-          <h3 className="mb-4 text-xl font-bold text-white">
+          <h3 className="text-fm-primary mb-4 text-xl font-bold">
             Real-world Usage
           </h3>
-          <p className="text-sm text-white/60">
+          <p className="text-fm-secondary text-sm">
             Common UI patterns and contexts where CircularLoader is used
           </p>
         </div>
@@ -475,7 +481,9 @@ export const UsageExamples: Story = {
         <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
           {/* Button Loading */}
           <div className="space-y-4">
-            <h4 className="text-lg font-semibold text-white">Button Loading</h4>
+            <h4 className="text-fm-primary text-lg font-semibold">
+              Button Loading
+            </h4>
             <div className="space-y-3">
               <Button
                 onClick={handleButtonClick}
@@ -491,7 +499,7 @@ export const UsageExamples: Story = {
                   "Save Changes"
                 )}
               </Button>
-              <div className="text-xs text-white/60">
+              <div className="text-fm-secondary text-xs">
                 Inline loader in button with accessible label
               </div>
             </div>
@@ -499,8 +507,10 @@ export const UsageExamples: Story = {
 
           {/* Card Loading */}
           <div className="space-y-4">
-            <h4 className="text-lg font-semibold text-white">Card Loading</h4>
-            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
+            <h4 className="text-fm-primary text-lg font-semibold">
+              Card Loading
+            </h4>
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
               {cardLoading ? (
                 <div className="flex h-32 items-center justify-center">
                   <CircularLoader
@@ -511,9 +521,9 @@ export const UsageExamples: Story = {
                 </div>
               ) : (
                 <div className="space-y-3">
-                  <div className="h-4 rounded bg-white/10"></div>
-                  <div className="h-4 rounded bg-white/10"></div>
-                  <div className="h-4 w-3/4 rounded bg-white/10"></div>
+                  <div className="bg-fm-surface-tertiary h-4 rounded"></div>
+                  <div className="bg-fm-surface-tertiary h-4 rounded"></div>
+                  <div className="bg-fm-surface-tertiary h-4 w-3/4 rounded"></div>
                   <Button
                     onClick={handleCardRefresh}
                     size="sm"
@@ -524,15 +534,17 @@ export const UsageExamples: Story = {
                 </div>
               )}
             </div>
-            <div className="text-xs text-white/60">
+            <div className="text-fm-secondary text-xs">
               Content area with detailed loading message
             </div>
           </div>
 
           {/* Page Loading */}
           <div className="space-y-4">
-            <h4 className="text-lg font-semibold text-white">Page Loading</h4>
-            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
+            <h4 className="text-fm-primary text-lg font-semibold">
+              Page Loading
+            </h4>
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
               {pageLoading ? (
                 <div className="flex h-32 items-center justify-center">
                   <CircularLoader
@@ -545,7 +557,7 @@ export const UsageExamples: Story = {
               ) : (
                 <div className="space-y-3">
                   <div className="text-center">
-                    <div className="mb-2 text-sm font-medium text-white">
+                    <div className="text-fm-primary mb-2 text-sm font-medium">
                       Application Ready
                     </div>
                     <Button
@@ -559,15 +571,15 @@ export const UsageExamples: Story = {
                 </div>
               )}
             </div>
-            <div className="text-xs text-white/60">
+            <div className="text-fm-secondary text-xs">
               Full page loading with assertive announcements
             </div>
           </div>
         </div>
 
         {/* Form Submission Example */}
-        <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-          <h4 className="mb-4 text-lg font-semibold text-white">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+          <h4 className="text-fm-primary mb-4 text-lg font-semibold">
             Form Submission
           </h4>
           <div className="space-y-4">
@@ -575,23 +587,23 @@ export const UsageExamples: Story = {
               <input
                 type="text"
                 placeholder="Name"
-                className="rounded-lg border border-white/20 bg-white/10 p-3 text-white placeholder-white/50"
+                className="border-fm-divider-secondary bg-fm-surface-tertiary text-fm-primary placeholder:text-fm-tertiary rounded-lg border p-3"
               />
               <input
                 type="email"
                 placeholder="Email"
-                className="rounded-lg border border-white/20 bg-white/10 p-3 text-white placeholder-white/50"
+                className="border-fm-divider-secondary bg-fm-surface-tertiary text-fm-primary placeholder:text-fm-tertiary rounded-lg border p-3"
               />
             </div>
             <textarea
               placeholder="Message"
               rows={3}
-              className="w-full rounded-lg border border-white/20 bg-white/10 p-3 text-white placeholder-white/50"
+              className="border-fm-divider-secondary bg-fm-surface-tertiary text-fm-primary placeholder:text-fm-tertiary w-full rounded-lg border p-3"
             />
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <CircularLoader size="sm" aria-label="Submitting form" />
-                <span className="text-sm text-white/70">
+                <span className="text-fm-secondary text-sm">
                   Submitting your message...
                 </span>
               </div>
@@ -664,60 +676,64 @@ export const Playground: Story = {
     },
   },
   render: (args) => (
-    <div className="space-y-8 rounded-lg bg-gradient-to-br from-gray-900 to-gray-800 p-8 text-white">
+    <div className="bg-fm-surface-primary space-y-8 rounded-lg p-8">
       <div className="text-center">
-        <h3 className="mb-4 text-xl font-bold text-white">
+        <h3 className="text-fm-primary mb-4 text-xl font-bold">
           Interactive Playground
         </h3>
-        <p className="text-sm text-white/60">
+        <p className="text-fm-secondary text-sm">
           Experiment with all CircularLoader configurations and accessibility
           features
         </p>
       </div>
 
       <div className="flex items-center justify-center">
-        <div className="rounded-lg border border-white/10 bg-white/5 p-8">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-8">
           <CircularLoader {...args} />
         </div>
       </div>
 
-      <div className="rounded-lg border border-white/10 bg-white/5 p-6">
-        <h4 className="mb-4 text-lg font-semibold text-white">
+      <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-6">
+        <h4 className="text-fm-primary mb-4 text-lg font-semibold">
           Current Configuration
         </h4>
         <div className="grid grid-cols-2 gap-4 text-sm">
           <div>
-            <div className="font-medium text-white">Variant:</div>
-            <div className="text-white/70">{args.variant}</div>
+            <div className="text-fm-primary font-medium">Variant:</div>
+            <div className="text-fm-secondary">{args.variant}</div>
           </div>
           <div>
-            <div className="font-medium text-white">Size:</div>
-            <div className="text-white/70">{args.size}</div>
+            <div className="text-fm-primary font-medium">Size:</div>
+            <div className="text-fm-secondary">{args.size}</div>
           </div>
           <div>
-            <div className="font-medium text-white">Visual Text:</div>
-            <div className="text-white/70">{args.text || "None"}</div>
+            <div className="text-fm-primary font-medium">Visual Text:</div>
+            <div className="text-fm-secondary">{args.text || "None"}</div>
           </div>
           <div>
-            <div className="font-medium text-white">ARIA Label:</div>
-            <div className="text-white/70">{args["aria-label"] || "None"}</div>
+            <div className="text-fm-primary font-medium">ARIA Label:</div>
+            <div className="text-fm-secondary">
+              {args["aria-label"] || "None"}
+            </div>
           </div>
           <div>
-            <div className="font-medium text-white">ARIA Live:</div>
-            <div className="text-white/70">{args["aria-live"]}</div>
+            <div className="text-fm-primary font-medium">ARIA Live:</div>
+            <div className="text-fm-secondary">{args["aria-live"]}</div>
           </div>
           <div>
-            <div className="font-medium text-white">Loading Message:</div>
-            <div className="text-white/70">{args.loadingMessage || "None"}</div>
+            <div className="text-fm-primary font-medium">Loading Message:</div>
+            <div className="text-fm-secondary">
+              {args.loadingMessage || "None"}
+            </div>
           </div>
         </div>
       </div>
 
-      <div className="rounded-lg border border-green-500/20 bg-green-500/10 p-6">
-        <h4 className="mb-4 text-lg font-semibold text-green-200">
+      <div className="border-fm-divider-positive bg-fm-surface-positive-sec rounded-lg border p-6">
+        <h4 className="text-fm-positive mb-4 text-lg font-semibold">
           Accessibility Info
         </h4>
-        <div className="space-y-2 text-sm text-green-200/80">
+        <div className="text-fm-positive-sec space-y-2 text-sm">
           <div>
             <strong>Screen Reader Message:</strong>{" "}
             {args.text ||

package/dist/components/collapsible/Collapsible.stories.tsx

@@ -203,7 +203,7 @@ export const RichContent: Story = {
             </div>
             <div>
               <h4 className="mb-2 font-semibold">Pricing:</h4>
-              <div className="rounded bg-gray-50 p-3">
+              <div className="bg-fm-surface-secondary rounded p-3">
                 <p className="text-sm">Starting at $29/month for basic plan</p>
               </div>
             </div>