Bug 1726437 - Add new monochromatic themes. r=dao,mixedpuppy
authorHarry Twyford <htwyford@mozilla.com>
Tue, 21 Sep 2021 13:32:58 +0000
changeset 592642 0f7d37986a52523e5d13f3a4a7354c689f20ee0a
parent 592641 f776f2f33781996dc845740351aa3b84f5ce079e
child 592643 f213f078a6d2a0e79a5632c1ead78fd6a0f4eeb1
push id38811
push usernbeleuzu@mozilla.com
push dateWed, 22 Sep 2021 04:09:13 +0000
treeherdermozilla-central@b6fd43458638 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, mixedpuppy
bugs1726437
milestone94.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1726437 - Add new monochromatic themes. r=dao,mixedpuppy This is pretty much impossible to review as-is, so it may be more useful to review the script that made them. The repo is at https://github.com/htwyford/create-theme-script. parse-themes-script.js is the main script. It reads input.json. input.json is pulled from https://github.com/FirefoxUX/themes/blob/main/tokens/color/base.json, with some light edits to fix inconsistencies. The file in the FirefoxUX repo is an export of the colors in the Figma file: https://www.figma.com/file/xaRff6432QsirRftX8NZgb/MR2-Themes?node-id=86%3A17747. The themes aren't perfect yet. For example, the text color in the Urlbar chiclet is sometimes wrong. They also don't consider the UX spec on badge colors, since UX is still actively updating that part of the spec. Since these themes are behind a pref, I think we should land it and fix the issues in followups. It will make it more clear what is changing when they're not being added en masse like this. Getting them in the tree ASAP also lets UX and QA get a head start on testing them. Differential Revision: https://phabricator.services.mozilla.com/D125755
browser/base/content/test/static/browser_all_files_referenced.js
browser/components/BrowserGlue.jsm
browser/themes/addons/jar.mn
browser/themes/addons/monochromatic/abstract/balanced/icon.svg
browser/themes/addons/monochromatic/abstract/balanced/manifest.json
browser/themes/addons/monochromatic/abstract/balanced/preview.svg
browser/themes/addons/monochromatic/abstract/bold/icon.svg
browser/themes/addons/monochromatic/abstract/bold/manifest.json
browser/themes/addons/monochromatic/abstract/bold/preview.svg
browser/themes/addons/monochromatic/abstract/soft/icon.svg
browser/themes/addons/monochromatic/abstract/soft/manifest.json
browser/themes/addons/monochromatic/abstract/soft/preview.svg
browser/themes/addons/monochromatic/cheers/balanced/icon.svg
browser/themes/addons/monochromatic/cheers/balanced/manifest.json
browser/themes/addons/monochromatic/cheers/balanced/preview.svg
browser/themes/addons/monochromatic/cheers/bold/icon.svg
browser/themes/addons/monochromatic/cheers/bold/manifest.json
browser/themes/addons/monochromatic/cheers/bold/preview.svg
browser/themes/addons/monochromatic/cheers/soft/icon.svg
browser/themes/addons/monochromatic/cheers/soft/manifest.json
browser/themes/addons/monochromatic/cheers/soft/preview.svg
browser/themes/addons/monochromatic/elemental/balanced/icon.svg
browser/themes/addons/monochromatic/elemental/balanced/manifest.json
browser/themes/addons/monochromatic/elemental/balanced/preview.svg
browser/themes/addons/monochromatic/elemental/bold/icon.svg
browser/themes/addons/monochromatic/elemental/bold/manifest.json
browser/themes/addons/monochromatic/elemental/bold/preview.svg
browser/themes/addons/monochromatic/elemental/soft/icon.svg
browser/themes/addons/monochromatic/elemental/soft/manifest.json
browser/themes/addons/monochromatic/elemental/soft/preview.svg
browser/themes/addons/monochromatic/foto/balanced/icon.svg
browser/themes/addons/monochromatic/foto/balanced/manifest.json
browser/themes/addons/monochromatic/foto/balanced/preview.svg
browser/themes/addons/monochromatic/foto/bold/icon.svg
browser/themes/addons/monochromatic/foto/bold/manifest.json
browser/themes/addons/monochromatic/foto/bold/preview.svg
browser/themes/addons/monochromatic/foto/soft/icon.svg
browser/themes/addons/monochromatic/foto/soft/manifest.json
browser/themes/addons/monochromatic/foto/soft/preview.svg
browser/themes/addons/monochromatic/graffiti/balanced/icon.svg
browser/themes/addons/monochromatic/graffiti/balanced/manifest.json
browser/themes/addons/monochromatic/graffiti/balanced/preview.svg
browser/themes/addons/monochromatic/graffiti/bold/icon.svg
browser/themes/addons/monochromatic/graffiti/bold/manifest.json
browser/themes/addons/monochromatic/graffiti/bold/preview.svg
browser/themes/addons/monochromatic/graffiti/soft/icon.svg
browser/themes/addons/monochromatic/graffiti/soft/manifest.json
browser/themes/addons/monochromatic/graffiti/soft/preview.svg
browser/themes/addons/monochromatic/lush/balanced/icon.svg
browser/themes/addons/monochromatic/lush/balanced/manifest.json
browser/themes/addons/monochromatic/lush/balanced/preview.svg
browser/themes/addons/monochromatic/lush/bold/manifest.json
browser/themes/addons/monochromatic/lush/soft/icon.svg
browser/themes/addons/monochromatic/lush/soft/manifest.json
browser/themes/addons/monochromatic/lush/soft/preview.svg
toolkit/mozapps/extensions/content/aboutaddons.js
--- a/browser/base/content/test/static/browser_all_files_referenced.js
+++ b/browser/base/content/test/static/browser_all_files_referenced.js
@@ -49,16 +49,20 @@ var gExceptionPaths = [
 
   // Exclude all services-automation because they are used through webdriver
   "resource://gre/modules/services-automation/",
   "resource://services-automation/ServicesAutomation.jsm",
 
   // Paths from this folder are constructed in NetErrorParent.jsm based on
   // the type of cert or net error the user is encountering.
   "chrome://browser/content/certerror/supportpages/",
+
+  // Points to theme preview images, which are defined in browser/ but only used
+  // in toolkit/mozapps/extensions/content/aboutaddons.js.
+  "resource://usercontext-content/builtin-themes/",
 ];
 
 // These are not part of the omni.ja file, so we find them only when running
 // the test on a non-packaged build.
 if (AppConstants.platform == "macosx") {
   gExceptionPaths.push("resource://gre/res/cursors/");
   gExceptionPaths.push("resource://gre/res/touchbar/");
 }
@@ -265,28 +269,16 @@ var whitelist = [
   },
   { file: "chrome://browser/content/screenshots/menu-fullpage.svg" },
   { file: "chrome://browser/content/screenshots/menu-visible.svg" },
 
   { file: "resource://app/modules/SnapshotSelector.jsm" },
 
   // toolkit/xre/MacRunFromDmgUtils.mm
   { file: "resource://gre/localization/en-US/toolkit/global/run-from-dmg.ftl" },
