NTP: Fix omnibar colour when using a custom background (#1846)

* Fix tab switcher dark theme styling

* Improve omnibar coloring on custom backgrounds

Author: noisysocks

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

@@ -16,6 +16,10 @@
     padding: 11px 15px 0;
     resize: none;
 
+    &::placeholder {
+        color: var(--ntp-text-muted);
+    }
+
     &:focus {
         outline: none;
     }

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

@@ -23,6 +23,10 @@
     position: absolute;
     right: var(--sp-1);
 
+    &::placeholder {
+        color: var(--ntp-text-muted);
+    }
+
     &:focus {
         outline: none;
     }

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

@@ -7,6 +7,10 @@
     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 {
@@ -28,10 +32,9 @@
 }
 
 .blob {
-    background-color: var(--color-white);
+    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);
-    color: var(--ntp-controls-raised-fill-primary);
     height: var(--sp-8);
     left: 0;
     position: absolute;
@@ -42,7 +45,6 @@
     will-change: translate;
 
     [data-theme="dark"] & {
-        background-color: #6B6B6B;
         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);
     }
 

special-pages/pages/new-tab/app/styles/ntp-theme.css

@@ -72,9 +72,9 @@ 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: #474747;
-    --ntp-controls-raised-backdrop: var(--color-white-at-12);
-    --ntp-controls-raised-fill-primary: #6B6B6B;
+    --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);
 }
 
 /* This comes from the application settings */