NTP: Adjust omnibar colours to match native apps and Figma (#1863)

noisysocks · web-flow · commit 979caac56545 · 2025-07-30T20:54:53.000+10:00
* Use design system border radius in omnibar container

* Adjust tab switcher hover background color

* Update AI chat button styles with new theme variables

* Use theme variables from Figma to improve color consistency

* Add backdrop blur to omnibar components
diff --git a/special-pages/pages/new-tab/app/omnibar/components/AiChatForm.module.css b/special-pages/pages/new-tab/app/omnibar/components/AiChatForm.module.css
@@ -10,7 +10,7 @@
     background: none;
     border: none;
     box-sizing: content-box;
-    color: var(--ntp-text-normal);
+    color: var(--ntp-text-primary);
     max-height: 10lh;
     padding: 11px 15px 0;
     resize: none;
@@ -20,7 +20,7 @@
     }
 
     &::placeholder {
-        color: var(--ntp-text-muted);
+        color: var(--ntp-text-tertiary);
     }
 
     [data-platform="windows"] &::selection {
@@ -33,7 +33,7 @@
     }
 
     .hasScroll & {
-        border-bottom: 1px solid var(--ntp-surface-border-color);
+        border-bottom: 1px solid var(--ntp-decoration-tertiary);
         padding-bottom: 11px;
     }
 }
