v0.7.1

.claude/settings.json

@@ -1,7 +1,7 @@
 {
   "permissions": {
     "allow": [
-      "Bash(ls -la c:/Users/BSOR/CascadeProjects/Cesar/*.png c:/Users/BSOR/CascadeProjects/Cesar/static/icons/ c:/Users/BSOR/CascadeProjects/Cesar/store-assets/)"
+
     ]
   }
 }

CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to César are documented here.
 
+## [0.7.1] — 2026-03-20
+
+### Changed
+- All hardcoded color values migrated to CSS custom properties (`--color-*` in popup, `--si-*` in overlay) for maintainability
+- Decorative SVGs marked with `aria-hidden="true"`; toggle elements use `role="switch"`
+- Overlay root element receives `aria-label`; comment toggle uses `aria-expanded`
+- Comment body animates with `max-height` transition instead of `display:none` toggle
+- `postsFlagged` display sanitized; inline style manipulation replaced with CSS classes
+- Icon paths in manifest updated to `static/` directory
+
 ## [0.7.0] — 2026-03-20
 
 ### Added
@@ -48,6 +58,20 @@ All notable changes to César are documented here.
 - Popup fetches provider names from background instead of hardcoded map
 - Feed scanner replaced `setInterval` polling with MutationObserver-only + debounce
 - Unused imports removed from `build.js`
+- All hardcoded colors migrated to CSS custom properties (`--color-*` in popup, `--si-*` in overlay)
+- SVG icons annotated with `aria-hidden="true"` for screen readers
+- Popup toggles use `role="switch"` for correct ARIA semantics
+- Toggle wrappers changed from `<span>` to `<label>` for proper form association
+- Overlay `aria-label` set per state (analyzing, cleared, severity + confidence)
+- Comment toggle tracks `aria-expanded` state
+- Comment body animates via `max-height` transition instead of `display: none`
+- New `chevron` icon in icon set; inline arrow SVGs replaced with shared icon
+- Popup logo updated to shield-with-checkmark design
+- `postsFlagged` display sanitized with `Number() || 0` to prevent `undefined`
+- Popup save button feedback uses CSS class instead of inline `style.color`
+- Removed unused `.sourceit-explanation` and `.sourceit-reason-cleared` CSS rules
+- Overlay `will-change` removed (was causing unnecessary compositing layers)
+- Color System section added to CLAUDE.md
 
 ## [0.5.4] — 2026-03-15
 

CLAUDE.md

@@ -36,6 +36,40 @@ into IIFE format in `dist/`. Static assets and `debug.js` are copied verbatim.
 - Chrome APIs are mocked in `tests/setup.js`
 - Focus testing on regex patterns and detection scoring logic
 
