Re-skin Wix cookie consent banner + settings modal for the dark theme - #38
Merged
Conversation
Wix's injected consent UI ([data-hook^="ccsu-"]) ships a light "wix.com" look (white surfaces, Madefor font, outlined pill buttons) that clashes on this dark site and inherits our light --fg onto white = unreadable. Re-skin the bottom banner and the "Advanced" settings modal onto the site's design tokens, all via global !important rules on the stable data-hooks (the consent bundle injects its stylesheet after ours and regenerates its hashed classes each build). - Dark card surfaces, accent primary, Inter body / mono controls. - Keyboard focus: on-brand :focus-visible rings (the bundle's native ring is built for its light theme and washes out on dark) — WCAG 2.4.7 / 1.4.11. - Consent symmetry: "Decline all" kept at full --fg so reject reads as an equal-weight choice to accept (not a demoted, dark-pattern nudge). - Pin every banner control (incl. "Advanced"/decline links) to --mono so none falls back to the unloaded Madefor (serif) — they declare their own font-family, which beats the inherited wrapper rule. - Modal headings in mono, scaled to 0.85em so the wider mono glyphs keep the bundle's row footprint instead of wrapping and misaligning the toggles. - Modal panel matched via `> section` AND `> div:not([data-hook])`, and accent-color on the wrapper to theme native consent toggles. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
guyofeck
marked this pull request as ready for review
June 2, 2026 10:16
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.
What
Wix's injected cookie-consent UI (
[data-hook^="ccsu-"]) ships a light "wix.com" look — white surfaces, Madefor brand font, outlined pill buttons — that clashes on this dark site (and, setting no text color of its own, inherits our light--fgonto white → unreadable). This re-skins the bottom banner and the "Advanced" settings modal onto the site's design tokens.All overrides are global
!importantrules on the stable data-hooks (the consent bundle injects its stylesheet after ours and regenerates its hashed classes each build), inLayout.astro— the single shared<head>on every page, withis:globalbecause the banner is appended outside our component tree.--mono(incl. "Advanced"/decline links, which otherwise fell back to unloaded Madefor → serif):focus-visiblerings — the bundle's native ring is built for its light theme and washes out on dark (WCAG 2.4.7 / 1.4.11)--fgso reject reads as an equal-weight choice to accept, not a demoted dark-pattern nudge0.85emso the wider mono glyphs keep the bundle's row footprint (no wrapping / toggle misalignment); panel matched via> sectionand> div:not([data-hook])for markup-churn robustness;accent-colorthemes native togglesStyling only — no other files touched. Tokens (
--bg-card,--accent, …) andwelcome.cssimports already exist, so it resolves with no new dependencies.Notes
🤖 Generated with Claude Code