@@ -50,10 +50,10 @@
 
 .submitButton {
     align-items: center;
-    background: var(--color-blue-50);
+    background: var(--ntp-accent-primary);
     border-radius: 100%;
     border: none;
-    color: var(--color-white);
+    color: var(--ntp-accent-content-primary);
     cursor: pointer;
     display: flex;
     height: var(--sp-7);
@@ -64,8 +64,9 @@
 
     &[disabled] {
         background: none;
-        color: rgba(0, 0, 0, 0.3);
+        color: var(--ntp-icons-primary);
         cursor: default;
+        opacity: 0.3;
     }
 
     &:focus-visible {
diff --git a/special-pages/pages/new-tab/app/omnibar/components/Container.module.css b/special-pages/pages/new-tab/app/omnibar/components/Container.module.css
@@ -4,8 +4,9 @@
 }
 
 .inner {
+    backdrop-filter: blur(48px);
     background: var(--ntp-surface-tertiary);
-    border-radius: 15px;
+    border-radius: var(--border-radius-lg);
     box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     position: relative;
@@ -17,7 +18,7 @@
 
     &:not(:has([role="listbox"])).focusRing,
     &:not(:has([role="listbox"])):focus-within:not(.noFocusRing) {
-        box-shadow: 0 0 0 1px var(--ntp-surface-tertiary), 0 0 0 3px var(--ntp-color-primary), 0 0 0 5px rgba(57, 105, 239, 0.2);
+        box-shadow: 0 0 0 1px var(--ntp-surface-tertiary), 0 0 0 3px var(--ntp-accent-primary), 0 0 0 5px var(--ntp-accent-glow);
     }
 
     &:has([role="listbox"]) {
diff --git a/special-pages/pages/new-tab/app/omnibar/components/SearchForm.module.css b/special-pages/pages/new-tab/app/omnibar/components/SearchForm.module.css
@@ -12,7 +12,7 @@
 .input {
     background: none;
     border: none;
-    color: var(--ntp-text-normal);
+    color: var(--ntp-text-primary);
     font: var(--input-font);
     height: var(--sp-8);
     left: 7px;
@@ -24,7 +24,7 @@
     right: 7px;
 
     &::placeholder {
-        color: var(--ntp-text-muted);
+        color: var(--ntp-text-tertiary);
     }
 
     [data-platform="windows"] &::selection {
@@ -45,7 +45,7 @@
 }
 
 .suffix {
-    color: var(--ntp-color-primary);
+    color: var(--ntp-accent-primary);
     flex: none;
     font: var(--input-font);
 }
diff --git a/special-pages/pages/new-tab/app/omnibar/components/SuggestionsList.module.css b/special-pages/pages/new-tab/app/omnibar/components/SuggestionsList.module.css
@@ -10,7 +10,7 @@
     background: none;
     border-radius: 4px;
     border: none;
-    color: var(--ntp-text-normal);
+    color: var(--ntp-text-primary);
     cursor: pointer;
     display: flex;
     height: var(--sp-8);
@@ -24,23 +24,23 @@
 
     &[aria-selected="true"],
     &:active {
-        color: var(--color-white);
+        color: var(--ntp-accent-content-primary);
 
         .suffix {
-            color: var(--color-white);
+            color: var(--ntp-accent-content-primary);
         }
 
         .badge {
-            background: var(--color-white-at-30);
+            background: var(--color-white-at-30); /* @fixme: Should use a --ntp theme variable for this. This pill design differs from Figma, though */
         }
     }
 
     &[aria-selected="true"] {
-        background: var(--ddg-color-primary);
+        background: var(--ntp-accent-primary);
     }
 
     &:active {
-        background: var(--color-blue-60);
+        background: var(--ntp-accent-secondary);
     }
 }
 
@@ -53,7 +53,7 @@
 }
 
 .suffix {
-    color: var(--ntp-text-muted);
+    color: var(--ntp-text-tertiary);
     flex: initial;
     font-size: 12px;
     overflow: hidden;
diff --git a/special-pages/pages/new-tab/app/omnibar/components/TabSwitcher.module.css b/special-pages/pages/new-tab/app/omnibar/components/TabSwitcher.module.css
@@ -1,24 +1,21 @@
 .tabSwitcher {
+    backdrop-filter: blur(48px);
     background: var(--ntp-controls-raised-backdrop);
     border-radius: 99px;
-    box-shadow: 0px 1px 0px 0px  rgba(0, 0, 0, 0.05) inset;
+    box-shadow: 0px 1px 0px 0px var(--ntp-shadow-primary) inset;
     display: grid;
-    gap: 2px;
+    gap: var(--sp-0_5);
     grid-template-columns: repeat(var(--tab-count), 1fr);
     overflow: hidden;
     padding: var(--sp-0_5);
     position: relative;
-
-    [data-theme="dark"] & {
-        box-shadow: 0 1px 0 0  rgba(0, 0, 0, 0.16) inset;
-    }
 }
 
 .tab {
     align-items: center;
     background: none;
     border: none;
-    color: var(--ntp-text-normal);
+    color: var(--ntp-text-primary);
     cursor: pointer;
     display: flex;
     gap: 6px;
@@ -30,7 +27,7 @@
     z-index: 1;
 
     &:hover:not([aria-selected="true"])::before {
-        background: var(--ntp-controls-raised-backdrop);
+        background: var(--ntp-controls-fill-primary);
         border-radius: 99px;
         content: '';
         inset: 0;
@@ -45,7 +42,7 @@
 .blob {
     background-color: var(--ntp-controls-raised-fill-primary);
     border-radius: 18px;
-    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.48);
+    box-shadow: 0 4px 4px var(--ntp-shadow-secondary), 0 1px 2px var(--ntp-shadow-secondary), inset 0 1px 0 rgba(255, 255, 255, 0.48);
     height: var(--sp-8);
     left: 0;
     position: absolute;
@@ -57,7 +54,7 @@
     z-index: 0;
 
     [data-theme="dark"] & {
-        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.06);
+        box-shadow: 0 4px 4px var(--ntp-shadow-secondary), 0 1px 2px var(--ntp-shadow-secondary), inset 0 1px 0 rgba(255, 255, 255, 0.06);
     }
 
     @media (prefers-reduced-motion: reduce) {
diff --git a/special-pages/pages/new-tab/app/styles/ntp-theme.css b/special-pages/pages/new-tab/app/styles/ntp-theme.css
@@ -55,11 +55,25 @@ body {
     --focus-ring: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--ntp-focus-outline-color);
     --focus-ring-thin: 0px 0px 0px 1px var(--ntp-focus-outline-color), 0px 0px 0px 1px  var(--color-white);
     --focus-ring-primary: 0px 0px 0px 1px var(--color-white), 0px 0px 0px 3px var(--ntp-color-primary);
-    --ntp-surface-tertiary: var(--color-white);
-    --ntp-controls-raised-backdrop: var(--color-black-at-9);
-    --ntp-controls-raised-fill-primary: var(--color-white);
     --ntp-selection-color: var(--color-white);
     --ntp-selection-background-color: #3A69EF;
+
+    /* Global Colors & Styles - https://www.figma.com/design/3W4vi0zX8hrpQc7zInQQB6/%F0%9F%8E%A8-Global-Colors---Styles?node-id=11-1&p=f&vars=1&m=dev */
+    /* @todo: This palette is what the native apps use, we should gradually move over to it */
+    --ntp-surface-tertiary: #FFFFFF;
+    --ntp-text-primary: #1F1F1F;
+    --ntp-text-tertiary: rgba(31, 31, 31, 0.4);
+    --ntp-icons-primary: rgba(31, 31, 31, 0.84);
+    --ntp-accent-primary: var(--color-blue-50);
+    --ntp-accent-secondary: var(--color-blue-60);
+    --ntp-accent-glow: rgba(57, 105, 239, 0.2);
+    --ntp-accent-content-primary: #FFFFFF;
+    --ntp-controls-fill-primary: rgba(31, 31, 31, 0.09);
+    --ntp-controls-raised-backdrop: rgba(0, 0, 0, 0.09);
+    --ntp-controls-raised-fill-primary: #FFFFFF;
+    --ntp-decoration-tertiary: rgba(0, 0, 0, 0.09);
+    --ntp-shadow-primary: rgba(0, 0, 0, 0.05);
+    --ntp-shadow-secondary: rgba(0, 0, 0, 0.08);
 }
 
 [data-theme=dark] {
@@ -74,11 +88,25 @@ body {
     --focus-ring: 0px 0px 0px 1px var(--ntp-focus-outline-color), 0px 0px 0px 3px var(--color-white);
     --focus-ring-thin: 0px 0px 0px 1px  var(--color-white), 0px 0px 0px 1px var(--ntp-focus-outline-color);
     --focus-ring-primary: 0px 0px 0px 1px var(--default-dark-background-color), 0px 0px 0px 3px var(--ntp-color-primary);
-    --ntp-surface-tertiary: rgba(71, 71, 71, 0.66);
-    --ntp-controls-raised-backdrop: var(--color-black-at-60);
-    --ntp-controls-raised-fill-primary: var(--color-white-at-18);
     --ntp-selection-color: var(--color-white);
     --ntp-selection-background-color: var(--color-blue-30);
+
+    /* Global Colors & Styles - https://www.figma.com/design/3W4vi0zX8hrpQc7zInQQB6/%F0%9F%8E%A8-Global-Colors---Styles?node-id=11-1&p=f&vars=1&m=dev */
+    /* @todo: This palette is what the native apps use, we should gradually move over to it */
+    --ntp-surface-tertiary: rgba(71, 71, 71, 0.66); /* @fixme: This differs from Figma. We're adding alpha so that surfaces blend with custom backgrounds. */
+    --ntp-text-primary: rgba(255, 255, 255, 0.9);
+    --ntp-text-tertiary: rgba(255, 255, 255, 0.4);
+    --ntp-icons-primary: rgba(255, 255, 255, 0.78);
+    --ntp-accent-primary: var(--color-blue-20);
+    --ntp-accent-secondary: var(--color-blue-30);
+    --ntp-accent-glow: rgba(114, 149, 246, 0.2);
+    --ntp-accent-content-primary: var(--color-blue-80);
+    --ntp-controls-fill-primary: rgba(249, 249, 249, 0.12);
+    --ntp-controls-raised-backdrop: rgba(0, 0, 0, 0.6);
+    --ntp-controls-raised-fill-primary: rgba(255, 255, 255, 0.18);
+    --ntp-decoration-tertiary: rgba(255, 255, 255, 0.12);
+    --ntp-shadow-primary: rgba(0, 0, 0, 0.16);
+    --ntp-shadow-secondary: rgba(0, 0, 0, 0.24);
 }
 
 /* This comes from the application settings */

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@`
`10`	`10`	`background: none;`
`11`	`11`	`border-radius: 4px;`
`12`	`12`	`border: none;`
`13`		`- color: var(--ntp-text-normal);`
	`13`	`+ color: var(--ntp-text-primary);`
`14`	`14`	`cursor: pointer;`
`15`	`15`	`display: flex;`
`16`	`16`	`height: var(--sp-8);`
`@@ -24,23 +24,23 @@`
`24`	`24`
`25`	`25`	`&[aria-selected="true"],`
`26`	`26`	`&:active {`
`27`		`- color: var(--color-white);`
	`27`	`+ color: var(--ntp-accent-content-primary);`
`28`	`28`
`29`	`29`	`.suffix {`
`30`		`- color: var(--color-white);`
	`30`	`+ color: var(--ntp-accent-content-primary);`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`.badge {`
`34`		`- background: var(--color-white-at-30);`
	`34`	`+ background: var(--color-white-at-30); /* @fixme: Should use a --ntp theme variable for this. This pill design differs from Figma, though */`
`35`	`35`	`}`
`36`	`36`	`}`
`37`	`37`
`38`	`38`	`&[aria-selected="true"] {`
`39`		`- background: var(--ddg-color-primary);`
	`39`	`+ background: var(--ntp-accent-primary);`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`&:active {`
`43`		`- background: var(--color-blue-60);`
	`43`	`+ background: var(--ntp-accent-secondary);`
`44`	`44`	`}`
`45`	`45`	`}`
`46`	`46`
`@@ -53,7 +53,7 @@`
`53`	`53`	`}`
`54`	`54`
`55`	`55`	`.suffix {`
`56`		`- color: var(--ntp-text-muted);`
	`56`	`+ color: var(--ntp-text-tertiary);`
`57`	`57`	`flex: initial;`
`58`	`58`	`font-size: 12px;`
`59`	`59`	`overflow: hidden;`