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

package/src/modules/workflows/backend/events/[id]/page.tsx

@@ -98,9 +98,9 @@ export default function WorkflowEventDetailPage() {
     if (eventType.includes('STARTED')) return 'bg-blue-100 text-blue-800'
     if (eventType.includes('COMPLETED')) return 'bg-green-100 text-green-800'
     if (eventType.includes('FAILED') || eventType.includes('REJECTED')) return 'bg-red-100 text-red-800'
-    if (eventType.includes('CANCELLED')) return 'bg-muted text-foreground dark:bg-muted dark:text-foreground'
+    if (eventType.includes('CANCELLED')) return 'bg-muted text-foreground'
     if (eventType.includes('ENTERED') || eventType.includes('EXITED')) return 'bg-purple-100 text-purple-800'
-    return 'bg-muted text-foreground dark:bg-muted dark:text-foreground'
+    return 'bg-muted text-foreground'
   }
 
   const getStatusBadgeClass = (status: string) => {
@@ -112,9 +112,9 @@ export default function WorkflowEventDetailPage() {
       case 'FAILED':
         return 'bg-red-100 text-red-800'
       case 'CANCELLED':
-        return 'bg-muted text-foreground dark:bg-muted dark:text-foreground'
+        return 'bg-muted text-foreground'
       default:
-        return 'bg-muted text-foreground dark:bg-muted dark:text-foreground'
+        return 'bg-muted text-foreground'
     }
   }
 

package/src/modules/workflows/backend/instances/[id]/page.tsx

