NTP: Refine omnibar background, outline, and elevation styles (#1893)

* Refine popup background, outline, and elevation styles

* Update CloseSmallIcon

Author: noisysocks

special-pages/pages/new-tab/app/components/Icons.js

@@ -596,7 +596,7 @@ export function CloseSmallIcon(props) {
         <svg width="16" height="16" fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...props}>
             <path
                 fill="currentColor"
-                d="M10.433 4.683a.625.625 0 1 1 .884.884L8.884 8l2.433 2.433a.625.625 0 1 1-.884.884L8 8.884l-2.433 2.433a.625.625 0 1 1-.884-.884L7.116 8 4.683 5.567a.625.625 0 1 1 .884-.884L8 7.116l2.433-2.433Z"
+                d="M11.933 3.183a.625.625 0 1 1 .884.884L8.884 8l3.933 3.933a.625.625 0 1 1-.884.884L8 8.884l-3.933 3.933a.625.625 0 1 1-.884-.884L7.116 8 3.183 4.067a.625.625 0 1 1 .884-.884L8 7.116l3.933-3.933Z"
             />
         </svg>
     );

special-pages/pages/new-tab/app/omnibar/components/Omnibar.module.css

@@ -41,36 +41,31 @@
     }
 }
 
+/* Rest */
 .popup {
     background: var(--ntp-surface-tertiary);
     border-radius: 12px;
-    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
+    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.08); /* Elevation 30 */
     display: flow-root; /* Prevent margin collapse on .field */
     margin: 3px;
+    outline: 1px solid var(--ntp-controls-raised-backdrop);
 
     body:not([data-background-kind="default"]) & {
         backdrop-filter: blur(48px);
         background: var(--omnibar-translucent-background-color);
-        outline: 1px solid var(--ntp-surface-border-color);
     }
 }
 
-.field {
-    box-sizing: content-box;
-    overflow: hidden;
-    position: relative;
-    transition: height 200ms ease;
-
-    @media (prefers-reduced-motion: reduce) {
-        transition: none;
-    }
+/* Typing */
+.root:focus-within .popup {
+    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 20px 40px 0 rgba(0, 0, 0, 0.08); /* Elevation 90 */
 }
 
 /* Focused */
 .root:focus-within:has(input:placeholder-shown, textarea:placeholder-shown) .popup {
     border-radius: 15px;
     border: 2px solid var(--ntp-accent-primary);
-    box-shadow: none;
+    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 20px 40px 0 rgba(0, 0, 0, 0.08); /* Elevation 90 */
     margin: 0;
     outline: 2px solid var(--ntp-accent-glow);
 
@@ -82,10 +77,20 @@
 /* Suggestions */
 .root:has([role="listbox"]) .popup {
     border-radius: 15px;
-    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 20px 40px 0 rgba(0, 0, 0, 0.08);
     margin: 0;
 
     .field {
         margin: 3px; /* Use margin on .field instead of padding on .popup so that position: absolute respects the spacing */
     }
 }
+
+.field {
+    box-sizing: content-box;
+    overflow: hidden;
+    position: relative;
+    transition: height 200ms ease;
+
+    @media (prefers-reduced-motion: reduce) {
+        transition: none;
+    }
+}

special-pages/pages/new-tab/app/omnibar/components/TabSwitcher.module.css

@@ -10,8 +10,6 @@
 
     body:not([data-background-kind="default"]) & {
         backdrop-filter: blur(48px);
-        background: var(--omnibar-translucent-background-color);
-        outline: 1px solid var(--ntp-surface-border-color);
     }
 }