aural-ui 3.0.6 → 4.0.1

package/dist/components/toggle/Toggle.stories.tsx

@@ -175,14 +175,16 @@ export const Basic: Story = {
 export const Variants: Story = {
   render: () => (
     <div className="flex flex-col gap-8 p-8">
-      <h3 className="text-center text-lg font-medium text-white">
+      <h3 className="text-fm-primary text-center text-lg font-medium">
         Toggle Variants
       </h3>
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
         {/* Default Variant */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Default Variant</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">
+            Default Variant
+          </h4>
           <div className="flex flex-wrap gap-4">
             <Toggle aria-label="Default unpressed">Default</Toggle>
             <Toggle defaultPressed aria-label="Default pressed">
@@ -196,7 +198,9 @@ export const Variants: Story = {
 
         {/* Outline Variant */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Outline Variant</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">
+            Outline Variant
+          </h4>
           <div className="flex flex-wrap gap-4">
             <Toggle variant="outline" aria-label="Outline unpressed">
               Outline
@@ -216,7 +220,9 @@ export const Variants: Story = {
 
         {/* Filled Variant */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Filled Variant</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">
+            Filled Variant
+          </h4>
           <div className="flex flex-wrap gap-4">
             <Toggle variant="filled" aria-label="Filled unpressed">
               Filled
@@ -246,14 +252,14 @@ export const Variants: Story = {
 export const Sizes: Story = {
   render: () => (
     <div className="space-y-8 p-8">
-      <h3 className="text-center text-lg font-medium text-white">
+      <h3 className="text-fm-primary text-center text-lg font-medium">
         Toggle Sizes
       </h3>
 
       <div className="space-y-6">
         {/* Size Comparison */}
         <div className="space-y-4">
-          <h4 className="text-center text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary text-center text-sm font-medium">
             Size Comparison
           </h4>
           <div className="flex items-center justify-center gap-4">
@@ -261,26 +267,26 @@ export const Sizes: Story = {
               <Toggle size="sm" aria-label="Small toggle">
                 Small
               </Toggle>
-              <span className="text-xs text-white/60">Small (32px)</span>
+              <span className="text-fm-secondary text-xs">Small (32px)</span>
             </div>
             <div className="flex flex-col items-center gap-2">
               <Toggle size="default" aria-label="Default toggle">
                 Default
               </Toggle>
-              <span className="text-xs text-white/60">Default (36px)</span>
+              <span className="text-fm-secondary text-xs">Default (36px)</span>
             </div>
             <div className="flex flex-col items-center gap-2">
               <Toggle size="lg" aria-label="Large toggle">
                 Large
               </Toggle>
-              <span className="text-xs text-white/60">Large (40px)</span>
+              <span className="text-fm-secondary text-xs">Large (40px)</span>
             </div>
           </div>
         </div>
 
         {/* Sizes with Icons */}
         <div className="space-y-4">
-          <h4 className="text-center text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary text-center text-sm font-medium">
             With Icons
           </h4>
           <div className="flex items-center justify-center gap-4">
@@ -301,7 +307,7 @@ export const Sizes: Story = {
 
         {/* Icon Only Sizes */}
         <div className="space-y-4">
-          <h4 className="text-center text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary text-center text-sm font-medium">
             Icon Only
           </h4>
           <div className="flex items-center justify-center gap-4">
@@ -338,14 +344,14 @@ export const IconToggles: Story = {
 
     return (
       <div className="space-y-8 p-8">
-        <h3 className="text-center text-lg font-medium text-white">
+        <h3 className="text-fm-primary text-center text-lg font-medium">
           Icon Toggles
         </h3>
 
         <div className="space-y-6">
           {/* Icon with Text */}
           <div className="space-y-4">
-            <h4 className="text-center text-sm font-medium text-white/70">
+            <h4 className="text-fm-secondary text-center text-sm font-medium">
               Icon with Text
             </h4>
             <div className="flex flex-wrap justify-center gap-4">
@@ -380,7 +386,7 @@ export const IconToggles: Story = {
 
           {/* Icon Only */}
           <div className="space-y-4">
-            <h4 className="text-center text-sm font-medium text-white/70">
+            <h4 className="text-fm-secondary text-center text-sm font-medium">
               Icon Only
             </h4>
             <div className="flex flex-wrap justify-center gap-4">
@@ -408,12 +414,14 @@ export const IconToggles: Story = {
 
           {/* Different Variants */}
           <div className="space-y-4">
-            <h4 className="text-center text-sm font-medium text-white/70">
+            <h4 className="text-fm-secondary text-center text-sm font-medium">
               Different Variants
             </h4>
             <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
               <div className="space-y-2">
-                <span className="text-xs text-white/60">Default Variant</span>
+                <span className="text-fm-secondary text-xs">
+                  Default Variant
+                </span>
                 <div className="flex flex-wrap gap-2">
                   <Toggle aria-label="Default alert">
                     <AlertIcon />
@@ -428,7 +436,9 @@ export const IconToggles: Story = {
               </div>
 
               <div className="space-y-2">
-                <span className="text-xs text-white/60">Outline Variant</span>
+                <span className="text-fm-secondary text-xs">
+                  Outline Variant
+                </span>
                 <div className="flex flex-wrap gap-2">
                   <Toggle variant="outline" aria-label="Outline alert">
                     <AlertIcon />
@@ -479,18 +489,18 @@ export const InteractiveStates: Story = {
 
     return (
       <div className="space-y-8 p-8">
-        <h3 className="text-center text-lg font-medium text-white">
+        <h3 className="text-fm-primary text-center text-lg font-medium">
           Interactive States
         </h3>
 
         <div className="space-y-6">
           {/* Text Formatting Toolbar */}
           <div className="space-y-4">
-            <h4 className="text-center text-sm font-medium text-white/70">
+            <h4 className="text-fm-secondary text-center text-sm font-medium">
               Text Formatting Toolbar
             </h4>
             <div className="flex justify-center">
-              <div className="flex items-center gap-1 rounded-lg border border-white/10 bg-white/5 p-2">
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-center gap-1 rounded-lg border p-2">
                 <Toggle
                   size="sm"
                   pressed={states.bold}
@@ -515,7 +525,7 @@ export const InteractiveStates: Story = {
                 >
                   <span className="underline">U</span>
                 </Toggle>
-                <div className="mx-2 h-6 w-px bg-white/20"></div>
+                <div className="bg-fm-surface-tertiary mx-2 h-6 w-px"></div>
                 <Toggle size="sm" aria-label="Add item">
                   <PlusIcon />
                 </Toggle>
@@ -528,14 +538,14 @@ export const InteractiveStates: Story = {
 
           {/* Settings Panel */}
           <div className="space-y-4">
-            <h4 className="text-center text-sm font-medium text-white/70">
+            <h4 className="text-fm-secondary text-center text-sm font-medium">
               Settings Panel
             </h4>
             <div className="mx-auto max-w-xs space-y-3">
-              <div className="flex items-center justify-between rounded-lg border border-white/10 bg-white/5 p-3">
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-center justify-between rounded-lg border p-3">
                 <div className="flex items-center gap-3">
-                  <AlertIcon className="h-4 w-4 text-blue-400" />
-                  <span className="text-sm text-white">Notifications</span>
+                  <AlertIcon className="text-fm-icon-info h-4 w-4" />
+                  <span className="text-fm-primary text-sm">Notifications</span>
                 </div>
                 <Toggle
                   size="sm"
@@ -545,10 +555,10 @@ export const InteractiveStates: Story = {
                 />
               </div>
 
-              <div className="flex items-center justify-between rounded-lg border border-white/10 bg-white/5 p-3">
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-center justify-between rounded-lg border p-3">
                 <div className="flex items-center gap-3">
-                  <TickCircleIcon className="h-4 w-4 text-green-400" />
-                  <span className="text-sm text-white">Auto Save</span>
+                  <TickCircleIcon className="text-fm-icon-positive h-4 w-4" />
+                  <span className="text-fm-primary text-sm">Auto Save</span>
                 </div>
                 <Toggle
                   size="sm"
@@ -558,10 +568,10 @@ export const InteractiveStates: Story = {
                 />
               </div>
 
-              <div className="flex items-center justify-between rounded-lg border border-white/10 bg-white/5 p-3">
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-center justify-between rounded-lg border p-3">
                 <div className="flex items-center gap-3">
-                  <EyeOpenIcon className="h-4 w-4 text-purple-400" />
-                  <span className="text-sm text-white">Dark Mode</span>
+                  <EyeOpenIcon className="text-fm-icon-brand-secondary h-4 w-4" />
+                  <span className="text-fm-primary text-sm">Dark Mode</span>
                 </div>
                 <Toggle
                   size="sm"
@@ -575,15 +585,21 @@ export const InteractiveStates: Story = {
 
           {/* State Display */}
           <div className="space-y-4">
-            <h4 className="text-center text-sm font-medium text-white/70">
+            <h4 className="text-fm-secondary text-center text-sm font-medium">
               Current States
             </h4>
-            <div className="mx-auto max-w-md rounded-lg border border-white/10 bg-white/5 p-4">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary mx-auto max-w-md rounded-lg border p-4">
               <div className="grid grid-cols-2 gap-2 text-xs">
                 {Object.entries(states).map(([key, value]) => (
                   <div key={key} className="flex justify-between">
-                    <span className="text-white/70 capitalize">{key}:</span>
-                    <span className={value ? "text-green-400" : "text-red-400"}>
+                    <span className="text-fm-secondary capitalize">{key}:</span>
+                    <span
+                      className={
+                        value
+                          ? "text-fm-icon-positive"
+                          : "text-fm-icon-negative"
+                      }
+                    >
                       {value ? "ON" : "OFF"}
                     </span>
                   </div>
@@ -609,27 +625,29 @@ export const InteractiveStates: Story = {
 export const AccessibilityDemo: Story = {
   render: () => (
     <div className="space-y-8 p-8">
-      <h3 className="text-center text-lg font-medium text-white">
+      <h3 className="text-fm-primary text-center text-lg font-medium">
         Accessibility Features
       </h3>
 
       <div className="space-y-6">
-        <div className="rounded-lg border border-blue-500/30 bg-blue-900/10 p-4">
-          <h4 className="mb-2 text-sm font-medium text-blue-300">
+        <div className="border-fm-divider-secondary bg-fm-surface-info-sec rounded-lg border p-4">
+          <h4 className="text-fm-info mb-2 text-sm font-medium">
             Keyboard Navigation
           </h4>
-          <p className="mb-2 text-xs text-blue-200/70">
+          <p className="text-fm-info-sec mb-2 text-xs">
             Try these keyboard interactions:
           </p>
-          <ul className="space-y-1 text-xs text-blue-200/70">
+          <ul className="text-fm-info-sec space-y-1 text-xs">
             <li>
-              • <kbd className="rounded bg-white/10 px-1">Tab</kbd> to focus
-              toggles
+              • <kbd className="bg-fm-surface-secondary rounded px-1">Tab</kbd>{" "}
+              to focus toggles
             </li>
             <li>
-              • <kbd className="rounded bg-white/10 px-1">Space</kbd> or{" "}
-              <kbd className="rounded bg-white/10 px-1">Enter</kbd> to toggle
-              state
+              •{" "}
+              <kbd className="bg-fm-surface-secondary rounded px-1">Space</kbd>{" "}
+              or{" "}
+              <kbd className="bg-fm-surface-secondary rounded px-1">Enter</kbd>{" "}
+              to toggle state
             </li>
             <li>• Clear focus indicators show current position</li>
             <li>• Screen readers announce pressed state</li>
@@ -638,7 +656,7 @@ export const AccessibilityDemo: Story = {
 
         {/* Keyboard Accessible Examples */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary text-sm font-medium">
             Keyboard Accessible Toggles
           </h4>
           <div className="flex flex-wrap justify-center gap-4">
@@ -668,12 +686,12 @@ export const AccessibilityDemo: Story = {
 
         {/* ARIA Labels Demo */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">
+          <h4 className="text-fm-secondary text-sm font-medium">
             ARIA Labels Best Practices
           </h4>
           <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
             <div className="space-y-3">
-              <span className="text-xs text-white/60">Good Examples</span>
+              <span className="text-fm-secondary text-xs">Good Examples</span>
               <div className="space-y-2">
                 <Toggle aria-label="Toggle notifications - receive alerts when new messages arrive">
                   <AlertIcon />
@@ -687,8 +705,8 @@ export const AccessibilityDemo: Story = {
             </div>
 
             <div className="space-y-3">
-              <span className="text-xs text-white/60">Code Examples</span>
-              <div className="rounded border border-white/10 bg-white/5 p-3 font-mono text-xs text-white/80">
+              <span className="text-fm-secondary text-xs">Code Examples</span>
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary text-fm-tertiary rounded border p-3 font-mono text-xs">
                 <div>aria-label="Toggle notifications"</div>
                 <div>aria-label="Show/hide password"</div>
                 <div>aria-label="Enable dark mode"</div>
@@ -697,11 +715,11 @@ export const AccessibilityDemo: Story = {
           </div>
         </div>
 
-        <div className="rounded-lg border border-amber-500/30 bg-amber-900/10 p-4">
-          <h4 className="mb-2 text-sm font-medium text-amber-300">
+        <div className="border-fm-divider-warning bg-fm-surface-warning-sec rounded-lg border p-4">
+          <h4 className="text-fm-warning mb-2 text-sm font-medium">
             Best Practices
           </h4>
-          <ul className="space-y-1 text-xs text-amber-200/70">
+          <ul className="text-fm-warning-sec space-y-1 text-xs">
             <li>• Always provide descriptive aria-label attributes</li>
             <li>• Include current state in label when helpful</li>
             <li>• Use consistent toggle patterns across your app</li>
@@ -750,17 +768,17 @@ export const UseCases: Story = {
 
     return (
       <div className="space-y-8 p-8">
-        <h3 className="text-center text-lg font-medium text-white">
+        <h3 className="text-fm-primary text-center text-lg font-medium">
           Real-world Use Cases
         </h3>
 
         <div className="space-y-8">
           {/* Editor Toolbar */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/70">
+            <h4 className="text-fm-secondary text-sm font-medium">
               Editor Toolbar
             </h4>
-            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
               <div className="flex items-center gap-1">
                 <Toggle
                   size="sm"
@@ -778,7 +796,7 @@ export const UseCases: Story = {
                 >
                   <span className="text-sm italic">I</span>
                 </Toggle>
-                <div className="mx-2 h-4 w-px bg-white/20"></div>
+                <div className="bg-fm-surface-tertiary mx-2 h-4 w-px"></div>
                 <Toggle
                   size="sm"
                   pressed={toolbar.list}
@@ -795,7 +813,7 @@ export const UseCases: Story = {
                 >
                   <span className="font-mono text-sm">&lt;/&gt;</span>
                 </Toggle>
-                <div className="mx-2 h-4 w-px bg-white/20"></div>
+                <div className="bg-fm-surface-tertiary mx-2 h-4 w-px"></div>
                 <Toggle size="sm" aria-label="Insert image">
                   <FileChartIcon />
                 </Toggle>
@@ -808,19 +826,19 @@ export const UseCases: Story = {
 
           {/* User Preferences */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/70">
+            <h4 className="text-fm-secondary text-sm font-medium">
               User Preferences
             </h4>
             <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
               <div className="space-y-3">
-                <div className="flex items-center justify-between rounded-lg border border-white/10 bg-white/5 p-3">
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-center justify-between rounded-lg border p-3">
                   <div className="flex items-center gap-3">
-                    <AlertIcon className="h-4 w-4 text-blue-400" />
+                    <AlertIcon className="text-fm-icon-info h-4 w-4" />
                     <div>
-                      <div className="text-sm text-white">
+                      <div className="text-fm-primary text-sm">
                         Push Notifications
                       </div>
-                      <div className="text-xs text-white/60">
+                      <div className="text-fm-secondary text-xs">
                         Get notified of updates
                       </div>
                     </div>
@@ -832,12 +850,12 @@ export const UseCases: Story = {
                   />
                 </div>
 
-                <div className="flex items-center justify-between rounded-lg border border-white/10 bg-white/5 p-3">
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-center justify-between rounded-lg border p-3">
                   <div className="flex items-center gap-3">
-                    <TickCircleIcon className="h-4 w-4 text-green-400" />
+                    <TickCircleIcon className="text-fm-icon-positive h-4 w-4" />
                     <div>
-                      <div className="text-sm text-white">Auto Save</div>
-                      <div className="text-xs text-white/60">
+                      <div className="text-fm-primary text-sm">Auto Save</div>
+                      <div className="text-fm-secondary text-xs">
                         Save changes automatically
                       </div>
                     </div>
@@ -851,12 +869,14 @@ export const UseCases: Story = {
               </div>
 
               <div className="space-y-3">
-                <div className="flex items-center justify-between rounded-lg border border-white/10 bg-white/5 p-3">
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-center justify-between rounded-lg border p-3">
                   <div className="flex items-center gap-3">
-                    <EyeOpenIcon className="h-4 w-4 text-purple-400" />
+                    <EyeOpenIcon className="text-fm-icon-brand-secondary h-4 w-4" />
                     <div>
-                      <div className="text-sm text-white">Preview Mode</div>
-                      <div className="text-xs text-white/60">
+                      <div className="text-fm-primary text-sm">
+                        Preview Mode
+                      </div>
+                      <div className="text-fm-secondary text-xs">
                         Show live preview
                       </div>
                     </div>
@@ -868,12 +888,12 @@ export const UseCases: Story = {
                   />
                 </div>
 
-                <div className="flex items-center justify-between rounded-lg border border-white/10 bg-white/5 p-3">
+                <div className="border-fm-divider-secondary bg-fm-surface-secondary flex items-center justify-between rounded-lg border p-3">
                   <div className="flex items-center gap-3">
                     <span className="text-lg">🌙</span>
                     <div>
-                      <div className="text-sm text-white">Dark Mode</div>
-                      <div className="text-xs text-white/60">
+                      <div className="text-fm-primary text-sm">Dark Mode</div>
+                      <div className="text-fm-secondary text-xs">
                         Use dark theme
                       </div>
                     </div>
@@ -890,10 +910,10 @@ export const UseCases: Story = {
 
           {/* Filter Toolbar */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/70">
+            <h4 className="text-fm-secondary text-sm font-medium">
               Filter Toolbar
             </h4>
-            <div className="rounded-lg border border-white/10 bg-white/5 p-4">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-4">
               <div className="flex flex-wrap gap-2">
                 <Toggle
                   variant="outline"
@@ -934,8 +954,10 @@ export const UseCases: Story = {
 
           {/* View Options */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/70">View Options</h4>
-            <div className="flex justify-center gap-1 rounded-lg border border-white/10 bg-white/5 p-1">
+            <h4 className="text-fm-secondary text-sm font-medium">
+              View Options
+            </h4>
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary flex justify-center gap-1 rounded-lg border p-1">
               <Toggle size="sm" defaultPressed aria-label="Grid view">
                 Grid
               </Toggle>
@@ -973,14 +995,14 @@ export const ControlledVsUncontrolled: Story = {
 
     return (
       <div className="space-y-8 p-8">
-        <h3 className="text-center text-lg font-medium text-white">
+        <h3 className="text-fm-primary text-center text-lg font-medium">
           Controlled vs Uncontrolled
         </h3>
 
         <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
           {/* Uncontrolled */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/70">
+            <h4 className="text-fm-secondary text-sm font-medium">
               Uncontrolled (Internal State)
             </h4>
             <div className="space-y-3">
@@ -993,7 +1015,7 @@ export const ControlledVsUncontrolled: Story = {
                 With Icon
               </Toggle>
             </div>
-            <div className="rounded border border-white/10 bg-white/5 p-3 font-mono text-xs text-white/80">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary text-fm-tertiary rounded border p-3 font-mono text-xs">
               <div>{"<Toggle>"}</div>
               <div>{"  Default State"}</div>
               <div>{"</Toggle>"}</div>
@@ -1006,7 +1028,7 @@ export const ControlledVsUncontrolled: Story = {
 
           {/* Controlled */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/70">
+            <h4 className="text-fm-secondary text-sm font-medium">
               Controlled (External State)
             </h4>
             <div className="space-y-3">
@@ -1037,7 +1059,7 @@ export const ControlledVsUncontrolled: Story = {
               </div>
             </div>
 
-            <div className="rounded border border-white/10 bg-white/5 p-3 font-mono text-xs text-white/80">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary text-fm-tertiary rounded border p-3 font-mono text-xs">
               <div>{"const [state, setState] = useState(false)"}</div>
               <br />
               <div>{"<Toggle"}</div>
@@ -1050,16 +1072,16 @@ export const ControlledVsUncontrolled: Story = {
           </div>
         </div>
 
-        <div className="rounded-lg border border-blue-500/30 bg-blue-900/10 p-4">
-          <h4 className="mb-2 text-sm font-medium text-blue-300">
+        <div className="border-fm-divider-secondary bg-fm-surface-info-sec rounded-lg border p-4">
+          <h4 className="text-fm-info mb-2 text-sm font-medium">
             When to Use Each
           </h4>
           <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
             <div>
-              <h5 className="mb-1 text-xs font-medium text-blue-200">
+              <h5 className="text-fm-info mb-1 text-xs font-medium">
                 Uncontrolled
               </h5>
-              <ul className="space-y-1 text-xs text-blue-200/70">
+              <ul className="text-fm-info-sec space-y-1 text-xs">
                 <li>• Simple on/off toggles</li>
                 <li>• No external state dependency</li>
                 <li>• Form elements</li>
@@ -1067,10 +1089,10 @@ export const ControlledVsUncontrolled: Story = {
               </ul>
             </div>
             <div>
-              <h5 className="mb-1 text-xs font-medium text-blue-200">
+              <h5 className="text-fm-info mb-1 text-xs font-medium">
                 Controlled
               </h5>
-              <ul className="space-y-1 text-xs text-blue-200/70">
+              <ul className="text-fm-info-sec space-y-1 text-xs">
                 <li>• Complex state management</li>
                 <li>• Multiple dependent toggles</li>
                 <li>• Form validation</li>