NTP: Styling tweaks

[noisysocks]

Asana Task/Github Issue:

Description

A few small tweaks following #2095. Nothing scientific, I just spent some of the afternoon poking around and adjusting things that looked weird to me.

• b8c2c26 Ensure the tooltip and Customise drawer respect the surface layer hierarchy: canvas, secondary, and tertiary.
• 1962752 Use a --ds variable for the SuggestionsList badge.
• 90d8a1e Make all dismiss buttons consistently use DIsmissButton and --ds variables.
• 2cbf026 Update the button in NextSteps to use --ds variables.
• 837f98b Change the separator in Customiser to use the primary decoration colour.
• 913781c Update the ShowHide and Customise buttons to use --ds variables.
• a7dad3b Restore the focus ring to its original state as per NTP: Use design system colors #2095 and fix several focus ring bugs.

Testing Steps

• https://deploy-preview-2101--content-scope-scripts.netlify.app/build/pages/new-tab/?themeVariant=rose&platform=macos&theme=light&autoOpen=true&rmf=big_two_action&cpm=true&next-steps=bringStuff&next-steps=defaultApp&omnibar.showCustomizePopover=true&winback=winback_last_day
• https://deploy-preview-2101--content-scope-scripts.netlify.app/build/pages/new-tab/?themeVariant=rose&platform=macos&theme=dark&autoOpen=true&rmf=big_two_action&cpm=true&next-steps=bringStuff&next-steps=defaultApp&omnibar.showCustomizePopover=true&winback=winback_last_day

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

Replaces ad‑hoc styles with design tokens across NTP, swaps inline close buttons for DismissButton, refines focus/hover/active/disabled states and focus rings, and tweaks surfaces/borders for consistency.

• Design tokens and focus rings
  • Switch many components to --ds variables for colors/fills/borders and restore/update --focus-ring tokens in styles/ntp-theme.css.
  • Adjust surface layers: e.g., App.module.css .aside to surface-secondary; tooltips/popovers to surface-tertiary.
• Component updates
  • Popover: replace inline close button with DismissButton and adopt new close button styles.
  • SuggestionsList: set .badge background to --ds-color-theme-accent-secondary.
  • ShowHide, Customizer button/drawer, NextSteps button, Protections, TabSwitcher: update hover/active/disabled and focus-visible behaviors to DS tokens; add/normalize outlines and shadows.
  • Favorites/NextSteps lists: reveal [data-show-hide] on hover and when children have :focus-within.
  • CustomizerDrawer: use surface-decoration-primary for section separator.
• Accessibility
  • Add/standardize :focus-visible styles and remove default outlines where replaced by --focus-ring.

^{Written by Cursor Bugbot for commit 6d015a7. This will update automatically on new commits. Configure here.}

[netlify]

✅ Deploy Preview for content-scope-scripts ready!

Name	Link
🔨 Latest commit	6d015a7
🔍 Latest deploy log	https://app.netlify.com/projects/content-scope-scripts/deploys/693f7e73aaaa9800087c55e7
😎 Deploy Preview	https://deploy-preview-2101--content-scope-scripts.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

Temporary Branch Update

The temporary branch has been updated with the latest changes. Below are the details:

• Branch Name: pr-releases/pr-2101
• Commit Hash: 5ee7fc8a93294aeb1b54636afd43f321122bb0cc
• Last Updated: December 15, 2025 at 3:20:55 AM UTC
• Install Command: npm i github:duckduckgo/content-scope-scripts#5ee7fc8a93294aeb1b54636afd43f321122bb0cc

Please use the above install command to update to the latest version.

[github-actions]

[Beta] Generated file diff

Time updated: Mon, 15 Dec 2025 03:21:20 GMT

Apple

    - apple/pages/new-tab/dist/index.css

• apple/pages/new-tab/dist/index.js

File has changed

Integration

    - integration/pages/new-tab/dist/index.css

• integration/pages/new-tab/dist/index.js

File has changed

Windows

    - windows/pages/new-tab/dist/index.css

• windows/pages/new-tab/dist/index.js

File has changed

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}