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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/core",
-  "version": "0.5.1-develop.2860.07af3a6a9d",
+  "version": "0.5.1-develop.2874.77704bccbd",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -237,10 +237,10 @@
     "ts-pattern": "^5.0.0"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2860.07af3a6a9d"
+    "@open-mercato/shared": "0.5.1-develop.2874.77704bccbd"
   },
   "devDependencies": {
-    "@open-mercato/shared": "0.5.1-develop.2860.07af3a6a9d",
+    "@open-mercato/shared": "0.5.1-develop.2874.77704bccbd",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/modules/api_docs/frontend/docs/api/Explorer.tsx

@@ -445,7 +445,7 @@ export default function ApiDocsExplorer(props: ApiDocsExplorerProps) {
                   <div key={category.tag} className="space-y-2">
                     <button
                       type="button"
-                      className="flex w-full items-center justify-between rounded-md bg-muted px-3 py-2 text-left font-medium text-foreground hover:bg-muted/80"
+                      className="flex w-full items-center justify-between rounded-md bg-muted px-3 py-2 text-left font-medium text-foreground hover:bg-muted/50"
                       onClick={() =>
                         setExpanded((prev) => ({
                           ...prev,
@@ -470,7 +470,7 @@ export default function ApiDocsExplorer(props: ApiDocsExplorerProps) {
                               onClick={() => handleSelectOperation(operation.id)}
                             >
                               <span
-                                className={`inline-flex min-w-[3rem] justify-center rounded border px-2 py-0.5 text-[11px] font-semibold uppercase ${
+                                className={`inline-flex min-w-[3rem] justify-center rounded border px-2 py-0.5 text-overline font-semibold uppercase ${
                                   METHOD_STYLES[operation.method] ?? 'border border-border bg-muted text-foreground'
                                 }`}
                               >
@@ -508,7 +508,7 @@ export default function ApiDocsExplorer(props: ApiDocsExplorerProps) {
                     value={searchTerm}
                     onChange={(event) => setSearchTerm(event.target.value)}
                     placeholder="Search endpoints by path or summary"
-                    className="flex-1 rounded-md border border-border bg-background px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                    className="flex-1 rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20"
                   />
                 </div>
                 <div className="flex flex-wrap gap-2 text-xs">
@@ -581,14 +581,14 @@ export default function ApiDocsExplorer(props: ApiDocsExplorerProps) {
                           selectedOperation?.id === operation.id ? 'ring-2 ring-primary/40' : ''
                         }`}
                       >
-                        <div className="flex flex-col gap-4 border-b bg-muted/40 px-5 py-4 md:flex-row md:items-center md:justify-between">
+                        <div className="flex flex-col gap-4 border-b bg-muted/50 px-5 py-4 md:flex-row md:items-center md:justify-between">
                           <div className="flex items-center gap-3">
                             <span className={`rounded px-3 py-1 text-xs font-semibold uppercase ${methodClass}`}>
                               {operation.method}
                             </span>
                             <code className="text-sm text-foreground">{operation.path}</code>
                           </div>
-                          <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                          <div className="flex items-center gap-2 text-overline text-muted-foreground">
                             {operation.operation?.['x-require-auth'] ? (
                               <span className="rounded bg-amber-100 px-2 py-0.5 text-amber-900">Auth required</span>
                             ) : null}
@@ -619,7 +619,7 @@ export default function ApiDocsExplorer(props: ApiDocsExplorerProps) {
                               </h4>
                               <div className="overflow-hidden rounded-lg border">
                                 <table className="min-w-full divide-y divide-border text-left text-xs">
-                                  <thead className="bg-muted/60 text-[11px] uppercase tracking-wide text-muted-foreground">
+                                  <thead className="bg-muted/50 text-overline uppercase tracking-wide text-muted-foreground">
                                     <tr>
                                       <th className="px-3 py-2 font-medium">Name</th>
                                       <th className="px-3 py-2 font-medium">In</th>
@@ -687,14 +687,14 @@ export default function ApiDocsExplorer(props: ApiDocsExplorerProps) {
 
                                   return (
                                     <div key={status} className="rounded-lg border">
-                                      <div className="flex items-center justify-between border-b bg-muted/60 px-4 py-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                                      <div className="flex items-center justify-between border-b bg-muted/50 px-4 py-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                                         <span>{status}</span>
                                         <span className="text-muted-foreground">
                                           {response?.description ?? 'Response'}
                                         </span>
                                       </div>
                                       {responseVariant ? (
-                                        <div className="border-b bg-muted/40 px-4 py-2 text-[11px] text-muted-foreground">
+                                        <div className="border-b bg-muted/50 px-4 py-2 text-overline text-muted-foreground">
                                           Content-Type: {responseVariant.mediaType}
                                         </div>
                                       ) : null}
@@ -773,7 +773,7 @@ export default function ApiDocsExplorer(props: ApiDocsExplorerProps) {
               )
             })}
             {!categories.length ? (
-              <div className="rounded-lg border border-dashed bg-muted/40 p-6 text-center text-sm text-muted-foreground">
+              <div className="rounded-lg border border-dashed bg-muted/50 p-6 text-center text-sm text-muted-foreground">
                 No endpoints match your filters. Try adjusting the method filters or clearing the search query.
               </div>
             ) : null}
@@ -852,7 +852,7 @@ export default function ApiDocsExplorer(props: ApiDocsExplorerProps) {
                           onClick={() => handleSelectOperation(operation.id)}
                         >
                           <span
-                            className={`inline-flex min-w-[3rem] justify-center rounded border px-2 py-0.5 text-[11px] font-semibold uppercase ${
+                            className={`inline-flex min-w-[3rem] justify-center rounded border px-2 py-0.5 text-overline font-semibold uppercase ${
                               METHOD_STYLES[operation.method] ?? 'border border-border bg-muted text-foreground'
                             }`}
                           >
@@ -961,7 +961,7 @@ function CodeSnippetTabs(props: { snippets: CodeSnippet[] }) {
 function MobileOverlay(props: { title: string; children: ReactNode; onClose: () => void }) {
   const { title, children, onClose } = props
   return (
-    <div className="fixed inset-0 z-50 flex flex-col bg-background/95 backdrop-blur">
+    <div className="fixed inset-0 z-modal flex flex-col bg-background/95 backdrop-blur">
       <div className="border-b bg-card px-6 py-4">
         <div className="flex items-center justify-between">
           <h2 className="text-base font-semibold text-foreground">{title}</h2>
@@ -1295,7 +1295,7 @@ function TesterPanel(props: TesterPanelProps) {
           </p>
         </div>
         <span
-          className={`inline-flex min-w-[3rem] justify-center rounded border px-2 py-0.5 text-[11px] font-semibold uppercase ${
+          className={`inline-flex min-w-[3rem] justify-center rounded border px-2 py-0.5 text-overline font-semibold uppercase ${
             METHOD_STYLES[operation.method] ?? 'border border-border bg-muted text-foreground'
           }`}
         >
@@ -1313,7 +1313,7 @@ function TesterPanel(props: TesterPanelProps) {
         <select
           value={baseUrl}
           onChange={(event) => setBaseUrl(event.target.value)}
-          className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+          className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20"
         >
           {mergedBaseUrls.map((server) => (
             <option key={server.url} value={server.url}>
@@ -1338,7 +1338,7 @@ function TesterPanel(props: TesterPanelProps) {
           value={apiKey}
           onChange={(event) => setApiKey(event.target.value)}
           placeholder="Paste your API key secret (omk_…)"
-          className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+          className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20"
         />
       </label>
 
@@ -1362,7 +1362,7 @@ function TesterPanel(props: TesterPanelProps) {
                     }))
                   }
                   placeholder={parameter.description ?? ''}
-                  className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20"
                 />
               </label>
             ))}
@@ -1390,7 +1390,7 @@ function TesterPanel(props: TesterPanelProps) {
                     }))
                   }
                   placeholder={parameter.description ?? ''}
-                  className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+                  className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20"
                 />
               </label>
             ))}
@@ -1408,7 +1408,7 @@ function TesterPanel(props: TesterPanelProps) {
             value={bodyContent}
             onChange={(event) => setBodyContent(event.target.value)}
             rows={8}
-            className="w-full rounded-md border border-border bg-background px-3 py-2 text-xs font-mono leading-relaxed focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+            className="w-full rounded-md border border-border bg-background px-3 py-2 text-xs font-mono leading-relaxed focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20"
             placeholder="Provide request payload"
           />
         </section>
@@ -1431,7 +1431,7 @@ function TesterPanel(props: TesterPanelProps) {
         type="button"
         onClick={handleSubmit}
         disabled={isLoading}
-        className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-primary/60"
+        className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground hover:bg-primary/90 disabled:cursor-not-allowed disabled:bg-primary/10"
       >
         {isLoading ? 'Sending…' : 'Send request'}
       </button>

package/src/modules/api_keys/backend/api-keys/create/page.tsx

@@ -125,7 +125,7 @@ export default function CreateApiKeyPage() {
                 </p>
               </div>
               <div className="space-y-4 p-6">
-                <div className="rounded-md border bg-muted/40 p-4 font-mono text-sm break-all">
+                <div className="rounded-md border bg-muted/50 p-4 font-mono text-sm break-all">
                   {createdSecret.secret}
                 </div>
                 <div className="flex items-center justify-between text-xs text-muted-foreground">

package/src/modules/attachments/components/AttachmentLibrary.tsx

@@ -661,8 +661,8 @@ function AttachmentUploadForm({ partitions, availableTags, onUploaded, onCancel
         onSubmit={handleSubmit}
       />
       {isUploading ? (
-        <div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center bg-background/90 px-6 text-center backdrop-blur">
-          <div className="flex w-full max-w-sm flex-col items-center gap-4 rounded-xl border border-border/50 bg-card/95 px-6 py-8 shadow-2xl">
+        <div className="pointer-events-none absolute inset-0 z-20 flex items-center justify-center bg-background/80 px-6 text-center backdrop-blur">
+          <div className="flex w-full max-w-sm flex-col items-center gap-4 rounded-xl border border-border/70 bg-card/95 px-6 py-8 shadow-2xl">
             <Spinner size="lg" className="border-primary/50 border-t-primary" />
             <div className="w-full space-y-3">
               <p className="text-base font-semibold">
@@ -844,7 +844,7 @@ export function AttachmentLibrary() {
           const placeholder = resolveAttachmentPlaceholder(value.mimeType, value.fileName)
           const PlaceholderIcon = placeholder.icon
           return (
-            <div className="flex h-16 w-16 flex-col items-center justify-center rounded border bg-muted text-[10px] font-semibold uppercase text-muted-foreground">
+            <div className="flex h-16 w-16 flex-col items-center justify-center rounded border bg-muted text-overline font-semibold uppercase text-muted-foreground">
               <PlaceholderIcon className="mb-1 h-5 w-5 text-muted-foreground" aria-hidden />
               {placeholder.label}
             </div>

package/src/modules/attachments/components/AttachmentPartitionSettings.tsx

@@ -421,7 +421,7 @@ export function AttachmentPartitionSettings() {
               </div>
             )}
             {dialog ? (
-              <div className="rounded-md border bg-muted/40 px-3 py-2 text-xs text-muted-foreground">
+              <div className="rounded-md border bg-muted/50 px-3 py-2 text-xs text-muted-foreground">
                 <div>
                   {t('attachments.partitions.form.envKeyHelp', 'Set this env var to override storage path:')}
                 </div>

package/src/modules/attachments/fields/attachment.tsx

@@ -135,7 +135,7 @@ export const AttachmentInput = ({
           {t('attachments.library.upload.saveFirst', 'Save the record before uploading files.')}
         </div>
       ) : (
-        <div className="rounded-md border border-dashed border-border/70 bg-muted/20 px-4 py-4">
+        <div className="rounded-md border border-dashed border-border/70 bg-muted/30 px-4 py-4">
           <div className="flex flex-wrap items-center gap-3">
             <Button
               type="button"

package/src/modules/audit_logs/components/ActionLogDetailsDialog.tsx

@@ -53,7 +53,7 @@ export function ActionLogDetailsDialog({ item, onClose }: { item: ActionLogItem;
   if (!mounted) return null
 
   return createPortal(
-    <div className="fixed inset-0 z-50 flex w-full items-end justify-center bg-black/30 p-0 backdrop-blur-sm sm:items-center sm:p-6">
+    <div className="fixed inset-0 z-modal flex w-full items-end justify-center bg-black/50 p-0 backdrop-blur-sm sm:items-center sm:p-6">
       <button
         type="button"
         aria-label={t('audit_logs.actions.details.close')}

package/src/modules/audit_logs/lib/display-helpers.tsx

@@ -29,7 +29,7 @@ export function renderValue(value: unknown, fallback: string) {
   if (value instanceof Date) return <span>{value.toISOString()}</span>
   if (typeof value === 'string') return <span className="break-words">{value}</span>
   return (
-    <pre className="max-h-40 overflow-y-auto whitespace-pre-wrap break-words rounded-md bg-muted/40 px-2 py-1 text-xs leading-5 text-muted-foreground">
+    <pre className="max-h-40 overflow-y-auto whitespace-pre-wrap break-words rounded-md bg-muted/50 px-2 py-1 text-xs leading-5 text-muted-foreground">
       {safeStringify(value)}
     </pre>
   )

package/src/modules/auth/backend/users/create/page.tsx

@@ -434,7 +434,7 @@ function DashboardWidgetSelector({
             </div>
           )}
           {mode === 'inherit' && (
-            <div className="rounded-md border bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
+            <div className="rounded-md border bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
               {t('auth.users.widgets.mode.hint', 'New users inherit widgets from their assigned roles. Override to pick a custom set.')}
             </div>
           )}

package/src/modules/business_rules/backend/rules/page.tsx

@@ -210,10 +210,10 @@ export default function RulesListPage() {
       accessorKey: 'ruleType',
       cell: ({ row }) => {
         const typeColors = {
-          GUARD: 'bg-red-100 text-red-800',
-          VALIDATION: 'bg-yellow-100 text-yellow-800',
-          CALCULATION: 'bg-blue-100 text-blue-800',
-          ACTION: 'bg-green-100 text-green-800',
+          GUARD: 'bg-status-error-bg text-status-error-text',
+          VALIDATION: 'bg-status-warning-bg text-status-warning-text',
+          CALCULATION: 'bg-status-info-bg text-status-info-text',
+          ACTION: 'bg-status-success-bg text-status-success-text',
           ASSIGNMENT: 'bg-purple-100 text-purple-800',
         }
         const color = typeColors[row.original.ruleType] || 'bg-muted text-foreground'
@@ -244,8 +244,8 @@ export default function RulesListPage() {
           onClick={() => handleToggleEnabled(row.original.id, row.original.enabled)}
           className={`inline-flex items-center px-2 py-1 rounded text-xs font-medium cursor-pointer ${
             row.original.enabled
-              ? 'bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900 dark:text-green-300 dark:hover:bg-green-800'
-              : 'bg-muted text-muted-foreground hover:bg-muted/80'
+              ? 'bg-status-success-bg text-status-success-text hover:bg-status-success-bg/80'
+              : 'bg-muted text-muted-foreground hover:bg-muted/50'
           }`}
           title={t('business_rules.actions.toggleEnabled')}
         >
@@ -302,7 +302,7 @@ export default function RulesListPage() {
       <Page>
         <PageBody>
           <div className="p-8 text-center">
-            <p className="text-red-600">{t('business_rules.messages.loadFailed')}</p>
+            <p className="text-status-error-text">{t('business_rules.messages.loadFailed')}</p>
             <Button onClick={() => queryClient.invalidateQueries({ queryKey: ['business-rules'] })} className="mt-4">
               {t('common.retry')}
             </Button>

package/src/modules/business_rules/backend/sets/page.tsx

@@ -154,7 +154,7 @@ export default function RuleSetsListPage() {
       cell: ({ row }) => (
         <Link
           href={`/backend/sets/${row.original.id}`}
-          className="font-mono text-sm text-blue-600 hover:text-blue-800 hover:underline"
+          className="font-mono text-sm text-primary hover:underline"
         >
           {row.original.setId}
         </Link>
@@ -184,8 +184,8 @@ export default function RuleSetsListPage() {
           onClick={() => handleToggleEnabled(row.original.id, row.original.enabled)}
           className={`inline-flex items-center px-2 py-1 rounded text-xs font-medium cursor-pointer ${
             row.original.enabled
-              ? 'bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900 dark:text-green-300 dark:hover:bg-green-800'
-              : 'bg-muted text-muted-foreground hover:bg-muted/80'
+              ? 'bg-status-success-bg text-status-success-text hover:bg-status-success-bg/80'
+              : 'bg-muted text-muted-foreground hover:bg-muted/50'
           }`}
           title={t('business_rules.sets.actions.toggleEnabled')}
         >

package/src/modules/business_rules/components/ActionBuilder.tsx

@@ -154,7 +154,7 @@ export function ActionBuilder({
               {t('business_rules.components.actionBuilder.addAction')}
             </Button>
             {actions.length > 1 && (
-              <Button type="button" onClick={handleClearAll} variant="outline" size="sm" className="text-red-600">
+              <Button type="button" onClick={handleClearAll} variant="outline" size="sm" className="text-status-error-text">
                 {t('business_rules.components.actionBuilder.clearAll')}
               </Button>
             )}
@@ -164,13 +164,13 @@ export function ActionBuilder({
 
       {/* Validation Errors */}
       {!validation.valid && (
-        <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded">
-          <p className="text-sm font-medium text-red-800 dark:text-red-300 mb-1">
+        <div className="p-3 bg-status-error-bg border border-status-error-border rounded">
+          <p className="text-sm font-medium text-status-error-text mb-1">
             {t('business_rules.components.actionBuilder.validationErrors')}
           </p>
           <ul className="list-disc list-inside space-y-0.5">
             {validation.errors.map((err, index) => (
-              <li key={index} className="text-xs text-red-700 dark:text-red-400">
+              <li key={index} className="text-xs text-status-error-text">
                 {err}
               </li>
             ))}
@@ -180,8 +180,8 @@ export function ActionBuilder({
 
       {/* External Error */}
       {error && (
-        <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded">
-          <p className="text-sm text-red-700 dark:text-red-400">{error}</p>
+        <div className="p-3 bg-status-error-bg border border-status-error-border rounded">
+          <p className="text-sm text-status-error-text">{error}</p>
         </div>
       )}
 

package/src/modules/business_rules/components/ActionRow.tsx

@@ -67,7 +67,7 @@ export function ActionRow({
             value={value}
             onChange={(e) => handleConfigChange(field, e.target.value.split(',').map((s) => s.trim()))}
             placeholder={t('business_rules.components.actionRow.config.recipients.placeholder')}
-            className="col-span-3 px-2 py-1.5 text-sm border border-border rounded bg-background focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="col-span-3 px-2 py-1.5 text-sm border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           />
           <div className="col-span-4 col-start-2">
             <p className="text-xs text-muted-foreground">{t('business_rules.components.actionRow.config.recipients.help')}</p>
@@ -83,7 +83,7 @@ export function ActionRow({
           <select
             value={value || 'info'}
             onChange={(e) => handleConfigChange(field, e.target.value)}
-            className="col-span-3 px-2 py-1.5 text-sm border border-border rounded bg-background focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="col-span-3 px-2 py-1.5 text-sm border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           >
             <option value="info">{t('business_rules.components.actionRow.config.level.info')}</option>
             <option value="warn">{t('business_rules.components.actionRow.config.level.warn')}</option>
@@ -101,7 +101,7 @@ export function ActionRow({
           <select
             value={value || 'POST'}
             onChange={(e) => handleConfigChange(field, e.target.value)}
-            className="col-span-3 px-2 py-1.5 text-sm border border-border rounded bg-background focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="col-span-3 px-2 py-1.5 text-sm border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           >
             <option value="GET">GET</option>
             <option value="POST">POST</option>
@@ -124,7 +124,7 @@ export function ActionRow({
             onChange={(e) => handleConfigChange(field, e.target.value)}
             placeholder={t('business_rules.components.actionRow.config.message.placeholder')}
             rows={2}
-            className="col-span-3 px-2 py-1.5 text-sm border border-border rounded bg-background focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="col-span-3 px-2 py-1.5 text-sm border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           />
           <div className="col-span-4 col-start-2">
             <p className="text-xs text-muted-foreground">{t('business_rules.components.actionRow.config.message.help')}</p>
@@ -144,7 +144,7 @@ export function ActionRow({
           value={value}
           onChange={(e) => handleConfigChange(field, e.target.value)}
           placeholder={t('business_rules.components.actionRow.config.field.placeholder', { field })}
-          className="col-span-3 px-2 py-1.5 text-sm border border-border rounded bg-background focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="col-span-3 px-2 py-1.5 text-sm border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         />
       </div>
     )
@@ -161,7 +161,7 @@ export function ActionRow({
           <select
             value={action.type || ''}
             onChange={handleTypeChange}
-            className="col-span-3 px-2 py-1.5 text-sm border border-border rounded bg-background focus:outline-none focus:ring-2 focus:ring-blue-500 font-medium"
+            className="col-span-3 px-2 py-1.5 text-sm border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring font-medium"
           >
             <option value="">{t('business_rules.components.actionRow.actionType.placeholder')}</option>
             {actionTypes.map((type) => (
@@ -195,7 +195,7 @@ export function ActionRow({
             type="button"
             onClick={() => onMoveUp(index)}
             disabled={!canMoveUp}
-            className="p-1 text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+            className="p-1 text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
             title={t('business_rules.components.actionRow.moveUp')}
           >
             <ChevronUp className="w-4 h-4" />
@@ -206,7 +206,7 @@ export function ActionRow({
             type="button"
             onClick={() => onMoveDown(index)}
             disabled={!canMoveDown}
-            className="p-1 text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+            className="p-1 text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
             title={t('business_rules.components.actionRow.moveDown')}
           >
             <ChevronDown className="w-4 h-4" />

package/src/modules/business_rules/components/ConditionBuilder.tsx

@@ -122,7 +122,7 @@ export function ConditionBuilder({
 
           {/* Clear Button */}
           <div className="flex justify-end">
-            <Button type="button" onClick={handleClear} variant="outline" size="sm" className="text-red-600">
+            <Button type="button" onClick={handleClear} variant="outline" size="sm" className="text-status-error-text">
               {t('business_rules.components.conditionBuilder.clearAll')}
             </Button>
           </div>
@@ -131,13 +131,13 @@ export function ConditionBuilder({
 
       {/* Validation Errors */}
       {!validation.valid && (
-        <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded">
-          <p className="text-sm font-medium text-red-800 dark:text-red-300 mb-1">
+        <div className="p-3 bg-status-error-bg border border-status-error-border rounded">
+          <p className="text-sm font-medium text-status-error-text mb-1">
             {t('business_rules.components.conditionBuilder.validationErrors')}
           </p>
           <ul className="list-disc list-inside space-y-0.5">
             {validation.errors.map((err, index) => (
-              <li key={index} className="text-xs text-red-700 dark:text-red-400">
+              <li key={index} className="text-xs text-status-error-text">
                 {err}
               </li>
             ))}
@@ -147,8 +147,8 @@ export function ConditionBuilder({
 
       {/* External Error */}
       {error && (
-        <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded">
-          <p className="text-sm text-red-700 dark:text-red-400">{error}</p>
+        <div className="p-3 bg-status-error-bg border border-status-error-border rounded">
+          <p className="text-sm text-status-error-text">{error}</p>
         </div>
       )}
 

package/src/modules/business_rules/components/ConditionGroup.tsx

@@ -107,7 +107,7 @@ export function ConditionGroup({ group, onChange, onDelete, depth, maxDepth = 5,
         <select
           value={group.operator}
           onChange={handleOperatorChange}
-          className="px-3 py-1.5 text-sm font-semibold border border-border rounded bg-card focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="px-3 py-1.5 text-sm font-semibold border border-border rounded bg-card focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         >
           {logicalOperators.map((op) => (
             <option key={op.value} value={op.value}>
@@ -124,7 +124,7 @@ export function ConditionGroup({ group, onChange, onDelete, depth, maxDepth = 5,
           <button
             type="button"
             onClick={onDelete}
-            className="ml-auto p-1 text-muted-foreground hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors"
+            className="ml-auto p-1 text-muted-foreground hover:text-status-error-text hover:bg-status-error-bg rounded transition-colors"
             title={t('business_rules.components.conditionGroup.deleteGroup')}
           >
             <X className="w-4 h-4" />

package/src/modules/business_rules/components/ConditionRow.tsx

@@ -77,7 +77,7 @@ export function ConditionRow({ condition, onChange, onDelete, error }: Condition
             value={condition.field || ''}
             onChange={handleFieldChange}
             placeholder={t('business_rules.components.conditionRow.field.placeholder')}
-            className={`w-full px-2 py-1.5 text-sm border rounded bg-background focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+            className={`w-full px-2 py-1.5 text-sm border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
               fieldError ? 'border-red-500' : 'border-border'
             }`}
           />
@@ -96,7 +96,7 @@ export function ConditionRow({ condition, onChange, onDelete, error }: Condition
           <select
             value={condition.operator || '='}
             onChange={handleOperatorChange}
-            className="w-full px-2 py-1.5 text-sm border border-border rounded bg-background focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="w-full px-2 py-1.5 text-sm border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           >
             {operators.map((op) => (
               <option key={op.value} value={op.value}>
@@ -144,7 +144,7 @@ export function ConditionRow({ condition, onChange, onDelete, error }: Condition
                 ? t('business_rules.components.conditionRow.field.comparisonPlaceholder')
                 : t('business_rules.components.conditionRow.value.placeholder')
               }
-              className="w-full px-2 py-1.5 text-sm border border-border rounded bg-background focus:outline-none focus:ring-2 focus:ring-blue-500"
+              className="w-full px-2 py-1.5 text-sm border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             />
             <p className="text-xs text-muted-foreground mt-0.5">
               {useFieldComparison

package/src/modules/business_rules/components/RuleSetMembers.tsx

@@ -103,7 +103,7 @@ export function RuleSetMembers({ members, onAdd, onUpdate, onRemove }: RuleSetMe
                 <button
                   onClick={() => handleMoveUp(member, index)}
                   disabled={index === 0}
-                  className="p-1 text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                  className="p-1 text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                   title={t('common.moveUp')}
                 >
                   <ChevronUp className="w-4 h-4" />
@@ -111,7 +111,7 @@ export function RuleSetMembers({ members, onAdd, onUpdate, onRemove }: RuleSetMe
                 <button
                   onClick={() => handleMoveDown(member, index)}
                   disabled={index === members.length - 1}
-                  className="p-1 text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                  className="p-1 text-muted-foreground hover:text-foreground hover:bg-muted rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
                   title={t('common.moveDown')}
                 >
                   <ChevronDown className="w-4 h-4" />
@@ -119,7 +119,7 @@ export function RuleSetMembers({ members, onAdd, onUpdate, onRemove }: RuleSetMe
               </div>
 
               {/* Sequence Number */}
-              <div className="flex items-center justify-center w-8 h-8 bg-blue-100 text-blue-700 rounded font-mono text-sm font-medium dark:bg-blue-900 dark:text-blue-300">
+              <div className="flex items-center justify-center w-8 h-8 bg-status-info-bg text-status-info-text rounded font-mono text-sm font-medium">
                 {member.sequence}
               </div>
 
@@ -139,8 +139,8 @@ export function RuleSetMembers({ members, onAdd, onUpdate, onRemove }: RuleSetMe
                 onClick={() => handleToggleEnabled(member)}
                 className={`px-2 py-1 rounded text-xs font-medium cursor-pointer ${
                   member.enabled
-                    ? 'bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900 dark:text-green-300 dark:hover:bg-green-800'
-                    : 'bg-muted text-muted-foreground hover:bg-muted/80'
+                    ? 'bg-status-success-bg text-status-success-text hover:bg-status-success-bg/80'
+                    : 'bg-muted text-muted-foreground hover:bg-muted/50'
                 }`}
                 title={t('business_rules.sets.members.actions.toggleEnabled')}
               >
@@ -150,7 +150,7 @@ export function RuleSetMembers({ members, onAdd, onUpdate, onRemove }: RuleSetMe
               {/* Remove Button */}
               <button
                 onClick={() => onRemove(member.id, member.ruleName)}
-                className="p-1.5 text-muted-foreground hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 rounded transition-colors"
+                className="p-1.5 text-muted-foreground hover:text-status-error-text hover:bg-status-error-bg rounded transition-colors"
                 title={t('common.remove')}
               >
                 <X className="w-4 h-4" />
@@ -162,7 +162,7 @@ export function RuleSetMembers({ members, onAdd, onUpdate, onRemove }: RuleSetMe
 
       {/* Add Rule Form */}
       {showAddForm ? (
-        <div className="p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded space-y-3">
+        <div className="p-4 bg-status-info-bg border border-status-info-border rounded space-y-3">
           <div className="flex items-end gap-3">
             <div className="flex-1">
               <label className="block text-sm font-medium text-foreground mb-1">
@@ -171,7 +171,7 @@ export function RuleSetMembers({ members, onAdd, onUpdate, onRemove }: RuleSetMe
               <select
                 value={selectedRuleId}
                 onChange={(e) => setSelectedRuleId(e.target.value)}
-                className="w-full px-3 py-2 border border-border rounded bg-background focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="w-full px-3 py-2 border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               >
                 <option value="">{t('business_rules.sets.members.form.selectRulePlaceholder')}</option>
                 {rulesNotInSet.map((rule) => (
@@ -191,7 +191,7 @@ export function RuleSetMembers({ members, onAdd, onUpdate, onRemove }: RuleSetMe
                 value={sequence}
                 onChange={(e) => setSequence(parseInt(e.target.value) || 0)}
                 min={0}
-                className="w-full px-3 py-2 border border-border rounded bg-background focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className="w-full px-3 py-2 border border-border rounded bg-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               />
             </div>
           </div>

package/src/modules/catalog/backend/catalog/products/[id]/page.tsx

@@ -1902,7 +1902,7 @@ function ProductOptionsSection({ values, setValue }: ProductFormGroupProps) {
           </div>
         </div>
         {(Array.isArray(values.options) ? values.options : []).map((option) => (
-          <div key={option.id} className="rounded-md bg-muted/40 p-4">
+          <div key={option.id} className="rounded-md bg-muted/50 p-4">
             <div className="flex items-center gap-2">
               <Input
                 value={option.title}
@@ -2250,7 +2250,7 @@ function ProductVariantsSection({
               </thead>
               <tbody>
                 {variants.map((variant) => (
-                  <tr key={variant.id} className="border-t hover:bg-muted/40">
+                  <tr key={variant.id} className="border-t hover:bg-muted/50">
                     <td className="px-3 py-2">
                       <Link
                         href={`/backend/catalog/products/${productId}/variants/${variant.id}`}