aural-ui 3.0.7 → 4.0.1

package/dist/components/slider/Slider.stories.tsx

@@ -200,7 +200,9 @@ export const Default: Story = {
   render: (args) => (
     <div className="w-80 p-8">
       <div className="mb-4">
-        <h3 className="mb-2 text-lg font-medium text-white">Default Slider</h3>
+        <h3 className="text-fm-primary mb-2 text-lg font-medium">
+          Default Slider
+        </h3>
         <p className="text-fm-secondary text-sm">
           Basic slider with default styling and value labels
         </p>
@@ -215,7 +217,9 @@ export const LabelVariants: Story = {
   render: () => (
     <div className="w-80 space-y-6 p-8">
       <div className="mb-6">
-        <h3 className="mb-2 text-lg font-medium text-white">Label Options</h3>
+        <h3 className="text-fm-primary mb-2 text-lg font-medium">
+          Label Options
+        </h3>
         <p className="text-fm-secondary text-sm">
           Different ways to display thumb labels
         </p>
@@ -223,14 +227,14 @@ export const LabelVariants: Story = {
 
       <div className="space-y-6">
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-2 block text-sm font-medium">
             With Value Labels (Default)
           </label>
           <Slider defaultValue={[60]} variant="primary" showLabel={true} />
         </div>
 
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-2 block text-sm font-medium">
             Custom Label Text
           </label>
           <Slider
@@ -242,14 +246,14 @@ export const LabelVariants: Story = {
         </div>
 
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-2 block text-sm font-medium">
             Without Labels
           </label>
           <Slider defaultValue={[40]} variant="warning" showLabel={false} />
         </div>
 
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-2 block text-sm font-medium">
             Range with Custom Labels
           </label>
           <Slider
@@ -269,7 +273,9 @@ export const Variants: Story = {
   render: () => (
     <div className="w-80 space-y-6 p-8">
       <div className="mb-6">
-        <h3 className="mb-2 text-lg font-medium text-white">Slider Variants</h3>
+        <h3 className="text-fm-primary mb-2 text-lg font-medium">
+          Slider Variants
+        </h3>
         <p className="text-fm-secondary text-sm">
           Different color variants with value labels
         </p>
@@ -277,42 +283,42 @@ export const Variants: Story = {
 
       <div className="space-y-4">
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-2 block text-sm font-medium">
             Default
           </label>
           <Slider defaultValue={[40]} variant="default" showLabel={true} />
         </div>
 
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-2 block text-sm font-medium">
             Primary
           </label>
           <Slider defaultValue={[60]} variant="primary" showLabel={true} />
         </div>
 
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-2 block text-sm font-medium">
             Secondary
           </label>
           <Slider defaultValue={[35]} variant="secondary" showLabel={true} />
         </div>
 
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-2 block text-sm font-medium">
             Positive
           </label>
           <Slider defaultValue={[80]} variant="positive" showLabel={true} />
         </div>
 
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-2 block text-sm font-medium">
             Warning
           </label>
           <Slider defaultValue={[25]} variant="warning" showLabel={true} />
         </div>
 
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-2 block text-sm font-medium">
             Info
           </label>
           <Slider defaultValue={[70]} variant="info" showLabel={true} />
@@ -327,7 +333,9 @@ export const Sizes: Story = {
   render: () => (
     <div className="w-80 space-y-6 p-8">
       <div className="mb-6">
-        <h3 className="mb-2 text-lg font-medium text-white">Slider Sizes</h3>
+        <h3 className="text-fm-primary mb-2 text-lg font-medium">
+          Slider Sizes
+        </h3>
         <p className="text-fm-secondary text-sm">
           Small, medium, and large size options with labels
         </p>
@@ -335,7 +343,7 @@ export const Sizes: Story = {
 
       <div className="space-y-6">
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-2 block text-sm font-medium">
             Small (sm)
           </label>
           <Slider
@@ -347,7 +355,7 @@ export const Sizes: Story = {
         </div>
 
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-2 block text-sm font-medium">
             Medium (md) - Default
           </label>
           <Slider
@@ -359,7 +367,7 @@ export const Sizes: Story = {
         </div>
 
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-2 block text-sm font-medium">
             Large (lg)
           </label>
           <Slider
@@ -379,7 +387,9 @@ export const AlignThumb: Story = {
   render: () => (
     <div className="w-80 space-y-6 p-8">
       <div className="mb-6">
-        <h3 className="mb-2 text-lg font-medium text-white">Align Thumb</h3>
+        <h3 className="text-fm-primary mb-2 text-lg font-medium">
+          Align Thumb
+        </h3>
         <p className="text-fm-secondary text-sm">
           Compare default, centered and top thumb alignment
         </p>
@@ -387,7 +397,7 @@ export const AlignThumb: Story = {
 
       <div className="space-y-6">
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-2 block text-sm font-medium">
             Default alignment
           </label>
           <Slider
@@ -399,7 +409,7 @@ export const AlignThumb: Story = {
         </div>
 
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-2 block text-sm font-medium">
             Centered Thumb
           </label>
           <Slider
@@ -411,7 +421,7 @@ export const AlignThumb: Story = {
         </div>
 
         <div>
-          <label className="mb-5 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-5 block text-sm font-medium">
             Top Thumbs
           </label>
           <Slider
@@ -447,7 +457,9 @@ export const CustomLabels: Story = {
     return (
       <div className="w-80 space-y-6 p-8">
         <div className="mb-6">
-          <h3 className="mb-2 text-lg font-medium text-white">Custom Labels</h3>
+          <h3 className="text-fm-primary mb-2 text-lg font-medium">
+            Custom Labels
+          </h3>
           <p className="text-fm-secondary text-sm">
             Sliders with custom label text instead of values
           </p>
@@ -455,7 +467,7 @@ export const CustomLabels: Story = {
 
         <div className="space-y-6">
           <div>
-            <label className="mb-2 block text-sm font-medium text-white">
+            <label className="text-fm-primary mb-2 block text-sm font-medium">
               Volume Control
             </label>
             <Slider
@@ -471,7 +483,7 @@ export const CustomLabels: Story = {
           </div>
 
           <div>
-            <label className="mb-2 block text-sm font-medium text-white">
+            <label className="text-fm-primary mb-2 block text-sm font-medium">
               Quality Setting
             </label>
             <Slider
@@ -490,7 +502,7 @@ export const CustomLabels: Story = {
           </div>
 
           <div>
-            <label className="mb-2 block text-sm font-medium text-white">
+            <label className="text-fm-primary mb-2 block text-sm font-medium">
               Temperature
             </label>
             <Slider
@@ -505,7 +517,7 @@ export const CustomLabels: Story = {
           </div>
 
           <div>
-            <label className="mb-2 block text-sm font-medium text-white">
+            <label className="text-fm-primary mb-2 block text-sm font-medium">
               Performance Mode
             </label>
             <Slider
@@ -533,7 +545,9 @@ export const RangeSlider: Story = {
     return (
       <div className="w-80 p-8">
         <div className="mb-6">
-          <h3 className="mb-2 text-lg font-medium text-white">Range Slider</h3>
+          <h3 className="text-fm-primary mb-2 text-lg font-medium">
+            Range Slider
+          </h3>
           <p className="text-fm-secondary">
             Select a range with dual handles and labels
           </p>
@@ -574,7 +588,9 @@ export const VerticalSlider: Story = {
   render: () => (
     <div className="flex items-center justify-center gap-12 p-8">
       <div className="text-center">
-        <h4 className="mb-4 text-sm font-medium text-white">With Labels</h4>
+        <h4 className="text-fm-primary mb-4 text-sm font-medium">
+          With Labels
+        </h4>
         <Slider
           orientation="vertical"
           defaultValue={[60]}
@@ -585,7 +601,9 @@ export const VerticalSlider: Story = {
       </div>
 
       <div className="text-center">
-        <h4 className="mb-4 text-sm font-medium text-white">Without Labels</h4>
+        <h4 className="text-fm-primary mb-4 text-sm font-medium">
+          Without Labels
+        </h4>
         <Slider
           orientation="vertical"
           defaultValue={[80]}
@@ -596,7 +614,9 @@ export const VerticalSlider: Story = {
       </div>
 
       <div className="text-center">
-        <h4 className="mb-4 text-sm font-medium text-white">Custom Label</h4>
+        <h4 className="text-fm-primary mb-4 text-sm font-medium">
+          Custom Label
+        </h4>
         <Slider
           orientation="vertical"
           defaultValue={[40]}
@@ -608,7 +628,7 @@ export const VerticalSlider: Story = {
       </div>
 
       <div className="text-center">
-        <h4 className="mb-4 text-sm font-medium text-white">Range</h4>
+        <h4 className="text-fm-primary mb-4 text-sm font-medium">Range</h4>
         <Slider
           orientation="vertical"
           defaultValue={[30, 80]}
@@ -629,7 +649,9 @@ export const CustomStyling: Story = {
   render: () => (
     <div className="w-80 space-y-6 p-8">
       <div className="mb-6">
-        <h3 className="mb-2 text-lg font-medium text-white">Custom Styling</h3>
+        <h3 className="text-fm-primary mb-2 text-lg font-medium">
+          Custom Styling
+        </h3>
         <p className="text-fm-secondary text-sm">
           Override default styles with custom classes
         </p>
@@ -637,7 +659,7 @@ export const CustomStyling: Story = {
 
       <div className="space-y-6">
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-2 block text-sm font-medium">
             Custom Track & Range
           </label>
           <Slider
@@ -652,7 +674,7 @@ export const CustomStyling: Story = {
         </div>
 
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-2 block text-sm font-medium">
             Custom Thumb Styling
           </label>
           <Slider
@@ -667,7 +689,7 @@ export const CustomStyling: Story = {
         </div>
 
         <div>
-          <label className="mb-2 block text-sm font-medium text-white">
+          <label className="text-fm-primary mb-2 block text-sm font-medium">
             Gradient with Custom Root
           </label>
           <Slider
@@ -716,7 +738,9 @@ export const CompleteShowcase: Story = {
     return (
       <div className="w-96 space-y-8 p-8">
         <div className="mb-8">
-          <h3 className="mb-2 text-xl font-bold text-white">System Settings</h3>
+          <h3 className="text-fm-primary mb-2 text-xl font-bold">
+            System Settings
+          </h3>
           <p className="text-fm-secondary">
             Comprehensive slider showcase with labels and custom styling
           </p>
@@ -724,11 +748,11 @@ export const CompleteShowcase: Story = {
 
         {/* Audio Settings */}
         <div className="space-y-4">
-          <h4 className="font-medium text-white">Audio</h4>
+          <h4 className="text-fm-primary font-medium">Audio</h4>
           <div className="space-y-3">
             <div className="flex items-center justify-between">
               <label className="text-fm-secondary text-sm">Volume</label>
-              <span className="text-sm font-medium text-white">
+              <span className="text-fm-primary text-sm font-medium">
                 {settings.volume[0]}%
               </span>
             </div>
@@ -745,12 +769,12 @@ export const CompleteShowcase: Story = {
 
         {/* Display Settings */}
         <div className="space-y-4">
-          <h4 className="font-medium text-white">Display</h4>
+          <h4 className="text-fm-primary font-medium">Display</h4>
           <div className="space-y-4">
             <div className="space-y-2">
               <div className="flex items-center justify-between">
                 <label className="text-fm-secondary text-sm">Brightness</label>
-                <span className="text-sm font-medium text-white">
+                <span className="text-fm-primary text-sm font-medium">
                   {settings.brightness[0]}%
                 </span>
               </div>
@@ -766,7 +790,7 @@ export const CompleteShowcase: Story = {
             <div className="space-y-2">
               <div className="flex items-center justify-between">
                 <label className="text-fm-secondary text-sm">Contrast</label>
-                <span className="text-sm font-medium text-white">
+                <span className="text-fm-primary text-sm font-medium">
                   {settings.contrast[0]}%
                 </span>
               </div>
@@ -783,13 +807,13 @@ export const CompleteShowcase: Story = {
 
         {/* Environment Settings */}
         <div className="space-y-4">
-          <h4 className="font-medium text-white">Environment</h4>
+          <h4 className="text-fm-primary font-medium">Environment</h4>
           <div className="space-y-3">
             <div className="flex items-center justify-between">
               <label className="text-fm-secondary text-sm">
                 Temperature Range
               </label>
-              <span className="text-sm font-medium text-white">
+              <span className="text-fm-primary text-sm font-medium">
                 {settings.temperature[0]}° - {settings.temperature[1]}°C
               </span>
             </div>
@@ -808,12 +832,12 @@ export const CompleteShowcase: Story = {
 
         {/* Quality Settings */}
         <div className="space-y-4">
-          <h4 className="font-medium text-white">Performance</h4>
+          <h4 className="text-fm-primary font-medium">Performance</h4>
           <div className="space-y-4">
             <div className="space-y-2">
               <div className="flex items-center justify-between">
                 <label className="text-fm-secondary text-sm">Quality</label>
-                <span className="text-sm font-medium text-white">
+                <span className="text-fm-primary text-sm font-medium">
                   {getQualityLabel(settings.quality[0])}
                 </span>
               </div>
@@ -832,7 +856,7 @@ export const CompleteShowcase: Story = {
             <div className="space-y-2">
               <div className="flex items-center justify-between">
                 <label className="text-fm-secondary text-sm">Mode</label>
-                <span className="text-sm font-medium text-white">
+                <span className="text-fm-primary text-sm font-medium">
                   {getModeLabel(settings.mode[0])}
                 </span>
               </div>
@@ -855,7 +879,7 @@ export const CompleteShowcase: Story = {
 
         {/* Settings Summary */}
         <div className="bg-fm-surface-secondary/20 mt-8 rounded-lg p-4">
-          <h5 className="mb-2 font-medium text-white">Current Settings</h5>
+          <h5 className="text-fm-primary mb-2 font-medium">Current Settings</h5>
           <div className="text-fm-secondary space-y-1 text-sm">
             <div>Volume: {settings.volume[0]}%</div>
             <div>Brightness: {settings.brightness[0]}%</div>

package/dist/components/stepper/Stepper.stories.tsx

@@ -158,14 +158,14 @@ export const ClickableWithRestrictions: Story = {
           <button
             onClick={() => setActiveStep(Math.max(0, activeStep - 1))}
             disabled={activeStep === 0}
-            className="rounded bg-gray-200 px-3 py-1 text-sm disabled:opacity-50"
+            className="bg-fm-surface-tertiary text-fm-primary rounded px-3 py-1 text-sm disabled:opacity-50"
           >
             Previous
           </button>
           <button
             onClick={() => setActiveStep(Math.min(4, activeStep + 1))}
             disabled={activeStep === 4}
-            className="rounded bg-blue-500 px-3 py-1 text-sm text-white disabled:opacity-50"
+            className="bg-fm-surface-info text-fm-surface-primary rounded px-3 py-1 text-sm disabled:opacity-50"
           >
             Next
           </button>
@@ -203,9 +203,9 @@ export const ClickableVertical: Story = {
             onStepClick={(stepIndex) => setActiveStep(stepIndex)}
           />
         </div>
-        <div className="min-w-[300px] rounded-lg bg-gray-50 p-4">
-          <h3 className="mb-2 font-semibold">Step Content</h3>
-          <p className="text-sm text-gray-600">
+        <div className="bg-fm-surface-secondary min-w-[300px] rounded-lg p-4">
+          <h3 className="text-fm-primary mb-2 font-semibold">Step Content</h3>
+          <p className="text-fm-secondary text-sm">
             Content for step:{" "}
             {["Setup", "Configure", "Test", "Deploy"][activeStep] ||
               "Completed"}
@@ -246,11 +246,11 @@ export const ClickableCompound: Story = {
           ))}
 
           <Stepper.Content>
-            <div className="min-h-[200px] rounded-lg bg-blue-50 p-6">
+            <div className="bg-fm-surface-secondary min-h-[200px] rounded-lg p-6">
               <h3 className="mb-4 text-lg font-semibold">
                 {steps[activeStep]} Information
               </h3>
-              <p className="mb-6 text-gray-600">
+              <p className="text-fm-secondary mb-6">
                 Please fill out your {steps[activeStep].toLowerCase()}{" "}
                 information below.
               </p>
@@ -259,7 +259,7 @@ export const ClickableCompound: Story = {
                 <button
                   onClick={() => setActiveStep(Math.max(0, activeStep - 1))}
                   disabled={activeStep === 0}
-                  className="rounded bg-gray-200 px-4 py-2 text-gray-700 disabled:opacity-50"
+                  className="bg-fm-surface-tertiary text-fm-primary rounded px-4 py-2 disabled:opacity-50"
                 >
                   Previous
                 </button>
@@ -268,7 +268,7 @@ export const ClickableCompound: Story = {
                     setActiveStep(Math.min(steps.length - 1, activeStep + 1))
                   }
                   disabled={activeStep === steps.length - 1}
-                  className="rounded bg-blue-500 px-4 py-2 text-white disabled:opacity-50"
+                  className="bg-fm-surface-info text-fm-surface-primary rounded px-4 py-2 disabled:opacity-50"
                 >
                   {activeStep === steps.length - 1 ? "Complete" : "Next"}
                 </button>
@@ -347,7 +347,7 @@ export const ClickableWithKeyboard: Story = {
 
     return (
       <div className="space-y-4">
-        <div className="rounded-lg bg-yellow-50 p-4 text-sm">
+        <div className="bg-fm-surface-warning-sec text-fm-warning rounded-lg p-4 text-sm">
           <strong>Keyboard Navigation:</strong>
           <ul className="mt-2 space-y-1">
             <li>• Use Tab to focus on clickable steps</li>
@@ -505,11 +505,11 @@ export const Interactive: Story = {
             />
           ))}
           <Stepper.Content>
-            <div className="min-h-[200px] rounded-lg bg-gray-50 p-6">
+            <div className="bg-fm-surface-secondary min-h-[200px] rounded-lg p-6">
               <h3 className="mb-4 text-lg font-semibold">
                 {steps[activeStep] || "Completed!"}
               </h3>
-              <p className="mb-6 text-gray-600">
+              <p className="text-fm-secondary mb-6">
                 {activeStep < steps.length
                   ? `This is the content for ${steps[activeStep]}`
                   : "All steps completed successfully!"}
@@ -519,7 +519,7 @@ export const Interactive: Story = {
                 <button
                   onClick={() => setActiveStep(Math.max(0, activeStep - 1))}
                   disabled={activeStep === 0}
-                  className="rounded bg-gray-200 px-4 py-2 text-gray-700 disabled:opacity-50"
+                  className="bg-fm-surface-tertiary text-fm-primary rounded px-4 py-2 disabled:opacity-50"
                 >
                   Previous
                 </button>
@@ -528,7 +528,7 @@ export const Interactive: Story = {
                     setActiveStep(Math.min(steps.length, activeStep + 1))
                   }
                   disabled={activeStep >= steps.length}
-                  className="rounded bg-blue-500 px-4 py-2 text-white disabled:opacity-50"
+                  className="bg-fm-surface-info text-fm-surface-primary rounded px-4 py-2 disabled:opacity-50"
                 >
                   {activeStep === steps.length - 1 ? "Complete" : "Next"}
                 </button>
@@ -553,7 +553,7 @@ export const CustomComposition: Story = {
       <Stepper.Step index={2} label="Finish" isLast />
 
       <Stepper.Content>
-        <div className="rounded-lg bg-blue-50 p-4">
+        <div className="bg-fm-surface-secondary rounded-lg p-4">
           <p>Custom content area with flexible composition</p>
         </div>
       </Stepper.Content>
@@ -630,7 +630,7 @@ export const VerticalWithContent: Story = {
         className="h-[800px]"
       >
         <Stepper.Content>
-          <div className="rounded-lg bg-gray-50 p-6 text-gray-600">
+          <div className="bg-fm-surface-secondary text-fm-secondary rounded-lg p-6">
             <h3 className="mb-4 text-lg font-semibold">
               Settings Configuration
             </h3>

package/dist/components/switch/Switch.stories.tsx

@@ -92,15 +92,15 @@ export const SizeVariants: Story = {
     <div className="flex flex-col items-center space-y-4">
       <div className="flex items-center space-x-4">
         <Switch size="sm" checked={true} />
-        <span className="text-sm text-gray-400">Small (sm)</span>
+        <span className="text-fm-secondary text-sm">Small (sm)</span>
       </div>
       <div className="flex items-center space-x-4">
         <Switch size="md" checked={true} />
-        <span className="text-sm text-gray-400">Medium (md)</span>
+        <span className="text-fm-secondary text-sm">Medium (md)</span>
       </div>
       <div className="flex items-center space-x-4">
         <Switch size="lg" checked={true} />
-        <span className="text-sm text-gray-400">Large (lg)</span>
+        <span className="text-fm-secondary text-sm">Large (lg)</span>
       </div>
     </div>
   ),
@@ -112,7 +112,7 @@ export const WithCustomClassNames: Story = {
     classNames: {
       root: "border-2 border-blue-500",
       onIcon: "text-green-600 font-bold",
-      offIcon: "text-gray-400",
+      offIcon: "text-fm-secondary",
       thumb: "bg-blue-500 shadow-xl",
     },
   },
@@ -187,23 +187,23 @@ export const WithCustomTextVariants: Story = {
     <div className="flex flex-col items-center space-y-4">
       <div className="flex items-center space-x-4">
         <Switch checked={false} switchOnText="ON" switchOffText="OFF" />
-        <span className="text-sm text-gray-400">Default (ON/OFF)</span>
+        <span className="text-fm-secondary text-sm">Default (ON/OFF)</span>
       </div>
       <div className="flex items-center space-x-4">
         <Switch checked={false} switchOnText="YES" switchOffText="NO" />
-        <span className="text-sm text-gray-400">Yes/No</span>
+        <span className="text-fm-secondary text-sm">Yes/No</span>
       </div>
       <div className="flex items-center space-x-4">
         <Switch checked={false} switchOnText="1" switchOffText="0" />
-        <span className="text-sm text-gray-400">Binary (1/0)</span>
+        <span className="text-fm-secondary text-sm">Binary (1/0)</span>
       </div>
       <div className="flex items-center space-x-4">
         <Switch checked={false} switchOnText="✓" switchOffText="✗" />
-        <span className="text-sm text-gray-400">Symbols (✓/✗)</span>
+        <span className="text-fm-secondary text-sm">Symbols (✓/✗)</span>
       </div>
       <div className="flex items-center space-x-4">
         <Switch checked={false} switchOnText="EN" switchOffText="DIS" />
-        <span className="text-sm text-gray-400">Enable/Disable</span>
+        <span className="text-fm-secondary text-sm">Enable/Disable</span>
       </div>
     </div>
   ),
@@ -219,7 +219,7 @@ export const CustomTextWithSizes: Story = {
           switchOnText="ON"
           switchOffText="OFF"
         />
-        <span className="text-sm text-gray-400">Small</span>
+        <span className="text-fm-secondary text-sm">Small</span>
       </div>
       <div className="flex items-center space-x-4">
         <Switch
@@ -228,7 +228,7 @@ export const CustomTextWithSizes: Story = {
           switchOnText="ON"
           switchOffText="OFF"
         />
-        <span className="text-sm text-gray-400">Medium</span>
+        <span className="text-fm-secondary text-sm">Medium</span>
       </div>
       <div className="flex items-center space-x-4">
         <Switch
@@ -237,7 +237,7 @@ export const CustomTextWithSizes: Story = {
           switchOnText="ON"
           switchOffText="OFF"
         />
-        <span className="text-sm text-gray-400">Large</span>
+        <span className="text-fm-secondary text-sm">Large</span>
       </div>
     </div>
   ),