@open-mercato/core 0.5.1-develop.2860.07af3a6a9d → 0.5.1-develop.2874.77704bccbd

package/src/modules/workflows/components/mobile/MobileInstanceOverview.tsx

@@ -98,7 +98,7 @@ export function MobileInstanceOverview({
             <dt className="text-xs font-medium text-muted-foreground">{t('workflows.instances.fields.workflowId')}</dt>
             <dd className="text-right">
               <div className="text-sm font-mono">{instance.workflowId}</div>
-              <div className="text-[10px] text-muted-foreground">v{instance.version}</div>
+              <div className="text-overline text-muted-foreground">v{instance.version}</div>
             </dd>
           </div>
           <div className="flex items-start justify-between">
@@ -176,20 +176,20 @@ export function MobileInstanceOverview({
           <div className="space-y-2">
             {timelineEvents.map((event, idx) => (
               <div key={event.id} className="flex items-start gap-2 rounded-lg border bg-muted p-2.5">
-                <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border bg-background text-[10px] font-medium">
+                <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full border bg-background text-overline font-medium">
                   {idx + 1}
                 </div>
                 <div className="min-w-0 flex-1">
                   <div className="flex flex-wrap items-center gap-1.5">
-                    <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${getEventTypeBadgeClass(event.eventType)}`}>
+                    <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-overline font-medium ${getEventTypeBadgeClass(event.eventType)}`}>
                       {t(`workflows.events.types.${event.eventType}`) || event.eventType}
                     </span>
-                    <span className="text-[10px] text-muted-foreground">
+                    <span className="text-overline text-muted-foreground">
                       {new Date(event.occurredAt).toLocaleTimeString()}
                     </span>
                   </div>
                   {event.eventData?.toStepId && (
-                    <p className="mt-0.5 text-[10px] text-muted-foreground">
+                    <p className="mt-0.5 text-overline text-muted-foreground">
                       {event.eventData.fromStepId ? `${event.eventData.fromStepId} -> ` : '-> '}
                       {event.eventData.toStepId}
                     </p>
@@ -214,11 +214,11 @@ export function MobileInstanceOverview({
                   <div className="flex items-start justify-between gap-2">
                     <div className="min-w-0 flex-1">
                       <div className="flex flex-wrap items-center gap-1.5">
-                        <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium ${getEventTypeBadgeClass(event.eventType)}`}>
+                        <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-overline font-medium ${getEventTypeBadgeClass(event.eventType)}`}>
                           {t(`workflows.events.types.${event.eventType}`) || event.eventType}
                         </span>
                       </div>
-                      <div className="mt-1 text-[10px] text-muted-foreground">
+                      <div className="mt-1 text-overline text-muted-foreground">
                         {new Date(event.occurredAt).toLocaleString()}
                       </div>
                     </div>

package/src/modules/workflows/components/mobile/MobileTaskForm.tsx

@@ -60,7 +60,7 @@ export function MobileTaskForm({
         <div key={fieldName} className="space-y-2">
           <Label htmlFor={fieldName}>
             {fieldTitle}
-            {required && <span className="text-red-600 ml-1">*</span>}
+            {required && <span className="text-status-error-text ml-1">*</span>}
           </Label>
           {fieldDescription && <p className="text-xs text-muted-foreground">{fieldDescription}</p>}
           <select
@@ -68,7 +68,7 @@ export function MobileTaskForm({
             value={fieldValue(fieldName)}
             onChange={(e) => onFieldChange(fieldName, e.target.value)}
             required={required}
-            className="w-full h-11 px-3 py-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary text-base"
+            className="w-full h-11 px-3 py-2 border border-border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring text-base"
           >
             <option value="">{t('workflows.tasks.detail.form.selectOption')}</option>
             {enumValues.map((value: string) => (
@@ -86,7 +86,7 @@ export function MobileTaskForm({
             <div key={fieldName} className="space-y-2">
               <Label htmlFor={fieldName}>
                 {fieldTitle}
-                {required && <span className="text-red-600 ml-1">*</span>}
+                {required && <span className="text-status-error-text ml-1">*</span>}
               </Label>
               {fieldDescription && <p className="text-xs text-muted-foreground">{fieldDescription}</p>}
               <Textarea
@@ -104,7 +104,7 @@ export function MobileTaskForm({
           <div key={fieldName} className="space-y-2">
             <Label htmlFor={fieldName}>
               {fieldTitle}
-              {required && <span className="text-red-600 ml-1">*</span>}
+              {required && <span className="text-status-error-text ml-1">*</span>}
             </Label>
             {fieldDescription && <p className="text-xs text-muted-foreground">{fieldDescription}</p>}
             <Input
@@ -124,7 +124,7 @@ export function MobileTaskForm({
           <div key={fieldName} className="space-y-2">
             <Label htmlFor={fieldName}>
               {fieldTitle}
-              {required && <span className="text-red-600 ml-1">*</span>}
+              {required && <span className="text-status-error-text ml-1">*</span>}
             </Label>
             {fieldDescription && <p className="text-xs text-muted-foreground">{fieldDescription}</p>}
             <Input
@@ -150,7 +150,7 @@ export function MobileTaskForm({
               />
               <Label htmlFor={fieldName} className="font-medium">
                 {fieldTitle}
-                {required && <span className="text-red-600 ml-1">*</span>}
+                {required && <span className="text-status-error-text ml-1">*</span>}
               </Label>
             </div>
             {fieldDescription && <p className="text-xs text-muted-foreground">{fieldDescription}</p>}
@@ -162,7 +162,7 @@ export function MobileTaskForm({
           <div key={fieldName} className="space-y-2">
             <Label htmlFor={fieldName}>
               {fieldTitle}
-              {required && <span className="text-red-600 ml-1">*</span>}
+              {required && <span className="text-status-error-text ml-1">*</span>}
             </Label>
             {fieldDescription && <p className="text-xs text-muted-foreground">{fieldDescription}</p>}
             <Input
@@ -192,8 +192,8 @@ export function MobileTaskForm({
       )}
 
       {isOverdue && (
-        <div className="bg-red-50 dark:bg-red-950/50 border border-red-200 dark:border-red-800 rounded-lg p-3">
-          <p className="text-sm text-red-800 dark:text-red-200 font-medium">{t('workflows.tasks.detail.overdueWarning')}</p>
+        <div className="bg-status-error-bg border border-status-error-border rounded-lg p-3">
+          <p className="text-sm text-status-error-text font-medium">{t('workflows.tasks.detail.overdueWarning')}</p>
         </div>
       )}
 
@@ -207,7 +207,7 @@ export function MobileTaskForm({
           {task.dueDate && (
             <div className="flex justify-between">
               <span className="text-muted-foreground">{t('workflows.tasks.fields.dueDate')}:</span>
-              <span className={`text-right text-xs ${isOverdue ? 'text-red-600 font-medium' : ''}`}>
+              <span className={`text-right text-xs ${isOverdue ? 'text-status-error-text font-medium' : ''}`}>
                 {new Date(task.dueDate).toLocaleString()}
               </span>
             </div>
@@ -231,8 +231,8 @@ export function MobileTaskForm({
       </div>
 
       {!isCompletable && (
-        <div className="bg-blue-50 dark:bg-blue-950/50 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
-          <p className="text-sm text-blue-800 dark:text-blue-200">{t('workflows.tasks.detail.cannotComplete')}</p>
+        <div className="bg-status-info-bg border border-status-info-border rounded-lg p-3">
+          <p className="text-sm text-status-info-text">{t('workflows.tasks.detail.cannotComplete')}</p>
         </div>
       )}
 
@@ -251,8 +251,8 @@ export function MobileTaskForm({
           )}
 
           {!task.formSchema?.properties && (
-            <div className="bg-blue-50 dark:bg-blue-950/50 border border-blue-200 dark:border-blue-800 rounded-lg p-3">
-              <p className="text-sm text-blue-800 dark:text-blue-200">{t('workflows.tasks.detail.noFormSchema')}</p>
+            <div className="bg-status-info-bg border border-status-info-border rounded-lg p-3">
+              <p className="text-sm text-status-info-text">{t('workflows.tasks.detail.noFormSchema')}</p>
             </div>
           )}
 

package/src/modules/workflows/components/mobile/MobileVisualEditor.tsx

@@ -119,7 +119,7 @@ export function MobileVisualEditor({
               <button
                 key={nodeType}
                 onClick={() => onAddNode(nodeType)}
-                className="flex shrink-0 items-center gap-1 rounded-md border bg-background px-2 py-1.5 text-xs hover:bg-muted active:bg-muted/80"
+                className="flex shrink-0 items-center gap-1 rounded-md border bg-background px-2 py-1.5 text-xs hover:bg-muted active:bg-muted/50"
               >
                 <Icon className="h-3.5 w-3.5" />
                 <span>{NODE_TYPE_LABELS[nodeType].title}</span>

package/src/modules/workflows/components/mobile/MobileWorkflowTimeline.tsx

@@ -18,39 +18,39 @@ interface MobileWorkflowTimelineProps {
 
 const STATUS_CONFIG = {
   completed: {
-    borderColor: 'border-l-emerald-500',
-    bgColor: 'bg-emerald-50 dark:bg-emerald-950/30',
+    borderColor: 'border-l-status-success-border',
+    bgColor: 'bg-status-success-bg',
     icon: CheckCircle2,
-    iconColor: 'text-emerald-600',
-    dotColor: 'bg-emerald-500',
+    iconColor: 'text-status-success-icon',
+    dotColor: 'bg-status-success-icon',
   },
   active: {
-    borderColor: 'border-l-blue-500',
-    bgColor: 'bg-blue-50 dark:bg-blue-950/30',
+    borderColor: 'border-l-status-info-border',
+    bgColor: 'bg-status-info-bg',
     icon: Loader2,
-    iconColor: 'text-blue-600',
-    dotColor: 'bg-blue-500',
+    iconColor: 'text-status-info-icon',
+    dotColor: 'bg-status-info-icon',
   },
   pending: {
-    borderColor: 'border-l-gray-300 dark:border-l-gray-600',
-    bgColor: 'bg-gray-50 dark:bg-gray-900/30',
+    borderColor: 'border-l-status-neutral-border',
+    bgColor: 'bg-status-neutral-bg',
     icon: Circle,
-    iconColor: 'text-gray-400',
-    dotColor: 'bg-gray-300 dark:bg-gray-600',
+    iconColor: 'text-status-neutral-icon',
+    dotColor: 'bg-status-neutral-icon',
   },
   failed: {
-    borderColor: 'border-l-red-500',
-    bgColor: 'bg-red-50 dark:bg-red-950/30',
+    borderColor: 'border-l-status-error-border',
+    bgColor: 'bg-status-error-bg',
     icon: AlertCircle,
-    iconColor: 'text-red-600',
-    dotColor: 'bg-red-500',
+    iconColor: 'text-status-error-icon',
+    dotColor: 'bg-status-error-icon',
   },
   skipped: {
-    borderColor: 'border-l-yellow-400',
-    bgColor: 'bg-yellow-50 dark:bg-yellow-950/30',
+    borderColor: 'border-l-status-warning-border',
+    bgColor: 'bg-status-warning-bg',
     icon: Circle,
-    iconColor: 'text-yellow-500',
-    dotColor: 'bg-yellow-400',
+    iconColor: 'text-status-warning-icon',
+    dotColor: 'bg-status-warning-icon',
   },
 } as const
 
@@ -77,7 +77,7 @@ export function MobileWorkflowTimeline({ steps }: MobileWorkflowTimelineProps) {
           <div key={step.id} className="relative flex gap-3">
             <div className="flex flex-col items-center">
               <div className={`h-3 w-3 shrink-0 rounded-full ${config.dotColor} mt-3 ring-2 ring-background`} />
-              {!isLast && <div className="w-0.5 flex-1 bg-gray-200 dark:bg-gray-700" />}
+              {!isLast && <div className="w-0.5 flex-1 bg-border" />}
             </div>
 
             <div className={`mb-2 flex-1 rounded-lg border-l-4 ${config.borderColor} ${config.bgColor} p-3`}>
@@ -88,11 +88,11 @@ export function MobileWorkflowTimeline({ steps }: MobileWorkflowTimelineProps) {
                     <span className="truncate text-sm font-medium text-foreground">{step.label}</span>
                   </div>
                   <div className="mt-1 flex flex-wrap items-center gap-2">
-                    <span className="inline-flex items-center rounded bg-background/60 px-1.5 py-0.5 text-[10px] font-medium uppercase text-muted-foreground">
+                    <span className="inline-flex items-center rounded bg-background/80 px-1.5 py-0.5 text-overline font-medium uppercase text-muted-foreground">
                       {step.type}
                     </span>
                     {step.duration && (
-                      <span className="text-[10px] text-muted-foreground">{step.duration}</span>
+                      <span className="text-overline text-muted-foreground">{step.duration}</span>
                     )}
                   </div>
                 </div>

package/src/modules/workflows/frontend/checkout-demo/page.tsx

@@ -712,7 +712,7 @@ export default function CheckoutDemoPage() {
     const fieldDescription = fieldSchema.description
     const enumValues = fieldSchema.enum
 
-    const inputClasses = "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500 text-sm"
+    const inputClasses = "w-full px-3 py-2 border border-gray-300 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring text-sm"
     const labelClasses = "block text-sm font-medium text-gray-700 mb-1"
 
     // Handle enum (select dropdown)
@@ -862,7 +862,7 @@ export default function CheckoutDemoPage() {
                 id={fieldName}
                 checked={!!formData[fieldName]}
                 onChange={(e) => handleFieldChange(fieldName, e.target.checked)}
-                className="w-4 h-4 text-yellow-600 border-gray-300 rounded focus:ring-yellow-500"
+                className="w-4 h-4 text-yellow-600 border-gray-300 rounded focus-visible:ring-ring"
               />
               <label htmlFor={fieldName} className="text-sm font-medium text-gray-700">
                 {fieldTitle}
@@ -941,7 +941,7 @@ export default function CheckoutDemoPage() {
                         id="customer-select"
                         value={selectedCustomerId}
                         onChange={(e) => setSelectedCustomerId(e.target.value)}
-                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring text-sm"
                       >
                         <option value="">{t('workflows.checkoutDemo.customer.selectPlaceholder', '-- Select a customer --')}</option>
                         {customers.map((customer: any) => (
@@ -958,7 +958,7 @@ export default function CheckoutDemoPage() {
                           id="currency-select"
                           value={selectedCurrency}
                           onChange={(e) => setSelectedCurrency(e.target.value)}
-                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring text-sm"
                         >
                           <option value="USD">USD - US Dollar</option>
                           <option value="EUR">EUR - Euro</option>
@@ -999,7 +999,7 @@ export default function CheckoutDemoPage() {
                             e.target.value = '' // Reset selection
                           }
                         }}
-                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring text-sm"
                         value=""
                       >
                         <option value="">{t('workflows.checkoutDemo.product.selectPlaceholder', '-- Select a product to add --')}</option>
@@ -1688,7 +1688,7 @@ export default function CheckoutDemoPage() {
                           <div className="mt-3">
                             <a
                               href={`/backend/tasks/${task.id}`}
-                              className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500"
+                              className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-white bg-yellow-600 hover:bg-yellow-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring"
                             >
                               {t('workflows.checkoutDemo.progress.completeTask', 'Complete Task →')}
                             </a>