+## Color System (Dark Theme)
+All colors are managed via CSS custom properties in `popup.css` (prefix `--color-`) and `overlay.css` (prefix `--si-`).
+
+### Backgrounds
+- `#0c0c18` — darkest (popup body)
+- `#13132a` — cards/panels (popup header)
+- `#1a1a2e` → `#16213e` — overlay gradient
+
+### Text
+- `#e8e8ee` — primary
+- `#c0c0d0` — secondary
+- `#d0d0e0` — heading (popup logo, count)
+- `#9a9ab0` — muted (labels, descriptions)
+- `#606078` — tertiary (group labels)
+
+### Accents
+- `#7bc47b` — green (toggle on, success)
+- `#7bed9f` — bright green (overlay confirm, AI badge, copy success)
+- `#ff4757` — red (high severity border)
+- `#ff6b81` — soft red (high severity text, icon)
+- `#ff8a9c` — soft red (popup error text)
+- `#ffa502` — orange (medium severity border, warning)
+- `#ffbe76` — soft orange (medium severity text)
+- `#3742fa` — blue (low severity border)
+- `#AFA9EC` — purple (comment section accent)
+- `#2e7d32` — dark green (cleared overlay border)
+
+### Overlay utility
+- `#747d8c` — muted (dismiss, detail labels)
+- `#a4b0be` — subdued (analyzing text, base button)
+
+### Borders
+- `rgba(255,255,255,0.04)` to `rgba(255,255,255,0.1)` — subtle to strong
+
 ## Style
 - ESLint + Prettier enforced
 - Single quotes, trailing commas, 100 char width

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "César — Give back to César",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Detects parasitic lead magnets on LinkedIn — posts that gate access to content the author didn't create.",
   "permissions": ["storage", "activeTab"],
   "host_permissions": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cesar-extension",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "private": true,
   "type": "module",
   "scripts": {

src/content/ui/overlay-manager.js

@@ -6,6 +6,7 @@ import { escapeHTML } from '../../shared/sanitize.js';
 const POST_CONTENT_SEL = '.feed-shared-update-v2__content';
 
 const SEVERITY_LABELS = { high: 'HIGH', medium: 'MED', low: 'LOW' };
+const SEVERITY_ARIA = { high: 'High severity', medium: 'Medium severity', low: 'Low severity' };
 
 export class OverlayManager {
   /** Remove existing overlays and their event listeners */
@@ -22,6 +23,7 @@ export class OverlayManager {
 
     const overlay = document.createElement('div');
     overlay.className = 'sourceit-overlay sourceit-severity-medium';
+    overlay.setAttribute('aria-label', 'César — analyzing post');
     const ac = new AbortController();
     overlay._abortController = ac;
 
@@ -62,6 +64,7 @@ export class OverlayManager {
 
     const overlay = document.createElement('div');
     overlay.className = 'sourceit-overlay sourceit-cleared';
+    overlay.setAttribute('aria-label', 'César — post cleared');
     const ac = new AbortController();
     overlay._abortController = ac;
 
@@ -111,6 +114,7 @@ export class OverlayManager {
     const severity = confidence >= 70 ? 'high' : confidence >= 50 ? 'medium' : 'low';
     overlay.classList.add(`sourceit-severity-${severity}`);
     overlay.setAttribute('data-score', confidence);
+    overlay.setAttribute('aria-label', `César — ${SEVERITY_ARIA[severity]} detection, ${confidence}%`);
 
     const tpMatch = regexResult.matches.find((m) => m.axis === 'third-party');
     const ctaMatch = regexResult.matches.find((m) => m.axis === 'gating');
@@ -138,14 +142,14 @@ export class OverlayManager {
         </div>
         ${suggestedComment ? `
         <div class="sourceit-comment-draft sourceit-collapsed">
-          <button class="sourceit-comment-toggle">
+          <button class="sourceit-comment-toggle" aria-expanded="false">
             <span>${ICONS.comment} Comment with source</span>
-            <span class="sourceit-toggle-arrow"><svg viewBox="0 0 10 6" width="10" height="6" fill="none"><path d="M1 1l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+            <span class="sourceit-toggle-arrow">${ICONS.chevron}</span>
           </button>
           <div class="sourceit-comment-body">
             <div class="sourceit-comment-text-row">
               <p class="sourceit-comment-text">${suggestedComment}</p>
-              <button class="sourceit-btn-copy" title="Copy">${ICONS.copy}</button>
+              <button class="sourceit-btn-copy" title="Copy" aria-label="Copy comment">${ICONS.copy}</button>
             </div>
             <button class="sourceit-btn sourceit-btn-post-comment">${ICONS.comment} Post comment</button>
           </div>
@@ -247,7 +251,8 @@ export class OverlayManager {
         (e) => {
           e.stopPropagation();
           const draft = overlay.querySelector('.sourceit-comment-draft');
-          draft.classList.toggle('sourceit-collapsed');
+          const isCollapsed = draft.classList.toggle('sourceit-collapsed');
+          commentToggle.setAttribute('aria-expanded', String(!isCollapsed));
         },
         opts
       );