Bug 1792736 - Expose zap_gradient theme property to system pages. r=desktop-theme-reviewers,dao

Pass down the zap_gradient experimental theme property to pages that
load contentTheme.js, and use it to set the zap gradient value in
Firefox View (with a generic fallback color for themes that don't set
this experimental property)

Differential Revision: https://phabricator.services.mozilla.com/D158278

browser/base/content/contentTheme.js

@@ -67,6 +67,15 @@
         },
       },
     ],
+    [
+      "--in-content-zap-gradient",
+      {
+        lwtProperty: "zap_gradient",
+        processColor(value) {
+          return value;
+        },
+      },
+    ],
     [
       "--lwt-sidebar-background-color",
       {

browser/components/firefoxview/firefoxview.css

@@ -8,7 +8,6 @@
   --content-area-padding-block: 16px;
   --header-spacing: 40px;
   --footer-spacing: 80px;
-  --card-border-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);
 
   --success-fill-color: #2AC3A2;
   --success-background-color: #87FFD1;
@@ -55,6 +54,9 @@ body {
   --fxview-element-active-color: color-mix(in srgb, var(--fxview-background-color) 80%, currentColor);
   --fxview-element-hover-text-color: var(--newtab-text-primary-color);
   --fxview-contrast-border: color-mix(in hsl, currentColor 45%, transparent);
+  --fxview-extra-contrast-border: color-mix(in hsl, currentColor 85%, transparent);
+  --in-content-zap-gradient: linear-gradient(var(--fxview-extra-contrast-border), var(--fxview-extra-contrast-border));
+  --card-border-zap-gradient: var(--in-content-zap-gradient);
   --fxview-text-secondary-color: color-mix(in srgb, currentColor 80%, transparent);
   --newtab-background-color-secondary: #FFF;
   --colorways-no-collection-notice-bg-color: transparent;
@@ -74,6 +76,10 @@ body {
   color: var(--newtab-text-primary-color);
 }
 
+body:not([lwt-newtab]) {
+  --in-content-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);
+}
+
 @media (prefers-color-scheme: dark) {
   body {
     --fxview-element-hover-color: color-mix(in srgb, var(--fxview-background-color) 80%, white);

browser/themes/ThemeVariableMap.jsm

@@ -188,4 +188,5 @@ const ThemeContentPropertyList = [
   "sidebar_highlight",
   "sidebar_highlight_text",
   "sidebar_text",
+  "zap_gradient",
 ];

toolkit/modules/LightweightThemeConsumer.sys.mjs

@@ -423,6 +423,26 @@ function _getContentProperties(doc, active, data) {
       properties[property] = _cssColorToRGBA(doc, data[property]);
     }
   }
+  if (data.experimental) {
+    for (const property in data.experimental.colors) {
+      if (lazy.ThemeContentPropertyList.includes(property)) {
+        properties[property] = _cssColorToRGBA(
+          doc,
+          data.experimental.colors[property]
+        );
+      }
+    }
+    for (const property in data.experimental.images) {
+      if (lazy.ThemeContentPropertyList.includes(property)) {
+        properties[property] = `url(${data.experimental.images[property]})`;
+      }
+    }
+    for (const property in data.experimental.properties) {
+      if (lazy.ThemeContentPropertyList.includes(property)) {
+        properties[property] = data.experimental.properties[property];
+      }
+    }
+  }
   return properties;
 }