` in the HTML template
+- Add `var picker = null;` and `var activeProp = null;` at module scope
+- Create picker lazily in `createPopover()` and insert between body and preview
+- Swatch `input` event → `click` handler that opens/toggles picker
+- Hex `input` handler syncs picker via `picker.setColor()` when open
+- `loadModeIntoInputs()` sets `swatch.style.backgroundColor` instead of `.value`
+- `updatePreview()` and `storeCurrentEdits()` read from `hex.value` instead of `swatch.value`
+- Mode toggle closes picker
+- `close()` closes picker and resets `activeProp`
+- `onDocumentMouseDown` excludes clicks inside `picker.el`
+- Remove the `active.type === "color"` check (no longer relevant)
+
+Full replacement content for `content/tweaks/color-popover.js`:
+
+```javascript
+(function () {
+ "use strict";
+
+ var popoverEl = null;
+ var currentSubreddit = null;
+ var currentAnchor = null;
+ var editState = { light: null, dark: null };
+ var selectedMode = "light";
+ var dirtyModes = { light: false, dark: false };
+ var hadOverride = { light: false, dark: false };
+ var picker = null;
+ var activeProp = null;
+
+ var els = {};
+
+ function getHelpers() {
+ return {
+ isDarkMode: window.RedditTweaks.badgeTweak.isDarkMode,
+ getColorPrefix: window.RedditTweaks.badgeTweak.getColorPrefix,
+ };
+ }
+
+ function hexValid(val) {
+ return /^#[0-9a-f]{6}$/i.test(val);
+ }
+
+ function colorToHex(val) {
+ if (!val) return "#ffffff";
+ return val;
+ }
+
+ function createPopover() {
+ var el = document.createElement("div");
+ el.className = "rt-color-popover";
+
+ el.innerHTML = [
+ '",
+ '
',
+ ' ",
+ "
",
+ '
',
+ '
',
+ '
Background',
+ '
",
+ "
",
+ '
',
+ '
Border',
+ '
",
+ "
",
+ '
",
+ "
",
+ '
',
+ ' ',
+ "
",
+ '",
+ ].join("\n");
+
+ document.body.appendChild(el);
+ popoverEl = el;
+
+ els.title = el.querySelector(".rt-popover-title");
+ els.closeBtn = el.querySelector(".rt-popover-close");
+ els.modeSelect = el.querySelector(".rt-popover-mode-select");
+ els.preview = el.querySelector(".rt-popover-preview-badge");
+ els.saveBtn = el.querySelector(".rt-btn-save");
+ els.cancelBtn = el.querySelector(".rt-btn-cancel");
+ els.resetBtn = el.querySelector(".rt-btn-reset");
+
+ els.rows = {};
+ var rows = el.querySelectorAll(".rt-popover-row");
+ for (var i = 0; i < rows.length; i++) {
+ var row = rows[i];
+ var prop = row.getAttribute("data-prop");
+ els.rows[prop] = {
+ swatch: row.querySelector(".rt-color-swatch"),
+ hex: row.querySelector(".rt-color-hex"),
+ };
+ }
+
+ picker = window.RedditTweaks.colorPicker.create();
+ var previewSection = el.querySelector(".rt-popover-preview");
+ el.insertBefore(picker.el, previewSection);
+
+ els.closeBtn.addEventListener("click", close);
+ els.cancelBtn.addEventListener("click", close);
+ els.saveBtn.addEventListener("click", save);
+ els.resetBtn.addEventListener("click", resetToDefault);
+
+ els.modeSelect.addEventListener("change", function () {
+ markModeDirty(selectedMode);
+ storeCurrentEdits();
+ selectedMode = els.modeSelect.value;
+ closePicker();
+ loadModeIntoInputs();
+ updatePreview();
+ });
+
+ var props = ["bg", "border", "text"];
+ for (var p = 0; p < props.length; p++) {
+ (function (prop) {
+ var row = els.rows[prop];
+ row.swatch.addEventListener("click", function () {
+ onSwatchClick(prop);
+ });
+ row.hex.addEventListener("input", function () {
+ markModeDirty(selectedMode);
+ if (hexValid(row.hex.value)) {
+ row.swatch.style.backgroundColor = row.hex.value;
+ row.hex.classList.remove("rt-input-error");
+ if (picker.isOpen() && activeProp === prop) {
+ picker.setColor(row.hex.value);
+ }
+ updatePreview();
+ } else {
+ row.hex.classList.add("rt-input-error");
+ }
+ });
+ })(props[p]);
+ }
+
+ document.addEventListener("mousedown", onDocumentMouseDown, true);
+ document.addEventListener("keydown", onDocumentKeyDown, true);
+ }
+
+ function onSwatchClick(prop) {
+ if (picker.isOpen() && activeProp === prop) {
+ closePicker();
+ return;
+ }
+ closePicker();
+ activeProp = prop;
+ var row = els.rows[prop];
+ picker.open(row.hex.value, function (hex) {
+ markModeDirty(selectedMode);
+ row.swatch.style.backgroundColor = hex;
+ row.hex.value = hex;
+ row.hex.classList.remove("rt-input-error");
+ updatePreview();
+ });
+ }
+
+ function closePicker() {
+ if (picker && picker.isOpen()) picker.close();
+ activeProp = null;
+ }
+
+ function onDocumentMouseDown(e) {
+ if (!popoverEl || !popoverEl.classList.contains("rt-popover-visible")) return;
+ if (popoverEl.contains(e.target)) return;
+ close();
+ }
+
+ function onDocumentKeyDown(e) {
+ if (e.key === "Escape" && popoverEl && popoverEl.classList.contains("rt-popover-visible")) {
+ close();
+ }
+ }
+
+ function getDefaultsForMode(settings, mode) {
+ return {
+ bg: settings[mode + ".subredditBgColor"],
+ border: settings[mode + ".subredditBorderColor"],
+ text: settings[mode + ".subredditTextColor"],
+ };
+ }
+
+ function getColorsForMode(settings, subredditName, mode) {
+ var entry = settings.subredditColors[subredditName];
+ if (entry && entry[mode]) {
+ return { bg: entry[mode].bg, border: entry[mode].border, text: entry[mode].text };
+ }
+ return getDefaultsForMode(settings, mode);
+ }
+
+ function markModeDirty(mode) {
+ dirtyModes[mode] = true;
+ }
+
+ function resetTracking() {
+ dirtyModes = { light: false, dark: false };
+ hadOverride = { light: false, dark: false };
+ }
+
+ function storeCurrentEdits() {
+ editState[selectedMode] = {
+ bg: els.rows.bg.hex.value,
+ border: els.rows.border.hex.value,
+ text: els.rows.text.hex.value,
+ };
+ }
+
+ function loadModeIntoInputs() {
+ var colors = editState[selectedMode];
+ var props = ["bg", "border", "text"];
+ for (var i = 0; i < props.length; i++) {
+ var prop = props[i];
+ var val = colorToHex(colors[prop]);
+ els.rows[prop].swatch.style.backgroundColor = val;
+ els.rows[prop].hex.value = val;
+ els.rows[prop].hex.classList.remove("rt-input-error");
+ }
+ }
+
+ function updatePreview() {
+ var bg = els.rows.bg.hex.value;
+ var border = els.rows.border.hex.value;
+ var text = els.rows.text.hex.value;
+ els.preview.style.background = bg;
+ els.preview.style.borderColor = border;
+ els.preview.style.color = text;
+ }
+
+ function positionPopover(anchorEl) {
+ var rect = anchorEl.getBoundingClientRect();
+ var gap = 6;
+
+ popoverEl.style.visibility = "hidden";
+ popoverEl.classList.add("rt-popover-visible");
+
+ var popRect = popoverEl.getBoundingClientRect();
+ var top = rect.bottom + window.scrollY + gap;
+ var left = rect.left + window.scrollX;
+
+ if (rect.bottom + gap + popRect.height > window.innerHeight) {
+ top = rect.top + window.scrollY - popRect.height - gap;
+ }
+
+ var maxLeft = document.documentElement.scrollWidth - popRect.width - 8;
+ if (left > maxLeft) left = maxLeft;
+ if (left < 8) left = 8;
+
+ popoverEl.style.top = top + "px";
+ popoverEl.style.left = left + "px";
+ popoverEl.style.visibility = "";
+ }
+
+ function applyDarkModeToPopover(settings) {
+ var helpers = getHelpers();
+ if (helpers.isDarkMode(settings)) {
+ popoverEl.classList.add("rt-dark");
+ } else {
+ popoverEl.classList.remove("rt-dark");
+ }
+ }
+
+ function open(badgeEl, subredditName, settings) {
+ if (!popoverEl) createPopover();
+
+ if (currentSubreddit === subredditName && popoverEl.classList.contains("rt-popover-visible")) {
+ close();
+ return;
+ }
+
+ currentSubreddit = subredditName;
+ currentAnchor = badgeEl;
+
+ resetTracking();
+ var existingEntry = settings.subredditColors[subredditName];
+ hadOverride.light = !!(existingEntry && existingEntry.light);
+ hadOverride.dark = !!(existingEntry && existingEntry.dark);
+
+ var helpers = getHelpers();
+ selectedMode = helpers.getColorPrefix(settings);
+
+ editState.light = getColorsForMode(settings, subredditName, "light");
+ editState.dark = getColorsForMode(settings, subredditName, "dark");
+
+ els.title.textContent = "r/" + subredditName;
+ els.modeSelect.value = selectedMode;
+ els.preview.textContent = "r/" + subredditName;
+
+ closePicker();
+ applyDarkModeToPopover(settings);
+ loadModeIntoInputs();
+ updatePreview();
+ positionPopover(badgeEl);
+ }
+
+ function close() {
+ if (!popoverEl) return;
+ closePicker();
+ popoverEl.classList.remove("rt-popover-visible");
+ currentSubreddit = null;
+ currentAnchor = null;
+ editState = { light: null, dark: null };
+ resetTracking();
+ }
+
+ async function save() {
+ if (!currentSubreddit) return;
+
+ storeCurrentEdits();
+
+ var settings = await window.RedditTweaks.loadSettings();
+ var entry = settings.subredditColors[currentSubreddit] || {};
+
+ if (dirtyModes.light || hadOverride.light) {
+ entry.light = editState.light;
+ }
+ if (dirtyModes.dark || hadOverride.dark) {
+ entry.dark = editState.dark;
+ }
+
+ if (!entry.light && !entry.dark) {
+ delete settings.subredditColors[currentSubreddit];
+ } else {
+ settings.subredditColors[currentSubreddit] = entry;
+ }
+ await window.RedditTweaks.saveSettings(settings);
+ close();
+ }
+
+ async function resetToDefault() {
+ if (!currentSubreddit) return;
+
+ var settings = await window.RedditTweaks.loadSettings();
+ delete settings.subredditColors[currentSubreddit];
+ await window.RedditTweaks.saveSettings(settings);
+
+ resetTracking();
+ editState.light = getDefaultsForMode(settings, "light");
+ editState.dark = getDefaultsForMode(settings, "dark");
+ closePicker();
+ loadModeIntoInputs();
+ updatePreview();
+ }
+
+ function refreshTheme(settings) {
+ if (!popoverEl || !popoverEl.classList.contains("rt-popover-visible")) return;
+ applyDarkModeToPopover(settings);
+ }
+
+ window.RedditTweaks = window.RedditTweaks || {};
+ window.RedditTweaks.colorPopover = {
+ open: open,
+ close: close,
+ refreshTheme: refreshTheme,
+ };
+})();
+```
+
+- [ ] **Step 3: Verify manually**
+
+Load `old.reddit.com`. Open the inline color popover by hovering a subreddit badge and clicking the gear. Verify:
+1. Color rows show swatch divs (colored rectangles) instead of native color pickers.
+2. Clicking a swatch opens the tabbed picker below the rows.
+3. Palette tab: clicking a Tailwind swatch updates the row's swatch + hex input + preview badge.
+4. Named tab: clicking a named color works the same.
+5. Custom tab: dragging the SV square and hue bar updates live.
+6. Clicking the same swatch toggles the picker closed.
+7. Clicking a different swatch switches the picker to that property.
+8. Typing a valid hex updates the picker's state.
+9. Mode toggle closes the picker and loads the other mode's colors.
+10. Cancel/Escape/click-outside dismisses the popover cleanly.
+11. Save persists the colors.
+12. Dark mode styling works (if RES night mode is available).
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add content/tweaks/color-popover.js content/styles/badges.css
+git commit -m "feat: integrate tabbed color picker into inline popover"
+```
+
+---
+
+### Task 4: Popup Integration
+
+**Files:**
+- Modify: `popup/popup.html:72-73`
+- Modify: `popup/popup.js`
+- Modify: `popup/popup.css:85-92`
+
+**Interfaces:**
+- Consumes: `window.RedditTweaks.colorPicker.create()` → `{ el, open, close, setColor, isOpen, destroy }`
+- Produces: Updated popup with custom picker for all global and per-subreddit color controls
+
+- [ ] **Step 1: Add script tag to `popup.html`**
+
+Add the color-picker script before popup.js:
+
+```html
+
+
+
+```
+
+- [ ] **Step 2: Replace `
` with swatch divs in `popup.html`**
+
+Replace all 12 `
` elements with `
` elements. Each keeps its `id` attribute.
+
+Light Mode Colors section:
+
+```html
+
+
Light Mode Colors
+
+
+
+
+```
+
+Dark Mode Colors section:
+
+```html
+
+
Dark Mode Colors
+
+
+
+
+```
+
+- [ ] **Step 3: Update swatch CSS selector in `popup.css`**
+
+Replace:
+
+```css
+fieldset input[type="color"] {
+ width: 40px;
+ height: 24px;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+ padding: 1px;
+ cursor: pointer;
+}
+```
+
+with:
+
+```css
+fieldset .rt-color-swatch {
+ width: 40px;
+ height: 24px;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+ cursor: pointer;
+ display: inline-block;
+ vertical-align: middle;
+}
+```
+
+- [ ] **Step 4: Rewrite `popup.js`**
+
+Replace the entire file. Key changes from the previous version:
+- Add `getColorValue(el)` / `setColorValue(el, val)` helpers for reading/writing swatch div values
+- Create a shared picker instance
+- Wire swatch click handlers for global colors in `init()`
+- Replace `el.value` reads/writes with helper calls for color elements
+- Replace `
` creation in `addSubredditEntry()` with swatch divs
+- Replace `el.addEventListener("input", saveFromControls)` for color elements with picker-based flow
+
+Full replacement content for `popup/popup.js`:
+
+```javascript
+(function () {
+ "use strict";
+
+ var picker = null;
+ var activeSwatchEl = null;
+
+ var COLOR_KEYS = [
+ "light.subredditBgColor",
+ "light.subredditBorderColor",
+ "light.subredditTextColor",
+ "light.commentsBgColor",
+ "light.commentsBorderColor",
+ "light.commentsTextColor",
+ "dark.subredditBgColor",
+ "dark.subredditBorderColor",
+ "dark.subredditTextColor",
+ "dark.commentsBgColor",
+ "dark.commentsBorderColor",
+ "dark.commentsTextColor",
+ ];
+
+ function colorToHex(val) {
+ if (!val) return "#ffffff";
+ return val;
+ }
+
+ function getColorValue(el) {
+ return el.dataset.value || "#ffffff";
+ }
+
+ function setColorValue(el, val) {
+ el.dataset.value = val;
+ el.style.backgroundColor = val;
+ }
+
+ function openPickerForSwatch(swatchEl) {
+ if (!picker) {
+ picker = window.RedditTweaks.colorPicker.create();
+ }
+
+ if (picker.isOpen() && activeSwatchEl === swatchEl) {
+ closePicker();
+ return;
+ }
+ closePicker();
+
+ activeSwatchEl = swatchEl;
+ var parent = swatchEl.closest("label") || swatchEl.parentNode;
+ parent.parentNode.insertBefore(picker.el, parent.nextSibling);
+
+ picker.open(getColorValue(swatchEl), function (hex) {
+ setColorValue(swatchEl, hex);
+ saveFromControls();
+ });
+ }
+
+ function closePicker() {
+ if (picker && picker.isOpen()) picker.close();
+ activeSwatchEl = null;
+ }
+
+ function populateControls(settings) {
+ document.getElementById("enabled").checked = settings.enabled;
+ document.getElementById("darkMode").value = settings.darkMode;
+
+ COLOR_KEYS.forEach(function (key) {
+ var el = document.getElementById(key);
+ if (el) setColorValue(el, colorToHex(settings[key]));
+ });
+
+ renderSubredditOverrides(settings.subredditColors || {});
+ }
+
+ function renderSubredditOverrides(overrides) {
+ var list = document.getElementById("subredditList");
+ list.innerHTML = "";
+
+ Object.entries(overrides).forEach(function (pair) {
+ addSubredditEntry(pair[0], pair[1]);
+ });
+ }
+
+ function addSubredditEntry(name, modeColors) {
+ var list = document.getElementById("subredditList");
+ var entry = document.createElement("div");
+ entry.className = "subreddit-entry";
+
+ var header = document.createElement("div");
+ header.className = "subreddit-entry-header";
+
+ var nameInput = document.createElement("input");
+ nameInput.type = "text";
+ nameInput.placeholder = "subreddit";
+ nameInput.value = name || "";
+
+ var removeBtn = document.createElement("button");
+ removeBtn.className = "btn-remove";
+ removeBtn.textContent = "\u00d7";
+ removeBtn.addEventListener("click", function () {
+ closePicker();
+ entry.remove();
+ saveFromControls();
+ });
+
+ header.appendChild(nameInput);
+ header.appendChild(removeBtn);
+
+ var modeRow = document.createElement("div");
+ modeRow.className = "subreddit-entry-mode";
+
+ var modeSelect = document.createElement("select");
+ modeSelect.innerHTML = '
';
+ modeSelect.value = "light";
+ modeRow.appendChild(modeSelect);
+
+ var colorsDiv = document.createElement("div");
+ colorsDiv.className = "subreddit-entry-colors";
+
+ var lightColors = modeColors && modeColors.light ? modeColors.light : {};
+ var darkColors = modeColors && modeColors.dark ? modeColors.dark : {};
+
+ var bgSwatch = document.createElement("div");
+ bgSwatch.className = "rt-color-swatch";
+ setColorValue(bgSwatch, colorToHex(lightColors.bg));
+ bgSwatch.title = "Background";
+
+ var borderSwatch = document.createElement("div");
+ borderSwatch.className = "rt-color-swatch";
+ setColorValue(borderSwatch, colorToHex(lightColors.border));
+ borderSwatch.title = "Border";
+
+ var textSwatch = document.createElement("div");
+ textSwatch.className = "rt-color-swatch";
+ setColorValue(textSwatch, colorToHex(lightColors.text));
+ textSwatch.title = "Text";
+
+ colorsDiv.appendChild(bgSwatch);
+ colorsDiv.appendChild(borderSwatch);
+ colorsDiv.appendChild(textSwatch);
+
+ entry._colorState = {
+ light: { bg: getColorValue(bgSwatch), border: getColorValue(borderSwatch), text: getColorValue(textSwatch) },
+ dark: { bg: colorToHex(darkColors.bg), border: colorToHex(darkColors.border), text: colorToHex(darkColors.text) },
+ };
+ entry._hadOverride = {
+ light: !!(modeColors && modeColors.light),
+ dark: !!(modeColors && modeColors.dark),
+ };
+ entry._dirtyModes = { light: false, dark: false };
+
+ modeSelect.addEventListener("change", function () {
+ closePicker();
+ var prev = modeSelect.value === "dark" ? "light" : "dark";
+ entry._dirtyModes[prev] = true;
+ entry._colorState[prev] = { bg: getColorValue(bgSwatch), border: getColorValue(borderSwatch), text: getColorValue(textSwatch) };
+ var next = entry._colorState[modeSelect.value];
+ setColorValue(bgSwatch, next.bg);
+ setColorValue(borderSwatch, next.border);
+ setColorValue(textSwatch, next.text);
+ });
+
+ [bgSwatch, borderSwatch, textSwatch].forEach(function (swatch) {
+ swatch.addEventListener("click", function () {
+ openPickerForSwatch(swatch);
+ });
+ });
+
+ nameInput.addEventListener("change", function () {
+ saveFromControls();
+ });
+
+ entry.appendChild(header);
+ entry.appendChild(modeRow);
+ entry.appendChild(colorsDiv);
+
+ entry._nameInput = nameInput;
+ entry._bgSwatch = bgSwatch;
+ entry._borderSwatch = borderSwatch;
+ entry._textSwatch = textSwatch;
+ entry._modeSelect = modeSelect;
+
+ list.appendChild(entry);
+ }
+
+ function collectSubredditOverrides() {
+ var overrides = {};
+ var entries = document.querySelectorAll(".subreddit-entry");
+ entries.forEach(function (entry) {
+ var name = entry._nameInput.value.trim().replace(/^r\//, "");
+ if (!name) return;
+
+ var currentMode = entry._modeSelect.value;
+ entry._colorState[currentMode] = {
+ bg: getColorValue(entry._bgSwatch),
+ border: getColorValue(entry._borderSwatch),
+ text: getColorValue(entry._textSwatch),
+ };
+
+ var entryOverrides = {};
+ if (entry._hadOverride.light || entry._dirtyModes.light) {
+ entryOverrides.light = entry._colorState.light;
+ }
+ if (entry._hadOverride.dark || entry._dirtyModes.dark) {
+ entryOverrides.dark = entry._colorState.dark;
+ }
+
+ if (entryOverrides.light || entryOverrides.dark) {
+ overrides[name] = entryOverrides;
+ }
+ });
+ return overrides;
+ }
+
+ async function saveFromControls() {
+ var settings = {
+ enabled: document.getElementById("enabled").checked,
+ darkMode: document.getElementById("darkMode").value,
+ subredditColors: collectSubredditOverrides(),
+ };
+
+ COLOR_KEYS.forEach(function (key) {
+ var el = document.getElementById(key);
+ if (el) settings[key] = getColorValue(el);
+ });
+
+ try {
+ await window.RedditTweaks.saveSettings(settings);
+ } catch (err) {
+ console.error("Reddit Tweaks: failed to save settings", err);
+ }
+ }
+
+ async function init() {
+ var settings = await window.RedditTweaks.loadSettings();
+ populateControls(settings);
+
+ document.getElementById("enabled").addEventListener("change", saveFromControls);
+ document.getElementById("darkMode").addEventListener("change", saveFromControls);
+
+ COLOR_KEYS.forEach(function (key) {
+ var el = document.getElementById(key);
+ if (el) {
+ el.addEventListener("click", function () {
+ openPickerForSwatch(el);
+ });
+ }
+ });
+
+ document.getElementById("addSubreddit").addEventListener("click", function () {
+ closePicker();
+ addSubredditEntry("", {});
+ });
+
+ document.getElementById("resetLight").addEventListener("click", async function () {
+ closePicker();
+ var settings = await window.RedditTweaks.loadSettings();
+ var DEFAULTS = window.RedditTweaks.DEFAULTS;
+ Object.keys(DEFAULTS).forEach(function (key) {
+ if (key.startsWith("light.")) settings[key] = DEFAULTS[key];
+ });
+ await window.RedditTweaks.saveSettings(settings);
+ populateControls(settings);
+ });
+
+ document.getElementById("resetDark").addEventListener("click", async function () {
+ closePicker();
+ var settings = await window.RedditTweaks.loadSettings();
+ var DEFAULTS = window.RedditTweaks.DEFAULTS;
+ Object.keys(DEFAULTS).forEach(function (key) {
+ if (key.startsWith("dark.")) settings[key] = DEFAULTS[key];
+ });
+ await window.RedditTweaks.saveSettings(settings);
+ populateControls(settings);
+ });
+
+ document.getElementById("resetAll").addEventListener("click", async function () {
+ if (confirm("Reset all settings to defaults?")) {
+ closePicker();
+ await window.RedditTweaks.resetSettings();
+ var settings = await window.RedditTweaks.loadSettings();
+ populateControls(settings);
+ }
+ });
+ }
+
+ init();
+})();
+```
+
+- [ ] **Step 5: Add swatch styles for subreddit entries to `popup.css`**
+
+The subreddit entry swatches need sizing. Add after the `.subreddit-entry-colors` block:
+
+```css
+.subreddit-entry-colors .rt-color-swatch {
+ width: 40px;
+ height: 24px;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+ cursor: pointer;
+}
+```
+
+- [ ] **Step 6: Verify manually**
+
+Open the extension popup (click the toolbar icon). Verify:
+1. All global color controls show swatch divs (colored rectangles) instead of native color pickers.
+2. Clicking a global swatch opens the tabbed picker below it.
+3. All three tabs work: Palette, Named Colors, Custom.
+4. Selecting a color updates the swatch and saves settings.
+5. Per-subreddit entries also use swatch divs.
+6. Clicking a per-subreddit swatch opens the picker.
+7. Mode toggle in per-subreddit entries closes any open picker.
+8. Adding a new subreddit entry closes any open picker.
+9. Reset buttons work and close any open picker.
+10. Only one picker is open at a time across all swatches.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add popup/popup.html popup/popup.js popup/popup.css
+git commit -m "feat: integrate tabbed color picker into extension popup"
+```
diff --git a/docs/superpowers/specs/2026-08-26-badge-polish-design.md b/docs/superpowers/specs/2026-08-26-badge-polish-design.md
index d07664f..524f294 100644
--- a/docs/superpowers/specs/2026-08-26-badge-polish-design.md
+++ b/docs/superpowers/specs/2026-08-26-badge-polish-design.md
@@ -58,9 +58,53 @@ The native `
` delegates to the OS-level color picker. On mac
### Solution
-Replace all `
` elements — in both the inline popover and the extension popup — with a custom SV+Hue picker widget. The picker renders inline within the containing UI (popover or popup), provides full color control, and stays visually consistent with the extension's design.
+Replace all `
` elements — in both the inline popover and the extension popup — with a custom color picker widget. The picker renders inline within the containing UI (popover or popup), provides full color control, and stays visually consistent with the extension's design.
-### Picker Anatomy
+### Picker Structure — Tabbed Interface
+
+The picker uses three tabs, providing different ways to choose a color:
+
+```
+┌──────────────────────────────┐
+│ [Palette] [Named] [Custom] │ ← tab bar
+├──────────────────────────────┤
+│ │
+│ (active tab content) │
+│ │
+├──────────────────────────────┤
+│ [■ swatch] #c84a20 │ ← current color + hex input (always visible)
+└──────────────────────────────┘
+```
+
+The hex text input and a small swatch preview of the current color are always visible below the tab content, regardless of which tab is active. This lets the user see and edit the exact value at all times.
+
+**Tab persistence:** The picker remembers which tab was last used and reopens to that tab. The initial default (before any tab has been selected) is the Palette tab.
+
+### Tab 1: Palette (Tailwind/shadcn Colors)
+
+A grid of color swatches from the Tailwind CSS / shadcn color palette. The palette is organized by hue family (rows) with shades as columns.
+
+**Hue families (rows):** red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose. Gray-scale families (slate, gray, zinc, neutral, stone) are grouped in a separate section at the top or bottom.
+
+**Shades (columns):** 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 (11 per row).
+
+**Layout:** Each swatch is a small square (~16×16px). The grid is scrollable vertically within a fixed-height container (~180px) to avoid the picker growing too tall. Hue family labels appear as small text on the left of each row, or omitted if space is tight (the colors are self-explanatory when grouped).
+
+**Interaction:** Clicking a swatch immediately selects that color — updates the hex input, the swatch preview, and calls `onChange`. The selected swatch gets a subtle highlight border.
+
+### Tab 2: Named Colors (HTML/CSS Named Colors)
+
+All 148 CSS named colors displayed as labeled swatches in a scrollable grid.
+
+**Layout:** Swatches are ~24×18px with the color name displayed below or beside each swatch in small text (~9px). The grid is sorted alphabetically by default. The container is scrollable within the same fixed height (~180px).
+
+**Interaction:** Same as the palette tab — clicking selects the color immediately.
+
+### Tab 3: Custom (SV+Hue Picker)
+
+The freeform picker for precise color selection.
+
+#### Picker Anatomy
```
┌──────────────────────────────┐
@@ -75,11 +119,11 @@ Replace all `
` elements — in both the inline popover and t
└──────────────────────────────┘
```
-### Color Model
+#### Color Model
The picker uses HSV internally (hue, saturation, value). HSV maps naturally to the SV square (X = saturation, Y = value) and hue bar (X = hue). Colors are converted to/from hex (`#rrggbb`) for storage, display, and sync with the hex text input.
-### SV Square
+#### SV Square
A `