cottongin
48db2fc70e
- Add global color presets: save/apply/delete sets of {bg, border, text}
colors as reusable presets, shown as mini badges in their own colors.
- Popover: preset badges under preview with + to save, click to apply,
× on hover to delete.
- Popup: dedicated Color Presets section with same functionality,
applying to light subreddit badge colors.
- Storage: colorPresets array added to settings defaults.
- Fix badge hover: change brightness(0.9) to brightness(1.1) so hover
brightens (activates) instead of dimming.
Co-authored-by: Cursor <cursoragent@cursor.com>
34 lines
2.1 KiB
Markdown
34 lines
2.1 KiB
Markdown
# Badge Polish: Gear Animation + Custom Color Picker
|
|
|
|
**Date:** 2026-08-26
|
|
**Commits:** 2abd18e..8462148 (6 commits)
|
|
|
|
## Task Description
|
|
|
|
Two improvements to the subreddit badge system:
|
|
1. Animate the gear icon reveal on hover (remove permanent padding gap)
|
|
2. Replace all native `<input type="color">` elements with a custom tabbed inline color picker
|
|
|
|
## Changes Made
|
|
|
|
### New Files
|
|
- `content/tweaks/color-picker.js` — Tabbed color picker widget with three panels: Palette (Tailwind/shadcn colors), Named Colors (148 CSS named colors), Custom (HSV picker with canvas SV square + hue bar). Exposes `window.RedditTweaks.colorPicker.create()` API.
|
|
|
|
### Modified Files
|
|
- `content/styles/badges.css` — Gear animation CSS (padding-right 6px→18px on hover, 150ms transition). Swatch div selector replacing `input[type="color"]`. Full picker widget CSS with dark mode support.
|
|
- `content/tweaks/color-popover.js` — Replaced native color inputs with swatch divs. Integrated custom picker between color rows and preview. Added popover repositioning when picker opens.
|
|
- `popup/popup.html` — Replaced 12 `<input type="color">` elements with swatch divs. Added color-picker.js script tag.
|
|
- `popup/popup.js` — Full rewrite to use swatch divs + custom picker. Added `getColorValue`/`setColorValue` helpers, debounced saves during drag, per-subreddit dirty-mode tracking via `onBeforeChange` callback.
|
|
- `popup/popup.css` — Updated swatch selectors. Added picker widget CSS. Added subreddit entry swatch styles.
|
|
- `manifest.json` — Added `color-picker.js` to content scripts array.
|
|
|
|
### Specs & Plans
|
|
- `docs/superpowers/specs/2026-08-26-badge-polish-design.md` — Updated design spec with tabbed picker interface
|
|
- `docs/superpowers/plans/2026-08-26-badge-polish.md` — Implementation plan
|
|
|
|
## Follow-up Items
|
|
- Manual browser verification on old.reddit.com (not possible in this session)
|
|
- `prefers-reduced-motion` media query for gear animation (accessibility)
|
|
- Touch/pointer events for Custom HSV tab (currently mouse-only)
|
|
- Escape key could close picker first, then popover on second press
|