aural-ui 3.0.6 → 4.0.1

package/dist/components/input/Input.stories.tsx

@@ -299,7 +299,7 @@ export const AtomicComponents: Story = {
 
           <Input.Wrapper>
             <Input.StartIcon>
-              <AlertIcon className="h-4 w-4 text-gray-400" />
+              <AlertIcon className="text-fm-secondary h-4 w-4" />
             </Input.StartIcon>
 
             <Input.Base
@@ -387,7 +387,7 @@ export const InteractiveExample: Story = {
           fullWidth
         />
 
-        <div className="text-sm text-gray-600">
+        <div className="text-fm-secondary text-sm">
           Email: {email || "(empty)"}
           <br />
           Password: {"*".repeat(password.length) || "(empty)"}

package/dist/components/input/index.tsx

@@ -313,6 +313,8 @@ const InputBase = forwardRef<
             {
               "pl-10": startIcon,
               "pr-10": endIcon,
+              "[&::placeholder]:[-webkit-text-fill-color:var(--color-fm-tertiary)]":
+                transparentOnAutofill,
             },
             className
           ),

package/dist/components/label/Label.stories.tsx

@@ -87,7 +87,7 @@ export const WithInput: Story = {
       <input
         id="example-input"
         type="text"
-        className="w-full rounded-md border border-gray-300 p-2"
+        className="border-fm-divider-secondary w-full rounded-md border p-2"
         placeholder="Enter text here"
         disabled={args.disabled}
         required={args.required}
@@ -109,7 +109,7 @@ export const LabelExamples: Story = {
         <input
           id="username"
           type="text"
-          className="w-full rounded-md border border-gray-300 p-2"
+          className="border-fm-divider-secondary w-full rounded-md border p-2"
           placeholder="Enter username"
         />
       </div>
@@ -121,7 +121,7 @@ export const LabelExamples: Story = {
         <input
           id="email"
           type="email"
-          className="w-full rounded-md border border-gray-300 p-2"
+          className="border-fm-divider-secondary w-full rounded-md border p-2"
           placeholder="Enter email"
           required
         />
@@ -134,7 +134,7 @@ export const LabelExamples: Story = {
         <input
           id="disabled-field"
           type="text"
-          className="w-full rounded-md border border-gray-200 bg-gray-100 p-2 text-gray-400"
+          className="border-fm-divider-secondary bg-fm-surface-secondary text-fm-tertiary w-full rounded-md border p-2"
           placeholder="Disabled"
           disabled
         />
@@ -146,7 +146,7 @@ export const LabelExamples: Story = {
 // Example showing form layout
 export const FormLayout: Story = {
   render: () => (
-    <div className="mx-auto max-w-md rounded-xl bg-white p-4 shadow-md">
+    <div className="bg-fm-surface-secondary mx-auto max-w-md rounded-xl p-4 shadow-md">
       <form className="space-y-4">
         <h2 className="mb-4 text-xl font-semibold">Contact Information</h2>
 
@@ -157,7 +157,7 @@ export const FormLayout: Story = {
           <input
             id="form-name"
             type="text"
-            className="w-full rounded-md border border-gray-300 p-2"
+            className="border-fm-divider-secondary w-full rounded-md border p-2"
             placeholder="John Doe"
             required
           />
@@ -170,7 +170,7 @@ export const FormLayout: Story = {
           <input
             id="form-email"
             type="email"
-            className="w-full rounded-md border border-gray-300 p-2"
+            className="border-fm-divider-secondary w-full rounded-md border p-2"
             placeholder="john@example.com"
             required
           />
@@ -181,7 +181,7 @@ export const FormLayout: Story = {
           <input
             id="form-phone"
             type="tel"
-            className="w-full rounded-md border border-gray-300 p-2"
+            className="border-fm-divider-secondary w-full rounded-md border p-2"
             placeholder="+1 (555) 123-4567"
           />
         </div>
@@ -190,14 +190,14 @@ export const FormLayout: Story = {
           <Label htmlFor="form-message">Message</Label>
           <textarea
             id="form-message"
-            className="h-32 w-full rounded-md border border-gray-300 p-2"
+            className="border-fm-divider-secondary h-32 w-full rounded-md border p-2"
             placeholder="Your message here..."
           />
         </div>
 
         <button
           type="submit"
-          className="rounded-md bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
+          className="bg-fm-surface-info text-fm-surface-primary rounded-md px-4 py-2 transition-colors hover:bg-blue-600"
         >
           Submit
         </button>

package/dist/components/list/List.stories.tsx

@@ -188,7 +188,7 @@ export const BasicList: Story = {
   },
   render: (args) => (
     <div className="mx-auto max-w-md p-8">
-      <h3 className="mb-4 text-lg font-medium text-white">Basic List</h3>
+      <h3 className="text-fm-primary mb-4 text-lg font-medium">Basic List</h3>
       <List {...args} className="backdrop-blur-none">
         <ListItem>
           <FileChartIcon />
@@ -223,7 +223,7 @@ export const BasicList: Story = {
 export const GroupedList: Story = {
   render: () => (
     <div className="mx-auto max-w-md p-8">
-      <h3 className="mb-4 text-lg font-medium text-white">
+      <h3 className="text-fm-primary mb-4 text-lg font-medium">
         Grouped List with Labels
       </h3>
       <List>
@@ -307,14 +307,14 @@ export const SelectionLists: 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">
           Selection Lists
         </h3>
 
         <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
           {/* Checkbox List */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/70">
+            <h4 className="text-fm-secondary text-sm font-medium">
               Multi-Select (Checkbox)
             </h4>
             <List size="default">
@@ -359,8 +359,8 @@ export const SelectionLists: Story = {
             </List>
 
             {checkedItems.length > 0 && (
-              <div className="rounded-lg border border-white/10 bg-white/5 p-3">
-                <p className="text-xs text-white/60">
+              <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-3">
+                <p className="text-fm-secondary text-xs">
                   Selected: {checkedItems.length} feature
                   {checkedItems.length !== 1 ? "s" : ""}
                 </p>
@@ -370,7 +370,7 @@ export const SelectionLists: Story = {
 
           {/* Radio List */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/70">
+            <h4 className="text-fm-secondary text-sm font-medium">
               Single Select (Radio)
             </h4>
             <List size="default">
@@ -395,8 +395,8 @@ export const SelectionLists: Story = {
               </ListRadioGroup>
             </List>
 
-            <div className="rounded-lg border border-white/10 bg-white/5 p-3">
-              <p className="text-xs text-white/60">
+            <div className="border-fm-divider-secondary bg-fm-surface-secondary rounded-lg border p-3">
+              <p className="text-fm-secondary text-xs">
                 Selected:{" "}
                 {radioValue === "option1"
                   ? "Light Theme"
@@ -426,14 +426,14 @@ export const SelectionLists: Story = {
 export const ListVariants: 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">
         List Variants
       </h3>
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
         {/* Default Variant */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Default</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">Default</h4>
           <List variant="default" size="default">
             <ListItem>
               <FileChartIcon />
@@ -452,7 +452,7 @@ export const ListVariants: Story = {
 
         {/* Elevated Variant */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Elevated</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">Elevated</h4>
           <List variant="elevated" size="default">
             <ListItem>
               <FeatureShineIcon />
@@ -471,7 +471,7 @@ export const ListVariants: Story = {
 
         {/* Flat Variant */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Flat</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">Flat</h4>
           <List variant="flat" size="default">
             <ListItem>
               <MaintenanceIcon />
@@ -504,12 +504,14 @@ export const ListVariants: Story = {
 export const ListSizes: Story = {
   render: () => (
     <div className="space-y-8 p-8">
-      <h3 className="text-center text-lg font-medium text-white">List Sizes</h3>
+      <h3 className="text-fm-primary text-center text-lg font-medium">
+        List Sizes
+      </h3>
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 xl:grid-cols-4">
         {/* Small */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Small</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">Small</h4>
           <List size="sm">
             <ListItem size="sm">
               <FileChartIcon />
@@ -524,7 +526,7 @@ export const ListSizes: Story = {
 
         {/* Default */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Default</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">Default</h4>
           <List size="default">
             <ListItem size="default">
               <MagicBookIcon />
@@ -539,7 +541,7 @@ export const ListSizes: Story = {
 
         {/* Large */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Large</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">Large</h4>
           <List size="lg">
             <ListItem size="lg">
               <BubbleSparkleIcon />
@@ -554,7 +556,7 @@ export const ListSizes: Story = {
 
         {/* Extra Large */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Extra Large</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">Extra Large</h4>
           <List size="xl">
             <ListItem size="lg">
               <MaintenanceIcon />
@@ -583,14 +585,14 @@ export const ListSizes: Story = {
 export const BorderVariants: 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">
         Border Variants
       </h3>
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-3 xl:grid-cols-5">
         {/* Default */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Default</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">Default</h4>
           <List borderVariant="default">
             <ListItem>
               <FileChartIcon />
@@ -605,7 +607,7 @@ export const BorderVariants: Story = {
 
         {/* Success */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Success</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">Success</h4>
           <List borderVariant="success">
             <ListItem>
               <BubbleCheckIcon />
@@ -620,7 +622,7 @@ export const BorderVariants: Story = {
 
         {/* Error */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Error</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">Error</h4>
           <List borderVariant="error">
             <ListItem>
               <TrashIcon />
@@ -635,7 +637,7 @@ export const BorderVariants: Story = {
 
         {/* Warning */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Warning</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">Warning</h4>
           <List borderVariant="warning">
             <ListItem>
               <LightBulbSimpleIcon />
@@ -650,7 +652,7 @@ export const BorderVariants: Story = {
 
         {/* Info */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Info</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">Info</h4>
           <List borderVariant="info">
             <ListItem>
               <FeatureShineIcon />
@@ -666,7 +668,9 @@ export const BorderVariants: Story = {
 
       {/* No Border */}
       <div className="mx-auto max-w-md">
-        <h4 className="mb-4 text-sm font-medium text-white/70">No Border</h4>
+        <h4 className="text-fm-secondary mb-4 text-sm font-medium">
+          No Border
+        </h4>
         <List showBorder={false}>
           <ListItem>
             <SearchIcon />
@@ -694,14 +698,16 @@ export const BorderVariants: Story = {
 export const CustomStyling: 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">
         Custom Styling
       </h3>
 
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
         {/* Custom Classes */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Custom Classes</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">
+            Custom Classes
+          </h4>
           <List
             className="border-purple-500/30 bg-purple-900/10"
             classes={{
@@ -740,19 +746,21 @@ export const CustomStyling: Story = {
 
         {/* Complex Layout */}
         <div className="space-y-4">
-          <h4 className="text-sm font-medium text-white/70">Complex Layout</h4>
+          <h4 className="text-fm-secondary text-sm font-medium">
+            Complex Layout
+          </h4>
           <List variant="elevated" size="lg">
             <ListLabel size="lg">Premium Features</ListLabel>
             <ListItem size="lg">
               <div className="flex items-center gap-3">
                 <div className="rounded-full bg-green-500/20 p-2">
-                  <TickIcon className="size-4 text-green-400" />
+                  <TickIcon className="text-fm-icon-positive size-4" />
                 </div>
                 <div className="flex-1">
-                  <div className="font-medium text-white">
+                  <div className="text-fm-primary font-medium">
                     Advanced Analytics
                   </div>
-                  <div className="text-xs text-white/60">
+                  <div className="text-fm-secondary text-xs">
                     Deep insights and reporting
                   </div>
                 </div>
@@ -762,11 +770,13 @@ export const CustomStyling: Story = {
             <ListItem size="lg">
               <div className="flex items-center gap-3">
                 <div className="rounded-full bg-blue-500/20 p-2">
-                  <FeatureShineIcon className="size-4 text-blue-400" />
+                  <FeatureShineIcon className="text-fm-icon-info size-4" />
                 </div>
                 <div className="flex-1">
-                  <div className="font-medium text-white">AI Assistant</div>
-                  <div className="text-xs text-white/60">
+                  <div className="text-fm-primary font-medium">
+                    AI Assistant
+                  </div>
+                  <div className="text-fm-secondary text-xs">
                     Intelligent automation
                   </div>
                 </div>
@@ -775,12 +785,12 @@ export const CustomStyling: Story = {
             </ListItem>
             <ListItem size="lg" disabled>
               <div className="flex items-center gap-3">
-                <div className="rounded-full bg-gray-500/20 p-2">
-                  <LightBulbSimpleIcon className="size-4 text-gray-400" />
+                <div className="bg-fm-surface-secondary rounded-full p-2">
+                  <LightBulbSimpleIcon className="text-fm-tertiary size-4" />
                 </div>
                 <div className="flex-1">
                   <div className="font-medium">Custom Workflows</div>
-                  <div className="text-xs text-white/40">Coming soon</div>
+                  <div className="text-fm-tertiary text-xs">Coming soon</div>
                 </div>
                 <Badge color="neutral">Soon</Badge>
               </div>
@@ -823,14 +833,16 @@ export const InteractiveShowcase: 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 Showcase
         </h3>
 
         <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
           {/* Navigation List */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/70">Navigation</h4>
+            <h4 className="text-fm-secondary text-sm font-medium">
+              Navigation
+            </h4>
             <List>
               <ListLabel>Main Menu</ListLabel>
               <ListItem
@@ -870,7 +882,7 @@ export const InteractiveShowcase: Story = {
 
           {/* Feature Selection */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/70">Features</h4>
+            <h4 className="text-fm-secondary text-sm font-medium">Features</h4>
             <List borderVariant="success">
               <ListLabel>Enable Features</ListLabel>
               <ListCheckboxItem
@@ -905,7 +917,7 @@ export const InteractiveShowcase: Story = {
 
           {/* Theme Selection */}
           <div className="space-y-4">
-            <h4 className="text-sm font-medium text-white/70">Theme</h4>
+            <h4 className="text-fm-secondary text-sm font-medium">Theme</h4>
             <List borderVariant="info">
               <ListLabel>Appearance</ListLabel>
               <ListRadioGroup value={theme}>
@@ -927,9 +939,11 @@ export const InteractiveShowcase: Story = {
         </div>
 
         {/* Status Display */}
-        <div className="mx-auto max-w-2xl rounded-lg border border-white/10 bg-white/5 p-4">
-          <h4 className="mb-3 text-sm font-medium text-white">Current State</h4>
-          <div className="grid grid-cols-1 gap-3 text-xs text-white/60 md:grid-cols-3">
+        <div className="border-fm-divider-secondary bg-fm-surface-secondary mx-auto max-w-2xl rounded-lg border p-4">
+          <h4 className="text-fm-primary mb-3 text-sm font-medium">
+            Current State
+          </h4>
+          <div className="text-fm-secondary grid grid-cols-1 gap-3 text-xs md:grid-cols-3">
             <div>
               <strong>Selected Page:</strong>{" "}
               {selectedItems.includes("item1")