aural-ui 4.0.1 → 4.2.0

package/dist/icons/all-icons.tsx

@@ -25,8 +25,8 @@ const IconUsageModal: React.FC<{
 function MyComponent() {
   return (
     <div className="flex items-center gap-2">
-      <${iconName} className="h-5 w-5 text-white" />
-      <span>Icon with text</span>
+      <${iconName} className="text-fm-primary h-5 w-5" />
+      <span className="text-fm-primary">Icon with text</span>
     </div>
   )
 }`,
@@ -40,7 +40,7 @@ function CustomIcon() {
     <${iconName}
       width={32}
       height={32}
-      className="text-blue-500"
+      className="text-fm-info"
     />
   )
 }`,
@@ -65,7 +65,7 @@ function IconButton() {
 
 function InteractiveIcon() {
   return (
-    <${iconName} className="h-6 w-6 text-gray-400 transition-colors hover:text-white" />
+    <${iconName} className="text-fm-tertiary hover:text-fm-primary h-6 w-6 transition-colors" />
   )
 }`,
     },
@@ -140,19 +140,19 @@ function InteractiveIcon() {
               </div>
               <div className="text-center">
                 <IconComponent className="text-fm-info mb-2 h-8 w-8" />
-                <span className="text-fm-tertiary text-xs">Large Blue</span>
+                <span className="text-fm-tertiary text-xs">Large Info</span>
               </div>
               <div className="text-center">
                 <IconComponent className="text-fm-positive mb-2 h-4 w-4" />
-                <span className="text-fm-tertiary text-xs">Small Green</span>
+                <span className="text-fm-tertiary text-xs">Small Positive</span>
               </div>
               <div className="text-center">
                 <IconComponent className="text-fm-negative mb-2 h-6 w-6" />
-                <span className="text-fm-tertiary text-xs">Red</span>
+                <span className="text-fm-tertiary text-xs">Negative</span>
               </div>
               <div className="text-center">
                 <IconComponent className="text-fm-warning mb-2 h-6 w-6" />
-                <span className="text-fm-tertiary text-xs">Yellow</span>
+                <span className="text-fm-tertiary text-xs">Warning</span>
               </div>
             </div>
           </div>
@@ -230,11 +230,17 @@ const IconCategory: React.FC<IconCategoryProps> = ({ category, children }) => {
   return (
     <div className="space-y-8">
       <div className="flex items-center gap-4">
-        <div className="from-fm-secondary-500/50 h-px flex-1 bg-linear-to-r to-transparent" />
-        <h2 className="border-fm-secondary-500/20 bg-fm-secondary-500/10 text-fm-icon-brand-secondary rounded-full border px-4 py-2 text-lg font-semibold">
+        <div
+          className="h-px flex-1"
+          style={{ background: "var(--gradient-fm-stroke-neutral)" }}
+        />
+        <h2 className="border-fm-secondary-500/20 bg-fm-secondary-500/10 text-fm-secondary-800 rounded-full border px-4 py-2 text-lg font-semibold">
           {category}
         </h2>
-        <div className="to-fm-secondary-500/50 h-px flex-1 bg-linear-to-l from-transparent" />
+        <div
+          className="h-px flex-1"
+          style={{ background: "var(--gradient-fm-stroke-neutral)" }}
+        />
       </div>
       <div className="space-y-12">{children}</div>
     </div>
@@ -392,6 +398,19 @@ export const Icons: React.FC = () => {
       return "actions"
     }
 
+    // Social platform icons
+    if (
+      name.includes("instagram") ||
+      name.includes("linkedin") ||
+      name.includes("twitter") ||
+      name.includes("threads") ||
+      name.includes("youtube") ||
+      name.includes("facebook") ||
+      name.includes("whatsapp")
+    ) {
+      return "social"
+    }
+
     // Interface icons
     if (
       name.includes("eye") ||
@@ -591,12 +610,14 @@ export const Icons: React.FC = () => {
     <div className="bg-fm-surface-primary min-h-screen">
       {/* Header */}
       <div className="border-fm-divider-secondary bg-fm-surface-secondary/50 relative overflow-hidden border-b backdrop-blur-xl">
-        <div className="from-fm-secondary-500/10 to-fm-info/10 absolute inset-0 bg-linear-to-r via-transparent" />
+        <div
+          aria-hidden="true"
+          className="absolute inset-0 opacity-70"
+          style={{ backgroundImage: "var(--gradient-fm-background)" }}
+        />
         <div className="relative mx-auto max-w-7xl px-6 py-16">
           <div className="space-y-6 text-center">
-            <h1 className="from-fm-primary via-fm-icon-brand-secondary to-fm-primary bg-linear-to-r bg-clip-text text-5xl font-bold text-transparent">
-              Icon Library
-            </h1>
+            <h1 className="text-fm-primary text-5xl font-bold">Icon Library</h1>
             <p className="text-fm-secondary mx-auto max-w-3xl text-xl leading-relaxed">
               A comprehensive collection of carefully crafted icons built with
               accessibility in mind. Each icon is optimized for clarity and
@@ -712,7 +733,7 @@ export const Icons: React.FC = () => {
                 ) : (
                   <>
                     No icons found matching "
-                    <span className="text-fm-negative font-medium">
+                    <span className="text-fm-negative-sec font-medium">
                       {searchTerm}
                     </span>
                     "