@@ -101,7 +101,7 @@ export default function WorkflowInstanceDetailPage({ params }: { params?: { id?:
       case 'FAILED':
         return 'bg-red-100 text-red-800'
       case 'CANCELLED':
-        return 'bg-muted text-foreground dark:bg-muted dark:text-foreground'
+        return 'bg-muted text-foreground'
       case 'COMPENSATING':
         return 'bg-orange-100 text-orange-800'
       case 'COMPENSATED':
@@ -121,7 +121,7 @@ export default function WorkflowInstanceDetailPage({ params }: { params?: { id?:
     } else if (eventType.includes('FAILED') || eventType.includes('REJECTED')) {
       return 'bg-red-100 text-red-800'
     } else if (eventType.includes('CANCELLED')) {
-      return 'bg-muted text-foreground dark:bg-muted dark:text-foreground'
+      return 'bg-muted text-foreground'
     } else if (eventType.includes('PAUSED')) {
       return 'bg-yellow-100 text-yellow-800'
     } else {

package/src/modules/workflows/backend/tasks/[id]/page.tsx

@@ -105,7 +105,7 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
     const required = task?.formSchema?.required?.includes(fieldName) || false
     const enumValues = fieldSchema.enum
 
-    const inputClasses = "w-full px-3 py-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+    const inputClasses = "w-full px-3 py-2 border border-border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
     const labelClasses = "block text-sm font-medium text-foreground mb-1"
 
     // Handle enum (select dropdown)
@@ -114,7 +114,7 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
         <div key={fieldName} className="space-y-2">
           <label htmlFor={fieldName} className={labelClasses}>
             {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>
@@ -145,7 +145,7 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
             <div key={fieldName} className="space-y-2">
               <label htmlFor={fieldName} className={labelClasses}>
                 {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>
@@ -166,7 +166,7 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
             <div key={fieldName} className="space-y-2">
               <label htmlFor={fieldName} className={labelClasses}>
                 {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>
@@ -187,7 +187,7 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
             <div key={fieldName} className="space-y-2">
               <label htmlFor={fieldName} className={labelClasses}>
                 {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>
@@ -207,7 +207,7 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
           <div key={fieldName} className="space-y-2">
             <label htmlFor={fieldName} className={labelClasses}>
               {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>
@@ -229,7 +229,7 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
           <div key={fieldName} className="space-y-2">
             <label htmlFor={fieldName} className={labelClasses}>
               {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>
@@ -255,11 +255,11 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
                 id={fieldName}
                 checked={!!formData[fieldName]}
                 onChange={(e) => handleFieldChange(fieldName, e.target.checked)}
-                className="w-4 h-4 text-primary border-border rounded focus:ring-primary"
+                className="w-4 h-4 text-primary border-border rounded focus-visible:ring-ring"
               />
               <label htmlFor={fieldName} className="text-sm font-medium text-foreground">
                 {fieldTitle}
-                {required && <span className="text-red-600 ml-1">*</span>}
+                {required && <span className="text-status-error-text ml-1">*</span>}
               </label>
             </div>
             {fieldDescription && (
@@ -273,7 +273,7 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
           <div key={fieldName} className="space-y-2">
             <label htmlFor={fieldName} className={labelClasses}>
               {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>
@@ -294,13 +294,13 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
   const getStatusBadgeClass = (status: UserTaskStatus) => {
     switch (status) {
       case 'PENDING':
-        return 'bg-yellow-100 text-yellow-800'
+        return 'bg-status-warning-bg text-status-warning-text'
       case 'IN_PROGRESS':
-        return 'bg-blue-100 text-blue-800 dark:text-blue-200'
+        return 'bg-status-info-bg text-status-info-text'
       case 'COMPLETED':
-        return 'bg-green-100 text-green-800'
+        return 'bg-status-success-bg text-status-success-text'
       case 'CANCELLED':
-        return 'bg-muted text-foreground dark:bg-muted dark:text-foreground'
+        return 'bg-muted text-foreground'
       default:
         return 'bg-muted text-muted-foreground'
     }
@@ -324,7 +324,7 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
       <Page>
         <PageBody>
           <div className="p-8 text-center">
-            <p className="text-red-600">{t('workflows.tasks.detail.notFound')}</p>
+            <p className="text-status-error-text">{t('workflows.tasks.detail.notFound')}</p>
             <Button onClick={() => router.push('/backend/tasks')} className="mt-4">
               {t('workflows.tasks.detail.backToList')}
             </Button>
@@ -389,8 +389,8 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
           <div className="space-y-3">
 
             {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">
+              <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>
@@ -410,7 +410,7 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
               {task.dueDate && (
                 <div>
                   <span className="text-muted-foreground">{t('workflows.tasks.fields.dueDate')}:</span>
-                  <span className={`ml-2 ${isOverdue ? 'text-red-600 font-medium' : 'text-foreground'}`}>
+                  <span className={`ml-2 ${isOverdue ? 'text-status-error-text font-medium' : 'text-foreground'}`}>
                     {new Date(task.dueDate).toLocaleString()}
                   </span>
                 </div>
@@ -440,8 +440,8 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
           </div>
 
           {!isCompletable && (
-            <div className="bg-blue-50 dark:bg-blue-950/50 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
-              <p className="text-sm text-blue-800 dark:text-blue-200">
+            <div className="bg-status-info-bg border border-status-info-border rounded-lg p-4">
+              <p className="text-sm text-status-info-text">
                 {t('workflows.tasks.detail.cannotComplete')}
               </p>
             </div>
@@ -463,8 +463,8 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
                 )}
 
                 {!task.formSchema?.properties && (
-                  <div className="bg-blue-50 dark:bg-blue-950/50 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
-                    <p className="text-sm text-blue-800 dark:text-blue-200">
+                  <div className="bg-status-info-bg border border-status-info-border rounded-lg p-4">
+                    <p className="text-sm text-status-info-text">
                       {t('workflows.tasks.detail.noFormSchema')}
                     </p>
                   </div>
@@ -482,7 +482,7 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
                     value={comments}
                     onChange={(e) => setComments(e.target.value)}
                     rows={3}
-                    className="w-full px-3 py-2 border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-primary"
+                    className="w-full px-3 py-2 border border-border rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                     placeholder={t('workflows.tasks.detail.commentsPlaceholder')}
                   />
                 </div>

package/src/modules/workflows/components/DefinitionTriggersEditor.tsx

@@ -435,7 +435,7 @@ export function DefinitionTriggersEditor({
                   <select
                     value={fc.operator}
                     onChange={(e: React.ChangeEvent<HTMLSelectElement>) => updateFilterCondition(index, 'operator', e.target.value)}
-                    className="h-10 w-full sm:w-[140px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                    className="h-10 w-full sm:w-[140px] rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                   >
                     {FILTER_OPERATORS.map(op => (
                       <option key={op.value} value={op.value}>

package/src/modules/workflows/components/EdgeEditDialog.tsx

@@ -487,7 +487,7 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                               type="text"
                               value={condition.ruleId}
                               onChange={(e) => updatePreCondition(index, 'ruleId', e.target.value)}
-                              className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                              className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                             />
                           </div>
 
@@ -497,7 +497,7 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                                 type="checkbox"
                                 checked={condition.required}
                                 onChange={(e) => updatePreCondition(index, 'required', e.target.checked)}
-                                className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                                className="rounded border-gray-300 text-blue-600 focus-visible:ring-ring"
                               />
                               {t('workflows.edgeEditor.requiredCheckbox')}
                             </label>
@@ -639,7 +639,7 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                               type="text"
                               value={condition.ruleId}
                               onChange={(e) => updatePostCondition(index, 'ruleId', e.target.value)}
-                              className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                              className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                             />
                           </div>
 
@@ -649,7 +649,7 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                                 type="checkbox"
                                 checked={condition.required}
                                 onChange={(e) => updatePostCondition(index, 'required', e.target.checked)}
-                                className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                                className="rounded border-gray-300 text-blue-600 focus-visible:ring-ring"
                               />
                               {t('workflows.edgeEditor.requiredPostCheckbox')}
                             </label>
@@ -776,7 +776,7 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                               type="text"
                               value={activity.activityId}
                               onChange={(e) => updateActivity(index, 'activityId', e.target.value)}
-                              className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                              className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                               placeholder={t('workflows.edgeEditor.activityIdPlaceholder')}
                             />
                           </div>
@@ -788,7 +788,7 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                               type="text"
                               value={activity.activityName || ''}
                               onChange={(e) => updateActivity(index, 'activityName', e.target.value)}
-                              className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                              className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                               placeholder={t('workflows.edgeEditor.activityNamePlaceholder')}
                             />
                           </div>
@@ -799,7 +799,7 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                             <select
                               value={activity.activityType}
                               onChange={(e) => updateActivity(index, 'activityType', e.target.value)}
-                              className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                              className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                             >
                               <option value="SEND_EMAIL">{t('workflows.activities.types.SEND_EMAIL')}</option>
                               <option value="CALL_API">{t('workflows.activities.types.CALL_API')}</option>
@@ -818,7 +818,7 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                               type="text"
                               value={activity.timeout || ''}
                               onChange={(e) => updateActivity(index, 'timeout', e.target.value)}
-                              className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                              className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                               placeholder={t('workflows.edgeEditor.timeoutPlaceholder')}
                             />
                             <p className="text-xs text-gray-500 mt-0.5">{t('workflows.edgeEditor.timeoutHint')}</p>
@@ -834,7 +834,7 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                                   type="number"
                                   value={activity.retryPolicy?.maxAttempts || ''}
                                   onChange={(e) => updateActivityRetryPolicy(index, 'maxAttempts', parseInt(e.target.value) || 0)}
-                                  className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                                  className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                                   placeholder="3"
                                   min="1"
                                   max="10"
@@ -846,7 +846,7 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                                   type="number"
                                   value={activity.retryPolicy?.initialIntervalMs || ''}
                                   onChange={(e) => updateActivityRetryPolicy(index, 'initialIntervalMs', parseInt(e.target.value) || 0)}
-                                  className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                                  className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                                   placeholder="1000"
                                   min="0"
                                 />
@@ -858,7 +858,7 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                                   step="0.1"
                                   value={activity.retryPolicy?.backoffCoefficient || ''}
                                   onChange={(e) => updateActivityRetryPolicy(index, 'backoffCoefficient', parseFloat(e.target.value) || 1)}
-                                  className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                                  className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                                   placeholder="2"
                                   min="1"
                                   max="10"
@@ -870,7 +870,7 @@ export function EdgeEditDialog({ edge, isOpen, onClose, onSave, onDelete }: Edge
                                   type="number"
                                   value={activity.retryPolicy?.maxIntervalMs || ''}
                                   onChange={(e) => updateActivityRetryPolicy(index, 'maxIntervalMs', parseInt(e.target.value) || 0)}
-                                  className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                                  className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                                   placeholder="10000"
                                   min="0"
                                 />

package/src/modules/workflows/components/NodeEditDialog.tsx

@@ -512,7 +512,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                   value={stepName}
                   onChange={(e) => setStepName(e.target.value)}
                   placeholder={t('workflows.form.placeholders.stepName')}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
                   autoFocus
                 />
                 <p className="text-xs text-gray-500 mt-1">
@@ -530,7 +530,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                   onChange={(e) => setDescription(e.target.value)}
                   placeholder={t('workflows.form.placeholders.description')}
                   rows={3}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
                 />
                 <p className="text-xs text-gray-500 mt-1">
                   {t('workflows.form.descriptions.description')}
@@ -547,7 +547,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                   value={timeout}
                   onChange={(e) => setTimeout(e.target.value)}
                   placeholder={t('workflows.form.placeholders.timeout')}
-                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
                 />
                 <p className="text-xs text-gray-500 mt-1">
                   {t('workflows.form.descriptions.timeout')}
@@ -572,7 +572,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                       value={assignedTo}
                       onChange={(e) => setAssignedTo(e.target.value)}
                       placeholder={t('workflows.form.placeholders.userId')}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
                     />
                     <p className="text-xs text-gray-500 mt-1">
                       {t('workflows.form.descriptions.assignedTo')}
@@ -588,7 +588,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                       value={assignedToRoles}
                       onChange={(e) => setAssignedToRoles(e.target.value)}
                       placeholder={t('workflows.form.placeholders.roles')}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
                     />
                     <p className="text-xs text-gray-500 mt-1">
                       {t('workflows.form.descriptions.assignedToRoles')}
@@ -604,7 +604,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                       value={formKey}
                       onChange={(e) => setFormKey(e.target.value)}
                       placeholder={t('workflows.form.placeholders.formKey')}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
                     />
                     <p className="text-xs text-gray-500 mt-1">
                       {t('workflows.form.descriptions.formKey')}
@@ -690,7 +690,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                     type="text"
                                     value={field.name}
                                     onChange={(e) => updateFormField(index, 'name', e.target.value)}
-                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                                     placeholder={t('workflows.form.placeholders.fieldName')}
                                   />
                                   <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.fieldName')}</p>
@@ -703,7 +703,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                     type="text"
                                     value={field.label}
                                     onChange={(e) => updateFormField(index, 'label', e.target.value)}
-                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                                     placeholder={t('workflows.form.placeholders.fieldLabel')}
                                   />
                                   <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.fieldLabel')}</p>
@@ -715,7 +715,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                   <select
                                     value={field.type}
                                     onChange={(e) => updateFormField(index, 'type', e.target.value)}
-                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                                   >
                                     <option value="text">{t('workflows.form.fieldTypes.text')}</option>
                                     <option value="number">{t('workflows.form.fieldTypes.number')}</option>
@@ -739,7 +739,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                     type="text"
                                     value={field.placeholder || ''}
                                     onChange={(e) => updateFormField(index, 'placeholder', e.target.value)}
-                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                                     placeholder={t('workflows.form.placeholders.placeholder')}
                                   />
                                 </div>
@@ -751,7 +751,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                     type="text"
                                     value={field.defaultValue || ''}
                                     onChange={(e) => updateFormField(index, 'defaultValue', e.target.value)}
-                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                                     placeholder={t('workflows.form.placeholders.defaultValue')}
                                   />
                                 </div>
@@ -764,7 +764,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                       type="text"
                                       value={field.options?.join(', ') || ''}
                                       onChange={(e) => updateFormField(index, 'options', e.target.value.split(',').map(o => o.trim()).filter(Boolean))}
-                                      className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
+                                      className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring"
                                       placeholder={t('workflows.form.placeholders.options')}
                                     />
                                     <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.options')}</p>
@@ -778,7 +778,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                       type="checkbox"
                                       checked={field.required}
                                       onChange={(e) => updateFormField(index, 'required', e.target.checked)}
-                                      className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                                      className="rounded border-gray-300 text-blue-600 focus-visible:ring-ring"
                                     />
                                     {t('workflows.form.requiredField')}
                                   </label>
@@ -904,7 +904,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                       updated[index].activityId = e.target.value
                                       setStepActivities(updated)
                                     }}
-                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500"
+                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring"
                                     placeholder={t('workflows.form.placeholders.activityId')}
                                   />
                                 </div>
@@ -922,7 +922,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                       updated[index].activityName = e.target.value
                                       setStepActivities(updated)
                                     }}
-                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500"
+                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring"
                                     placeholder={t('workflows.form.placeholders.activityName')}
                                   />
                                 </div>
@@ -939,7 +939,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                       updated[index].activityType = e.target.value
                                       setStepActivities(updated)
                                     }}
-                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500"
+                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring"
                                   >
                                     <option value="SEND_EMAIL">{t('workflows.activities.types.SEND_EMAIL')}</option>
                                     <option value="CALL_API">{t('workflows.activities.types.CALL_API')}</option>
@@ -963,7 +963,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                       updated[index].timeoutMs = e.target.value ? parseInt(e.target.value) : undefined
                                       setStepActivities(updated)
                                     }}
-                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus:ring-1 focus:ring-blue-500"
+                                    className="w-full px-2 py-1.5 border border-gray-300 rounded text-xs focus-visible:ring-1 focus-visible:ring-ring"
                                     placeholder={t('workflows.form.placeholders.timeoutMs')}
                                   />
                                   <p className="text-xs text-gray-500 mt-1">{t('workflows.form.descriptions.timeoutMs')}</p>
@@ -1048,7 +1048,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                         updated[index].async = e.target.checked
                                         setStepActivities(updated)
                                       }}
-                                      className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
+                                      className="w-4 h-4 text-blue-600 border-gray-300 rounded focus-visible:ring-ring"
                                     />
                                     <span className="text-xs text-gray-700">{t('workflows.form.executeAsync')}</span>
                                   </label>
@@ -1118,7 +1118,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                         value={subWorkflowId}
                         onChange={(e) => setSubWorkflowId(e.target.value)}
                         placeholder={t('workflows.form.placeholders.subWorkflowId')}
-                        className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                        className="flex-1 px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
                         readOnly
                       />
                       <Button
@@ -1143,7 +1143,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                       value={subWorkflowVersion}
                       onChange={(e) => setSubWorkflowVersion(e.target.value)}
                       placeholder={t('workflows.form.placeholders.version')}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
                     />
                     <p className="text-xs text-gray-500 mt-1">
                       {t('workflows.form.descriptions.subWorkflowVersion')}
@@ -1189,7 +1189,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                   setInputMappings(newMappings)
                                 }}
                                 placeholder={t('workflows.form.placeholders.childKey')}
-                                className="w-full px-2 py-1.5 border border-gray-300 rounded text-sm focus:ring-2 focus:ring-blue-500"
+                                className="w-full px-2 py-1.5 border border-gray-300 rounded text-sm focus-visible:ring-2 focus-visible:ring-ring"
                               />
                               <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.childKey')}</p>
                             </div>
@@ -1204,7 +1204,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                   setInputMappings(newMappings)
                                 }}
                                 placeholder={t('workflows.form.placeholders.parentPath')}
-                                className="w-full px-2 py-1.5 border border-gray-300 rounded text-sm focus:ring-2 focus:ring-blue-500"
+                                className="w-full px-2 py-1.5 border border-gray-300 rounded text-sm focus-visible:ring-2 focus-visible:ring-ring"
                               />
                               <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.parentPath')}</p>
                             </div>
@@ -1264,7 +1264,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                   setOutputMappings(newMappings)
                                 }}
                                 placeholder={t('workflows.form.placeholders.parentKey')}
-                                className="w-full px-2 py-1.5 border border-gray-300 rounded text-sm focus:ring-2 focus:ring-blue-500"
+                                className="w-full px-2 py-1.5 border border-gray-300 rounded text-sm focus-visible:ring-2 focus-visible:ring-ring"
                               />
                               <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.parentKey')}</p>
                             </div>
@@ -1279,7 +1279,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                                   setOutputMappings(newMappings)
                                 }}
                                 placeholder={t('workflows.form.placeholders.childPath')}
-                                className="w-full px-2 py-1.5 border border-gray-300 rounded text-sm focus:ring-2 focus:ring-blue-500"
+                                className="w-full px-2 py-1.5 border border-gray-300 rounded text-sm focus-visible:ring-2 focus-visible:ring-ring"
                               />
                               <p className="text-xs text-gray-500 mt-0.5">{t('workflows.form.descriptions.childPath')}</p>
                             </div>
@@ -1320,7 +1320,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                       value={signalName}
                       onChange={(e) => setSignalName(e.target.value)}
                       placeholder={t('workflows.form.placeholders.signalName')}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
                     />
                     <p className="text-xs text-gray-500 mt-1">
                       {t('workflows.form.descriptions.signalName')}
@@ -1336,7 +1336,7 @@ export function NodeEditDialog({ node, isOpen, onClose, onSave, onDelete }: Node
                       value={signalTimeout}
                       onChange={(e) => setSignalTimeout(e.target.value)}
                       placeholder={t('workflows.form.placeholders.signalTimeout')}
-                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                      className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring"
                     />
                     <p className="text-xs text-gray-500 mt-1">
                       {t('workflows.form.descriptions.signalTimeout')}

package/src/modules/workflows/components/fields/FormFieldArrayEditor.tsx

@@ -307,7 +307,7 @@ export function FormFieldArrayEditor({
                           id={`${id}-${index}-required`}
                           checked={field.required}
                           onChange={(e) => updateFormField(index, 'required', e.target.checked)}
-                          className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                          className="h-4 w-4 rounded border-gray-300 text-blue-600 focus-visible:ring-ring"
                           disabled={disabled}
                         />
                         <Label htmlFor={`${id}-${index}-required`} className="text-xs font-medium cursor-pointer">

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

@@ -72,7 +72,7 @@ export function MobileDefinitionDetail({
                   <Icon className="h-4 w-4 shrink-0 text-muted-foreground" />
                   <div className="min-w-0 flex-1">
                     <div className="truncate text-sm font-medium">{step.stepName || step.stepId}</div>
-                    <div className="text-[10px] uppercase text-muted-foreground">
+                    <div className="text-overline uppercase text-muted-foreground">
                       {step.stepType || step.type || 'unknown'}
                     </div>
                   </div>
@@ -126,7 +126,7 @@ export function MobileDefinitionDetail({
                     <ArrowRight className="h-3 w-3 shrink-0 text-muted-foreground" />
                     <span className="truncate font-mono text-xs">{transition.toStepId}</span>
                   </div>
-                  <div className="text-[10px] text-muted-foreground">
+                  <div className="text-overline text-muted-foreground">
                     {transition.trigger || 'auto'}
                   </div>
                 </div>