Release build 11.22.0 [ci release]

Author: noisysocks

CHANGELOG.txt

@@ -1 +1,2 @@
-- Get page context (#1953)
+- Fix shadow rendering issue in popover when mousing over Customize link (#1958)
+- NTP: Adjust omnibar background colour on dark gradient/color backgrounds (#1957)

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

@@ -1586,12 +1586,6 @@ body:not([data-platform-name]) .Button_button:active {
   gap: 10px;
   padding-bottom: var(--sp-15);
 }
-[data-theme=light] .Omnibar_root {
-  --omnibar-translucent-background-color: rgba(255, 255, 255, 0.54);
-}
-[data-theme=dark] .Omnibar_root {
-  --omnibar-translucent-background-color: rgba(0, 0, 0, 0.3);
-}
 .Omnibar_logo {
   margin-bottom: var(--sp-4);
   width: 164px;
@@ -1617,10 +1611,24 @@ body:not([data-platform-name]) .Button_button:active {
   margin: 3px;
   outline: 1px solid var(--ntp-controls-raised-backdrop);
 }
-body:not([data-background-kind=default]) .Omnibar_popup {
+[data-background-kind=color] [data-theme=light] .Omnibar_popup,
+[data-background-kind=gradient] [data-theme=light] .Omnibar_popup,
+[data-background-kind=userImage] [data-theme=light] .Omnibar_popup {
+  -webkit-backdrop-filter: blur(48px);
+  backdrop-filter: blur(48px);
+  background: rgba(255, 255, 255, 0.54);
+}
+[data-background-kind=color] [data-theme=dark] .Omnibar_popup,
+[data-background-kind=gradient] [data-theme=dark] .Omnibar_popup {
   -webkit-backdrop-filter: blur(48px);
   backdrop-filter: blur(48px);
-  background: var(--omnibar-translucent-background-color);
+  background: rgba(255, 255, 255, 0.12);
+  outline: 1px solid rgba(0, 0, 0, 0.12);
+}
+[data-background-kind=userImage] [data-theme=dark] .Omnibar_popup {
+  -webkit-backdrop-filter: blur(48px);
+  backdrop-filter: blur(48px);
+  background: rgba(0, 0, 0, 0.3);
 }
 .Omnibar_root:has(input:focus, textarea:focus) .Omnibar_popup {
   box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 20px 40px 0 rgba(0, 0, 0, 0.08);
@@ -1948,6 +1956,7 @@ body:not([data-background-kind=default]) .TabSwitcher_tabSwitcher {
   color: var(--ntp-accent-primary);
   cursor: pointer;
   padding: 0;
+  transform: translateZ(0);
 }
 .Popover_description button:hover {
   color: var(--ntp-accent-secondary);

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

@@ -1586,12 +1586,6 @@ body:not([data-platform-name]) .Button_button:active {
   gap: 10px;
   padding-bottom: var(--sp-15);
 }
-[data-theme=light] .Omnibar_root {
-  --omnibar-translucent-background-color: rgba(255, 255, 255, 0.54);
-}
-[data-theme=dark] .Omnibar_root {
-  --omnibar-translucent-background-color: rgba(0, 0, 0, 0.3);
-}
 .Omnibar_logo {
   margin-bottom: var(--sp-4);
   width: 164px;
@@ -1617,10 +1611,24 @@ body:not([data-platform-name]) .Button_button:active {
   margin: 3px;
   outline: 1px solid var(--ntp-controls-raised-backdrop);
 }
-body:not([data-background-kind=default]) .Omnibar_popup {
+[data-background-kind=color] [data-theme=light] .Omnibar_popup,
+[data-background-kind=gradient] [data-theme=light] .Omnibar_popup,
+[data-background-kind=userImage] [data-theme=light] .Omnibar_popup {
+  -webkit-backdrop-filter: blur(48px);
+  backdrop-filter: blur(48px);
+  background: rgba(255, 255, 255, 0.54);
+}
+[data-background-kind=color] [data-theme=dark] .Omnibar_popup,
+[data-background-kind=gradient] [data-theme=dark] .Omnibar_popup {
   -webkit-backdrop-filter: blur(48px);
   backdrop-filter: blur(48px);
-  background: var(--omnibar-translucent-background-color);
+  background: rgba(255, 255, 255, 0.12);
+  outline: 1px solid rgba(0, 0, 0, 0.12);
+}
+[data-background-kind=userImage] [data-theme=dark] .Omnibar_popup {
+  -webkit-backdrop-filter: blur(48px);
+  backdrop-filter: blur(48px);
+  background: rgba(0, 0, 0, 0.3);
 }
 .Omnibar_root:has(input:focus, textarea:focus) .Omnibar_popup {
   box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 20px 40px 0 rgba(0, 0, 0, 0.08);
@@ -1948,6 +1956,7 @@ body:not([data-background-kind=default]) .TabSwitcher_tabSwitcher {
   color: var(--ntp-accent-primary);
   cursor: pointer;
   padding: 0;
+  transform: translateZ(0);
 }
 .Popover_description button:hover {
   color: var(--ntp-accent-secondary);

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

@@ -1586,12 +1586,6 @@ body:not([data-platform-name]) .Button_button:active {
   gap: 10px;
   padding-bottom: var(--sp-15);
 }
-[data-theme=light] .Omnibar_root {
-  --omnibar-translucent-background-color: rgba(255, 255, 255, 0.54);
-}
-[data-theme=dark] .Omnibar_root {
-  --omnibar-translucent-background-color: rgba(0, 0, 0, 0.3);
-}
 .Omnibar_logo {
   margin-bottom: var(--sp-4);
   width: 164px;
@@ -1617,10 +1611,24 @@ body:not([data-platform-name]) .Button_button:active {
   margin: 3px;
   outline: 1px solid var(--ntp-controls-raised-backdrop);
 }
-body:not([data-background-kind=default]) .Omnibar_popup {
+[data-background-kind=color] [data-theme=light] .Omnibar_popup,
+[data-background-kind=gradient] [data-theme=light] .Omnibar_popup,
+[data-background-kind=userImage] [data-theme=light] .Omnibar_popup {
+  -webkit-backdrop-filter: blur(48px);
+  backdrop-filter: blur(48px);
+  background: rgba(255, 255, 255, 0.54);
+}
+[data-background-kind=color] [data-theme=dark] .Omnibar_popup,
+[data-background-kind=gradient] [data-theme=dark] .Omnibar_popup {
   -webkit-backdrop-filter: blur(48px);
   backdrop-filter: blur(48px);
-  background: var(--omnibar-translucent-background-color);
+  background: rgba(255, 255, 255, 0.12);
+  outline: 1px solid rgba(0, 0, 0, 0.12);
+}
+[data-background-kind=userImage] [data-theme=dark] .Omnibar_popup {
+  -webkit-backdrop-filter: blur(48px);
+  backdrop-filter: blur(48px);
+  background: rgba(0, 0, 0, 0.3);
 }
 .Omnibar_root:has(input:focus, textarea:focus) .Omnibar_popup {
   box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1), 0 20px 40px 0 rgba(0, 0, 0, 0.08);
@@ -1948,6 +1956,7 @@ body:not([data-background-kind=default]) .TabSwitcher_tabSwitcher {
   color: var(--ntp-accent-primary);
   cursor: pointer;
   padding: 0;
+  transform: translateZ(0);
 }
 .Popover_description button:hover {
   color: var(--ntp-accent-secondary);

special-pages/pages/new-tab/app/components/Popover.module.css

@@ -77,6 +77,7 @@
         color: var(--ntp-accent-primary);
         cursor: pointer;
         padding: 0;
+        transform: translateZ(0); /* Fix shadow rendering issue on .popover in WebKit */
 
         &:hover {
             color: var(--ntp-accent-secondary);

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

@@ -4,14 +4,6 @@
     flex-direction: column;
     gap: 10px;
     padding-bottom: var(--sp-15);
-
-    [data-theme="light"] & {
-        --omnibar-translucent-background-color: rgba(255, 255, 255, 0.54);
-    }
-
-    [data-theme="dark"] & {
-        --omnibar-translucent-background-color: rgba(0, 0, 0, 0.3);
-    }
 }
 
 .logo {
@@ -54,9 +46,23 @@
     margin: 3px;
     outline: 1px solid var(--ntp-controls-raised-backdrop);
 
-    body:not([data-background-kind="default"]) & {
+    [data-background-kind="color"] [data-theme="light"] &,
+    [data-background-kind="gradient"] [data-theme="light"] &,
+    [data-background-kind="userImage"] [data-theme="light"] & {
+        backdrop-filter: blur(48px);
+        background: rgba(255, 255, 255, 0.54);
+    }
+
+    [data-background-kind="color"] [data-theme="dark"] &,
+    [data-background-kind="gradient"] [data-theme="dark"] & {
+        backdrop-filter: blur(48px);
+        background: rgba(255, 255, 255, 0.12);
+        outline: 1px solid rgba(0, 0, 0, 0.12);
+    }
+
+    [data-background-kind="userImage"] [data-theme="dark"] & {
         backdrop-filter: blur(48px);
-        background: var(--omnibar-translucent-background-color);
+        background: rgba(0, 0, 0, 0.3);
     }
 }