@open-mercato/ui 0.5.1-develop.2856.35de414092 → 0.5.1-develop.2874.77704bccbd

package/src/backend/AppShell.tsx

@@ -6,6 +6,7 @@ import Image from 'next/image'
 import { ChevronUp, ChevronDown } from 'lucide-react'
 import { Button } from '../primitives/button'
 import { IconButton } from '../primitives/icon-button'
+import { Checkbox } from '../primitives/checkbox'
 import { Separator } from '../primitives/separator'
 import { FlashMessages } from './FlashMessages'
 import { QueryProvider } from '../theme/QueryProvider'
@@ -753,7 +754,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
 
   const asideWidth = effectiveCollapsed ? '72px' : expandedSidebarWidth
   // Use min-h-svh so the border extends with tall content; no overflow so sticky bottom works
-  const asideClassesBase = `border-r bg-background/60 py-4 min-h-svh`;
+  const asideClassesBase = `border-r bg-background/80 py-4 min-h-svh`;
 
   // Persist collapse state to localStorage and cookie
   React.useEffect(() => {
@@ -932,18 +933,18 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
           ) : null}
           <div className="flex flex-1 flex-col gap-3 pr-1">
             <div className="space-y-3">
-              <div className="h-8 rounded bg-muted/60" />
+              <div className="h-8 rounded bg-muted/50" />
               <div className="space-y-2 pl-1">
                 <div className="h-8 rounded bg-muted/50" />
-                <div className="h-8 rounded bg-muted/40" />
-                <div className="h-8 rounded bg-muted/40" />
+                <div className="h-8 rounded bg-muted/50" />
+                <div className="h-8 rounded bg-muted/50" />
               </div>
             </div>
             <div className="space-y-3">
-              <div className="h-8 rounded bg-muted/60" />
+              <div className="h-8 rounded bg-muted/50" />
               <div className="space-y-2 pl-1">
-                <div className="h-8 rounded bg-muted/40" />
-                <div className="h-8 rounded bg-muted/40" />
+                <div className="h-8 rounded bg-muted/50" />
+                <div className="h-8 rounded bg-muted/50" />
               </div>
             </div>
           </div>
@@ -1015,11 +1016,9 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
           >
             <span className="text-xs font-medium text-muted-foreground">{placeholder}</span>
             <div className="flex items-center gap-2">
-              <input
-                type="checkbox"
-                className="h-4 w-4 accent-foreground"
+              <Checkbox
                 checked={!hidden}
-                onChange={(event) => setItemHidden(itemKey, !event.target.checked)}
+                onCheckedChange={(next) => setItemHidden(itemKey, next !== true)}
                 disabled={savingPreferences}
                 aria-label={t('appShell.sidebarCustomizationShowItem')}
                 title={t('appShell.sidebarCustomizationShowItem')}
@@ -1029,7 +1028,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
                 onChange={(event) => setItemLabel(itemKey, event.target.value)}
                 placeholder={placeholder}
                 disabled={savingPreferences}
