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

package/src/modules/catalog/backend/catalog/products/create/page.tsx

@@ -1496,7 +1496,7 @@ function ProductBuilder({
               </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}
@@ -1553,7 +1553,7 @@ function ProductBuilder({
           <div className="rounded-lg border">
             <div className="w-full overflow-x-auto">
               <table className="w-full min-w-[900px] table-fixed border-collapse text-sm">
-                <thead className="bg-muted/40">
+                <thead className="bg-muted/50">
                   <tr>
                     <th className="px-3 py-2 text-left">
                       {t(
@@ -1753,7 +1753,7 @@ function ProductBuilder({
                       <td className="px-3 py-2 text-center">
                         <input
                           type="checkbox"
-                          className="h-4 w-4 rounded border disabled:cursor-not-allowed disabled:opacity-60"
+                          className="h-4 w-4 rounded border disabled:cursor-not-allowed disabled:opacity-50"
                           checked={variant.manageInventory}
                           onChange={(event) =>
                             setVariantField(
@@ -1769,7 +1769,7 @@ function ProductBuilder({
                       <td className="px-3 py-2 text-center">
                         <input
                           type="checkbox"
-                          className="h-4 w-4 rounded border disabled:cursor-not-allowed disabled:opacity-60"
+                          className="h-4 w-4 rounded border disabled:cursor-not-allowed disabled:opacity-50"
                           checked={variant.allowBackorder}
                           onChange={(event) =>
                             setVariantField(
@@ -1785,7 +1785,7 @@ function ProductBuilder({
                       <td className="px-3 py-2 text-center">
                         <input
                           type="checkbox"
-                          className="h-4 w-4 rounded border disabled:cursor-not-allowed disabled:opacity-60"
+                          className="h-4 w-4 rounded border disabled:cursor-not-allowed disabled:opacity-50"
                           checked={variant.hasInventoryKit}
                           onChange={(event) =>
                             setVariantField(

package/src/modules/catalog/components/products/MetadataEditor.tsx

@@ -156,7 +156,7 @@ export function MetadataEditor({
             </p>
           ) : null}
           {entries.map((entry) => (
-            <div key={entry.id} className="flex flex-col gap-2 rounded-md bg-muted/40 p-3 sm:flex-row sm:items-center">
+            <div key={entry.id} className="flex flex-col gap-2 rounded-md bg-muted/50 p-3 sm:flex-row sm:items-center">
               <div className="flex flex-1 flex-col gap-2 sm:flex-row">
                 <Input
                   value={entry.key}

package/src/modules/catalog/components/products/ProductImageCell.tsx

@@ -31,7 +31,7 @@ export function ProductImageCell({ mediaId, mediaUrl, title, cropType = 'cover'
   }
 
   return (
-    <div className="flex h-16 w-16 items-center justify-center overflow-hidden rounded-md border bg-muted/10">
+    <div className="flex h-16 w-16 items-center justify-center overflow-hidden rounded-md border bg-muted/30">
       <img
         src={previewUrl}
         alt={title ?? ''}

package/src/modules/catalog/components/products/VariantBuilder.tsx

@@ -329,7 +329,7 @@ export function VariantPricesSection({
           priceKinds.map((kind) => {
             const draft = values.prices?.[kind.id]
             return (
-              <div key={kind.id} className="rounded bg-muted/40 p-3">
+              <div key={kind.id} className="rounded bg-muted/50 p-3">
                 <div className="flex items-center justify-between">
                   <div>
                     <p className="text-sm font-semibold">{kind.title}</p>

package/src/modules/catalog/widgets/injection/product-seo/widget.client.tsx

@@ -112,7 +112,7 @@ export default function ProductSeoWidget({ data }: InjectionWidgetComponentProps
         </div>
       </div>
 
-      <p className="text-[11px] text-muted-foreground">
+      <p className="text-overline text-muted-foreground">
         {t('catalog.products.create.seoWidget.footer', 'Example widget powered by the injection system.')}{' '}
         <a className="text-primary underline" href="/docs/framework/admin-ui/widget-injection" target="_blank" rel="noreferrer">
           {t('catalog.products.create.seoWidget.learnMore', 'Learn how to build your own')}

package/src/modules/currencies/components/CurrencyFetchingConfig.tsx

@@ -318,7 +318,7 @@ export default function CurrencyFetchingConfig() {
         ))}
 
         {configs.length === 0 && (
-          <div className="rounded border bg-background/70 p-6 text-center">
+          <div className="rounded border bg-background/80 p-6 text-center">
             <p className="text-sm text-muted-foreground">
               {t('currencies.fetch.no_providers')}
             </p>

package/src/modules/customer_accounts/backend/customer_accounts/roles/page.tsx

@@ -137,7 +137,7 @@ export default function CustomerRolesPage() {
       header: t('customer_accounts.admin.roles.columns.isSystem', 'System'),
       cell: ({ row }) => (
         row.original.isSystem ? (
-          <span className="inline-flex items-center rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+          <span className="inline-flex items-center rounded-full bg-status-info-bg px-2 py-0.5 text-xs font-medium text-status-info-text">
             {t('customer_accounts.admin.roles.system', 'System')}
           </span>
         ) : null
@@ -148,7 +148,7 @@ export default function CustomerRolesPage() {
       header: t('customer_accounts.admin.roles.columns.isDefault', 'Default'),
       cell: ({ row }) => (
         row.original.isDefault ? (
-          <span className="inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900 dark:text-green-200">
+          <span className="inline-flex items-center rounded-full bg-status-success-bg px-2 py-0.5 text-xs font-medium text-status-success-text">
             {t('customer_accounts.admin.roles.default', 'Default')}
           </span>
         ) : null

package/src/modules/customer_accounts/backend/customer_accounts/users/[id]/page.tsx

@@ -491,16 +491,16 @@ export default function CustomerUserDetailPage({ params }: { params?: { id?: str
           deleteLabel={t('customer_accounts.admin.detail.actions.delete', 'Delete')}
         />
 
-        <div className="rounded-lg border border-blue-200 bg-blue-50/50 p-4 dark:border-blue-800 dark:bg-blue-950/50">
+        <div className="rounded-lg border border-status-info-border bg-status-info-bg p-4">
           <div className="flex items-start gap-3">
             <div className="flex-1">
-              <h3 className="text-sm font-medium text-blue-900 dark:text-blue-100">
+              <h3 className="text-sm font-medium text-status-info-text">
                 {t('customer_accounts.admin.detail.portalAccess.title', 'Customer Portal Access')}
               </h3>
-              <p className="mt-1 text-sm text-blue-700 dark:text-blue-300">
+              <p className="mt-1 text-sm text-status-info-text">
                 {t('customer_accounts.admin.detail.portalAccess.description', 'This user can access the customer portal at the URL below. The portal provides self-service access to orders, invoices, quotes, and account management.')}
               </p>
-              <p className="mt-2 text-xs text-blue-600 dark:text-blue-400">
+              <p className="mt-2 text-xs text-status-info-text">
                 {t('customer_accounts.admin.detail.portalAccess.url', 'Portal URL: {url}', {
                   url: `${typeof window !== 'undefined' ? window.location.origin : ''}/[org-slug]/portal`,
                 })}
@@ -522,8 +522,8 @@ export default function CustomerUserDetailPage({ params }: { params?: { id?: str
                 <dd className="flex items-center gap-2">
                   <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
                     data.emailVerifiedAt
-                      ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                      : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
+                      ? 'bg-status-success-bg text-status-success-text'
+                      : 'bg-status-warning-bg text-status-warning-text'
                   }`}>
                     {data.emailVerifiedAt
                       ? t('customer_accounts.admin.verified', 'Yes')
@@ -748,12 +748,12 @@ export default function CustomerUserDetailPage({ params }: { params?: { id?: str
             </Button>
           </div>
           {resetLinkUrl && (
-            <div className="rounded-md border border-blue-200 bg-blue-50 p-3 dark:border-blue-800 dark:bg-blue-950">
-              <p className="mb-1.5 text-sm font-medium text-blue-900 dark:text-blue-100">
+            <div className="rounded-md border border-status-info-border bg-status-info-bg p-3">
+              <p className="mb-1.5 text-sm font-medium text-status-info-text">
                 {t('customer_accounts.admin.detail.sendResetLink.linkLabel', 'Password reset link (valid for 60 minutes):')}
               </p>
               <div className="flex items-center gap-2">
-                <code className="flex-1 break-all rounded bg-blue-100 px-2 py-1 text-xs text-blue-800 dark:bg-blue-900 dark:text-blue-200">
+                <code className="flex-1 break-all rounded bg-status-info-bg px-2 py-1 text-xs text-status-info-text">
                   {resetLinkUrl}
                 </code>
                 <Button
@@ -768,7 +768,7 @@ export default function CustomerUserDetailPage({ params }: { params?: { id?: str
                   {t('customer_accounts.admin.detail.sendResetLink.actions.copy', 'Copy')}
                 </Button>
               </div>
-              <p className="mt-1.5 text-xs text-blue-700 dark:text-blue-300">
+              <p className="mt-1.5 text-xs text-status-info-text">
                 {t('customer_accounts.admin.detail.sendResetLink.hint', 'Share this link with the customer to let them set a new password.')}
               </p>
             </div>

package/src/modules/customer_accounts/backend/customer_accounts/users/page.tsx

@@ -428,8 +428,8 @@ export default function CustomerAccountsPage() {
         cell: ({ row }) => (
           <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
             row.original.emailVerified
-              ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-              : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
+              ? 'bg-status-success-bg text-status-success-text'
+              : 'bg-status-warning-bg text-status-warning-text'
           }`}>
             {row.original.emailVerified
               ? t('customer_accounts.admin.verified', 'Yes')
@@ -443,8 +443,8 @@ export default function CustomerAccountsPage() {
         cell: ({ row }) => (
           <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
             row.original.isActive
-              ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-              : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
+              ? 'bg-status-success-bg text-status-success-text'
+              : 'bg-status-error-bg text-status-error-text'
           }`}>
             {row.original.isActive
               ? t('customer_accounts.admin.active', 'Active')
@@ -477,21 +477,21 @@ export default function CustomerAccountsPage() {
   return (
     <Page>
       <PageBody className="space-y-4">
-        <div className="rounded-lg border border-blue-200 bg-blue-50/50 p-4 dark:border-blue-800 dark:bg-blue-950/50">
+        <div className="rounded-lg border border-status-info-border bg-status-info-bg p-4">
           <div className="flex items-start justify-between gap-4">
             <div>
-              <h3 className="text-sm font-medium text-blue-900 dark:text-blue-100">
+              <h3 className="text-sm font-medium text-status-info-text">
                 {t('customer_accounts.admin.portalInfo.title', 'Customer Portal')}
               </h3>
-              <p className="mt-1 text-sm text-blue-700 dark:text-blue-300">
+              <p className="mt-1 text-sm text-status-info-text">
                 {t('customer_accounts.admin.portalInfo.description', 'Manage customer portal accounts. Customers can self-register, log in, and access orders, quotes, and invoices through the portal.')}
               </p>
-              <p className="mt-1.5 text-xs text-blue-600 dark:text-blue-400">
+              <p className="mt-1.5 text-xs text-status-info-text">
                 {t('customer_accounts.admin.portalInfo.url', 'Portal URL: {url}', {
                   url: `${typeof window !== 'undefined' ? window.location.origin : ''}/[org-slug]/portal`,
                 })}
               </p>
-              <p className="mt-0.5 text-xs text-blue-600 dark:text-blue-400">
+              <p className="mt-0.5 text-xs text-status-info-text">
                 {t('customer_accounts.admin.portalInfo.credentials', 'Demo credentials: alice.johnson@example.com / password123')}
               </p>
             </div>

package/src/modules/customer_accounts/widgets/injection/account-status/widget.client.tsx

@@ -172,7 +172,7 @@ function InviteForm({ personEntityId, onSuccess }: { personEntityId: string; onS
           type="email"
           value={email}
           onChange={(event) => setEmail(event.target.value)}
-          className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring"
+          className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           required
           disabled={isSubmitting}
         />
@@ -187,7 +187,7 @@ function InviteForm({ personEntityId, onSuccess }: { personEntityId: string; onS
           type="text"
           value={displayName}
           onChange={(event) => setDisplayName(event.target.value)}
-          className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring"
+          className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           disabled={isSubmitting}
         />
       </div>

package/src/modules/customers/backend/config/customers/pipeline-stages/page.tsx

@@ -317,7 +317,7 @@ export default function PipelineStagesPage() {
             <>
               <div className="flex items-center gap-3">
                 <select
-                  className="flex h-9 w-full max-w-xs rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus:outline-none focus:ring-1 focus:ring-ring"
+                  className="flex h-9 w-full max-w-xs rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                   value={selectedPipelineId ?? ''}
                   onChange={(e) => setSelectedPipelineId(e.target.value || null)}
                 >
@@ -379,7 +379,7 @@ export default function PipelineStagesPage() {
                           <div className="flex flex-col gap-1">
                             <button
                               type="button"
-                              className="text-muted-foreground hover:text-foreground disabled:opacity-30"
+                              className="text-muted-foreground hover:text-foreground disabled:opacity-50"
                               onClick={() => moveStage(index, 'up')}
                               disabled={index === 0}
                               aria-label={t('customers.config.pipelineStages.moveUp', 'Move up')}
@@ -388,7 +388,7 @@ export default function PipelineStagesPage() {
                             </button>
                             <button
                               type="button"
-                              className="text-muted-foreground hover:text-foreground disabled:opacity-30"
+                              className="text-muted-foreground hover:text-foreground disabled:opacity-50"
                               onClick={() => moveStage(index, 'down')}
                               disabled={index === stages.length - 1}
                               aria-label={t('customers.config.pipelineStages.moveDown', 'Move down')}

package/src/modules/customers/backend/customers/deals/pipeline/page.tsx

@@ -550,7 +550,7 @@ export default function SalesPipelinePage(): React.ReactElement {
 
               <div className="flex flex-col gap-4 pb-6 md:flex-row md:overflow-x-auto">
                 {stages.length === 0 ? (
-                  <div className="flex h-[50vh] w-full items-center justify-center rounded-lg border border-dashed border-border bg-muted/20">
+                  <div className="flex h-[50vh] w-full items-center justify-center rounded-lg border border-dashed border-border bg-muted/30">
                     <span className="text-sm text-muted-foreground">
                       {translate('customers.deals.pipeline.noStages', 'Define pipeline stages to start tracking deals.')}
                     </span>
@@ -573,7 +573,7 @@ export default function SalesPipelinePage(): React.ReactElement {
                         {renderLaneHeader(stage, laneDeals.length)}
                         <div className="flex flex-1 flex-col gap-3 overflow-y-auto px-4 py-3">
                           {sortedLaneDeals.length === 0 ? (
-                            <div className="rounded-md border border-dashed border-border bg-muted/10 p-4 text-center text-xs text-muted-foreground">
+                            <div className="rounded-md border border-dashed border-border bg-muted/30 p-4 text-center text-xs text-muted-foreground">
                               {translate('customers.deals.pipeline.emptyLane', 'No deals in this stage yet.')}
                             </div>
                           ) : (

package/src/modules/customers/components/AddressTiles.tsx

@@ -422,7 +422,7 @@ export function CustomerAddressTiles({
     (key: string) => (
       <div
         key={key}
-        className="rounded-lg border-2 border-dashed border-muted-foreground/50 bg-muted/20 p-4 text-sm"
+        className="rounded-lg border-2 border-dashed border-muted-foreground/50 bg-muted/30 p-4 text-sm"
         onKeyDown={(event) => {
           if (!(event.metaKey || event.ctrlKey)) return
           if (event.key !== 'Enter') return

package/src/modules/customers/components/detail/ActivityForm.tsx

@@ -151,7 +151,7 @@ export function ActivityForm({
             typeof value === 'string' && value.length ? value : normalizedEntityOptions[0]?.id ?? ''
           return (
             <select
-              className="h-9 w-full rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+              className="h-9 w-full rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               value={currentValue}
               onChange={(event) => setValue(event.target.value)}
             >
@@ -176,7 +176,7 @@ export function ActivityForm({
           const currentValue = typeof value === 'string' ? value : ''
           return (
             <select
-              className="h-9 w-full rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+              className="h-9 w-full rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               value={currentValue}
               onChange={(event) => setValue(event.target.value)}
             >
@@ -238,7 +238,7 @@ export function ActivityForm({
       component: ({ value, setValue }) => (
         <input
           type="datetime-local"
-          className="w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+          className="w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           value={typeof value === 'string' ? value : ''}
           onChange={(event) => setValue(event.target.value || '')}
           onFocus={(event) => {

package/src/modules/customers/components/detail/AnnualRevenueField.tsx

@@ -167,7 +167,7 @@ export function AnnualRevenueField({
 
   const containerClasses = React.useMemo(
     () =>
-      cn('group rounded border bg-muted/20 p-3', {
+      cn('group rounded border bg-muted/30 p-3', {
         'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring': !editing,
       }),
     [editing],
@@ -224,7 +224,7 @@ export function AnnualRevenueField({
               {t('customers.companies.detail.fields.annualRevenuePlaceholder', 'Enter amount')}
             </label>
             <input
-              className="w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+              className="w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
               value={draftAmount}
               onChange={(event) => {
                 setDraftAmount(event.target.value)

package/src/modules/customers/components/detail/CustomFieldValuesList.tsx

@@ -250,7 +250,7 @@ export function CustomFieldValuesList({
         return (
           <div
             key={`${prefix}-${entry.normalizedKey}-${index}`}
-            className="rounded-md border border-border/60 bg-muted/10 px-3 py-2"
+            className="rounded-md border border-border/70 bg-muted/30 px-3 py-2"
           >
             <div className="text-xs font-medium text-muted-foreground">{entry.label}</div>
             <div className="mt-1 text-sm text-foreground">{content}</div>

package/src/modules/customers/components/detail/DealForm.tsx

@@ -417,7 +417,7 @@ function EntityMultiSelect({
               <span className="flex flex-col items-start">
                 <span>{option.label}</span>
                 {option.subtitle ? (
-                  <span className="text-xs text-muted-foreground">{option.subtitle}</span>
+                  <span className="text-overline text-muted-foreground">{option.subtitle}</span>
                 ) : null}
               </span>
             </Button>

package/src/modules/customers/components/detail/DealsSection.tsx

@@ -948,7 +948,7 @@ export function DealsSection({
               ? statusDictionaryMap[deal.status]?.label ?? deal.status
               : deal.status ?? emptyLabel
           return (
-            <article key={deal.id} className="group rounded-lg border bg-card p-4 shadow-xs transition hover:border-border/80">
+            <article key={deal.id} className="group rounded-lg border bg-card p-4 shadow-xs transition hover:border-border/70">
               <header className="flex flex-wrap items-center justify-between gap-2">
                 <div>
                   <Link

package/src/modules/customers/components/detail/DetailFieldsSection.tsx

@@ -74,7 +74,7 @@ export type DetailFieldsSectionProps = {
   className?: string
 }
 
-const DEFAULT_CONTAINER_CLASS = 'rounded border bg-muted/20 p-3'
+const DEFAULT_CONTAINER_CLASS = 'rounded border bg-muted/30 p-3'
 const DEFAULT_TRIGGER_CLASS =
   'h-8 w-8 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100'
 

package/src/modules/customers/components/detail/InlineEditors.tsx

@@ -563,8 +563,8 @@ export function InlineNextInteractionEditor({
               <input
                 type="datetime-local"
                 className={cn(
-                  'w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring',
-                  dateError ? 'border-destructive focus:border-destructive focus:ring-destructive/40' : null,
+                  'w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                  dateError ? 'border-destructive aria-invalid:border-destructive aria-invalid:ring-destructive' : null,
                 )}
                 value={draftDate}
                 aria-invalid={dateError ? 'true' : undefined}
@@ -584,8 +584,8 @@ export function InlineNextInteractionEditor({
               <input
                 placeholder={t('customers.people.detail.inline.nextInteractionName')}
                 className={cn(
-                  'w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring',
-                  nameError ? 'border-destructive focus:border-destructive focus:ring-destructive/40' : null,
+                  'w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                  nameError ? 'border-destructive aria-invalid:border-destructive aria-invalid:ring-destructive' : null,
                 )}
                 value={draftName}
                 aria-invalid={nameError ? 'true' : undefined}
@@ -604,7 +604,7 @@ export function InlineNextInteractionEditor({
               ) : null}
               <input
                 placeholder={t('customers.people.detail.inline.nextInteractionRef')}
-                className="w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                className="w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                 value={draftRefId}
                 onChange={(event) => {
                   if (submitError) setSubmitError(null)

package/src/modules/customers/components/detail/TasksSection.tsx

@@ -458,7 +458,7 @@ export function TasksSection({
               const checkboxId = `person-task-${task.id}`
               const isPendingToggle = pendingTaskId === task.todoId
               return (
-                <article key={task.id} className="group space-y-3 rounded-lg border bg-card p-4 transition hover:border-border/80">
+                <article key={task.id} className="group space-y-3 rounded-lg border bg-card p-4 transition hover:border-border/70">
                   <div className="flex flex-wrap items-start justify-between gap-3">
                     <TimelineItemHeader
                       title={

package/src/modules/customers/components/detail/TimelineItemHeader.tsx

@@ -65,7 +65,7 @@ export function TimelineItemHeader({
       {icon ? (
         <span
           className={cn(
-            'inline-flex items-center justify-center rounded border border-border bg-muted/40',
+            'inline-flex items-center justify-center rounded border border-border bg-muted/50',
             wrapperSize,
           )}
         >

package/src/modules/customers/components/formConfig.tsx

@@ -595,7 +595,7 @@ export function CompanySelectField({ value, onChange, labels }: CompanySelectFie
               <div className="space-y-1">
                 <label className="text-sm font-medium">{labels.inputLabel}</label>
                 <input
-                  className="w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                  className="w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                   placeholder={labels.inputPlaceholder}
                   value={newCompany}
                   onChange={(event) => {
@@ -758,7 +758,7 @@ export const createDisplayNameSection = (t: Translator) =>
             {editing ? (
               <div className="mt-2 space-y-2">
                 <input
-                  className="w-full rounded-md border px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+                  className="w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                   value={currentValue}
                   onChange={handleChange}
                   placeholder={t('customers.people.form.displayName.placeholder')}

package/src/modules/customers/widgets/dashboard/customer-todos/widget.client.tsx

@@ -137,7 +137,7 @@ const CustomerTodosWidget: React.FC<DashboardWidgetComponentProps<CustomerTodoWi
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             value={hydrated.pageSize}
             onChange={(event) => {
               const next = Number(event.target.value)

package/src/modules/customers/widgets/dashboard/new-customers/widget.client.tsx

@@ -126,7 +126,7 @@ const CustomerNewCustomersWidget: React.FC<DashboardWidgetComponentProps<Custome
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             value={hydrated.pageSize}
             onChange={(event) => {
               const next = Number(event.target.value)
@@ -140,7 +140,7 @@ const CustomerNewCustomersWidget: React.FC<DashboardWidgetComponentProps<Custome
           </label>
           <select
             id="customer-new-customers-kind"
-            className="w-full rounded-md border px-2 py-1 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            className="w-full rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             value={hydrated.kind}
             onChange={(event) => {
               const value = event.target.value

package/src/modules/customers/widgets/dashboard/new-deals/widget.client.tsx

@@ -109,7 +109,7 @@ const CustomerNewDealsWidget: React.FC<DashboardWidgetComponentProps<CustomerNew
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             value={hydrated.pageSize}
             onChange={(event) => {
               const next = Number(event.target.value)

package/src/modules/customers/widgets/dashboard/next-interactions/widget.client.tsx

@@ -141,7 +141,7 @@ const CustomerNextInteractionsWidget: React.FC<DashboardWidgetComponentProps<Cus
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             value={hydrated.pageSize}
             onChange={(event) => {
               const next = Number(event.target.value)

package/src/modules/dashboards/components/WidgetVisibilityEditor.tsx

@@ -304,7 +304,7 @@ export const WidgetVisibilityEditor = React.forwardRef<WidgetVisibilityEditorHan
       )}
 
       {kind === 'user' && mode === 'inherit' && (
-        <div className="rounded-md border border-muted bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
+        <div className="rounded-md border border-muted bg-muted/30 px-3 py-2 text-xs text-muted-foreground">
           {t('dashboards.widgets.mode.hint', 'This user currently inherits widgets from their assigned roles. Switch to override to customize.')}
         </div>
       )}

package/src/modules/dashboards/widgets/dashboard/aov-kpi/widget.client.tsx

@@ -100,7 +100,7 @@ const AovKpiWidget: React.FC<DashboardWidgetComponentProps<AovKpiSettings>> = ({
               type="checkbox"
               checked={hydrated.showComparison}
               onChange={(e) => onSettingsChange({ ...hydrated, showComparison: e.target.checked })}
-              className="h-4 w-4 rounded border focus:ring-primary"
+              className="h-4 w-4 rounded border focus-visible:ring-ring"
             />
             {t('dashboards.analytics.settings.showComparison', 'Show comparison')}
           </label>

package/src/modules/dashboards/widgets/dashboard/new-customers-kpi/widget.client.tsx

@@ -99,7 +99,7 @@ const NewCustomersKpiWidget: React.FC<DashboardWidgetComponentProps<NewCustomers
               type="checkbox"
               checked={hydrated.showComparison}
               onChange={(e) => onSettingsChange({ ...hydrated, showComparison: e.target.checked })}
-              className="h-4 w-4 rounded border focus:ring-primary"
+              className="h-4 w-4 rounded border focus-visible:ring-ring"
             />
             {t('dashboards.analytics.settings.showComparison', 'Show comparison')}
           </label>

package/src/modules/dashboards/widgets/dashboard/orders-by-status/widget.client.tsx

@@ -117,7 +117,7 @@ const OrdersByStatusWidget: React.FC<DashboardWidgetComponentProps<OrdersByStatu
           </label>
           <select
             id="orders-by-status-variant"
-            className="w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            className="w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             value={hydrated.variant}
             onChange={(e) => onSettingsChange({ ...hydrated, variant: e.target.value as 'pie' | 'donut' })}
           >

package/src/modules/dashboards/widgets/dashboard/orders-kpi/widget.client.tsx

@@ -99,7 +99,7 @@ const OrdersKpiWidget: React.FC<DashboardWidgetComponentProps<OrdersKpiSettings>
               type="checkbox"
               checked={hydrated.showComparison}
               onChange={(e) => onSettingsChange({ ...hydrated, showComparison: e.target.checked })}
-              className="h-4 w-4 rounded border focus:ring-primary"
+              className="h-4 w-4 rounded border focus-visible:ring-ring"
             />
             {t('dashboards.analytics.settings.showComparison', 'Show comparison')}
           </label>

package/src/modules/dashboards/widgets/dashboard/revenue-kpi/widget.client.tsx

@@ -100,7 +100,7 @@ const RevenueKpiWidget: React.FC<DashboardWidgetComponentProps<RevenueKpiSetting
               type="checkbox"
               checked={hydrated.showComparison}
               onChange={(e) => onSettingsChange({ ...hydrated, showComparison: e.target.checked })}
-              className="h-4 w-4 rounded border focus:ring-primary"
+              className="h-4 w-4 rounded border focus-visible:ring-ring"
             />
             {t('dashboards.analytics.settings.showComparison', 'Show comparison')}
           </label>

package/src/modules/dashboards/widgets/dashboard/revenue-trend/widget.client.tsx

@@ -165,7 +165,7 @@ const RevenueTrendWidget: React.FC<DashboardWidgetComponentProps<RevenueTrendSet
           </label>
           <select
             id="revenue-trend-granularity"
-            className="w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            className="w-full rounded-md border bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             value={hydrated.granularity}
             onChange={(e) => onSettingsChange({ ...hydrated, granularity: e.target.value as DateGranularity })}
           >
@@ -182,7 +182,7 @@ const RevenueTrendWidget: React.FC<DashboardWidgetComponentProps<RevenueTrendSet
               type="checkbox"
               checked={hydrated.showArea}
               onChange={(e) => onSettingsChange({ ...hydrated, showArea: e.target.checked })}
-              className="h-4 w-4 rounded border focus:ring-primary"
+              className="h-4 w-4 rounded border focus-visible:ring-ring"
             />
             {t('dashboards.analytics.settings.showArea', 'Show area fill')}
           </label>

package/src/modules/dashboards/widgets/dashboard/sales-by-region/widget.client.tsx

@@ -99,7 +99,7 @@ const SalesByRegionWidget: React.FC<DashboardWidgetComponentProps<SalesByRegionS
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+            className="w-24 rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
             value={hydrated.limit}
             onChange={(e) => {
               const next = Number(e.target.value)