NTP: Style Omnibar to match specs

[noisysocks]

Asana Task/Github Issue: https://app.asana.com/1/137249556945/project/1209121419454298/task/1210610383905029

Description

Adjusts Omnibar styling to match the spec in https://www.figma.com/design/c3Y5zhEJhyu6HF6pz8lrMw/New-Tab-Page-Spec.

Haven’t quite reached perfection yet but I think best to get what I have merged behind the flag so that we can start getting feedback on this.

Done:

• Styling for the logo, tab switcher, search form, suggestions list, and AI form.
• Light and dark mode.
• Animations for the tab switcher and input container.

Still to do:

• Add Windows styling.
• Check typography – I think there’s a few differences compared to the spec.
• Clean up CSS variables – there might be more dimensions and colours that can be replaced with a var().
• Clean up SVG icons – there might be some we’re no longer using.
• Finesse the animations – I can see a few little things that are off, like the Search icon popping in.

Testing Steps

https://deploy-preview-1811--content-scope-scripts.netlify.app/build/pages/new-tab/?omnibar=true

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

[netlify]

✅ Deploy Preview for content-scope-scripts ready!

Name	Link
🔨 Latest commit	5fa82ea
🔍 Latest deploy log	https://app.netlify.com/projects/content-scope-scripts/deploys/6870d0d7611dc70008273449
😎 Deploy Preview	https://deploy-preview-1811--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-1811
• Commit Hash: 41581d13e41ddcc8a216087e26b35ce53e6eef89
• Last Updated: July 11, 2025 at 8:53:12 AM UTC
• Install Command: npm i github:duckduckgo/content-scope-scripts#41581d13e41ddcc8a216087e26b35ce53e6eef89

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

[github-actions]

[Beta] Generated file diff

Time updated: Fri, 11 Jul 2025 08:53:34 GMT

Integration

    - integration/pages/history/dist/index.js

• integration/pages/new-tab/dist/index.css
• integration/pages/new-tab/dist/index.js
• integration/pages/new-tab/locales/en/new-tab.json

File has changed

Removed Files

    - integration/pages/new-tab/icons/Logo-Stacked.svg

• windows/pages/new-tab/icons/Logo-Stacked.svg
• dist/pages/new-tab/icons/Logo-Stacked.svg

❌ File only exists in old changeset

Windows

    - windows/pages/history/dist/index.js

• windows/pages/new-tab/dist/index.css
• windows/pages/new-tab/dist/index.js
• windows/pages/new-tab/locales/en/new-tab.json

File has changed

Apple

    - dist/pages/history/dist/index.js

• dist/pages/new-tab/dist/index.css
• dist/pages/new-tab/dist/index.js
• dist/pages/new-tab/locales/en/new-tab.json

File has changed