aural-ui 3.0.6 → 4.0.1

package/dist/components/textarea/TextArea.stories.tsx

@@ -716,7 +716,7 @@ export const Unstyled: Story = {
     placeholder: "Completely unstyled textarea...",
     unstyled: true,
     className:
-      "border-2 border-dashed border-gray-300 p-4 rounded-lg bg-gray-50",
+      "border-2 border-dashed border-fm-divider-secondary p-4 rounded-lg bg-fm-surface-secondary",
     fullWidth: true,
   },
   parameters: {

package/dist/components/thumbnail-tags/ThumbnailTags.stories.tsx

@@ -111,7 +111,9 @@ export const AllVariants: Story = {
   render: () => (
     <div className="flex flex-col gap-6">
       <div className="space-y-4">
-        <h3 className="text-fm-lg font-semibold text-white">Promotional Tag</h3>
+        <h3 className="text-fm-lg text-fm-primary font-semibold">
+          Promotional Tag
+        </h3>
         <div className="flex gap-4">
           <ThumbnailTags variant="promotional" text="30% off" />
           <ThumbnailTags variant="promotional" text="NEW" />
@@ -120,7 +122,9 @@ export const AllVariants: Story = {
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-fm-lg font-semibold text-white">Checked Tag</h3>
+        <h3 className="text-fm-lg text-fm-primary font-semibold">
+          Checked Tag
+        </h3>
         <div className="flex gap-4">
           <ThumbnailTags variant="checked" />
           <ThumbnailTags variant="checked" />
@@ -129,7 +133,9 @@ export const AllVariants: Story = {
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-fm-lg font-semibold text-white">Engagement Tag</h3>
+        <h3 className="text-fm-lg text-fm-primary font-semibold">
+          Engagement Tag
+        </h3>
         <div className="flex gap-4">
           <ThumbnailTags
             variant="engagement"
@@ -150,14 +156,14 @@ export const AllVariants: Story = {
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-fm-lg font-semibold text-white">Top 10 Tag</h3>
+        <h3 className="text-fm-lg text-fm-primary font-semibold">Top 10 Tag</h3>
         <div className="flex gap-4">
           <ThumbnailTags variant="top10" />
         </div>
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-fm-lg font-semibold text-white">
+        <h3 className="text-fm-lg text-fm-primary font-semibold">
           Completed Series Tag
         </h3>
         <div className="flex gap-4">
@@ -166,7 +172,7 @@ export const AllVariants: Story = {
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-fm-lg font-semibold text-white">Ranked Tag</h3>
+        <h3 className="text-fm-lg text-fm-primary font-semibold">Ranked Tag</h3>
         <div className="flex gap-4">
           <ThumbnailTags variant="ranked" text="#1 show" />
         </div>
@@ -183,7 +189,7 @@ export const UseCases: Story = {
   render: () => (
     <div className="space-y-8">
       <div className="space-y-4">
-        <h3 className="text-fm-lg font-semibold text-white">
+        <h3 className="text-fm-lg text-fm-primary font-semibold">
           Promotional Tags
         </h3>
         <div className="flex gap-4">
@@ -194,7 +200,7 @@ export const UseCases: Story = {
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-fm-lg font-semibold text-white">
+        <h3 className="text-fm-lg text-fm-primary font-semibold">
           Status Indicators
         </h3>
         <div className="flex gap-4">
@@ -203,7 +209,7 @@ export const UseCases: Story = {
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-fm-lg font-semibold text-white">
+        <h3 className="text-fm-lg text-fm-primary font-semibold">
           Engagement Metrics
         </h3>
         <div className="flex gap-4">
@@ -226,7 +232,7 @@ export const UseCases: Story = {
       </div>
 
       <div className="space-y-4">
-        <h3 className="text-fm-lg font-semibold text-white">
+        <h3 className="text-fm-lg text-fm-primary font-semibold">
           Achievement Badges
         </h3>
         <div className="flex gap-4">

package/dist/components/toast/Toast.stories.tsx

@@ -813,24 +813,26 @@ export const AccessibilityFeatures: Story = {
       <p>Toast notifications are built with accessibility in mind.</p>
 
       <div className="space-y-3">
-        <div className="rounded-lg bg-blue-50 p-4">
-          <h3 className="font-medium text-blue-900">Keyboard Navigation</h3>
-          <p className="text-sm text-blue-700">
+        <div className="bg-fm-surface-info-sec rounded-lg p-4">
+          <h3 className="text-fm-info font-medium">Keyboard Navigation</h3>
+          <p className="text-fm-info-sec text-sm">
             Use Tab to focus toasts, Enter/Space to activate actions, Escape to
             dismiss.
           </p>
         </div>
 
-        <div className="rounded-lg bg-green-50 p-4">
-          <h3 className="font-medium text-green-900">Screen Reader Support</h3>
-          <p className="text-sm text-green-700">
+        <div className="bg-fm-surface-positive-sec rounded-lg p-4">
+          <h3 className="text-fm-positive font-medium">
+            Screen Reader Support
+          </h3>
+          <p className="text-fm-positive text-sm">
             Toasts are announced to screen readers with proper ARIA labels.
           </p>
         </div>
 
-        <div className="rounded-lg bg-purple-50 p-4">
-          <h3 className="font-medium text-purple-900">Reduced Motion</h3>
-          <p className="text-sm text-purple-700">
+        <div className="bg-fm-surface-secondary rounded-lg p-4">
+          <h3 className="text-fm-primary font-medium">Reduced Motion</h3>
+          <p className="text-fm-secondary text-sm">
             Respects user's motion preferences for animations.
           </p>
         </div>
@@ -985,14 +987,14 @@ export const HeadlessCustomDesign: Story = {
     ) => {
       toast.custom((t) => (
         <div
-          className={`flex items-center gap-3 rounded-xl border p-4 shadow-lg backdrop-blur-sm ${type === "success" ? "border-green-200 bg-green-50/90 text-green-800" : ""} ${type === "error" ? "border-red-200 bg-red-50/90 text-red-800" : ""} ${type === "warning" ? "border-orange-200 bg-orange-50/90 text-orange-800" : ""} ${type === "info" ? "border-blue-200 bg-blue-50/90 text-blue-800" : ""} transform transition-all duration-300 ease-in-out ${t ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"} `}
+          className={`flex items-center gap-3 rounded-xl border p-4 shadow-lg backdrop-blur-sm ${type === "success" ? "border-fm-divider-positive bg-fm-surface-positive-sec text-fm-positive" : ""} ${type === "error" ? "border-fm-divider-secondary bg-fm-surface-negative-sec text-fm-negative" : ""} ${type === "warning" ? "border-fm-divider-warning bg-fm-surface-warning-sec text-fm-warning" : ""} ${type === "info" ? "border-fm-divider-secondary bg-fm-surface-info-sec text-fm-info" : ""} transform transition-all duration-300 ease-in-out ${t ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"} `}
         >
           {/* Custom Icons */}
           <div className="flex-shrink-0">
             {type === "success" && (
-              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-green-100">
+              <div className="bg-fm-surface-positive-sec flex h-8 w-8 items-center justify-center rounded-full">
                 <svg
-                  className="h-5 w-5 text-green-600"
+                  className="text-fm-icon-positive h-5 w-5"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -1007,9 +1009,9 @@ export const HeadlessCustomDesign: Story = {
               </div>
             )}
             {type === "error" && (
-              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-red-100">
+              <div className="bg-fm-surface-negative-sec flex h-8 w-8 items-center justify-center rounded-full">
                 <svg
-                  className="h-5 w-5 text-red-600"
+                  className="text-fm-icon-negative h-5 w-5"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -1024,9 +1026,9 @@ export const HeadlessCustomDesign: Story = {
               </div>
             )}
             {type === "warning" && (
-              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-orange-100">
+              <div className="bg-fm-surface-warning-sec flex h-8 w-8 items-center justify-center rounded-full">
                 <svg
-                  className="h-5 w-5 text-orange-600"
+                  className="text-fm-icon-warning h-5 w-5"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -1041,9 +1043,9 @@ export const HeadlessCustomDesign: Story = {
               </div>
             )}
             {type === "info" && (
-              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100">
+              <div className="bg-fm-surface-info-sec flex h-8 w-8 items-center justify-center rounded-full">
                 <svg
-                  className="h-5 w-5 text-blue-600"
+                  className="text-fm-info h-5 w-5"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
@@ -1088,7 +1090,7 @@ export const HeadlessCustomDesign: Story = {
     const cardToast = (title: string, description: string, avatar?: string) => {
       toast.custom((t) => (
         <div
-          className={`max-w-sm transform rounded-2xl border border-gray-200 bg-white p-4 shadow-xl transition-all duration-300 ease-in-out ${t ? "translate-y-0 scale-100 opacity-100" : "translate-y-2 scale-95 opacity-0"} `}
+          className={`border-fm-divider-secondary bg-fm-surface-primary max-w-sm transform rounded-2xl border p-4 shadow-xl transition-all duration-300 ease-in-out ${t ? "translate-y-0 scale-100 opacity-100" : "translate-y-2 scale-95 opacity-0"} `}
         >
           <div className="flex items-start gap-3">
             {avatar && (
@@ -1101,15 +1103,19 @@ export const HeadlessCustomDesign: Story = {
             <div className="min-w-0 flex-1">
               <div className="flex items-start justify-between">
                 <div>
-                  <p className="text-sm font-semibold text-gray-900">{title}</p>
-                  <p className="mt-1 text-sm text-gray-600">{description}</p>
+                  <p className="text-fm-primary text-sm font-semibold">
+                    {title}
+                  </p>
+                  <p className="text-fm-secondary mt-1 text-sm">
+                    {description}
+                  </p>
                 </div>
                 <button
                   onClick={() => toast.dismiss(t)}
-                  className="ml-2 flex-shrink-0 rounded-full p-1 transition-colors hover:bg-gray-100"
+                  className="hover:bg-fm-surface-secondary ml-2 flex-shrink-0 rounded-full p-1 transition-colors"
                 >
                   <svg
-                    className="h-4 w-4 text-gray-400"
+                    className="text-fm-secondary h-4 w-4"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -1124,12 +1130,12 @@ export const HeadlessCustomDesign: Story = {
                 </button>
               </div>
               <div className="mt-3 flex gap-2">
-                <button className="rounded-full bg-blue-600 px-3 py-1 text-xs text-white transition-colors hover:bg-blue-700">
+                <button className="bg-fm-surface-info text-fm-surface-primary hover:bg-fm-surface-info rounded-full px-3 py-1 text-xs transition-colors">
                   View
                 </button>
                 <button
                   onClick={() => toast.dismiss(t)}
-                  className="rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-700 transition-colors hover:bg-gray-200"
+                  className="bg-fm-surface-secondary text-fm-secondary hover:bg-fm-surface-tertiary rounded-full px-3 py-1 text-xs transition-colors"
                 >
                   Dismiss
                 </button>
@@ -1143,27 +1149,27 @@ export const HeadlessCustomDesign: Story = {
     const progressToast = (message: string) => {
       const toastId = toast.custom((t) => (
         <div
-          className={`min-w-[300px] transform rounded-xl border border-gray-200 bg-white p-4 shadow-lg transition-all duration-300 ease-in-out ${t ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"} `}
+          className={`border-fm-divider-secondary bg-fm-surface-primary min-w-[300px] transform rounded-xl border p-4 shadow-lg transition-all duration-300 ease-in-out ${t ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"} `}
         >
           <div className="flex items-center gap-3">
-            <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-100">
-              <div className="h-4 w-4 animate-spin rounded-full border-2 border-blue-600 border-t-transparent"></div>
+            <div className="bg-fm-surface-info-sec flex h-8 w-8 items-center justify-center rounded-full">
+              <div className="border-fm-info h-4 w-4 animate-spin rounded-full border-2 border-t-transparent"></div>
             </div>
             <div className="flex-1">
-              <p className="font-medium text-gray-900">{message}</p>
-              <div className="mt-2 h-2 w-full rounded-full bg-gray-200">
+              <p className="text-fm-primary font-medium">{message}</p>
+              <div className="bg-fm-surface-tertiary mt-2 h-2 w-full rounded-full">
                 <div
-                  className="progress-bar h-2 rounded-full bg-blue-600"
+                  className="progress-bar bg-fm-surface-info h-2 rounded-full"
                   style={{ width: "0%" }}
                 ></div>
               </div>
             </div>
             <button
               onClick={() => toast.dismiss(t)}
-              className="flex-shrink-0 rounded-full p-1 transition-colors hover:bg-gray-100"
+              className="hover:bg-fm-surface-secondary flex-shrink-0 rounded-full p-1 transition-colors"
             >
               <svg
-                className="h-4 w-4 text-gray-400"
+                className="text-fm-secondary h-4 w-4"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -1196,10 +1202,10 @@ export const HeadlessCustomDesign: Story = {
           setTimeout(() => {
             toast.dismiss(toastId)
             toast.custom(() => (
-              <div className="flex items-center gap-3 rounded-xl border border-green-200 bg-green-50 p-4">
-                <div className="flex h-8 w-8 items-center justify-center rounded-full bg-green-100">
+              <div className="border-fm-divider-positive bg-fm-surface-positive-sec flex items-center gap-3 rounded-xl border p-4">
+                <div className="bg-fm-surface-positive-sec flex h-8 w-8 items-center justify-center rounded-full">
                   <svg
-                    className="h-5 w-5 text-green-600"
+                    className="text-fm-icon-positive h-5 w-5"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -1212,7 +1218,7 @@ export const HeadlessCustomDesign: Story = {
                     />
                   </svg>
                 </div>
-                <span className="font-medium text-green-800">
+                <span className="text-fm-positive font-medium">
                   Upload completed!
                 </span>
               </div>
@@ -1225,17 +1231,17 @@ export const HeadlessCustomDesign: Story = {
     const glassmorphismToast = (message: string, emoji: string) => {
       toast.custom((t) => (
         <div
-          className={`transform rounded-2xl border border-white/30 bg-white/20 p-4 shadow-xl backdrop-blur-md transition-all duration-500 ease-out ${t ? "translate-y-0 scale-100 opacity-100" : "translate-y-4 scale-95 opacity-0"} `}
+          className={`border-fm-divider-secondary bg-fm-surface-secondary transform rounded-2xl border p-4 shadow-xl backdrop-blur-md transition-all duration-500 ease-out ${t ? "translate-y-0 scale-100 opacity-100" : "translate-y-4 scale-95 opacity-0"} `}
         >
           <div className="flex items-center gap-3">
             <span className="text-2xl">{emoji}</span>
-            <span className="font-medium text-gray-800">{message}</span>
+            <span className="text-fm-primary font-medium">{message}</span>
             <button
               onClick={() => toast.dismiss(t)}
-              className="ml-auto rounded-full p-1 transition-colors hover:bg-white/20"
+              className="hover:bg-fm-surface-tertiary ml-auto rounded-full p-1 transition-colors"
             >
               <svg
-                className="h-4 w-4 text-gray-600"
+                className="text-fm-secondary h-4 w-4"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -1377,8 +1383,8 @@ export const HeadlessCustomDesign: Story = {
           {/* Code Example */}
           <div className="space-y-3">
             <h3 className="text-lg font-medium">Implementation Example</h3>
-            <div className="rounded-lg bg-gray-50 p-4 text-sm">
-              <pre className="overflow-x-auto text-gray-800">
+            <div className="bg-fm-surface-secondary rounded-lg p-4 text-sm">
+              <pre className="text-fm-primary overflow-x-auto">
                 {`// Custom toast with full control
 toast.custom((t) => (
   <div className={\`
@@ -1387,8 +1393,8 @@ toast.custom((t) => (
     \${t ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0'}
   \`}>
     <div className="flex items-center gap-3">
-      <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
-        <CheckIcon className="w-5 h-5 text-blue-600" />
+      <div className="w-8 h-8 bg-fm-surface-info-sec rounded-full flex items-center justify-center">
+        <CheckIcon className="w-5 h-5 text-fm-info" />
       </div>
       <span className="font-medium">Custom message</span>
       <button onClick={() => toast.dismiss(t)}>