diff --git a/src/browser/components/newtab/content-src/styles/_theme-scss.patch b/src/browser/components/newtab/content-src/styles/_theme-scss.patch new file mode 100644 index 000000000..587e52016 --- /dev/null +++ b/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}; diff --git a/src/browser/themes/addons/dark/manifest-json.patch b/src/browser/themes/addons/dark/manifest-json.patch index 104cbfc87..f2c43695c 100644 --- a/src/browser/themes/addons/dark/manifest-json.patch +++ b/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)", -- "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": { +@@ -61,7 +60,8 @@ "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", diff --git a/src/browser/themes/addons/light/manifest-json.patch b/src/browser/themes/addons/light/manifest-json.patch index e25b39e1b..c6c2c72fd 100644 --- a/src/browser/themes/addons/light/manifest-json.patch +++ b/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", - "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 @@ +@@ -61,8 +61,9 @@ "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", diff --git a/src/browser/themes/shared/tabs-css.patch b/src/browser/themes/shared/tabs-css.patch index ba24d5b00..21ee53333 100644 --- a/src/browser/themes/shared/tabs-css.patch +++ b/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) diff --git a/src/browser/themes/shared/urlbar-searchbar-css.patch b/src/browser/themes/shared/urlbar-searchbar-css.patch new file mode 100644 index 000000000..266f9f6bc --- /dev/null +++ b/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); diff --git a/src/browser/themes/shared/zen-browser-shared.css b/src/browser/themes/shared/zen-browser-shared.css index 3355354a2..8018caf88 100644 --- a/src/browser/themes/shared/zen-browser-shared.css +++ b/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: light-dark(rgba(255,255,255,.9), #282828) !important;*/ + --toolbar-bgcolor: var(--zen-colors-tertiary) !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 { diff --git a/src/toolkit/content/zen-xul.css b/src/toolkit/content/zen-xul.css index b101da51b..403851a54 100644 --- a/src/toolkit/content/zen-xul.css +++ b/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); } diff --git a/src/toolkit/themes/shared/global-shared-css.patch b/src/toolkit/themes/shared/global-shared-css.patch new file mode 100644 index 000000000..efc63ebb3 --- /dev/null +++ b/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 { diff --git a/src/toolkit/themes/shared/in-content/zen-common-shared.css b/src/toolkit/themes/shared/in-content/zen-common-shared.css index 10d80e9b6..3575e9663 100644 --- a/src/toolkit/themes/shared/in-content/zen-common-shared.css +++ b/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; - --in-content-primary-button-background-hover: #181818 !important; - --in-content-primary-button-background-active: #313131 !important; + /** Primary colors examples: + * - green: #96D785; + * - 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; - --zen-in-content-dialog-background: var(--in-content-page-background); + --in-content-accent-color: var(--zen-colors-primary) !important; + + --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) { diff --git a/src/toolkit/themes/shared/zen-popup.css b/src/toolkit/themes/shared/zen-popup.css index 1c16056c5..76aa12920 100644 --- a/src/toolkit/themes/shared/zen-popup.css +++ b/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; +}