From cb49b4e7cf99b21f56ba5de8f9d8d966c263f45e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 10 Sep 2026 04:04:54 +0000
Subject: [PATCH] Fix off-brand purple gradients and glassmorphism per Primer
 brand review

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/styles/style.css | 23 ++++++++---------------
 test/a11y.test.js    |  2 +-
 test/slm.test.js     |  3 +--
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/src/styles/style.css b/src/styles/style.css
index ef8e337..e841825 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -497,8 +497,7 @@ a:hover {
 }
 .option-group.archetype-grid .option-card.priority-archetype {
   border-color: rgba(var(--accent-blue-rgb), 0.35);
-  background:
-    linear-gradient(90deg, rgba(var(--accent-blue-rgb), 0.08) 0%, rgba(var(--accent-blue-rgb), 0.02) 45%, var(--bg-card) 100%);
+  background: rgba(var(--accent-blue-rgb), 0.05);
 }
 .option-card.selected {
   border-color: var(--accent-blue);
@@ -827,16 +826,14 @@ a:hover {
   box-shadow: none;
 }
 .btn-assistant {
-  background: linear-gradient(135deg, var(--agent-purple), var(--agent-purple-dark));
+  background: var(--agent-purple-dark);
   border-color: var(--agent-purple-dark);
-  box-shadow: 0 2px 8px rgba(var(--agent-purple-rgb), 0.35);
 }
 .btn-assistant:hover:not(:disabled) {
-  background: var(--agent-purple-dark);
-  box-shadow: 0 4px 12px rgba(var(--agent-purple-rgb), 0.5);
+  background: var(--agent-purple);
 }
 .btn-assistant:disabled {
-  background: linear-gradient(135deg, var(--agent-purple), var(--agent-purple-dark));
+  background: var(--agent-purple-dark);
   border-color: var(--agent-purple-dark);
 }
 .btn-evals {
@@ -1025,7 +1022,6 @@ a:hover {
 }
 .copy-modal::backdrop {
   background: rgba(var(--agent-purple-rgb), 0.35);
-  backdrop-filter: blur(4px);
   animation: copyModalBackdrop 0.3s ease-out;
 }
 .copy-modal-card {
@@ -1033,12 +1029,9 @@ a:hover {
   overflow: hidden;
   padding: 2.25rem;
   text-align: center;
-  background:
-    radial-gradient(circle at 50% 0, rgba(var(--agent-purple-rgb), 0.17), transparent 46%),
-    var(--bg-card);
-  border: 1px solid rgba(var(--agent-purple-rgb), 0.5);
+  background: var(--bg-card);
+  border: 1px solid var(--agent-purple);
   border-radius: var(--radius-lg);
-  box-shadow: 0 24px 80px rgba(var(--agent-purple-rgb), 0.35);
 }
 .copy-modal-close {
   position: absolute;
@@ -1097,7 +1090,7 @@ a:hover {
   height: 3.75rem;
   place-items: center;
   color: var(--control-fg-on-emphasis);
-  background: linear-gradient(135deg, var(--agent-purple), var(--agent-purple-dark));
+  background: var(--agent-purple-dark);
   border-radius: var(--radius-lg);
   animation: copyModalIcon 0.6s 0.12s cubic-bezier(0.16, 1, 0.3, 1) both;
 }
@@ -1180,7 +1173,7 @@ a:hover {
   width: 100%;
   justify-content: center;
   color: var(--control-fg-on-emphasis);
-  background: linear-gradient(135deg, var(--agent-purple), var(--agent-purple-dark));
+  background: var(--agent-purple-dark);
   border-color: var(--agent-purple-dark);
 }
 .copy-modal-action:hover {
diff --git a/test/a11y.test.js b/test/a11y.test.js
index 2f028a2..4f3afd6 100644
--- a/test/a11y.test.js
+++ b/test/a11y.test.js
@@ -33,7 +33,7 @@ describe('archetype grid keyboard accessibility', () => {
 
   it('adds a subtle visual highlight for pinned priority archetypes', () => {
     const body = ruleBody('.option-group.archetype-grid .option-card.priority-archetype');
-    expect(body).toMatch(/linear-gradient/);
+    expect(body).toMatch(/rgba\(var\(--accent-blue-rgb\)/);
   });
 
   it('exposes the archetype options as a radio group', () => {
diff --git a/test/slm.test.js b/test/slm.test.js
index dc9e83a..1f85e79 100644
--- a/test/slm.test.js
+++ b/test/slm.test.js
@@ -510,13 +510,12 @@ describe('assistant markup', () => {
     const start = css.indexOf('.btn-assistant {');
     expect(start).toBeGreaterThan(-1);
     const rule = css.slice(start, css.indexOf('}', start));
-    expect(rule).toContain('var(--agent-purple)');
     expect(rule).toContain('var(--agent-purple-dark)');
 
     const hoverStart = css.indexOf('.btn-assistant:hover:not(:disabled) {');
     expect(hoverStart).toBeGreaterThan(-1);
     const hoverRule = css.slice(hoverStart, css.indexOf('}', hoverStart));
-    expect(hoverRule).toContain('var(--agent-purple-dark)');
+    expect(hoverRule).toContain('var(--agent-purple)');
   });
 
   it('announces status updates to assistive technology', () => {