-
-  // Theme preview images are defined in browser/ but only used in
-  // toolkit/mozapps/extensions/content/aboutaddons.js.
-  { file: "resource://usercontext-content/builtin-themes/light/preview.svg" },
-  { file: "resource://usercontext-content/builtin-themes/dark/preview.svg" },
-  {
-    file: "resource://usercontext-content/builtin-themes/alpenglow/preview.svg",
-  },
-  {
-    file:
-      "resource://usercontext-content/builtin-themes/monochromatic/lush/bold/preview.svg",
-  },
 ];
 
 if (AppConstants.NIGHTLY_BUILD && AppConstants.platform != "win") {
   // This path is refereneced in nsFxrCommandLineHandler.cpp, which is only
   // compiled in Windows. Whitelisted this path so that non-Windows builds
   // can access the FxR UI via --chrome rather than --fxr (which includes VR-
   // specific functionality)
   whitelist.push({ file: "chrome://fxr/content/fxrui.html" });
--- a/browser/components/BrowserGlue.jsm
+++ b/browser/components/BrowserGlue.jsm
@@ -1393,20 +1393,115 @@ BrowserGlue.prototype = {
         false
       )
     ) {
       // List of monochromatic themes. The themes are represented by objects
       // containing their id, current version, and path relative to
       // resource://builtin-themes/monochromatic/.
       const kMonochromaticThemeList = [
         {
+          id: "firefox-lush-soft@mozilla.org",
+          version: "1.0",
+          path: "lush/soft/",
+        },
+        {
+          id: "firefox-lush-balanced@mozilla.org",
+          version: "1.0",
+          path: "lush/balanced/",
+        },
+        {
+          id: "firefox-lush-soft@mozilla.org",
+          version: "1.0",
+          path: "lush/soft/",
+        },
+        {
+          id: "firefox-lush-balanced@mozilla.org",
+          version: "1.0",
+          path: "lush/balanced/",
+        },
+        {
           id: "firefox-lush-bold@mozilla.org",
           version: "1.0",
           path: "lush/bold/",
         },
+        {
+          id: "firefox-abstract-soft@mozilla.org",
+          version: "1.0",
+          path: "abstract/soft/",
+        },
+        {
+          id: "firefox-abstract-balanced@mozilla.org",
+          version: "1.0",
+          path: "abstract/balanced/",
+        },
+        {
+          id: "firefox-abstract-bold@mozilla.org",
+          version: "1.0",
+          path: "abstract/bold/",
+        },
+        {
+          id: "firefox-elemental-soft@mozilla.org",
+          version: "1.0",
+          path: "elemental/soft/",
+        },
+        {
+          id: "firefox-elemental-balanced@mozilla.org",
+          version: "1.0",
+          path: "elemental/balanced/",
+        },
+        {
+          id: "firefox-elemental-bold@mozilla.org",
+          version: "1.0",
+          path: "elemental/bold/",
+        },
+        {
+          id: "firefox-cheers-soft@mozilla.org",
+          version: "1.0",
+          path: "cheers/soft/",
+        },
+        {
+          id: "firefox-cheers-balanced@mozilla.org",
+          version: "1.0",
+          path: "cheers/balanced/",
+        },
+        {
+          id: "firefox-cheers-bold@mozilla.org",
+          version: "1.0",
+          path: "cheers/bold/",
+        },
+        {
+          id: "firefox-graffiti-soft@mozilla.org",
+          version: "1.0",
+          path: "graffiti/soft/",
+        },
+        {
+          id: "firefox-graffiti-balanced@mozilla.org",
+          version: "1.0",
+          path: "graffiti/balanced/",
+        },
+        {
+          id: "firefox-graffiti-bold@mozilla.org",
+          version: "1.0",
+          path: "graffiti/bold/",
+        },
+        {
+          id: "firefox-foto-soft@mozilla.org",
+          version: "1.0",
+          path: "foto/soft/",
+        },
+        {
+          id: "firefox-foto-balanced@mozilla.org",
+          version: "1.0",
+          path: "foto/balanced/",
+        },
+        {
+          id: "firefox-foto-bold@mozilla.org",
+          version: "1.0",
+          path: "foto/bold/",
+        },
       ];
       for (let { id, version, path } of kMonochromaticThemeList) {
         AddonManager.maybeInstallBuiltinAddon(
           id,
           version,
           `resource://builtin-themes/monochromatic/${path}`
         );
 
--- a/browser/themes/addons/jar.mn
+++ b/browser/themes/addons/jar.mn
@@ -11,10 +11,44 @@ browser.jar:
   content/builtin-themes/dark                      (dark/*.svg)
   content/builtin-themes/dark                      (dark/*.css)
   content/builtin-themes/dark/manifest.json        (dark/manifest.json)
 
   content/builtin-themes/light                     (light/*.svg)
   content/builtin-themes/light                     (light/*.css)
   content/builtin-themes/light/manifest.json       (light/manifest.json)
 
-  content/builtin-themes/monochromatic/lush/bold                    (monochromatic/lush/bold/*.svg)
-  content/builtin-themes/monochromatic/lush/bold/manifest.json      (monochromatic/lush/bold/manifest.json)
+  content/builtin-themes/monochromatic/lush/soft                          (monochromatic/lush/soft/*.svg)
+  content/builtin-themes/monochromatic/lush/soft/manifest.json            (monochromatic/lush/soft/manifest.json)
+  content/builtin-themes/monochromatic/lush/balanced                      (monochromatic/lush/balanced/*.svg)
+  content/builtin-themes/monochromatic/lush/balanced/manifest.json        (monochromatic/lush/balanced/manifest.json)
+  content/builtin-themes/monochromatic/lush/bold                          (monochromatic/lush/bold/*.svg)
+  content/builtin-themes/monochromatic/lush/bold/manifest.json            (monochromatic/lush/bold/manifest.json)
+  content/builtin-themes/monochromatic/abstract/soft                      (monochromatic/abstract/soft/*.svg)
+  content/builtin-themes/monochromatic/abstract/soft/manifest.json        (monochromatic/abstract/soft/manifest.json)
+  content/builtin-themes/monochromatic/abstract/balanced                  (monochromatic/abstract/balanced/*.svg)
+  content/builtin-themes/monochromatic/abstract/balanced/manifest.json    (monochromatic/abstract/balanced/manifest.json)
+  content/builtin-themes/monochromatic/abstract/bold                      (monochromatic/abstract/bold/*.svg)
+  content/builtin-themes/monochromatic/abstract/bold/manifest.json        (monochromatic/abstract/bold/manifest.json)
+  content/builtin-themes/monochromatic/elemental/soft                     (monochromatic/elemental/soft/*.svg)
+  content/builtin-themes/monochromatic/elemental/soft/manifest.json       (monochromatic/elemental/soft/manifest.json)
+  content/builtin-themes/monochromatic/elemental/balanced                 (monochromatic/elemental/balanced/*.svg)
+  content/builtin-themes/monochromatic/elemental/balanced/manifest.json   (monochromatic/elemental/balanced/manifest.json)
+  content/builtin-themes/monochromatic/elemental/bold                     (monochromatic/elemental/bold/*.svg)
+  content/builtin-themes/monochromatic/elemental/bold/manifest.json       (monochromatic/elemental/bold/manifest.json)
+  content/builtin-themes/monochromatic/cheers/soft                        (monochromatic/cheers/soft/*.svg)
+  content/builtin-themes/monochromatic/cheers/soft/manifest.json          (monochromatic/cheers/soft/manifest.json)
+  content/builtin-themes/monochromatic/cheers/balanced                    (monochromatic/cheers/balanced/*.svg)
+  content/builtin-themes/monochromatic/cheers/balanced/manifest.json      (monochromatic/cheers/balanced/manifest.json)
+  content/builtin-themes/monochromatic/cheers/bold                        (monochromatic/cheers/bold/*.svg)
+  content/builtin-themes/monochromatic/cheers/bold/manifest.json          (monochromatic/cheers/bold/manifest.json)
+  content/builtin-themes/monochromatic/graffiti/soft                      (monochromatic/graffiti/soft/*.svg)
+  content/builtin-themes/monochromatic/graffiti/soft/manifest.json        (monochromatic/graffiti/soft/manifest.json)
+  content/builtin-themes/monochromatic/graffiti/balanced                  (monochromatic/graffiti/balanced/*.svg)
+  content/builtin-themes/monochromatic/graffiti/balanced/manifest.json    (monochromatic/graffiti/balanced/manifest.json)
+  content/builtin-themes/monochromatic/graffiti/bold                      (monochromatic/graffiti/bold/*.svg)
+  content/builtin-themes/monochromatic/graffiti/bold/manifest.json        (monochromatic/graffiti/bold/manifest.json)
+  content/builtin-themes/monochromatic/foto/soft                          (monochromatic/foto/soft/*.svg)
+  content/builtin-themes/monochromatic/foto/soft/manifest.json            (monochromatic/foto/soft/manifest.json)
+  content/builtin-themes/monochromatic/foto/balanced                      (monochromatic/foto/balanced/*.svg)
+  content/builtin-themes/monochromatic/foto/balanced/manifest.json        (monochromatic/foto/balanced/manifest.json)
+  content/builtin-themes/monochromatic/foto/bold                          (monochromatic/foto/bold/*.svg)
+  content/builtin-themes/monochromatic/foto/bold/manifest.json            (monochromatic/foto/bold/manifest.json)
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/abstract/balanced/icon.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
+      <stop stop-color="hsl(15, 62%, 34%)"/>
+      <stop offset="1" stop-color="hsl(15, 62%, 40%)"/>
+    </linearGradient>
+  </defs>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/abstract/balanced/manifest.json
@@ -0,0 +1,56 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "firefox-abstract-balanced@mozilla.org"
+    }
+  },
+  "name": "Abstract – Balanced",
+  "author": "Mozilla",
+  "version": "1.0",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 0%)",
+      "tab_selected": "hsl(16, 73%, 97%)",
+      "tab_line": "transparent",
+      "frame": "hsl(15, 62%, 34%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(15, 74%, 63%)",
+      "popup_highlight": "hsla(15, 84%, 65%, 0.3)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(15, 62%, 40%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(16, 73%, 97%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "hsl(15, 74%, 63%)",
+      "ntp_background": "hsl(15, 39%, 80%)",
+      "ntp_card_background": "hsl(0, 0%, 100%)",
+      "ntp_text": "hsl(0, 0%, 0%)",
+      "sidebar": "hsl(0, 0%, 100%)",
+      "sidebar_text": "hsl(0, 0%, 0%)",
+      "sidebar_highlight": "hsla(15, 84%, 65%, 0.3)",
+      "address_bar_box": "hsl(15, 62%, 34%)",
+      "address_bar_box_focus": "hsl(15, 62%, 40%)",
+      "address_bar_url_color": "hsl(15, 62%, 40%)",
+      "panel_item_hover": "hsla(15, 84%, 65%, 0.3)",
+      "panel_item_active": "hsla(15, 84%, 65%, 0.45)",
+      "panel_separator": "hsl(15, 74%, 63%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_focus": "--urlbar-box-focus-bgcolor",
+      "address_bar_url_color": "--urlbar-popup-url-color",
+      "panel_item_hover": "--panel-item-hover-bgcolor",
+      "panel_item_active": "--panel-item-active-bgcolor",
+      "panel_separator": "--panel-separator-color"
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/abstract/balanced/preview.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="hsl(15, 62%, 34%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(16, 73%, 97%)" stroke="transparent" stroke-width="1.5" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 0%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 100%)" />
+  <rect y="44" width="680" height="48" fill="hsl(15, 62%, 40%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="hsl(16, 73%, 97%)" />
+  <circle cx="130" cy="68" r="6.25" stroke="hsl(0, 0%, 0%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(0, 0%, 0%)" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/abstract/bold/icon.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
+      <stop stop-color="hsl(15, 10%, 16%)"/>
+      <stop offset="1" stop-color="hsl(18, 10%, 25%)"/>
+    </linearGradient>
+  </defs>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/abstract/bold/manifest.json
@@ -0,0 +1,56 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "firefox-abstract-bold@mozilla.org"
+    }
+  },
+  "name": "Abstract – Bold",
+  "author": "Mozilla",
+  "version": "1.0",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(17, 89%, 86%)",
+      "tab_text": "hsl(17, 89%, 86%)",
+      "tab_selected": "hsl(12, 5%, 21%)",
+      "tab_line": "hsl(16, 100%, 86%)",
+      "frame": "hsl(15, 10%, 16%)",
+      "popup": "hsl(12, 5%, 21%)",
+      "popup_text": "hsl(17, 89%, 86%)",
+      "popup_border": "hsl(16, 100%, 86%)",
+      "popup_highlight": "hsla(16, 100%, 86%, 0.2)",
+      "popup_highlight_text": "hsl(17, 89%, 86%)",
+      "toolbar": "hsl(18, 10%, 25%)",
+      "toolbar_text": "hsl(17, 89%, 86%)",
+      "toolbar_field": "hsl(15, 10%, 16%)",
+      "toolbar_field_text": "hsl(17, 89%, 86%)",
+      "toolbar_field_focus": "hsl(12, 5%, 21%)",
+      "toolbar_field_border_focus": "hsl(16, 100%, 86%)",
+      "ntp_background": "hsl(20, 9%, 13%)",
+      "ntp_card_background": "hsl(12, 5%, 21%)",
+      "ntp_text": "hsl(17, 89%, 86%)",
+      "sidebar": "hsl(12, 5%, 21%)",
+      "sidebar_text": "hsl(17, 89%, 86%)",
+      "sidebar_highlight": "hsla(16, 100%, 86%, 0.2)",
+      "address_bar_box": "hsl(12, 5%, 21%)",
+      "address_bar_box_focus": "hsl(18, 10%, 25%)",
+      "address_bar_url_color": "hsl(17, 89%, 82%)",
+      "panel_item_hover": "hsla(16, 100%, 86%, 0.2)",
+      "panel_item_active": "hsla(16, 100%, 86%, 0.35)",
+      "panel_separator": "hsl(16, 100%, 86%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_focus": "--urlbar-box-focus-bgcolor",
+      "address_bar_url_color": "--urlbar-popup-url-color",
+      "panel_item_hover": "--panel-item-hover-bgcolor",
+      "panel_item_active": "--panel-item-active-bgcolor",
+      "panel_separator": "--panel-separator-color"
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/abstract/bold/preview.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="hsl(15, 10%, 16%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(12, 5%, 21%)" stroke="hsl(16, 100%, 86%)" stroke-width="1.5" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(17, 89%, 86%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(17, 89%, 86%)" />
+  <rect y="44" width="680" height="48" fill="hsl(18, 10%, 25%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(17, 89%, 86%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(17, 89%, 86%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(17, 89%, 86%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(17, 89%, 86%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(17, 89%, 86%)" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="hsl(15, 10%, 16%)" />
+  <circle cx="130" cy="68" r="6.25" stroke="hsl(17, 89%, 86%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(17, 89%, 86%)" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/abstract/soft/icon.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
+      <stop stop-color="hsl(16, 100%, 75%)"/>
+      <stop offset="1" stop-color="hsl(16, 100%, 82%)"/>
+    </linearGradient>
+  </defs>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/abstract/soft/manifest.json
@@ -0,0 +1,56 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "firefox-abstract-soft@mozilla.org"
+    }
+  },
+  "name": "Abstract – Soft",
+  "author": "Mozilla",
+  "version": "1.0",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(30, 5%, 8%)",
+      "tab_text": "hsl(30, 5%, 8%)",
+      "tab_selected": "hsl(0, 0%, 100%)",
+      "tab_line": "transparent",
+      "frame": "hsl(16, 100%, 75%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(30, 5%, 8%)",
+      "popup_border": "hsl(15, 71%, 80%)",
+      "popup_highlight": "hsla(15, 90%, 50%, 0.2)",
+      "popup_highlight_text": "hsl(30, 5%, 8%)",
+      "toolbar": "hsl(16, 100%, 82%)",
+      "toolbar_text": "hsl(30, 5%, 8%)",
+      "toolbar_field": "hsl(16, 100%, 75%)",
+      "toolbar_field_text": "hsl(30, 5%, 8%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "hsl(15, 71%, 80%)",
+      "ntp_background": "hsl(16, 73%, 97%)",
+      "ntp_card_background": "hsl(0, 0%, 100%)",
+      "ntp_text": "hsl(30, 5%, 8%)",
+      "sidebar": "hsl(0, 0%, 100%)",
+      "sidebar_text": "hsl(30, 5%, 8%)",
+      "sidebar_highlight": "hsla(15, 90%, 50%, 0.2)",
+      "address_bar_box": "hsl(0, 0%, 100%)",
+      "address_bar_box_focus": "hsl(16, 100%, 82%)",
+      "address_bar_url_color": "hsl(15, 70%, 38%)",
+      "panel_item_hover": "hsla(15, 90%, 50%, 0.2)",
+      "panel_item_active": "hsla(15, 90%, 50%, 0.35)",
+      "panel_separator": "hsl(15, 71%, 80%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_focus": "--urlbar-box-focus-bgcolor",
+      "address_bar_url_color": "--urlbar-popup-url-color",
+      "panel_item_hover": "--panel-item-hover-bgcolor",
+      "panel_item_active": "--panel-item-active-bgcolor",
+      "panel_separator": "--panel-separator-color"
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/abstract/soft/preview.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="hsl(16, 100%, 75%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(30, 5%, 8%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(30, 5%, 8%)" />
+  <rect y="44" width="680" height="48" fill="hsl(16, 100%, 82%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(30, 5%, 8%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(30, 5%, 8%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(30, 5%, 8%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(30, 5%, 8%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(30, 5%, 8%)" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="hsl(16, 100%, 75%)" />
+  <circle cx="130" cy="68" r="6.25" stroke="hsl(30, 5%, 8%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(30, 5%, 8%)" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/cheers/balanced/icon.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
+      <stop stop-color="hsl(42, 95%, 60%)"/>
+      <stop offset="1" stop-color="hsl(42, 95%, 70%)"/>
+    </linearGradient>
+  </defs>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/cheers/balanced/manifest.json
@@ -0,0 +1,56 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "firefox-cheers-balanced@mozilla.org"
+    }
+  },
+  "name": "Cheers – Balanced",
+  "author": "Mozilla",
+  "version": "1.0",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 0%)",
+      "tab_text": "hsl(0, 0%, 100%)",
+      "tab_selected": "hsl(0, 0%, 20%)",
+      "tab_line": "transparent",
+      "frame": "hsl(42, 95%, 60%)",
+      "popup": "hsl(0, 0%, 20%)",
+      "popup_text": "hsl(0, 0%, 100%)",
+      "popup_border": "hsl(42, 63%, 78%)",
+      "popup_highlight": "hsla(42, 100%, 62%, 0.22)",
+      "popup_highlight_text": "hsl(0, 0%, 100%)",
+      "toolbar": "hsl(42, 95%, 70%)",
+      "toolbar_text": "hsl(0, 0%, 0%)",
+      "toolbar_field": "hsl(0, 0%, 20%)",
+      "toolbar_field_text": "hsl(0, 0%, 100%)",
+      "toolbar_field_focus": "hsl(0, 0%, 20%)",
+      "toolbar_field_border_focus": "hsl(42, 63%, 78%)",
+      "ntp_background": "hsl(0, 0%, 9%)",
+      "ntp_card_background": "hsl(0, 0%, 20%)",
+      "ntp_text": "hsl(0, 0%, 100%)",
+      "sidebar": "hsl(0, 0%, 20%)",
+      "sidebar_text": "hsl(0, 0%, 100%)",
+      "sidebar_highlight": "hsla(42, 100%, 62%, 0.22)",
+      "address_bar_box": "hsl(42, 95%, 60%)",
+      "address_bar_box_focus": "hsl(42, 95%, 70%)",
+      "address_bar_url_color": "hsl(42, 95%, 60%)",
+      "panel_item_hover": "hsla(42, 100%, 62%, 0.22)",
+      "panel_item_active": "hsla(42, 100%, 62%, 0.37)",
+      "panel_separator": "hsl(42, 63%, 78%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_focus": "--urlbar-box-focus-bgcolor",
+      "address_bar_url_color": "--urlbar-popup-url-color",
+      "panel_item_hover": "--panel-item-hover-bgcolor",
+      "panel_item_active": "--panel-item-active-bgcolor",
+      "panel_separator": "--panel-separator-color"
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/cheers/balanced/preview.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="hsl(42, 95%, 60%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 20%)" stroke="transparent" stroke-width="1.5" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 100%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 0%)" />
+  <rect y="44" width="680" height="48" fill="hsl(42, 95%, 70%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(0, 0%, 0%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(0, 0%, 0%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(0, 0%, 0%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(0, 0%, 0%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(0, 0%, 0%)" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="hsl(0, 0%, 20%)" />
+  <circle cx="130" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(0, 0%, 100%)" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/cheers/bold/icon.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
+      <stop stop-color="hsl(0, 0%, 11%)"/>
+      <stop offset="1" stop-color="hsl(0, 0%, 24%)"/>
+    </linearGradient>
+  </defs>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/cheers/bold/manifest.json
@@ -0,0 +1,56 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "firefox-cheers-bold@mozilla.org"
+    }
+  },
+  "name": "Cheers – Bold",
+  "author": "Mozilla",
+  "version": "1.0",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(42, 96%, 65%)",
+      "tab_text": "hsl(42, 96%, 65%)",
+      "tab_selected": "hsl(0, 0%, 20%)",
+      "tab_line": "hsl(42, 80%, 58%)",
+      "frame": "hsl(0, 0%, 11%)",
+      "popup": "hsl(0, 0%, 20%)",
+      "popup_text": "hsl(42, 96%, 65%)",
+      "popup_border": "hsl(42, 95%, 60%)",
+      "popup_highlight": "hsla(42, 95%, 60%, 0.2)",
+      "popup_highlight_text": "hsl(42, 96%, 65%)",
+      "toolbar": "hsl(0, 0%, 24%)",
+      "toolbar_text": "hsl(42, 96%, 65%)",
+      "toolbar_field": "hsl(0, 0%, 11%)",
+      "toolbar_field_text": "hsl(42, 96%, 65%)",
+      "toolbar_field_focus": "hsl(0, 0%, 20%)",
+      "toolbar_field_border_focus": "hsl(42, 95%, 60%)",
+      "ntp_background": "hsl(0, 0%, 11%)",
+      "ntp_card_background": "hsl(0, 0%, 20%)",
+      "ntp_text": "hsl(42, 96%, 65%)",
+      "sidebar": "hsl(0, 0%, 20%)",
+      "sidebar_text": "hsl(42, 96%, 65%)",
+      "sidebar_highlight": "hsla(42, 95%, 60%, 0.2)",
+      "address_bar_box": "hsl(0, 0%, 20%)",
+      "address_bar_box_focus": "hsl(0, 0%, 24%)",
+      "address_bar_url_color": "hsl(42, 70%, 72%)",
+      "panel_item_hover": "hsla(42, 95%, 60%, 0.2)",
+      "panel_item_active": "hsla(42, 95%, 60%, 0.35)",
+      "panel_separator": "hsl(42, 95%, 60%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_focus": "--urlbar-box-focus-bgcolor",
+      "address_bar_url_color": "--urlbar-popup-url-color",
+      "panel_item_hover": "--panel-item-hover-bgcolor",
+      "panel_item_active": "--panel-item-active-bgcolor",
+      "panel_separator": "--panel-separator-color"
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/cheers/bold/preview.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="hsl(0, 0%, 11%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 20%)" stroke="hsl(42, 80%, 58%)" stroke-width="1.5" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(42, 96%, 65%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(42, 96%, 65%)" />
+  <rect y="44" width="680" height="48" fill="hsl(0, 0%, 24%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(42, 96%, 65%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(42, 96%, 65%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(42, 96%, 65%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(42, 96%, 65%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(42, 96%, 65%)" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="hsl(0, 0%, 11%)" />
+  <circle cx="130" cy="68" r="6.25" stroke="hsl(42, 96%, 65%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(42, 96%, 65%)" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/cheers/soft/icon.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
+      <stop stop-color="hsl(42, 100%, 70%)"/>
+      <stop offset="1" stop-color="hsl(42, 100%, 84%)"/>
+    </linearGradient>
+  </defs>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/cheers/soft/manifest.json
@@ -0,0 +1,56 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "firefox-cheers-soft@mozilla.org"
+    }
+  },
+  "name": "Cheers – Soft",
+  "author": "Mozilla",
+  "version": "1.0",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 0%)",
+      "tab_text": "hsl(0, 0%, 0%)",
+      "tab_selected": "hsl(0, 0%, 100%)",
+      "tab_line": "transparent",
+      "frame": "hsl(42, 100%, 70%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(42, 100%, 60%)",
+      "popup_highlight": "hsla(42, 100%, 78%, 0.3)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(42, 100%, 84%)",
+      "toolbar_text": "hsl(0, 0%, 0%)",
+      "toolbar_field": "hsl(42, 100%, 70%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "hsl(42, 100%, 60%)",
+      "ntp_background": "hsl(43, 61%, 92%)",
+      "ntp_card_background": "hsl(0, 0%, 100%)",
+      "ntp_text": "hsl(0, 0%, 0%)",
+      "sidebar": "hsl(0, 0%, 100%)",
+      "sidebar_text": "hsl(0, 0%, 0%)",
+      "sidebar_highlight": "hsla(42, 100%, 78%, 0.3)",
+      "address_bar_box": "hsl(0, 0%, 100%)",
+      "address_bar_box_focus": "hsl(42, 100%, 84%)",
+      "address_bar_url_color": "hsl(42, 100%, 28%)",
+      "panel_item_hover": "hsla(42, 100%, 78%, 0.3)",
+      "panel_item_active": "hsla(42, 100%, 78%, 0.45)",
+      "panel_separator": "hsl(42, 100%, 60%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_focus": "--urlbar-box-focus-bgcolor",
+      "address_bar_url_color": "--urlbar-popup-url-color",
+      "panel_item_hover": "--panel-item-hover-bgcolor",
+      "panel_item_active": "--panel-item-active-bgcolor",
+      "panel_separator": "--panel-separator-color"
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/cheers/soft/preview.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="hsl(42, 100%, 70%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 0%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 0%)" />
+  <rect y="44" width="680" height="48" fill="hsl(42, 100%, 84%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(0, 0%, 0%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(0, 0%, 0%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(0, 0%, 0%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(0, 0%, 0%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(0, 0%, 0%)" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="hsl(42, 100%, 70%)" />
+  <circle cx="130" cy="68" r="6.25" stroke="hsl(0, 0%, 0%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(0, 0%, 0%)" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/elemental/balanced/icon.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
+      <stop stop-color="hsl(38, 7%, 30%)"/>
+      <stop offset="1" stop-color="hsl(41, 7%, 52%)"/>
+    </linearGradient>
+  </defs>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/elemental/balanced/manifest.json
@@ -0,0 +1,56 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "firefox-elemental-balanced@mozilla.org"
+    }
+  },
+  "name": "Elemental – Balanced",
+  "author": "Mozilla",
+  "version": "1.0",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 0%)",
+      "tab_selected": "hsl(40, 7%, 92%)",
+      "tab_line": "transparent",
+      "frame": "hsl(38, 7%, 30%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(43, 7%, 60%)",
+      "popup_highlight": "hsla(38, 7%, 70%, 0.6)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(41, 7%, 52%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(40, 7%, 92%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "hsl(43, 7%, 60%)",
+      "ntp_background": "hsl(40, 7%, 18%)",
+      "ntp_card_background": "hsl(0, 0%, 100%)",
+      "ntp_text": "hsl(0, 0%, 0%)",
+      "sidebar": "hsl(0, 0%, 100%)",
+      "sidebar_text": "hsl(0, 0%, 0%)",
+      "sidebar_highlight": "hsla(38, 7%, 70%, 0.6)",
+      "address_bar_box": "hsl(38, 7%, 30%)",
+      "address_bar_box_focus": "hsl(41, 7%, 52%)",
+      "address_bar_url_color": "hsl(150, 2%, 20%)",
+      "panel_item_hover": "hsla(38, 7%, 70%, 0.6)",
+      "panel_item_active": "hsla(38, 7%, 70%, 0.75)",
+      "panel_separator": "hsl(43, 7%, 60%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_focus": "--urlbar-box-focus-bgcolor",
+      "address_bar_url_color": "--urlbar-popup-url-color",
+      "panel_item_hover": "--panel-item-hover-bgcolor",
+      "panel_item_active": "--panel-item-active-bgcolor",
+      "panel_separator": "--panel-separator-color"
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/elemental/balanced/preview.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="hsl(38, 7%, 30%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(40, 7%, 92%)" stroke="transparent" stroke-width="1.5" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 0%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 100%)" />
+  <rect y="44" width="680" height="48" fill="hsl(41, 7%, 52%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="hsl(40, 7%, 92%)" />
+  <circle cx="130" cy="68" r="6.25" stroke="hsl(0, 0%, 0%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(0, 0%, 0%)" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/elemental/bold/icon.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
+      <stop stop-color="hsl(38, 7%, 30%)"/>
+      <stop offset="1" stop-color="hsl(43, 7%, 42%)"/>
+    </linearGradient>
+  </defs>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/elemental/bold/manifest.json
@@ -0,0 +1,56 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "firefox-elemental-bold@mozilla.org"
+    }
+  },
+  "name": "Elemental – Bold",
+  "author": "Mozilla",
+  "version": "1.0",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 100%)",
+      "tab_selected": "hsl(40, 7%, 25%)",
+      "tab_line": "hsl(42, 7%, 38%)",
+      "frame": "hsl(38, 7%, 30%)",
+      "popup": "hsl(40, 7%, 25%)",
+      "popup_text": "hsl(0, 0%, 100%)",
+      "popup_border": "hsl(43, 7%, 40%)",
+      "popup_highlight": "hsla(38, 7%, 70%, 0.3)",
+      "popup_highlight_text": "hsl(0, 0%, 100%)",
+      "toolbar": "hsl(43, 7%, 42%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(38, 7%, 30%)",
+      "toolbar_field_text": "hsl(0, 0%, 100%)",
+      "toolbar_field_focus": "hsl(40, 7%, 25%)",
+      "toolbar_field_border_focus": "hsl(43, 7%, 40%)",
+      "ntp_background": "hsl(38, 7%, 30%)",
+      "ntp_card_background": "hsl(40, 7%, 25%)",
+      "ntp_text": "hsl(0, 0%, 100%)",
+      "sidebar": "hsl(40, 7%, 25%)",
+      "sidebar_text": "hsl(0, 0%, 100%)",
+      "sidebar_highlight": "hsla(38, 7%, 70%, 0.3)",
+      "address_bar_box": "hsl(40, 7%, 25%)",
+      "address_bar_box_focus": "hsl(43, 7%, 42%)",
+      "address_bar_url_color": "hsl(40, 6%, 90%)",
+      "panel_item_hover": "hsla(38, 7%, 70%, 0.3)",
+      "panel_item_active": "hsla(38, 7%, 70%, 0.45)",
+      "panel_separator": "hsl(43, 7%, 40%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_focus": "--urlbar-box-focus-bgcolor",
+      "address_bar_url_color": "--urlbar-popup-url-color",
+      "panel_item_hover": "--panel-item-hover-bgcolor",
+      "panel_item_active": "--panel-item-active-bgcolor",
+      "panel_separator": "--panel-separator-color"
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/elemental/bold/preview.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="hsl(38, 7%, 30%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(40, 7%, 25%)" stroke="hsl(42, 7%, 38%)" stroke-width="1.5" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 100%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 100%)" />
+  <rect y="44" width="680" height="48" fill="hsl(43, 7%, 42%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="hsl(38, 7%, 30%)" />
+  <circle cx="130" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(0, 0%, 100%)" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/elemental/soft/icon.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
+      <stop stop-color="hsl(45, 6%, 88%)"/>
+      <stop offset="1" stop-color="hsl(30, 7%, 94%)"/>
+    </linearGradient>
+  </defs>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/elemental/soft/manifest.json
@@ -0,0 +1,56 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "firefox-elemental-soft@mozilla.org"
+    }
+  },
+  "name": "Elemental – Soft",
+  "author": "Mozilla",
+  "version": "1.0",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(48, 10%, 10%)",
+      "tab_text": "hsl(48, 10%, 10%)",
+      "tab_selected": "hsl(0, 0%, 100%)",
+      "tab_line": "transparent",
+      "frame": "hsl(45, 6%, 88%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(48, 10%, 10%)",
+      "popup_border": "hsl(48, 6%, 85%)",
+      "popup_highlight": "hsla(40, 7%, 73%, 0.4)",
+      "popup_highlight_text": "hsl(48, 10%, 10%)",
+      "toolbar": "hsl(30, 7%, 94%)",
+      "toolbar_text": "hsl(48, 10%, 10%)",
+      "toolbar_field": "hsl(45, 6%, 88%)",
+      "toolbar_field_text": "hsl(48, 10%, 10%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "hsl(48, 6%, 85%)",
+      "ntp_background": "hsl(60, 8%, 95%)",
+      "ntp_card_background": "hsl(0, 0%, 100%)",
+      "ntp_text": "hsl(48, 10%, 10%)",
+      "sidebar": "hsl(0, 0%, 100%)",
+      "sidebar_text": "hsl(48, 10%, 10%)",
+      "sidebar_highlight": "hsla(40, 7%, 73%, 0.4)",
+      "address_bar_box": "hsl(0, 0%, 100%)",
+      "address_bar_box_focus": "hsl(30, 7%, 94%)",
+      "address_bar_url_color": "hsl(42, 7%, 38%)",
+      "panel_item_hover": "hsla(40, 7%, 73%, 0.4)",
+      "panel_item_active": "hsla(40, 7%, 73%, 0.55)",
+      "panel_separator": "hsl(48, 6%, 85%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_focus": "--urlbar-box-focus-bgcolor",
+      "address_bar_url_color": "--urlbar-popup-url-color",
+      "panel_item_hover": "--panel-item-hover-bgcolor",
+      "panel_item_active": "--panel-item-active-bgcolor",
+      "panel_separator": "--panel-separator-color"
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/elemental/soft/preview.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="hsl(45, 6%, 88%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(48, 10%, 10%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(48, 10%, 10%)" />
+  <rect y="44" width="680" height="48" fill="hsl(30, 7%, 94%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(48, 10%, 10%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(48, 10%, 10%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(48, 10%, 10%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(48, 10%, 10%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(48, 10%, 10%)" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="hsl(45, 6%, 88%)" />
+  <circle cx="130" cy="68" r="6.25" stroke="hsl(48, 10%, 10%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(48, 10%, 10%)" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/foto/balanced/icon.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
+      <stop stop-color="hsl(351, 37%, 40%)"/>
+      <stop offset="1" stop-color="hsl(351, 37%, 47%)"/>
+    </linearGradient>
+  </defs>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/foto/balanced/manifest.json
@@ -0,0 +1,56 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "firefox-foto-balanced@mozilla.org"
+    }
+  },
+  "name": "Foto – Balanced",
+  "author": "Mozilla",
+  "version": "1.0",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 0%)",
+      "tab_selected": "hsl(349, 35%, 94%)",
+      "tab_line": "transparent",
+      "frame": "hsl(351, 37%, 40%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(351, 44%, 63%)",
+      "popup_highlight": "hsla(350, 53%, 75%, 0.5)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(351, 37%, 47%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(349, 35%, 94%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "hsl(351, 44%, 63%)",
+      "ntp_background": "hsl(351, 37%, 80%)",
+      "ntp_card_background": "hsl(0, 0%, 100%)",
+      "ntp_text": "hsl(0, 0%, 0%)",
+      "sidebar": "hsl(0, 0%, 100%)",
+      "sidebar_text": "hsl(0, 0%, 0%)",
+      "sidebar_highlight": "hsla(350, 53%, 75%, 0.5)",
+      "address_bar_box": "hsl(351, 37%, 40%)",
+      "address_bar_box_focus": "hsl(351, 37%, 47%)",
+      "address_bar_url_color": "hsl(351, 37%, 40%)",
+      "panel_item_hover": "hsla(350, 53%, 75%, 0.5)",
+      "panel_item_active": "hsla(350, 53%, 75%, 0.65)",
+      "panel_separator": "hsl(351, 44%, 63%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_focus": "--urlbar-box-focus-bgcolor",
+      "address_bar_url_color": "--urlbar-popup-url-color",
+      "panel_item_hover": "--panel-item-hover-bgcolor",
+      "panel_item_active": "--panel-item-active-bgcolor",
+      "panel_separator": "--panel-separator-color"
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/foto/balanced/preview.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="hsl(351, 37%, 40%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(349, 35%, 94%)" stroke="transparent" stroke-width="1.5" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 0%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 100%)" />
+  <rect y="44" width="680" height="48" fill="hsl(351, 37%, 47%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="hsl(349, 35%, 94%)" />
+  <circle cx="130" cy="68" r="6.25" stroke="hsl(0, 0%, 0%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(0, 0%, 0%)" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/foto/bold/icon.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
+      <stop stop-color="hsl(351, 32%, 42%)"/>
+      <stop offset="1" stop-color="hsl(351, 32%, 50%)"/>
+    </linearGradient>
+  </defs>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/foto/bold/manifest.json
@@ -0,0 +1,56 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "firefox-foto-bold@mozilla.org"
+    }
+  },
+  "name": "Foto – Bold",
+  "author": "Mozilla",
+  "version": "1.0",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 100%)",
+      "tab_selected": "hsl(351, 27%, 25%)",
+      "tab_line": "hsl(351, 31%, 52%)",
+      "frame": "hsl(351, 32%, 42%)",
+      "popup": "hsl(351, 27%, 25%)",
+      "popup_text": "hsl(0, 0%, 100%)",
+      "popup_border": "hsl(351, 32%, 46%)",
+      "popup_highlight": "hsla(351, 32%, 50%, 0.6)",
+      "popup_highlight_text": "hsl(0, 0%, 100%)",
+      "toolbar": "hsl(351, 32%, 50%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(351, 32%, 42%)",
+      "toolbar_field_text": "hsl(0, 0%, 100%)",
+      "toolbar_field_focus": "hsl(351, 27%, 25%)",
+      "toolbar_field_border_focus": "hsl(351, 32%, 46%)",
+      "ntp_background": "hsl(350, 14%, 17%)",
+      "ntp_card_background": "hsl(351, 27%, 25%)",
+      "ntp_text": "hsl(0, 0%, 100%)",
+      "sidebar": "hsl(351, 27%, 25%)",
+      "sidebar_text": "hsl(0, 0%, 100%)",
+      "sidebar_highlight": "hsla(351, 32%, 50%, 0.6)",
+      "address_bar_box": "hsl(351, 27%, 25%)",
+      "address_bar_box_focus": "hsl(351, 32%, 50%)",
+      "address_bar_url_color": "hsl(352, 57%, 90%)",
+      "panel_item_hover": "hsla(351, 32%, 50%, 0.6)",
+      "panel_item_active": "hsla(351, 32%, 50%, 0.75)",
+      "panel_separator": "hsl(351, 32%, 46%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_focus": "--urlbar-box-focus-bgcolor",
+      "address_bar_url_color": "--urlbar-popup-url-color",
+      "panel_item_hover": "--panel-item-hover-bgcolor",
+      "panel_item_active": "--panel-item-active-bgcolor",
+      "panel_separator": "--panel-separator-color"
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/foto/bold/preview.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="hsl(351, 32%, 42%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(351, 27%, 25%)" stroke="hsl(351, 31%, 52%)" stroke-width="1.5" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 100%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 100%)" />
+  <rect y="44" width="680" height="48" fill="hsl(351, 32%, 50%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="hsl(351, 32%, 42%)" />
+  <circle cx="130" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(0, 0%, 100%)" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/foto/soft/icon.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
+      <stop stop-color="hsl(352, 56%, 84%)"/>
+      <stop offset="1" stop-color="hsl(350, 46%, 87%)"/>
+    </linearGradient>
+  </defs>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/foto/soft/manifest.json
@@ -0,0 +1,56 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "firefox-foto-soft@mozilla.org"
+    }
+  },
+  "name": "Foto – Soft",
+  "author": "Mozilla",
+  "version": "1.0",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(351, 32%, 8%)",
+      "tab_text": "hsl(351, 32%, 8%)",
+      "tab_selected": "hsl(0, 0%, 100%)",
+      "tab_line": "transparent",
+      "frame": "hsl(352, 56%, 84%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(351, 32%, 8%)",
+      "popup_border": "hsl(350, 61%, 88%)",
+      "popup_highlight": "hsla(351, 52%, 82%, 0.5)",
+      "popup_highlight_text": "hsl(351, 32%, 8%)",
+      "toolbar": "hsl(350, 46%, 87%)",
+      "toolbar_text": "hsl(351, 32%, 8%)",
+      "toolbar_field": "hsl(352, 56%, 84%)",
+      "toolbar_field_text": "hsl(351, 32%, 8%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "hsl(350, 61%, 88%)",
+      "ntp_background": "hsl(354, 33%, 94%)",
+      "ntp_card_background": "hsl(0, 0%, 100%)",
+      "ntp_text": "hsl(351, 32%, 8%)",
+      "sidebar": "hsl(0, 0%, 100%)",
+      "sidebar_text": "hsl(351, 32%, 8%)",
+      "sidebar_highlight": "hsla(351, 52%, 82%, 0.5)",
+      "address_bar_box": "hsl(0, 0%, 100%)",
+      "address_bar_box_focus": "hsl(350, 46%, 87%)",
+      "address_bar_url_color": "hsl(351, 37%, 40%)",
+      "panel_item_hover": "hsla(351, 52%, 82%, 0.5)",
+      "panel_item_active": "hsla(351, 52%, 82%, 0.65)",
+      "panel_separator": "hsl(350, 61%, 88%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_focus": "--urlbar-box-focus-bgcolor",
+      "address_bar_url_color": "--urlbar-popup-url-color",
+      "panel_item_hover": "--panel-item-hover-bgcolor",
+      "panel_item_active": "--panel-item-active-bgcolor",
+      "panel_separator": "--panel-separator-color"
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/foto/soft/preview.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="hsl(352, 56%, 84%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(351, 32%, 8%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(351, 32%, 8%)" />
+  <rect y="44" width="680" height="48" fill="hsl(350, 46%, 87%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(351, 32%, 8%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(351, 32%, 8%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(351, 32%, 8%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(351, 32%, 8%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(351, 32%, 8%)" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="hsl(352, 56%, 84%)" />
+  <circle cx="130" cy="68" r="6.25" stroke="hsl(351, 32%, 8%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(351, 32%, 8%)" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/graffiti/balanced/icon.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
+      <stop stop-color="hsl(278, 33%, 40%)"/>
+      <stop offset="1" stop-color="hsl(279, 29%, 52%)"/>
+    </linearGradient>
+  </defs>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/graffiti/balanced/manifest.json
@@ -0,0 +1,56 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "firefox-graffiti-balanced@mozilla.org"
+    }
+  },
+  "name": "Graffiti – Balanced",
+  "author": "Mozilla",
+  "version": "1.0",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 0%)",
+      "tab_selected": "hsl(278, 31%, 95%)",
+      "tab_line": "transparent",
+      "frame": "hsl(278, 33%, 40%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(278, 32%, 50%)",
+      "popup_highlight": "hsla(278, 80%, 78%, 0.4)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(279, 29%, 52%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(278, 31%, 95%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "hsl(278, 32%, 50%)",
+      "ntp_background": "hsl(277, 30%, 86%)",
+      "ntp_card_background": "hsl(0, 0%, 100%)",
+      "ntp_text": "hsl(0, 0%, 0%)",
+      "sidebar": "hsl(0, 0%, 100%)",
+      "sidebar_text": "hsl(0, 0%, 0%)",
+      "sidebar_highlight": "hsla(278, 80%, 78%, 0.4)",
+      "address_bar_box": "hsl(278, 33%, 40%)",
+      "address_bar_box_focus": "hsl(279, 29%, 52%)",
+      "address_bar_url_color": "hsl(278, 32%, 35%)",
+      "panel_item_hover": "hsla(278, 80%, 78%, 0.4)",
+      "panel_item_active": "hsla(278, 80%, 78%, 0.55)",
+      "panel_separator": "hsl(278, 32%, 50%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_focus": "--urlbar-box-focus-bgcolor",
+      "address_bar_url_color": "--urlbar-popup-url-color",
+      "panel_item_hover": "--panel-item-hover-bgcolor",
+      "panel_item_active": "--panel-item-active-bgcolor",
+      "panel_separator": "--panel-separator-color"
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/graffiti/balanced/preview.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="hsl(278, 33%, 40%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(278, 31%, 95%)" stroke="transparent" stroke-width="1.5" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 0%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 100%)" />
+  <rect y="44" width="680" height="48" fill="hsl(279, 29%, 52%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="hsl(278, 31%, 95%)" />
+  <circle cx="130" cy="68" r="6.25" stroke="hsl(0, 0%, 0%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(0, 0%, 0%)" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/graffiti/bold/icon.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
+      <stop stop-color="hsl(278, 32%, 35%)"/>
+      <stop offset="1" stop-color="hsl(278, 27%, 48%)"/>
+    </linearGradient>
+  </defs>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/graffiti/bold/manifest.json
@@ -0,0 +1,56 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "firefox-graffiti-bold@mozilla.org"
+    }
+  },
+  "name": "Graffiti – Bold",
+  "author": "Mozilla",
+  "version": "1.0",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 100%)",
+      "tab_selected": "hsl(275, 15%, 22%)",
+      "tab_line": "hsl(278, 32%, 50%)",
+      "frame": "hsl(278, 32%, 35%)",
+      "popup": "hsl(275, 15%, 22%)",
+      "popup_text": "hsl(0, 0%, 100%)",
+      "popup_border": "hsl(278, 30%, 42%)",
+      "popup_highlight": "hsla(278, 33%, 52%, 0.6)",
+      "popup_highlight_text": "hsl(0, 0%, 100%)",
+      "toolbar": "hsl(278, 27%, 48%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(278, 32%, 35%)",
+      "toolbar_field_text": "hsl(0, 0%, 100%)",
+      "toolbar_field_focus": "hsl(275, 15%, 22%)",
+      "toolbar_field_border_focus": "hsl(278, 30%, 42%)",
+      "ntp_background": "hsl(270, 10%, 12%)",
+      "ntp_card_background": "hsl(275, 15%, 22%)",
+      "ntp_text": "hsl(0, 0%, 100%)",
+      "sidebar": "hsl(275, 15%, 22%)",
+      "sidebar_text": "hsl(0, 0%, 100%)",
+      "sidebar_highlight": "hsla(278, 33%, 52%, 0.6)",
+      "address_bar_box": "hsl(275, 15%, 22%)",
+      "address_bar_box_focus": "hsl(278, 27%, 48%)",
+      "address_bar_url_color": "hsl(278, 80%, 88%)",
+      "panel_item_hover": "hsla(278, 33%, 52%, 0.6)",
+      "panel_item_active": "hsla(278, 33%, 52%, 0.75)",
+      "panel_separator": "hsl(278, 30%, 42%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_focus": "--urlbar-box-focus-bgcolor",
+      "address_bar_url_color": "--urlbar-popup-url-color",
+      "panel_item_hover": "--panel-item-hover-bgcolor",
+      "panel_item_active": "--panel-item-active-bgcolor",
+      "panel_separator": "--panel-separator-color"
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/graffiti/bold/preview.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="hsl(278, 32%, 35%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(275, 15%, 22%)" stroke="hsl(278, 32%, 50%)" stroke-width="1.5" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 100%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 100%)" />
+  <rect y="44" width="680" height="48" fill="hsl(278, 27%, 48%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="hsl(278, 32%, 35%)" />
+  <circle cx="130" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(0, 0%, 100%)" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/graffiti/soft/icon.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
+      <stop stop-color="hsl(278, 80%, 80%)"/>
+      <stop offset="1" stop-color="hsl(278, 79%, 85%)"/>
+    </linearGradient>
+  </defs>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/graffiti/soft/manifest.json
@@ -0,0 +1,56 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "firefox-graffiti-soft@mozilla.org"
+    }
+  },
+  "name": "Graffiti – Soft",
+  "author": "Mozilla",
+  "version": "1.0",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(278, 22%, 10%)",
+      "tab_text": "hsl(278, 22%, 10%)",
+      "tab_selected": "hsl(0, 0%, 100%)",
+      "tab_line": "transparent",
+      "frame": "hsl(278, 80%, 80%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(278, 22%, 10%)",
+      "popup_border": "hsl(278, 80%, 86%)",
+      "popup_highlight": "hsla(278, 80%, 78%, 0.4)",
+      "popup_highlight_text": "hsl(278, 22%, 10%)",
+      "toolbar": "hsl(278, 79%, 85%)",
+      "toolbar_text": "hsl(278, 22%, 10%)",
+      "toolbar_field": "hsl(278, 80%, 80%)",
+      "toolbar_field_text": "hsl(278, 22%, 10%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "hsl(278, 80%, 86%)",
+      "ntp_background": "hsl(279, 77%, 95%)",
+      "ntp_card_background": "hsl(0, 0%, 100%)",
+      "ntp_text": "hsl(278, 22%, 10%)",
+      "sidebar": "hsl(0, 0%, 100%)",
+      "sidebar_text": "hsl(278, 22%, 10%)",
+      "sidebar_highlight": "hsla(278, 80%, 78%, 0.4)",
+      "address_bar_box": "hsl(0, 0%, 100%)",
+      "address_bar_box_focus": "hsl(278, 79%, 85%)",
+      "address_bar_url_color": "hsl(278, 33%, 44%)",
+      "panel_item_hover": "hsla(278, 80%, 78%, 0.4)",
+      "panel_item_active": "hsla(278, 80%, 78%, 0.55)",
+      "panel_separator": "hsl(278, 80%, 86%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_focus": "--urlbar-box-focus-bgcolor",
+      "address_bar_url_color": "--urlbar-popup-url-color",
+      "panel_item_hover": "--panel-item-hover-bgcolor",
+      "panel_item_active": "--panel-item-active-bgcolor",
+      "panel_separator": "--panel-separator-color"
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/graffiti/soft/preview.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="hsl(278, 80%, 80%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(278, 22%, 10%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(278, 22%, 10%)" />
+  <rect y="44" width="680" height="48" fill="hsl(278, 79%, 85%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(278, 22%, 10%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(278, 22%, 10%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(278, 22%, 10%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(278, 22%, 10%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(278, 22%, 10%)" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="hsl(278, 80%, 80%)" />
+  <circle cx="130" cy="68" r="6.25" stroke="hsl(278, 22%, 10%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(278, 22%, 10%)" />
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/lush/balanced/icon.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
+      <stop stop-color="hsl(144, 16%, 30%)"/>
+      <stop offset="1" stop-color="hsl(146, 15%, 36%)"/>
+    </linearGradient>
+  </defs>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/lush/balanced/manifest.json
@@ -0,0 +1,56 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "firefox-lush-balanced@mozilla.org"
+    }
+  },
+  "name": "Lush – Balanced",
+  "author": "Mozilla",
+  "version": "1.0",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(0, 0%, 100%)",
+      "tab_text": "hsl(0, 0%, 0%)",
+      "tab_selected": "hsl(120, 7%, 94%)",
+      "tab_line": "transparent",
+      "frame": "hsl(144, 16%, 30%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(0, 0%, 0%)",
+      "popup_border": "hsl(145, 25%, 50%)",
+      "popup_highlight": "hsla(145, 36%, 40%, 0.3)",
+      "popup_highlight_text": "hsl(0, 0%, 0%)",
+      "toolbar": "hsl(146, 15%, 36%)",
+      "toolbar_text": "hsl(0, 0%, 100%)",
+      "toolbar_field": "hsl(120, 7%, 94%)",
+      "toolbar_field_text": "hsl(0, 0%, 0%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "hsl(145, 25%, 50%)",
+      "ntp_background": "hsl(140, 10%, 82%)",
+      "ntp_card_background": "hsl(0, 0%, 100%)",
+      "ntp_text": "hsl(0, 0%, 0%)",
+      "sidebar": "hsl(0, 0%, 100%)",
+      "sidebar_text": "hsl(0, 0%, 0%)",
+      "sidebar_highlight": "hsla(145, 36%, 40%, 0.3)",
+      "address_bar_box": "hsl(144, 16%, 30%)",
+      "address_bar_box_focus": "hsl(146, 15%, 36%)",
+      "address_bar_url_color": "hsl(138, 16%, 32%)",
+      "panel_item_hover": "hsla(145, 36%, 40%, 0.3)",
+      "panel_item_active": "hsla(145, 36%, 40%, 0.45)",
+      "panel_separator": "hsl(145, 25%, 50%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_focus": "--urlbar-box-focus-bgcolor",
+      "address_bar_url_color": "--urlbar-popup-url-color",
+      "panel_item_hover": "--panel-item-hover-bgcolor",
+      "panel_item_active": "--panel-item-active-bgcolor",
+      "panel_separator": "--panel-separator-color"
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/lush/balanced/preview.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="hsl(144, 16%, 30%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(120, 7%, 94%)" stroke="transparent" stroke-width="1.5" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 0%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(0, 0%, 100%)" />
+  <rect y="44" width="680" height="48" fill="hsl(146, 15%, 36%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(0, 0%, 100%)" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="hsl(120, 7%, 94%)" />
+  <circle cx="130" cy="68" r="6.25" stroke="hsl(0, 0%, 0%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(0, 0%, 0%)" />
+</svg>
--- a/browser/themes/addons/monochromatic/lush/bold/manifest.json
+++ b/browser/themes/addons/monochromatic/lush/bold/manifest.json
@@ -1,16 +1,16 @@
 {
   "manifest_version": 2,
   "applications": {
     "gecko": {
       "id": "firefox-lush-bold@mozilla.org"
     }
   },
-  "name": "Lush — Bold",
+  "name": "Lush – Bold",
   "author": "Mozilla",
   "version": "1.0",
   "icons": {
     "32": "icon.svg"
   },
   "theme": {
     "colors": {
       "tab_background_text": "hsl(0, 0%, 100%)",
@@ -32,27 +32,25 @@
       "ntp_background": "hsl(150, 2%, 20%)",
       "ntp_card_background": "hsl(140, 2%, 28%)",
       "ntp_text": "hsl(0, 0%, 100%)",
       "sidebar": "hsl(140, 2%, 28%)",
       "sidebar_text": "hsl(0, 0%, 100%)",
       "sidebar_highlight": "hsla(137, 18%, 50%, 0.42)",
       "address_bar_box": "hsl(140, 2%, 28%)",
       "address_bar_box_focus": "hsl(138, 15%, 44%)",
-      "address_bar_box_text": "hsl(0, 0%, 100%)",
       "address_bar_url_color": "hsl(146, 44%, 86%)",
       "panel_item_hover": "hsla(137, 18%, 50%, 0.42)",
       "panel_item_active": "hsla(137, 18%, 50%, 0.57)",
       "panel_separator": "hsl(140, 10%, 35%)"
     }
   },
   "theme_experiment": {
     "colors": {
       "address_bar_box": "--urlbar-box-bgcolor",
       "address_bar_box_focus": "--urlbar-box-focus-bgcolor",
-      "address_bar_box_text": "--urlbar-box-text-color",
       "address_bar_url_color": "--urlbar-popup-url-color",
       "panel_item_hover": "--panel-item-hover-bgcolor",
       "panel_item_active": "--panel-item-active-bgcolor",
       "panel_separator": "--panel-separator-color"
     }
   }
 }
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/lush/soft/icon.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="63" height="62" viewBox="0 0 63 62" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="31.5" cy="31" r="31" fill="url(#paint0_linear)"/>
+  <defs>
+    <linearGradient id="paint0_linear" x1="44.4829" y1="19" x2="10.4829" y2="53" gradientUnits="userSpaceOnUse">
+      <stop stop-color="hsl(147, 25%, 86%)"/>
+      <stop offset="1" stop-color="hsl(140, 26%, 93%)"/>
+    </linearGradient>
+  </defs>
+</svg>
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/lush/soft/manifest.json
@@ -0,0 +1,56 @@
+{
+  "manifest_version": 2,
+  "applications": {
+    "gecko": {
+      "id": "firefox-lush-soft@mozilla.org"
+    }
+  },
+  "name": "Lush – Soft",
+  "author": "Mozilla",
+  "version": "1.0",
+  "icons": {
+    "32": "icon.svg"
+  },
+  "theme": {
+    "colors": {
+      "tab_background_text": "hsl(150, 6%, 20%)",
+      "tab_text": "hsl(150, 6%, 20%)",
+      "tab_selected": "hsl(0, 0%, 100%)",
+      "tab_line": "transparent",
+      "frame": "hsl(147, 25%, 86%)",
+      "popup": "hsl(0, 0%, 100%)",
+      "popup_text": "hsl(150, 6%, 20%)",
+      "popup_border": "hsl(144, 25%, 88%)",
+      "popup_highlight": "hsla(143, 25%, 86%, 0.7)",
+      "popup_highlight_text": "hsl(150, 6%, 20%)",
+      "toolbar": "hsl(140, 26%, 93%)",
+      "toolbar_text": "hsl(150, 6%, 20%)",
+      "toolbar_field": "hsl(147, 25%, 86%)",
+      "toolbar_field_text": "hsl(150, 6%, 20%)",
+      "toolbar_field_focus": "hsl(0, 0%, 100%)",
+      "toolbar_field_border_focus": "hsl(144, 25%, 88%)",
+      "ntp_background": "hsl(150, 25%, 97%)",
+      "ntp_card_background": "hsl(0, 0%, 100%)",
+      "ntp_text": "hsl(150, 6%, 20%)",
+      "sidebar": "hsl(0, 0%, 100%)",
+      "sidebar_text": "hsl(150, 6%, 20%)",
+      "sidebar_highlight": "hsla(143, 25%, 86%, 0.7)",
+      "address_bar_box": "hsl(0, 0%, 100%)",
+      "address_bar_box_focus": "hsl(140, 26%, 93%)",
+      "address_bar_url_color": "hsl(145, 24%, 32%)",
+      "panel_item_hover": "hsla(143, 25%, 86%, 0.7)",
+      "panel_item_active": "hsla(143, 25%, 86%, 0.85)",
+      "panel_separator": "hsl(144, 25%, 88%)"
+    }
+  },
+  "theme_experiment": {
+    "colors": {
+      "address_bar_box": "--urlbar-box-bgcolor",
+      "address_bar_box_focus": "--urlbar-box-focus-bgcolor",
+      "address_bar_url_color": "--urlbar-popup-url-color",
+      "panel_item_hover": "--panel-item-hover-bgcolor",
+      "panel_item_active": "--panel-item-active-bgcolor",
+      "panel_separator": "--panel-separator-color"
+    }
+  }
+}
new file mode 100644
--- /dev/null
+++ b/browser/themes/addons/monochromatic/lush/soft/preview.svg
@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="680" height="92" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="680" height="92" fill="hsl(147, 25%, 86%)" />
+  <rect x="28" y="5" width="166" height="34" rx="4" fill="hsl(0, 0%, 100%)" stroke="transparent" stroke-width="1.5" />
+  <rect x="51" y="20" width="121" height="4" rx="2" fill="hsl(150, 6%, 20%)" />
+  <rect x="221" y="20" width="121" height="4" rx="2" fill="hsl(150, 6%, 20%)" />
+  <rect y="44" width="680" height="48" fill="hsl(140, 26%, 93%)" />
+  <circle cx="24" cy="68" r="6.25" stroke="hsl(150, 6%, 20%)" stroke-width="1.5" />
+  <circle cx="60" cy="68" r="6.25" stroke="hsl(150, 6%, 20%)" stroke-width="1.5" />
+  <line x1="663" y1="73.75" x2="649" y2="73.75" stroke="hsl(150, 6%, 20%)" stroke-width="1.5" />
+  <line x1="663" y1="67.75" x2="649" y2="67.75" stroke="hsl(150, 6%, 20%)" stroke-width="1.5" />
+  <line x1="663" y1="61.75" x2="649" y2="61.75" stroke="hsl(150, 6%, 20%)" stroke-width="1.5" />
+  <rect x="114" y="52" width="488" height="32" rx="4" fill="hsl(147, 25%, 86%)" />
+  <circle cx="130" cy="68" r="6.25" stroke="hsl(150, 6%, 20%)" stroke-width="1.5" />
+  <rect x="146" y="66" width="308" height="4" rx="2" fill="hsl(150, 6%, 20%)" />
+</svg>
--- a/toolkit/mozapps/extensions/content/aboutaddons.js
+++ b/toolkit/mozapps/extensions/content/aboutaddons.js
@@ -91,19 +91,87 @@ const BUILTIN_THEME_PREVIEWS = new Map([
     "firefox-compact-dark@mozilla.org",
     "resource://builtin-themes/dark/preview.svg",
   ],
   [
     "firefox-alpenglow@mozilla.org",
     "resource://builtin-themes/alpenglow/preview.svg",
   ],
   [
+    "firefox-lush-soft@mozilla.org",
+    "resource://builtin-themes/monochromatic/lush/soft/preview.svg",
+  ],
+  [
+    "firefox-lush-balanced@mozilla.org",
+    "resource://builtin-themes/monochromatic/lush/balanced/preview.svg",
+  ],
+  [
     "firefox-lush-bold@mozilla.org",
     "resource://builtin-themes/monochromatic/lush/bold/preview.svg",
   ],
+  [
+    "firefox-abstract-soft@mozilla.org",
+    "resource://builtin-themes/monochromatic/abstract/soft/preview.svg",
+  ],
+  [
+    "firefox-abstract-balanced@mozilla.org",
+    "resource://builtin-themes/monochromatic/abstract/balanced/preview.svg",
+  ],
+  [
+    "firefox-abstract-bold@mozilla.org",
+    "resource://builtin-themes/monochromatic/abstract/bold/preview.svg",
+  ],
+  [
+    "firefox-elemental-soft@mozilla.org",
+    "resource://builtin-themes/monochromatic/elemental/soft/preview.svg",
+  ],
+  [
+    "firefox-elemental-balanced@mozilla.org",
+    "resource://builtin-themes/monochromatic/elemental/balanced/preview.svg",
+  ],
+  [
+    "firefox-elemental-bold@mozilla.org",
+    "resource://builtin-themes/monochromatic/elemental/bold/preview.svg",
+  ],
+  [
+    "firefox-cheers-soft@mozilla.org",
+    "resource://builtin-themes/monochromatic/cheers/soft/preview.svg",
+  ],
+  [
+    "firefox-cheers-balanced@mozilla.org",
+    "resource://builtin-themes/monochromatic/cheers/balanced/preview.svg",
+  ],
+  [
+    "firefox-cheers-bold@mozilla.org",
+    "resource://builtin-themes/monochromatic/cheers/bold/preview.svg",
+  ],
+  [
+    "firefox-graffiti-soft@mozilla.org",
+    "resource://builtin-themes/monochromatic/graffiti/soft/preview.svg",
+  ],
+  [
+    "firefox-graffiti-balanced@mozilla.org",
+    "resource://builtin-themes/monochromatic/graffiti/balanced/preview.svg",
+  ],
+  [
+    "firefox-graffiti-bold@mozilla.org",
+    "resource://builtin-themes/monochromatic/graffiti/bold/preview.svg",
+  ],
+  [
+    "firefox-foto-soft@mozilla.org",
+    "resource://builtin-themes/monochromatic/foto/soft/preview.svg",
+  ],
+  [
+    "firefox-foto-balanced@mozilla.org",
+    "resource://builtin-themes/monochromatic/foto/balanced/preview.svg",
+  ],
+  [
+    "firefox-foto-bold@mozilla.org",
+    "resource://builtin-themes/monochromatic/foto/bold/preview.svg",
+  ],
 ]);
 
 const PERMISSION_MASKS = {
   enable: AddonManager.PERM_CAN_ENABLE,
   "always-activate": AddonManager.PERM_CAN_ENABLE,
   disable: AddonManager.PERM_CAN_DISABLE,
   "never-activate": AddonManager.PERM_CAN_DISABLE,
   uninstall: AddonManager.PERM_CAN_UNINSTALL,