aural-ui 3.0.7 → 4.0.1

package/dist/components/avatar/Avatar.stories.tsx

@@ -76,8 +76,8 @@ export const BasicAvatars: Story = {
   render: () => (
     <div className="space-y-8">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">Basic Avatars</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">Basic Avatars</h3>
+        <p className="text-fm-secondary text-sm">
           Standard avatar components with images and fallbacks
         </p>
       </div>
@@ -92,7 +92,7 @@ export const BasicAvatars: Story = {
             />
             <AvatarFallback>JD</AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">With Image</p>
+          <p className="text-fm-secondary text-xs">With Image</p>
         </div>
 
         {/* Avatar with Fallback Only */}
@@ -100,7 +100,7 @@ export const BasicAvatars: Story = {
           <Avatar className="text-fm-primary [font-size:var(--text-fm-sm)]">
             <AvatarFallback>AB</AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Fallback Only</p>
+          <p className="text-fm-secondary text-xs">Fallback Only</p>
         </div>
 
         {/* Avatar with Broken Image (shows fallback) */}
@@ -109,7 +109,7 @@ export const BasicAvatars: Story = {
             <AvatarImage src="/broken-image.jpg" alt="Broken" />
             <AvatarFallback>BR</AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Broken Image</p>
+          <p className="text-fm-secondary text-xs">Broken Image</p>
         </div>
 
         {/* Different Initials */}
@@ -117,7 +117,7 @@ export const BasicAvatars: Story = {
           <Avatar className="text-fm-primary [font-size:var(--text-fm-sm)]">
             <AvatarFallback>SM</AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Initials</p>
+          <p className="text-fm-secondary text-xs">Initials</p>
         </div>
       </div>
     </div>
@@ -137,8 +137,8 @@ export const SizeVariations: Story = {
   render: () => (
     <div className="space-y-8">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">Size Variations</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">Size Variations</h3>
+        <p className="text-fm-secondary text-sm">
           Different avatar sizes for various use cases
         </p>
       </div>
@@ -153,7 +153,7 @@ export const SizeVariations: Story = {
             />
             <AvatarFallback className="text-xs">XS</AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Extra Small (24px)</p>
+          <p className="text-fm-secondary text-xs">Extra Small (24px)</p>
         </div>
 
         {/* Small */}
@@ -165,7 +165,7 @@ export const SizeVariations: Story = {
             />
             <AvatarFallback className="text-xs">S</AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Small (28px)</p>
+          <p className="text-fm-secondary text-xs">Small (28px)</p>
         </div>
 
         {/* Default */}
@@ -177,7 +177,7 @@ export const SizeVariations: Story = {
             />
             <AvatarFallback>M</AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Default (32px)</p>
+          <p className="text-fm-secondary text-xs">Default (32px)</p>
         </div>
 
         {/* Large */}
@@ -189,7 +189,7 @@ export const SizeVariations: Story = {
             />
             <AvatarFallback>L</AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Large (48px)</p>
+          <p className="text-fm-secondary text-xs">Large (48px)</p>
         </div>
 
         {/* Extra Large */}
@@ -201,7 +201,7 @@ export const SizeVariations: Story = {
             />
             <AvatarFallback className="text-lg">XL</AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Extra Large (64px)</p>
+          <p className="text-fm-secondary text-xs">Extra Large (64px)</p>
         </div>
 
         {/* XXL */}
@@ -213,7 +213,7 @@ export const SizeVariations: Story = {
             />
             <AvatarFallback className="text-xl">XXL</AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">XXL (80px)</p>
+          <p className="text-fm-secondary text-xs">XXL (80px)</p>
         </div>
       </div>
     </div>
@@ -233,8 +233,10 @@ export const FallbackVariations: Story = {
   render: () => (
     <div className="space-y-8">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">Fallback Variations</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">
+          Fallback Variations
+        </h3>
+        <p className="text-fm-secondary text-sm">
           Different fallback content styles and approaches
         </p>
       </div>
@@ -245,7 +247,7 @@ export const FallbackVariations: Story = {
           <Avatar className="text-fm-primary size-12">
             <AvatarFallback>JD</AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Standard Initials</p>
+          <p className="text-fm-secondary text-xs">Standard Initials</p>
         </div>
 
         {/* Single Initial */}
@@ -253,7 +255,7 @@ export const FallbackVariations: Story = {
           <Avatar className="text-fm-primary size-12">
             <AvatarFallback>A</AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Single Initial</p>
+          <p className="text-fm-secondary text-xs">Single Initial</p>
         </div>
 
         {/* Numbers */}
@@ -261,7 +263,7 @@ export const FallbackVariations: Story = {
           <Avatar className="text-fm-primary size-12">
             <AvatarFallback>42</AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Numbers</p>
+          <p className="text-fm-secondary text-xs">Numbers</p>
         </div>
 
         {/* Custom Background */}
@@ -271,7 +273,7 @@ export const FallbackVariations: Story = {
               BG
             </AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Custom Background</p>
+          <p className="text-fm-secondary text-xs">Custom Background</p>
         </div>
 
         {/* Gradient Background */}
@@ -281,7 +283,7 @@ export const FallbackVariations: Story = {
               GR
             </AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Gradient</p>
+          <p className="text-fm-secondary text-xs">Gradient</p>
         </div>
 
         {/* Different Color */}
@@ -291,7 +293,7 @@ export const FallbackVariations: Story = {
               GN
             </AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Green Theme</p>
+          <p className="text-fm-secondary text-xs">Green Theme</p>
         </div>
 
         {/* Orange Theme */}
@@ -301,7 +303,7 @@ export const FallbackVariations: Story = {
               OR
             </AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Orange Theme</p>
+          <p className="text-fm-secondary text-xs">Orange Theme</p>
         </div>
 
         {/* Dark Theme */}
@@ -311,7 +313,7 @@ export const FallbackVariations: Story = {
               DK
             </AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Dark Theme</p>
+          <p className="text-fm-secondary text-xs">Dark Theme</p>
         </div>
       </div>
     </div>
@@ -331,17 +333,19 @@ export const RealWorldExamples: Story = {
   render: () => (
     <div className="space-y-12">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">Real World Examples</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">
+          Real World Examples
+        </h3>
+        <p className="text-fm-secondary text-sm">
           Common avatar usage patterns in UI components
         </p>
       </div>
 
       {/* User List */}
       <div className="space-y-4">
-        <h4 className="text-sm font-medium text-white/80">User List</h4>
+        <h4 className="text-fm-tertiary text-sm font-medium">User List</h4>
         <div className="mx-auto max-w-md space-y-3">
-          <div className="flex items-center gap-3 rounded-lg border border-white/10 bg-white/5 p-3">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-center gap-3 rounded-lg border p-3">
             <Avatar>
               <AvatarImage
                 src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face"
@@ -350,11 +354,11 @@ export const RealWorldExamples: Story = {
               <AvatarFallback>JD</AvatarFallback>
             </Avatar>
             <div>
-              <p className="text-sm font-medium text-white">John Doe</p>
-              <p className="text-xs text-white/60">john.doe@example.com</p>
+              <p className="text-fm-primary text-sm font-medium">John Doe</p>
+              <p className="text-fm-secondary text-xs">john.doe@example.com</p>
             </div>
           </div>
-          <div className="flex items-center gap-3 rounded-lg border border-white/10 bg-white/5 p-3">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-center gap-3 rounded-lg border p-3">
             <Avatar>
               <AvatarImage
                 src="https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=100&h=100&fit=crop&crop=face"
@@ -363,19 +367,25 @@ export const RealWorldExamples: Story = {
               <AvatarFallback>SW</AvatarFallback>
             </Avatar>
             <div>
-              <p className="text-sm font-medium text-white">Sarah Wilson</p>
-              <p className="text-xs text-white/60">sarah.wilson@example.com</p>
+              <p className="text-fm-primary text-sm font-medium">
+                Sarah Wilson
+              </p>
+              <p className="text-fm-secondary text-xs">
+                sarah.wilson@example.com
+              </p>
             </div>
           </div>
-          <div className="flex items-center gap-3 rounded-lg border border-white/10 bg-white/5 p-3">
+          <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-center gap-3 rounded-lg border p-3">
             <Avatar>
               <AvatarFallback className="bg-blue-500 text-white">
                 MJ
               </AvatarFallback>
             </Avatar>
             <div>
-              <p className="text-sm font-medium text-white">Michael Johnson</p>
-              <p className="text-xs text-white/60">michael.j@example.com</p>
+              <p className="text-fm-primary text-sm font-medium">
+                Michael Johnson
+              </p>
+              <p className="text-fm-secondary text-xs">michael.j@example.com</p>
             </div>
           </div>
         </div>
@@ -383,7 +393,7 @@ export const RealWorldExamples: Story = {
 
       {/* Comment Thread */}
       <div className="space-y-4">
-        <h4 className="text-sm font-medium text-white/80">Comment Thread</h4>
+        <h4 className="text-fm-tertiary text-sm font-medium">Comment Thread</h4>
         <div className="mx-auto max-w-md space-y-4">
           <div className="flex gap-3">
             <Avatar className="size-8">
@@ -394,15 +404,15 @@ export const RealWorldExamples: Story = {
               <AvatarFallback className="text-xs">AL</AvatarFallback>
             </Avatar>
             <div className="flex-1">
-              <div className="rounded-lg border border-white/10 bg-white/5 p-3">
-                <p className="mb-1 text-xs font-medium text-white">
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-3">
+                <p className="text-fm-primary mb-1 text-xs font-medium">
                   Alex Thompson
                 </p>
-                <p className="text-sm text-white/80">
+                <p className="text-fm-tertiary text-sm">
                   This looks great! Really like the new design direction.
                 </p>
               </div>
-              <p className="mt-1 text-xs text-white/40">2 hours ago</p>
+              <p className="text-fm-secondary mt-1 text-xs">2 hours ago</p>
             </div>
           </div>
           <div className="flex gap-3">
@@ -412,15 +422,15 @@ export const RealWorldExamples: Story = {
               </AvatarFallback>
             </Avatar>
             <div className="flex-1">
-              <div className="rounded-lg border border-white/10 bg-white/5 p-3">
-                <p className="mb-1 text-xs font-medium text-white">
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-3">
+                <p className="text-fm-primary mb-1 text-xs font-medium">
                   Emma Davis
                 </p>
-                <p className="text-sm text-white/80">
+                <p className="text-fm-tertiary text-sm">
                   Agreed! The frosted glass effect is perfect.
                 </p>
               </div>
-              <p className="mt-1 text-xs text-white/40">1 hour ago</p>
+              <p className="text-fm-secondary mt-1 text-xs">1 hour ago</p>
             </div>
           </div>
         </div>
@@ -428,7 +438,7 @@ export const RealWorldExamples: Story = {
 
       {/* Team Members */}
       <div className="space-y-4">
-        <h4 className="text-sm font-medium text-white/80">Team Members</h4>
+        <h4 className="text-fm-tertiary text-sm font-medium">Team Members</h4>
         <div className="flex items-center justify-center gap-2">
           <Avatar className="size-10">
             <AvatarImage
@@ -478,8 +488,8 @@ export const LoadingStates: Story = {
   render: () => (
     <div className="space-y-8">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">Loading States</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">Loading States</h3>
+        <p className="text-fm-secondary text-sm">
           How avatars handle loading and error states
         </p>
       </div>
@@ -496,7 +506,7 @@ export const LoadingStates: Story = {
               <div className="h-4 w-4 rounded bg-gray-400"></div>
             </AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Loading...</p>
+          <p className="text-fm-secondary text-xs">Loading...</p>
         </div>
 
         {/* Error State */}
@@ -507,7 +517,7 @@ export const LoadingStates: Story = {
               !
             </AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Error State</p>
+          <p className="text-fm-secondary text-xs">Error State</p>
         </div>
 
         {/* Skeleton State */}
@@ -515,7 +525,7 @@ export const LoadingStates: Story = {
           <Avatar className="animate-pulse bg-gray-700">
             <AvatarFallback className="bg-gray-600"></AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Skeleton</p>
+          <p className="text-fm-secondary text-xs">Skeleton</p>
         </div>
 
         {/* Success State */}
@@ -527,16 +537,16 @@ export const LoadingStates: Story = {
             />
             <AvatarFallback>OK</AvatarFallback>
           </Avatar>
-          <p className="text-xs text-white/60">Loaded</p>
+          <p className="text-fm-secondary text-xs">Loaded</p>
         </div>
       </div>
 
       <div className="text-center">
-        <div className="inline-block max-w-lg rounded-lg border border-white/10 bg-white/5 p-4">
-          <h4 className="mb-2 text-sm font-medium text-white">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary inline-block max-w-lg rounded-lg border p-4">
+          <h4 className="text-fm-primary mb-2 text-sm font-medium">
             Loading Behavior
           </h4>
-          <p className="text-xs leading-relaxed text-white/60">
+          <p className="text-fm-secondary text-xs leading-relaxed">
             Avatars automatically show fallback content while images are loading
             or if they fail to load. You can customize the fallback appearance
             to match your design system or show loading indicators.
@@ -560,15 +570,17 @@ export const AccessibilityExample: Story = {
   render: () => (
     <div className="space-y-8">
       <div className="text-center">
-        <h3 className="mb-2 font-medium text-white">Accessibility Features</h3>
-        <p className="text-sm text-white/60">
+        <h3 className="text-fm-primary mb-2 font-medium">
+          Accessibility Features
+        </h3>
+        <p className="text-fm-secondary text-sm">
           Proper accessibility implementation with alt text and descriptions
         </p>
       </div>
 
       <div className="mx-auto max-w-md space-y-6">
         {/* Profile with proper alt text */}
-        <div className="flex items-center gap-3 rounded-lg border border-white/10 bg-white/5 p-4">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-center gap-3 rounded-lg border p-4">
           <Avatar>
             <AvatarImage
               src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face"
@@ -577,26 +589,26 @@ export const AccessibilityExample: Story = {
             <AvatarFallback>JD</AvatarFallback>
           </Avatar>
           <div>
-            <p className="text-sm font-medium text-white">John Doe</p>
-            <p className="text-xs text-white/60">Software Engineer</p>
+            <p className="text-fm-primary text-sm font-medium">John Doe</p>
+            <p className="text-fm-secondary text-xs">Software Engineer</p>
           </div>
         </div>
 
         {/* Fallback with descriptive content */}
-        <div className="flex items-center gap-3 rounded-lg border border-white/10 bg-white/5 p-4">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-center gap-3 rounded-lg border p-4">
           <Avatar title="User avatar for Sarah Wilson">
             <AvatarFallback aria-label="Sarah Wilson's initials">
               SW
             </AvatarFallback>
           </Avatar>
           <div>
-            <p className="text-sm font-medium text-white">Sarah Wilson</p>
-            <p className="text-xs text-white/60">UX Designer</p>
+            <p className="text-fm-primary text-sm font-medium">Sarah Wilson</p>
+            <p className="text-fm-secondary text-xs">UX Designer</p>
           </div>
         </div>
 
         {/* Online status indicator */}
-        <div className="flex items-center gap-3 rounded-lg border border-white/10 bg-white/5 p-4">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-center gap-3 rounded-lg border p-4">
           <div className="relative">
             <Avatar>
               <AvatarImage
@@ -606,24 +618,26 @@ export const AccessibilityExample: Story = {
               <AvatarFallback>ED</AvatarFallback>
             </Avatar>
             <div
-              className="absolute -right-0.5 -bottom-0.5 h-3 w-3 rounded-full border-2 border-gray-900 bg-green-500"
+              className="border-fm-surface-primary bg-fm-surface-positive absolute -right-0.5 -bottom-0.5 h-3 w-3 rounded-full border-2"
               aria-label="Online status indicator"
               title="Currently online"
             ></div>
           </div>
           <div>
-            <p className="text-sm font-medium text-white">Emma Davis</p>
-            <p className="text-xs text-white/60">Product Manager • Online</p>
+            <p className="text-fm-primary text-sm font-medium">Emma Davis</p>
+            <p className="text-fm-secondary text-xs">
+              Product Manager • Online
+            </p>
           </div>
         </div>
       </div>
 
       <div className="text-center">
-        <div className="inline-block max-w-lg rounded-lg border border-white/10 bg-white/5 p-4">
-          <h4 className="mb-2 text-sm font-medium text-white">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary inline-block max-w-lg rounded-lg border p-4">
+          <h4 className="text-fm-primary mb-2 text-sm font-medium">
             Accessibility Best Practices
           </h4>
-          <div className="space-y-2 text-left text-xs text-white/60">
+          <div className="text-fm-secondary space-y-2 text-left text-xs">
             <p>• Use descriptive alt text for images</p>
             <p>• Provide aria-label for fallback content</p>
             <p>• Include title attributes for additional context</p>

package/dist/components/button/Button.stories.tsx

@@ -135,7 +135,7 @@ export const ChipVariants: Story = {
         <TabsContent value="chip" className="mt-6">
           <div className="flex flex-col gap-6">
             <div className="flex flex-col gap-4">
-              <h3 className="text-lg font-semibold text-white">
+              <h3 className="text-fm-primary text-lg font-semibold">
                 Noise Variations
               </h3>
               <div className="flex gap-4">
@@ -154,7 +154,7 @@ export const ChipVariants: Story = {
               </div>
             </div>
             <div className="flex flex-col gap-4">
-              <h3 className="text-lg font-semibold text-white">
+              <h3 className="text-fm-primary text-lg font-semibold">
                 Size Variations
               </h3>
               <div className="flex gap-4">
@@ -170,7 +170,7 @@ export const ChipVariants: Story = {
               </div>
             </div>
             <div className="flex flex-col gap-4">
-              <h3 className="text-lg font-semibold text-white">
+              <h3 className="text-fm-primary text-lg font-semibold">
                 Disabled State
               </h3>
               <div className="flex gap-4">
@@ -184,7 +184,7 @@ export const ChipVariants: Story = {
         <TabsContent value="chipActive" className="mt-6">
           <div className="flex flex-col gap-6">
             <div className="flex flex-col gap-4">
-              <h3 className="text-lg font-semibold text-white">
+              <h3 className="text-fm-primary text-lg font-semibold">
                 Noise Variations
               </h3>
               <div className="flex gap-4">
@@ -203,7 +203,7 @@ export const ChipVariants: Story = {
               </div>
             </div>
             <div className="flex flex-col gap-4">
-              <h3 className="text-lg font-semibold text-white">
+              <h3 className="text-fm-primary text-lg font-semibold">
                 Size Variations
               </h3>
               <div className="flex gap-4">
@@ -219,7 +219,7 @@ export const ChipVariants: Story = {
               </div>
             </div>
             <div className="flex flex-col gap-4">
-              <h3 className="text-lg font-semibold text-white">
+              <h3 className="text-fm-primary text-lg font-semibold">
                 Disabled State
               </h3>
               <div className="flex gap-4">
@@ -254,7 +254,7 @@ export const AllVariants: Story = {
         </Button>
         <Button variant="chipActive">Chip Active Button</Button>
       </div>
-      <div className="flex gap-4">
+      <div className="flex items-end gap-4">
         <Button variant="primary" noise="strong" size="sm">
           Small
         </Button>

package/dist/components/button/index.tsx

@@ -11,9 +11,9 @@ export const buttonVariants = cva(
     variants: {
       variant: {
         primary:
-          "before:absolute before:inset-0 before:rounded-full before:border-[length:var(--stroke-fm-xsm)] before:border-transparent before:[background-image:var(--button-fm-background),linear-gradient(to_top,color-mix(in_srgb,var(--color-fm-primary-600)_50%,_transparent))] text-fm-neutral-1100",
+          "before:absolute before:inset-0 before:rounded-full before:border-[length:var(--stroke-fm-xsm)] before:border-fm-button-border-primary before:[background-image:var(--button-fm-background),linear-gradient(to_top,color-mix(in_srgb,var(--color-fm-primary-600)_50%,_transparent))] text-fm-button-text",
         secondary:
-          "before:absolute before:inset-0 rounded-full before:border-[length:var(--stroke-fm-xsm)] before:border-transparent bg-fm-surface-secondary text-fm-primary",
+          "before:absolute before:inset-0 before:rounded-full rounded-full before:border-[length:var(--stroke-fm-xsm)] before:border-fm-button-border-secondary bg-fm-surface-secondary text-fm-primary",
         outline: "text-fm-primary",
         text: "bg-transparent text-fm-secondary-800",
         chip: "text-fm-secondary font-fm-text",
@@ -44,9 +44,9 @@ export const innerButtonVariants = cva(
     variants: {
       variant: {
         primary:
-          "shadow-[0_0_1.5rem_var(--color-fm-primary-400)_inset] group-active:translate-y-0 [--gradientSizeX:50%] [--gradientSizeY:150%] [--gradientPositionY:100%] group-hover:[--gradientSizeX:40%] group-hover:[--gradientSizeY:110%] group-hover:[--gradientPositionY:50%] bg-cover bg-center [background-blend-mode:color-dodge,multiply,darken] duration-300 bg-repeat-x bg-auto bg-center bg-origin-border",
+          "border-fm-button-border-primary shadow-[0_0_1.5rem_var(--color-fm-button-inner-glow)_inset] group-active:translate-y-0 [--gradientSizeX:50%] [--gradientSizeY:150%] [--gradientPositionY:100%] group-hover:[--gradientSizeX:40%] group-hover:[--gradientSizeY:110%] group-hover:[--gradientPositionY:50%] bg-cover bg-center [background-blend-mode:color-dodge,multiply,darken] duration-300 bg-repeat-x bg-auto bg-center bg-origin-border",
         secondary:
-          "group-active:translate-y-0 bg-fm-button-fill-secondary bg-repeat-x bg-auto bg-center bg-origin-border",
+          "border-fm-button-border-secondary group-active:translate-y-0 bg-fm-button-fill-secondary bg-repeat-x bg-auto bg-center bg-origin-border",
         outline:
           "border-[length:var(--stroke-fm-sm)] border-fm-divider-contrast !translate-y-0",
         text: "",
@@ -84,19 +84,19 @@ export const innerButtonVariants = cva(
         variant: "primary",
         noise: "low",
         className:
-          "[background-image:var(--button-fm-noise-low),_radial-gradient(ellipse_var(--gradientSizeX)_var(--gradientSizeY)_at_50%_var(--gradientPositionY),_var(--color-fm-primary-600),_var(--color-fm-secondary-300)),_linear-gradient(_to_top,_color-mix(in_srgb,var(--color-fm-primary-600)_50%,_transparent),_color-mix(in_srgb,var(--color-fm-primary-200)_50%,_transparent))]",
+          "[background-image:var(--button-fm-noise-low),_radial-gradient(ellipse_var(--gradientSizeX)_var(--gradientSizeY)_at_50%_var(--gradientPositionY),_var(--color-fm-primary-600),_var(--color-fm-button-fg-end)),_linear-gradient(_to_top,_color-mix(in_srgb,var(--color-fm-primary-600)_50%,_transparent),_color-mix(in_srgb,var(--color-fm-primary-200)_50%,_transparent))]",
       },
       {
         variant: "primary",
         noise: "medium",
         className:
-          "[background-image:var(--button-fm-noise),_radial-gradient(ellipse_var(--gradientSizeX)_var(--gradientSizeY)_at_50%_var(--gradientPositionY),_var(--color-fm-primary-600),_var(--color-fm-secondary-300)),_linear-gradient(_to_top,_color-mix(in_srgb,var(--color-fm-primary-600)_50%,_transparent),_color-mix(in_srgb,var(--color-fm-primary-200)_50%,_transparent))]",
+          "[background-image:var(--button-fm-noise),_radial-gradient(ellipse_var(--gradientSizeX)_var(--gradientSizeY)_at_50%_var(--gradientPositionY),_var(--color-fm-primary-600),_var(--color-fm-button-fg-end)),_linear-gradient(_to_top,_color-mix(in_srgb,var(--color-fm-primary-600)_50%,_transparent),_color-mix(in_srgb,var(--color-fm-primary-200)_50%,_transparent))]",
       },
       {
         variant: "primary",
         noise: "strong",
         className:
-          "[background-image:var(--button-fm-noise-strong),_radial-gradient(ellipse_var(--gradientSizeX)_var(--gradientSizeY)_at_50%_var(--gradientPositionY),_var(--color-fm-primary-600),_var(--color-fm-secondary-300)),_linear-gradient(_to_top,_color-mix(in_srgb,var(--color-fm-primary-600)_50%,_transparent),_color-mix(in_srgb,var(--color-fm-primary-200)_50%,_transparent))]",
+          "[background-image:var(--button-fm-noise-strong),_radial-gradient(ellipse_var(--gradientSizeX)_var(--gradientSizeY)_at_50%_var(--gradientPositionY),_var(--color-fm-primary-600),_var(--color-fm-button-fg-end)),_linear-gradient(_to_top,_color-mix(in_srgb,var(--color-fm-primary-600)_50%,_transparent),_color-mix(in_srgb,var(--color-fm-primary-200)_50%,_transparent))]",
       },
       {
         variant: "secondary",

package/dist/components/card/Card.stories.tsx

@@ -326,15 +326,15 @@ export const ContentVariations: Story = {
         <CardContent>
           <ul className="space-y-2">
             <li className="flex items-center gap-2">
-              <div className="h-2 w-2 rounded-full bg-green-500"></div>
+              <div className="bg-fm-surface-positive h-2 w-2 rounded-full"></div>
               <span>Task completed</span>
             </li>
             <li className="flex items-center gap-2">
-              <div className="h-2 w-2 rounded-full bg-yellow-500"></div>
+              <div className="bg-fm-surface-warning h-2 w-2 rounded-full"></div>
               <span>In progress</span>
             </li>
             <li className="flex items-center gap-2">
-              <div className="h-2 w-2 rounded-full bg-red-500"></div>
+              <div className="bg-fm-surface-negative h-2 w-2 rounded-full"></div>
               <span>Blocked</span>
             </li>
           </ul>