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>
2.1 KiB
2.1 KiB
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:
- Animate the gear icon reveal on hover (remove permanent padding gap)
- 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). Exposeswindow.RedditTweaks.colorPicker.create()API.
Modified Files
content/styles/badges.css— Gear animation CSS (padding-right 6px→18px on hover, 150ms transition). Swatch div selector replacinginput[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. AddedgetColorValue/setColorValuehelpers, debounced saves during drag, per-subreddit dirty-mode tracking viaonBeforeChangecallback.popup/popup.css— Updated swatch selectors. Added picker widget CSS. Added subreddit entry swatch styles.manifest.json— Addedcolor-picker.jsto content scripts array.
Specs & Plans
docs/superpowers/specs/2026-08-26-badge-polish-design.md— Updated design spec with tabbed picker interfacedocs/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-motionmedia 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