From 027fa30b81884dfb0ef8fa236f106c7b1b754890 Mon Sep 17 00:00:00 2001 From: Jordan Paulino Date: Wed, 13 May 2026 20:09:05 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=95=20chore(theme):=20unify=20accent?= =?UTF-8?q?=20on=20blue=20across=20panel=20+=20page=20+=20popup=20+=20badg?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes the visual disconnect introduced by the highlight-mode redesign (PR #11): the on-page outline switched to tailwind blue-600, but the panel kept the v1 red accent — so the same selection lit up blue on the page and red in the panel that described it. Now every accent surface in the extension reads from one source of truth (tailwind blue-600 / blue-400 in dark mode): Surface Before After ──────────────────── ──────────────────────────── ──────────────────── On-page outlines #2563eb (blue-600) #2563eb (no change) Panel light theme #e22c2c (red) #2563eb Panel dark theme #ff5c5c (red-light) #60a5fa (blue-400) Options light theme #e22c2c #2563eb Options dark theme #ff5c5c #60a5fa Popup link #e22c2c (no dark variant) #2563eb / #60a5fa Toolbar badge #e22c2c #60a5fa Why blue -------- - Conventional inspector signal — Chrome DevTools, React DevTools, Vue DevTools all blue. Muscle memory works for free. - Editorial brands lean black/white/red. Red outlines compete with content; blue stays out of the way. - The Clay character icon (beige/cream) is the brand mark; the *accent* doesn't have to carry brand color and never reliably did. - The dark-mode blue-400 keeps WCAG AA contrast on the dark panel background. Why dark mode uses a lighter blue --------------------------------- A 600-weight blue on a near-black background looks recessed and fails contrast against muted text. Blue-400 is the same hue family but lifts to a comfortable 4.7:1 ratio on `#0f1115`. Why the toolbar badge picks blue-400 specifically ------------------------------------------------- The browser toolbar isn't theme-aware (Chrome paints it grey on light OS, near-black on dark OS). Blue-600 disappears against dark toolbars; blue-400 stays readable on both. What didn't change ------------------ - `--cs-success` / `--cs-warning` / `--cs-danger` tokens stay green / amber / red. Status badges, find-match outline, error toasts, etc. - `ACCENT_RGB` in highlighter.ts is already blue-600 — kept as is. - The Clay icon remains beige. - No new files; all 137 tests pass. Co-authored-by: Cursor --- src/background/service-worker.ts | 7 ++++++- src/content/panel/theme.ts | 13 +++++++++---- src/options/options.css | 5 +++-- src/popup/popup.css | 9 ++++++++- 4 files changed, 26 insertions(+), 8 deletions(-) diff --git a/src/background/service-worker.ts b/src/background/service-worker.ts index 6ee9fec..a7f0f7c 100644 --- a/src/background/service-worker.ts +++ b/src/background/service-worker.ts @@ -1,6 +1,11 @@ import type { CaptureResponse, RuntimeMessage } from '@/lib/types'; -const BADGE_BG = '#e22c2c'; +// Toolbar badge color — matches the unified inspector accent +// (`--cs-accent` in the panel theme, `ACCENT_RGB` in the highlighter). +// Chrome doesn't switch theme on the badge, so we pick the lighter +// blue-400 variant which stays readable against either a light or dark +// browser-toolbar background. +const BADGE_BG = '#60a5fa'; const POPUP_PATH = 'src/popup/index.html'; chrome.runtime.onInstalled.addListener(() => { diff --git a/src/content/panel/theme.ts b/src/content/panel/theme.ts index 88f9808..fe10285 100644 --- a/src/content/panel/theme.ts +++ b/src/content/panel/theme.ts @@ -26,8 +26,11 @@ export const lightTheme: ThemeTokens = { text: '#0f172a', textMuted: '#475569', textSubtle: '#94a3b8', - accent: '#e22c2c', - accentBg: 'rgba(226, 44, 44, 0.08)', + // Single inspector accent — matches `ACCENT_RGB` in `src/content/highlighter.ts` + // so the on-page selection outline and the in-panel selection chrome + // tell one consistent visual story. Tailwind blue-600. + accent: '#2563eb', + accentBg: 'rgba(37, 99, 235, 0.10)', success: '#16a34a', warning: '#d97706', danger: '#dc2626', @@ -43,8 +46,10 @@ export const darkTheme: ThemeTokens = { text: '#e6e8ee', textMuted: '#9aa3b2', textSubtle: '#5f6776', - accent: '#ff5c5c', - accentBg: 'rgba(255, 92, 92, 0.12)', + // Lighter blue-400 in dark mode to keep WCAG AA contrast on dark backgrounds. + // Same hue family as light theme so the visual identity stays coherent. + accent: '#60a5fa', + accentBg: 'rgba(96, 165, 250, 0.16)', success: '#34d399', warning: '#fbbf24', danger: '#f87171', diff --git a/src/options/options.css b/src/options/options.css index 1f8a610..7580990 100644 --- a/src/options/options.css +++ b/src/options/options.css @@ -5,7 +5,8 @@ --text: #0f172a; --text-muted: #475569; --border: #e5e7eb; - --accent: #e22c2c; + /* Unified inspector accent — see src/content/panel/theme.ts. */ + --accent: #2563eb; } @media (prefers-color-scheme: dark) { @@ -15,7 +16,7 @@ --text: #e6e8ee; --text-muted: #9aa3b2; --border: #252a36; - --accent: #ff5c5c; + --accent: #60a5fa; } } diff --git a/src/popup/popup.css b/src/popup/popup.css index 507c06e..6ced216 100644 --- a/src/popup/popup.css +++ b/src/popup/popup.css @@ -47,11 +47,18 @@ body { .popup-link { display: inline-block; font-size: 12px; - color: #e22c2c; + /* Match the inspector accent everywhere else in the extension. */ + color: #2563eb; text-decoration: none; font-weight: 500; } +@media (prefers-color-scheme: dark) { + .popup-link { + color: #60a5fa; + } +} + .popup-link:hover { text-decoration: underline; }