From 043d9564ba11a3aa3e3b9e25482cdc77fdea6385 Mon Sep 17 00:00:00 2001 From: Jason Staack Date: Sat, 21 Mar 2026 11:45:27 -0500 Subject: [PATCH 01/30] feat(ui): replace Deep Space tokens with Warm Precision v3.1 Co-Authored-By: Claude Opus 4.6 (1M context) --- frontend/src/index.css | 166 ++++++++++++++++++++--------------------- 1 file changed, 83 insertions(+), 83 deletions(-) diff --git a/frontend/src/index.css b/frontend/src/index.css index b683c09..90eb620 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -26,121 +26,118 @@ @tailwind components; @tailwind utilities; -@keyframes shimmer { - 0% { - background-position: -200% 0; - } - 100% { - background-position: 200% 0; - } -} - @layer base { :root { - /* ── Deep Space Light Mode ── */ - --background: 240 20% 99%; - --surface: 0 0% 100%; - --elevated: 240 33% 96%; - --border: 0 0% 0% / 0.08; - --border-bright: 240 14% 88%; + /* ── Warm Precision Light Mode ── */ + --background: 39 21% 89%; /* #eae7de */ + --sidebar: 36 16% 85%; /* #e0dcd2 */ + --panel: 40 24% 95%; /* #f6f4ec */ + --elevated: 39 22% 92%; /* #f0ede4 */ - --text-primary: 240 7% 7%; - --text-secondary: 249 14% 37%; - --text-muted: 249 11% 57%; + --border-subtle: 30 18% 13% / 0.06; + --border-default: 30 18% 13% / 0.12; - --accent: 239 76% 62%; - --accent-hover: 244 75% 58%; - --accent-muted: 239 76% 62% / 0.1; - --ring: 239 76% 62%; + --text-primary: 43 27% 8%; /* #1a1810 */ + --text-secondary: 40 10% 33%; /* #5e5a4e */ + --text-muted: 36 7% 50%; /* #8a8578 */ - --success: 142 71% 35%; - --warning: 32 95% 44%; - --error: 0 72% 51%; + --accent: 43 32% 40%; /* #8a7a48 */ + --accent-soft: 43 32% 40% / 0.10; + --ring: 43 32% 40%; + + --text-label: 36 7% 50%; /* same as text-muted in light */ + + --success: 140 35% 35%; /* #3a7a4a */ + --warning: 43 66% 36%; /* #9a7a20 */ + --error: 11 48% 44%; /* #a85040 */ --info: 217 91% 50%; - --online: 142 71% 35%; - --offline: 0 72% 51%; - --unknown: 249 11% 57%; + --online: 140 35% 35%; + --offline: 11 48% 44%; + --unknown: 36 7% 50%; - --chart-1: 239 76% 62%; - --chart-2: 142 71% 35%; - --chart-3: 32 95% 44%; - --chart-4: 0 72% 51%; - --chart-5: 280 68% 50%; - --chart-6: 217 91% 50%; + --alert-badge: 43 78% 30%; /* #8a6a10 */ - /* Sidebar */ - --sidebar: 210 40% 98%; + --chart-1: 43 32% 40%; + --chart-2: 140 35% 35%; + --chart-3: 43 66% 36%; + --chart-4: 11 48% 44%; + --chart-5: 280 30% 45%; + --chart-6: 217 50% 45%; - /* Functional tokens mapped to Tailwind names */ + /* Functional mappings */ --foreground: var(--text-primary); - --card: var(--surface); + --card: var(--panel); --card-foreground: var(--text-primary); - --popover: var(--surface); + --popover: var(--panel); --popover-foreground: var(--text-primary); --primary: var(--accent); - --primary-foreground: 0 0% 100%; + --primary-foreground: 40 24% 95%; --secondary: var(--elevated); --secondary-foreground: var(--text-primary); --muted: var(--elevated); --muted-foreground: var(--text-secondary); - --input: var(--border); + --input: var(--border-default); --destructive: var(--error); + --border: var(--border-default); - /* Border radius */ - --radius: 0.5rem; - - /* Content width */ + --radius: 0.125rem; + --radius-control: 0.25rem; --content-max: 1312px; - --sidebar-width: 13.5rem; + --sidebar-width: 172px; } .dark { - /* ── Deep Space Dark Mode ── */ - --background: 240 7% 7%; - --surface: 240 22% 10%; - --elevated: 240 28% 14%; - --border: 0 0% 100% / 0.06; - --border-bright: 240 24% 19%; + /* ── Warm Precision Dark Mode ── */ + --background: 40 14% 4%; /* #0c0b09 */ + --sidebar: 40 10% 7%; /* #141310 */ + --panel: 40 8% 9%; /* #1a1916 */ + --elevated: 40 7% 11%; /* #1e1d1a */ - --text-primary: 240 14% 91%; - --text-secondary: 249 9% 59%; - --text-muted: 249 13% 44%; + --border-subtle: 36 10% 65% / 0.06; + --border-default: 36 10% 65% / 0.10; - --accent: 235 91% 74%; - --accent-hover: 239 84% 67%; - --accent-muted: 239 84% 67% / 0.15; - --ring: 235 91% 74%; + --text-primary: 39 16% 78%; /* #d4ccb8 */ + --text-secondary: 36 7% 54%; /* #948e80 */ + --text-muted: 40 8% 33%; /* #5e5a50 */ - --success: 142 69% 58%; - --warning: 38 92% 50%; - --error: 0 84% 60%; - --info: 217 91% 60%; + --accent: 43 28% 47%; /* #9a8a58 */ + --accent-soft: 43 28% 47% / 0.10; + --ring: 43 28% 47%; - --online: 142 69% 58%; - --offline: 0 84% 60%; - --unknown: 249 9% 59%; + --text-label: 40 8% 27%; /* #4a4840 — section labels only */ - --chart-1: 235 91% 74%; - --chart-2: 142 69% 58%; - --chart-3: 38 92% 50%; - --chart-4: 0 84% 60%; - --chart-5: 280 68% 68%; - --chart-6: 217 91% 60%; + --success: 133 22% 45%; /* #5a8a62 */ + --warning: 38 54% 50%; /* #c49a3a */ + --error: 8 42% 53%; /* #c06050 */ + --info: 217 60% 60%; + + --online: 133 22% 45%; + --offline: 8 42% 53%; + --unknown: 36 7% 54%; + + --alert-badge: 43 56% 53%; /* #d4a43a */ + + --chart-1: 43 28% 47%; + --chart-2: 133 22% 45%; + --chart-3: 38 54% 50%; + --chart-4: 8 42% 53%; + --chart-5: 280 30% 55%; + --chart-6: 217 50% 55%; --foreground: var(--text-primary); - --card: var(--surface); + --card: var(--panel); --card-foreground: var(--text-primary); - --popover: var(--surface); + --popover: var(--panel); --popover-foreground: var(--text-primary); --primary: var(--accent); - --primary-foreground: 222 47% 11%; + --primary-foreground: 40 14% 4%; --secondary: var(--elevated); --secondary-foreground: var(--text-primary); - --muted: 217 33% 17% / 0.5; + --muted: var(--elevated); --muted-foreground: var(--text-secondary); - --input: var(--border); - --sidebar: 222 47% 11%; + --input: var(--border-default); + --border: var(--border-default); } @media (prefers-reduced-motion: reduce) { @@ -184,12 +181,15 @@ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: hsl(var(--elevated)); border-radius: 3px; } - ::-webkit-scrollbar-thumb:hover { background: hsl(var(--border-bright)); } + ::-webkit-scrollbar-thumb:hover { background: hsl(var(--text-muted)); } + + :root { + transition: background-color 100ms linear, color 100ms linear; + } - /* ── Deep Space transitions ── */ button, a, input, select, textarea, [role="button"], [role="tab"], [role="menuitem"] { - transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, opacity 150ms ease; + transition: background-color 50ms linear, border-color 50ms linear, color 50ms linear; } [data-sidebar] { @@ -197,10 +197,10 @@ } [data-radix-dialog-overlay] { - transition: opacity 150ms ease; + transition: none; } [data-radix-dialog-content] { - transition: opacity 150ms ease, transform 150ms ease; + transition: none; } .font-mono, [class*="font-mono"] { From f7108ba357311be23a3fe23146d0a22f9f0ed99d Mon Sep 17 00:00:00 2001 From: Jason Staack Date: Sat, 21 Mar 2026 11:47:09 -0500 Subject: [PATCH 02/30] feat(ui): update Tailwind config for Warm Precision tokens Co-Authored-By: Claude Opus 4.6 (1M context) --- frontend/tailwind.config.ts | 62 +++++++++++-------------------------- 1 file changed, 18 insertions(+), 44 deletions(-) diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts index e61aefd..bbce155 100644 --- a/frontend/tailwind.config.ts +++ b/frontend/tailwind.config.ts @@ -11,45 +11,29 @@ const config: Config = { colors: { background: 'hsl(var(--background))', foreground: 'hsl(var(--foreground))', - surface: 'hsl(var(--surface))', + sidebar: 'hsl(var(--sidebar))', + panel: 'hsl(var(--panel))', elevated: 'hsl(var(--elevated))', - border: 'hsl(var(--border))', - 'border-bright': 'hsl(var(--border-bright))', + 'border-subtle': 'hsl(var(--border-subtle))', + 'border-default': 'hsl(var(--border-default))', + border: 'hsl(var(--border-default))', 'text-primary': 'hsl(var(--text-primary))', 'text-secondary': 'hsl(var(--text-secondary))', 'text-muted': 'hsl(var(--text-muted))', + 'text-label': 'hsl(var(--text-label))', accent: { DEFAULT: 'hsl(var(--accent))', - hover: 'hsl(var(--accent-hover))', - muted: 'hsl(var(--accent-muted))', - }, - card: { - DEFAULT: 'hsl(var(--card))', - foreground: 'hsl(var(--card-foreground))', - }, - popover: { - DEFAULT: 'hsl(var(--popover))', - foreground: 'hsl(var(--popover-foreground))', - }, - primary: { - DEFAULT: 'hsl(var(--primary))', - foreground: 'hsl(var(--primary-foreground))', - }, - secondary: { - DEFAULT: 'hsl(var(--secondary))', - foreground: 'hsl(var(--secondary-foreground))', - }, - muted: { - DEFAULT: 'hsl(var(--muted))', - foreground: 'hsl(var(--muted-foreground))', - }, - destructive: { - DEFAULT: 'hsl(var(--destructive))', - foreground: 'hsl(var(--text-primary))', + soft: 'hsl(var(--accent-soft))', }, + 'alert-badge': 'hsl(var(--alert-badge))', + card: { DEFAULT: 'hsl(var(--card))', foreground: 'hsl(var(--card-foreground))' }, + popover: { DEFAULT: 'hsl(var(--popover))', foreground: 'hsl(var(--popover-foreground))' }, + primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))' }, + secondary: { DEFAULT: 'hsl(var(--secondary))', foreground: 'hsl(var(--secondary-foreground))' }, + muted: { DEFAULT: 'hsl(var(--muted))', foreground: 'hsl(var(--muted-foreground))' }, + destructive: { DEFAULT: 'hsl(var(--destructive))', foreground: 'hsl(var(--text-primary))' }, input: 'hsl(var(--input))', ring: 'hsl(var(--ring))', - sidebar: 'hsl(var(--sidebar))', online: 'hsl(var(--online))', offline: 'hsl(var(--offline))', unknown: 'hsl(var(--unknown))', @@ -68,22 +52,12 @@ const config: Config = { sans: ['Manrope', 'system-ui', '-apple-system', 'sans-serif'], mono: ['IBM Plex Mono', 'ui-monospace', 'SFMono-Regular', 'monospace'], }, - animation: { - shimmer: 'shimmer 1.5s ease-in-out infinite', - }, - backgroundImage: { - shimmer: - 'linear-gradient(90deg, transparent 0%, hsl(var(--elevated)) 20%, hsl(var(--surface)) 50%, hsl(var(--elevated)) 80%, transparent 100%)', - }, - backgroundSize: { - shimmer: '200% 100%', - }, borderRadius: { - sm: '0.25rem', + sm: '0.0625rem', DEFAULT: 'var(--radius)', - md: '0.375rem', - lg: 'var(--radius)', - xl: '0.75rem', + md: 'var(--radius-control)', + lg: 'var(--radius-control)', + xl: 'var(--radius-control)', }, }, }, From b39014ef47b5c2793e4121bb05dbc5889f283916 Mon Sep 17 00:00:00 2001 From: Jason Staack Date: Sat, 21 Mar 2026 11:49:37 -0500 Subject: [PATCH 03/30] refactor(ui): migrate all components to Warm Precision token names Co-Authored-By: Claude Opus 4.6 (1M context) --- .../src/components/about/AnsiNfoModal.tsx | 2 +- .../src/components/alerts/AlertRulesPage.tsx | 6 ++--- frontend/src/components/alerts/AlertsPage.tsx | 8 +++---- .../src/components/audit/AuditLogTable.tsx | 14 ++++++------ .../components/auth/EmergencyKitDialog.tsx | 4 ++-- .../src/components/auth/SrpUpgradeDialog.tsx | 2 +- .../certificates/BulkDeployDialog.tsx | 2 +- .../components/certificates/CAStatusCard.tsx | 4 ++-- .../command-palette/CommandPalette.tsx | 4 ++-- .../config-editor/CommandExecutor.tsx | 2 +- .../config-editor/ConfigEditorPage.tsx | 2 +- .../components/config-editor/EntryForm.tsx | 2 +- .../components/config-editor/EntryTable.tsx | 6 ++--- .../src/components/config-editor/MenuTree.tsx | 2 +- .../components/config/AddressListPanel.tsx | 2 +- .../src/components/config/AddressPanel.tsx | 2 +- frontend/src/components/config/ArpPanel.tsx | 6 ++--- .../components/config/BandwidthTestTool.tsx | 8 +++---- .../components/config/BatchConfigPanel.tsx | 12 +++++----- .../src/components/config/BridgePortPanel.tsx | 16 +++++++------- .../src/components/config/BridgeVlanPanel.tsx | 8 +++---- .../components/config/ConfigDiffViewer.tsx | 4 ++-- .../config/ConfigHistorySection.tsx | 2 +- frontend/src/components/config/ConfigTab.tsx | 6 ++--- .../src/components/config/ConnTrackPanel.tsx | 6 ++--- .../src/components/config/DhcpClientPanel.tsx | 2 +- frontend/src/components/config/DhcpPanel.tsx | 12 +++++----- frontend/src/components/config/DiffViewer.tsx | 2 +- frontend/src/components/config/DnsPanel.tsx | 4 ++-- .../src/components/config/FirewallPanel.tsx | 4 ++-- .../src/components/config/InterfacesPanel.tsx | 22 +++++++++---------- frontend/src/components/config/IpsecPanel.tsx | 14 ++++++------ .../src/components/config/ManglePanel.tsx | 4 ++-- frontend/src/components/config/PingTool.tsx | 6 ++--- frontend/src/components/config/PoolPanel.tsx | 2 +- frontend/src/components/config/PppPanel.tsx | 10 ++++----- .../src/components/config/RestorePreview.tsx | 4 ++-- .../src/components/config/RoutesPanel.tsx | 6 ++--- .../src/components/config/ScriptsPanel.tsx | 8 +++---- .../src/components/config/ServicesPanel.tsx | 4 ++-- frontend/src/components/config/SnmpPanel.tsx | 12 +++++----- .../components/config/SwitchPortManager.tsx | 8 +++---- .../src/components/config/SystemPanel.tsx | 14 ++++++------ frontend/src/components/config/TorchTool.tsx | 8 +++---- .../src/components/config/TracerouteTool.tsx | 6 ++--- frontend/src/components/config/UsersPanel.tsx | 4 ++-- .../src/components/dashboard/AlertSummary.tsx | 2 +- .../components/dashboard/BandwidthChart.tsx | 4 ++-- .../components/dashboard/EventsTimeline.tsx | 4 ++-- .../src/components/dashboard/HealthScore.tsx | 2 +- .../src/components/dashboard/QuickActions.tsx | 2 +- .../components/dashboard/WirelessIssues.tsx | 2 +- .../src/components/firmware/FirmwarePage.tsx | 8 +++---- .../firmware/UpgradeProgressModal.tsx | 2 +- .../src/components/fleet/AdoptionWizard.tsx | 16 +++++++------- .../src/components/fleet/FleetDashboard.tsx | 2 +- frontend/src/components/fleet/FleetTable.tsx | 2 +- .../src/components/fleet/ScanResultsList.tsx | 6 ++--- frontend/src/components/layout/Sidebar.tsx | 2 +- .../maintenance/MaintenanceList.tsx | 4 ++-- frontend/src/components/map/MapPage.tsx | 2 +- .../src/components/monitoring/HealthChart.tsx | 2 +- .../src/components/monitoring/HealthTab.tsx | 12 +++++----- .../components/monitoring/InterfacesTab.tsx | 6 ++--- .../monitoring/TimeRangeSelector.tsx | 4 ++-- .../components/monitoring/TrafficChart.tsx | 2 +- .../src/components/monitoring/WirelessTab.tsx | 6 ++--- .../src/components/network/ClientsTab.tsx | 2 +- .../components/network/InterfaceGauges.tsx | 6 ++--- frontend/src/components/network/LogsTab.tsx | 2 +- .../src/components/network/TopologyMap.tsx | 8 +++---- frontend/src/components/network/VpnTab.tsx | 6 ++--- .../operations/BulkCommandWizard.tsx | 12 +++++----- .../src/components/reports/ReportsPage.tsx | 8 +++---- .../src/components/settings/ApiKeysPage.tsx | 6 ++--- .../src/components/settings/SettingsPage.tsx | 16 +++++++------- frontend/src/components/setup/SetupWizard.tsx | 2 +- .../simple-config/SimpleFormSection.tsx | 2 +- .../simple-config/SimpleStatusBanner.tsx | 2 +- .../simple-config/categories/LanDhcpPanel.tsx | 2 +- .../categories/WifiSimplePanel.tsx | 2 +- .../src/components/sites/SiteHealthGrid.tsx | 6 ++--- .../src/components/sites/SiteSectorView.tsx | 4 ++-- .../templates/PushProgressPanel.tsx | 2 +- .../components/templates/TemplateEditor.tsx | 6 ++--- .../templates/TemplatePushWizard.tsx | 8 +++---- .../components/templates/TemplatesPage.tsx | 4 ++-- .../src/components/tenants/TenantList.tsx | 4 ++-- .../transparency/TransparencyLogTable.tsx | 18 +++++++-------- frontend/src/components/ui/button.tsx | 4 ++-- frontend/src/components/ui/card.tsx | 2 +- frontend/src/components/ui/dialog.tsx | 2 +- frontend/src/components/ui/dropdown-menu.tsx | 4 ++-- frontend/src/components/ui/popover.tsx | 2 +- frontend/src/components/ui/select.tsx | 2 +- frontend/src/components/ui/skeleton.tsx | 2 +- frontend/src/components/ui/tabs.tsx | 2 +- frontend/src/components/ui/toast.tsx | 2 +- frontend/src/components/users/UserList.tsx | 4 ++-- frontend/src/components/vpn/VpnPage.tsx | 4 ++-- .../src/components/wireless/RFStatsCard.tsx | 2 +- frontend/src/routes/_authenticated/about.tsx | 8 +++---- frontend/src/routes/_authenticated/audit.tsx | 4 ++-- .../routes/_authenticated/batch-config.tsx | 4 ++-- .../routes/_authenticated/bulk-commands.tsx | 2 +- .../src/routes/_authenticated/maintenance.tsx | 2 +- .../src/routes/_authenticated/reports.tsx | 4 ++-- .../_authenticated/settings.api-keys.tsx | 4 ++-- .../tenants/$tenantId/devices/$deviceId.tsx | 18 +++++++-------- .../tenants/$tenantId/index.tsx | 6 ++--- .../tenants/$tenantId/sites/$siteId.tsx | 10 ++++----- .../src/routes/_authenticated/topology.tsx | 2 +- .../src/routes/_authenticated/traffic.tsx | 14 ++++++------ .../routes/_authenticated/transparency.tsx | 4 ++-- .../src/routes/_authenticated/wireless.tsx | 14 ++++++------ frontend/src/routes/forgot-password.tsx | 2 +- frontend/src/routes/login.tsx | 2 +- frontend/src/routes/reset-password.tsx | 4 ++-- 118 files changed, 322 insertions(+), 322 deletions(-) diff --git a/frontend/src/components/about/AnsiNfoModal.tsx b/frontend/src/components/about/AnsiNfoModal.tsx index 13c2e78..d3e1bd0 100644 --- a/frontend/src/components/about/AnsiNfoModal.tsx +++ b/frontend/src/components/about/AnsiNfoModal.tsx @@ -146,7 +146,7 @@ export function AnsiNfoModal({ open, onOpenChange }: AnsiNfoModalProps) { }} > {/* Retro title bar */} -
+
TOD.NFO — ACiD View v1.0 diff --git a/frontend/src/components/alerts/AlertRulesPage.tsx b/frontend/src/components/alerts/AlertRulesPage.tsx index de9ed5d..39f3a35 100644 --- a/frontend/src/components/alerts/AlertRulesPage.tsx +++ b/frontend/src/components/alerts/AlertRulesPage.tsx @@ -698,7 +698,7 @@ export function AlertRulesPage() { No alert rules configured.

) : ( -
+
{/* Header */}
Name @@ -710,7 +710,7 @@ export function AlertRulesPage() { {rules.map((rule) => (
@@ -809,7 +809,7 @@ export function AlertRulesPage() { {channels.map((ch) => (
diff --git a/frontend/src/components/alerts/AlertsPage.tsx b/frontend/src/components/alerts/AlertsPage.tsx index 657efb5..dece3e7 100644 --- a/frontend/src/components/alerts/AlertsPage.tsx +++ b/frontend/src/components/alerts/AlertsPage.tsx @@ -89,7 +89,7 @@ function AlertRow({ alert.silenced_until && new Date(alert.silenced_until) > new Date() return ( -
+
@@ -271,7 +271,7 @@ export function AlertsPage() { description="All clear! No alerts have been triggered." /> ) : ( -
+
{alerts.map((alert) => ( ) : ( -
+
{/* Table header */}
@@ -315,7 +315,7 @@ export function AlertsPage() { {alerts.map((alert) => (
diff --git a/frontend/src/components/audit/AuditLogTable.tsx b/frontend/src/components/audit/AuditLogTable.tsx index 0a813fc..223b214 100644 --- a/frontend/src/components/audit/AuditLogTable.tsx +++ b/frontend/src/components/audit/AuditLogTable.tsx @@ -143,7 +143,7 @@ export function AuditLogTable({ tenantId }: AuditLogTableProps) { value={actionFilter} onChange={(e) => { setActionFilter(e.target.value); setPage(1) }} aria-label="Filter by action" - className="h-8 rounded-md border border-border bg-surface px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent" + className="h-8 rounded-md border border-border bg-panel px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent" > {ACTION_TYPES.map((a) => (
@@ -172,7 +172,7 @@ export function AuditLogTable({ tenantId }: AuditLogTableProps) { value={dateTo} onChange={(e) => { setDateTo(e.target.value); setPage(1) }} aria-label="Filter to date" - className="h-8 rounded-md border border-border bg-surface px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent" + className="h-8 rounded-md border border-border bg-panel px-2 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent" />
@@ -185,7 +185,7 @@ export function AuditLogTable({ tenantId }: AuditLogTableProps) { value={userSearch} onChange={(e) => setUserSearch(e.target.value)} aria-label="Filter by user" - className="h-8 rounded-md border border-border bg-surface pl-7 pr-2 text-xs text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent w-40" + className="h-8 rounded-md border border-border bg-panel pl-7 pr-2 text-xs text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent w-40" />
@@ -196,7 +196,7 @@ export function AuditLogTable({ tenantId }: AuditLogTableProps) {
{/* Table */} -
+
{isLoading ? (
@@ -278,7 +278,7 @@ export function AuditLogTable({ tenantId }: AuditLogTableProps) { setPage(1) }} aria-label="Rows per page" - className="h-7 rounded border border-border bg-surface px-1.5 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent" + className="h-7 rounded border border-border bg-panel px-1.5 text-xs text-text-primary focus:outline-none focus:ring-1 focus:ring-accent" > {PER_PAGE_OPTIONS.map((n) => (