ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: use accessible button color tokens for WCAG AA contrast

Browse Source 
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.
This commit is contained in:
Usman Baig
2026-03-28 00:48:05 +01:00
parent 8c0700f406
commit 07401a4ce2
12 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/integrations/page.tsx
View File

@@ -188,7 +188,7 @@ export default function IntegrationsPage() {
onClick={() => handleCategoryClick('all')} onClick={() => handleCategoryClick('all')}
className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all ${ className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all ${
activeCategory === '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' : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
}`} }`}
> >
@@ -200,7 +200,7 @@ export default function IntegrationsPage() {
onClick={() => handleCategoryClick(cat)} onClick={() => handleCategoryClick(cat)}
className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all ${ className={`px-4 py-1.5 rounded-full text-sm font-medium transition-all ${
activeCategory === cat 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' : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
}`} }`}
> >
@@ -335,7 +335,7 @@ export default function IntegrationsPage() {
</p> </p>
<a <a
href="mailto:support@ciphera.net" 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 Request Integration
</a> </a>

2
app/sites/[id]/cdn/page.tsx
View File

@@ -187,7 +187,7 @@ export default function CDNPage() {
</p> </p>
<button <button
onClick={() => openUnifiedSettings({ context: 'site', tab: 'integrations' })} 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 Connect in Settings
<ArrowSquareOut size={16} weight="bold" /> <ArrowSquareOut size={16} weight="bold" />

2
app/sites/[id]/search/page.tsx
View File

@@ -175,7 +175,7 @@ export default function SearchConsolePage() {
</p> </p>
<button <button
onClick={() => openUnifiedSettings({ context: 'site', tab: 'integrations' })} 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 Connect in Settings
<ArrowSquareOut size={16} weight="bold" /> <ArrowSquareOut size={16} weight="bold" />

2
components/checkout/PaymentForm.tsx
View File

@@ -333,7 +333,7 @@ export default function PaymentForm({ plan, interval, limit, country, vatId }: P
ref={submitRef} ref={submitRef}
type="submit" type="submit"
disabled={submitting || !selectedMethod || (isCard && !mollieReady && !mollieError)} 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'} {submitting ? 'Processing...' : 'Start free trial'}
</button> </button>

4
components/dashboard/AddFilterDropdown.tsx
View File

@@ -164,7 +164,7 @@ export default function AddFilterDropdown({ onAdd, suggestions = {}, onFetchSugg
onClick={() => setOperator(op)} onClick={() => setOperator(op)}
className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors cursor-pointer ${ className={`px-2.5 py-1 text-[11px] font-medium rounded-md transition-colors cursor-pointer ${
operator === op operator === op
? 'bg-brand-orange text-white' ? 'bg-brand-orange-button text-white'
: 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700' : '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"> <div className="px-3 py-3 border-t border-neutral-800">
<button <button
onClick={handleSubmitCustom} 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; Filter by &ldquo;{search.trim()}&rdquo;
</button> </button>

2
components/dashboard/Chart.tsx
View File

@@ -674,7 +674,7 @@ export default function Chart({
type="button" type="button"
disabled={!annotationForm.text.trim() || !annotationForm.date || saving} disabled={!annotationForm.text.trim() || !annotationForm.date || saving}
onClick={handleSaveAnnotation} 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'} {saving ? 'Saving...' : annotationForm.editingId ? 'Save' : 'Add'}
</button> </button>

2
components/dashboard/EventProperties.tsx
View File

@@ -70,7 +70,7 @@ export default function EventProperties({ siteId, eventName, dateRange, onClose
onClick={() => setSelectedKey(k.key)} onClick={() => setSelectedKey(k.key)}
className={`px-3 py-1 text-xs font-medium rounded-full transition-colors cursor-pointer ${ className={`px-3 py-1 text-xs font-medium rounded-full transition-colors cursor-pointer ${
selectedKey === k.key selectedKey === k.key
? 'bg-brand-orange text-white' ? 'bg-brand-orange-button text-white'
: 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700' : 'bg-neutral-800 text-neutral-400 hover:bg-neutral-700'
}`} }`}
> >

2
components/dashboard/FilterBar.tsx
View File

@@ -17,7 +17,7 @@ export default function FilterBar({ filters, onRemove, onClear }: FilterBarProps
<button <button
key={`${f.dimension}-${f.operator}-${f.values.join(',')}`} key={`${f.dimension}-${f.operator}-${f.values.join(',')}`}
onClick={() => onRemove(i)} 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)}`} title={`Remove filter: ${filterLabel(f)}`}
> >
<span>{filterLabel(f)}</span> <span>{filterLabel(f)}</span>

2
components/funnels/BreakdownDrawer.tsx
View File

@@ -68,7 +68,7 @@ export default function BreakdownDrawer({ siteId, funnelId, stepIndex, stepName,
onClick={() => setActiveDimension(dim)} onClick={() => setActiveDimension(dim)}
className={`px-3 py-1.5 text-xs font-medium rounded-lg whitespace-nowrap transition-colors ${ className={`px-3 py-1.5 text-xs font-medium rounded-lg whitespace-nowrap transition-colors ${
activeDimension === dim 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' : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-500 hover:bg-neutral-200 dark:hover:bg-neutral-700'
}`} }`}
> >

6
components/funnels/FunnelForm.tsx
View File

@@ -296,7 +296,7 @@ export default function FunnelForm({ siteId, initialData, onSubmit, submitLabel,
onClick={() => handleUpdateStep(index, 'category', 'page')} onClick={() => handleUpdateStep(index, 'category', 'page')}
className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${ className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
category === 'page' 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' : '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')} onClick={() => handleUpdateStep(index, 'category', 'event')}
className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${ className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
category === 'event' 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' : '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 ${ className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-colors ${
windowValue === preset.value && windowUnit === preset.unit 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' : 'bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700'
}`} }`}
> >

8
package-lock.json generated
View File

@@ -8,7 +8,7 @@
"name": "pulse-frontend", "name": "pulse-frontend",
"version": "0.15.0-alpha", "version": "0.15.0-alpha",
"dependencies": { "dependencies": {
"@ciphera-net/ui": "^0.3.4", "@ciphera-net/ui": "^0.3.6",
"@ducanh2912/next-pwa": "^10.2.9", "@ducanh2912/next-pwa": "^10.2.9",
"@icons-pack/react-simple-icons": "^13.13.0", "@icons-pack/react-simple-icons": "^13.13.0",
"@phosphor-icons/react": "^2.1.10", "@phosphor-icons/react": "^2.1.10",
@@ -1682,9 +1682,9 @@
} }
}, },
"node_modules/@ciphera-net/ui": { "node_modules/@ciphera-net/ui": {
"version": "0.3.4", "version": "0.3.6",
"resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.3.4/22dd1c925f48fe78dbe286a714aed7c209dd2034", "resolved": "https://npm.pkg.github.com/download/@ciphera-net/ui/0.3.6/886a376c94508da1c8b499404e9bf97ea37c9ba3",
"integrity": "sha512-TwDelE6naZvKhy6Id+IMinXn7R4WLBsN8CyScpOcOgNSmbSwdHNbkHE4kKUK8iIH/dlppRZzI2cCfwLOgfg9sg==", "integrity": "sha512-Utio35+w3/Yso3d/6ebobmWJOvF7VFS3GQRq7/FbpEYqWxpI2VrxUPoa0zQ9x5aCgXKabdQj+88Og+0pixQVJw==",
"dependencies": { "dependencies": {
"@phosphor-icons/react": "^2.1.10", "@phosphor-icons/react": "^2.1.10",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",

2
package.json
View File

@@ -12,7 +12,7 @@
"test:watch": "vitest" "test:watch": "vitest"
}, },
"dependencies": { "dependencies": {
"@ciphera-net/ui": "^0.3.4", "@ciphera-net/ui": "^0.3.6",
"@ducanh2912/next-pwa": "^10.2.9", "@ducanh2912/next-pwa": "^10.2.9",
"@icons-pack/react-simple-icons": "^13.13.0", "@icons-pack/react-simple-icons": "^13.13.0",
"@phosphor-icons/react": "^2.1.10", "@phosphor-icons/react": "^2.1.10",