aural-ui 3.0.7 → 4.0.1

package/dist/components/overlay/Overlay.stories.tsx

@@ -78,7 +78,7 @@ A flexible overlay component for creating modal backgrounds, loading states, and
 ### Loading State
 \`\`\`tsx
 <Overlay opacity="medium" glass="high">
-  <div className="text-white">Loading...</div>
+  <div className="text-fm-primary">Loading...</div>
 </Overlay>
 \`\`\`
         `,
@@ -99,7 +99,7 @@ const BackgroundContent = () => (
         <h1 className="mb-4 text-4xl font-bold text-white">
           Background Content
         </h1>
-        <p className="text-white/80">
+        <p className="text-fm-tertiary">
           This content sits behind the overlay to demonstrate the effects
         </p>
       </header>
@@ -108,11 +108,11 @@ const BackgroundContent = () => (
         {Array.from({ length: 6 }, (_, i) => (
           <div
             key={i}
-            className="rounded-lg border border-white/20 bg-white/10 p-6"
+            className="border-fm-divider-secondary bg-fm-surface-secondary/80 rounded-lg border p-6"
           >
             <div className="mb-4">
               <h3 className="text-lg font-semibold text-white">Card {i + 1}</h3>
-              <p className="text-sm text-white/70">
+              <p className="text-fm-secondary text-sm">
                 Sample card content with some description text
               </p>
             </div>
@@ -122,7 +122,7 @@ const BackgroundContent = () => (
                   Image Placeholder
                 </span>
               </div>
-              <p className="text-sm text-white/80">
+              <p className="text-fm-tertiary text-sm">
                 This is some sample content that demonstrates how the overlay
                 affects background visibility and readability.
               </p>
@@ -151,8 +151,10 @@ export const OpacityVariants: Story = {
 
         {/* Control Panel */}
         <div className="fixed top-4 left-4 z-50 space-y-2">
-          <div className="space-y-2 rounded-lg bg-black/80 p-4 backdrop-blur-sm">
-            <h3 className="text-sm font-medium text-white">Opacity Variants</h3>
+          <div className="bg-fm-surface-primary border-fm-divider-secondary space-y-2 rounded-lg border p-4 backdrop-blur-sm">
+            <h3 className="text-fm-primary text-sm font-medium">
+              Opacity Variants
+            </h3>
             <div className="space-y-2">
               <Button
                 size="sm"
@@ -211,11 +213,11 @@ export const OpacityVariants: Story = {
         {/* Overlays */}
         {activeOverlay === "low" && (
           <Overlay opacity="low">
-            <div className="max-w-md rounded-lg border border-white/20 bg-white/10 p-6 backdrop-blur-sm">
-              <h3 className="mb-2 text-lg font-semibold text-white">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary/80 max-w-md rounded-lg border p-6 backdrop-blur-sm">
+              <h3 className="text-fm-primary mb-2 text-lg font-semibold">
                 Low Opacity Overlay
               </h3>
-              <p className="text-sm text-white/70">
+              <p className="text-fm-secondary text-sm">
                 40% background dimming - Background remains quite visible
               </p>
             </div>
@@ -224,11 +226,11 @@ export const OpacityVariants: Story = {
 
         {activeOverlay === "medium" && (
           <Overlay opacity="medium">
-            <div className="max-w-md rounded-lg border border-white/20 bg-white/10 p-6 backdrop-blur-sm">
-              <h3 className="mb-2 text-lg font-semibold text-white">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary/80 max-w-md rounded-lg border p-6 backdrop-blur-sm">
+              <h3 className="text-fm-primary mb-2 text-lg font-semibold">
                 Medium Opacity Overlay
               </h3>
-              <p className="text-sm text-white/70">
+              <p className="text-fm-secondary text-sm">
                 60% background dimming - Balanced visibility
               </p>
             </div>
@@ -237,11 +239,11 @@ export const OpacityVariants: Story = {
 
         {activeOverlay === "high" && (
           <Overlay opacity="high">
-            <div className="max-w-md rounded-lg border border-white/20 bg-white/10 p-6 backdrop-blur-sm">
-              <h3 className="mb-2 text-lg font-semibold text-white">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary/80 max-w-md rounded-lg border p-6 backdrop-blur-sm">
+              <h3 className="text-fm-primary mb-2 text-lg font-semibold">
                 High Opacity Overlay
               </h3>
-              <p className="text-sm text-white/70">
+              <p className="text-fm-secondary text-sm">
                 80% background dimming - Strong focus on overlay content
               </p>
             </div>
@@ -250,11 +252,11 @@ export const OpacityVariants: Story = {
 
         {activeOverlay === "none" && (
           <Overlay opacity="none">
-            <div className="max-w-md rounded-lg border border-white/20 bg-white/10 p-6 backdrop-blur-sm">
-              <h3 className="mb-2 text-lg font-semibold text-white">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary/80 max-w-md rounded-lg border p-6 backdrop-blur-sm">
+              <h3 className="text-fm-primary mb-2 text-lg font-semibold">
                 No Opacity Overlay
               </h3>
-              <p className="text-sm text-white/70">
+              <p className="text-fm-secondary text-sm">
                 100% background coverage - Complete background blocking
               </p>
             </div>
@@ -284,8 +286,8 @@ export const GlassEffectVariants: Story = {
 
         {/* Control Panel */}
         <div className="fixed top-4 right-4 z-50 space-y-2">
-          <div className="space-y-2 rounded-lg bg-black/80 p-4 backdrop-blur-sm">
-            <h3 className="text-sm font-medium text-white">
+          <div className="bg-fm-surface-primary border-fm-divider-secondary space-y-2 rounded-lg border p-4 backdrop-blur-sm">
+            <h3 className="text-fm-primary text-sm font-medium">
               Glass Effect Variants
             </h3>
             <div className="space-y-2">
@@ -346,11 +348,11 @@ export const GlassEffectVariants: Story = {
         {/* Glass Effect Overlays */}
         {activeGlass === "none" && (
           <Overlay opacity="medium" glass="none">
-            <div className="max-w-md rounded-lg border border-white/20 bg-white/10 p-6">
-              <h3 className="mb-2 text-lg font-semibold text-white">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary/80 max-w-md rounded-lg border p-6">
+              <h3 className="text-fm-primary mb-2 text-lg font-semibold">
                 No Glass Effect
               </h3>
-              <p className="text-sm text-white/70">
+              <p className="text-fm-secondary text-sm">
                 Clean overlay without backdrop blur
               </p>
             </div>
@@ -359,11 +361,11 @@ export const GlassEffectVariants: Story = {
 
         {activeGlass === "low" && (
           <Overlay opacity="medium" glass="low">
-            <div className="max-w-md rounded-lg border border-white/20 bg-white/10 p-6">
-              <h3 className="mb-2 text-lg font-semibold text-white">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary/80 max-w-md rounded-lg border p-6">
+              <h3 className="text-fm-primary mb-2 text-lg font-semibold">
                 Low Glass Effect
               </h3>
-              <p className="text-sm text-white/70">
+              <p className="text-fm-secondary text-sm">
                 Subtle backdrop blur for gentle glass effect
               </p>
             </div>
@@ -372,11 +374,11 @@ export const GlassEffectVariants: Story = {
 
         {activeGlass === "medium" && (
           <Overlay opacity="medium" glass="medium">
-            <div className="max-w-md rounded-lg border border-white/20 bg-white/10 p-6">
-              <h3 className="mb-2 text-lg font-semibold text-white">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary/80 max-w-md rounded-lg border p-6">
+              <h3 className="text-fm-primary mb-2 text-lg font-semibold">
                 Medium Glass Effect
               </h3>
-              <p className="text-sm text-white/70">
+              <p className="text-fm-secondary text-sm">
                 Balanced backdrop blur for modern glass aesthetics
               </p>
             </div>
@@ -385,11 +387,11 @@ export const GlassEffectVariants: Story = {
 
         {activeGlass === "high" && (
           <Overlay opacity="medium" glass="high">
-            <div className="max-w-md rounded-lg border border-white/20 bg-white/10 p-6">
-              <h3 className="mb-2 text-lg font-semibold text-white">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary/80 max-w-md rounded-lg border p-6">
+              <h3 className="text-fm-primary mb-2 text-lg font-semibold">
                 High Glass Effect
               </h3>
-              <p className="text-sm text-white/70">
+              <p className="text-fm-secondary text-sm">
                 Strong backdrop blur for premium frosted glass look
               </p>
             </div>
@@ -424,8 +426,8 @@ export const LoadingStates: Story = {
 
         {/* Control Panel */}
         <div className="fixed top-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">
+          <div className="bg-fm-surface-primary border-fm-divider-secondary space-y-2 rounded-lg border p-4 backdrop-blur-sm">
+            <h3 className="text-fm-primary text-center text-sm font-medium">
               Loading States
             </h3>
             <div className="flex gap-2">
@@ -457,10 +459,10 @@ export const LoadingStates: Story = {
         {/* Loading Overlays */}
         {loadingType === "spinner" && (
           <Overlay opacity="high" glass="medium">
-            <div className="text-center text-white">
-              <div className="mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2 border-white"></div>
+            <div className="text-fm-primary text-center">
+              <div className="border-fm-primary mx-auto mb-4 h-12 w-12 animate-spin rounded-full border-b-2"></div>
               <h3 className="mb-2 text-lg font-medium">Loading...</h3>
-              <p className="text-white/70">
+              <p className="text-fm-secondary">
                 Please wait while we process your request
               </p>
             </div>
@@ -469,16 +471,16 @@ export const LoadingStates: Story = {
 
         {loadingType === "progress" && (
           <Overlay opacity="high" glass="low">
-            <div className="min-w-80 rounded-lg border border-white/20 bg-white/10 p-6 backdrop-blur-sm">
-              <div className="text-center text-white">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary/80 min-w-80 rounded-lg border p-6 backdrop-blur-sm">
+              <div className="text-fm-primary text-center">
                 <h3 className="mb-4 text-lg font-medium">Uploading Files</h3>
-                <div className="mb-4 h-2 w-full rounded-full bg-white/20">
+                <div className="bg-fm-surface-tertiary mb-4 h-2 w-full rounded-full">
                   <div
-                    className="h-2 animate-pulse rounded-full bg-blue-500"
+                    className="bg-fm-info h-2 animate-pulse rounded-full"
                     style={{ width: "65%" }}
                   ></div>
                 </div>
-                <p className="text-white/70">
+                <p className="text-fm-secondary">
                   65% complete - 3 of 5 files uploaded
                 </p>
               </div>
@@ -488,20 +490,20 @@ export const LoadingStates: Story = {
 
         {loadingType === "dots" && (
           <Overlay opacity="medium" glass="high">
-            <div className="text-center text-white">
+            <div className="text-fm-primary text-center">
               <div className="mb-4 flex items-center justify-center space-x-2">
-                <div className="h-3 w-3 animate-bounce rounded-full bg-white"></div>
+                <div className="bg-fm-primary h-3 w-3 animate-bounce rounded-full"></div>
                 <div
-                  className="h-3 w-3 animate-bounce rounded-full bg-white"
+                  className="bg-fm-primary h-3 w-3 animate-bounce rounded-full"
                   style={{ animationDelay: "0.1s" }}
                 ></div>
                 <div
-                  className="h-3 w-3 animate-bounce rounded-full bg-white"
+                  className="bg-fm-primary h-3 w-3 animate-bounce rounded-full"
                   style={{ animationDelay: "0.2s" }}
                 ></div>
               </div>
               <h3 className="mb-2 text-lg font-medium">Processing</h3>
-              <p className="text-white/70">Analyzing your data...</p>
+              <p className="text-fm-secondary">Analyzing your data...</p>
             </div>
           </Overlay>
         )}
@@ -531,8 +533,8 @@ export const InteractiveExamples: Story = {
 
         {/* Control Panel */}
         <div className="fixed top-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">
+          <div className="bg-fm-surface-primary border-fm-divider-secondary space-y-2 rounded-lg border p-4 backdrop-blur-sm">
+            <h3 className="text-fm-primary text-center text-sm font-medium">
               Interactive Examples
             </h3>
             <div className="flex gap-2">
@@ -556,23 +558,25 @@ export const InteractiveExamples: Story = {
         {/* Search Modal */}
         {showSearch && (
           <Overlay opacity="medium" glass="medium">
-            <div className="w-full max-w-lg rounded-lg border border-white/20 bg-white/10 p-6 backdrop-blur-sm">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary/80 w-full max-w-lg rounded-lg border p-6 backdrop-blur-sm">
               <div className="mb-4 flex items-center justify-between">
-                <h3 className="text-lg font-semibold text-white">Search</h3>
+                <h3 className="text-fm-primary text-lg font-semibold">
+                  Search
+                </h3>
                 <button
                   onClick={() => setShowSearch(false)}
-                  className="rounded-full p-2 text-white hover:bg-white/10"
+                  className="text-fm-primary hover:bg-fm-surface-secondary rounded-full p-2"
                 >
                   <CrossIcon className="h-4 w-4" />
                 </button>
               </div>
               <div className="space-y-4">
                 <div className="relative">
-                  <SearchIcon className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-white/60" />
+                  <SearchIcon className="text-fm-secondary absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
                   <input
                     type="text"
                     placeholder="Search anything..."
-                    className="w-full rounded-lg border border-white/20 bg-white/10 py-3 pr-4 pl-10 text-white placeholder-white/60 focus:border-white/40 focus:outline-none"
+                    className="border-fm-divider-secondary bg-fm-surface-secondary text-fm-primary placeholder:text-fm-tertiary focus:border-fm-divider-primary w-full rounded-lg border py-3 pr-4 pl-10 focus:outline-none"
                   />
                 </div>
                 <div className="space-y-2">
@@ -580,10 +584,10 @@ export const InteractiveExamples: Story = {
                     (item, i) => (
                       <div
                         key={i}
-                        className="flex items-center gap-3 rounded-lg p-3 hover:bg-white/10"
+                        className="hover:bg-fm-surface-secondary flex items-center gap-3 rounded-lg p-3"
                       >
-                        <SearchIcon className="h-4 w-4 text-white/60" />
-                        <span className="text-white">{item}</span>
+                        <SearchIcon className="text-fm-secondary h-4 w-4" />
+                        <span className="text-fm-primary">{item}</span>
                       </div>
                     )
                   )}
@@ -596,12 +600,14 @@ export const InteractiveExamples: Story = {
         {/* Settings Modal */}
         {showSettings && (
           <Overlay opacity="high" glass="low">
-            <div className="w-full max-w-md rounded-lg border border-white/20 bg-white/10 p-6 backdrop-blur-sm">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary/80 w-full max-w-md rounded-lg border p-6 backdrop-blur-sm">
               <div className="mb-4 flex items-center justify-between">
-                <h3 className="text-lg font-semibold text-white">Settings</h3>
+                <h3 className="text-fm-primary text-lg font-semibold">
+                  Settings
+                </h3>
                 <button
                   onClick={() => setShowSettings(false)}
-                  className="rounded-full p-2 text-white hover:bg-white/10"
+                  className="text-fm-primary hover:bg-fm-surface-secondary rounded-full p-2"
                 >
                   <CrossIcon className="h-4 w-4" />
                 </button>
@@ -614,13 +620,13 @@ export const InteractiveExamples: Story = {
                 ].map((item, i) => (
                   <div
                     key={i}
-                    className="flex items-center justify-between rounded-lg p-3 hover:bg-white/10"
+                    className="hover:bg-fm-surface-secondary flex items-center justify-between rounded-lg p-3"
                   >
                     <div className="flex items-center gap-3">
-                      <item.icon className="h-5 w-5 text-white/60" />
-                      <span className="text-white">{item.label}</span>
+                      <item.icon className="text-fm-secondary h-5 w-5" />
+                      <span className="text-fm-primary">{item.label}</span>
                     </div>
-                    <ChevronRightIcon className="h-4 w-4 text-white/60" />
+                    <ChevronRightIcon className="text-fm-secondary h-4 w-4" />
                   </div>
                 ))}
               </div>
@@ -631,13 +637,13 @@ export const InteractiveExamples: Story = {
         {/* Confirmation Modal */}
         {showConfirm && (
           <Overlay opacity="high" glass="high">
-            <div className="w-full max-w-sm rounded-lg border border-red-500/30 bg-red-900/20 p-6 backdrop-blur-sm">
+            <div className="border-fm-divider-negative bg-fm-surface-negative-sec w-full max-w-sm rounded-lg border p-6 backdrop-blur-sm">
               <div className="text-center">
-                <AlertIcon className="mx-auto mb-4 h-12 w-12 text-red-400" />
-                <h3 className="mb-2 text-lg font-semibold text-white">
+                <AlertIcon className="text-fm-negative mx-auto mb-4 h-12 w-12" />
+                <h3 className="text-fm-primary mb-2 text-lg font-semibold">
                   Confirm Action
                 </h3>
-                <p className="mb-6 text-sm text-white/70">
+                <p className="text-fm-secondary mb-6 text-sm">
                   This action cannot be undone. Are you sure you want to
                   continue?
                 </p>
@@ -687,8 +693,8 @@ export const NoiseTextureVariants: Story = {
 
         {/* Control Panel */}
         <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">
+          <div className="bg-fm-surface-primary border-fm-divider-secondary space-y-2 rounded-lg border p-4 backdrop-blur-sm">
+            <h3 className="text-fm-primary text-center text-sm font-medium">
               Noise Texture Variants
             </h3>
             <div className="flex gap-2">
@@ -745,11 +751,11 @@ export const NoiseTextureVariants: Story = {
         {/* Noise Overlays */}
         {activeNoise === "none" && (
           <Overlay opacity="medium" glass="low" noise="none">
-            <div className="max-w-md rounded-lg border border-white/20 bg-white/10 p-6 backdrop-blur-sm">
-              <h3 className="mb-2 text-lg font-semibold text-white">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary/80 max-w-md rounded-lg border p-6 backdrop-blur-sm">
+              <h3 className="text-fm-primary mb-2 text-lg font-semibold">
                 No Noise Texture
               </h3>
-              <p className="text-sm text-white/70">
+              <p className="text-fm-secondary text-sm">
                 Clean overlay without any texture patterns
               </p>
             </div>
@@ -758,11 +764,11 @@ export const NoiseTextureVariants: Story = {
 
         {activeNoise === "low" && (
           <Overlay opacity="medium" glass="low" noise="low">
-            <div className="max-w-md rounded-lg border border-white/20 bg-white/10 p-6 backdrop-blur-sm">
-              <h3 className="mb-2 text-lg font-semibold text-white">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary/80 max-w-md rounded-lg border p-6 backdrop-blur-sm">
+              <h3 className="text-fm-primary mb-2 text-lg font-semibold">
                 Low Noise Texture
               </h3>
-              <p className="text-sm text-white/70">
+              <p className="text-fm-secondary text-sm">
                 Subtle noise pattern for added visual interest
               </p>
             </div>
@@ -771,11 +777,11 @@ export const NoiseTextureVariants: Story = {
 
         {activeNoise === "medium" && (
           <Overlay opacity="medium" glass="low" noise="medium">
-            <div className="max-w-md rounded-lg border border-white/20 bg-white/10 p-6 backdrop-blur-sm">
-              <h3 className="mb-2 text-lg font-semibold text-white">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary/80 max-w-md rounded-lg border p-6 backdrop-blur-sm">
+              <h3 className="text-fm-primary mb-2 text-lg font-semibold">
                 Medium Noise Texture
               </h3>
-              <p className="text-sm text-white/70">
+              <p className="text-fm-secondary text-sm">
                 Balanced noise pattern for enhanced texture
               </p>
             </div>
@@ -784,11 +790,11 @@ export const NoiseTextureVariants: Story = {
 
         {activeNoise === "high" && (
           <Overlay opacity="medium" glass="low" noise="high">
-            <div className="max-w-md rounded-lg border border-white/20 bg-white/10 p-6 backdrop-blur-sm">
-              <h3 className="mb-2 text-lg font-semibold text-white">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary/80 max-w-md rounded-lg border p-6 backdrop-blur-sm">
+              <h3 className="text-fm-primary mb-2 text-lg font-semibold">
                 High Noise Texture
               </h3>
-              <p className="text-sm text-white/70">
+              <p className="text-fm-secondary text-sm">
                 Prominent noise pattern for dramatic effect
               </p>
             </div>
@@ -856,8 +862,8 @@ export const CombinedEffectsShowcase: Story = {
 
         {/* Control Panel */}
         <div className="fixed top-1/2 left-4 z-50 -translate-y-1/2 transform">
-          <div className="space-y-2 rounded-lg bg-black/80 p-4 backdrop-blur-sm">
-            <h3 className="text-sm font-medium text-white">
+          <div className="bg-fm-surface-primary border-fm-divider-secondary space-y-2 rounded-lg border p-4 backdrop-blur-sm">
+            <h3 className="text-fm-primary text-sm font-medium">
               Effect Combinations
             </h3>
             <div className="space-y-2">
@@ -891,11 +897,11 @@ export const CombinedEffectsShowcase: Story = {
         {/* Effect Information Panel */}
         {currentCombo && (
           <div className="fixed top-1/2 right-4 z-50 -translate-y-1/2 transform">
-            <div className="max-w-xs space-y-2 rounded-lg bg-black/80 p-4 backdrop-blur-sm">
-              <h4 className="text-sm font-medium text-white">
+            <div className="bg-fm-surface-primary border-fm-divider-secondary max-w-xs space-y-2 rounded-lg border p-4 backdrop-blur-sm">
+              <h4 className="text-fm-primary text-sm font-medium">
                 {combinations.find((c) => c.id === currentCombo)?.name} Effect
               </h4>
-              <div className="space-y-1 text-xs text-white/70">
+              <div className="text-fm-secondary space-y-1 text-xs">
                 <div>
                   Opacity:{" "}
                   {combinations.find((c) => c.id === currentCombo)?.opacity}
@@ -923,15 +929,15 @@ export const CombinedEffectsShowcase: Story = {
                 glass={combo.glass}
                 noise={combo.noise}
               >
-                <div className="max-w-md rounded-lg border border-white/20 bg-white/10 p-6 backdrop-blur-sm">
-                  <h3 className="mb-2 text-lg font-semibold text-white">
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary/80 max-w-md rounded-lg border p-6 backdrop-blur-sm">
+                  <h3 className="text-fm-primary mb-2 text-lg font-semibold">
                     {combo.name} Overlay
                   </h3>
-                  <p className="mb-4 text-sm text-white/70">
+                  <p className="text-fm-secondary mb-4 text-sm">
                     Combination of {combo.opacity} opacity, {combo.glass} glass
                     effect, and {combo.noise} noise texture
                   </p>
-                  <p className="text-sm text-white/80">
+                  <p className="text-fm-tertiary text-sm">
                     This combination creates a {combo.name.toLowerCase()}{" "}
                     overlay effect suitable for different design contexts and
                     user interface needs.

package/dist/components/overlay/index.tsx

@@ -7,10 +7,10 @@ const overlayVariants = cva(
   {
     variants: {
       opacity: {
-        high: "bg-black/80 ", // 80% opacity
-        medium: "bg-black/60", // 60% opacity
-        low: "bg-black/40", // 40% opacity
-        none: "bg-black",
+        high: "bg-fm-scrim/80",
+        medium: "bg-fm-scrim/60",
+        low: "bg-fm-scrim/40",
+        none: "bg-fm-scrim",
       },
       glass: {
         high: "backdrop-blur-lg",