You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This PR applies the Rebranding UX on the macOS Release Notes:
Buttons (Retry / Reload) must have rounded corners
We're also applying the Color accent-text-primary in the bottom link (See what else we've been working on)
Testing Steps
Screenshots
Now
Before
Checklist
Please tick all that apply:
I have tested this change locally
I have tested this change locally in all supported browsers
This change will be visible to users
I have added automated tests that cover this change
I have ensured the change is gated by config
This change was covered by a ship review
This change was covered by a tech design
Any dependent config has been merged
Note
Low Risk
CSS-only, page-scoped styling on the macOS Release Notes UI with no logic, data, or auth changes.
Overview
Applies the macOS Rebranding UX to the Release Notes special page via scoped CSS only.
The Release Notes .main container now defines light/dark accent palette tokens (accent-primary, accent-text-primary, etc.) used on that page. On macOS only, accentBrand action buttons (Retry / Reload-style controls) get pill corners via new shared --border-radius-pill and have their --button-* colors remapped to that palette, including a higher-specificity selector so dark-mode button text overrides don’t win.
The footer “See what else we've been working on” link (.updatesLink) now uses accent-text-primary instead of inheriting the default link color.
Reviewed by Cursor Bugbot for commit 7b63461. Bugbot is set up for automated code reviews on this repo. Configure here.
Adds .main button { border-radius: 999px !important; } for pill-shaped buttons. This is a first-party embedded special page (not injected into third-party sites), so API surface fidelity, prototype chain, and third-party script compatibility criteria do not apply. The !important is documented as necessary to override shared Button per-platform radius (specificity up to 0-3-0).
.main button is a broad selector but safe here: the only buttons under .main are shared Button instances from UpdateButton (Reload Summary, Retry Update, Restart To Update / Update DuckDuckGo). ErrorFallback renders no buttons.
.updatesLink accent color now uses design-system tokens with explicit [data-theme="dark"] override. Static href="https://duckduckgo.com/updates" — no page-derived URL construction.
PR title vs. diff
—
info
Title says "macOS" but the pill-button rule applies on every platform per the CSS comment. Consistent with applying rebranding uniformly; title may understate scope.
No web compatibility errors or warnings.
Security Assessment
File
Lines
Severity
Finding
Entire diff
—
info
No changes to injected/, captured-globals, messaging transports, message bridge, or postMessage. Special pages run in a first-party embedded context with native messaging — outside the hostile third-party page threat model this review targets.
ReleaseNotes.module.css
204–208
info
Link color uses static design-token CSS variables; no user-controlled values injected into styles.
ReleaseNotes.js (unchanged)
338
info
External link remains hardcoded https://duckduckgo.com/updates with target="_blank" — no dynamic URL construction or postMessage with * origin.
Messaging schemas
—
info
No new notify/request/subscribe schemas; existing handlers (browserRestart, retryUpdate, retryFetchReleaseNotes) unchanged. No nativeData leakage risk introduced.
No security errors, warnings, or critical findings.
Risk Level
Low Risk — CSS-only visual rebranding in a first-party special page; no injected runtime, API overrides, messaging, or security-boundary changes.
Recommendations
(info) Visual smoke-test on macOS and Windows release-notes states (loading, update-ready, error) to confirm pill buttons render correctly against shared Button variants.
(info) If screenshot integration tests exist for release-notes, consider baseline updates for the accent link color and button radius — functional tests in release-notes.spec.js do not assert visual styling.
(info) Optional: align PR title/description with the cross-platform pill-button scope if intentional.
macOS-only pill buttons via [data-platform-name="macos"] .main[data-theme] button. data-platform-name is set on document.body in app/index.js. Only affects UpdateButton shared Button instances; ErrorFallback has no buttons.
Accent link colors use design-system tokens with explicit dark-theme override. Applies on all platforms (not macOS-gated); acceptable for a first-party embedded page.
special-pages/shared/styles/variables.css
140
info
Adds --border-radius-pill: 9999px shared token. Inert until referenced; consistent with existing NTP usage.
Scope note: Changes are confined to the release-notes special page (first-party embedded UI). They do not run in injected/ on third-party web pages, so API-surface, prototype-chain, and third-party-script compatibility categories are not applicable.
No web-compatibility errors or warnings.
Security Assessment
File
Lines
Severity
Finding
—
—
—
No injected/, messaging/, captured-globals, or message-bridge changes.
The reason will be displayed to describe this comment to others. Learn more.
Injected PR Evaluation: Web Compatibility & Security
PR: macOS: Release Notes Rebranding UX (#2878) Head:7b6346144 (synchronize — new commit Wiring new Release Notes Colors since prior 83713e9 assessment) Scope: 3 files, +32 lines — CSS only in special-pages/ (no injected/, messaging/, or runtime JS changes)
Web Compatibility Assessment
File
Lines
Severity
Finding
(entire diff)
—
info
Changes are confined to the first-party release-notes special page embedded in DDG browsers. This code does not inject into arbitrary third-party web pages, so API surface fidelity, prototype-chain integrity, third-party script detection, and stack-trace exemption concerns do not apply.
App.module.css
11–32
info
Page-scoped accent palette via CSS custom properties on .main / .main[data-theme="dark"]. Overrides design-system accent tokens locally without affecting other special pages or injected features.
App.module.css
37–46
info
macOS pill buttons + accent recolor scoped to [data-platform-name="macos"] .main[data-theme] button[class]. data-platform-name is set on body in app/index.js; specificity 0-4-1 correctly beats the shared dark-mode --button-text override (0-4-0) without !important.
App.module.css
37
warning
Selector targets allbutton[class] inside .main on macOS, not only accentBrand buttons (comment says "accentBrand" but selector is broader). Today every release-notes button is variant="accentBrand", so behavior is correct — but a future non-accent button would inherit pill radius and accent colors unintentionally.
ReleaseNotes.module.css
204
info
Link color simplified to var(--ds-color-theme-accent-text-primary) (inherits from .main palette). Applies on all platforms via .main scope, while pill button styling remains macOS-only — appears intentional for the rebranded accent link treatment.
variables.css
140
info
Adds shared --border-radius-pill: 9999px token. Definition-only; no side effects until referenced.
No errors identified for third-party web compatibility.
Security Assessment
File
Lines
Severity
Finding
(entire diff)
—
info
Zero changes to injected/, captured-globals.js, wrapper-utils.js, message bridge, messaging transports, or remote-config gating. No new attack surface in the hostile third-party page trust model.
ReleaseNotes.module.css / ReleaseNotes.js
204 / 338
info
updatesLink href remains the static first-party URL https://duckduckgo.com/updates — no user-controlled URL construction or CSS injection vector introduced.
App.module.css
14–31
info
Hardcoded hex accent values are static literals; no page-derived data interpolated into styles.
(entire diff)
—
info
No new notify() / request() message schemas, no nativeData forwarding risk, no postMessage, iframe access, or eval() usage.
No warnings or critical issues identified.
Risk Level
Low Risk — CSS-only visual rebranding in a first-party embedded special page; no injected runtime code, browser API overrides, or security-boundary changes.
Recommendations
(warning) Consider narrowing the macOS button selector from button[class] to something like .accentBrand (or the hashed module class for that variant) so future non-accent buttons on this page are not unintentionally restyled.
(info) Visual smoke-test macOS light/dark pill buttons (hover/focus/active/disabled states) and accent link color on Windows/iOS to confirm the cross-platform link vs macOS-only button split matches design intent.
(info) Update release-notes screenshot baselines if CI snapshot tests cover this page.
Automated assessment — Injected PR Evaluation: Web Compatibility & Security
The reason will be displayed to describe this comment to others. Learn more.
@jleandroperez Not sure we want the --ds-* prefix here. These specific names (--ds-color-theme-accent-primary, --ds-color-theme-accent-text-primary, etc.) are actual Design System tokens defined in shared/styles/theme-mappings.css, so redefining them locally inside .main overrides the real DS tokens for this subtree -> easy to break. Could we use page-local --theme-* names instead (e.g. --theme-accent-primary)?
That keeps these clearly scoped to Release Notes and avoids clobbering the DS tokens.
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
semver-patchBug fix / internal — no release needed
3 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.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Asana Task/Github Issue:
Description
This PR applies the Rebranding UX on the macOS Release Notes:
accent-text-primaryin the bottom link (See what else we've been working on)Testing Steps
Screenshots
Checklist
Please tick all that apply:
Note
Low Risk
CSS-only, page-scoped styling on the macOS Release Notes UI with no logic, data, or auth changes.
Overview
Applies the macOS Rebranding UX to the Release Notes special page via scoped CSS only.
The Release Notes
.maincontainer now defines light/dark accent palette tokens (accent-primary,accent-text-primary, etc.) used on that page. On macOS only,accentBrandaction buttons (Retry / Reload-style controls) get pill corners via new shared--border-radius-pilland have their--button-*colors remapped to that palette, including a higher-specificity selector so dark-mode button text overrides don’t win.The footer “See what else we've been working on” link (
.updatesLink) now usesaccent-text-primaryinstead of inheriting the default link color.Reviewed by Cursor Bugbot for commit 7b63461. Bugbot is set up for automated code reviews on this repo. Configure here.