From 07401a4ce230faeaebecf23b874d9c96ab247a0b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Sat, 28 Mar 2026 00:48:05 +0100
Subject: [PATCH] fix: use accessible button color tokens for WCAG AA contrast

Swap bg-brand-orange to bg-brand-orange-button on all interactive
buttons with white text. Decorative uses unchanged. Bumps
@ciphera-net/ui to 0.3.6.
---
 app/integrations/page.tsx                  | 6 +++---
 app/sites/[id]/cdn/page.tsx                | 2 +-
 app/sites/[id]/search/page.tsx             | 2 +-
 components/checkout/PaymentForm.tsx        | 2 +-
 components/dashboard/AddFilterDropdown.tsx | 4 ++--
 components/dashboard/Chart.tsx             | 2 +-
 components/dashboard/EventProperties.tsx   | 2 +-
 components/dashboard/FilterBar.tsx         | 2 +-
 components/funnels/BreakdownDrawer.tsx     | 2 +-
 components/funnels/FunnelForm.tsx          | 6 +++---
 package-lock.json                          | 8 ++++----
 package.json                               | 2 +-
 12 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/app/integrations/page.tsx b/app/integrations/page.tsx
index 8582f22..dccc121 100644
--- a/app/integrations/page.tsx
+++ b/app/integrations/page.tsx
@@ -188,7 +188,7 @@ export default function IntegrationsPage() {
             onClick={() => handleCategoryClick('all')}
             className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all ${
               activeCategory === 'all'
-                ? 'bg-brand-orange text-white shadow-sm'
+                ? 'bg-brand-orange-button text-white shadow-sm'
                 : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
             }`}
           >
@@ -200,7 +200,7 @@ export default function IntegrationsPage() {
               onClick={() => handleCategoryClick(cat)}
               className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all ${
                 activeCategory === cat
-                  ? 'bg-brand-orange text-white shadow-sm'
+                  ? 'bg-brand-orange-button text-white shadow-sm'
                   : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
               }`}
             >
