Added chrome style color palletes and automatic theme creation

src/browser/components/newtab/content-src/styles/_theme-scss.patch

@@ -0,0 +1,13 @@
+diff --git a/browser/components/newtab/content-src/styles/_theme.scss b/browser/components/newtab/content-src/styles/_theme.scss
+index 6b097ae93edc046fb82dc843357e4ce8f34aca60..a76a3d8082d611a5169b0e85053aaca05a59ede1 100644
+--- a/browser/components/newtab/content-src/styles/_theme.scss
++++ b/browser/components/newtab/content-src/styles/_theme.scss
+@@ -25,7 +25,7 @@ $shadow-image-inset: inset 0 0 0 0.5px $black-15;
+ // Default theme
+ :root {
+   // General styles
+-  --newtab-background-color: #{$in-content-page-background};
++  --newtab-background-color: var(--zen-colors-tertiary);
+   --newtab-background-color-secondary: #{$newtab-background-secondary};
+   --newtab-text-primary-color: #{$in-content-page-color};
+   --newtab-primary-action-background: #{$primary-blue};

src/browser/themes/addons/dark/manifest-json.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/themes/addons/dark/manifest.json b/browser/themes/addons/dark/manifest.json
-index 544986d5e93c033f944cf301af79e0750864a32c..ec5e7653b9c0c6d86e5c869c1a5f1d845a0a55f0 100644
+index 544986d5e93c033f944cf301af79e0750864a32c..005ef991235fd30e2253b488cb76df54c5c82078 100644
 --- a/browser/themes/addons/dark/manifest.json
 +++ b/browser/themes/addons/dark/manifest.json
 @@ -7,10 +7,10 @@
@@ -16,7 +16,7 @@ index 544986d5e93c033f944cf301af79e0750864a32c..ec5e7653b9c0c6d86e5c869c1a5f1d84
  
    "icons": { "32": "icon.svg" },
  
-@@ -38,24 +38,24 @@
+@@ -38,19 +38,18 @@
        "ntp_background": "rgb(43, 42, 51)",
        "ntp_card_background": "rgb(66,65,77)",
        "ntp_text": "rgb(251, 251, 254)",
@@ -41,13 +41,16 @@ index 544986d5e93c033f944cf301af79e0750864a32c..ec5e7653b9c0c6d86e5c869c1a5f1d84
        "urlbar_popup_separator": "rgb(82,82,94)",
        "appmenu_update_icon_color": "#54FFBD",
        "appmenu_info_icon_color": "#80EBFF",
-       "tab_icon_overlay_stroke": "rgb(66,65,77)",
+@@ -61,7 +60,8 @@
--      "tab_icon_overlay_fill": "rgb(251,251,254)"
-+      "tab_icon_overlay_fill": "rgb(251,251,254)",
-+      "zen_main_browser_background": "rgb(53, 52, 61)"
-     },
-     "properties": {
        "color_scheme": "dark",
+       "panel_active": "color-mix(in srgb, currentColor 14%, transparent)",
+       "toolbar_field_icon_opacity": "1",
+-      "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)"
++      "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)",
++      "zen_main_browser_background": "var(--zen-colors-secondary)"
+     }
+   },
+ 
 @@ -83,7 +83,8 @@
        "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
        "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",

src/browser/themes/addons/light/manifest-json.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/themes/addons/light/manifest.json b/browser/themes/addons/light/manifest.json
-index 7385970fa8e3ff9659b72cfb238003958220fb0d..70739d61207c60a1869b6a590c452a8e62698833 100644
+index 7385970fa8e3ff9659b72cfb238003958220fb0d..f1fce740db32e7dcf8553619888844e4ef442297 100644
 --- a/browser/themes/addons/light/manifest.json
 +++ b/browser/themes/addons/light/manifest.json
 @@ -7,10 +7,10 @@
@@ -16,7 +16,7 @@ index 7385970fa8e3ff9659b72cfb238003958220fb0d..70739d61207c60a1869b6a590c452a8e
  
    "icons": { "32": "icon.svg" },
  
-@@ -42,18 +42,19 @@
+@@ -42,12 +42,12 @@
        "button": "rgba(207,207,216,.33)",
        "button_hover": "rgba(207,207,216,.66)",
        "button_active": "rgb(207,207,216)",
@@ -34,23 +34,18 @@ index 7385970fa8e3ff9659b72cfb238003958220fb0d..70739d61207c60a1869b6a590c452a8e
        "urlbar_popup_hover": "rgb(240,240,244)",
        "urlbar_popup_separator": "rgb(240,240,244)",
        "appmenu_update_icon_color": "#2AC3A2",