-                className="h-8 flex-1 rounded border bg-background px-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-60"
+                className="h-8 flex-1 rounded border bg-background px-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
               />
             </div>
             {baseItem.children && baseItem.children.length > 0 ? (
@@ -1044,7 +1043,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
 
     const customizationEditor = customizing ? (
       customDraft ? (
-        <div className="flex flex-col gap-3 rounded border border-dashed bg-muted/20 p-3">
+        <div className="flex flex-col gap-3 rounded border border-dashed bg-muted/30 p-3">
           <div className="flex flex-wrap items-center justify-between gap-2">
             <div className="text-sm font-semibold">{t('appShell.sidebarCustomizationHeading')}</div>
             <div className="flex items-center gap-2">
@@ -1076,7 +1075,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
           </div>
           <p className="text-xs text-muted-foreground">{t('appShell.sidebarCustomizationHint', { locale: localeLabel })}</p>
           {canApplyToRoles ? (
-            <div className="flex flex-col gap-2 rounded border bg-background/70 p-3 shadow-sm">
+            <div className="flex flex-col gap-2 rounded border bg-background/80 p-3 shadow-sm">
               <div>
                 <div className="text-sm font-semibold">{t('appShell.sidebarApplyToRolesTitle')}</div>
                 <p className="text-xs text-muted-foreground">{t('appShell.sidebarApplyToRolesDescription')}</p>
@@ -1087,12 +1086,10 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
                     const checked = selectedRoleIds.includes(role.id)
                     const willClear = role.hasPreference && !checked
                     return (
-                      <label key={role.id} className="flex items-center gap-2 rounded border bg-background px-2 py-1 text-sm shadow-sm">
-                        <input
-                          type="checkbox"
-                          className="h-4 w-4 accent-foreground"
+                      <label key={role.id} className="flex items-center gap-2 rounded-md border bg-background px-2 py-1 text-sm shadow-sm cursor-pointer">
+                        <Checkbox
                           checked={checked}
-                          onChange={() => toggleRoleSelection(role.id)}
+                          onCheckedChange={() => toggleRoleSelection(role.id)}
                           disabled={savingPreferences}
                         />
                         <span className="flex-1 truncate">{role.name}</span>
@@ -1128,7 +1125,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
                         onChange={(event) => setGroupLabel(groupId, event.target.value)}
                         placeholder={placeholder}
                         disabled={savingPreferences}
-                        className="mt-1 h-8 w-full rounded border bg-background px-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-ring disabled:opacity-60"
+                        className="mt-1 h-8 w-full rounded border bg-background px-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
                       />
                     </div>
                     <div className="flex items-center gap-1 self-start">
@@ -1163,7 +1160,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
           </div>
         </div>
       ) : (
-        <div className="rounded border border-dashed bg-muted/20 p-3 text-sm text-muted-foreground">
+        <div className="rounded border border-dashed bg-muted/30 p-3 text-sm text-muted-foreground">
           {t('appShell.sidebarCustomizationLoading')}
         </div>
       )
@@ -1320,7 +1317,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
             })()
           )}
         </div>
-        <div className="sticky bottom-0 pt-4 border-t bg-background/60 backdrop-blur-sm pb-1">
+        <div className="sticky bottom-0 pt-4 border-t bg-background/80 backdrop-blur-sm pb-1">
           {shouldRenderSidebarInjectionSpots ? (
             <InjectionSpot
               spotId={BACKEND_SIDEBAR_NAV_FOOTER_INJECTION_SPOT_ID}
@@ -1440,7 +1437,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
       <aside className={`${asideClassesBase} ${effectiveCollapsed ? 'px-2' : 'px-3'} hidden lg:block`} style={{ width: asideWidth }}>{renderSidebar(effectiveCollapsed)}</aside>
 
       <div className="flex min-h-svh flex-col min-w-0">
-        <header className="border-b bg-background/60 px-3 lg:px-4 py-2 lg:py-3 flex items-center justify-between gap-2">
+        <header className="border-b bg-background/80 px-3 lg:px-4 py-2 lg:py-3 flex items-center justify-between gap-2">
           <div
             data-testid="backend-chrome-ready"
             data-ready={isChromeReady ? 'true' : 'false'}
@@ -1518,8 +1515,8 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
             )}
           </div>
         </header>
-        <ProgressTopBar t={t} className="sticky top-0 z-10" />
-        <main className="flex-1 p-4 lg:p-6">
+        <ProgressTopBar t={t} className="sticky top-0 z-sticky" />
+        <main className="flex-1 p-4 lg:p-6 mx-auto w-full max-w-screen-2xl">
           <InjectionSpot spotId={BACKEND_LAYOUT_TOP_INJECTION_SPOT_ID} context={injectionContext} />
           <FlashMessages />
           <PartialIndexBanner />
@@ -1534,7 +1531,7 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
           {children}
           <InjectionSpot spotId={BACKEND_LAYOUT_FOOTER_INJECTION_SPOT_ID} context={injectionContext} />
         </main>
-        <footer className="border-t bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/50 px-4 py-3 flex flex-wrap items-center justify-end gap-4">
+        <footer className="border-t bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/80 px-4 py-3 flex flex-wrap items-center justify-end gap-4">
           {version ? (
             <span className="text-xs text-muted-foreground">
               {t('appShell.version', { version })}
@@ -1553,8 +1550,8 @@ function AppShellBody({ productName, logo, email, groups, rightHeaderSlot, child
 
       {/* Mobile drawer */}
       {mobileOpen && (
-        <div className="lg:hidden fixed inset-0 z-50">
-          <div className="absolute inset-0 bg-black/40" onClick={() => setMobileOpen(false)} aria-hidden="true" />
+        <div className="lg:hidden fixed inset-0 z-modal">
+          <div className="absolute inset-0 bg-black/20" onClick={() => setMobileOpen(false)} aria-hidden="true" />
           <aside className="absolute left-0 top-0 flex h-full w-[260px] flex-col bg-background border-r overflow-hidden">
             <div className="shrink-0 p-3 pb-2 flex items-center justify-between border-b">
               <Link href="/backend" className="flex items-center gap-2 text-sm font-semibold" onClick={() => setMobileOpen(false)} aria-label={t('appShell.goToDashboard')}>

package/src/backend/ContextHelp.tsx

@@ -21,7 +21,7 @@ export function ContextHelp({ title, children, defaultOpen = false, bulb = true,
       <Button
         type="button"
         variant="ghost"
-        className="w-full justify-start gap-2 px-4 py-3 text-left hover:bg-accent/40"
+        className="w-full justify-start gap-2 px-4 py-3 text-left hover:bg-accent/50"
         aria-expanded={open}
         onClick={() => setOpen(v => !v)}
       >

package/src/backend/CrudForm.tsx

@@ -7,6 +7,7 @@ import { DndContext, closestCenter, PointerSensor, KeyboardSensor, useSensor, us
 import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
 import { DataLoader } from '../primitives/DataLoader'
+import { Checkbox } from '../primitives/checkbox'
 import { flash } from './FlashMessages'
 import dynamic from 'next/dynamic'
 import { FormHeader } from './forms/FormHeader'
@@ -1733,7 +1734,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
     const text = t('entities.customFields.empty')
     const action = t('entities.customFields.addFirst')
     return (
-      <div className="rounded-md border border-dashed border-muted-foreground/50 bg-muted/10 px-3 py-4 text-sm text-muted-foreground">
+      <div className="rounded-md border border-dashed border-muted-foreground/50 bg-muted/30 px-3 py-4 text-sm text-muted-foreground">
         <span>{text} </span>
         {customFieldsManageHref ? (
           <Link href={customFieldsManageHref} className="font-medium text-primary hover:underline">
@@ -2773,7 +2774,7 @@ export function CrudForm<TValues extends Record<string, unknown>>({
         <div className="pointer-events-none select-none opacity-70">
           {children}
         </div>
-        <div className="absolute inset-0 z-10 flex items-start justify-center rounded-lg bg-background/60 p-4 backdrop-blur-[1px] sm:p-6">
+        <div className="absolute inset-0 z-10 flex items-start justify-center rounded-lg bg-background/80 p-4 backdrop-blur-[1px] sm:p-6">
           {readOnlyOverlay ?? <div className="rounded-xl border border-border/70 bg-background/95 px-4 py-3 shadow-sm" />}
         </div>
       </div>
@@ -3558,7 +3559,7 @@ const HtmlRichTextEditor = React.memo(function HtmlRichTextEditor({ value = '',
       </div>
       <div
         ref={ref}
-        className="w-full px-2 py-2 min-h-[100px] sm:min-h-[160px] focus:outline-none prose prose-sm max-w-none"
+        className="w-full px-2 py-2 min-h-[100px] sm:min-h-[160px] focus-visible:outline-none prose prose-sm max-w-none"
         contentEditable
         suppressContentEditableWarning
         onKeyDown={onKeyDown}
@@ -3725,7 +3726,7 @@ const ListboxMultiSelect = React.memo(function ListboxMultiSelect({
               className={`w-full justify-start rounded-none font-normal px-3 py-2 ${isSel ? 'bg-muted' : ''}`}
             >
               <span className="inline-flex items-center gap-2">
-                <input type="checkbox" className="size-4" readOnly checked={isSel} />
+                <Checkbox checked={isSel} disabled tabIndex={-1} className="pointer-events-none" />
                 <span>{opt.label}</span>
               </span>
             </Button>
@@ -3945,12 +3946,10 @@ const FieldControl = React.memo(function FieldControlImpl({
         />
       )}
       {field.type === 'checkbox' && (
-        <label className="inline-flex items-center gap-2">
-          <input
-            type="checkbox"
-            className="size-4"
+        <label className="inline-flex items-center gap-2 cursor-pointer">
+          <Checkbox
             checked={value === true}
-            onChange={(e) => setValue(field.id, e.target.checked)}
+            onCheckedChange={(next) => setValue(field.id, next === true)}
             data-crud-focus-target=""
             disabled={disabled}
           />
@@ -3996,14 +3995,12 @@ const FieldControl = React.memo(function FieldControlImpl({
               : []
             const checked = arr.includes(opt.value)
             return (
-              <label key={opt.value} className="inline-flex items-center gap-2">
-                <input
-                  type="checkbox"
-                  className="size-4"
+              <label key={opt.value} className="inline-flex items-center gap-2 cursor-pointer">
+                <Checkbox
                   checked={checked}
-                  onChange={(e) => {
+                  onCheckedChange={(state) => {
                     const next = new Set(arr)
-                    if (e.target.checked) {
+                    if (state === true) {
                       next.add(opt.value)
                     } else {
                       next.delete(opt.value)

package/src/backend/DataTable.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { useRouter } from 'next/navigation'
 import { useReactTable, getCoreRowModel, getSortedRowModel, flexRender, type ColumnDef, type SortingState, type Column as TableColumn, type VisibilityState, type RowSelectionState } from '@tanstack/react-table'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
-import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter, ChevronDown, Check } from 'lucide-react'
+import { RefreshCw, Loader2, SlidersHorizontal, MoreHorizontal, Circle, Filter, Columns3, ChevronUp, ChevronDown, ChevronsUpDown, Check } from 'lucide-react'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../primitives/table'
 import { Button } from '../primitives/button'
 import { Checkbox } from '../primitives/checkbox'
@@ -628,7 +628,6 @@ function ExportMenu({ config, sections }: { config: DataTableExportConfig; secti
       <Button
         ref={buttonRef}
         variant="outline"
-        size="sm"
         type="button"
         onClick={() => {
           if (disabled) return
@@ -644,7 +643,7 @@ function ExportMenu({ config, sections }: { config: DataTableExportConfig; secti
         <div
           ref={menuRef}
           role="menu"
-          className="absolute right-0 mt-2 w-60 rounded-md border bg-background py-2 shadow z-20"
+          className="absolute right-0 mt-2 w-60 rounded-md border bg-background py-2 shadow z-dropdown"
         >
           {sections.map((section, idx) => (
             <div key={section.key} className={idx > 0 ? 'mt-2 border-t pt-3' : ''}>
@@ -2135,7 +2134,6 @@ export function DataTable<T>({
             <Button
               key={action.id}
               type="button"
-              size="sm"
               variant="outline"
               title={label}
               aria-label={label}
@@ -2154,7 +2152,6 @@ export function DataTable<T>({
             <Button
               key={action.id}
               type="button"
-              size="sm"
               variant={action.destructive ? 'destructive' : 'outline'}
               onClick={() => void runPropBulkAction(action)}
             >
@@ -2308,7 +2305,7 @@ export function DataTable<T>({
                     >
                       <Filter className="h-4 w-4" />
                       {advancedFilter.value.conditions.length > 0 ? (
-                        <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground">
+                        <span className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-overline text-primary-foreground">
                           {advancedFilter.value.conditions.length}
                         </span>
                       ) : null}
@@ -2405,10 +2402,12 @@ export function DataTable<T>({
                     >
                       {flexRender(header.column.columnDef.header, header.getContext())}
                       {sortable && header.column.getCanSort?.() ? (
-                        <span className="ml-1 inline-flex flex-col text-[10px] leading-none gap-px">
-                          <span className={header.column.getIsSorted() === 'asc' ? 'text-foreground' : 'text-muted-foreground/40'}>▲</span>
-                          <span className={header.column.getIsSorted() === 'desc' ? 'text-foreground' : 'text-muted-foreground/40'}>▼</span>
-                        </span>
+                        (() => {
+                          const sortState = header.column.getIsSorted()
+                          if (sortState === 'asc') return <ChevronUp className="ml-1 size-3.5 shrink-0 text-foreground" aria-hidden="true" />
+                          if (sortState === 'desc') return <ChevronDown className="ml-1 size-3.5 shrink-0 text-foreground" aria-hidden="true" />
+                          return <ChevronsUpDown className="ml-1 size-3.5 shrink-0 text-muted-foreground/50" aria-hidden="true" />
+                        })()
                       ) : null}
                     </Button>
                   )

package/src/backend/FilterBar.tsx

@@ -1,5 +1,6 @@
 "use client"
 import * as React from 'react'
+import { ListFilter, Search } from 'lucide-react'
 import { Button } from '../primitives/button'
 import { FilterDef, FilterOverlay, FilterValues } from './FilterOverlay'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -72,22 +73,22 @@ export function FilterBar({
 
   const containerClass = `flex flex-col ${layout === 'inline' ? 'gap-1 sm:gap-2' : 'gap-2'} w-full`
   const searchInput = onSearchChange ? (
-    <div className={`relative w-full sm:w-auto sm:min-w-[180px] sm:max-w-[240px] ${searchAlign === 'right' ? 'sm:ml-auto' : ''}`}>
+    <div className={`relative w-full sm:w-72 lg:w-80 ${searchAlign === 'right' ? 'sm:ml-auto' : ''}`}>
       <input
         value={searchDraft}
         onChange={(e) => setSearchDraft(e.target.value)}
         placeholder={resolvedSearchPlaceholder}
-        className="h-9 w-full rounded border pl-8 pr-2 text-sm"
+        className="h-9 w-full rounded-md border border-input bg-background pl-8 pr-2 text-sm shadow-xs outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/50"
         suppressHydrationWarning
       />
-      <span className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground">🔍</span>
+      <Search aria-hidden="true" className="absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
     </div>
   ) : null
   const controls = (
     <div className={`flex flex-wrap items-center gap-2 ${searchAlign === 'left' && searchInput ? 'sm:ml-auto' : ''}`}>
       {filters.length > 0 && (
-        <Button variant="outline" className="h-9" onClick={() => setOpen(true)}>
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true" className="opacity-80"><path d="M3 4h18"/><path d="M6 8h12l-3 8H9L6 8z"/></svg>
+        <Button variant="outline" onClick={() => setOpen(true)}>
+          <ListFilter aria-hidden="true" className="size-4 opacity-80" />
           {activeCount
             ? t('ui.filterBar.filtersWithCount', 'Filters {count}', { count: activeCount })
             : t('ui.filterBar.filters', 'Filters')

package/src/backend/FilterOverlay.tsx

@@ -1,6 +1,7 @@
 "use client"
 import * as React from 'react'
 import { Button } from '../primitives/button'
+import { Checkbox } from '../primitives/checkbox'
 import { ComboboxInput } from './inputs/ComboboxInput'
 import { TagsInput, type TagsInputOption } from './inputs/TagsInput'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -190,8 +191,8 @@ export function FilterOverlay({
   return (
     <>
       {open && (
-        <div className="fixed inset-0 z-50">
-          <div className="absolute inset-0 bg-black/30" onClick={() => onOpenChange(false)} role="presentation" />
+        <div className="fixed inset-0 z-modal">
+          <div className="absolute inset-0 bg-black/20" onClick={() => onOpenChange(false)} role="presentation" />
           <div className="absolute left-0 top-0 h-full w-full sm:w-[380px] bg-background shadow-xl border-r flex flex-col">
             <div className="flex items-center justify-between p-4 border-b">
               <h2 className="text-base font-semibold">{defaultTitle}</h2>
@@ -249,15 +250,14 @@ export function FilterOverlay({
                             const arr: string[] = Array.isArray(values[f.id]) ? values[f.id] : []
                             const checked = arr.includes(opt.value)
                             return (
-                              <label key={opt.value} className="inline-flex items-center gap-2">
-                                <input
-                                  type="checkbox"
+                              <label key={opt.value} className="inline-flex items-center gap-2 cursor-pointer">
+                                <Checkbox
                                   checked={checked}
-                                  onChange={(e) => {
-                                    const next = new Set(arr)
-                                    if (e.target.checked) next.add(opt.value)
-                                    else next.delete(opt.value)
-                                    setValue(f.id, Array.from(next))
+                                  onCheckedChange={(next) => {
+                                    const set = new Set(arr)
+                                    if (next === true) set.add(opt.value)
+                                    else set.delete(opt.value)
+                                    setValue(f.id, Array.from(set))
                                   }}
                                 />
                                 <span className="text-sm">{opt.label}</span>

package/src/backend/FlashMessages.tsx

@@ -152,7 +152,7 @@ function FlashMessagesInner() {
   const color = colorMap[kind]
 
   return (
-    <div className="pointer-events-none fixed left-3 right-3 top-3 z-[1200] sm:left-auto sm:right-4 sm:w-[380px]">
+    <div className="pointer-events-none fixed left-3 right-3 top-3 z-toast sm:left-auto sm:right-4 sm:w-[380px]">
       <div className={`pointer-events-auto rounded px-3 py-2 text-white shadow-md ${color}`}>
         <div className="flex items-center justify-between gap-2">
           <div className="text-sm">{msg}</div>

package/src/backend/JsonBuilder.tsx

@@ -117,7 +117,7 @@ export function JsonBuilder({
                             } catch { }
                         }}
                         placeholder='{"key": "value"}'
-                        className="w-full rounded border px-3 py-2 min-h-[300px] text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        className="w-full rounded border px-3 py-2 min-h-[300px] text-sm font-mono focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                         disabled={disabled}
                     />
                     {parseError && (
@@ -242,7 +242,7 @@ function JsonNode({ data, onChange, onDelete, readOnly, label, isRoot }: JsonNod
                         <select
                             value={type}
                             onChange={(e) => handleTypeChange(e.target.value as JsonNodeType)}
-                            className="text-xs border rounded px-1 py-0.5 bg-muted text-foreground focus:ring-1 focus:ring-blue-500"
+                            className="text-xs border rounded px-1 py-0.5 bg-muted text-foreground focus-visible:ring-1 focus-visible:ring-ring"
                         >
                             <option value="string">String</option>
                             <option value="number">Number</option>
@@ -255,7 +255,7 @@ function JsonNode({ data, onChange, onDelete, readOnly, label, isRoot }: JsonNod
 
                     {type === 'string' && (
                         <input
-                            className="flex-1 min-w-0 sm:min-w-[120px] text-sm border rounded px-2 py-0.5 focus:outline-none focus:border-blue-500"
+                            className="flex-1 min-w-0 sm:min-w-[120px] text-sm border rounded px-2 py-0.5 focus-visible:outline-none focus-visible:border-ring"
                             value={data}
                             onChange={e => onChange(e.target.value)}
                             disabled={readOnly}
@@ -264,7 +264,7 @@ function JsonNode({ data, onChange, onDelete, readOnly, label, isRoot }: JsonNod
                     {type === 'number' && (
                         <input
                             type="number"
-                            className="flex-1 w-full sm:w-[100px] text-sm border rounded px-2 py-0.5 focus:outline-none focus:border-blue-500"
+                            className="flex-1 w-full sm:w-[100px] text-sm border rounded px-2 py-0.5 focus-visible:outline-none focus-visible:border-ring"
                             value={data}
                             onChange={e => onChange(parseFloat(e.target.value) || 0)}
                             disabled={readOnly}
@@ -272,7 +272,7 @@ function JsonNode({ data, onChange, onDelete, readOnly, label, isRoot }: JsonNod
                     )}
                     {type === 'boolean' && (
                         <select
-                            className="flex-1 w-full sm:w-[100px] text-sm border rounded px-2 py-0.5 focus:outline-none focus:border-blue-500"
+                            className="flex-1 w-full sm:w-[100px] text-sm border rounded px-2 py-0.5 focus-visible:outline-none focus-visible:border-ring"
                             value={String(data)}
                             onChange={e => onChange(e.target.value === 'true')}
                             disabled={readOnly}
@@ -310,7 +310,7 @@ function JsonNode({ data, onChange, onDelete, readOnly, label, isRoot }: JsonNod
                             <div className="pt-2">
                                 {/* Key Renamer */}
                                 <input
-                                    className="w-full sm:w-[100px] text-xs font-mono border-b border-transparent hover:border-gray-300 focus:border-blue-500 bg-transparent focus:outline-none text-right pr-1"
+                                    className="w-full sm:w-[100px] text-xs font-mono border-b border-transparent hover:border-gray-300 focus-visible:border-ring bg-transparent focus-visible:outline-none text-right pr-1"
                                     value={key}
                                     onChange={(e) => handleKeyRename(key, e.target.value)}
                                     disabled={readOnly}

package/src/backend/NextStepCallout.tsx

@@ -46,7 +46,7 @@ const STEP_STYLES: Record<NonNullable<NextStepCalloutStep['state']>, string> = {
 }
 
 const STATUS_STYLES: Record<NextStepCalloutStatusTone, string> = {
-  default: 'border-border bg-background/70 text-foreground',
+  default: 'border-border bg-background/80 text-foreground',
   info: 'border-primary/20 bg-primary/5 text-primary',
   success: 'border-emerald-500/20 bg-emerald-500/5 text-emerald-200',
   warning: 'border-amber-500/20 bg-amber-500/5 text-amber-200',

package/src/backend/PerspectiveSidebar.tsx

@@ -352,8 +352,8 @@ export function PerspectiveSidebar({
   const isShare = mode.type === 'share'
 
   return (
-    <div className="fixed inset-0 z-50">
-      <div className="absolute inset-0 bg-black/30" onClick={() => onOpenChange(false)} role="presentation" />
+    <div className="fixed inset-0 z-modal">
+      <div className="absolute inset-0 bg-black/20" onClick={() => onOpenChange(false)} role="presentation" />
       <div className="fixed right-0 top-0 h-full w-full sm:w-80 bg-background shadow-xl border-l flex flex-col">
         <div className="flex items-center p-4 border-b">
           <Button

package/src/backend/ProfileDropdown.tsx

@@ -321,7 +321,7 @@ export function ProfileDropdown({
       {open && (
         <div
           ref={menuRef}
-          className="absolute right-0 top-full mt-1 w-56 rounded-md border bg-background p-1 shadow-lg z-50"
+          className="absolute right-0 top-full mt-1 w-56 rounded-md border bg-background p-1 shadow-lg z-dropdown"
           role="menu"
           data-testid="profile-dropdown"
         >

package/src/backend/RowActions.tsx

@@ -109,7 +109,7 @@ export function RowActions({ items = [] }: { items?: RowActionItem[] }) {
         <div
           ref={menuRef}
           role="menu"
-          className="fixed w-44 max-w-[calc(100vw-1rem)] rounded-md border bg-background p-1 shadow focus:outline-none z-[1000]"
+          className="fixed w-44 max-w-[calc(100vw-1rem)] rounded-md border bg-background p-1 shadow focus-visible:outline-none z-dropdown"
           style={{
             top: direction === 'down' ? anchorRect.bottom + 8 : anchorRect.top - 8,
             left: Math.min(anchorRect.right, window.innerWidth - 8),

package/src/backend/UserMenu.tsx

@@ -88,7 +88,7 @@ export function UserMenu({ email }: { email?: string }) {
         <div
           ref={menuRef}
           id="user-menu-dropdown"
-          className="absolute right-0 top-full mt-0 w-56 rounded-md border bg-background p-1 shadow z-50"
+          className="absolute right-0 top-full mt-0 w-56 rounded-md border bg-background p-1 shadow z-dropdown"
           role="menu"
           aria-labelledby="user-menu-button"
           tabIndex={-1}
@@ -102,7 +102,7 @@ export function UserMenu({ email }: { email?: string }) {
           <Link
             ref={profileButtonRef}
             href="/backend/profile/change-password"
-            className="w-full text-left text-sm px-2 py-1 rounded hover:bg-accent inline-flex items-center gap-2 outline-none focus:outline-none focus-visible:outline-none ring-0 focus:ring-0 focus-visible:ring-0"
+            className="w-full text-left text-sm px-2 py-1 rounded hover:bg-accent inline-flex items-center gap-2 outline-none focus-visible:outline-none focus-visible:outline-none ring-0 focus-visible:ring-0 focus-visible:ring-0"
             role="menuitem"
             tabIndex={0}
             onClick={() => setOpen(false)}

package/src/backend/WebhookSetupGuide.tsx

@@ -46,7 +46,7 @@ export function WebhookSetupGuide({
       </Button>
 
       {isOpen ? (
-        <div className="space-y-4 rounded-lg border bg-muted/20 p-4">
+        <div className="space-y-4 rounded-lg border bg-muted/30 p-4">
           <div className="space-y-1">
             <div className="flex items-center gap-2">
               <Webhook className="h-4 w-4 text-muted-foreground" />
@@ -56,16 +56,16 @@ export function WebhookSetupGuide({
           </div>
 
           <div className="space-y-2">
-            <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+            <p className="text-overline font-medium uppercase tracking-wide text-muted-foreground">
               {t('ui.webhookGuide.dashboardPath', 'Dashboard path')}
             </p>
-            <div className="rounded-md border bg-background/70 px-3 py-2 text-sm">
+            <div className="rounded-md border bg-background/80 px-3 py-2 text-sm">
               {guide.dashboardPathLabel}
             </div>
           </div>
 
           <div className="space-y-2">
-            <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+            <p className="text-overline font-medium uppercase tracking-wide text-muted-foreground">
               {t('ui.webhookGuide.steps', 'Setup steps')}
             </p>
             <ol className="list-decimal space-y-2 pl-5 text-sm text-muted-foreground">
@@ -76,22 +76,22 @@ export function WebhookSetupGuide({
           </div>
 
           <div className="space-y-2">
-            <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+            <p className="text-overline font-medium uppercase tracking-wide text-muted-foreground">
               {t('ui.webhookGuide.endpointUrl', 'Webhook endpoint URL')}
             </p>
-            <div className="rounded-md border bg-background/70 px-3 py-2 font-mono text-xs break-all">
+            <div className="rounded-md border bg-background/80 px-3 py-2 font-mono text-xs break-all">
               {endpointUrl}
             </div>
           </div>
 
           {guide.events && guide.events.length > 0 ? (
             <div className="space-y-2">
-              <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+              <p className="text-overline font-medium uppercase tracking-wide text-muted-foreground">
                 {t('ui.webhookGuide.recommendedEvents', 'Recommended events')}
               </p>
               <div className="flex flex-wrap gap-2">
                 {guide.events.map((eventName) => (
-                  <Badge key={eventName} variant="outline" className="font-mono text-[11px]">
+                  <Badge key={eventName} variant="outline" className="font-mono text-overline">
                     {eventName}
                   </Badge>
                 ))}
@@ -101,16 +101,16 @@ export function WebhookSetupGuide({
 
           {guide.localDevelopment ? (
             <div className="space-y-3">
-              <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+              <p className="text-overline font-medium uppercase tracking-wide text-muted-foreground">
                 {t('ui.webhookGuide.localDevelopment', 'Local development')}
               </p>
               {guide.localDevelopment.note ? (
                 <p className="text-sm text-muted-foreground">{guide.localDevelopment.note}</p>
               ) : null}
-              <div className="rounded-md border bg-background/70 px-3 py-2 font-mono text-xs">
+              <div className="rounded-md border bg-background/80 px-3 py-2 font-mono text-xs">
                 {guide.localDevelopment.tunnelCommand}
               </div>
-              <div className="rounded-md border bg-background/70 px-3 py-2 font-mono text-xs break-all">
+              <div className="rounded-md border bg-background/80 px-3 py-2 font-mono text-xs break-all">
                 {guide.localDevelopment.publicUrlExample}
               </div>
             </div>

package/src/backend/charts/KpiCard.tsx

@@ -46,9 +46,9 @@ function BadgeDelta({ direction, value }: BadgeDeltaProps) {
   const baseClasses = 'inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium'
 
   const directionClasses = {
-    up: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400',
-    down: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
-    unchanged: 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400',
+    up: 'bg-status-success-bg text-status-success-text',
+    down: 'bg-status-error-bg text-status-error-text',
+    unchanged: 'bg-status-neutral-bg text-status-neutral-text',
   }
 
   const icons = {

package/src/backend/columns/ColumnChooserPanel.tsx

@@ -276,7 +276,7 @@ export function ColumnChooserPanel({
   }, [open])
   if (!open) return null
   return (
-    <div className="fixed inset-y-0 right-0 z-50 w-80 border-l bg-background shadow-lg flex flex-col">
+    <div className="fixed inset-y-0 right-0 z-modal w-80 border-l bg-background shadow-lg flex flex-col">
       <div className="flex items-center justify-between border-b px-4 py-3">
         <h3 className="font-semibold text-sm">
           {t('ui.columnChooser.title', 'Columns')}