feat: improved captcha look#2798
Open
HughParry wants to merge 7 commits into
Open
Conversation
Restyle the widget, image, frictionless (placeholder/PoW checkbox) and puzzle captchas into a unified Material 3 "tonal" key off the Prosopo brand purple, with a matching dark-mode scheme. - theme.ts: repurpose palette to the purple ramp + add M3 tokens (primaryContainer, surface/onSurface, muted, titleAccent, checkbox, overlay, tile, shape radii, elevation) for both light and dark - widget: M3 surface + elevation + 16px radius, purple two-tone spinner, custom-painted purple checkbox with tick (themes correctly in dark) - image: M3 card + tonal header, rounded tiles with purple selection overlay + check badge + scale-in, pill buttons, tonal reload - puzzle: theme-driven purple surface, piece, target ring and header Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Follow-up to the Material 3 purple tonal redesign. Per design feedback the
widgets were too rounded ("everything is round") and drop shadows read as
dated, so:
- shape scale dialled back: card 28->12px, full-pill buttons 100->8px,
widget 16->8px, header 18->8px, tiles 14->6px / 16->8px
- WIDGET_BORDER_RADIUS 16->8px, Modal 28->12px, puzzle surface 20->12px,
custom checkbox 8->6px
- elevation tokens flattened to none in both themes (widget, widgetHover,
card, buttonPrimary) so borders, not shadows, separate the surfaces
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
- buttons use minHeight so wrapped localized labels aren't clipped - reload button hover uses a primaryContainer.hover state-layer token (visible in dark mode, unlike the brightness filter) - checkbox falls back to the native control in forced-colors mode - puzzle target/piece colors move into theme.palette.puzzle tokens, removing the hard-coded purples and isDark ternaries - drop the dead all-none elevation tokens and the CSS wired to them, plus unused grey/purple/muted palette entries - surface/onSurface/background/font colors derive from single constants - reuse the selected predicate for the tile overlay; format all files Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Reverts the styling changes from fa6e170 (style(widget): rein in roundedness and drop decorative shadows): shape scale back to the round M3 values (card 28px, pill buttons, widget 16px, header 18px, tiles 14/16px), WIDGET_BORDER_RADIUS 16px, Modal 28px, puzzle surface 20px, checkbox 8px, and the elevation tokens back to real shadows with their widget/card/button wiring (re-added where the earlier cleanup had removed the then-all-none tokens). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…+ changeset Use encodeURIComponent for the SVG data-URI tick color instead of a single-occurrence String.replace (CodeQL js/incomplete-sanitization). Add changeset for the improved captcha look across the widget packages. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
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
2 participants
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.
CI Check Do Not Merge
🤖 Generated with Claude Code