-       "appmenu_info_icon_color": "#0090ED",
+@@ -61,8 +61,9 @@
-       "tab_icon_overlay_stroke": "rgb(255,255,255)",
--      "tab_icon_overlay_fill": "rgb(91,91,102)"
-+      "tab_icon_overlay_fill": "rgb(91,91,102)",
-+      "zen_main_browser_background": "rgb(229,229,229)"
-     },
-     "properties": {
-       "color_scheme": "light",
-@@ -61,7 +62,7 @@
        "panel_active": "color-mix(in srgb, currentColor 20%, transparent)",
        "panel_active_darker": "color-mix(in srgb, currentColor 27%, transparent)",
        "toolbar_field_icon_opacity": "0.72",
 -      "input_border_color": "color-mix(in srgb, currentColor 41%, transparent)",
+-      "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)"
 +      "input_border_color": "rgba(0, 0, 0, .3)",
-       "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)"
++      "zap_gradient": "linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%)",
++      "zen_main_browser_background": "var(--zen-colors-secondary)"
      }
    },
+ 
 @@ -85,7 +86,8 @@
        "appmenu_update_icon_color": "--panel-banner-item-update-supported-bgcolor",
        "appmenu_info_icon_color": "--panel-banner-item-info-icon-bgcolor",

src/browser/themes/shared/tabs-css.patch

@@ -1,7 +1,16 @@
 diff --git a/browser/themes/shared/tabs.css b/browser/themes/shared/tabs.css
-index eb92f71e5942a19618fd74492354de78ac03bacf..0ba9a169b1a8937e8cdf39fa1fe8e5f14e09c306 100644
+index eb92f71e5942a19618fd74492354de78ac03bacf..51dbf4a694e2ac22fb02abcd405db579966c1bdc 100644
 --- a/browser/themes/shared/tabs.css
 +++ b/browser/themes/shared/tabs.css
+@@ -67,7 +67,7 @@
+ 
+ #tabbrowser-tabs {
+   --tab-min-width: 76px;
+-  --tab-loading-fill: #0A84FF;
++  --tab-loading-fill: var(--zen-primary-color);
+   --tab-overflow-pinned-tabs-width: 0px;
+   padding-inline: var(--tab-overflow-pinned-tabs-width) 0;
+   /* Use a bigger flex value than the searchbar to prevent it from
 @@ -633,7 +633,7 @@
    toolbarbutton:not(#firefox-view-button),
    toolbarpaletteitem:not(#wrapper-firefox-view-button)

src/browser/themes/shared/urlbar-searchbar-css.patch

@@ -0,0 +1,13 @@
+diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
+index 9fc88fbde80a39989bde559ecc07b8e3094ccb7e..e4ceab446cc10d45a4c3a50e7f6323a3da36e8d4 100644
+--- a/browser/themes/shared/urlbar-searchbar.css
++++ b/browser/themes/shared/urlbar-searchbar.css
+@@ -59,7 +59,7 @@
+ 
+ #urlbar-background,
+ #searchbar {
+-  background-color: var(--toolbar-field-background-color);
++  background-color: var(--zen-colors-input-bg);
+   background-clip: border-box;
+   border: 1px solid var(--toolbar-field-border-color);
+   border-radius: var(--toolbarbutton-border-radius);

src/browser/themes/shared/zen-browser-shared.css

@@ -18,8 +18,7 @@
   --fp-contextmenu-separator-vertical: calc(4px - var(--fp-contextmenu-menuitem-border-width));
   --fp-contextmenu-separator-horizontal: 0;
   --fp-contextmenu-bgcolor: light-dark(Menu, rgb(43 42 51 / 0.95));
-  /* TODO: This could be cooked a bit more */
+  --toolbar-bgcolor: var(--zen-colors-tertiary) !important;
-  /*--toolbar-bgcolor: light-dark(rgba(255,255,255,.9), #282828) !important;*/
 }
 
 #PersonalToolbar {
