fix(duckduckgo): re-theme the redesigned homepage, search, and Duck.ai surfaces#2254
Open
ELHart05 wants to merge 4 commits into
Open
fix(duckduckgo): re-theme the redesigned homepage, search, and Duck.ai surfaces#2254ELHart05 wants to merge 4 commits into
ELHart05 wants to merge 4 commits into
Conversation
Member
|
Thanks for the contribution! It looks like you weren't able to fill out our userstyles update pull request template, which requires you to acknowledge among other things that you have read the contributing guidelines and have disclosed AI usage. Could you modify your comment above to fit in our template at https://github.com/catppuccin/userstyles/blob/main/.github/PULL_REQUEST_TEMPLATE/userstyle-update.md? Thanks again. |
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
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.
🗒 Checklist 🗒
🔧 What does this fix? 🔧
Resolves #2252.
Why
DuckDuckGo rolled out a redesign of the homepage, the search box, the new
Search / Duck.ai mode toggle, the Customize Homepage dialog, and the
/compare-privacypage. Every one of those surfaces moved to new CSS-moduleclass names and a new design-token layer, so the existing style no longer
reached them.
The damage was worst on Latte, where the unthemed defaults left washed-out
text, white-on-white buttons, grey-on-grey icons, and an off-palette navy hero
band. The three dark flavors fared a little better but still leaked
DuckDuckGo's brand blue and a lot of plain greys.
How
The redesigned homepage builds every
--theme-*variable on top of a small setof
--ds-*design-system tokens. Instead of chasing each component one by one,the style overrides those
--ds-*tokens once at the.theme-light/.theme-darkanchor, so the palette cascades down to everything built on them.From there it only has to patch the handful of places that hardcode a color,
ship a raster/SVG asset, or invert their text for a "selected" state.
A few things to know when reading the diff:
name_part__hash), so selectors use[class*="name_part"]to survive DuckDuckGo's hash churn.feedbackRadiovsfeedbackRadioGroup), the selector pins the exact one with a__suffix or a:not().clip-pathnames the icon(
ai-chat,ai-chat-color), so those are the hooks used to tell the mono andfilled variants apart.
What changed
Design tokens. Overrode the
--ds-*surface / text / icon / accent / statustokens at the theme anchor so the whole
--theme-*chain inherits the palette.Homepage. Page and search-box backgrounds, the Search / Duck.ai toggle
(track, selected pill, labels), the below-the-fold cards, the scroll pull-tab,
and the recolored DuckDuckGo logo. The "Protection. Privacy. Peace of mind."
pill is a secondary link-button whose label shipped grey — it now uses the text
color. Cards regained their hover lift, which the flat fill had hidden.
Search & autocomplete. Input, dropdown, hovered/selected rows, the submit
glyph (accent at rest, filled accent on focus/hover), and the "Ask Duck.ai"
footer row whose suffix and
Alt+Entershortcut shipped DuckDuckGo greys.Duck.ai mode toggle icon. The mono (unselected) glyph keeps a mauve spark.
The selected option swaps in DuckDuckGo's larger filled "color" glyph, so the
style drops its solid bubble to leave just the outline, tints the spark mauve,
and scales it down so the diamond stays the same size whether or not the option
is selected.
Customize Homepage dialog. Dialog surface, the selected/unselected option
cards (the unselected one shipped a near-invisible tint and no edge), and the
feedback thumbs, which shipped mismatched colors (one brand blue, one grey).
/compare-privacy. The hero shipped a brand navy band — swapped for a
@crustband that stays distinct from the page in both flavors without the off-palette
blue. The page logo is a bare
<img>(no class), so the logo rule was broadenedto recolor it there too; its wordmark now follows the text color and reads on
the light band. Also covered the comparison table's zebra rows, tooltips/feature
popovers, the extension CTA, checkboxes, and the side-menu close glyph.
Latte hairline borders. Latte is low-contrast, so its surfaces (search box,
cards, dialogs, toggle) get a
@surface2hairline so they stay legible againstthe pale page. This is kept in its own commit.
Testing
Each surface was checked against a live render of the current DuckDuckGo markup
in both light (Latte) and dark themes (Mocha, Frappe, Macchiato), homepage, autocomplete, the Search /
Duck.ai toggle, the Customize dialog, and
/compare-privacy.deno fmtanddeno task lint duckduckgoboth pass, and the style compiles for all fourflavors.
🔍 Reproduction Steps 🔍
Homepage — Latte
/compare-privacy — Latte
Dark (Mocha)
Details