From 77a408dee760d1e52e8a442844eb6da187034bf4 Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Tue, 11 Aug 2026 16:24:36 +0530
Subject: [PATCH 1/2] fix(frontend): address many color contrast a11y issues

---
 .../app/components/ApiCredentialsForm.tsx        |  7 ++++++-
 packages/frontend/app/components/Sidebar.tsx     | 16 ++++++++--------
 packages/frontend/app/root.tsx                   |  2 +-
 packages/frontend/app/routes/_index.tsx          |  2 +-
 packages/frontend/app/routes/assets.$assetId.tsx |  2 +-
 packages/frontend/app/routes/peers.$peerId.tsx   |  2 +-
 .../frontend/app/routes/tenants.$tenantId.tsx    |  2 +-
 packages/frontend/app/routes/tenants._index.tsx  | 12 +++++++++---
 .../app/routes/wallet-addresses._index.tsx       |  5 ++++-
 .../frontend/app/routes/webhook-events.data.tsx  |  2 +-
 packages/frontend/app/routes/webhook-events.tsx  |  2 +-
 11 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/packages/frontend/app/components/ApiCredentialsForm.tsx b/packages/frontend/app/components/ApiCredentialsForm.tsx
index c170ab5372..b822fc4ddb 100644
--- a/packages/frontend/app/components/ApiCredentialsForm.tsx
+++ b/packages/frontend/app/components/ApiCredentialsForm.tsx
@@ -54,7 +54,12 @@ export const ApiCredentialsForm = ({
         <Form method='post' action='/api/set-credentials' className='space-y-4'>
           <p className='text-green-600 mb-4'>✓ API credentials configured</p>
           <input hidden readOnly name='intent' value='clear' />
-          <Button type='submit' color='red' disabled={isSubmitting}>
+          <Button
+            type='submit'
+            color='red'
+            variant='outline'
+            disabled={isSubmitting}
+          >
             {isSubmitting ? 'Clearing credentials...' : 'Clear Credentials'}
           </Button>
         </Form>
diff --git a/packages/frontend/app/components/Sidebar.tsx b/packages/frontend/app/components/Sidebar.tsx
index 7701daa9ac..d0b71fdf0a 100644
--- a/packages/frontend/app/components/Sidebar.tsx
+++ b/packages/frontend/app/components/Sidebar.tsx
@@ -108,8 +108,8 @@ export const Sidebar: FC<SidebarProps> = ({
                           className={({ isActive }) =>
                             cx(
                               isActive
-                                ? 'bg-[#F37F64]/10 text-[#F37F64]'
-                                : 'text-tealish/70 hover:bg-[#F37F64]/5',
+                                ? 'bg-[var(--amber-a2)] text-[#975800]'
+                                : 'text-tealish/80 hover:bg-[var(--amber-a2)]',
                               'flex px-3 py-2 font-medium rounded-md'
                             )
                           }
@@ -127,8 +127,8 @@ export const Sidebar: FC<SidebarProps> = ({
                           className={({ isActive }) =>
                             cx(
                               isActive
-                                ? 'bg-[#F37F64]/10 text-[#F37F64]'
-                                : 'text-tealish/70 hover:bg-[#F37F64]/5',
+                                ? 'bg-[var(--amber-a2)] text-[#975800]'
+                                : 'text-tealish/80 hover:bg-[var(--amber-a2)]',
                               'flex px-3 py-2 font-medium rounded-md'
                             )
                           }
@@ -177,8 +177,8 @@ export const Sidebar: FC<SidebarProps> = ({
                     className={({ isActive }) =>
                       cx(
                         isActive
-                          ? 'bg-[#F37F64]/10 text-[#F37F64]'
-                          : 'text-tealish/70 hover:bg-[#F37F64]/5',
+                          ? 'bg-[var(--amber-a2)] text-[#975800]'
+                          : 'text-tealish/80 hover:bg-[var(--amber-a2)]',
                         'flex px-3 py-2 font-medium rounded-md'
                       )
                     }
@@ -196,8 +196,8 @@ export const Sidebar: FC<SidebarProps> = ({
                     className={({ isActive }) =>
                       cx(
                         isActive
-                          ? 'bg-[#F37F64]/10 text-[#F37F64]'
-                          : 'text-tealish/70 hover:bg-[#F37F64]/5',
+                          ? 'bg-[var(--amber-a2)] text-[#975800]'
+                          : 'text-tealish/80 hover:bg-[var(--amber-a2)]',
                         'flex px-3 py-2 font-medium rounded-md'
                       )
                     }
diff --git a/packages/frontend/app/root.tsx b/packages/frontend/app/root.tsx
index 258f1ca317..3ff983439d 100644
--- a/packages/frontend/app/root.tsx
+++ b/packages/frontend/app/root.tsx
@@ -127,7 +127,7 @@ export default function App() {
         <Links />
       </head>
       <body className='h-full bg-polkadot bg-cover bg-no-repeat bg-center bg-fixed text-tealish'>
-        <Theme accentColor='orange'>
+        <Theme accentColor='amber'>
           <a
             href='#main-content'
             className='sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-20 focus:rounded-md focus:bg-white focus:px-4 focus:py-2 focus:text-tealish focus:shadow-md'
diff --git a/packages/frontend/app/routes/_index.tsx b/packages/frontend/app/routes/_index.tsx
index 407149c3e1..f5e565a0b8 100644
--- a/packages/frontend/app/routes/_index.tsx
+++ b/packages/frontend/app/routes/_index.tsx
@@ -54,7 +54,7 @@ export default function Index() {
             >
               Welcome
             </Text>
-            <Heading size='8' className='text-[#F37F64] mb-4'>
+            <Heading size='8' color='amber' className='mb-4'>
               Rafiki Admin
             </Heading>
             <Text as='p' size='3' color='gray' className='mt-6'>
diff --git a/packages/frontend/app/routes/assets.$assetId.tsx b/packages/frontend/app/routes/assets.$assetId.tsx
index 9704db8788..1ab7ce6159 100644
--- a/packages/frontend/app/routes/assets.$assetId.tsx
+++ b/packages/frontend/app/routes/assets.$assetId.tsx
@@ -367,7 +367,7 @@ export default function ViewAssetPage() {
           <Form method='post' onSubmit={submitHandler}>
             <input type='hidden' name='id' value={asset.id} />
             <input type='hidden' name='intent' value='delete' />
-            <Button type='submit' color='red' aria-label='delete asset'>
+            <Button type='submit' color='red' variant='classic'>
               Delete asset
             </Button>
           </Form>
diff --git a/packages/frontend/app/routes/peers.$peerId.tsx b/packages/frontend/app/routes/peers.$peerId.tsx
index d2399f7a98..8b3bef91d2 100644
--- a/packages/frontend/app/routes/peers.$peerId.tsx
+++ b/packages/frontend/app/routes/peers.$peerId.tsx
@@ -460,7 +460,7 @@ export default function ViewPeerPage() {
           <Form method='post' onSubmit={submitHandler}>
             <input type='hidden' name='id' value={peer.id} />
             <input type='hidden' name='intent' value='delete' />
-            <Button type='submit' color='red' aria-label='delete peer'>
+            <Button type='submit' color='red' variant='classic'>
               Delete peer
             </Button>
           </Form>
diff --git a/packages/frontend/app/routes/tenants.$tenantId.tsx b/packages/frontend/app/routes/tenants.$tenantId.tsx
index 974443b3af..2706edf4f5 100644
--- a/packages/frontend/app/routes/tenants.$tenantId.tsx
+++ b/packages/frontend/app/routes/tenants.$tenantId.tsx
@@ -322,7 +322,7 @@ export default function ViewTenantPage() {
             <Form method='post' onSubmit={submitHandler}>
               <input type='hidden' name='id' value={tenant.id} />
               <input type='hidden' name='intent' value='delete' />
-              <Button type='submit' color='red' aria-label='delete tenant'>
+              <Button type='submit' color='red' variant='classic'>
                 Delete tenant
               </Button>
             </Form>
diff --git a/packages/frontend/app/routes/tenants._index.tsx b/packages/frontend/app/routes/tenants._index.tsx
index 855595709f..1b1d9c4032 100644
--- a/packages/frontend/app/routes/tenants._index.tsx
+++ b/packages/frontend/app/routes/tenants._index.tsx
@@ -124,7 +124,9 @@ export default function TenantsPage() {
                             </Link>
                           </Text>
                           {me.isOperator && me.id == tenant.node.id && (
-                            <Badge color='yellow'>Operator</Badge>
+                            <Badge color='yellow' variant='outline'>
+                              Operator
+                            </Badge>
                           )}
                         </Flex>
                         <Text
@@ -143,9 +145,13 @@ export default function TenantsPage() {
                     </Table.Cell>
                     <Table.Cell>
                       {tenant.node.deletedAt ? (
-                        <Badge color='red'>Inactive</Badge>
+                        <Badge color='red' variant='outline'>
+                          Inactive
+                        </Badge>
                       ) : (
-                        <Badge color='green'>Active</Badge>
+                        <Badge color='green' variant='outline'>
+                          Active
+                        </Badge>
                       )}
                     </Table.Cell>
                   </Table.Row>
diff --git a/packages/frontend/app/routes/wallet-addresses._index.tsx b/packages/frontend/app/routes/wallet-addresses._index.tsx
index f6fe37e870..0e170fa2ea 100644
--- a/packages/frontend/app/routes/wallet-addresses._index.tsx
+++ b/packages/frontend/app/routes/wallet-addresses._index.tsx
@@ -113,7 +113,10 @@ export default function WalletAddressesPage() {
                         </Text>
                       </Table.Cell>
                       <Table.Cell>
-                        <Badge color={statusColorMap[wa.node.status] || 'gray'}>
+                        <Badge
+                          color={statusColorMap[wa.node.status] || 'gray'}
+                          variant='outline'
+                        >
                           {wa.node.status}
                         </Badge>
                       </Table.Cell>
diff --git a/packages/frontend/app/routes/webhook-events.data.tsx b/packages/frontend/app/routes/webhook-events.data.tsx
index 9be1e1d85f..e913744a62 100644
--- a/packages/frontend/app/routes/webhook-events.data.tsx
+++ b/packages/frontend/app/routes/webhook-events.data.tsx
@@ -60,7 +60,7 @@ export default function WebhookEventData() {
                 <div className='absolute right-0 top-0 pr-4 pt-4'>
                   <button
                     type='button'
-                    className='text-gray-400 hover:text-gray-500 focus:outline-none'
+                    className='text-gray-400 hover:text-gray-500'
                     onClick={dismiss}
                   >
                     <span className='sr-only'>Close</span>
diff --git a/packages/frontend/app/routes/webhook-events.tsx b/packages/frontend/app/routes/webhook-events.tsx
index 0c94e0d748..2762d116e8 100644
--- a/packages/frontend/app/routes/webhook-events.tsx
+++ b/packages/frontend/app/routes/webhook-events.tsx
@@ -175,7 +175,7 @@ export default function WebhookEventsPage() {
                         </Table.Cell>
                         <Table.Cell>
                           <Button
-                            variant='soft'
+                            variant='ghost'
                             onClick={() => {
                               navigate(
                                 `/webhook-events/data${

From 30a680b0560b07f15bca4946c738cf64ed8c4ac3 Mon Sep 17 00:00:00 2001
From: Sid Vishnoi <8426945+sidvishnoi@users.noreply.github.com>
Date: Tue, 11 Aug 2026 17:56:38 +0530
Subject: [PATCH 2/2] use accent color in more places

---
 packages/frontend/app/components/Filters.tsx     | 4 ++--
 packages/frontend/app/root.tsx                   | 3 ++-
 packages/frontend/app/routes/auth._index.tsx     | 3 ++-
 packages/frontend/app/routes/payments._index.tsx | 2 +-
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/app/components/Filters.tsx b/packages/frontend/app/components/Filters.tsx
index 8a89304ec8..c003eb3b31 100644
--- a/packages/frontend/app/components/Filters.tsx
+++ b/packages/frontend/app/components/Filters.tsx
@@ -30,7 +30,7 @@ export const PopoverFilter = ({
       <Popover.Button
         id={labelId}
         aria-haspopup='true'
-        className='inline-flex w-[400px] items-center justify-between gap-2 rounded-md border border-pearl bg-white px-3 py-2 text-sm text-tealish shadow-sm focus:outline-none focus:ring-2 focus:ring-[#F37F64]'
+        className='inline-flex w-[400px] items-center justify-between gap-2 rounded-md border border-pearl bg-white px-3 py-2 text-sm text-tealish shadow-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-8)]'
       >
         <span className='truncate' title={label}>
           {label}
@@ -77,7 +77,7 @@ export const PopoverFilter = ({
                   <input
                     type='checkbox'
                     id={optionId}
-                    className='w-5 h-5 rounded border-gray-300 text-[#F37F64] focus:ring-[#F37F64]'
+                    className='w-5 h-5 rounded border-gray-300 text-[var(--accent-9)] focus:ring-[var(--focus-8)]'
                     checked={values ? values.includes(option.value) : false}
                     onChange={option.action}
                     aria-describedby={
diff --git a/packages/frontend/app/root.tsx b/packages/frontend/app/root.tsx
index 3ff983439d..48b908fc21 100644
--- a/packages/frontend/app/root.tsx
+++ b/packages/frontend/app/root.tsx
@@ -205,7 +205,8 @@ export function ErrorBoundary() {
           <Heading
             as='h4'
             size='5'
-            className='font-semibold -tracking-widest text-[#F37F64]'
+            color='amber'
+            className='font-semibold -tracking-widest'
           >
             {error.status}
           </Heading>
diff --git a/packages/frontend/app/routes/auth._index.tsx b/packages/frontend/app/routes/auth._index.tsx
index 563468cf8a..dc54c53d92 100644
--- a/packages/frontend/app/routes/auth._index.tsx
+++ b/packages/frontend/app/routes/auth._index.tsx
@@ -24,7 +24,8 @@ export default function Auth() {
         <div className='p-4 space-y-6 md:p-10 md:space-y-16'>
           <Heading
             as='h1'
-            className='text-6xl pt-10 md:text-9xl md:pt-16 text-[#F37F64]'
+            color='amber'
+            className='text-6xl pt-10 md:text-9xl md:pt-16'
           >
             Welcome!
           </Heading>
diff --git a/packages/frontend/app/routes/payments._index.tsx b/packages/frontend/app/routes/payments._index.tsx
index 0a0bdaf27e..08a096db65 100644
--- a/packages/frontend/app/routes/payments._index.tsx
+++ b/packages/frontend/app/routes/payments._index.tsx
@@ -138,7 +138,7 @@ export default function PaymentsPage() {
           <Heading size='5'>Payments</Heading>
           <Flex align='center' gap='2' className='flex-wrap md:flex-nowrap'>
             <DropdownMenu.Root>
-              <DropdownMenu.Trigger className='inline-flex min-w-[220px] items-center justify-between gap-2 rounded-md border border-pearl bg-white px-3 py-2 text-sm text-tealish shadow-sm focus:outline-none focus:ring-2 focus:ring-[#F37F64]'>
+              <DropdownMenu.Trigger className='inline-flex min-w-[220px] items-center justify-between gap-2 rounded-md border border-pearl bg-white px-3 py-2 text-sm text-tealish shadow-sm focus:outline-none focus:ring-2 focus:ring-[var(--focus-8)]'>
                 <button
                   type='button'
                   className='flex w-full items-center justify-between gap-2'