@@ -244,7 +243,7 @@ toolbarbutton#scrollbutton-up {
 }
 
 .tabbrowser-tab:is([multiselected="true"], [selected]) {
-  border-color: var(--color-accent-primary);
+  border-color: var(--zen-colors-primary);
 }
 
 .tab-close-button {

src/toolkit/content/zen-xul.css

@@ -2,7 +2,7 @@
 @import url("zen-fullscreen-override.css");
 
 :root {
-  --zen-main-browser-background: light-dark(#ddd, #4a4a4a); 
+  --zen-main-browser-background: var(--zen-colors-secondary); 
   --zen-appcontent-separator-from-window-single: 7px;
   --zen-appcontent-separator-from-window: 0 var(--zen-appcontent-separator-from-window-single) var(--zen-appcontent-separator-from-window-single);
 }

src/toolkit/themes/shared/global-shared-css.patch

@@ -0,0 +1,13 @@
+diff --git a/toolkit/themes/shared/global-shared.css b/toolkit/themes/shared/global-shared.css
+index c478b2745e838a7fcb91da05ff9c5769065fd1c4..6977f16b1ff6f1f0fe9c1ad47d870d92f5857edd 100644
+--- a/toolkit/themes/shared/global-shared.css
++++ b/toolkit/themes/shared/global-shared.css
+@@ -45,7 +45,7 @@
+ 
+   --toolbar-non-lwt-bgcolor: color-mix(in srgb, -moz-dialog 85%, white);
+   --toolbar-non-lwt-textcolor: -moz-dialogtext;
+-  --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
++  --toolbar-bgcolor: var(--zen-colors-tertiary);
+   --toolbar-color: var(--toolbar-non-lwt-textcolor);
+ 
+   &:-moz-lwtheme {

src/toolkit/themes/shared/in-content/zen-common-shared.css

@@ -1,15 +1,44 @@
 :host(:is(.anonymous-content-host, notification-message)),
 :root {
-  --in-content-primary-button-background: #000 !important;           
+  /** Primary colors examples:
-  --in-content-primary-button-background-hover: #181818 !important;
+   * - green: #96D785;
-  --in-content-primary-button-background-active: #313131 !important;
+   * - blue: #0b57d0;
+   * - yellow: #F8BC48;
+   */
+
+  /** Zen colors are generated automatically from the primary color */
+  --zen-primary-color: #0b57d0;
+  --zen-colors-primary: color-mix(in srgb, var(--zen-primary-color) 50%, black 50%);
+  --zen-colors-secondary: color-mix(in srgb, var(--zen-primary-color) 20%, white 80%);
+  --zen-colors-tertiary: color-mix(in srgb, var(--zen-primary-color) 4%, white 96%);
+
+  --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 30%, white 70%);
+  --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, black 20%);
+  --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 40%, black 60%);
+
+  --zen-colors-shadow-color: color-mix(in srgb, var(--zen-primary-color) 30%, white 70%);
+  --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 10%, white 90%);
+
+  --in-content-primary-button-background: var(--zen-colors-secondary) !important;          
+  --in-content-primary-button-background-hover: var(--zen-colors-hover-bg) !important;
+  --in-content-primary-button-background-active: var(--zen-colors-hover-bg) !important;
+  --in-content-primary-button-text-color: var(--zen-colors-primary-foreground) !important;
   --in-content-primary-button-border-color: transparent !important;
   --in-content-primary-button-border-hover: transparent !important;
-  --in-content-primary-button-border-active: transparent !important;
+  --in-content-primary-button-border-active: var(--zen-colors-border) !important;
   --zen-characteristic-gradient: linear-gradient(135deg, #fac89a 0%, #e290ff 100%);
 
-  --in-content-page-background: #F9F9FB !important;
+  --in-content-accent-color: var(--zen-colors-primary) !important;
-  --zen-in-content-dialog-background: var(--in-content-page-background);
+
+  --button-primary-bgcolor: var(--in-content-primary-button-background) !important;
+  --button-primary-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
+  --button-primary-active-bgcolor: var(--in-content-primary-button-background-active) !important;
+  --button-primary-color: var(--in-content-primary-button-text-color) !important;
+
+  --in-content-page-background: var(--zen-colors-tertiary) !important;
+  --zen-in-content-dialog-background: var(--zen-colors-tertiary);
+
+  /* TODO: Support dark themes! */
 }
 
 @media (prefers-color-scheme: dark) {

src/toolkit/themes/shared/zen-popup.css

@@ -222,3 +222,15 @@
   display: none !important;
 }
 
+
+menupopup::part(content),
+panel::part(content) {
+  --panel-shadow: var(--zen-colors-shadow-color) 0px 1px 4px !important;
+  border: transparent !important;
+}
+
+menupopup, 
+panel {
+  --panel-shadow: none !important;
+  box-shadow: none;
+}