Color settings: accept typed hex / rgb() values (#91)#97
Merged
Conversation
Every color setting was a native <input type="color"> swatch only — no way to paste or type an exact value. Add a synced text field beside each swatch that accepts hex (#RGB / #RRGGBB, with or without '#') or rgb()/rgba(), normalizes to #rrggbb, and applies on Enter/blur. Invalid input is flagged (red) and not applied. Implementation reuses each picker's existing apply+persist logic: on a valid parse the text field writes the normalized hex back to the swatch and dispatches its 'input' event, so no per-picker wiring is duplicated. The swatch→text sync keeps the field current when the native picker is used. One generic pass over `#settings-panel input[type="color"]` covers all 11 pickers (and any future ones). The two grouped rows (Roll / Axis colors) stack their label above a full-width row of swatch-over-text cells so all three fit the 240px panel. Closes #91 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01HwZjBdVgWqxqCoKkXsZnr4
🔎 PR #97 preview — torn downThis PR is closed; its web preview and desktop prerelease have been removed. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #91 — add the ability to set colors by text value (hex or RGB), not just the native swatch picker.
Each of the 11 color settings now has a compact text field beside its swatch. It accepts:
#RRGGBB,#RGB, with or without the leading#rgb(r,g,b)andrgba(r,g,b,a)(0–255 components; alpha ignored)Input is normalized to
#rrggbband applied on Enter or blur. Invalid text is flagged red and not applied. Editing the native swatch keeps the text field in sync.How it works
One generic pass over
#settings-panel input[type="color"]wraps every picker (present and future). On a valid parse, the text field writes the normalized hex back to the swatch and dispatches the swatch'sinputevent — so every existing per-picker apply +localStoragehandler runs unchanged; no per-color wiring is duplicated.Layout
[ text ][swatch]on the right.Changes
apps/overlay/src/index.html— CSS for.color-combo/.color-text/ grouped.color-group; the two grouped rows getcolor-row-stacked+color-groupclasses.apps/overlay/src/js/app.js—normalizeColor()parser +attachColorText(), applied to all settings color inputs.Test
normalizeColor()unit-checked against 14 cases (hex 3/6-digit, with/without#, rgb/rgba, whitespace, out-of-range → rejected, junk → rejected). All pass.node --check apps/overlay/src/js/app.jspasses.🤖 Generated with Claude Code