@@ -335,7 +335,7 @@ export default function IntegrationsPage() {
               </p>
               <a
                 href="mailto:support@ciphera.net"
-                className="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-orange text-white font-medium rounded-lg hover:bg-brand-orange/90 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
+                className="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-orange-button text-white font-medium rounded-lg hover:bg-brand-orange/90 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-orange focus-visible:ring-offset-2"
               >
                 Request Integration
               </a>
diff --git a/app/sites/[id]/cdn/page.tsx b/app/sites/[id]/cdn/page.tsx
index 25e2e68..7b97e37 100644
--- a/app/sites/[id]/cdn/page.tsx
+++ b/app/sites/[id]/cdn/page.tsx
@@ -187,7 +187,7 @@ export default function CDNPage() {
           </p>
           <button
             onClick={() => openUnifiedSettings({ context: 'site', tab: 'integrations' })}
-            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange hover:bg-brand-orange/90 text-white text-sm font-medium transition-colors cursor-pointer"
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange-button hover:bg-brand-orange-button-hover text-white text-sm font-medium transition-colors cursor-pointer"
           >
             Connect in Settings
             <ArrowSquareOut size={16} weight="bold" />
diff --git a/app/sites/[id]/search/page.tsx b/app/sites/[id]/search/page.tsx
index 4f1dd5f..65f15a8 100644
--- a/app/sites/[id]/search/page.tsx
+++ b/app/sites/[id]/search/page.tsx
@@ -175,7 +175,7 @@ export default function SearchConsolePage() {
           </p>
           <button
             onClick={() => openUnifiedSettings({ context: 'site', tab: 'integrations' })}
-            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange hover:bg-brand-orange/90 text-white text-sm font-medium transition-colors cursor-pointer"
+            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg bg-brand-orange-button hover:bg-brand-orange-button-hover text-white text-sm font-medium transition-colors cursor-pointer"
           >
             Connect in Settings
             <ArrowSquareOut size={16} weight="bold" />
diff --git a/components/checkout/PaymentForm.tsx b/components/checkout/PaymentForm.tsx
index 87f3df0..069d341 100644
--- a/components/checkout/PaymentForm.tsx
+++ b/components/checkout/PaymentForm.tsx
@@ -333,7 +333,7 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
           ref={submitRef}
           type="submit"
           disabled={submitting || !selectedMethod || (isCard && !mollieReady && !mollieError)}
-          className="mt-4 w-full rounded-lg bg-brand-orange px-4 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand-orange/90 disabled:opacity-50 disabled:cursor-not-allowed"
+          className="mt-4 w-full rounded-lg bg-brand-orange-button px-4 py-3 text-sm font-semibold text-white transition-colors hover:bg-brand-orange-button-hover disabled:opacity-50 disabled:cursor-not-allowed"
         >
           {submitting ? 'Processing...' : 'Start free trial'}
         </button>
diff --git a/components/dashboard/AddFilterDropdown.tsx b/components/dashboard/AddFilterDropdown.tsx
index 74c835c..4840d46 100644
--- a/components/dashboard/AddFilterDropdown.tsx
+++ b/components/dashboard/AddFilterDropdown.tsx
@@ -164,7 +164,7 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
                     onClick={() => setOperator(op)}
                     className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors cursor-pointer ${
                       operator === op
-                        ? 'bg-brand-orange text-white'
+                        ? 'bg-brand-orange-button text-white'
                         : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
                     }`}
                   >
@@ -219,7 +219,7 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
                 <div className="px-3 py-3 border-t border-neutral-800">
                   <button
                     onClick={handleSubmitCustom}
-                    className="w-full px-3 py-2 text-sm font-medium bg-brand-orange text-white rounded-lg hover:bg-brand-orange/90 transition-colors cursor-pointer"
+                    className="w-full px-3 py-2 text-sm font-medium bg-brand-orange-button text-white rounded-lg hover:bg-brand-orange/90 transition-colors cursor-pointer"
                   >
                     Filter by &ldquo;{search.trim()}&rdquo;
                   </button>
diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx
index 700caa6..0a11cb9 100644
--- a/components/dashboard/Chart.tsx
+++ b/components/dashboard/Chart.tsx
@@ -674,7 +674,7 @@ export default function Chart({
                   type="button"
                   disabled={!annotationForm.text.trim() || !annotationForm.date || saving}
                   onClick={handleSaveAnnotation}
-                  className="px-3 py-1.5 text-xs font-medium text-white bg-brand-orange hover:bg-brand-orange/90 rounded-lg disabled:opacity-50 cursor-pointer"
+                  className="px-3 py-1.5 text-xs font-medium text-white bg-brand-orange-button hover:bg-brand-orange-button-hover rounded-lg disabled:opacity-50 cursor-pointer"
                 >
                   {saving ? 'Saving...' : annotationForm.editingId ? 'Save' : 'Add'}
                 </button>
diff --git a/components/dashboard/EventProperties.tsx b/components/dashboard/EventProperties.tsx
index 3d8033e..1a74f86 100644
--- a/components/dashboard/EventProperties.tsx
+++ b/components/dashboard/EventProperties.tsx
@@ -70,7 +70,7 @@ export default function EventProperties({ siteId, eventName, dateRange, onClose
                 onClick={() => setSelectedKey(k.key)}
                 className={`px-3 py-1 text-xs font-medium rounded-full transition-colors cursor-pointer ${
                   selectedKey === k.key
-                    ? 'bg-brand-orange text-white'
+                    ? 'bg-brand-orange-button text-white'
                     : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
                 }`}
               >
diff --git a/components/dashboard/FilterBar.tsx b/components/dashboard/FilterBar.tsx
index 697396d..fd408ee 100644
--- a/components/dashboard/FilterBar.tsx
+++ b/components/dashboard/FilterBar.tsx
@@ -17,7 +17,7 @@ export default function FilterBar({ filters, onRemove, onClear }: FilterBarProps
         <button
           key={`${f.dimension}-${f.operator}-${f.values.join(',')}`}
           onClick={() => onRemove(i)}
-          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-brand-orange text-white hover:bg-brand-orange/80 transition-colors cursor-pointer group"
+          className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-brand-orange-button text-white hover:bg-brand-orange-button-hover transition-colors cursor-pointer group"
           title={`Remove filter: ${filterLabel(f)}`}
         >
           <span>{filterLabel(f)}</span>
diff --git a/components/funnels/BreakdownDrawer.tsx b/components/funnels/BreakdownDrawer.tsx
index 1f8bbe1..0e6ce43 100644
--- a/components/funnels/BreakdownDrawer.tsx
+++ b/components/funnels/BreakdownDrawer.tsx
@@ -68,7 +68,7 @@ export default function BreakdownDrawer({ siteId, funnelId, stepIndex, stepName,
               onClick={() => setActiveDimension(dim)}
               className={`px-3 py-1.5 text-xs font-medium rounded-lg whitespace-nowrap transition-colors ${
                 activeDimension === dim
-                  ? 'bg-brand-orange text-white'
+                  ? 'bg-brand-orange-button text-white'
                   : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-500 hover:bg-neutral-200 dark:hover:bg-neutral-700'
               }`}
             >
diff --git a/components/funnels/FunnelForm.tsx b/components/funnels/FunnelForm.tsx
index a755e21..1b8b864 100644
--- a/components/funnels/FunnelForm.tsx
+++ b/components/funnels/FunnelForm.tsx
@@ -296,7 +296,7 @@ export default function FunnelForm({ siteId, initialData, onSubmit, submitLabel,
                         onClick={() => handleUpdateStep(index, 'category', 'page')}
                         className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
                           category === 'page'
-                            ? 'bg-brand-orange text-white'
+                            ? 'bg-brand-orange-button text-white'
                             : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
                         }`}
                       >
@@ -307,7 +307,7 @@ export default function FunnelForm({ siteId, initialData, onSubmit, submitLabel,
                         onClick={() => handleUpdateStep(index, 'category', 'event')}
                         className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
                           category === 'event'
-                            ? 'bg-brand-orange text-white'
+                            ? 'bg-brand-orange-button text-white'
                             : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
                         }`}
                       >
@@ -470,7 +470,7 @@ export default function FunnelForm({ siteId, initialData, onSubmit, submitLabel,
                 }}
                 className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
                   windowValue === preset.value && windowUnit === preset.unit
-                    ? 'bg-brand-orange text-white'
+                    ? 'bg-brand-orange-button text-white'
                     : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
                 }`}
               >
diff --git a/package-lock.json b/package-lock.json
index dcbd66e..5436332 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "pulse-frontend",
       "version": "0.15.0-alpha",
       "dependencies": {
-        "@ciphera-net/ui": "^0.3.4",
+        "@ciphera-net/ui": "^0.3.6",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@icons-pack/react-simple-icons": "^13.13.0",
         "@phosphor-icons/react": "^2.1.10",
@@ -1682,9 +1682,9 @@
       }
     },
     "node_modules/@ciphera-net/ui": {
-      "version": "0.3.4",
-      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.3.4/22dd1c925f48fe78dbe286a714aed7c209dd2034",
-      "integrity": "sha512-TwDelE6naZvKhy6Id+IMinXn7R4WLBsN8CyScpOcOgNSmbSwdHNbkHE4kKUK8iIH/dlppRZzI2cCfwLOgfg9sg==",
+      "version": "0.3.6",
+      "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.3.6/886a376c94508da1c8b499404e9bf97ea37c9ba3",
+      "integrity": "sha512-Utio35+w3/Yso3d/6ebobmWJOvF7VFS3GQRq7/FbpEYqWxpI2VrxUPoa0zQ9x5aCgXKabdQj+88Og+0pixQVJw==",
       "dependencies": {
         "@phosphor-icons/react": "^2.1.10",
         "class-variance-authority": "^0.7.1",
diff --git a/package.json b/package.json
index edc16f7..6fa2eb7 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "test:watch": "vitest"
   },
   "dependencies": {
-    "@ciphera-net/ui": "^0.3.4",
+    "@ciphera-net/ui": "^0.3.6",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@icons-pack/react-simple-icons": "^13.13.0",
     "@phosphor-icons/react": "^2.1.10",